.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: var(--z-sidebar); height: 100vh; display: flex; flex-direction: column; min-width: 0; background: var(--black); border-right: 1px solid var(--rule); }
.sidebar-brand { height: var(--header-height); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.sidebar-close { position: absolute; top: 13px; right: 12px; display: none; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid var(--rule-high); color: var(--dim); background: var(--black); }
.sidebar-close:hover { color: var(--green); border-color: var(--green); }
.sidebar-close .icon { width: 15px; height: 15px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-copy { min-width: 0; font-family: var(--display); font-size: 17px; font-weight: 750; font-variation-settings: "wdth" 84; letter-spacing: -.03em; }
.brand-copy small { display: block; margin-top: 2px; color: var(--dim); font: 500 9px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.sidebar-scroll { flex: 1; min-height: 0; padding: 14px 12px; overflow-y: auto; }
.nav-group { display: none; }
.nav-group.is-active { display: block; }
.nav-group + .nav-group { margin-top: 6px; }
.nav-heading { padding: 8px 12px 10px; color: var(--faint); font-family: var(--nav-display); font-size: 11px; font-weight: 700; letter-spacing: .18em; line-height: 1; text-transform: uppercase; }
.nav-list { list-style: none; padding: 0; }
.nav-link { position: relative; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 11px 0 10px; border: 0; border-left: 2px solid transparent; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color var(--fast), background var(--fast), border-color var(--fast); }
.nav-link:hover { color: var(--green); background: rgba(57,255,106,.035); border-left-color: rgba(57,255,106,.34); }
.nav-link[aria-current="page"] { color: var(--green); background: rgba(57,255,106,.065); border-left-color: var(--green); }
.nav-link .icon { width: 15px; height: 15px; flex: none; color: var(--faint); transition: color var(--fast); }
.nav-link:hover .icon, .nav-link[aria-current="page"] .icon { color: var(--green); }
.nav-text { min-width: 0; overflow: hidden; font-family: var(--nav-display); font-size: 13px; font-weight: 700; letter-spacing: .11em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; }
.nav-count { min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; display: grid; place-items: center; color: var(--magenta); background: var(--magenta-deep); font-size: 10px; font-weight: 700; }
.nav-count:empty { display: none; }
.sidebar-utilities { flex: none; padding: 7px 12px; border-top: 1px solid var(--rule); }
.operator-card { flex: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--rule); }
.operator-avatar { width: 30px; height: 30px; display: grid; place-items: center; color: var(--green); background: var(--green-deep); font-size: 10px; font-weight: 700; }
.operator-copy { min-width: 0; }
.operator-copy b { display: block; overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.operator-copy span { color: var(--dim); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.presence { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 0 3px var(--green-deep); }
.shell-main { min-width: 0; min-height: 100vh; background: var(--black); }
.topbar { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-height); display: flex; align-items: center; gap: 20px; padding: 0 22px; background: rgba(5,5,5,.96); border-bottom: 1px solid var(--rule); }
.workarea-tabs { min-width: 0; align-self: stretch; display: flex; align-items: stretch; gap: clamp(14px, 2.2vw, 34px); }
.workarea-tab { position: relative; flex: none; display: flex; align-items: center; color: var(--dim); font-family: var(--nav-display); font-size: 14px; font-weight: 700; letter-spacing: .18em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: color var(--fast); }
.workarea-tab::after { position: absolute; right: .18em; bottom: -1px; left: 0; height: 1px; background: var(--green); content: ""; opacity: 0; transform: scaleX(.25); transform-origin: left; transition: opacity var(--fast), transform var(--fast); }
.workarea-tab:hover, .workarea-tab[aria-current="location"] { color: var(--green); }
.workarea-tab:hover::after, .workarea-tab[aria-current="location"]::after { opacity: 1; transform: scaleX(1); }
.mobile-route-copy { min-width: 0; display: none; }
.mobile-route-copy span { display: block; color: var(--faint); font-size: 10px; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.mobile-route-copy strong { display: block; margin-top: 4px; overflow: hidden; font-family: var(--display); font-size: 13px; font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.live-state { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.live-state::before { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 0 3px var(--green-deep); content: ""; }
.utc-clock { min-width: 72px; color: var(--body); font-size: 11px; text-align: right; }
.mobile-menu { display: none; width: 34px; height: 34px; place-items: center; flex: none; padding: 0; border: 1px solid var(--rule-high); background: transparent; }
.mobile-menu .icon { width: 16px; height: 16px; }
.view-content { min-width: 0; }
.sidebar-scrim { display: none; }

@media (max-width: 1179px) and (min-width: 821px) {
  .app-shell { grid-template-columns: var(--sidebar-compact) minmax(0,1fr); }
  .sidebar-brand { justify-content: center; padding: 0; }
  .brand-copy, .nav-heading, .nav-text, .nav-count, .operator-copy, .presence { display: none; }
  .sidebar-scroll { padding-inline: 10px; }
  .nav-link { justify-content: center; padding: 0; }
  .operator-card { grid-template-columns: 1fr; padding-inline: 19px; }
  .nav-link::after { position: fixed; left: 60px; padding: 7px 9px; color: var(--text); background: var(--panel); border: 1px solid var(--rule-high); content: attr(aria-label); font-family: var(--mono); font-size: 11px; letter-spacing: 0; opacity: 0; pointer-events: none; text-transform: none; transform: translateX(4px); transition: opacity var(--fast), transform var(--fast); }
  .nav-link:hover::after, .nav-link:focus-visible::after { opacity: 1; transform: translateX(0); }
  .topbar { gap: 14px; padding-inline: 18px; }
  .workarea-tabs { gap: clamp(10px, 1.5vw, 20px); }
  .workarea-tab { font-size: 12px; letter-spacing: .12em; }
}

@media (max-width: 980px) and (min-width: 821px) {
  .utc-clock { display: none; }
  .topbar-actions { gap: 8px; }
  .live-state { font-size: 0; }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform var(--normal) var(--ease-out); }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .sidebar-scroll { padding: 10px; }
  .nav-group, .nav-group.is-active { display: block; }
  .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); display: block; border: 0; background: rgba(0,0,0,.72); opacity: 0; pointer-events: none; transition: opacity var(--normal); }
  .app-shell.nav-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .workarea-tabs { display: none; }
  .sidebar-close { display: grid; }
  .mobile-menu { display: grid; }
  .mobile-route-copy { display: block; }
  .topbar { gap: 12px; padding-inline: 14px; }
  .topbar-actions { gap: 10px; }
  .live-state { font-size: 0; }
  .utc-clock { display: none; }
}

/* Login screen (session gate — rendered instead of the shell) */
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--black); }
.login-card { width: min(360px, 100%); display: grid; gap: 14px; padding: 26px 24px 24px; background: var(--buffer); border: 1px solid var(--rule); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-mark { width: 34px; height: 34px; }
.login-card h1 { font-family: var(--display); font-size: 19px; font-weight: 650; font-variation-settings: "wdth" 88; letter-spacing: -.02em; }
.login-sub { color: var(--dim); font-size: 11px; line-height: 1.5; }
.login-card .field label { color: var(--dim); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.login-card .field input { min-height: 38px; padding: 8px 10px; font-size: 13px; }
.login-error { min-height: 16px; color: var(--danger); font-size: 11px; }
.login-submit { min-height: 38px; justify-content: center; font-size: 12px; }
.login-submit:disabled { opacity: .55; cursor: wait; }