:root {
    --bg-0:       #07090c;
    --bg-1:       #0b0f14;
    --bg-2:       #10161d;
    --bg-3:       #161e27;
    --surface:    #0f151c;
    --surface-2:  #131b23;
    --surface-3:  #1a232d;
    --line:       #1c2733;
    --line-2:     #243140;
    --line-3:     #2d3d4f;

    --ink-0:      #e6edf3;
    --ink-1:      #b8c2cc;
    --ink-2:      #7c8794;
    --ink-3:      #4f5a67;
    --ink-4:      #2f3a47;

    --cyan:       #22d3ee;
    --cyan-soft:  rgba(34,211,238,0.10);
    --cyan-line:  rgba(34,211,238,0.28);

    --green:      #4ade80;
    --green-soft: rgba(74,222,128,0.10);
    --green-line: rgba(74,222,128,0.28);

    --amber:      #fbbf24;
    --amber-soft: rgba(251,191,36,0.10);
    --amber-line: rgba(251,191,36,0.28);

    --violet:     #c084fc;
    --violet-soft:rgba(192,132,252,0.10);
    --violet-line:rgba(192,132,252,0.28);

    --red:        #f87171;
    --red-soft:   rgba(248,113,113,0.10);
    --red-line:   rgba(248,113,113,0.28);

    --mono:       'Cascadia Mono', Consolas, SFMono-Regular, Menlo, ui-monospace, monospace;
    --sans:       'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
    --shell-inline: max(12px, calc((100vw - 1680px) / 2 + 22px));
    --shell-top: 12px;
    --shell-topbar-height: 52px;
    --shell-nav-top: 80px;
    --shell-content-top: 148px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 16px 42px rgba(0,0,0,0.22);
    --shadow-soft: 0 10px 28px rgba(0,0,0,0.16);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body {
    background: var(--bg-0);
    color: var(--ink-0);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(900px 500px at 80% -100px, rgba(34,211,238,0.06), transparent 60%),
      radial-gradient(700px 400px at 0% 100%, rgba(74,222,128,0.04), transparent 60%);
    background-attachment: fixed;
  }

  /* =============== ADMIN LOGIN =============== */
  .login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      radial-gradient(700px 420px at 70% 10%, rgba(34,211,238,0.10), transparent 60%),
      radial-gradient(520px 360px at 20% 90%, rgba(192,132,252,0.08), transparent 60%),
      var(--bg-0);
  }
  .login-card {
    width: min(420px, 100%);
    background: rgba(15, 21, 28, 0.94);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 24px 90px rgba(0,0,0,0.58), 0 0 0 1px rgba(34,211,238,0.06);
    overflow: hidden;
  }
  .login-head {
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(34,211,238,0.07), rgba(192,132,252,0.04));
  }
  .login-head .brand {
    margin-bottom: 18px;
  }
  .login-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .login-sub {
    margin-top: 6px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.55;
  }
  .login-body {
    padding: 22px 24px 24px;
  }
  .login-auth-alert[hidden] {
    display: none !important;
  }
  .login-auth-alert {
    margin: 0 0 14px;
    border: 1px solid var(--amber-line);
    border-radius: 8px;
    background: var(--amber-soft);
    color: var(--amber);
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.45;
  }
  .login-google {
    width: 100%;
    margin: 0 0 14px;
    border: 1px solid rgba(230,237,243,0.18);
    border-radius: 8px;
    background: rgba(230,237,243,0.06);
    color: var(--ink-0);
    padding: 12px 14px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .login-google:hover {
    border-color: rgba(34,211,238,0.44);
    background: rgba(34,211,238,0.10);
  }
  .login-message {
    min-height: 18px;
    margin-top: 12px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 11px;
  }
  .login-note {
    margin-top: 16px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.55;
  }
  .admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    color: var(--ink-1);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 10.5px;
  }
  .logout-btn {
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    padding: 7px 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .logout-btn:hover {
    color: var(--red);
    border-color: var(--red-line);
    background: var(--red-soft);
  }

  /* =============== APP SHELL =============== */
  .app {
    display: block;
    min-height: 100vh;
  }
  .main {
    width: min(1680px, 100%);
    margin: 0 auto;
    padding: var(--shell-content-top) 22px 80px;
    min-width: 0;
  }
  .console-nav {
    position: fixed;
    top: var(--shell-nav-top);
    left: var(--shell-inline);
    right: var(--shell-inline);
    z-index: 71;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 6px;
    border: 1px solid rgba(34,211,238,0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(11,15,20,0.92), rgba(7,9,12,0.86));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.035);
  }
  .console-nav-btn {
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
  }
  .console-nav-btn span {
    color: var(--ink-3);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .console-nav-btn:hover {
    color: var(--ink-0);
    border-color: var(--line-2);
    background: rgba(255,255,255,0.025);
  }
  .console-nav-btn.active {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: linear-gradient(135deg, rgba(34,211,238,0.14), rgba(34,211,238,0.045));
    box-shadow: inset 0 0 18px rgba(34,211,238,0.05);
  }
  .console-nav-btn.active span { color: var(--ink-1); }
  .console-view {
    display: none;
    opacity: 1;
    transform: none;
    backface-visibility: hidden;
  }
  .console-view.active {
    display: block;
    opacity: 1;
    transform: none;
    animation: none;
  }
  .console-view.leaving {
    display: none;
    pointer-events: none;
    animation: none;
  }
  body.overview-map-mode {
    overflow: hidden;
  }
  body.overview-map-mode .main {
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  body.overview-map-mode .topbar {
    top: var(--shell-top);
    left: var(--shell-inline);
    right: var(--shell-inline);
  }
  body.overview-map-mode .console-nav {
    top: var(--shell-nav-top);
    left: var(--shell-inline);
    right: var(--shell-inline);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.overview-map-mode #view-overview {
    width: 100vw;
    height: 100vh;
  }
  body.overview-map-mode #view-overview .view-heading {
    display: none;
  }
  .view-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 6px 0 16px;
  }
  .view-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink-0);
  }
  .view-subtitle {
    margin-top: 4px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.55;
  }
  .overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
  }
  .overview-card,
  .ops-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006)),
      var(--surface);
    border: 1px solid rgba(36,49,64,0.92);
    border-radius: var(--radius-md);
    padding: 14px;
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.028);
  }
  .overview-card {
    min-height: 150px;
  }
  .operations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .overview-event-panel {
    margin-bottom: 16px;
  }
  .overview-event-panel .event-log {
    min-height: 180px;
    max-height: 260px;
  }
  .event-panel .event-log {
    min-height: 360px;
    max-height: 62vh;
  }
  .event-panel.overview-event-panel .event-log {
    min-height: 180px;
    max-height: 260px;
  }
  .status-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 460px);
    gap: 16px;
    align-items: start;
  }
  .status-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  .status-main .kpi-row {
    margin-bottom: 0;
  }
  .status-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  #join-flow-section .synthetic-step-list {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
  }
  .status-card-wide {
    grid-column: 1 / -1;
  }
  #view-status .regions {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 0;
  }
  .status-event-panel {
    position: sticky;
    top: calc(var(--shell-content-top) + 8px);
    min-height: calc(100vh - var(--shell-content-top) - 32px);
    box-shadow: var(--shadow-card);
  }
  .status-event-panel .event-log {
    min-height: 520px;
    max-height: calc(100vh - var(--shell-content-top) - 170px);
  }
  .control-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .control-status {
    border: 1px solid var(--line);
    background: rgba(5,7,10,0.36);
    border-radius: 8px;
    padding: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-1);
  }
  .control-status.warn {
    border-color: var(--amber-line);
    background: var(--amber-soft);
    color: var(--amber);
  }
  .control-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line);
    background: rgba(5,7,10,0.28);
    border-radius: 8px;
    padding: 10px;
  }
  .control-row.drained {
    border-color: var(--amber-line);
    background: var(--amber-soft);
  }
  .control-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    color: var(--ink-0);
  }
  .control-meta {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
  }
  .control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .control-button,
  .audit-refresh,
  .alert-ack-button {
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    color: var(--ink-1);
    border-radius: 7px;
    padding: 7px 10px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
  }
  .control-button:hover,
  .audit-refresh:hover,
  .alert-ack-button:hover {
    border-color: var(--cyan-line);
    color: var(--cyan);
  }
  .control-button.danger {
    border-color: var(--red-line);
    color: var(--red);
  }
  .control-button.warn {
    border-color: var(--amber-line);
    color: var(--amber);
  }
  .audit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 440px;
    overflow: auto;
    padding-right: 4px;
  }
  .audit-item {
    border: 1px solid var(--line);
    background: rgba(5,7,10,0.28);
    border-radius: 8px;
    padding: 9px;
  }
  .audit-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
  }
  .audit-action {
    color: var(--ink-0);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .audit-result.success { color: var(--green); }
  .audit-result.failure,
  .audit-result.not-found { color: var(--red); }
  .audit-message {
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.45;
  }

  /* =============== TOPBAR =============== */
  .topbar {
    position: fixed;
    top: var(--shell-top);
    left: var(--shell-inline);
    right: var(--shell-inline);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--shell-topbar-height);
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(7,9,12,0.82), rgba(7,9,12,0.68));
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.035);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .brand-mark {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0e1820 0%, #050a0e 100%);
    border: 1px solid var(--cyan-line);
    display: grid; place-items: center;
    color: var(--cyan);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.04em;
    box-shadow: inset 0 0 12px rgba(34,211,238,0.18), 0 0 0 3px rgba(34,211,238,0.04);
    position: relative;
  }
  .brand-home-button {
    padding: 0;
    appearance: none;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }
  .brand-home-button:hover {
    border-color: rgba(34,211,238,0.72);
    box-shadow: inset 0 0 14px rgba(34,211,238,0.24), 0 0 0 3px rgba(34,211,238,0.07);
  }
  .brand-home-button:active {
    transform: translateY(1px);
  }
  .brand-home-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), inset 0 0 14px rgba(34,211,238,0.24);
  }
  .brand-mark::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 4px;
  }
  .brand-text { line-height: 1.15; }
  .brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .brand-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .topbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--green-soft);
    border: 1px solid var(--green-line);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--green);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(74,222,128,0.6);
    animation: blip 1.6s infinite;
  }
  @keyframes blip {
    0%,100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .build-info {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .build-info strong { color: var(--ink-1); font-weight: 500; }

  .live-pill.warn {
    background: var(--amber-soft);
    border-color: var(--amber-line);
    color: var(--amber);
  }
  .live-pill.warn .live-dot {
    background: var(--amber);
    box-shadow: 0 0 8px rgba(251,191,36,0.55);
  }

  /* =============== OPERATIONS ALERTS =============== */
  .ops-alert-panel {
    margin-bottom: 16px;
    border: 1px solid var(--amber-line);
    background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(248,113,113,0.045));
    border-radius: 10px;
    padding: 12px;
  }
  .ops-alert-panel.has-error {
    border-color: var(--red-line);
    background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(251,191,36,0.035));
  }
  .ops-alert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }
  .ops-alert-title {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-0);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 800;
  }
  .ops-alert-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
  }
  .ops-alert-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .ops-alert-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(5,7,10,0.36);
    padding: 10px;
  }
  .ops-alert-item.error { border-color: var(--red-line); background: var(--red-soft); }
  .ops-alert-item.warn { border-color: var(--amber-line); background: var(--amber-soft); }
  .ops-alert-item.info { border-color: var(--cyan-line); background: var(--cyan-soft); }
  .ops-alert-item.acknowledged {
    opacity: 0.66;
  }
  .ops-alert-item-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-0);
    font-weight: 800;
  }
  .ops-alert-item-meta {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.45;
  }

  /* =============== REGION HEALTH STRIP =============== */
  .regions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .region-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
  }
  .region-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--green);
  }
  .region-tile.degraded::before { background: var(--amber); }
  .region-tile.down::before { background: var(--red); }
  .region-flag {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 10px;
    color: var(--ink-1);
    letter-spacing: 0.04em;
  }
  .region-info { flex: 1; min-width: 0; }
  .region-info .nm {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-0);
  }
  .region-info .meta {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    margin-top: 2px;
    display: flex;
    gap: 8px;
  }
  .region-info .meta .ping { color: var(--green); }
  .region-tile.degraded .region-info .meta .ping { color: var(--amber); }
  .region-tile.down .region-info .meta .ping { color: var(--red); }
  .region-info .meta .sep { color: var(--ink-3); }
  .region-info .resources {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    margin-top: 4px;
    display: flex;
    gap: 10px;
    letter-spacing: 0.03em;
  }
  .region-info .resources .cpu { color: var(--cyan); }
  .region-info .resources .mem { color: var(--violet); }


  /* =============== KPI ROW =============== */
  .kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }
  .kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    position: relative;
  }
  .kpi-label {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .kpi-value {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--ink-0);
    letter-spacing: -0.03em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-feature-settings: 'tnum' 1;
  }
  .kpi-value .of {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .kpi-value.cyan { color: var(--cyan); }
  .kpi-value.green { color: var(--green); }
  .kpi-value.amber { color: var(--amber); }
  .kpi-value.violet { color: var(--violet); }

  .kpi-foot {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .kpi-foot .up { color: var(--green); }
  .kpi-foot .down { color: var(--red); }

  /* =============== METRIC DASHBOARD =============== */
  .metric-dashboard {
    margin-bottom: 16px;
  }
  .metric-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .metric-dashboard-title {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
  }
  .metric-dashboard-title strong {
    color: var(--ink-0);
  }
  .metric-dashboard-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
  }
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
  }
  .chart-card {
    min-height: 212px;
  }
  .chart-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
  }
  .chart-expand {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.018);
    color: var(--ink-2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .chart-expand:hover {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .chart-expand svg {
    width: 13px;
    height: 13px;
  }
  .chart-title {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
  }
  .chart-value {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-0);
    text-align: right;
    white-space: nowrap;
  }
  .chart-canvas {
    width: 100%;
    height: 118px;
    border: 1px solid rgba(255,255,255,0.035);
    border-radius: 7px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004)),
      var(--bg-1);
    overflow: hidden;
  }
  .chart-canvas svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .chart-grid-line {
    stroke: rgba(255,255,255,0.055);
    stroke-width: 1;
  }
  .chart-axis-label {
    fill: var(--ink-3);
    font-family: var(--mono);
    font-size: 9px;
  }
  .chart-empty {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    text-align: center;
    padding: 14px;
  }
  .chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    margin-top: 8px;
    min-height: 16px;
  }
  .chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 9.5px;
  }
  .chart-legend-dot,
  .chart-legend-swatch {
    width: 16px;
    height: 0;
    border-top: 2px solid currentColor;
    border-radius: 99px;
    background: transparent;
  }
  .chart-legend-swatch.dashed {
    border-top-style: dashed;
  }
  .metric-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .metric-summary-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004)), var(--surface);
    padding: 12px;
    min-width: 0;
    position: relative;
    overflow: hidden;
  }
  .metric-summary-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cyan);
    opacity: 0.86;
  }
  .metric-summary-card.warn::before { background: var(--amber); }
  .metric-summary-card.error::before { background: var(--red); }
  .metric-summary-card.ok::before { background: var(--green); }
  .metric-summary-label {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 800;
  }
  .metric-summary-value {
    margin-top: 7px;
    font-family: var(--mono);
    font-size: 19px;
    line-height: 1;
    color: var(--ink-0);
    font-weight: 850;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metric-summary-foot {
    margin-top: 7px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.45;
    min-height: 28px;
  }
  .charts-grid {
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 14px;
  }
  .chart-card {
    min-height: 292px;
    border-radius: 10px;
    padding: 14px;
  }
  .chart-canvas {
    height: 178px;
    position: relative;
  }
  .chart-series-line {
    filter: drop-shadow(0 0 6px rgba(34,211,238,0.04));
  }
  .chart-series-area {
    opacity: 0.12;
  }
  .chart-latest-point {
    stroke: var(--bg-0);
    stroke-width: 1.8;
  }
  .chart-threshold-line {
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.62;
  }
  .chart-threshold-label {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .chart-last-guide {
    stroke: rgba(255,255,255,0.08);
    stroke-width: 1;
    stroke-dasharray: 2 5;
  }
  .chart-crosshair {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(34,211,238,0.55);
    pointer-events: none;
    box-shadow: 0 0 10px rgba(34,211,238,0.28);
  }
  .chart-tooltip {
    position: absolute;
    z-index: 8;
    min-width: 180px;
    max-width: 260px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: rgba(7, 9, 12, 0.94);
    box-shadow: 0 12px 36px rgba(0,0,0,0.42);
    padding: 8px 9px;
    color: var(--ink-1);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.45;
    pointer-events: none;
  }
  .chart-tooltip-title {
    color: var(--ink-0);
    font-weight: 900;
    margin-bottom: 5px;
  }
  .chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .chart-tooltip-row span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
  }
  .chart-tooltip-dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: currentColor;
  }
  .chart-tooltip-value { color: var(--ink-0); font-weight: 800; }
  .chart-legend-toggle {
    border: 0;
    background: transparent;
    min-height: 28px;
    padding: 5px 7px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.96;
    transition: background .14s ease, opacity .14s ease, transform .14s ease;
  }
  .chart-legend-toggle:hover {
    background: rgba(148, 163, 184, 0.10);
    transform: translateY(-1px);
  }
  .chart-legend-toggle.off {
    opacity: 0.38;
    text-decoration: line-through;
  }
  .metric-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .metric-range {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-2);
  }
  .metric-range button,
  .metric-action {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    padding: 6px 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .metric-range button:hover,
  .metric-action:hover {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .metric-range button.active {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .metric-action {
    border-color: var(--line-2);
    background: rgba(255,255,255,0.018);
  }
  .metric-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }
  .metric-stat-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-1);
    padding: 10px;
    font-family: var(--mono);
  }
  .metric-stat-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-1);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .metric-stat-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--ink-2);
    font-size: 10px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
  }
  .metric-stat-line:last-child { border-bottom: 0; }
  .metric-stat-line strong { color: var(--ink-0); font-weight: 800; }
  /* =============== TOOLBAR =============== */
  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .toolbar-section-title {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    padding-right: 14px;
    margin-right: 4px;
    border-right: 1px solid var(--line);
  }
  .toolbar-section-title strong {
    color: var(--ink-0);
    font-weight: 700;
    margin-right: 4px;
  }

  .filters {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 3px;
  }
  .filter {
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .12s;
  }
  .filter:hover { color: var(--ink-0); }
  .filter.active {
    background: var(--bg-3);
    color: var(--ink-0);
  }
  .filter[data-filter="waiting"].active { color: var(--amber); }
  .filter[data-filter="matching"].active { color: var(--violet); }
  .filter[data-filter="playing"].active { color: var(--green); }
  .filter[data-filter="ended"].active { color: var(--red); }
  .filter .count {
    font-size: 10px;
    background: var(--bg-0);
    color: var(--ink-2);
    padding: 1px 6px;
    border-radius: 99px;
    font-weight: 700;
  }
  .filter.active .count { color: var(--ink-0); }

  .search {
    flex: 1;
    position: relative;
  }
  .search input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 12px 8px 32px;
    color: var(--ink-0);
    font-family: var(--mono);
    font-size: 11.5px;
    outline: none;
    transition: border-color .12s;
  }
  .search input::placeholder { color: var(--ink-3); }
  .search input:focus { border-color: var(--cyan-line); }
  .search svg {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
  }

  .icon-btn {
    width: 34px; height: 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-2);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .12s;
  }
  .icon-btn:hover { color: var(--ink-0); border-color: var(--line-2); }
  .toolbar-action {
    height: 34px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all .12s;
  }
  .toolbar-action:hover {
    color: var(--ink-0);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }

  /* =============== SESSION LIST (compact rows) =============== */
  .card-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    position: relative;
  }
  .card:hover { border-color: var(--line-3); background: var(--surface-2); }
  .card.expanded { border-color: var(--cyan-line); background: var(--surface-2); }

  .card-row {
    display: grid;
    grid-template-columns: 4px 16px minmax(180px, 1.1fr) minmax(150px, 1fr) minmax(150px, 0.9fr) minmax(110px, 0.7fr) minmax(140px, 0.9fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 0;
    position: relative;
  }
  .row-strip {
    align-self: stretch;
    border-radius: 0 2px 2px 0;
  }
  .card[data-status="waiting"]  .row-strip { background: var(--amber); }
  .card[data-status="matching"] .row-strip { background: var(--violet); }
  .card[data-status="playing"]  .row-strip { background: var(--green); box-shadow: 0 0 10px rgba(74,222,128,0.5); }
  .card[data-status="ended"]    .row-strip { background: var(--red); }

  .row-glyph {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    justify-self: center;
  }
  .card[data-status="waiting"]  .row-glyph { background: var(--amber); }
  .card[data-status="matching"] .row-glyph { background: var(--violet); }
  .card[data-status="playing"]  .row-glyph {
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(74,222,128,0.6);
    animation: pulse 1.6s infinite;
  }
  .card[data-status="ended"]    .row-glyph { background: var(--red); }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  }

  /* col: room code + session name */
  .col-room { min-width: 0; }
  .room-code {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-shadow: 0 0 14px rgba(34,211,238,0.25);
  }
  .session-name {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* col: host */
  .col-host { min-width: 0; }
  .col-host-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .region-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-3);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-1);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .region-chip-flag {
    width: 12px; height: 8px;
    border-radius: 1px;
    background: linear-gradient(180deg, #cd2e3a 50%, #fff 50%);
    display: inline-block;
    flex-shrink: 0;
  }
  .region-chip-flag.jp { background: linear-gradient(180deg, #fff 50%, #fff 50%); position: relative; }
  .region-chip-flag.jp::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:5px;height:5px; border-radius:50%; background:#bc002d; }
  .region-chip-flag.us { background: linear-gradient(180deg, #b22234 0%, #b22234 33%, #fff 33%, #fff 66%, #b22234 66%); }

  .strip-mode {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
  .hostname {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* col: mode */
  .col-mode { min-width: 0; }
  .mode-name {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-0);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mode-state {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* col: time */
  .col-time { min-width: 0; }
  .time-elapsed {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-0);
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .time-elapsed::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ink-3);
  }
  .card[data-status="playing"] .time-elapsed::before { background: var(--green); }
  .time-config {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* col: roster (compact pips) */
  .col-roster { min-width: 0; }
  .roster-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .roster-head .lbl {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
  }
  .roster-head .count {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-0);
    font-feature-settings: 'tnum' 1;
  }
  .roster-head .count .max {
    color: var(--ink-3);
    font-weight: 500;
  }
  .roster-pips {
    display: flex;
    gap: 2px;
  }
  .pip {
    flex: 1;
    height: 5px;
    min-width: 4px;
    border-radius: 1px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    position: relative;
  }
  .pip.filled {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(34,211,238,0.4);
  }
  .pip.dead {
    background: var(--bg-3);
    border-color: var(--red-line);
    position: relative;
  }
  .pip.dead {
    background: var(--red-soft);
    border-color: var(--red-line);
  }
  .card[data-status="playing"] .pip.filled {
    background: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 6px rgba(74,222,128,0.5);
  }

  /* col: phase */
  .col-phase { min-width: 0; }
  .phase-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .phase-head .lbl {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
  }
  .phase-head .val {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-1);
    font-weight: 700;
  }
  .phase-head .val .num { color: var(--cyan); }
  .phase-head .val .total { color: var(--ink-3); }
  .phase-bars {
    display: flex;
    gap: 2px;
    height: 4px;
  }
  .phase-bar {
    flex: 1;
    border-radius: 1px;
    background: var(--bg-3);
    border: 1px solid var(--line);
  }
  .phase-bar.done {
    background: var(--cyan);
    border-color: var(--cyan);
  }
  .phase-bar.active {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
    animation: phasepulse 1.6s infinite;
  }
  @keyframes phasepulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .phase-foot {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .phase-foot .alive { color: var(--green); font-weight: 600; }

  /* col: status badge */
  .col-status-badge { display: flex; }
  .status-badge {
    padding: 4px 9px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: 1px solid;
    white-space: nowrap;
  }
  .card[data-status="waiting"]  .status-badge { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-line); }
  .card[data-status="matching"] .status-badge { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line); }
  .card[data-status="playing"]  .status-badge { background: var(--green-soft);  color: var(--green);  border-color: var(--green-line); }
  .card[data-status="ended"]    .status-badge { background: var(--red-soft);    color: var(--red);    border-color: var(--red-line); }

  /* col: actions (always visible, compact icon buttons) */
  .col-actions {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .action-btn {
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 5px 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-2);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    white-space: nowrap;
  }
  .action-btn:hover {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .action-btn.icon-only {
    width: 26px;
    padding: 0;
  }
  .action-btn .label {
    display: none;
  }
  @media (min-width: 1500px) {
    .action-btn:not(.icon-only) .label { display: inline; }
    .status-card-grid { grid-template-columns: 1.05fr 1fr 1fr; }
  }
  .row-chev {
    color: var(--ink-3);
    transition: transform .15s;
    margin-left: 4px;
    align-self: center;
  }
  .card.expanded .row-chev { transform: rotate(180deg); color: var(--cyan); }

  /* expanded detail panel */
  .card-detail {
    border-top: 1px solid var(--line);
    background: var(--bg-1);
    padding: 12px 14px 14px;
    display: none;
    flex-direction: column;
    gap: 10px;
  }
  .card.expanded .card-detail { display: flex; }
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 16px;
  }
  .detail-cell .lbl {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .detail-cell .val {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-0);
    font-weight: 500;
    word-break: break-all;
  }
  .detail-cell .val.muted { color: var(--ink-2); }
  .auth-line {
    padding: 8px 10px;
    background: rgba(7, 9, 12, 0.34);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
  }
  .auth-line .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .auth-line.ok .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .auth-line.bad .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
  .auth-line .label { color: var(--ink-2); }
  .auth-line .status { color: var(--ink-0); margin-left: auto; font-weight: 600; }
  .auth-line.bad .status { color: var(--red); }
  .auth-line.ok .status { color: var(--green); }
  .synthetic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .synthetic-field {
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px 10px;
    background: rgba(7,9,12,0.34);
    min-width: 0;
  }
  .synthetic-field span {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .synthetic-field strong {
    color: var(--ink-0);
    font-family: var(--mono);
    font-size: 12px;
    word-break: break-word;
  }
  .synthetic-step-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
  }
  .synthetic-step,
  .synthetic-empty {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 8px;
    color: var(--ink-2);
    background: rgba(7,9,12,0.34);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1;
  }
  .synthetic-step.ok {
    border-color: rgba(31, 255, 135, 0.32);
    color: var(--green);
  }
  .synthetic-step.bad {
    border-color: rgba(255, 83, 112, 0.35);
    color: var(--red);
  }
  .join-flow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    border-radius: 9px;
    padding: 7px 9px;
  }
  .join-flow-row .join-flow-step-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .join-flow-row .join-flow-step-meta {
    color: var(--ink-3);
    font-size: 9px;
    white-space: nowrap;
  }
  .action-queue-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 180px;
    overflow: auto;
  }
  .action-queue-empty {
    border: 1px dashed var(--line-2);
    border-radius: 8px;
    padding: 12px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10.5px;
    text-align: center;
  }
  .action-queue-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-1);
    padding: 9px 10px;
  }
  .action-queue-item.warn {
    border-color: var(--amber-line);
    background: var(--amber-soft);
  }
  .action-queue-item.dead {
    border-color: rgba(255, 91, 116, 0.65);
    background: rgba(255, 91, 116, 0.08);
  }
  .action-queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-0);
    font-weight: 800;
  }
  .action-queue-type {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .action-queue-age {
    color: var(--ink-3);
    font-weight: 600;
  }
  .action-queue-status {
    color: var(--ink-0);
    font-weight: 800;
  }
  .action-queue-status.dead-letter {
    color: var(--red);
  }
  .action-queue-meta {
    margin-top: 4px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.45;
    word-break: break-all;
  }

  /* =============== EMPTY =============== */
  .empty {
    grid-column: 1 / -1;
    padding: 80px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-2);
    border-radius: 10px;
  }
  .empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--ink-3);
  }
  .empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-1);
  }
  .empty-sub {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
  }

  /* =============== SIDE PANEL =============== */
  .side-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .side-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .side-section-head .title {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-1);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
  }
  .side-section-head .meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
  }
  .announce-button {
    border: 1px solid var(--amber-line);
    border-radius: 6px;
    background: var(--amber-soft);
    color: var(--amber);
    cursor: pointer;
    padding: 5px 8px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .announce-button:hover {
    background: rgba(251,191,36,0.16);
    border-color: rgba(251,191,36,0.48);
  }
  .announcement-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 178px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .announcement-item {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-1);
    padding: 8px;
    font-family: var(--mono);
  }
  .announcement-item[data-severity="Warning"] { border-color: var(--amber-line); }
  .announcement-item[data-severity="Critical"] { border-color: var(--red-line); }
  .announcement-item-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
  }
  .announcement-title {
    color: var(--ink-0);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .announcement-status {
    color: var(--ink-2);
    font-size: 9px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    padding: 1px 6px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .announcement-status.scheduled { color: var(--amber); border-color: var(--amber-line); }
  .announcement-status.dispatched { color: var(--green); border-color: var(--green-line); }
  .announcement-status.canceled { color: var(--red); border-color: var(--red-line); }
  .announcement-message {
    margin-top: 5px;
    color: var(--ink-2);
    font-size: 10px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .announcement-meta {
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 9px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .announcement-cancel {
    margin-top: 6px;
    border: 1px solid var(--red-line);
    border-radius: 5px;
    background: var(--red-soft);
    color: var(--red);
    cursor: pointer;
    padding: 4px 7px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
  }
  .announcement-empty {
    border: 1px dashed var(--line-2);
    border-radius: 7px;
    padding: 12px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    text-align: center;
  }
  .announcement-form { display: flex; flex-direction: column; gap: 12px; }
  .announcement-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .announcement-form input,
  .announcement-form textarea,
  .announcement-form select {
    width: 100%;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: var(--bg-1);
    color: var(--ink-0);
    padding: 9px 10px;
    font-family: var(--mono);
    font-size: 12px;
    outline: none;
  }
  .announcement-form textarea { min-height: 120px; resize: vertical; }
  .announcement-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .announcement-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .announcement-submit {
    border: 1px solid var(--cyan-line);
    border-radius: 6px;
    background: var(--cyan-soft);
    color: var(--cyan);
    cursor: pointer;
    padding: 8px 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* fleet summary */
  .fleet-bar {
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    border: 1px solid var(--line);
  }
  .fleet-seg {
    height: 100%;
    transition: width .3s ease;
  }
  .fleet-seg.waiting  { background: var(--amber); }
  .fleet-seg.matching { background: var(--violet); }
  .fleet-seg.playing  { background: var(--green); }
  .fleet-seg.ended    { background: var(--red); }
  .fleet-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-1);
  }
  .legend-item .sw {
    width: 8px; height: 8px;
    border-radius: 2px;
  }
  .legend-item .sw.waiting { background: var(--amber); }
  .legend-item .sw.matching { background: var(--violet); }
  .legend-item .sw.playing { background: var(--green); }
  .legend-item .sw.ended { background: var(--red); }
  .legend-item .num {
    margin-left: auto;
    color: var(--ink-0);
    font-weight: 700;
  }

  /* event log */
  .event-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px;
  }
  .event-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 5px 6px;
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all .12s;
  }
  .event-tab:hover { color: var(--ink-1); }
  .event-tab.active { background: var(--bg-3); color: var(--ink-0); }
  .event-tab[data-lv="info"].active  { color: var(--cyan); }
  .event-tab[data-lv="warn"].active  { color: var(--amber); }
  .event-tab[data-lv="error"].active { color: var(--red); }
  .event-tab .badge {
    font-size: 9px;
    background: var(--bg-0);
    color: var(--ink-2);
    padding: 1px 5px;
    border-radius: 99px;
    font-weight: 700;
  }
  .event-tab.active .badge { color: inherit; background: rgba(255,255,255,0.05); }

  .event-log {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(135,162,190,0.42) rgba(3,6,10,0.42);
  }
  .event-log::-webkit-scrollbar { width: 8px; height: 8px; }
  .event-log::-webkit-scrollbar-track {
    background: rgba(3,6,10,0.48);
    border-radius: 999px;
  }
  .event-log::-webkit-scrollbar-thumb {
    background: rgba(135,162,190,0.38);
    border: 2px solid rgba(3,6,10,0.48);
    border-radius: 999px;
  }
  .event-log::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.52); }
  .event-log::-webkit-scrollbar-corner { background: transparent; }
  .event {
    display: grid;
    grid-template-columns: 52px 56px 6px 1fr;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.4;
    min-width: 0;
  }
  .event-time { color: var(--ink-3); }
  .event-tag {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    padding: 1px 4px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    text-align: center;
    align-self: start;
    white-space: nowrap;
  }
  .event-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
  }
  .event-msg {
    color: var(--ink-1);
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .event-msg .room { color: var(--cyan); font-weight: 600; }
  .event-msg .name { color: var(--ink-0); font-weight: 500; }

  /* level styling */
  .event[data-lv="info"]  .event-dot { background: var(--cyan); }
  .event[data-lv="info"]  .event-tag { color: var(--cyan); border-color: var(--cyan-line); }
  .event[data-lv="info"]:hover { background: var(--bg-2); }

  .event[data-lv="warn"]  { background: rgba(251,191,36,0.05); border-left-color: var(--amber); }
  .event[data-lv="warn"]  .event-dot { background: var(--amber); }
  .event[data-lv="warn"]  .event-tag { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
  .event[data-lv="warn"]  .event-msg { color: var(--ink-0); }

  .event[data-lv="error"] { background: rgba(248,113,113,0.07); border-left-color: var(--red); }
  .event[data-lv="error"] .event-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
  .event[data-lv="error"] .event-tag { color: var(--red); border-color: var(--red-line); background: var(--red-soft); }
  .event[data-lv="error"] .event-msg { color: #fecaca; }

  /* =============== MODAL =============== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.62);
    display: grid;
    place-items: center;
    padding: 24px;
    backdrop-filter: blur(5px);
  }
  .modal-backdrop[hidden] { display: none; }
  .modal {
    width: min(920px, 96vw);
    max-height: 86vh;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 18px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(34,211,238,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal.metric-modal {
    width: min(1280px, 98vw);
    max-height: 90vh;
  }
  .metric-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }
  .metric-detail-summary .kv {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    display: block;
  }
  .metric-detail-summary .kv .k,
  .metric-detail-summary .kv .v {
    display: block;
  }
  .metric-detail-summary .kv .v {
    margin-top: 5px;
    font-size: 12px;
  }
  .metric-detail-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
  }
  .metric-detail-hint {
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.45;
  }
  .metric-detail-zoom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .metric-detail-zoom button {
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: rgba(255,255,255,0.018);
    color: var(--ink-1);
    cursor: pointer;
    padding: 6px 9px;
    min-width: 34px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .metric-detail-zoom button:hover:not(:disabled) {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .metric-detail-zoom button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
  }
  .metric-detail-zoom-value {
    min-width: 54px;
    text-align: center;
    color: var(--ink-0);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 800;
  }
  .metric-detail-chart-scroll {
    overflow-x: auto;
    border-radius: 8px;
  }
  .metric-detail-chart {
    height: 300px;
    min-width: 960px;
  }
  .metric-detail-chart svg {
    max-width: none;
  }
  .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
  }
  .modal-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-0);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .modal-close {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }
  .modal-close:hover {
    color: var(--ink-0);
    border-color: var(--cyan-line);
    background: var(--cyan-soft);
  }
  .modal-body {
    padding: 16px;
    overflow: auto;
  }
  .modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .modal-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-1);
    padding: 12px;
  }
  .modal-card.full { grid-column: 1 / -1; }
  .modal-card-title {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .kv {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    font-family: var(--mono);
    font-size: 11px;
  }
  .kv:last-child { border-bottom: none; }
  .kv .k { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; }
  .kv .v { color: var(--ink-0); word-break: break-all; }
  .log-pre {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    background: #05070a;
    color: var(--ink-1);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    min-height: 280px;
    max-height: 58vh;
    overflow: auto;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.55;
  }
  .chat-pre {
    min-height: 160px;
    max-height: 36vh;
  }
  .modal-error {
    color: #fecaca;
    background: var(--red-soft);
    border: 1px solid var(--red-line);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--mono);
    font-size: 11px;
  }

  /* =============== WORLD MAP =============== */
  .world-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 12px;
    min-height: 680px;
  }
  .world-overview-layout {
    position: relative;
    display: block;
    min-height: 100vh;
  }
  .world-map-panel {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background:
      radial-gradient(900px 520px at 50% 42%, rgba(34,211,238,0.12), transparent 62%),
      linear-gradient(180deg, rgba(15,21,28,0.95), rgba(7,9,12,0.98));
    box-shadow: inset 0 0 80px rgba(34,211,238,0.04);
  }
  .world-map-canvas {
    width: 100%;
    height: 100%;
    min-height: 680px;
    display: block;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }
  .world-map-canvas.dragging { cursor: grabbing; }
  .world-overview-layout .world-map-panel {
    min-height: 100vh;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .world-overview-layout .world-map-canvas {
    min-height: 100vh;
    height: 100vh;
  }
  .world-overview-layout .world-side-panel {
    position: absolute;
    top: calc(var(--shell-nav-top) + 66px);
    right: 14px;
    bottom: 14px;
    z-index: 5;
    width: min(380px, calc(100vw - 28px));
    max-height: calc(100vh - var(--shell-nav-top) - 82px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-gutter: stable;
    pointer-events: auto;
  }
  .world-overview-layout .world-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }
  .world-overview-layout .world-stat {
    padding: 8px;
  }
  .world-overview-layout .world-stat .v {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .world-overview-layout .world-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }
  .world-overview-layout .world-ops-item {
    padding: 8px;
    min-width: 0;
  }
  .world-overview-layout .world-ops-item .v {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .world-map-hud {
    position: absolute;
    left: var(--shell-inline);
    top: calc(var(--shell-nav-top) + 66px);
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, auto));
    gap: 8px;
    pointer-events: none;
  }
  .world-hud-chip {
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 10px;
    background: rgba(7, 9, 12, 0.72);
    backdrop-filter: blur(8px);
    padding: 9px 10px;
    font-family: var(--mono);
  }
  .world-hud-chip .label {
    display: block;
    color: var(--ink-3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .world-hud-chip .value {
    display: block;
    margin-top: 3px;
    color: var(--green);
    font-size: 16px;
    font-weight: 800;
  }
  .world-map-help {
    position: absolute;
    left: 14px;
    bottom: 14px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }
  body.overview-map-mode .world-map-help {
    display: none;
  }
  .world-map-controls {
    position: absolute;
    left: var(--shell-inline);
    bottom: 240px;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    pointer-events: auto;
  }
  .world-map-control {
    border: 1px solid rgba(34,211,238,0.22);
    border-radius: 9px;
    background: rgba(7, 9, 12, 0.72);
    color: var(--ink-1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    padding: 8px 10px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .world-map-control:hover {
    color: var(--cyan);
    border-color: var(--cyan-line);
    background: rgba(34,211,238,0.08);
    transform: translateY(-1px);
  }
  .world-map-control.active {
    color: var(--green);
    border-color: var(--green-line);
    background: rgba(74,222,128,0.10);
  }
  .world-mobile-panel-toggle {
    display: none;
  }
  .world-node-session-stack {
    position: absolute;
    z-index: 8;
    width: min(292px, calc(100vw - 24px));
    pointer-events: auto;
    transform: translate(-50%, calc(-100% - 26px));
    transform-origin: 50% 100%;
    display: none;
  }
  .world-node-session-stack.open {
    display: grid;
    gap: 8px;
  }
  .world-session-card {
    border: 1px solid rgba(34,211,238,0.22);
    border-radius: 12px;
    background: rgba(7, 9, 12, 0.84);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 34px rgba(0,0,0,0.34);
    padding: 10px 11px;
    font-family: var(--mono);
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: worldSessionFan .24s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .world-session-card:nth-child(1) { animation-delay: 0ms; }
  .world-session-card:nth-child(2) { animation-delay: 38ms; }
  .world-session-card:nth-child(3) { animation-delay: 76ms; }
  .world-session-card:nth-child(4) { animation-delay: 114ms; }
  .world-session-card:nth-child(5) { animation-delay: 152ms; }
  .world-session-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ink-0);
    font-size: 11px;
    font-weight: 900;
  }
  .world-session-meta {
    margin-top: 5px;
    color: var(--ink-3);
    font-size: 10px;
    line-height: 1.45;
  }
  .world-session-pill {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(34,211,238,0.11);
    color: var(--cyan);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .world-session-empty {
    border: 1px dashed rgba(34,211,238,0.24);
    border-radius: 12px;
    background: rgba(7, 9, 12, 0.76);
    color: var(--ink-2);
    font-family: var(--mono);
    font-size: 11px;
    padding: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(14px);
    animation: worldSessionFan .22s ease-out forwards;
  }
  @keyframes worldSessionFan {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  .world-event-overlay {
    position: absolute;
    left: var(--shell-inline);
    bottom: 14px;
    z-index: 4;
    width: min(620px, calc(100% - 430px - var(--shell-inline)));
    max-height: 214px;
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 12px;
    background: rgba(7, 9, 12, 0.76);
    backdrop-filter: blur(10px);
    overflow: hidden;
    pointer-events: auto;
  }
  .world-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: var(--ink-1);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .world-overlay-head span:last-child {
    color: var(--ink-3);
    font-weight: 700;
  }
  .world-event-list {
    max-height: 170px;
    overflow: auto;
    padding: 7px 0;
  }
  .world-event-list .event {
    grid-template-columns: 58px 72px 10px 1fr;
    padding: 5px 12px;
    border-bottom: 0;
    background: transparent;
  }
  .world-ops-grid {
    display: grid;
    gap: 8px;
    padding: 12px;
  }
  .world-ops-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(5, 8, 12, 0.64);
    padding: 10px;
    font-family: var(--mono);
  }
  .world-ops-item .k {
    color: var(--ink-3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .world-ops-item .v {
    color: var(--ink-0);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
  }
  .world-ops-item.ok .v { color: var(--green); }
  .world-ops-item.warn .v { color: var(--amber); }
  .world-ops-item.error .v { color: var(--red); }
  .world-side-panel {
    display: grid;
    gap: 12px;
    align-content: start;
  }
  .world-side-card {
    border: 1px solid rgba(36,49,64,0.92);
    border-radius: var(--radius-md);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006)),
      rgba(15,21,28,0.94);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.028);
  }
  .world-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
  }
  .world-side-head .title {
    color: var(--ink-0);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .world-side-head .meta {
    color: var(--ink-3);
    font-size: 10px;
  }
  .world-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .world-stat {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-1);
    padding: 10px;
    font-family: var(--mono);
  }
  .world-stat .k {
    color: var(--ink-3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .world-stat .v {
    margin-top: 4px;
    color: var(--ink-0);
    font-size: 15px;
    font-weight: 800;
  }
  .world-list {
    max-height: 258px;
    overflow: auto;
  }
  .world-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    cursor: pointer;
  }
  .world-row:hover,
  .world-row.active {
    background: rgba(34,211,238,0.06);
  }
  .world-row-title {
    color: var(--ink-0);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
  }
  .world-row-sub {
    margin-top: 3px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 10px;
  }
  .world-row-status {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 82px;
    font-family: var(--mono);
  }
  .world-row-value {
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
  }
  .world-node-health {
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: var(--ink-2);
    padding: 2px 7px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .world-node-health.ok {
    border-color: var(--green-line);
    background: rgba(74,222,128,0.10);
    color: var(--green);
  }
  .world-node-health.warn {
    border-color: var(--amber-line);
    background: rgba(251,191,36,0.10);
    color: var(--amber);
  }
  .world-node-health.critical,
  .world-node-health.offline {
    border-color: var(--red-line);
    background: rgba(248,113,113,0.10);
    color: var(--red);
  }
  .world-node-health.drain {
    border-color: var(--violet-line);
    background: rgba(192,132,252,0.11);
    color: var(--violet);
  }
  .world-node-load {
    color: var(--ink-3);
    font-size: 9px;
    white-space: nowrap;
  }
  .world-empty {
    padding: 18px 12px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    text-align: center;
  }

  /* responsive */
  @media (max-width: 1320px) {
    .status-dashboard {
      grid-template-columns: 1fr;
    }
    .status-event-panel {
      position: static;
      min-height: auto;
    }
    .status-event-panel .event-log {
      min-height: 420px;
      max-height: 58vh;
    }
  }
  @media (max-width: 1100px) {
    :root {
      --shell-inline: 14px;
      --shell-content-top: 148px;
    }
    .main { padding: var(--shell-content-top) 14px 72px; }
    .topbar { align-items: flex-start; gap: 12px; }
    .topbar-tools { flex-wrap: wrap; justify-content: flex-end; }
    .console-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .view-heading { align-items: flex-start; flex-direction: column; }
    .overview-grid,
    .operations-grid,
    .status-card-grid { grid-template-columns: 1fr; }
    .regions { grid-template-columns: repeat(2, 1fr); }
    .ops-alert-list { grid-template-columns: 1fr; }
    .kpi-row { grid-template-columns: repeat(3, 1fr); }
    .metric-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-dashboard-head { align-items: flex-start; flex-direction: column; }
    .metric-controls { justify-content: flex-start; }
    .charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-detail-summary,
    .metric-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .world-layout { grid-template-columns: 1fr; }
    .world-overview-layout .world-side-panel {
      position: static;
      width: 100%;
      margin-top: 12px;
    }
    body.overview-map-mode .world-overview-layout .world-side-panel {
      position: absolute;
      top: calc(var(--shell-nav-top) + 66px);
      right: 14px;
      bottom: 14px;
      width: min(380px, calc(100vw - 28px));
      margin-top: 0;
      overflow: auto;
    }
    .world-event-overlay {
      width: calc(100% - 28px);
      right: 14px;
    }
    .world-map-panel,
    .world-map-canvas { min-height: 560px; }
    .world-map-hud { grid-template-columns: repeat(2, minmax(92px, auto)); }
    .world-map-controls { bottom: 214px; }
    .modal-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    :root {
      --shell-inline: 8px;
      --shell-top: 8px;
      --shell-topbar-height: 88px;
      --shell-nav-top: 108px;
      --shell-content-top: 166px;
    }
    .main { padding: var(--shell-content-top) 10px 72px; }
    .topbar {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      min-height: var(--shell-topbar-height);
      padding: 8px 10px;
      max-height: none;
      overflow: visible;
      gap: 8px;
    }
    .brand {
      gap: 8px;
      min-width: 0;
      overflow: hidden;
    }
    .brand-text {
      min-width: 0;
    }
    .brand-mark {
      width: 30px;
      height: 30px;
      font-size: 13px;
      border-radius: 7px;
    }
    .brand-name {
      max-width: calc(100vw - 84px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    .brand-sub { display: none; }
    .topbar-tools {
      width: 100%;
      justify-content: space-between;
      flex-wrap: nowrap;
      min-width: 0;
      overflow: visible;
      gap: 5px;
      white-space: nowrap;
    }
    .topbar-tools .build-info { display: none; }
    .admin-chip,
    .logout-btn,
    .live-pill {
      min-height: 31px;
      padding: 6px 7px;
      font-size: 9px;
      line-height: 1;
    }
    .admin-chip {
      max-width: 92px;
      gap: 5px;
      justify-content: center;
      font-size: 8px;
      letter-spacing: 0.04em;
    }
    .admin-chip strong {
      display: block;
      max-width: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 9px;
      letter-spacing: 0.04em;
    }
    .live-pill {
      gap: 5px;
      letter-spacing: 0.06em;
    }
    .console-nav {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
      overflow: visible;
    }
    .console-nav-btn {
      min-width: 0;
      align-items: center;
      justify-content: center;
      padding: 7px 3px;
      font-size: 9px;
      line-height: 1;
      letter-spacing: 0.035em;
      text-align: center;
      white-space: nowrap;
    }
    .console-nav-btn span {
      display: none;
    }
    .kpi-row,
    .regions,
    .metric-summary-grid,
    .charts-grid,
    .metric-detail-summary,
    .metric-detail-stats { grid-template-columns: 1fr; }
    .toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
    .toolbar .icon-btn { width: 100%; height: 42px; }
    .metric-range { overflow-x: auto; max-width: 100%; }
    .filters { width: 100%; overflow-x: auto; }
    .search { width: 100%; }
    .chart-card { min-height: 270px; }
    .chart-canvas { height: 158px; }
    .status-event-panel .event-log {
      min-height: 360px;
      max-height: 56vh;
    }
    .world-map-panel,
    .world-map-canvas { min-height: 430px; }
    .world-map-hud { grid-template-columns: 1fr; }
    body.overview-map-mode .topbar {
      display: none;
    }
    body.overview-map-mode .console-nav {
      top: 8px;
      left: var(--shell-inline);
      right: var(--shell-inline);
      width: auto;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      overflow-x: auto;
      gap: 4px;
      padding: 4px;
      border-radius: 10px;
    }
    body.overview-map-mode .console-nav-btn {
      min-width: 0;
      align-items: center;
      justify-content: center;
      padding: 7px 4px;
      font-size: 9px;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    body.overview-map-mode .console-nav-btn span {
      display: none;
    }
    body.overview-map-mode .world-map-hud {
      top: 54px;
      left: 8px;
      right: 8px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }
    body.overview-map-mode .world-hud-chip {
      padding: 5px 6px;
      border-radius: 8px;
    }
    body.overview-map-mode .world-hud-chip .label {
      font-size: 7px;
      letter-spacing: 0.08em;
    }
    body.overview-map-mode .world-hud-chip .value {
      font-size: 11px;
    }
    body.overview-map-mode .world-overview-layout .world-side-panel {
      top: auto;
      left: 8px;
      right: 8px;
      bottom: 54px;
      width: auto;
      max-height: min(56vh, 420px);
      display: grid;
      gap: 8px;
      overflow: auto;
      padding: 8px;
      border: 1px solid rgba(34,211,238,0.20);
      border-radius: 14px;
      background: rgba(7, 9, 12, 0.84);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 40px rgba(0,0,0,0.36);
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(100% + 70px));
      transition: opacity .16s ease, transform .16s ease;
    }
    body.overview-map-mode.world-mobile-panel-open .world-overview-layout .world-side-panel {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    body.overview-map-mode .world-side-card {
      flex: none;
      min-width: 0;
    }
    body.overview-map-mode .world-side-head {
      padding: 8px 9px;
    }
    body.overview-map-mode .world-list {
      max-height: 96px;
    }
    body.overview-map-mode .world-summary-grid,
    body.overview-map-mode .world-ops-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 8px;
      gap: 6px;
    }
    body.overview-map-mode .world-row {
      padding: 8px 9px;
    }
    body.overview-map-mode .world-row-status {
      min-width: 68px;
      gap: 4px;
    }
    body.overview-map-mode .world-node-load {
      font-size: 8px;
    }
    body.overview-map-mode .world-event-overlay {
      display: none;
    }
    .world-map-controls {
      left: 8px;
      right: auto;
      bottom: 10px;
      gap: 5px;
    }
    .world-map-control {
      padding: 7px 8px;
      font-size: 9px;
    }
    body.overview-map-mode .world-mobile-panel-toggle {
      display: inline-flex;
      position: absolute;
      right: 8px;
      bottom: 10px;
      z-index: 12;
      align-items: center;
      justify-content: center;
      min-width: 74px;
      border: 1px solid rgba(34,211,238,0.28);
      border-radius: 9px;
      background: rgba(7, 9, 12, 0.84);
      color: var(--cyan);
      backdrop-filter: blur(10px);
      padding: 7px 10px;
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      pointer-events: auto;
    }
    body.overview-map-mode.world-mobile-panel-open .world-mobile-panel-toggle {
      color: var(--amber);
      border-color: var(--amber-line);
      background: rgba(251,191,36,0.10);
    }
    .world-node-session-stack {
      width: min(252px, calc(100vw - 16px));
    }
  }

  /* =============== DESIGN SYSTEM V3 OVERRIDES =============== */
  :root {
    --app-bg: #05080d;
    --app-bg-elevated: #0a1017;
    --panel: rgba(13, 19, 27, 0.86);
    --panel-solid: #0d131b;
    --panel-strong: rgba(16, 24, 34, 0.94);
    --panel-muted: rgba(255, 255, 255, 0.026);
    --border: rgba(135, 162, 190, 0.16);
    --border-strong: rgba(135, 162, 190, 0.26);
    --border-accent: rgba(34, 211, 238, 0.34);
    --text-primary: #edf5ff;
    --text-secondary: #aab8c7;
    --text-muted: #6f7d8c;
    --status-info: var(--cyan);
    --status-success: var(--green);
    --status-warning: var(--amber);
    --status-danger: var(--red);
    --status-special: var(--violet);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --radius-xl: 20px;
    --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.16);
    --glass-blur: blur(18px) saturate(1.2);
    --shell-inline: max(16px, calc((100vw - 1760px) / 2 + 20px));
    --shell-top: 14px;
    --shell-topbar-height: 62px;
    --shell-nav-top: 88px;
    --shell-content-top: 166px;
  }

  body {
    background:
      radial-gradient(1100px 660px at 72% -180px, rgba(34, 211, 238, 0.10), transparent 64%),
      radial-gradient(820px 520px at 12% 108%, rgba(192, 132, 252, 0.075), transparent 60%),
      linear-gradient(180deg, #05080d 0%, #060a10 58%, #04070b 100%);
    color: var(--text-primary);
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.34;
    background-image:
      linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 72%, transparent);
  }

  button,
  input,
  textarea,
  select { font: inherit; }
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--border-accent) !important;
  }

  .main {
    width: min(1760px, 100%);
    padding: var(--shell-content-top) 20px 72px;
  }
  .topbar,
  .console-nav,
  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .card,
  .world-side-card,
  .world-event-overlay,
  .world-hud-chip,
  .world-map-control,
  .modal-card {
    border-color: var(--border);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
      var(--panel);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.045);
  }

  .topbar {
    min-height: var(--shell-topbar-height);
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(5, 8, 13, 0.78);
    backdrop-filter: var(--glass-blur);
  }
  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(34,211,238,0.19), rgba(7,9,12,0.95));
  }
  .brand-name {
    font-size: 14px;
    letter-spacing: -0.01em;
  }
  .brand-sub {
    color: var(--text-muted);
    letter-spacing: 0.11em;
  }
  .topbar-tools { gap: 8px; }
  .admin-chip,
  .logout-btn,
  .live-pill,
  .toolbar-action,
  .icon-btn,
  .control-button,
  .audit-refresh,
  .alert-ack-button,
  .announce-button,
  .metric-action {
    border-radius: 10px;
    min-height: 34px;
  }
  .admin-chip {
    background: rgba(255,255,255,0.035);
    border-color: var(--border);
  }
  .logout-btn:hover,
  .control-button.danger:hover {
    color: var(--status-danger);
    border-color: var(--red-line);
    background: var(--red-soft);
  }
  .live-pill {
    border-radius: 999px;
    padding-inline: 12px;
  }

  .console-nav {
    top: var(--shell-nav-top);
    gap: 4px;
    padding: 5px;
    border-radius: 16px;
    background: rgba(5, 8, 13, 0.74);
    backdrop-filter: var(--glass-blur);
  }
  .console-nav-btn {
    min-height: 48px;
    border-radius: 12px;
    padding: 9px 14px;
    color: var(--text-muted);
    transition: background .1s ease, color .1s ease, border-color .1s ease, transform .1s ease;
  }
  .console-nav-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.04);
  }
  .console-nav-btn.active {
    color: var(--status-info);
    background:
      linear-gradient(135deg, rgba(34,211,238,0.18), rgba(34,211,238,0.055)),
      rgba(255,255,255,0.018);
    border-color: var(--border-accent);
  }
  .console-nav-btn span { color: var(--text-muted); }

  .console-view.active {
    animation: appViewIn .09s ease-out both;
  }
  @keyframes appViewIn {
    from { opacity: 0.82; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .view-heading {
    margin: 0 0 16px;
    align-items: center;
  }
  .view-title {
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.045em;
  }

  .overview-card,
  .ops-card,
  .chart-card,
  .metric-summary-card,
  .kpi,
  .card,
  .world-side-card {
    border-radius: 16px;
  }
  .side-section-head {
    min-height: 36px;
    padding-bottom: 10px;
    border-color: rgba(135,162,190,0.13);
  }
  .side-section-head .title,
  .kpi-label,
  .chart-title,
  .metric-summary-label,
  .toolbar-section-title {
    color: var(--text-secondary);
    letter-spacing: 0.17em;
  }

  /* Status */
  .status-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 18px;
  }
  .kpi-row {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
  }
  .kpi {
    min-height: 116px;
    padding: 16px;
    overflow: hidden;
  }
  .kpi::after {
    content: '';
    position: absolute;
    inset: auto 14px 0 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,211,238,0.28), transparent);
    opacity: .5;
  }
  .kpi-value { font-size: clamp(22px, 1.6vw, 30px); }
  .status-card-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
  }
  #api-health-section,
  #synthetic-monitor-section,
  #join-flow-section { grid-column: span 4; }
  .status-card-wide { grid-column: 1 / -1; }
  .auth-line,
  .synthetic-field,
  .action-queue-item,
  .control-row,
  .audit-item,
  .announcement-item {
    border-radius: 12px;
    border-color: rgba(135,162,190,0.12);
    background: rgba(3, 6, 10, 0.34);
  }
  .synthetic-step-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  .synthetic-step,
  .synthetic-empty {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    border-color: rgba(135,162,190,0.14);
  }
  .status-event-panel {
    border-radius: 18px;
    min-height: calc(100vh - var(--shell-content-top) - 24px);
  }
  .status-event-panel .event-log {
    min-height: 560px;
    max-height: calc(100vh - var(--shell-content-top) - 150px);
  }
  #view-status .regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  /* Overview map */
  body.overview-map-mode .main { padding: 0; }
  body.overview-map-mode #view-overview { min-height: 100vh; }
  .world-map-panel {
    background:
      radial-gradient(920px 580px at 50% 42%, rgba(34,211,238,0.13), transparent 62%),
      radial-gradient(760px 500px at 48% 50%, rgba(74,222,128,0.06), transparent 68%),
      linear-gradient(180deg, rgba(8, 14, 22, 0.96), rgba(2, 5, 9, 0.98));
  }
  .world-overview-layout .world-side-panel {
    top: calc(var(--shell-nav-top) + 72px);
    right: var(--shell-inline);
    bottom: 18px;
    width: min(392px, calc(100vw - 36px));
    max-height: calc(100vh - var(--shell-nav-top) - 92px);
    padding: 0 2px 0 0;
  }
  .world-side-card {
    overflow: hidden;
    margin-bottom: 12px;
    background: rgba(8, 12, 18, 0.72);
    backdrop-filter: var(--glass-blur);
  }
  .world-side-head { padding: 13px 14px 11px; }
  .world-summary-grid,
  .world-ops-grid { padding: 12px; }
  .world-list { padding: 8px; }
  .world-row {
    border-radius: 12px;
    border-color: rgba(135,162,190,0.12);
    background: rgba(255,255,255,0.026);
  }
  .world-row:hover,
  .world-row.selected {
    border-color: var(--border-accent);
    background: rgba(34,211,238,0.08);
  }
  .world-map-hud {
    top: calc(var(--shell-nav-top) + 72px);
    grid-template-columns: repeat(4, minmax(112px, auto));
    gap: 10px;
  }
  .world-hud-chip {
    min-width: 112px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(8, 12, 18, 0.66);
    backdrop-filter: var(--glass-blur);
  }
  .world-hud-chip .value { font-size: 18px; color: var(--status-success); }
  .world-map-controls {
    bottom: 236px;
    gap: 8px;
  }
  .world-map-control {
    min-height: 34px;
    border-radius: 999px;
    background: rgba(8, 12, 18, 0.72);
  }
  .world-event-overlay {
    width: min(680px, calc(100vw - 500px - var(--shell-inline)));
    max-height: 220px;
    background: rgba(8, 12, 18, 0.70);
    backdrop-filter: var(--glass-blur);
  }
  .world-node-session-stack { z-index: 15; }
  .world-session-card,
  .world-session-empty {
    border-radius: 14px;
    background: rgba(7, 10, 15, 0.88);
    backdrop-filter: var(--glass-blur);
  }

  /* Sessions */
  .toolbar {
    position: sticky;
    top: calc(var(--shell-content-top) - 14px);
    z-index: 9;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(5, 8, 13, 0.76);
    backdrop-filter: var(--glass-blur);
  }
  .filters,
  .search input,
  .metric-range {
    border-radius: 12px;
    border-color: var(--border);
    background: rgba(255,255,255,0.035);
  }
  .filter { min-height: 34px; border-radius: 10px; }
  .search input { min-height: 38px; }
  .card-grid { gap: 8px; }
  .card {
    background: rgba(13, 19, 27, 0.82);
    border-color: rgba(135,162,190,0.15);
  }
  .card:hover {
    border-color: var(--border-accent);
    background: rgba(17, 25, 35, 0.92);
  }
  .card-row {
    min-height: 82px;
    grid-template-columns: 4px 16px minmax(160px, 1.05fr) minmax(140px, .9fr) minmax(132px, .85fr) minmax(104px, .65fr) minmax(130px, .78fr) auto auto auto;
  }
  .room-code { font-size: 17px; }
  .action-btn { border-radius: 9px; min-height: 30px; }

  /* Metrics */
  .metric-dashboard-head {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(5, 8, 13, 0.64);
  }
  .metric-summary-grid { grid-template-columns: repeat(4, minmax(190px, 1fr)); }
  .charts-grid { grid-template-columns: repeat(2, minmax(360px, 1fr)); }
  .chart-card { min-height: 320px; }
  .chart-canvas {
    height: 196px;
    border-radius: 13px;
    border-color: rgba(135,162,190,0.12);
    background:
      linear-gradient(180deg, rgba(34,211,238,0.035), rgba(255,255,255,0.006)),
      rgba(3, 6, 10, 0.42);
  }
  .chart-expand { border-radius: 9px; }

  /* Operations */
  .operations-grid {
    grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1.09fr) minmax(360px, 1.09fr);
    grid-template-areas:
      "control notice audit";
    gap: 16px;
    align-items: start;
  }
  .operations-grid > .ops-card { min-height: 0; }
  .operations-grid > .ops-card:nth-child(1),
  .operations-grid > .ops-card:nth-child(2),
  .operations-grid > .ops-card:nth-child(3) { grid-column: auto; }
  .operations-grid > .ops-card.ops-control-card { grid-area: control; }
  .operations-grid > .ops-card.ops-notice-card { grid-area: notice; }
  .operations-grid > .ops-card.ops-audit-card { grid-area: audit; }
  .ops-control-card {
    min-height: 0;
  }
  .ops-notice-card,
  .ops-audit-card {
    min-height: 420px;
  }
  .ops-notice-card .announcement-list {
    max-height: min(42vh, 336px);
  }
  .ops-audit-card .audit-list {
    max-height: min(48vh, 370px);
  }

  .event-tabs { border-radius: 12px; padding: 4px; border-color: var(--border); }
  .event-tab { border-radius: 9px; min-height: 30px; }
  .event { border-radius: 8px; }

  @media (max-width: 1440px) {
    #api-health-section,
    #synthetic-monitor-section,
    #join-flow-section { grid-column: span 6; }
    #join-flow-section { grid-column: 1 / -1; }
    .world-map-hud { grid-template-columns: repeat(2, minmax(112px, auto)); }
    .world-event-overlay { width: min(560px, calc(100vw - 460px - var(--shell-inline))); }
  }

  @media (max-width: 1180px) {
    :root { --shell-inline: 14px; --shell-content-top: 176px; }
    .topbar { align-items: flex-start; }
    .console-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; }
    .console-nav-btn { align-items: center; text-align: center; }
    .status-dashboard { grid-template-columns: 1fr; }
    .status-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #api-health-section,
    #synthetic-monitor-section,
    #join-flow-section,
    .status-card-wide { grid-column: auto; }
    .status-event-panel { position: static; min-height: auto; }
    .status-event-panel .event-log { min-height: 440px; max-height: 58vh; }
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .charts-grid { grid-template-columns: 1fr; }
    .metric-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .operations-grid {
      grid-template-columns: 1fr;
      grid-template-areas:
        "control"
        "notice"
        "audit";
    }
    .operations-grid > .ops-card,
    .operations-grid > .ops-card:nth-child(1),
    .operations-grid > .ops-card:nth-child(2),
    .operations-grid > .ops-card:nth-child(3) { grid-column: auto; }
    .card-row {
      grid-template-columns: 4px 14px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(96px, .8fr) auto auto;
    }
    .col-mode,
    .col-phase { display: none; }
  }

  @media (max-width: 720px) {
    :root {
      --shell-inline: max(8px, env(safe-area-inset-left));
      --shell-top: max(8px, env(safe-area-inset-top));
      --shell-topbar-height: 62px;
      --shell-nav-top: calc(var(--shell-top) + 70px);
      --shell-content-top: calc(var(--shell-top) + 126px);
    }
    body { font-size: 12px; }
    .main { padding: var(--shell-content-top) 10px 60px; }
    .topbar {
      min-height: var(--shell-topbar-height);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border-radius: 14px;
    }
    .brand { min-width: 0; gap: 8px; }
    .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
    .brand-text { min-width: 0; }
    .brand-name { max-width: none; font-size: 13px; }
    .brand-sub { display: none; }
    .topbar-tools {
      display: grid;
      grid-template-columns: auto auto;
      gap: 6px;
      justify-content: end;
      width: auto;
    }
    .topbar-tools .build-info { display: none; }
    .admin-chip { display: none; }
    .logout-btn,
    .live-pill { min-height: 32px; padding: 6px 8px; font-size: 9px; }
    .console-nav {
      top: var(--shell-nav-top);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      overflow: visible;
      gap: 4px;
      padding: 5px;
      scrollbar-width: none;
    }
    .console-nav::-webkit-scrollbar { display: none; }
    .console-nav-btn {
      min-width: 0;
      min-height: 38px;
      padding: 7px 4px;
      font-size: 8px;
      line-height: 1;
      letter-spacing: 0.018em;
      border-radius: 11px;
      text-align: center;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .console-nav-btn span { display: none; }
    .view-title { font-size: 32px; }
    .kpi-row,
    .status-card-grid,
    .metric-summary-grid,
    .charts-grid,
    .operations-grid,
    .synthetic-grid { grid-template-columns: 1fr; }
    #api-health-section,
    #synthetic-monitor-section,
    #join-flow-section,
    .status-card-wide { grid-column: auto; }
    .toolbar {
      top: calc(var(--shell-content-top) - 8px);
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
    }
    .toolbar-section-title { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
    .filters {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      overflow: visible;
      width: 100%;
      gap: 4px;
    }
    .filter {
      min-width: 0;
      justify-content: center;
      padding: 8px 6px;
      font-size: 9px;
      letter-spacing: 0.025em;
      gap: 5px;
    }
    .filter .count {
      padding: 1px 5px;
      font-size: 9px;
    }
    .search { grid-column: 1 / -1; width: 100%; }
    .toolbar .icon-btn { width: 42px; height: 38px; }
    .card-row {
      grid-template-columns: 4px 14px minmax(0, 1fr) auto;
      gap: 10px;
      padding: 12px 12px 12px 0;
      min-height: 94px;
    }
    .col-host,
    .col-mode,
    .col-time,
    .col-roster,
    .col-phase { display: none; }
    .col-actions { grid-column: 3 / 5; justify-content: flex-start; margin-top: 8px; }
    .status-badge { font-size: 9px; padding: 4px 7px; }
    .detail-grid { grid-template-columns: 1fr; }
    .metric-dashboard-head { align-items: stretch; flex-direction: column; }
    .metric-controls { justify-content: flex-start; }
    .metric-range { max-width: 100%; overflow-x: auto; }
    .chart-card { min-height: 288px; }
    .chart-canvas { height: 168px; }

    body.overview-map-mode .topbar { display: none; }
    body.overview-map-mode .console-nav {
      top: 8px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      overflow: visible;
    }
    body.overview-map-mode .world-map-hud {
      top: 58px;
      left: 8px;
      right: 8px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 5px;
    }
    body.overview-map-mode .world-hud-chip {
      min-width: 0;
      padding: 6px 7px;
      border-radius: 10px;
    }
    body.overview-map-mode .world-hud-chip .label { font-size: 7px; }
    body.overview-map-mode .world-hud-chip .value { font-size: 12px; }
    body.overview-map-mode .world-overview-layout .world-side-panel {
      left: 8px;
      right: 8px;
      bottom: 54px;
      width: auto;
      max-height: min(58vh, 440px);
      border-radius: 18px;
      visibility: hidden;
    }
    body.overview-map-mode.world-mobile-panel-open .world-overview-layout .world-side-panel {
      visibility: visible;
    }
    body.overview-map-mode .world-map-controls { bottom: 10px; left: 8px; }
    body.overview-map-mode .world-map-control { min-height: 34px; padding: 7px 9px; }
    body.overview-map-mode .world-event-overlay { display: none; }
    body.overview-map-mode .world-mobile-panel-toggle { bottom: 10px; right: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }
  }



  /* ========================================================================
     PROJECT VOID · REFERENCE LAYOUT / GLASS DESIGN SYSTEM
     ======================================================================== */
  :root {
    --sidebar-width: 250px;
    --shell-gap: 12px;
    --topbar-height: 62px;
    --content-left: calc(var(--sidebar-width) + var(--shell-gap) * 2);
    --glass-bg: rgba(13, 25, 43, .68);
    --glass-bg-strong: rgba(10, 21, 37, .84);
    --glass-border: rgba(137, 192, 236, .18);
    --glass-border-strong: rgba(91, 213, 255, .32);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.075);
    --designer-shadow: 0 22px 62px rgba(0,0,0,.32);
    --designer-cyan: #53dcff;
    --designer-blue: #72a8ff;
    --designer-purple: #a883ff;
    --designer-green: #55e7a0;
    --designer-amber: #ffc866;
  }

  body {
    min-width: 320px;
    background:
      radial-gradient(1000px 720px at 74% -16%, rgba(84, 85, 187, .25), transparent 68%),
      radial-gradient(880px 620px at 12% 96%, rgba(26, 169, 220, .12), transparent 68%),
      linear-gradient(145deg, #07101d 0%, #08111f 48%, #060b14 100%) !important;
  }
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(rgba(140,190,225,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,190,225,.02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 58% 38%, #000 0, transparent 74%);
  }

  .app { min-height: 100vh; }
  .main,
  body.overview-map-mode .main {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: calc(var(--topbar-height) + var(--shell-gap) * 2) var(--shell-gap) 42px var(--content-left) !important;
  }
  body.overview-map-mode { overflow: hidden; }
  body.overview-map-mode #view-overview {
    width: 100% !important;
    height: calc(100vh - var(--topbar-height) - var(--shell-gap) * 3) !important;
    min-height: 640px !important;
  }

  /* Sidebar */
  .console-nav,
  body.overview-map-mode .console-nav {
    position: fixed !important;
    inset: var(--shell-gap) auto var(--shell-gap) var(--shell-gap) !important;
    z-index: 110 !important;
    width: var(--sidebar-width) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.012) 48%),
      rgba(6, 14, 25, .82) !important;
    box-shadow: var(--designer-shadow), var(--glass-highlight) !important;
    backdrop-filter: blur(28px) saturate(1.28) !important;
  }
  .console-nav::before,
  .console-nav::after { display: none !important; content: none !important; }
  .sidebar-brand {
    height: 86px;
    flex: 0 0 86px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(145,195,232,.12);
    background: linear-gradient(135deg, rgba(82,194,255,.075), rgba(168,131,255,.035));
  }
  .sidebar-brand-mark {
    width: 36px;
    height: 36px;
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 0 14px rgba(83,220,255,.28));
  }
  .sidebar-brand-mark::before,
  .sidebar-brand-mark::after,
  .sidebar-brand-mark span {
    content: '';
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 100%, 0 0, 25% 7%, 50% 58%, 75% 7%, 100% 0);
  }
  .sidebar-brand-mark::before { background: linear-gradient(145deg, #e9f8ff, #6edbff 48%, #b99cff); }
  .sidebar-brand-mark::after { inset: 8px; background: #091422; }
  .sidebar-brand-mark span { inset: 13px 12px 8px; background: linear-gradient(145deg, #6ee7ff, #b99cff); }
  .sidebar-brand-copy { min-width: 0; display: grid; gap: 4px; }
  .sidebar-brand-copy strong { color: #f4f8ff; font-size: 14px; line-height: 1; letter-spacing: -.02em; }
  .sidebar-brand-copy small { color: #63dfff !important; font: 700 8px/1 var(--mono) !important; letter-spacing: .12em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar-section-label {
    padding: 18px 18px 9px;
    color: #526c84;
    font: 850 8px/1 var(--mono);
    letter-spacing: .19em;
    text-transform: uppercase;
  }
  .sidebar-menu { display: flex; flex-direction: column; gap: 5px; padding: 0 11px; }
  .console-nav-btn {
    width: 100% !important;
    min-height: 47px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 7px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #8599ad !important;
    background: transparent !important;
    text-align: left !important;
    font-family: var(--sans) !important;
    text-transform: none !important;
    transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease !important;
  }
  .console-nav-btn::before { display: none !important; content: none !important; }
  .console-nav-btn > svg {
    width: 20px;
    height: 20px;
    justify-self: center;
    color: #7d91a6;
    transition: color .16s ease, filter .16s ease;
  }
  .console-nav-btn .nav-copy {
    min-width: 0;
    display: grid !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  .console-nav-btn .nav-copy b { color: inherit; font-size: 11px; font-weight: 720; line-height: 1.05; }
  .console-nav-btn .nav-copy small { color: #4f667b; font: 650 8px/1 var(--mono); letter-spacing: .03em; white-space: nowrap; }
  .console-nav-btn > i {
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
  }
  .console-nav-btn:hover {
    color: #dbe8f5 !important;
    border-color: rgba(137,192,236,.13) !important;
    background: rgba(255,255,255,.035) !important;
    transform: translateX(2px) !important;
  }
  .console-nav-btn.active {
    color: #f7fbff !important;
    border-color: rgba(83,220,255,.30) !important;
    background: linear-gradient(100deg, rgba(83,220,255,.17), rgba(111,143,255,.095) 60%, rgba(168,131,255,.08)) !important;
    box-shadow: 0 12px 30px rgba(28,142,195,.12), inset 0 1px 0 rgba(255,255,255,.07) !important;
    transform: none !important;
  }
  .console-nav-btn.active > svg { color: var(--designer-cyan); filter: drop-shadow(0 0 8px rgba(83,220,255,.45)); }
  .console-nav-btn.active .nav-copy small { color: #79b6d2; }
  .sidebar-alert-count {
    min-width: 19px;
    height: 19px;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    color: #ffb5c3 !important;
    background: rgba(255,105,137,.14) !important;
    font: 800 8px/1 var(--mono) !important;
  }
  .nav-alert-tail { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
  .nav-alert-tail > i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
  }
  .sidebar-footer { margin-top: auto; padding: 12px; display: grid; gap: 9px; }
  .sidebar-system-state,
  .sidebar-user-card {
    display: grid;
    align-items: center;
    border: 1px solid rgba(145,195,232,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .sidebar-system-state { grid-template-columns: 9px 1fr; gap: 10px; padding: 11px 12px; }
  .sidebar-system-state > span { width: 8px; height: 8px; border-radius: 50%; background: var(--designer-green); box-shadow: 0 0 12px rgba(85,231,160,.72); }
  .sidebar-system-state div,
  .sidebar-user-card div { min-width: 0; display: grid; gap: 3px; }
  .sidebar-system-state b,
  .sidebar-user-card strong { color: #dbe8f6; font-size: 9px; line-height: 1; }
  .sidebar-system-state small,
  .sidebar-user-card small { color: #5b7288; font: 650 7px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-user-card { grid-template-columns: 31px minmax(0,1fr) 24px; gap: 9px; padding: 10px; }
  .sidebar-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #061421; background: linear-gradient(145deg, #f2fbff, #a9c7ff); font-weight: 850; font-size: 11px; }
  .sidebar-user-card button { width: 24px; height: 24px; border: 0; border-radius: 8px; color: #7890a7; background: rgba(255,255,255,.035); cursor: pointer; }

  /* Topbar */
  .topbar,
  body.overview-map-mode .topbar {
    position: fixed !important;
    top: var(--shell-gap) !important;
    left: var(--content-left) !important;
    right: var(--shell-gap) !important;
    z-index: 105 !important;
    min-height: var(--topbar-height) !important;
    height: var(--topbar-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 9px 13px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.012)), rgba(7,15,27,.78) !important;
    box-shadow: var(--designer-shadow), var(--glass-highlight) !important;
    backdrop-filter: blur(26px) saturate(1.28) !important;
  }
  .topbar::before,
  .topbar::after { display: none !important; content: none !important; }
  .topbar-context { min-width: 0; display: flex; align-items: center; gap: 9px; }
  .mobile-menu-button { display: none; }
  .server-selector {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(137,192,236,.16);
    border-radius: 11px;
    color: #eff8ff;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font: 750 10px/1 var(--mono);
    letter-spacing: .02em;
  }
  .server-selector svg { width: 14px; height: 14px; color: #6e8499; }
  .server-online { display: inline-flex; align-items: center; gap: 6px; color: var(--designer-green); font: 750 9px/1 var(--mono); }
  .server-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--designer-green); box-shadow: 0 0 12px rgba(85,231,160,.72); }
  .topbar-divider { width: 1px; height: 20px; background: rgba(137,192,236,.13); }
  .topbar-uptime { color: #738aa0; font: 650 9px/1 var(--mono); white-space: nowrap; }
  .topbar-uptime strong { color: #a9bccc; font-weight: 700; }
  .topbar-tools { min-width: 0; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 7px !important; flex-wrap: nowrap !important; }
  .topbar-icon-button {
    width: 36px;
    height: 36px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(137,192,236,.14);
    border-radius: 11px;
    color: #90a4b8;
    background: rgba(255,255,255,.028);
    cursor: pointer;
  }
  .topbar-icon-button svg { width: 17px; height: 17px; }
  .notification-count { position: absolute; right: -3px; top: -4px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; color: white; background: #ff617d; font: 850 7px/1 var(--mono); box-shadow: 0 0 12px rgba(255,97,125,.38); }
  .language-switch,
  .login-language {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(137,192,236,.14);
    border-radius: 10px;
    background: rgba(3,9,17,.36);
  }
  .login-language { position: absolute; top: 18px; right: 18px; z-index: 4; }
  .language-option {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    color: #71889e;
    background: transparent;
    cursor: pointer;
    font: 800 8px/1 var(--mono);
  }
  .language-option.active { color: #061522; background: linear-gradient(135deg, #66e4ff, #8daaff); box-shadow: 0 0 16px rgba(83,220,255,.22); }
  .topbar .demo-mode-switch { min-height: 34px; border-radius: 10px; }
  .topbar .admin-chip { min-height: 34px; border-radius: 10px; background: rgba(255,255,255,.028); }
  .topbar .logout-btn { min-height: 34px; border-radius: 10px; }
  .topbar .live-pill { min-height: 34px; border-radius: 10px; }

  /* Shared panels */
  .glass-panel,
  .feature-kpi,
  .feature-card {
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.013) 55%), var(--glass-bg);
    box-shadow: 0 16px 42px rgba(0,0,0,.22), var(--glass-highlight);
    backdrop-filter: blur(22px) saturate(1.2);
  }
  .panel-heading {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(137,192,236,.11);
  }
  .panel-heading > span { color: #e9f3fd; font-size: 11px; font-weight: 760; letter-spacing: -.01em; }
  .panel-heading small { color: #60778e; font: 700 7px/1 var(--mono); letter-spacing: .10em; }
  .panel-heading button { border: 0; color: #738da4; background: transparent; cursor: pointer; font-size: 8px; }

  /* Overview layout */
  .overview-dashboard {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr) 304px;
    gap: 11px;
    min-height: 0;
  }
  .overview-left-column,
  .overview-right-column {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .overview-map-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 66px minmax(420px, 1fr) 108px; gap: 10px; }

  .overview-central-card { flex: 0 0 auto; overflow: hidden; }
  .central-server-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 13px 10px; }
  .central-server-identity strong { color: #f2f8ff; font: 780 11px/1 var(--mono); }
  .mini-online { display: inline-flex; align-items: center; gap: 5px; color: var(--designer-green); font: 700 8px/1 var(--mono); }
  .mini-online i { width: 6px; height: 6px; border-radius: 50%; background: var(--designer-green); box-shadow: 0 0 9px rgba(85,231,160,.72); }
  .central-main-stats { display: grid; gap: 7px; padding: 0 13px 11px; }
  .central-main-stats > div { min-height: 47px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(137,192,236,.11); border-radius: 12px; background: rgba(2,8,16,.26); }
  .central-stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--designer-cyan); background: rgba(83,220,255,.10); font-size: 12px; }
  .central-stat-icon.latency { color: var(--designer-green); background: rgba(85,231,160,.09); }
  .central-main-stats strong { display: block; color: #eef7ff; font: 800 12px/1 var(--mono); }
  .central-main-stats small { display: block; margin-top: 4px; color: #6f8498; font-size: 8px; }
  .compact-summary { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 6px !important; padding: 0 13px 13px !important; }
  .compact-summary .world-stat { min-height: 45px; padding: 8px !important; border-radius: 10px !important; background: rgba(2,8,16,.24) !important; box-shadow: none !important; }
  .compact-summary .world-stat .k { font-size: 6px !important; }
  .compact-summary .world-stat .v { margin-top: 4px !important; font-size: 10px !important; }

  .overview-node-card { flex: 1 1 auto; min-height: 168px; overflow: hidden; }
  .overview-node-list { max-height: none !important; height: calc(100% - 38px); overflow: auto; padding: 7px !important; }
  .overview-node-list .world-row { padding: 8px 7px !important; border-radius: 10px !important; border: 1px solid transparent !important; }
  .overview-node-list .world-row-title { font-size: 9px !important; }
  .overview-node-list .world-row-sub { font-size: 7px !important; }
  .overview-node-list .world-row-status { min-width: 62px !important; }
  .overview-node-list .world-row-status .world-row-sub { display: none; }
  .overview-node-list .world-row-value { font-size: 9px !important; }
  .overview-node-list .world-node-load { display: none; }

  .overview-traffic-card { flex: 0 0 auto; padding-bottom: 10px; }
  .traffic-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; padding: 9px 13px 2px; align-items: center; }
  .traffic-row span { color: #71879b; font-size: 8px; }
  .traffic-row strong { color: #dce9f6; font: 760 8px/1 var(--mono); }
  .traffic-row > i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.055); }
  .traffic-row > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--designer-cyan), var(--designer-purple)); box-shadow: 0 0 10px rgba(83,220,255,.35); transition: width .35s ease; }
  .overview-health-card { flex: 0 0 auto; min-height: 74px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; padding: 12px 13px; }
  .health-shield { width: 36px; height: 42px; display: grid; place-items: center; clip-path: polygon(50% 0, 92% 16%, 84% 74%, 50% 100%, 16% 74%, 8% 16%); color: #061c18; background: linear-gradient(145deg, #52ebb0, #49cfa7); font-weight: 900; filter: drop-shadow(0 0 13px rgba(85,231,160,.28)); }
  .overview-health-card small { display: block; color: #637b91; font-size: 7px; }
  .overview-health-card strong { display: block; margin-top: 3px; color: var(--designer-green); font-size: 12px; }
  .overview-health-card p { margin-top: 3px; color: #61778d; font-size: 7px; }

  .world-map-hud {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  .world-hud-chip {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 9px !important;
    padding: 9px 11px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.012)), var(--glass-bg) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.20), var(--glass-highlight) !important;
    backdrop-filter: blur(20px) !important;
  }
  .hud-icon { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--designer-cyan); background: rgba(83,220,255,.095); font-size: 13px; }
  .hud-icon.cpu { color: #9eb7ff; background: rgba(114,168,255,.10); }
  .hud-icon.traffic { color: var(--designer-green); background: rgba(85,231,160,.09); }
  .hud-icon.flows { color: var(--designer-purple); background: rgba(168,131,255,.10); }
  .world-hud-chip .label { grid-column: 2; margin: 0 !important; color: #75899d !important; font: 650 7px/1 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
  .world-hud-chip .value { grid-column: 2; margin: 0 !important; color: #eef7ff !important; font: 820 14px/1 var(--mono) !important; }

  .world-overview-layout .world-map-panel,
  .world-map-panel {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(84, 191, 239, .22) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(560px 400px at 50% 48%, rgba(32, 160, 213, .13), transparent 70%),
      radial-gradient(760px 520px at 88% 0%, rgba(126, 92, 214, .10), transparent 66%),
      linear-gradient(145deg, rgba(4,16,29,.96), rgba(3,9,17,.985)) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 90px rgba(40,150,206,.055) !important;
  }
  .world-map-panel::before,
  .world-map-panel::after { display: none !important; content: none !important; }
  .world-overview-layout .world-map-canvas,
  .world-map-canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; z-index: 1 !important; }
  .map-stage-title { position: absolute; left: 16px; top: 14px; z-index: 6; display: grid; gap: 4px; pointer-events: none; }
  .map-stage-title span { color: #e4f1fc; font-size: 10px; font-weight: 760; }
  .map-stage-title small { color: #5f788e; font: 650 7px/1 var(--mono); }
  .map-legend { position: absolute; left: 16px; bottom: 15px; z-index: 7; display: flex; gap: 13px; pointer-events: none; }
  .map-legend span { display: inline-flex; align-items: center; gap: 5px; color: #647b90; font-size: 7px; }
  .map-legend i { width: 6px; height: 6px; border-radius: 50%; }
  .legend-central { background: var(--designer-purple); box-shadow: 0 0 8px rgba(168,131,255,.7); }
  .legend-node { background: var(--designer-green); box-shadow: 0 0 8px rgba(85,231,160,.7); }
  .legend-flow { background: var(--designer-cyan); box-shadow: 0 0 8px rgba(83,220,255,.7); }
  .world-map-help { left: auto !important; right: 16px !important; bottom: 15px !important; z-index: 7 !important; font-size: 7px !important; color: #4f687e !important; }
  .world-map-controls { left: 50% !important; right: auto !important; bottom: 14px !important; z-index: 10 !important; transform: translateX(-50%); display: flex !important; gap: 5px !important; }
  .world-map-control { min-height: 30px !important; padding: 0 10px !important; border-radius: 9px !important; color: #9ab0c4 !important; background: rgba(7,17,30,.76) !important; backdrop-filter: blur(16px) !important; font-size: 7px !important; }
  .world-map-control.square { width: 30px; padding: 0 !important; font-size: 12px !important; }
  .world-map-control.active { color: var(--designer-green) !important; border-color: rgba(85,231,160,.28) !important; background: rgba(85,231,160,.10) !important; }
  .world-mobile-panel-toggle { display: none !important; }

  .overview-map-footer { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 9px; }
  .overview-network-strip { min-width: 0; overflow: hidden; }
  .overview-network-strip .panel-heading { min-height: 34px; }
  .overview-network-strip .world-ops-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 6px !important; padding: 8px !important; }
  .overview-network-strip .world-ops-item { min-height: 52px; padding: 8px !important; border-radius: 10px !important; background: rgba(2,8,16,.24) !important; }
  .overview-network-strip .world-ops-item .k { font-size: 6px !important; }
  .overview-network-strip .world-ops-item .v { font-size: 9px !important; }
  .overview-quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .overview-quick-actions button { min-width: 0; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid var(--glass-border); border-radius: 14px; color: #9eb0c1; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.012)), var(--glass-bg); box-shadow: var(--glass-highlight); cursor: pointer; }
  .overview-quick-actions button:hover { color: var(--designer-cyan); border-color: var(--glass-border-strong); background: rgba(83,220,255,.075); }
  .overview-quick-actions span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #e7f4ff; background: rgba(139,176,214,.11); font-size: 12px; }
  .overview-quick-actions b { font-size: 7px; white-space: nowrap; }

  .overview-right-column.world-side-panel { position: static !important; inset: auto !important; width: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; display: flex !important; }
  .overview-event-card { flex: 1 1 55%; min-height: 0; overflow: hidden; }
  .world-event-count-line { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px 2px; color: #5e758b; font: 650 7px/1 var(--mono); }
  .overview-event-card .world-event-list { height: calc(100% - 62px); max-height: none !important; overflow: auto; padding: 5px 7px 9px; }
  .overview-event-card .event { grid-template-columns: 40px 47px 5px minmax(0,1fr) !important; gap: 6px !important; padding: 7px 6px !important; border-radius: 9px !important; font-size: 7px !important; }
  .overview-event-card .event-time { font-size: 6px; }
  .overview-event-card .event-tag { font-size: 6px; padding: 2px 3px; }
  .overview-flow-card { flex: 1 1 45%; min-height: 0; overflow: hidden; }
  .overview-flow-list { height: calc(100% - 38px); max-height: none !important; overflow: auto; padding: 7px !important; }
  .overview-flow-list .world-row { padding: 9px 8px !important; border-radius: 10px !important; border: 1px solid transparent !important; }
  .overview-flow-list .world-row-title { font-size: 8px !important; }
  .overview-flow-list .world-row-sub { font-size: 7px !important; }
  .overview-flow-list .world-row-value { font-size: 9px !important; }

  /* Feature-ready backup and alert pages */
  .view-subtitle { margin-top: 7px; }
  .primary-action { color: #061522 !important; border-color: transparent !important; background: linear-gradient(135deg, var(--designer-cyan), #8ea9ff) !important; }
  .feature-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
  .feature-kpi { min-height: 112px; padding: 16px; position: relative; overflow: hidden; }
  .feature-kpi::after { content: ''; position: absolute; width: 80px; height: 80px; right: -26px; top: -28px; border-radius: 50%; background: rgba(83,220,255,.09); filter: blur(3px); }
  .feature-kpi.warning::after { background: rgba(255,200,102,.11); }
  .feature-kpi.danger::after { background: rgba(255,102,135,.11); }
  .feature-kpi.success::after { background: rgba(85,231,160,.10); }
  .feature-kpi > span { color: #758ba0; font: 750 8px/1 var(--mono); letter-spacing: .10em; text-transform: uppercase; }
  .feature-kpi > strong { display: block; margin-top: 17px; color: #eef7ff; font-size: 23px; line-height: 1; }
  .feature-kpi > small { display: block; margin-top: 9px; color: #5e7489; font-size: 8px; }
  .feature-layout { display: grid; gap: 12px; margin-bottom: 12px; }
  .feature-layout.two-column { grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); }
  .feature-layout.alert-layout { grid-template-columns: minmax(0,1.3fr) minmax(310px,.7fr); }
  .feature-card { padding-bottom: 14px; overflow: hidden; }
  .settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; padding: 14px; }
  .settings-form-grid label { display: grid; gap: 7px; color: #74899d; font-size: 8px; }
  .settings-form-grid input,
  .settings-form-grid select { width: 100%; min-height: 39px; padding: 0 11px; border: 1px solid rgba(137,192,236,.14); border-radius: 10px; color: #dbe8f4; background: rgba(2,8,16,.32); outline: none; }
  .feature-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px; }
  .feature-actions button { min-height: 35px; padding: 0 13px; border: 1px solid rgba(83,220,255,.26); border-radius: 9px; color: #061522; background: linear-gradient(135deg, var(--designer-cyan), #8daaff); cursor: pointer; font-size: 8px; font-weight: 800; }
  .feature-actions button.ghost { color: #93a8bb; border-color: rgba(137,192,236,.14); background: rgba(255,255,255,.035); }
  .backup-health-ring { --backup-ring-value: 0%; --backup-ring-color: var(--designer-green); width: 132px; height: 132px; display: grid; place-items: center; margin: 22px auto 17px; border-radius: 50%; background: conic-gradient(var(--backup-ring-color) 0 var(--backup-ring-value), rgba(255,255,255,.055) var(--backup-ring-value) 100%); box-shadow: 0 0 34px rgba(85,231,160,.12); }
  .backup-health-ring::before { content: ''; position: absolute; width: 104px; height: 104px; border-radius: 50%; background: #0b1727; }
  .backup-health-ring > div { position: relative; z-index: 1; display: grid; place-items: center; gap: 5px; }
  .backup-health-ring strong { color: #eef7ff; font-size: 24px; }
  .backup-health-ring small { color: #647a8f; font-size: 8px; }
  .backup-health-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 0 14px; }
  .backup-health-stats > div { padding: 10px 8px; border: 1px solid rgba(137,192,236,.11); border-radius: 10px; background: rgba(2,8,16,.25); text-align: center; }
  .backup-health-stats span { display: block; color: #647a8f; font-size: 7px; }
  .backup-health-stats strong { display: block; margin-top: 5px; color: #dce9f5; font: 780 10px/1 var(--mono); }
  .backup-history-card { min-height: 260px; }
  .feature-table { padding: 8px 12px 12px; }
  .feature-table-row { display: grid; grid-template-columns: minmax(160px,1.2fr) repeat(4,minmax(90px,.6fr)) auto; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px; border-bottom: 1px solid rgba(137,192,236,.08); color: #9cb0c2; font-size: 8px; }
  .feature-table-row.header { min-height: 36px; color: #5f768c; font: 750 7px/1 var(--mono); text-transform: uppercase; }
  .feature-table-row strong { color: #e6f0fa; font: 750 9px/1 var(--mono); }
  .feature-table-row button { min-height: 28px; padding: 0 9px; border: 1px solid rgba(137,192,236,.14); border-radius: 8px; color: #8fa5b8; background: rgba(255,255,255,.025); cursor: pointer; }
  .feature-empty { min-height: 190px; display: grid; place-items: center; color: #60778d; text-align: center; font-size: 9px; }
  .feature-empty span { display: block; margin-bottom: 8px; color: #7890a6; font-size: 22px; }
  .alert-feed-card { min-height: 430px; }
  .alert-center-list { max-height: 470px; overflow: auto; padding: 8px; }
  .alert-center-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: start; padding: 11px; border: 1px solid rgba(137,192,236,.10); border-radius: 12px; background: rgba(2,8,16,.23); margin-bottom: 7px; }
  .alert-center-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--designer-cyan); background: rgba(83,220,255,.10); }
  .alert-center-item.warn .alert-center-icon { color: var(--designer-amber); background: rgba(255,200,102,.10); }
  .alert-center-item.error .alert-center-icon { color: #ff7894; background: rgba(255,120,148,.10); }
  .alert-center-copy strong { color: #e5eff8; font-size: 9px; }
  .alert-center-copy p { margin-top: 4px; color: #6e8499; font-size: 8px; line-height: 1.45; }
  .alert-center-copy small { display: block; margin-top: 6px; color: #50687d; font: 650 7px/1 var(--mono); }
  .alert-center-item button { min-height: 28px; padding: 0 8px; border: 1px solid rgba(137,192,236,.14); border-radius: 8px; color: #8da3b7; background: rgba(255,255,255,.025); cursor: pointer; font-size: 7px; }
  .rule-list { display: grid; gap: 7px; padding: 12px; }
  .rule-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(137,192,236,.10); border-radius: 11px; background: rgba(2,8,16,.22); }
  .rule-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--designer-cyan); background: rgba(83,220,255,.09); font-weight: 900; }
  .rule-icon.warning { color: var(--designer-amber); background: rgba(255,200,102,.09); }
  .rule-icon.danger { color: #ff7894; background: rgba(255,120,148,.09); }
  .rule-item strong { display: block; color: #dce8f4; font-size: 9px; }
  .rule-item small { display: block; margin-top: 4px; color: #60768a; font-size: 7px; }
  .rule-toggle { width: 34px; height: 20px; position: relative; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); cursor: pointer; }
  .rule-toggle i { position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #6a7f93; transition: .18s ease; }
  .rule-toggle.active { background: rgba(85,231,160,.22); }
  .rule-toggle.active i { left: 17px; background: var(--designer-green); box-shadow: 0 0 9px rgba(85,231,160,.5); }

  .ui-toast { position: fixed; left: 50%; bottom: 26px; z-index: 3000; transform: translate(-50%, 16px); min-width: 220px; max-width: min(460px, calc(100vw - 30px)); padding: 12px 15px; border: 1px solid rgba(83,220,255,.26); border-radius: 12px; color: #dceaf6; background: rgba(7,18,31,.92); box-shadow: 0 20px 60px rgba(0,0,0,.38); backdrop-filter: blur(20px); font-size: 9px; opacity: 0; pointer-events: none; transition: .18s ease; }
  .ui-toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* Responsive */
  @media (max-width: 1380px) {
    :root { --sidebar-width: 224px; }
    .overview-dashboard { grid-template-columns: 218px minmax(0,1fr) 280px; }
    .overview-map-footer { grid-template-columns: minmax(0,1fr) 210px; }
    .topbar .admin-chip { display: none; }
  }
  @media (max-width: 1160px) {
    :root { --sidebar-width: 82px; }
    .sidebar-brand { justify-content: center; padding: 0; }
    .sidebar-brand-copy,
    .sidebar-section-label,
    .console-nav-btn .nav-copy,
    .console-nav-btn > i,
    .sidebar-system-state,
    .sidebar-user-card div,
    .sidebar-user-card button { display: none !important; }
    .sidebar-menu { padding: 0 10px; }
    .console-nav-btn { grid-template-columns: 1fr !important; padding: 8px !important; }
    .console-nav-btn > svg { width: 22px; height: 22px; }
    .sidebar-alert-count { position: absolute; right: 7px; top: 5px; }
    .sidebar-user-card { display: grid; grid-template-columns: 1fr; place-items: center; }
    .overview-dashboard { grid-template-columns: minmax(0,1fr) 276px; }
    .overview-left-column { display: none; }
    .feature-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 860px) {
    :root { --sidebar-width: 0px; --content-left: var(--shell-gap); }
    body.overview-map-mode { overflow: auto; }
    .console-nav { transform: translateX(calc(-100% - 20px)); width: min(280px, calc(100vw - 30px)) !important; transition: transform .2s ease; }
    body.sidebar-open .console-nav { transform: translateX(0); }
    .sidebar-brand-copy,
    .sidebar-section-label,
    .console-nav-btn .nav-copy,
    .console-nav-btn > i,
    .sidebar-system-state,
    .sidebar-user-card div,
    .sidebar-user-card button { display: grid !important; }
    .sidebar-brand { justify-content: flex-start; padding: 0 18px; }
    .sidebar-menu { padding: 0 11px; }
    .console-nav-btn { grid-template-columns: 28px minmax(0,1fr) auto !important; padding: 7px 11px !important; }
    .sidebar-user-card { grid-template-columns: 31px minmax(0,1fr) 24px; }
    .topbar-context .mobile-menu-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(137,192,236,.14); border-radius: 10px; color: #92a7bb; background: rgba(255,255,255,.028); }
    .mobile-menu-button svg { width: 18px; height: 18px; }
    .topbar-uptime,
    .topbar-divider,
    .topbar .live-pill,
    .topbar .demo-mode-badge { display: none !important; }
    .overview-dashboard { height: auto; grid-template-columns: 1fr; }
    .overview-map-column { grid-template-rows: auto 520px auto; }
    .overview-right-column { min-height: 580px; display: grid; grid-template-columns: 1fr 1fr; }
    .overview-event-card,
    .overview-flow-card { min-height: 520px; }
    body.overview-map-mode #view-overview { height: auto !important; min-height: 0 !important; }
    .feature-layout.two-column,
    .feature-layout.alert-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    .topbar { padding: 8px !important; }
    .server-selector { padding: 0 9px; }
    .server-online,
    .topbar .admin-chip,
    .topbar .logout-btn { display: none !important; }
    .topbar .demo-mode-switch { min-width: 34px; padding: 0 8px; }
    #global-demo-label { display: none; }
    .overview-map-column { grid-template-rows: auto 430px auto; }
    .world-map-hud { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .overview-map-footer { grid-template-columns: 1fr; }
    .overview-quick-actions { min-height: 88px; }
    .overview-right-column { grid-template-columns: 1fr; }
    .feature-kpi-grid,
    .settings-form-grid { grid-template-columns: 1fr; }
    .feature-table-row { grid-template-columns: 1fr auto; }
    .feature-table-row > *:nth-child(n+3):not(:last-child) { display: none; }
    .login-language { top: 12px; right: 12px; }
  }


  .server-picker-row { width:100%; min-height:52px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 10px; border:1px solid transparent; border-bottom-color:rgba(137,192,236,.09); color:#dce9f5; background:transparent; cursor:pointer; text-align:left; }
  .server-picker-row:hover { border-color:rgba(83,220,255,.22); border-radius:10px; background:rgba(83,220,255,.06); }
  .server-picker-row span { display:grid; gap:4px; }
  .server-picker-row strong { font:750 10px/1 var(--mono); }
  .server-picker-row small { color:#62798f; font-size:8px; }
  .server-picker-row b { color:var(--designer-green); font:780 9px/1 var(--mono); }



  :root {
    --void-shell: 16px;
    --void-sidebar: 228px;
    --void-topbar: 66px;
    --void-content-left: calc(var(--void-shell) + var(--void-sidebar) + 18px);
    --void-glass: rgba(9, 16, 27, 0.68);
    --void-glass-strong: rgba(10, 18, 30, 0.88);
    --void-glass-soft: rgba(255, 255, 255, 0.045);
    --void-stroke: rgba(160, 202, 234, 0.15);
    --void-stroke-strong: rgba(93, 231, 255, 0.34);
    --void-cyan: #5de7ff;
    --void-blue: #6f9cff;
    --void-violet: #b58cff;
    --void-green: #55e7a0;
    --void-amber: #ffc866;
    --void-red: #ff7791;
    --void-text: #f4f9ff;
    --void-muted: #91a4b8;
    --void-dim: #566a7f;
    --void-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    --void-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.24);
  }

  html { color-scheme: dark; }
  body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--void-text);
    background:
      radial-gradient(900px 620px at 7% -12%, rgba(55, 179, 255, 0.18), transparent 64%),
      radial-gradient(880px 620px at 102% 8%, rgba(143, 93, 255, 0.16), transparent 64%),
      radial-gradient(820px 700px at 58% 112%, rgba(32, 220, 184, 0.10), transparent 67%),
      linear-gradient(145deg, #050913 0%, #07101c 45%, #050812 100%);
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(162, 211, 244, 0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(162, 211, 244, 0.018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 32%, #000 0%, rgba(0,0,0,.75) 42%, transparent 82%);
  }
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 5000;
    opacity: .10;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }

  ::selection { background: rgba(93, 231, 255, .24); color: #fff; }
  * { scrollbar-width: thin; scrollbar-color: rgba(117, 160, 194, .42) rgba(3, 8, 15, .28); }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: rgba(3, 8, 15, .28); border-radius: 999px; }
  *::-webkit-scrollbar-thumb { background: rgba(117, 160, 194, .40); border: 2px solid rgba(3, 8, 15, .28); border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: rgba(93, 231, 255, .55); }

  /* ---------- Temporary login / launch screen ---------- */
  .login-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 438px);
    align-items: center;
    gap: clamp(42px, 8vw, 128px);
    padding: clamp(28px, 6vw, 92px);
    overflow: hidden;
    background:
      radial-gradient(760px 560px at 18% 25%, rgba(49, 191, 255, .20), transparent 67%),
      radial-gradient(620px 520px at 85% 18%, rgba(152, 95, 255, .18), transparent 66%),
      linear-gradient(145deg, rgba(3, 8, 16, .92), rgba(5, 11, 22, .98));
  }
  .login-screen::before,
  .login-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
  }
  .login-screen::before {
    width: 520px;
    height: 520px;
    left: -220px;
    bottom: -270px;
    border: 1px solid rgba(93, 231, 255, .14);
    box-shadow: 0 0 120px rgba(93, 231, 255, .08), inset 0 0 100px rgba(93, 231, 255, .04);
  }
  .login-screen::after {
    width: 420px;
    height: 420px;
    right: -180px;
    top: -230px;
    border: 1px solid rgba(181, 140, 255, .16);
    box-shadow: 0 0 120px rgba(181, 140, 255, .10), inset 0 0 100px rgba(181, 140, 255, .05);
  }
  .login-showcase {
    position: relative;
    z-index: 2;
    max-width: 760px;
  }
  .login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 8px 12px;
    border: 1px solid rgba(93, 231, 255, .22);
    border-radius: 999px;
    color: var(--void-cyan);
    background: rgba(93, 231, 255, .07);
    font: 800 10px/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }
  .login-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--void-green);
    box-shadow: 0 0 14px rgba(85, 231, 160, .9);
  }
  .login-showcase h1 {
    max-width: 680px;
    margin: 0;
    color: #f8fbff;
    font-size: clamp(46px, 6.2vw, 86px);
    line-height: .96;
    letter-spacing: -.065em;
    font-weight: 780;
  }
  .login-showcase h1 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(95deg, var(--void-cyan), #a4bbff 50%, #d0a8ff);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .login-showcase > p {
    max-width: 590px;
    margin-top: 24px;
    color: #9aacc0;
    font-size: 15px;
    line-height: 1.78;
    letter-spacing: -.01em;
  }
  .login-preview {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(250px, 1.1fr);
    gap: 20px;
    align-items: center;
    margin-top: 42px;
    max-width: 650px;
    padding: 20px;
    border: 1px solid rgba(154, 203, 238, .14);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
    box-shadow: 0 28px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(24px) saturate(1.2);
  }
  .login-globe {
    position: relative;
    width: min(26vw, 230px);
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    background:
      radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), transparent 17%),
      radial-gradient(circle at 44% 45%, rgba(44, 192, 224, .30), transparent 48%),
      radial-gradient(circle at 50% 50%, #123552 0%, #081a2c 56%, #030811 100%);
    border: 1px solid rgba(93, 231, 255, .34);
    box-shadow: 0 0 42px rgba(44, 198, 255, .19), inset -28px -24px 60px rgba(0,0,0,.42);
    overflow: visible;
  }
  .login-globe::before,
  .login-globe::after {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(93, 231, 255, .18);
    transform: rotate(24deg);
  }
  .login-globe::after { inset: 0 32%; transform: rotate(-18deg); }
  .login-orbit {
    position: absolute;
    inset: -12%;
    border: 1px solid rgba(181, 140, 255, .24);
    border-radius: 50%;
    transform: rotate(-28deg) scaleY(.48);
  }
  .login-orbit::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    right: 16%;
    top: 15%;
    border-radius: 50%;
    background: var(--void-cyan);
    box-shadow: 0 0 18px rgba(93, 231, 255, 1);
  }
  .login-node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--void-green);
    box-shadow: 0 0 16px rgba(85,231,160,.9);
  }
  .login-node.n1 { left: 23%; top: 31%; }
  .login-node.n2 { right: 18%; top: 48%; background: var(--void-cyan); }
  .login-node.n3 { left: 47%; bottom: 19%; background: var(--void-violet); }
  .login-demo-stats { display: grid; gap: 10px; }
  .login-demo-stat {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(154,203,238,.12);
    border-radius: 14px;
    background: rgba(4, 10, 18, .42);
  }
  .login-demo-stat span {
    color: var(--void-muted);
    font: 700 9px/1.2 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .login-demo-stat strong { color: var(--void-text); font: 800 18px/1 var(--mono); }
  .login-demo-stat i {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--void-cyan) var(--progress, 68%), rgba(255,255,255,.07) 0);
    box-shadow: 0 0 12px rgba(93,231,255,.16);
  }

  .login-card {
    position: relative;
    z-index: 3;
    width: 100%;
    border: 1px solid rgba(163, 207, 239, .20);
    border-radius: 30px;
    overflow: hidden;
    background:
      linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 48%, rgba(255,255,255,.045)),
      rgba(7, 13, 24, .72);
    box-shadow: 0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(28px) saturate(1.3);
  }
  .login-card::before {
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    right: -70px;
    top: -90px;
    border-radius: 50%;
    background: rgba(93, 231, 255, .12);
    filter: blur(16px);
  }
  .login-head {
    position: relative;
    padding: 30px 30px 22px;
    border-bottom: 1px solid rgba(154,203,238,.12);
    background: transparent;
  }
  .login-head .brand { margin-bottom: 46px; }
  .login-head .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(93,231,255,.22), rgba(5,12,21,.82));
  }
  .login-title { font-size: 27px; letter-spacing: -.04em; }
  .login-sub { max-width: 320px; margin-top: 9px; color: var(--void-muted); font: 500 11px/1.65 var(--mono); }
  .login-body { padding: 24px 30px 30px; }
  .login-google {
    position: relative;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 0 54px 0 18px;
    border: 1px solid rgba(93,231,255,.36);
    border-radius: 16px;
    color: #06131b;
    background: linear-gradient(105deg, #83efff, #7fc4ff 52%, #b49cff);
    box-shadow: 0 12px 34px rgba(71, 190, 255, .20), inset 0 1px 0 rgba(255,255,255,.45);
    font: 900 12px/1 var(--mono);
    letter-spacing: .10em;
    text-align: left;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  }
  .login-google::after {
    content: '→';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 11px;
    color: #eafcff;
    background: rgba(4, 12, 21, .78);
    font-size: 17px;
  }
  .login-google:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    border-color: rgba(255,255,255,.60);
    background: linear-gradient(105deg, #83efff, #7fc4ff 52%, #b49cff);
    box-shadow: 0 18px 44px rgba(71, 190, 255, .28), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .login-message { min-height: 0; margin: 0; }
  .login-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(154,203,238,.10);
    color: var(--void-dim);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* ---------- Application shell ---------- */
  .app { position: relative; min-height: 100vh; }
  .topbar {
    position: fixed;
    top: var(--void-shell);
    left: var(--void-shell);
    right: var(--void-shell);
    z-index: 100;
    min-height: var(--void-topbar);
    padding: 10px 14px;
    border: 1px solid var(--void-stroke);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.018)), rgba(6, 12, 22, .72);
    box-shadow: var(--void-shadow-soft), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(24px) saturate(1.3);
  }
  .topbar::before {
    content: 'GLOBAL FLEET  /  PRODUCTION';
    position: absolute;
    left: calc(var(--void-sidebar) + 38px);
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 10px;
    border: 1px solid rgba(93,231,255,.13);
    border-radius: 999px;
    color: #6f8398;
    background: rgba(93,231,255,.035);
    font: 800 9px/1 var(--mono);
    letter-spacing: .13em;
  }
  .topbar .brand {
    width: var(--void-sidebar);
    min-width: var(--void-sidebar);
    padding-right: 18px;
    border-right: 1px solid rgba(154,203,238,.12);
  }
  .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: var(--void-cyan);
    background: linear-gradient(145deg, rgba(93,231,255,.20), rgba(5,12,21,.84));
    border-color: rgba(93,231,255,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 26px rgba(93,231,255,.12);
  }
  .brand-mark::after { border-radius: 8px; border-color: rgba(93,231,255,.18); }
  .brand-name { color: var(--void-text); font-size: 13px; letter-spacing: -.015em; }
  .brand-sub { color: var(--void-dim); font-size: 9px; letter-spacing: .09em; }
  .topbar-tools { gap: 8px; margin-left: auto; }
  .admin-chip,
  .logout-btn,
  .live-pill {
    min-height: 36px;
    border-radius: 12px;
    border-color: rgba(154,203,238,.14);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .admin-chip { color: var(--void-muted); }
  .admin-chip strong { color: var(--void-text); }
  .logout-btn { color: var(--void-muted); }
  .logout-btn:hover { color: var(--void-red); border-color: rgba(255,119,145,.32); background: rgba(255,119,145,.08); }
  .live-pill {
    color: var(--void-green);
    border-color: rgba(85,231,160,.22);
    background: rgba(85,231,160,.07);
  }
  .live-dot { background: var(--void-green); box-shadow: 0 0 12px rgba(85,231,160,.75); }
  .build-info { color: var(--void-dim); }

  .console-nav {
    position: fixed;
    top: calc(var(--void-shell) + var(--void-topbar) + 16px);
    left: var(--void-shell);
    right: auto;
    bottom: var(--void-shell);
    z-index: 95;
    width: var(--void-sidebar);
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 58px 12px 124px;
    border: 1px solid var(--void-stroke);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.015)), rgba(6, 12, 22, .72);
    box-shadow: var(--void-shadow-soft), inset 0 1px 0 rgba(255,255,255,.075);
    backdrop-filter: blur(24px) saturate(1.3);
  }
  .console-nav::before {
    content: 'WORKSPACE';
    position: absolute;
    left: 20px;
    top: 22px;
    color: var(--void-dim);
    font: 900 9px/1 var(--mono);
    letter-spacing: .18em;
  }
  .console-nav::after {
    content: 'SYSTEM STATUS\A\A●  ALL SYSTEMS OPERATIONAL\A\A v2.4.8  ·  PROD';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 88px;
    padding: 14px;
    border: 1px solid rgba(85,231,160,.15);
    border-radius: 16px;
    color: var(--void-green);
    background: linear-gradient(145deg, rgba(85,231,160,.08), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    font: 750 8.5px/1.42 var(--mono);
    letter-spacing: .08em;
    white-space: pre-wrap;
  }
  .console-nav-btn {
    position: relative;
    width: 100%;
    min-height: 52px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border-radius: 15px;
    color: #8799ad;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
  }
  .console-nav-btn::before {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(154,203,238,.12);
    border-radius: 9px;
    color: #71869c;
    background: rgba(255,255,255,.025);
    font: 800 14px/1 var(--mono);
  }
  .console-nav-btn[data-view="overview"]::before { content: '◈'; }
  .console-nav-btn[data-view="status"]::before { content: '⌁'; }
  .console-nav-btn[data-view="sessions"]::before { content: '▦'; }
  .console-nav-btn[data-view="metrics"]::before { content: '⌇'; }
  .console-nav-btn[data-view="operations"]::before { content: '⚙'; font-size: 13px; }
  .console-nav-btn span {
    margin-left: auto;
    padding: 4px 6px;
    border-radius: 7px;
    color: #50657a;
    background: rgba(255,255,255,.025);
    font: 750 8px/1 var(--mono);
    letter-spacing: .05em;
  }
  .console-nav-btn:hover {
    color: #dce9f7;
    border-color: rgba(154,203,238,.13);
    background: rgba(255,255,255,.045);
    transform: translateX(2px);
  }
  .console-nav-btn:hover::before { color: var(--void-cyan); border-color: rgba(93,231,255,.22); }
  .console-nav-btn.active {
    color: #f7fbff;
    border-color: rgba(93,231,255,.28);
    background: linear-gradient(100deg, rgba(93,231,255,.16), rgba(111,156,255,.08) 58%, rgba(181,140,255,.07));
    box-shadow: 0 10px 28px rgba(20, 129, 181, .12), inset 0 1px 0 rgba(255,255,255,.07);
    transform: none;
  }
  .console-nav-btn.active::before {
    color: #06131c;
    border-color: transparent;
    background: linear-gradient(135deg, var(--void-cyan), #8caeff);
    box-shadow: 0 0 18px rgba(93,231,255,.25);
  }
  .console-nav-btn.active span { color: #a8d9ec; background: rgba(5,13,22,.35); }

  .main {
    width: auto;
    max-width: none;
    margin: 0;
    padding: calc(var(--void-shell) + var(--void-topbar) + 28px) 18px 72px var(--void-content-left);
  }
  body.overview-map-mode .main {
    width: auto;
    max-width: none;
    margin: 0;
    padding: calc(var(--void-shell) + var(--void-topbar) + 16px) 18px 16px var(--void-content-left);
  }
  body.overview-map-mode .topbar { top: var(--void-shell); left: var(--void-shell); right: var(--void-shell); }
  body.overview-map-mode .console-nav { top: calc(var(--void-shell) + var(--void-topbar) + 16px); left: var(--void-shell); right: auto; }
  body.overview-map-mode #view-overview {
    width: 100%;
    height: calc(100vh - var(--void-shell) - var(--void-topbar) - 32px);
  }
  .console-view.active { animation: voidViewIn .22s cubic-bezier(.2,.75,.2,1) both; }
  @keyframes voidViewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

  .view-heading {
    min-height: 54px;
    margin: 2px 0 18px;
    padding: 0 4px;
    align-items: center;
  }
  .view-title {
    color: var(--void-text);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 760;
  }
  .view-subtitle { color: var(--void-muted); }

  /* ---------- Shared glass surfaces ---------- */
  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .card,
  .world-side-card,
  .world-event-overlay,
  .world-hud-chip,
  .modal-card,
  .toolbar,
  .metric-dashboard-head {
    border-color: var(--void-stroke);
    background:
      linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.018) 52%, rgba(255,255,255,.034)),
      var(--void-glass);
    box-shadow: var(--void-shadow-soft), inset 0 1px 0 rgba(255,255,255,.075);
    backdrop-filter: blur(22px) saturate(1.24);
  }
  .overview-card,
  .ops-card,
  .chart-card,
  .metric-summary-card,
  .kpi,
  .card,
  .world-side-card { border-radius: 20px; }
  .overview-card,
  .ops-card { padding: 16px; }
  .side-section-head {
    min-height: 38px;
    padding-bottom: 11px;
    border-color: rgba(154,203,238,.11);
  }
  .side-section-head .title,
  .world-side-head .title,
  .kpi-label,
  .chart-title,
  .metric-summary-label,
  .toolbar-section-title {
    color: #a8b9ca;
    font-weight: 850;
    letter-spacing: .15em;
  }
  .toolbar-action,
  .metric-action,
  .icon-btn,
  .control-button,
  .audit-refresh,
  .alert-ack-button,
  .announce-button,
  .action-btn {
    border-color: rgba(154,203,238,.16);
    color: #a9bacb;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .toolbar-action:hover,
  .metric-action:hover,
  .icon-btn:hover,
  .control-button:hover,
  .audit-refresh:hover,
  .alert-ack-button:hover,
  .action-btn:hover {
    color: var(--void-cyan);
    border-color: rgba(93,231,255,.28);
    background: rgba(93,231,255,.08);
  }

  /* ---------- Overview / real-time globe ---------- */
  .world-overview-layout {
    position: relative;
    height: 100%;
    min-height: 0;
  }
  .world-overview-layout .world-map-panel {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(128, 197, 236, .20);
    border-radius: 28px;
    background:
      radial-gradient(900px 640px at 40% 47%, rgba(39, 183, 228, .16), transparent 63%),
      radial-gradient(640px 500px at 35% 58%, rgba(65, 91, 164, .14), transparent 66%),
      linear-gradient(150deg, rgba(9, 23, 39, .96), rgba(3, 8, 16, .98));
    box-shadow: 0 32px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 120px rgba(22,97,140,.08);
  }
  .world-map-panel::before {
    content: 'LIVE TOPOLOGY  ·  GLOBAL EDGE NETWORK';
    position: absolute;
    left: 24px;
    top: 112px;
    z-index: 4;
    color: rgba(166, 195, 220, .56);
    font: 850 9px/1 var(--mono);
    letter-spacing: .15em;
    pointer-events: none;
  }
  .world-map-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(3,8,16,.12), transparent 20%, transparent 65%, rgba(3,8,16,.16)),
      radial-gradient(circle at 35% 50%, transparent 42%, rgba(2,6,12,.22) 82%);
  }
  .world-overview-layout .world-map-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: calc(100% - 380px);
    height: 100%;
    min-height: 0;
  }
  .world-map-hud {
    left: 22px;
    right: 398px;
    top: 20px;
    z-index: 8;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .world-hud-chip {
    min-width: 0;
    padding: 11px 13px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02)), rgba(6, 14, 25, .58);
  }
  .world-hud-chip .label { color: #6f8498; font-size: 8px; letter-spacing: .15em; }
  .world-hud-chip .value { margin-top: 5px; color: var(--void-text); font-size: 17px; }
  .world-hud-chip:nth-child(1) .value { color: var(--void-green); }
  .world-hud-chip:nth-child(2) .value { color: var(--void-cyan); }
  .world-hud-chip:nth-child(3) .value { color: #9cb5ff; }
  .world-hud-chip:nth-child(4) .value { color: #c7a9ff; }

  .world-overview-layout .world-side-panel {
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 12;
    width: 348px;
    max-height: none;
    display: grid;
    grid-auto-rows: max-content;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 3px 0 0;
  }
  .world-side-card {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(7, 14, 24, .76);
  }
  .world-side-head { min-height: 46px; padding: 13px 14px; border-color: rgba(154,203,238,.10); }
  .world-side-head .meta { color: #5f7489; }
  .world-summary-grid,
  .world-ops-grid { padding: 10px; gap: 7px; }
  .world-stat,
  .world-ops-item {
    border-color: rgba(154,203,238,.11);
    border-radius: 13px;
    background: rgba(2, 8, 15, .34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  }
  .world-stat .v { color: #f4f9ff; }
  .world-list { max-height: 210px; padding: 7px; }
  .world-row {
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: rgba(255,255,255,.018);
  }
  .world-row:hover,
  .world-row.active,
  .world-row.selected {
    border-color: rgba(93,231,255,.22);
    background: linear-gradient(100deg, rgba(93,231,255,.09), rgba(111,156,255,.045));
  }
  .world-row-title { color: #e8f2fb; }
  .world-row-sub { color: #5e7489; }

  .world-event-overlay {
    left: 22px;
    right: 398px;
    bottom: 20px;
    width: auto;
    height: 178px;
    max-height: 178px;
    z-index: 8;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.015)), rgba(5, 12, 22, .68);
  }
  .world-overlay-head { min-height: 43px; padding: 10px 14px; border-color: rgba(154,203,238,.10); }
  .world-event-list { max-height: 132px; padding: 4px 0 8px; }
  .world-event-list .event { padding: 5px 13px; }
  .world-map-controls {
    left: 22px;
    bottom: 214px;
    z-index: 9;
    gap: 7px;
  }
  .world-map-control {
    min-height: 34px;
    padding: 0 12px;
    border-color: rgba(154,203,238,.16);
    border-radius: 999px;
    color: #a6b7c8;
    background: rgba(5, 12, 22, .65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.18);
  }
  .world-map-control:hover { color: var(--void-cyan); border-color: rgba(93,231,255,.30); background: rgba(93,231,255,.08); }
  .world-map-control.active { color: var(--void-green); border-color: rgba(85,231,160,.28); background: rgba(85,231,160,.08); }
  .world-map-help { display: none; }
  .world-node-session-stack { z-index: 20; }
  .world-session-card,
  .world-session-empty {
    border-color: rgba(93,231,255,.24);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)), rgba(4, 11, 20, .86);
    box-shadow: 0 20px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(22px) saturate(1.2);
  }

  /* ---------- Status ---------- */
  .status-dashboard { grid-template-columns: minmax(0, 1fr) minmax(350px, 408px); gap: 18px; }
  .status-main { gap: 16px; }
  .kpi-row { grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
  .kpi {
    min-height: 122px;
    padding: 17px;
    overflow: hidden;
  }
  .kpi::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 0;
    width: 42px;
    height: 2px;
    border-radius: 99px;
    background: var(--void-cyan);
    box-shadow: 0 0 16px rgba(93,231,255,.58);
  }
  .kpi:nth-child(2)::before { background: var(--void-blue); box-shadow: 0 0 16px rgba(111,156,255,.52); }
  .kpi:nth-child(3)::before { background: var(--void-amber); box-shadow: 0 0 16px rgba(255,200,102,.45); }
  .kpi:nth-child(4)::before { background: var(--void-green); box-shadow: 0 0 16px rgba(85,231,160,.48); }
  .kpi:nth-child(5)::before { background: var(--void-violet); box-shadow: 0 0 16px rgba(181,140,255,.48); }
  .kpi::after { display: none; }
  .kpi-label { margin-bottom: 14px; font-size: 8px; }
  .kpi-value { color: var(--void-text); font-size: clamp(24px, 2vw, 31px); }
  .kpi-value.cyan { color: var(--void-cyan); }
  .kpi-value.green { color: var(--void-green); }
  .kpi-value.amber { color: var(--void-amber); }
  .kpi-value.violet { color: var(--void-violet); }
  .kpi-foot { color: #62778d; }
  .status-card-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  #api-health-section,
  #synthetic-monitor-section,
  #join-flow-section { grid-column: span 4; }
  .status-card-wide { grid-column: 1 / -1; }
  .auth-line,
  .synthetic-field,
  .action-queue-item,
  .control-row,
  .audit-item,
  .announcement-item {
    border-color: rgba(154,203,238,.11);
    border-radius: 13px;
    background: rgba(2, 8, 15, .32);
  }
  .status-event-panel {
    top: calc(var(--void-shell) + var(--void-topbar) + 28px);
    min-height: calc(100vh - var(--void-shell) - var(--void-topbar) - 48px);
    border-radius: 22px;
  }
  .status-event-panel .event-log { min-height: 540px; }
  #view-status .regions { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
  .region-tile {
    border-color: var(--void-stroke);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.016)), rgba(7, 14, 24, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }

  /* ---------- Sessions ---------- */
  .toolbar {
    position: sticky;
    top: calc(var(--void-shell) + var(--void-topbar) + 14px);
    z-index: 30;
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr) auto auto;
    gap: 10px;
    padding: 11px;
    border-radius: 19px;
  }
  .filters,
  .search input,
  .metric-range {
    border-color: rgba(154,203,238,.12);
    border-radius: 13px;
    background: rgba(2, 8, 15, .30);
  }
  .filter { min-height: 36px; border-radius: 10px; }
  .filter.active { background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  .search input { min-height: 40px; }
  .card-grid { gap: 9px; }
  .card {
    border-color: rgba(154,203,238,.13);
    background: linear-gradient(115deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), rgba(7, 14, 24, .65);
  }
  .card:hover { border-color: rgba(93,231,255,.26); background: linear-gradient(115deg, rgba(93,231,255,.075), rgba(255,255,255,.018)), rgba(8, 16, 27, .77); transform: translateY(-1px); }
  .card-row { min-height: 84px; }
  .room-code { color: var(--void-cyan); font-size: 16px; }
  .region-chip { border-color: rgba(154,203,238,.13); border-radius: 9px; background: rgba(255,255,255,.035); }
  .card-detail { border-color: rgba(154,203,238,.10); background: rgba(2, 8, 15, .44); }
  .action-btn { border-radius: 9px; }

  /* ---------- Metrics ---------- */
  .metric-dashboard-head {
    padding: 15px 17px;
    border-radius: 20px;
  }
  .metric-summary-grid { grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; }
  .metric-summary-card { min-height: 118px; padding: 15px; }
  .metric-summary-card::before { width: 2px; left: 0; top: 18px; bottom: 18px; border-radius: 99px; }
  .metric-summary-value { font-size: 21px; }
  .charts-grid { grid-template-columns: repeat(2, minmax(360px, 1fr)); gap: 14px; }
  .chart-card { min-height: 324px; padding: 16px; }
  .chart-canvas {
    height: 198px;
    border-color: rgba(154,203,238,.09);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(93,231,255,.035), transparent 58%), rgba(2, 8, 15, .34);
  }
  .chart-expand { border-radius: 9px; }

  /* ---------- Operations ---------- */
  .operations-grid {
    grid-template-columns: minmax(280px, .78fr) minmax(360px, 1.1fr) minmax(360px, 1.1fr);
    grid-template-areas: 'control notice audit';
    gap: 16px;
  }
  .ops-control-card { grid-area: control; }
  .ops-notice-card { grid-area: notice; }
  .ops-audit-card { grid-area: audit; }
  .ops-card { min-height: 430px; }
  .control-status { border-color: rgba(154,203,238,.11); border-radius: 13px; background: rgba(2,8,15,.32); }

  /* ---------- Events & modal ---------- */
  .event-tabs { padding: 4px; border-color: rgba(154,203,238,.11); border-radius: 13px; background: rgba(2,8,15,.28); }
  .event-tab { min-height: 31px; border-radius: 9px; }
  .event { border-radius: 9px; }
  .modal-backdrop { background: rgba(1, 5, 10, .68); backdrop-filter: blur(12px); }
  .modal {
    border-color: rgba(154,203,238,.20);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)), rgba(7, 14, 24, .91);
    box-shadow: 0 36px 120px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(26px) saturate(1.25);
  }
  .modal-head { padding: 16px 18px; border-color: rgba(154,203,238,.11); background: rgba(255,255,255,.025); }
  .modal-close { border-radius: 10px; }

  /* ---------- Tablet ---------- */
  @media (max-width: 1120px) {
    :root {
      --void-sidebar: 82px;
      --void-content-left: 116px;
    }
    .topbar .brand { width: auto; min-width: 0; padding-right: 0; border-right: 0; }
    .topbar::before { display: none; }
    .console-nav { width: var(--void-sidebar); padding: 58px 9px 100px; }
    .console-nav::before { left: 50%; transform: translateX(-50%); font-size: 7px; }
    .console-nav::after { content: '●\A LIVE'; min-height: 56px; padding: 12px 4px; text-align: center; font-size: 8px; }
    .console-nav-btn { justify-content: center; padding: 0; font-size: 0; }
    .console-nav-btn::before { width: 36px; height: 36px; margin: 0; font-size: 16px; }
    .console-nav-btn span { display: none; }
    .world-overview-layout .world-map-canvas { width: calc(100% - 330px); }
    .world-overview-layout .world-side-panel { width: 304px; }
    .world-map-hud { right: 348px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .world-event-overlay { right: 348px; }
    .status-dashboard { grid-template-columns: 1fr; }
    .status-event-panel { position: static; min-height: auto; }
    .status-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #api-health-section,
    #synthetic-monitor-section,
    #join-flow-section,
    .status-card-wide { grid-column: auto; }
    .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .operations-grid { grid-template-columns: 1fr; grid-template-areas: 'control' 'notice' 'audit'; }
    .card-row { grid-template-columns: 4px 14px minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(96px, .8fr) auto auto; }
    .col-mode, .col-phase { display: none; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 760px) {
    :root {
      --void-shell: 8px;
      --void-sidebar: 0px;
      --void-topbar: 58px;
      --void-content-left: 10px;
    }
    .login-screen { grid-template-columns: 1fr; padding: 20px; }
    .login-showcase { display: none; }
    .login-card { max-width: 460px; justify-self: center; border-radius: 24px; }
    .login-head { padding: 24px 24px 20px; }
    .login-head .brand { margin-bottom: 38px; }
    .login-body { padding: 20px 24px 24px; }

    .topbar,
    body.overview-map-mode .topbar {
      display: flex !important;
      top: 8px;
      left: 8px;
      right: 8px;
      min-height: var(--void-topbar);
      padding: 7px 9px;
      border-radius: 17px;
    }
    .topbar .brand { min-width: 0; width: auto; }
    .brand-mark { width: 35px; height: 35px; border-radius: 11px; }
    .brand-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
    .brand-sub, .build-info, .admin-chip { display: none; }
    .topbar-tools { gap: 5px; }
    .logout-btn, .live-pill { min-height: 32px; padding: 6px 8px; font-size: 8px; }

    .console-nav,
    body.overview-map-mode .console-nav {
      top: auto;
      left: 8px;
      right: 8px;
      bottom: 8px;
      width: auto;
      height: 62px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 4px;
      padding: 5px;
      border-radius: 18px;
    }
    .console-nav::before,
    .console-nav::after { display: none; }
    .console-nav-btn {
      min-width: 0;
      min-height: 50px;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      padding: 3px;
      font-size: 8px;
      line-height: 1;
    }
    .console-nav-btn::before { width: 21px; height: 21px; border: 0; background: transparent; font-size: 14px; }
    .console-nav-btn.active::before { color: var(--void-cyan); background: transparent; box-shadow: none; }
    .console-nav-btn span { display: none; }

    .main,
    body.overview-map-mode .main { padding: 80px 10px 84px; }
    body.overview-map-mode #view-overview { width: 100%; height: calc(100vh - 164px); }
    .view-title { font-size: 27px; }
    .view-heading { min-height: 46px; margin-bottom: 12px; }

    .world-overview-layout .world-map-panel { height: 100%; border-radius: 22px; }
    .world-map-panel::before { display: none; }
    .world-overview-layout .world-map-canvas { width: 100%; height: 100%; }
    .world-map-hud { left: 10px; right: 10px; top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .world-hud-chip { padding: 7px 9px; border-radius: 12px; }
    .world-hud-chip .value { font-size: 12px; }
    .world-event-overlay { display: none; }
    .world-map-controls { left: 10px; bottom: 10px; gap: 5px; }
    .world-map-control { min-height: 31px; padding: 0 8px; font-size: 8px; }
    .world-mobile-panel-toggle { display: inline-flex !important; right: 10px; bottom: 10px; border-radius: 11px; background: rgba(5,12,22,.78); }
    .world-overview-layout .world-side-panel {
      top: auto;
      left: 10px;
      right: 10px;
      bottom: 54px;
      width: auto;
      max-height: 52vh;
      padding: 8px;
      border: 1px solid rgba(154,203,238,.18);
      border-radius: 20px;
      background: rgba(5, 12, 22, .88);
      box-shadow: 0 28px 80px rgba(0,0,0,.46);
      backdrop-filter: blur(24px) saturate(1.2);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(22px) scale(.98);
      transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    body.world-mobile-panel-open .world-overview-layout .world-side-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .world-list { max-height: 110px; }

    .kpi-row,
    .status-card-grid,
    .metric-summary-grid,
    .charts-grid,
    .operations-grid,
    .synthetic-grid { grid-template-columns: 1fr; }
    #api-health-section,
    #synthetic-monitor-section,
    #join-flow-section,
    .status-card-wide { grid-column: auto; }
    .toolbar {
      top: 72px;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      padding: 9px;
    }
    .toolbar-section-title,
    .filters,
    .search { grid-column: 1 / -1; }
    .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .filter { min-width: 0; justify-content: center; padding: 7px 4px; font-size: 8px; }
    .card-row { grid-template-columns: 4px 14px minmax(0, 1fr) auto; min-height: 94px; }
    .col-host, .col-mode, .col-time, .col-roster, .col-phase { display: none; }
    .col-actions { grid-column: 3 / 5; margin-top: 7px; }
    .detail-grid { grid-template-columns: 1fr; }
    .chart-card { min-height: 286px; }
    .chart-canvas { height: 166px; }
  }



  body.overview-map-mode #view-overview { min-height: 0 !important; }
  .world-overview-layout .world-summary-grid,
  .world-overview-layout .world-ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-overview-layout .world-stat .k { overflow-wrap: anywhere; }
  @media (max-width: 760px) {
    body.overview-map-mode #view-overview { height: calc(100vh - 164px) !important; min-height: 0 !important; }
  }



  :root {
    --ref-panel: rgba(24, 36, 55, .56);
    --ref-panel-strong: rgba(16, 26, 42, .76);
    --ref-panel-soft: rgba(115, 151, 196, .10);
    --ref-border: rgba(208, 228, 255, .16);
    --ref-border-bright: rgba(181, 218, 255, .28);
    --ref-highlight: rgba(255,255,255,.095);
    --ref-shadow: 0 28px 76px rgba(0, 5, 15, .38), inset 0 1px 0 rgba(255,255,255,.075);
    --ref-blur: blur(24px) saturate(1.34);
  }

  body {
    background:
      radial-gradient(860px 620px at 19% 8%, rgba(73, 153, 255, .18), transparent 68%),
      radial-gradient(760px 620px at 76% 14%, rgba(174, 102, 255, .16), transparent 67%),
      radial-gradient(760px 620px at 62% 98%, rgba(62, 214, 194, .10), transparent 70%),
      linear-gradient(145deg, #07101c 0%, #0a1220 42%, #070c17 100%);
  }

  .topbar,
  .console-nav,
  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .card,
  .world-side-card,
  .world-event-overlay,
  .world-hud-chip,
  .world-map-control,
  .toolbar,
  .metric-dashboard-head,
  .modal,
  .modal-card,
  .status-event-panel,
  .region-tile {
    border-color: var(--ref-border) !important;
    background:
      linear-gradient(148deg, rgba(130, 169, 215, .13), rgba(74, 100, 139, .055) 36%, rgba(15, 24, 39, .30) 72%),
      var(--ref-panel) !important;
    box-shadow: var(--ref-shadow) !important;
    backdrop-filter: var(--ref-blur);
    -webkit-backdrop-filter: var(--ref-blur);
  }

  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .world-side-card,
  .region-tile,
  .card {
    position: relative;
    overflow: hidden;
  }
  .overview-card::before,
  .ops-card::before,
  .kpi::before,
  .chart-card::before,
  .metric-summary-card::before,
  .world-side-card::before,
  .region-tile::after,
  .card::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(420px 150px at 18% -12%, rgba(118, 194, 255, .15), transparent 64%),
      radial-gradient(360px 150px at 96% 4%, rgba(183, 130, 255, .12), transparent 66%);
    opacity: .72;
  }
  .overview-card > *, .ops-card > *, .kpi > *, .chart-card > *,
  .metric-summary-card > *, .world-side-card > *, .region-tile > *, .card > * {
    position: relative;
    z-index: 1;
  }

  .topbar {
    background:
      linear-gradient(135deg, rgba(96, 137, 186, .15), rgba(13, 23, 38, .36)),
      rgba(11, 19, 32, .68) !important;
    border-radius: 20px !important;
  }
  .console-nav {
    background:
      radial-gradient(320px 280px at 15% 2%, rgba(93, 231, 255, .10), transparent 70%),
      radial-gradient(260px 260px at 90% 82%, rgba(181, 140, 255, .10), transparent 70%),
      linear-gradient(155deg, rgba(100, 139, 185, .10), rgba(8, 16, 28, .58)),
      rgba(9, 17, 29, .68) !important;
    border-radius: 24px !important;
  }
  .console-nav-btn {
    border-color: transparent;
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: -.01em;
  }
  .console-nav-btn.active {
    color: #eafaff !important;
    border-color: rgba(112, 216, 255, .26) !important;
    background:
      linear-gradient(135deg, rgba(70, 176, 238, .23), rgba(90, 92, 190, .13)),
      rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(28, 126, 196, .12) !important;
  }

  .brand-mark {
    font-size: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
  }
  .brand-mark::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(50% 100%, 0 0, 28% 8%, 50% 57%, 72% 8%, 100% 0);
    background: linear-gradient(145deg, #d9efff, #82cfff 46%, #bca3ff);
    filter: drop-shadow(0 0 12px rgba(93,231,255,.34));
  }
  .brand-mark::after {
    content: '' !important;
    position: absolute !important;
    width: 15px !important;
    height: 15px !important;
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -58%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(50% 100%, 5% 0, 28% 8%, 50% 58%, 72% 8%, 95% 0);
    background: #07111e;
  }

  .view-title,
  .side-section-head .title,
  .world-side-head .title,
  .modal-title,
  .login-title {
    font-family: var(--sans);
    letter-spacing: -.025em;
  }
  .side-section-head .title,
  .world-side-head .title { font-size: 12px; font-weight: 760; text-transform: none; }
  .kpi-label, .metric-summary-label, .chart-title { font-family: var(--sans); letter-spacing: .02em; text-transform: none; font-weight: 650; }
  .kpi-value { text-shadow: 0 0 28px rgba(93,231,255,.08); }

  .kpi:nth-child(1)::before { background: radial-gradient(360px 170px at 8% -8%, rgba(53, 202, 255, .20), transparent 65%); }
  .kpi:nth-child(2)::before { background: radial-gradient(360px 170px at 8% -8%, rgba(155, 173, 255, .18), transparent 65%); }
  .kpi:nth-child(3)::before { background: radial-gradient(360px 170px at 8% -8%, rgba(255, 195, 92, .16), transparent 65%); }
  .kpi:nth-child(4)::before { background: radial-gradient(360px 170px at 8% -8%, rgba(85, 231, 160, .16), transparent 65%); }
  .kpi:nth-child(5)::before { background: radial-gradient(360px 170px at 8% -8%, rgba(193, 137, 255, .16), transparent 65%); }

  .world-map-panel {
    border: 1px solid rgba(203, 227, 255, .17) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(820px 560px at 50% 42%, rgba(57, 196, 229, .16), transparent 65%),
      radial-gradient(620px 460px at 66% 42%, rgba(162, 105, 255, .09), transparent 67%),
      linear-gradient(150deg, rgba(18, 34, 53, .80), rgba(3, 9, 17, .92)) !important;
    box-shadow: 0 32px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }
  .world-side-card:nth-child(1)::before { background: radial-gradient(360px 180px at 15% -8%, rgba(93,231,255,.18), transparent 68%); }
  .world-side-card:nth-child(2)::before { background: radial-gradient(360px 180px at 15% -8%, rgba(181,140,255,.18), transparent 68%); }
  .world-side-card:nth-child(3)::before { background: radial-gradient(360px 180px at 15% -8%, rgba(111,156,255,.18), transparent 68%); }
  .world-side-card:nth-child(4)::before { background: radial-gradient(360px 180px at 15% -8%, rgba(85,231,160,.15), transparent 68%); }
  .world-row, .world-stat, .world-ops-item, .control-row, .audit-item, .announcement-item, .auth-line, .synthetic-field, .metric-stat-card {
    border-color: rgba(199, 224, 255, .12) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), rgba(5, 12, 22, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  }
  .world-row:hover, .world-row.active, .card:hover {
    border-color: rgba(93, 231, 255, .34) !important;
    background: linear-gradient(135deg, rgba(71, 190, 239, .13), rgba(150, 104, 255, .07)), rgba(13, 23, 38, .60) !important;
  }

  .demo-mode-switch {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(199,224,255,.14);
    border-radius: 999px;
    color: #8397aa;
    background: rgba(255,255,255,.035);
    cursor: pointer;
    font: 800 9px/1 var(--mono);
    letter-spacing: .11em;
    transition: .16s ease;
  }
  .demo-switch-dot { width: 7px; height: 7px; border-radius: 50%; background: #526579; box-shadow: 0 0 0 transparent; }
  .demo-mode-switch:hover { color: #d9edff; border-color: rgba(181,218,255,.28); }
  .demo-mode-switch.active { color: #d8c7ff; border-color: rgba(181,140,255,.34); background: rgba(181,140,255,.10); }
  .demo-mode-switch.active .demo-switch-dot { background: var(--void-violet); box-shadow: 0 0 14px rgba(181,140,255,.75); }
  .demo-mode-badge {
    padding: 6px 9px;
    border: 1px solid rgba(181,140,255,.26);
    border-radius: 8px;
    color: #d7c7ff;
    background: rgba(181,140,255,.08);
    font: 800 8px/1 var(--mono);
    letter-spacing: .12em;
  }
  .live-pill.demo { color: #d9c8ff; border-color: rgba(181,140,255,.34); background: rgba(181,140,255,.10); }
  .live-pill.demo .live-dot { background: var(--void-violet); box-shadow: 0 0 12px rgba(181,140,255,.75); }
  body.demo-mode .console-nav::after { color: #d7c7ff !important; border-color: rgba(181,140,255,.24) !important; background: rgba(181,140,255,.08) !important; }
  body.demo-mode .console-nav::after { content: '●  DEMO MODE' !important; }

  /* Production login */
  .login-screen {
    position: relative;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 460px) !important;
    gap: clamp(42px, 7vw, 110px) !important;
    padding: clamp(28px, 5vw, 76px) !important;
    background:
      radial-gradient(760px 620px at 16% 21%, rgba(61, 168, 255, .22), transparent 68%),
      radial-gradient(720px 620px at 84% 12%, rgba(178, 105, 255, .20), transparent 67%),
      linear-gradient(145deg, #07101d 0%, #0a1221 44%, #070b15 100%) !important;
  }
  .login-showcase-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 38px;
    color: #f4f8ff;
  }
  .login-showcase-brand > span:last-child { display: grid; gap: 3px; }
  .login-showcase-brand strong { font-size: 16px; letter-spacing: -.02em; }
  .login-showcase-brand small { color: #7f94aa; font: 700 8px/1 var(--mono); letter-spacing: .15em; }
  .void-triangle {
    width: 34px; height: 34px;
    clip-path: polygon(50% 100%, 0 0, 28% 8%, 50% 58%, 72% 8%, 100% 0);
    background: linear-gradient(145deg, #e8f6ff, #8bd6ff 46%, #c2a8ff);
    filter: drop-shadow(0 0 18px rgba(93,231,255,.34));
    position: relative;
  }
  .login-showcase h1 { font-size: clamp(48px, 5.6vw, 82px) !important; line-height: .98 !important; }
  .login-showcase > p { max-width: 650px; font-size: 15px; color: #a8b7c8; }
  .login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
    max-width: 690px;
  }
  .login-feature {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(205,228,255,.14);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022)), rgba(13,23,38,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
  }
  .login-feature span { color: var(--void-cyan); font: 800 8px/1 var(--mono); letter-spacing: .13em; }
  .login-feature strong { color: #eef7ff; font-size: 11px; }
  .login-feature small { color: #71859a; font-size: 9px; }
  .login-preview {
    grid-template-columns: minmax(180px, .82fr) minmax(230px, 1.18fr) !important;
    max-width: 690px !important;
    padding: 24px !important;
    border-color: rgba(208,228,255,.16) !important;
    background: linear-gradient(145deg, rgba(114,154,205,.16), rgba(72,92,129,.06)), rgba(13,23,38,.44) !important;
    box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
  }
  .login-demo-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 16px;
    display: flex;
    justify-content: space-between;
    color: #6f8499;
    font: 800 7px/1 var(--mono);
    letter-spacing: .15em;
  }
  .login-demo-caption b { color: #a7b9ca; font-weight: 800; }
  .login-globe { margin-top: 16px; }
  .login-orbit.orbit-b { inset: 4% -15%; transform: rotate(26deg) scaleY(.33); border-color: rgba(93,231,255,.20); }
  .login-route { position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(93,231,255,.12), rgba(93,231,255,.85), transparent); }
  .login-route.route-a { width: 62%; left: 30%; top: 34%; transform: rotate(15deg); }
  .login-route.route-b { width: 48%; left: 35%; top: 62%; transform: rotate(-23deg); background: linear-gradient(90deg, rgba(181,140,255,.12), rgba(181,140,255,.85), transparent); }

  .login-card {
    border-radius: 30px !important;
    border-color: rgba(213,232,255,.20) !important;
    background:
      radial-gradient(300px 220px at 12% 0%, rgba(83, 187, 255, .16), transparent 72%),
      radial-gradient(260px 200px at 100% 12%, rgba(181, 140, 255, .15), transparent 72%),
      linear-gradient(150deg, rgba(122,157,203,.14), rgba(70,91,126,.055)),
      rgba(12, 21, 35, .68) !important;
    box-shadow: 0 38px 120px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.11) !important;
    backdrop-filter: blur(30px) saturate(1.38) !important;
  }
  .login-card-glow { position: absolute; width: 180px; height: 180px; right: -80px; top: -90px; border-radius: 50%; background: rgba(181,140,255,.14); filter: blur(24px); pointer-events: none; }
  .login-head { padding: 28px 28px 22px !important; background: transparent !important; }
  .login-brand { margin-bottom: 32px !important; }
  .login-security-badge {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 18px; padding: 7px 10px;
    border: 1px solid rgba(85,231,160,.24); border-radius: 999px;
    color: #8df3bf; background: rgba(85,231,160,.075);
    font: 800 8px/1 var(--mono); letter-spacing: .14em;
  }
  .login-security-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--void-green); box-shadow: 0 0 12px rgba(85,231,160,.8); }
  .login-title { font-size: 30px !important; font-weight: 760 !important; }
  .login-sub { color: #91a4b8 !important; font-family: var(--sans) !important; font-size: 12px !important; }
  .login-body { padding: 22px 28px 28px !important; }
  .login-auth-state {
    display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
    margin-bottom: 16px; padding: 12px 13px;
    border: 1px solid rgba(208,228,255,.13); border-radius: 14px;
    background: rgba(4, 10, 19, .28);
  }
  .login-auth-state-dot { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #71859a; box-shadow: 0 0 0 4px rgba(113,133,154,.09); }
  .login-auth-state strong { display: block; color: #dcecff; font-size: 10px; }
  .login-auth-state small { display: block; margin-top: 3px; color: #71859a; font-size: 9px; line-height: 1.45; }
  .login-auth-state[data-state="ready"] { border-color: rgba(85,231,160,.22); background: rgba(85,231,160,.055); }
  .login-auth-state[data-state="ready"] .login-auth-state-dot { background: var(--void-green); box-shadow: 0 0 12px rgba(85,231,160,.72); }
  .login-auth-state[data-state="warning"] { border-color: rgba(255,200,102,.22); background: rgba(255,200,102,.055); }
  .login-auth-state[data-state="warning"] .login-auth-state-dot { background: var(--void-amber); }
  .login-auth-state[data-state="error"] { border-color: rgba(255,119,145,.24); background: rgba(255,119,145,.06); }
  .login-auth-state[data-state="error"] .login-auth-state-dot { background: var(--void-red); }
  .login-google, .login-demo {
    width: 100%; min-height: 58px;
    display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center;
    margin: 0; padding: 10px 13px;
    border-radius: 15px;
    cursor: pointer;
    text-align: left;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .login-google {
    border: 1px solid rgba(208,228,255,.20) !important;
    color: #f2f8ff !important;
    background: linear-gradient(135deg, rgba(103,158,219,.20), rgba(119,92,188,.13)), rgba(255,255,255,.045) !important;
    font-family: var(--sans) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .login-demo {
    border: 1px solid rgba(181,140,255,.22);
    color: #ecE5ff;
    background: linear-gradient(135deg, rgba(181,140,255,.13), rgba(93,231,255,.06)), rgba(255,255,255,.025);
  }
  .login-google:hover:not(:disabled), .login-demo:hover { transform: translateY(-2px); border-color: rgba(139,211,255,.38) !important; box-shadow: 0 18px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09); }
  .login-google:disabled { opacity: .48; cursor: not-allowed; }
  .google-mark, .demo-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font: 900 14px/1 var(--sans); }
  .google-mark { color: #0a1320; background: linear-gradient(145deg, #eef8ff, #b9d6ff); }
  .demo-mark { color: #f4edff; background: linear-gradient(145deg, rgba(181,140,255,.70), rgba(94,131,225,.58)); }
  .login-button-copy { display: grid; gap: 3px; }
  .login-button-copy strong { color: inherit; font-size: 11px; font-weight: 750; }
  .login-button-copy small { color: #71859a; font: 600 8px/1.3 var(--mono); letter-spacing: .04em; }
  .login-button-arrow { color: #93a7ba; font-size: 15px; }
  .login-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #566c82; font: 700 8px/1 var(--mono); }
  .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: rgba(208,228,255,.10); }
  .login-security-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .login-security-grid > div { padding: 10px; border: 1px solid rgba(208,228,255,.10); border-radius: 12px; background: rgba(4,10,19,.23); }
  .login-security-grid span { display: block; color: #5f7489; font: 800 7px/1 var(--mono); letter-spacing: .13em; }
  .login-security-grid strong { display: block; margin-top: 5px; color: #91a4b8; font-size: 8px; line-height: 1.4; }
  .login-note { color: #61768b !important; }
  .login-message { margin-top: 10px !important; min-height: 0 !important; }

  @media (max-width: 1180px) {
    .demo-mode-badge { display: none; }
    .login-feature-grid { grid-template-columns: 1fr; max-width: 520px; }
    .login-feature { min-height: 64px; grid-template-columns: 30px 1fr; }
    .login-feature small { grid-column: 2; }
  }
  @media (max-width: 760px) {
    .login-screen { grid-template-columns: 1fr !important; padding: 18px !important; }
    .login-card { max-width: 470px; }
    .demo-mode-switch { min-width: 34px; padding: 0 9px; }
    #global-demo-label { display: none; }
    .demo-mode-switch .demo-switch-dot { width: 8px; height: 8px; }
  }



  [hidden], .login-screen[hidden], #fleet-app[hidden] { display: none !important; }
  :root {
    --final-shell: 12px;
    --final-sidebar: 214px;
    --final-topbar: 56px;
    --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 10px);
    --final-gap: 10px;
    --final-panel: rgba(30, 45, 67, .47);
    --final-panel-strong: rgba(18, 30, 48, .68);
    --final-panel-soft: rgba(91, 127, 170, .08);
    --final-stroke: rgba(212, 232, 255, .15);
    --final-stroke-bright: rgba(146, 218, 255, .30);
    --final-text: #f5f9ff;
    --final-muted: #8fa3ba;
    --final-dim: #536a83;
    --final-cyan: #63e6ff;
    --final-blue: #7ca7ff;
    --final-violet: #b995ff;
    --final-green: #58e9a5;
    --final-amber: #ffc86b;
    --final-red: #ff7b94;
    --final-shadow: 0 24px 64px rgba(0, 4, 15, .34), inset 0 1px 0 rgba(255,255,255,.085);
    --final-blur: blur(24px) saturate(1.35);
  }

  html, body { width: 100%; min-width: 320px; }
  body {
    color: var(--final-text) !important;
    background:
      radial-gradient(760px 520px at 20% 0%, rgba(61, 157, 255, .20), transparent 68%),
      radial-gradient(780px 540px at 80% 2%, rgba(177, 103, 255, .18), transparent 68%),
      radial-gradient(880px 620px at 52% 108%, rgba(39, 218, 194, .10), transparent 70%),
      linear-gradient(145deg, #07101d 0%, #0a1220 44%, #070c17 100%) !important;
  }
  /* Simple login */
  .login-screen {
    position: relative !important;
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    grid-template-columns: 1fr !important;
    padding: 24px !important;
    overflow: hidden !important;
    background:
      radial-gradient(620px 440px at 22% 10%, rgba(69, 179, 255, .19), transparent 70%),
      radial-gradient(560px 420px at 82% 16%, rgba(183, 111, 255, .17), transparent 70%),
      linear-gradient(145deg, #07101d 0%, #0a1321 48%, #070b15 100%) !important;
  }
  .login-screen::before {
    content: '' !important;
    position: absolute !important;
    width: 760px !important;
    height: 760px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(137, 211, 255, .08) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 160px rgba(58, 170, 255, .08), inset 0 0 140px rgba(179, 111, 255, .04) !important;
    pointer-events: none !important;
  }
  .login-screen::after { display: none !important; }
  .simple-login-card {
    position: relative !important;
    z-index: 2 !important;
    width: min(420px, 100%) !important;
    padding: 30px !important;
    overflow: hidden !important;
    border: 1px solid rgba(218, 235, 255, .19) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(151, 184, 224, .15), rgba(84, 108, 145, .055) 46%, rgba(15, 25, 41, .42)),
      rgba(17, 29, 47, .64) !important;
    box-shadow: 0 38px 120px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.11) !important;
    backdrop-filter: blur(30px) saturate(1.38) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.38) !important;
  }
  .simple-login-glow { position: absolute; border-radius: 50%; filter: blur(22px); pointer-events: none; }
  .simple-login-glow.glow-a { width: 190px; height: 190px; left: -80px; top: -100px; background: rgba(93, 214, 255, .16); }
  .simple-login-glow.glow-b { width: 190px; height: 190px; right: -90px; bottom: -110px; background: rgba(185, 133, 255, .14); }
  .simple-login-brand { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
  .simple-login-brand .void-triangle { width: 34px; height: 34px; }
  .simple-login-brand > div { display: grid; gap: 3px; }
  .simple-login-brand strong { color: #f8fbff; font-size: 15px; letter-spacing: -.02em; }
  .simple-login-brand small { color: var(--final-cyan); font: 750 8px/1 var(--mono); letter-spacing: .13em; }
  .simple-login-card .login-language { top: 22px !important; right: 22px !important; }
  .simple-login-card .login-security-badge { margin-bottom: 16px; }
  .simple-login-card .login-title { font-size: 29px !important; }
  .simple-login-card .login-sub { margin-bottom: 20px; font-family: var(--sans) !important; font-size: 12px !important; }
  .simple-login-card .login-auth-state { margin-bottom: 14px; }
  .simple-login-card .login-google,
  .simple-login-card .login-demo { min-height: 56px; border-radius: 15px; }
  .simple-login-card .login-note { margin-top: 16px; line-height: 1.55; }
  .simple-login-card .login-external-browser-help {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 200, 102, .28);
    border-radius: 12px;
    background: rgba(255, 200, 102, .065);
  }
  .simple-login-card .login-external-browser-help[hidden] { display: none !important; }
  .simple-login-card .login-external-browser-help strong { color: #ffe0a3; font-size: 10px; }
  .simple-login-card .login-external-browser-help span { color: #aab8c7; font-size: 9px; line-height: 1.55; }
  .simple-login-card .login-external-browser-help button {
    width: max-content;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 218, 151, .26);
    border-radius: 9px;
    color: #f4d9a4;
    background: rgba(255, 255, 255, .035);
    font: 750 9px/1 var(--sans);
    cursor: pointer;
  }
  .simple-login-card .login-external-browser-help button:hover { background: rgba(255, 200, 102, .11); }

  /* Shell */
  .app { min-height: 100vh !important; }
  .main,
  body.overview-map-mode .main {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: calc(var(--final-shell) + var(--final-topbar) + var(--final-gap)) var(--final-shell) var(--final-shell) var(--final-content-left) !important;
  }
  body.overview-map-mode { overflow: hidden !important; }

  .topbar,
  body.overview-map-mode .topbar {
    position: fixed !important;
    z-index: 120 !important;
    left: var(--final-content-left) !important;
    right: var(--final-shell) !important;
    top: var(--final-shell) !important;
    min-height: var(--final-topbar) !important;
    height: var(--final-topbar) !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 7px 10px 7px 14px !important;
    border: 1px solid var(--final-stroke) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(145deg, rgba(148, 183, 225, .14), rgba(75, 99, 136, .05) 48%, rgba(11, 20, 34, .35)),
      rgba(19, 31, 50, .58) !important;
    box-shadow: var(--final-shadow) !important;
    backdrop-filter: var(--final-blur) !important;
    -webkit-backdrop-filter: var(--final-blur) !important;
    overflow: hidden !important;
  }
  .topbar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      radial-gradient(320px 100px at 12% -10%, rgba(87, 204, 255, .13), transparent 72%),
      radial-gradient(320px 100px at 90% -10%, rgba(184, 139, 255, .11), transparent 72%) !important;
    pointer-events: none !important;
  }
  .topbar > * { position: relative; z-index: 1; }
  .topbar-page { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .topbar-page > div { min-width: 0; display: grid; gap: 3px; }
  .topbar-page strong { color: #f8fbff; font-size: 16px; font-weight: 760; letter-spacing: -.025em; }
  .topbar-page small { color: #60768d; font: 650 8px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-menu-button { display: none; }
  .topbar-context { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; }
  .server-selector { min-width: 142px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(209,231,255,.14); border-radius: 10px; color: #e8f3ff; background: rgba(4,11,20,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
  .server-selector span { font: 760 9px/1 var(--mono); }
  .server-selector svg { width: 13px; height: 13px; }
  .server-online { padding: 7px 9px; border: 1px solid rgba(85,231,160,.14); border-radius: 999px; color: var(--final-green); background: rgba(85,231,160,.055); font: 740 8px/1 var(--sans); }
  .server-online i { width: 6px; height: 6px; }
  .topbar-divider { width: 1px; height: 17px; background: rgba(209,231,255,.10); }
  .topbar-uptime { color: #8297ac; font-size: 8px; }
  .topbar-uptime strong { color: #c8d5e3; font-weight: 650; }
  .topbar-tools { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .topbar-icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(209,231,255,.13); border-radius: 10px; color: #93a7bc; background: rgba(255,255,255,.025); cursor: pointer; }
  .topbar-icon-button:hover { color: var(--final-cyan); border-color: rgba(99,230,255,.30); background: rgba(99,230,255,.07); }
  .topbar-icon-button svg { width: 16px; height: 16px; }
  .notification-button { position: relative; }
  .notification-count { position: absolute; right: -3px; top: -4px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: white; background: #ff667f; font: 800 8px/1 var(--mono); box-shadow: 0 0 12px rgba(255,102,127,.45); }
  .language-switch { min-height: 34px; padding: 3px; border: 1px solid rgba(209,231,255,.13); border-radius: 10px; background: rgba(4,11,20,.28); }
  .language-switch .language-option { min-width: 31px; height: 26px; border-radius: 7px; }
  .demo-mode-switch { min-height: 34px; }
  .admin-chip { display: none !important; }
  .logout-btn { min-height: 34px; border-radius: 10px; }
  .live-pill { min-height: 34px; }

  .console-nav,
  body.overview-map-mode .console-nav {
    position: fixed !important;
    z-index: 125 !important;
    left: var(--final-shell) !important;
    top: var(--final-shell) !important;
    bottom: var(--final-shell) !important;
    width: var(--final-sidebar) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--final-stroke) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(280px 240px at 10% 0%, rgba(86, 206, 255, .13), transparent 72%),
      radial-gradient(260px 260px at 100% 82%, rgba(184, 137, 255, .11), transparent 72%),
      linear-gradient(150deg, rgba(151, 184, 222, .12), rgba(73, 95, 130, .045) 48%, rgba(8, 15, 27, .42)),
      rgba(18, 29, 47, .62) !important;
    box-shadow: var(--final-shadow) !important;
    backdrop-filter: var(--final-blur) !important;
    -webkit-backdrop-filter: var(--final-blur) !important;
  }
  .sidebar-brand { height: 78px; flex: 0 0 78px; padding: 0 15px; border-color: rgba(209,231,255,.10); background: rgba(255,255,255,.018); }
  .sidebar-brand-mark { width: 34px; height: 34px; }
  .sidebar-brand-copy strong { font-size: 14px; }
  .sidebar-brand-copy small { font-size: 7px !important; }
  .sidebar-section-label { padding: 15px 15px 8px; font-size: 7px; }
  .sidebar-menu { gap: 4px; padding: 0 9px; }
  .console-nav-btn { min-height: 45px !important; grid-template-columns: 27px minmax(0,1fr) auto !important; gap: 9px !important; padding: 7px 9px !important; border-radius: 12px !important; color: #8ca0b5 !important; }
  .console-nav-btn > svg { width: 18px; height: 18px; }
  .console-nav-btn .nav-copy b { font-size: 10px; }
  .console-nav-btn .nav-copy small { font-size: 7px; }
  .console-nav-btn.active { color: #f4faff !important; border-color: rgba(112,214,255,.29) !important; background: linear-gradient(100deg, rgba(77,177,237,.22), rgba(113,117,208,.12) 64%, rgba(181,140,255,.08)) !important; box-shadow: 0 14px 32px rgba(30,129,197,.12), inset 0 1px 0 rgba(255,255,255,.09) !important; }
  .sidebar-footer { padding: 10px; }
  .sidebar-system-state, .sidebar-user-card { border-color: rgba(209,231,255,.12); background: rgba(255,255,255,.025); }

  /* Views outside Overview retain all functionality but receive the same glass system. */
  .console-view { min-height: 0; }
  .console-view.active { height: 100%; overflow: auto; padding-right: 2px; }
  body.overview-map-mode #view-overview { width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
  .view-heading { min-height: 44px; margin: 0 0 10px; }
  .view-title { font-size: 24px; }
  .glass-panel,
  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .card,
  .toolbar,
  .metric-dashboard-head,
  .region-tile,
  .status-event-panel,
  .modal,
  .modal-card {
    border-color: var(--final-stroke) !important;
    background:
      linear-gradient(148deg, rgba(151, 185, 224, .14), rgba(78, 103, 140, .055) 42%, rgba(11, 20, 34, .35)),
      var(--final-panel) !important;
    box-shadow: var(--final-shadow) !important;
    backdrop-filter: var(--final-blur) !important;
    -webkit-backdrop-filter: var(--final-blur) !important;
  }
  .glass-panel { position: relative; overflow: hidden; border: 1px solid var(--final-stroke); border-radius: 16px; }
  .glass-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(300px 100px at 10% -10%, rgba(102, 206, 255, .13), transparent 72%),
      radial-gradient(260px 110px at 100% 0%, rgba(183, 135, 255, .10), transparent 72%);
    opacity: .8;
  }
  .glass-panel > * { position: relative; z-index: 1; }
  .panel-heading { min-height: 38px; padding: 0 12px; border-color: rgba(209,231,255,.09); }
  .panel-heading > span { font-size: 10px; font-weight: 750; }
  .panel-heading small, .panel-heading button { font-size: 7px; }

  /* Exact Overview placement */
  .overview-dashboard {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 174px minmax(0, 1fr) 278px !important;
    gap: var(--final-gap) !important;
  }
  .overview-left-column,
  .overview-right-column {
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--final-gap) !important;
  }
  .overview-map-column {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
    gap: var(--final-gap) !important;
  }

  .overview-central-card { flex: 0 0 224px; }
  .central-server-identity { padding: 12px 12px 8px; }
  .central-server-identity strong { font-size: 9px; }
  .central-main-stats { gap: 6px; padding: 0 11px 9px; }
  .central-main-stats > div { min-height: 43px; grid-template-columns: 28px 1fr; gap: 8px; padding: 7px 8px; border-color: rgba(209,231,255,.10); border-radius: 11px; background: rgba(4,11,20,.22); }
  .central-stat-icon { width: 27px; height: 27px; border-radius: 9px; }
  .central-stat-icon svg { width: 15px; height: 15px; }
  .central-main-stats strong { font-size: 10px; }
  .central-main-stats small { font-size: 7px; }
  .compact-summary { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 5px !important; padding: 0 11px 11px !important; }
  .compact-summary > :nth-child(n+5) { display: none !important; }
  .compact-summary .world-stat { min-height: 36px; padding: 6px !important; border-radius: 9px !important; }
  .compact-summary .world-stat .k { font-size: 5.5px !important; }
  .compact-summary .world-stat .v { margin-top: 2px !important; font-size: 8px !important; }

  .overview-session-card { flex: 1 1 250px; min-height: 220px; }
  .overview-session-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 11px 8px; }
  .overview-session-summary > div { min-height: 54px; display: grid; align-content: center; gap: 5px; padding: 8px; border: 1px solid rgba(209,231,255,.10); border-radius: 11px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), rgba(3,10,19,.22); }
  .overview-session-summary span { color: #6d8298; font-size: 7px; }
  .overview-session-summary strong { color: #f4f9ff; font: 800 15px/1 var(--mono); }
  .overview-session-summary > div:last-child strong { color: var(--final-violet); }
  .overview-node-peek-label { display: flex; align-items: center; justify-content: space-between; padding: 2px 12px 5px; color: #526b82; font: 750 6px/1 var(--mono); letter-spacing: .12em; }
  .overview-node-peek-label small { font-size: 6px; color: #6e8499; letter-spacing: .02em; }
  .overview-node-list { height: calc(100% - 114px) !important; max-height: none !important; overflow: auto !important; padding: 0 7px 7px !important; }
  .overview-node-list .world-row { min-height: 44px; padding: 6px 7px !important; border-radius: 9px !important; }
  .overview-node-list .world-row-title { font-size: 7px !important; }
  .overview-node-list .world-row-sub { font-size: 6px !important; }
  .overview-node-list .world-row-status { min-width: 52px !important; gap: 2px !important; }
  .overview-node-list .world-node-health { padding: 1px 5px; font-size: 6px; }
  .overview-node-list .world-row-value { font-size: 7px !important; }
  .overview-node-list .world-row-status .world-row-sub,
  .overview-node-list .world-node-load { display: none !important; }

  .overview-traffic-card { flex: 0 0 126px; }
  .traffic-row { padding: 8px 11px 0; }
  .traffic-row span, .traffic-row strong { font-size: 7px; }
  .traffic-row > i { height: 3px; }

  .overview-health-card { flex: 0 0 150px; min-height: 0; display: grid; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto 1fr; align-items: center; gap: 8px 10px; padding: 10px 11px; }
  .health-shield { width: 34px; height: 39px; }
  .health-copy small { font-size: 6px; }
  .health-copy strong { margin-top: 2px; font-size: 10px; }
  .health-copy p { margin-top: 2px; font-size: 6px; }
  .overview-health-card .world-ops-grid { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 5px !important; padding: 0 !important; }
  .overview-health-card .world-ops-item { min-height: 31px; padding: 5px 6px !important; border-radius: 8px !important; }
  .overview-health-card .world-ops-item .k { font-size: 5px; }
  .overview-health-card .world-ops-item .v { font-size: 6px; }

  .world-map-hud {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  .world-hud-chip {
    min-width: 0 !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0,1fr) !important;
    grid-template-rows: auto auto 5px !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 8px 9px !important;
    overflow: hidden !important;
    border: 1px solid var(--final-stroke) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(145deg, rgba(157,190,229,.15), rgba(79,104,141,.055) 44%, rgba(8,16,29,.33)),
      rgba(24,37,58,.52) !important;
    box-shadow: 0 17px 42px rgba(0,4,15,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: var(--final-blur) !important;
  }
  .world-hud-chip::before { content:''; position:absolute; width:90px; height:70px; left:-28px; top:-35px; border-radius:50%; background:rgba(99,230,255,.10); filter:blur(12px); }
  .world-hud-chip.memory-card::before { background:rgba(185,149,255,.12); }
  .world-hud-chip.ccu-card::before { background:rgba(88,233,165,.10); }
  .world-hud-chip.nodes-card::before { background:rgba(124,167,255,.11); }
  .world-hud-chip.network-card::before { background:rgba(185,149,255,.10); }
  .hud-icon { position: relative; z-index: 1; grid-row: 1 / 3; width: 29px; height: 29px; display:grid; place-items:center; border-radius:10px; color:var(--final-cyan); background:rgba(99,230,255,.09); }
  .hud-icon svg { width: 15px; height: 15px; }
  .hud-icon.memory { color: var(--final-violet); background: rgba(185,149,255,.09); }
  .hud-icon.users { color: var(--final-green); background: rgba(88,233,165,.08); }
  .hud-icon.nodes { color: var(--final-blue); background: rgba(124,167,255,.09); }
  .hud-icon.traffic { color: #d39aff; background: rgba(185,149,255,.09); }
  .world-hud-chip .label { position:relative; z-index:1; grid-column:2; color:#788da3 !important; font:650 6px/1 var(--sans) !important; letter-spacing:.02em !important; text-transform:none !important; }
  .world-hud-chip .value { position:relative; z-index:1; grid-column:2; color:#f4f9ff !important; font:820 12px/1 var(--mono) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hud-spark { position:relative; z-index:1; grid-column:1 / -1; height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.04); }
  .hud-spark i { display:block; width:78%; height:100%; border-radius:inherit; background:linear-gradient(90deg, transparent, var(--final-cyan), transparent); animation:hudPulse 3.5s ease-in-out infinite; }
  .memory-card .hud-spark i { background:linear-gradient(90deg, transparent, var(--final-violet), transparent); animation-delay:-.8s; }
  .ccu-card .hud-spark i { background:linear-gradient(90deg, transparent, var(--final-green), transparent); animation-delay:-1.4s; }
  .nodes-card .hud-spark i { background:linear-gradient(90deg, transparent, var(--final-blue), transparent); animation-delay:-2.1s; }
  .network-card .hud-spark i { background:linear-gradient(90deg, transparent, #d39aff, transparent); animation-delay:-2.6s; }
  @keyframes hudPulse { 0%,100%{transform:translateX(-24%);opacity:.35}50%{transform:translateX(32%);opacity:1} }

  .world-map-panel {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(180,222,255,.20) !important;
    border-radius: 21px !important;
    background:
      radial-gradient(620px 440px at 48% 44%, rgba(39,168,222,.13), transparent 70%),
      radial-gradient(520px 420px at 85% 10%, rgba(156,104,255,.10), transparent 72%),
      linear-gradient(145deg, rgba(9,22,38,.80), rgba(3,9,17,.94)) !important;
    box-shadow: 0 30px 82px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 90px rgba(44,166,224,.055) !important;
  }
  .world-map-panel::before {
    content:'' !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:linear-gradient(rgba(167,213,244,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(167,213,244,.014) 1px,transparent 1px) !important;
    background-size:34px 34px !important;
    mask-image:radial-gradient(circle at 50% 48%,#000 0,transparent 78%) !important;
  }
  .world-map-panel::after { content:'' !important; display:block !important; position:absolute !important; inset:0 !important; z-index:2 !important; pointer-events:none !important; background:radial-gradient(circle at 50% 50%,transparent 48%,rgba(1,5,12,.20) 78%,rgba(1,5,12,.48) 100%) !important; }
  .world-map-canvas { position:absolute !important; inset:0 !important; z-index:1 !important; width:100% !important; height:100% !important; min-height:0 !important; }
  .map-stage-title { left: 16px; top: 14px; z-index: 8; }
  .map-stage-title span { font-size: 9px; }
  .map-stage-title small { font-size: 6px; }
  .map-legend { left: 16px; bottom: 15px; z-index: 8; }
  .world-map-help { right: 15px !important; bottom: 15px !important; z-index: 8 !important; }
  .world-map-controls { left: 50% !important; bottom: 13px !important; z-index: 10 !important; transform:translateX(-50%); }
  .world-map-control { min-height: 30px !important; padding:0 9px !important; border-radius:9px !important; background:rgba(12,25,43,.62) !important; }
  .world-map-control.square { width:30px; padding:0 !important; }

  .overview-event-card { flex: 0 0 244px; min-height: 0; }
  .world-event-count-line { display:flex; align-items:center; justify-content:space-between; padding:8px 11px 4px; color:#668097; font:700 6px/1 var(--mono); }
  .world-event-list { height: calc(100% - 70px); max-height:none !important; overflow:auto !important; padding:3px 7px 8px; }
  .world-event-list .event { grid-template-columns: 38px 40px 5px 1fr !important; gap:5px !important; padding:6px !important; font-size:6px !important; line-height:1.35 !important; }
  .world-event-list .event-time { font-size:6px; }
  .world-event-list .event-tag { padding:1px 3px; font-size:5px; }

  .overview-flow-card { flex: 1 1 auto; min-height: 240px; }
  .overview-flow-total { display:flex; align-items:end; justify-content:space-between; padding:11px 12px 7px; border-bottom:1px solid rgba(209,231,255,.07); }
  .overview-flow-total span { color:#60788f; font:750 6px/1 var(--mono); letter-spacing:.12em; }
  .overview-flow-total strong { color:var(--final-cyan); font:830 20px/1 var(--mono); }
  .overview-flow-list { height:calc(100% - 82px); max-height:none !important; overflow:auto !important; padding:5px 7px 8px !important; }
  .overview-flow-list .world-row { min-height:44px; padding:7px !important; border-radius:9px !important; }
  .overview-flow-list .world-row-title { font-size:7px !important; }
  .overview-flow-list .world-row-sub { font-size:6px !important; }
  .overview-flow-list .world-row-value { font-size:8px !important; }

  .overview-quick-actions { flex:0 0 94px; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .overview-quick-actions button { min-width:0; display:grid; align-content:center; justify-items:center; gap:7px; border:1px solid var(--final-stroke); border-radius:15px; color:#9eb2c6; background:linear-gradient(145deg,rgba(156,188,227,.13),rgba(81,105,143,.045)),rgba(23,37,58,.46); box-shadow:0 16px 36px rgba(0,4,15,.22),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:var(--final-blur); cursor:pointer; }
  .overview-quick-actions button:hover { color:#f4f9ff; border-color:rgba(99,230,255,.30); transform:translateY(-1px); }
  .overview-quick-actions span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; color:#dfeeff; background:rgba(146,187,230,.10); }
  .overview-quick-actions svg { width:15px; height:15px; }
  .overview-quick-actions b { font-size:8px; font-weight:710; }

  .world-node-session-stack { z-index: 20; }
  .world-session-card { border-color: rgba(171,224,255,.25); background: linear-gradient(145deg,rgba(137,181,226,.13),rgba(74,99,137,.05)),rgba(10,20,34,.80); box-shadow:0 20px 50px rgba(0,0,0,.38); backdrop-filter:blur(22px); }

  /* Other pages */
  .status-dashboard { grid-template-columns:minmax(0,1fr) minmax(330px,410px); gap:12px; }
  .kpi-row { gap:9px; }
  .kpi { border-radius:16px; }
  .status-card-grid { gap:10px; }
  .charts-grid { gap:10px; }
  .chart-card { border-radius:16px; }
  .operations-grid { gap:10px; }

  @media (max-width: 1320px) {
    :root { --final-sidebar: 188px; --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 10px); }
    .overview-dashboard { grid-template-columns: 154px minmax(0,1fr) 246px !important; }
    .topbar { grid-template-columns: 175px minmax(0,1fr) auto !important; }
    .topbar .demo-mode-badge, .topbar .live-pill { display:none !important; }
    .console-nav-btn .nav-copy small { display:none; }
  }
  @media (max-width: 1120px) {
    :root { --final-sidebar: 76px; --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 10px); }
    .sidebar-brand-copy,.sidebar-section-label,.console-nav-btn .nav-copy,.console-nav-btn>i,.sidebar-system-state,.sidebar-user-card div,.sidebar-user-card button { display:none !important; }
    .sidebar-brand { justify-content:center; padding:0; }
    .sidebar-menu { padding:0 8px; }
    .console-nav-btn { grid-template-columns:1fr !important; padding:8px !important; }
    .topbar { grid-template-columns:150px minmax(0,1fr) auto !important; }
    .overview-dashboard { grid-template-columns:minmax(0,1fr) 244px !important; }
    .overview-left-column { display:none !important; }
    .overview-map-column { grid-template-rows:72px minmax(0,1fr) !important; }
    .topbar-uptime,.topbar-divider,.topbar .demo-mode-badge { display:none !important; }
  }
  @media (max-width: 860px) {
    :root { --final-sidebar: 0px; --final-content-left: var(--final-shell); }
    body.overview-map-mode { overflow:auto !important; }
    .console-nav, body.overview-map-mode .console-nav { width:min(280px,calc(100vw - 30px)) !important; transform:translateX(calc(-100% - 20px)); transition:transform .2s ease; }
    body.sidebar-open .console-nav, body.sidebar-open.overview-map-mode .console-nav { transform:translateX(0); }
    .sidebar-brand-copy,.sidebar-section-label,.console-nav-btn .nav-copy,.console-nav-btn>i,.sidebar-system-state,.sidebar-user-card div,.sidebar-user-card button { display:grid !important; }
    .sidebar-brand { justify-content:flex-start; padding:0 15px; }
    .sidebar-menu { padding:0 9px; }
    .console-nav-btn { grid-template-columns:27px minmax(0,1fr) auto !important; }
    .topbar { grid-template-columns:minmax(0,1fr) auto !important; }
    .topbar-page { display:flex; }
    .mobile-menu-button { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(209,231,255,.13); border-radius:10px; color:#93a7bc; background:rgba(255,255,255,.025); }
    .mobile-menu-button svg { width:17px; height:17px; }
    .topbar-context { display:none; }
    .topbar .admin-chip,.topbar .demo-mode-badge,.topbar .live-pill { display:none !important; }
    .overview-dashboard { height:auto !important; grid-template-columns:1fr !important; }
    .overview-map-column { min-height:620px; grid-template-rows:auto 560px !important; }
    .overview-right-column { display:grid !important; grid-template-columns:1fr 1fr !important; min-height:520px !important; }
    .overview-quick-actions { grid-column:1 / -1; }
    body.overview-map-mode #view-overview { height:auto !important; overflow:visible !important; }
    .console-view.active { overflow:visible; }
  }
  @media (max-width: 620px) {
    :root { --final-shell:8px; --final-topbar:56px; }
    .main, body.overview-map-mode .main { padding:72px 8px 78px !important; height:auto !important; min-height:100vh; }
    .topbar { left:8px !important; right:8px !important; top:8px !important; height:56px !important; padding:7px 8px !important; }
    .topbar-page strong { font-size:13px; }
    .topbar-page small { display:none; }
    .topbar .logout-btn,.topbar .demo-mode-switch { display:none !important; }
    .language-switch { margin-left:auto; }
    .overview-map-column { min-height:560px; grid-template-rows:auto 470px !important; }
    .world-map-hud { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .world-hud-chip.network-card { grid-column:1 / -1; }
    .overview-right-column { grid-template-columns:1fr !important; }
    .overview-event-card { min-height:260px; }
    .overview-flow-card { min-height:330px; }
    .overview-quick-actions { min-height:90px; }
    .map-legend,.world-map-help { display:none !important; }
    .world-map-controls { left:10px !important; transform:none !important; }
    .world-mobile-panel-toggle { display:none !important; }
    .simple-login-card { padding:24px !important; border-radius:22px !important; }
    .simple-login-card .login-language { top:16px !important; right:16px !important; }
    .simple-login-brand { margin-bottom:30px; }
  }



  .console-nav-btn .nav-copy b { font-size: 11px !important; }
  .console-nav-btn .nav-copy small { font-size: 7.5px !important; }
  .panel-heading > span { font-size: 11px !important; }
  .central-main-stats strong { font-size: 11px !important; }
  .central-main-stats small { font-size: 7.5px !important; }
  .overview-node-list .world-row-title, .overview-flow-list .world-row-title { font-size: 7.6px !important; }
  .overview-node-list .world-row-sub, .overview-flow-list .world-row-sub { font-size: 6.4px !important; }
  .world-event-list .event { font-size: 6.6px !important; }
  .world-event-list .event-time { font-size: 6.4px !important; }
  .world-hud-chip .label { font-size: 6.5px !important; }
  .world-hud-chip .value { font-size: 12.5px !important; }



  [hidden], #login-screen[hidden], #fleet-app[hidden], #world-demo-toggle[hidden] { display: none !important; }



  :root {
    --final-shell: 12px;
    --final-sidebar: 236px;
    --final-topbar: 64px;
    --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 12px);
    --final-gap: 12px;
    --final-panel: rgba(15, 28, 47, .76);
    --final-panel-strong: rgba(10, 21, 37, .88);
    --final-stroke: rgba(202, 228, 255, .20);
    --final-stroke-bright: rgba(112, 217, 255, .38);
    --final-text: #f7fbff;
    --final-muted: #aabacc;
    --final-dim: #8094a9;
    --readable-glass: blur(24px) saturate(1.28);
    --readable-shadow: 0 24px 68px rgba(0, 5, 17, .36), inset 0 1px 0 rgba(255,255,255,.10);
  }

  html { font-size: 16px; }
  body {
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: -.005em;
    background:
      radial-gradient(980px 700px at 16% -10%, rgba(57, 163, 255, .22), transparent 68%),
      radial-gradient(880px 650px at 84% -4%, rgba(174, 105, 255, .19), transparent 68%),
      radial-gradient(920px 700px at 54% 112%, rgba(42, 220, 190, .10), transparent 72%),
      linear-gradient(145deg, #06101e 0%, #0a1322 46%, #070c17 100%) !important;
  }
  body::after { opacity: .055 !important; }

  .topbar,
  .console-nav,
  .glass-panel,
  .overview-card,
  .ops-card,
  .kpi,
  .chart-card,
  .metric-summary-card,
  .card,
  .toolbar,
  .metric-dashboard-head,
  .region-tile,
  .status-event-panel,
  .modal,
  .modal-card {
    border-color: var(--final-stroke) !important;
    background:
      linear-gradient(145deg, rgba(161, 196, 235, .16), rgba(77, 105, 145, .065) 43%, rgba(8, 18, 32, .42)),
      var(--final-panel) !important;
    box-shadow: var(--readable-shadow) !important;
    backdrop-filter: var(--readable-glass) !important;
    -webkit-backdrop-filter: var(--readable-glass) !important;
  }

  .topbar,
  body.overview-map-mode .topbar {
    height: var(--final-topbar) !important;
    min-height: var(--final-topbar) !important;
    grid-template-columns: 230px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    padding: 8px 12px 8px 16px !important;
    border-radius: 20px !important;
    overflow: visible !important;
  }
  .topbar-page strong { font-size: 18px !important; line-height: 1.05 !important; font-weight: 780 !important; }
  .topbar-page small { font-size: 10px !important; line-height: 1.2 !important; color: #8297ac !important; }
  .server-selector { min-height: 38px !important; padding: 0 13px !important; border-radius: 12px !important; }
  .server-selector span { font-size: 10.5px !important; }
  .server-online { font-size: 9.5px !important; padding: 8px 10px !important; }
  .topbar-uptime { font-size: 9.5px !important; }
  .topbar-icon-button { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
  .language-switch { min-height: 38px !important; border-radius: 12px !important; }
  .language-switch .language-option { min-width: 34px !important; height: 30px !important; font-size: 9px !important; }
  .demo-mode-switch,
  .logout-btn,
  .live-pill { min-height: 38px !important; font-size: 10px !important; border-radius: 12px !important; }
  .demo-mode-badge { font-size: 9px !important; padding: 7px 10px !important; }

  .console-nav,
  body.overview-map-mode .console-nav {
    width: var(--final-sidebar) !important;
    border-radius: 22px !important;
  }
  .sidebar-brand {
    height: 88px !important;
    flex: 0 0 88px !important;
    gap: 13px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, rgba(77, 185, 255, .10), rgba(168, 116, 255, .045)) !important;
  }
  .sidebar-brand-mark.original-preview-mark {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(72, 207, 255, .42) !important;
    border-radius: 4px !important;
    color: #c9f2ff !important;
    background: linear-gradient(145deg, rgba(29, 92, 126, .78), rgba(7, 24, 42, .94)) !important;
    box-shadow: inset 0 0 18px rgba(62, 207, 255, .18), 0 0 22px rgba(62, 207, 255, .12) !important;
    filter: none !important;
  }
  .sidebar-brand-mark.original-preview-mark::before {
    content: '' !important;
    position: absolute !important;
    inset: 5px !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    border: 1px solid rgba(107, 222, 255, .28) !important;
    border-radius: 2px !important;
    background: transparent !important;
    filter: none !important;
  }
  .sidebar-brand-mark.original-preview-mark::after { display: none !important; content: none !important; }
  .sidebar-brand-mark.original-preview-mark .original-void-letter {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: auto !important;
    height: auto !important;
    clip-path: none !important;
    color: #d7f6ff !important;
    background: none !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 31px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.12em !important;
    transform: translateX(-1px) scaleX(.76) !important;
    text-shadow: 0 0 8px rgba(81, 221, 255, .85), 0 0 18px rgba(142, 170, 255, .45) !important;
  }
  .sidebar-brand-copy strong { font-size: 15px !important; line-height: 1.05 !important; }
  .sidebar-brand-copy small { font-size: 8.5px !important; line-height: 1.1 !important; color: #70dfff !important; }
  .sidebar-section-label { padding: 17px 15px 9px !important; font-size: 8.5px !important; color: #71879d !important; }
  .sidebar-menu { gap: 5px !important; padding: 0 10px !important; }
  .console-nav-btn {
    min-height: 50px !important;
    grid-template-columns: 29px minmax(0,1fr) auto !important;
    gap: 11px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .console-nav-btn > svg { width: 20px !important; height: 20px !important; }
  .console-nav-btn .nav-copy b { font-size: 13px !important; line-height: 1.08 !important; font-weight: 740 !important; }
  .console-nav-btn .nav-copy small { font-size: 10.5px !important; line-height: 1.2 !important; color: #8196aa !important; }
  .console-nav-btn.active .nav-copy small { color: #94c9df !important; }
  .sidebar-system-state b,
  .sidebar-user-card strong { font-size: 10.5px !important; }
  .sidebar-system-state small,
  .sidebar-user-card small { font-size: 10px !important; }
  .sidebar-user-card { grid-template-columns: 34px minmax(0,1fr) 28px !important; }
  .sidebar-avatar { width: 34px !important; height: 34px !important; font-size: 12px !important; }

  .console-view.active { padding-right: 4px !important; }
  .view-heading { min-height: 52px !important; margin: 0 0 14px !important; padding: 0 4px !important; }
  .view-title { font-size: 30px !important; line-height: 1.05 !important; font-weight: 780 !important; }
  .view-subtitle { font-size: 11px !important; }
  .panel-heading { min-height: 44px !important; padding: 0 14px !important; }
  .panel-heading > span { font-size: 13px !important; line-height: 1.2 !important; font-weight: 760 !important; }
  .panel-heading small,
  .panel-heading button { font-size: 10px !important; }

  /* Overview: readable three-column layout. */
  .overview-dashboard {
    grid-template-columns: 220px minmax(0, 1fr) 316px !important;
    gap: var(--final-gap) !important;
  }
  .overview-left-column,
  .overview-right-column {
    gap: var(--final-gap) !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
  }
  .overview-right-column.world-side-panel { overflow: hidden !important; }
  .overview-map-column { grid-template-rows: 88px minmax(0, 1fr) !important; gap: var(--final-gap) !important; }

  .overview-central-card { flex: 0 0 342px !important; }
  .central-server-identity { padding: 13px 14px 10px !important; }
  .central-server-identity strong { font-size: 12px !important; }
  .mini-online { font-size: 9px !important; }
  .central-main-stats { gap: 8px !important; padding: 0 13px 11px !important; }
  .central-main-stats > div {
    min-height: 52px !important;
    grid-template-columns: 34px 1fr !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
  }
  .central-stat-icon { width: 32px !important; height: 32px !important; }
  .central-stat-icon svg { width: 17px !important; height: 17px !important; }
  .central-main-stats strong { font-size: 14px !important; }
  .central-main-stats small { font-size: 10.5px !important; color: #a3b5c7 !important; }
  .compact-summary { gap: 7px !important; padding: 0 13px 13px !important; }
  .compact-summary .world-stat { min-height: 42px !important; padding: 8px !important; border-radius: 11px !important; }
  .compact-summary .world-stat .k { font-size: 9.5px !important; color: #8fa4b8 !important; }
  .compact-summary .world-stat .v { margin-top: 4px !important; font-size: 12px !important; }

  .overview-session-card { flex: 1 1 250px !important; min-height: 230px !important; }
  .overview-session-summary { gap: 8px !important; padding: 12px 13px 10px !important; }
  .overview-session-summary > div { min-height: 62px !important; gap: 7px !important; padding: 10px !important; border-radius: 13px !important; }
  .overview-session-summary span { font-size: 10.5px !important; color: #9fb1c3 !important; }
  .overview-session-summary strong { font-size: 19px !important; }
  .overview-node-peek-label { padding: 3px 14px 7px !important; font-size: 10px !important; }
  .overview-node-peek-label small { font-size: 9.5px !important; }
  .overview-node-list { height: calc(100% - 128px) !important; padding: 0 8px 9px !important; }
  .overview-node-list .world-row { min-height: 54px !important; padding: 8px 9px !important; border-radius: 11px !important; }
  .overview-node-list .world-row-title { font-size: 11.5px !important; line-height: 1.25 !important; }
  .overview-node-list .world-row-sub { font-size: 10px !important; line-height: 1.35 !important; color: #98aabd !important; }
  .overview-node-list .world-row-status { min-width: 66px !important; gap: 4px !important; }
  .overview-node-list .world-node-health { padding: 2px 7px !important; font-size: 9.5px !important; }
  .overview-node-list .world-row-value { font-size: 11px !important; }

  .overview-traffic-card { flex: 0 0 142px !important; }
  .traffic-row { gap: 9px 12px !important; padding: 11px 14px 1px !important; }
  .traffic-row span { font-size: 10.5px !important; color: #a3b5c7 !important; }
  .traffic-row strong { font-size: 11.5px !important; }
  .traffic-row > i { height: 6px !important; background: rgba(255,255,255,.075) !important; }

  .overview-health-card { flex: 0 0 174px !important; grid-template-columns: 42px 1fr !important; grid-template-rows: auto auto !important; gap: 10px 12px !important; padding: 12px 14px !important; }
  .health-shield { width: 40px !important; height: 46px !important; }
  .health-copy small { font-family: var(--sans) !important; font-size: 10.5px !important; color: #9eb0c2 !important; }
  .health-copy strong { font-size: 15px !important; }
  .health-copy p { font-size: 10.5px !important; color: #9aadc0 !important; }
  .overview-health-card .world-ops-item { min-height: 36px !important; padding: 7px 8px !important; }
  .overview-health-card .world-ops-item .k { font-family: var(--sans) !important; font-size: 9.5px !important; color: #8fa4b8 !important; }
  .overview-health-card .world-ops-item .v { font-size: 11px !important; }

  .world-map-hud { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; }
  .world-hud-chip {
    --gauge-start: #8beeff;
    --gauge-end: var(--final-cyan);
    min-height: 84px !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    grid-template-rows: auto auto 7px !important;
    gap: 3px 11px !important;
    padding: 12px 13px !important;
    border-radius: 17px !important;
  }
  .world-hud-chip.memory-card { --gauge-start: #d5bcff; --gauge-end: var(--final-violet); }
  .world-hud-chip.ccu-card { --gauge-start: #9af5c9; --gauge-end: var(--final-green); }
  .world-hud-chip.nodes-card { --gauge-start: #b6c8ff; --gauge-end: var(--final-blue); }
  .world-hud-chip.network-card { --gauge-start: #dfb6ff; --gauge-end: #c485ff; }
  .hud-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
  .hud-icon svg { width: 18px !important; height: 18px !important; }
  .world-hud-chip .label { font-size: 10.5px !important; line-height: 1.1 !important; color: #a9b9c9 !important; }
  .world-hud-chip .value { font-size: 18px !important; line-height: 1 !important; font-weight: 820 !important; }
  .hud-spark { display: none !important; }
  .hud-gauge {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 7px !important;
    margin: 2px 0 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.38) !important;
    accent-color: var(--gauge-end);
  }
  .hud-gauge::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.075); }
  .hud-gauge::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gauge-start), var(--gauge-end));
    box-shadow: 0 0 12px color-mix(in srgb, var(--gauge-end) 56%, transparent);
  }
  .hud-gauge::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gauge-start), var(--gauge-end));
    box-shadow: 0 0 12px color-mix(in srgb, var(--gauge-end) 56%, transparent);
  }

  .map-stage-title span { font-size: 12px !important; }
  .map-stage-title small { font-size: 10px !important; color: #94a8bb !important; }
  .map-legend span { font-size: 10px !important; color: #8fa3b7 !important; }
  .world-map-help { font-size: 10px !important; }
  .world-map-control { min-height: 34px !important; padding: 0 11px !important; font-size: 10.5px !important; }

  .overview-event-card { flex: 0 0 286px !important; }
  .world-event-count-line { padding: 10px 13px 5px !important; font-size: 10px !important; }
  .world-event-list { height: calc(100% - 78px) !important; padding: 5px 8px 10px !important; }
  .world-event-list .event {
    grid-template-columns: 48px 52px 7px minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 8px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }
  .world-event-list .event-time { font-size: 9.5px !important; }
  .world-event-list .event-tag { font-size: 9.5px !important; padding: 3px 5px !important; }

  .overview-flow-card { flex: 1 1 auto !important; min-height: 238px !important; }
  .overview-flow-total { padding: 13px 14px 9px !important; }
  .overview-flow-total span { font-size: 10px !important; }
  .overview-flow-total strong { font-size: 25px !important; }
  .overview-flow-list { height: calc(100% - 90px) !important; padding: 7px 8px 10px !important; }
  .overview-flow-list .world-row { min-height: 55px !important; padding: 9px !important; border-radius: 11px !important; }
  .overview-flow-list .world-row-title { font-size: 11.5px !important; }
  .overview-flow-list .world-row-sub { font-size: 10px !important; color: #96a9bc !important; }
  .overview-flow-list .world-row-value { font-size: 12px !important; }
  .overview-right-health-card { margin-top: auto !important; }

  .world-session-card { font-family: var(--sans) !important; }
  .world-session-title { font-size: 12px !important; }
  .world-session-meta { color: #92a6ba !important; font-size: 10.5px !important; }
  .world-session-pill { font-family: var(--mono) !important; font-size: 9.5px !important; }
  .overview-quick-actions { flex: 0 0 104px !important; gap: 9px !important; }
  .overview-quick-actions button { border-radius: 17px !important; }
  .overview-quick-actions span { width: 36px !important; height: 36px !important; }
  .overview-quick-actions svg { width: 17px !important; height: 17px !important; }
  .overview-quick-actions b { font-size: 10px !important; }

  /* Sessions: keep the sticky toolbar in its scroll container so it never covers row one. */
  #view-sessions .view-heading { min-height: 58px !important; margin-bottom: 14px !important; }
  #view-sessions .toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 35 !important;
    min-height: 66px !important;
    grid-template-columns: auto auto minmax(280px,1fr) 42px 42px !important;
    gap: 11px !important;
    margin: 0 0 16px !important;
    padding: 12px !important;
    border-radius: 19px !important;
  }
  .toolbar-section-title { font-size: 11.5px !important; color: #d8e4ef !important; }
  .filters { padding: 4px !important; border-radius: 13px !important; }
  .filter { min-height: 38px !important; padding: 7px 12px !important; font-size: 10px !important; }
  .filter .count { font-size: 9.5px !important; }
  .search input { min-height: 42px !important; font-size: 11px !important; padding-left: 35px !important; }
  #view-sessions .icon-btn { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
  #card-grid { gap: 10px !important; padding-top: 0 !important; }
  .card {
    border-radius: 18px !important;
    background:
      linear-gradient(110deg, rgba(105, 156, 215, .13), rgba(66, 91, 127, .045) 48%, rgba(8, 18, 32, .40)),
      rgba(16, 30, 50, .78) !important;
  }
  .card:hover { transform: translateY(-1px); }
  .card-row {
    min-height: 98px !important;
    grid-template-columns: 4px 17px minmax(180px,1.05fr) minmax(150px,.9fr) minmax(125px,.72fr) minmax(105px,.62fr) minmax(175px,.88fr) auto auto auto !important;
    gap: 14px !important;
    padding: 13px 14px 13px 0 !important;
  }
  .room-code { font-size: 18px !important; line-height: 1.1 !important; }
  .session-name { font-size: 11.5px !important; color: #92a6ba !important; }
  .region-chip { font-size: 11px !important; padding: 5px 9px !important; border-radius: 9px !important; }
  .hostname { font-size: 9.5px !important; color: #768a9f !important; }
  .mode-name { font-size: 12.5px !important; }
  .mode-state { font-size: 9.5px !important; color: #8ca0b4 !important; }
  .time-elapsed { font-size: 14.5px !important; }
  .time-config { font-size: 9.5px !important; color: #7f93a7 !important; }
  .roster-head .lbl,
  .phase-head .lbl { font-size: 9.5px !important; color: #7f93a7 !important; }
  .roster-head .count { font-size: 12.5px !important; }
  .phase-head .val { font-size: 11px !important; }
  .pip { height: 7px !important; border-radius: 2px !important; }
  .phase-bars { height: 6px !important; }
  .phase-foot { font-size: 9px !important; }
  .status-badge { padding: 6px 10px !important; border-radius: 8px !important; font-size: 10px !important; }
  .action-btn { min-height: 32px !important; height: 32px !important; padding: 6px 9px !important; border-radius: 10px !important; font-size: 10px !important; }
  .row-chev { margin-left: 6px !important; }

  /* Remaining pages share the same larger type scale. */
  .side-section-head { min-height: 42px !important; padding-bottom: 11px !important; }
  .side-section-head .title,
  .world-side-head .title { font-size: 13px !important; }
  .side-section-head .meta,
  .world-side-head .meta { font-size: 10px !important; color: #8397ab !important; }
  .kpi-label { font-size: 10.5px !important; margin-bottom: 12px !important; }
  .kpi-value { font-size: clamp(27px, 1.9vw, 34px) !important; }
  .kpi-foot { font-size: 11px !important; color: #8da1b5 !important; }
  .auth-line,
  .control-status,
  .control-name,
  .synthetic-field strong { font-size: 11.5px !important; }
  .control-meta,
  .synthetic-field span,
  .synthetic-step,
  .action-queue-meta,
  .audit-message { font-size: 10px !important; }
  .chart-title { font-size: 12px !important; }
  .chart-value { font-size: 12px !important; }
  .chart-legend-item { font-size: 10.5px !important; }
  .metric-summary-label { font-size: 10.5px !important; }
  .metric-summary-value { font-size: 23px !important; }
  .metric-summary-foot { font-size: 10.5px !important; }
  .control-button,
  .audit-refresh,
  .alert-ack-button,
  .announce-button,
  .metric-action { font-size: 10px !important; }
  .modal-title { font-size: 13px !important; }
  .kv { font-size: 11.5px !important; }
  .kv .k { font-size: 10px !important; }

  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .topbar,
    .console-nav,
    .glass-panel,
    .overview-card,
    .ops-card,
    .kpi,
    .chart-card,
    .metric-summary-card,
    .card,
    .toolbar,
    .metric-dashboard-head,
    .region-tile,
    .status-event-panel,
    .modal,
    .modal-card { background: rgba(13, 25, 42, .96) !important; }
  }

  @media (max-width: 1420px) {
    :root {
      --final-sidebar: 208px;
      --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 10px);
    }
    .topbar { grid-template-columns: 190px minmax(0,1fr) auto !important; }
    .overview-dashboard { grid-template-columns: 204px minmax(0,1fr) 290px !important; }
    .console-nav-btn .nav-copy b { font-size: 12px !important; }
    .console-nav-btn .nav-copy small { font-size: 10px !important; }
    .world-hud-chip { padding: 10px 11px !important; }
    .world-hud-chip .value { font-size: 16px !important; }
    .topbar .demo-mode-badge,
    .topbar .live-pill { display: none !important; }
    .card-row { grid-template-columns: 4px 16px minmax(165px,1fr) minmax(135px,.86fr) minmax(112px,.7fr) minmax(95px,.6fr) minmax(155px,.82fr) auto auto auto !important; gap: 11px !important; }
  }

  @media (max-width: 1120px) {
    :root {
      --final-sidebar: 80px;
      --final-content-left: calc(var(--final-shell) + var(--final-sidebar) + 10px);
    }
    .sidebar-brand-copy,
    .sidebar-section-label,
    .console-nav-btn .nav-copy,
    .console-nav-btn > i,
    .nav-alert-tail > i,
    .sidebar-system-state,
    .sidebar-user-card div,
    .sidebar-user-card button { display: none !important; }
    .sidebar-brand { justify-content: center !important; padding: 0 !important; }
    .sidebar-menu { padding: 0 9px !important; }
    .console-nav-btn { grid-template-columns: 1fr !important; padding: 8px !important; }
    .topbar { grid-template-columns: 160px minmax(0,1fr) auto !important; }
    .overview-dashboard { grid-template-columns: minmax(0,1fr) 274px !important; }
    .overview-left-column { display: none !important; }
    .world-map-hud { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .world-hud-chip.network-card,
    .world-hud-chip.nodes-card { grid-column: auto !important; }
    #view-sessions .toolbar { grid-template-columns: auto minmax(200px,1fr) 42px 42px !important; }
    #view-sessions .filters { grid-column: 1 / -1 !important; }
    .card-row { grid-template-columns: 4px 15px minmax(160px,1.1fr) minmax(125px,.9fr) minmax(100px,.72fr) auto auto !important; }
    .col-mode,
    .col-phase { display: none !important; }
  }

  @media (max-width: 860px) {
    :root { --final-sidebar: 0px; --final-content-left: var(--final-shell); }
    .topbar { grid-template-columns: minmax(0,1fr) auto !important; }
    .topbar-context { display: none !important; }
    .console-nav,
    body.overview-map-mode .console-nav { width: min(300px, calc(100vw - 28px)) !important; }
    .overview-dashboard { grid-template-columns: 1fr !important; height: auto !important; }
    .overview-map-column { min-height: 650px !important; grid-template-rows: auto 560px !important; }
    .overview-right-column,
    .overview-right-column.world-side-panel { display: grid !important; grid-template-columns: 1fr 1fr !important; overflow: visible !important; }
    .overview-right-health-card { grid-column: 1 / -1 !important; min-height: 174px !important; }
    .world-map-hud { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .overview-quick-actions { grid-column: 1 / -1; }
    #view-sessions .toolbar { position: relative !important; top: auto !important; grid-template-columns: 1fr auto auto !important; }
    #view-sessions .toolbar-section-title,
    #view-sessions .filters,
    #view-sessions .search { grid-column: 1 / -1 !important; }
  }

  @media (max-width: 620px) {
    body { font-size: 13px !important; }
    .topbar-page strong { font-size: 14px !important; }
    .topbar-page small { display: none !important; }
    .world-map-hud { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .world-hud-chip.network-card { grid-column: 1 / -1 !important; }
    .world-hud-chip .label { font-size: 8.5px !important; }
    .world-hud-chip .value { font-size: 15px !important; }
    .overview-right-column,
    .overview-right-column.world-side-panel { grid-template-columns: 1fr !important; }
    .view-title { font-size: 26px !important; }
    .filters { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .filter { font-size: 9px !important; padding: 7px 5px !important; }
  }

/* ===== 백업·버전·알림 실제 관리 화면 ===== */
.feature-capability {
  margin: 0 0 14px;
  padding: 10px 13px;
  border: 1px solid rgba(137, 192, 236, .14);
  border-radius: 10px;
  color: #8fa7bb;
  background: rgba(3, 11, 20, .42);
  font: 600 11px/1.45 var(--mono);
}
.release-layout,
.alert-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); }
.release-rollout-card { grid-column: 1 / -1; }
.release-rollout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 10px;
  background: rgba(2, 8, 16, .28);
}
.release-rollout-summary > div { min-width: 0; display: grid; gap: 5px; }
.release-rollout-summary strong { color: #dce9f5; font: 750 13px/1.3 var(--sans); }
.release-rollout-summary small { color: #8ba1b5; font: 600 10px/1.45 var(--mono); }
.release-rollout-targets { display: grid; gap: 7px; margin-top: 9px; }
.rollout-target-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(100px, .7fr) minmax(100px, .7fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(137, 192, 236, .09);
  border-radius: 9px;
  color: #91a8bc;
  background: rgba(5, 15, 26, .3);
  font: 650 11px/1.4 var(--mono);
}
.rollout-target-row strong { overflow: hidden; color: #dce9f5; text-overflow: ellipsis; white-space: nowrap; }
.rollout-progress {
  width: min(230px, 34vw);
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(116, 145, 167, .18);
}
.rollout-progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42d7ff, #8d75ff); }
.fleet-node-picker {
  margin: 0;
  padding: 11px 12px 12px;
  border: 1px solid rgba(137, 192, 236, .14);
  border-radius: 10px;
}
.fleet-node-picker legend { padding: 0 5px; color: #9ab0c3; font: 700 10px/1 var(--mono); }
#fleet-rollout-node-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
#fleet-rollout-node-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(137, 192, 236, .1);
  border-radius: 8px;
  color: #b8cee0;
  background: rgba(3, 11, 20, .35);
}
#fleet-rollout-node-list input { width: auto; }
.management-help { margin: 12px 0 0; color: #8ba1b5; font: 600 10px/1.5 var(--mono); }
.release-table .feature-table-row,
#backup-history-list .feature-table-row { grid-template-columns: 1.45fr 1fr .75fr 1.15fr .75fr 1.1fr; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.table-actions button,
.deployment-item button,
.channel-item button,
.incident-item button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(128, 189, 230, .18);
  border-radius: 7px;
  color: #b8cee0;
  background: rgba(10, 26, 41, .7);
  font: 700 9px/1 var(--mono);
}
.table-actions button:hover:not(:disabled),
.channel-item button:hover:not(:disabled),
.incident-item button:hover:not(:disabled) { border-color: rgba(94, 215, 255, .45); color: #e9f7ff; }
.state-good { color: var(--designer-green) !important; }
.active-release { background: rgba(85, 231, 160, .055); }
.deployment-list,
.incident-list,
.notification-channel-list { display: grid; gap: 8px; }
.deployment-item,
.incident-item,
.channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 10px;
  background: rgba(2, 8, 16, .28);
}
.deployment-item > div,
.incident-item > div:first-child,
.channel-item > div { min-width: 0; display: grid; gap: 5px; }
.deployment-item strong,
.incident-item strong,
.channel-item strong { overflow: hidden; color: #dce9f5; font: 750 10px/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.deployment-item small,
.incident-item small,
.channel-item small { color: #657e93; font: 600 8px/1.35 var(--mono); }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.status-dot.good { background: var(--designer-green); box-shadow: 0 0 12px rgba(85, 231, 160, .52); }
.status-dot.bad { background: var(--designer-red); box-shadow: 0 0 12px rgba(255, 98, 122, .42); }
.management-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid rgba(137, 192, 236, .2);
  border-radius: 16px;
  color: var(--void-text);
  background: rgba(7, 18, 31, .98);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.management-dialog::backdrop { background: rgba(0, 4, 10, .76); backdrop-filter: blur(8px); }
.management-dialog form { padding: 20px; }
.management-dialog .panel-heading button { border: 0; color: #9cb1c3; background: transparent; font-size: 22px; }
.backup-detail-dialog {
  --operations-readable-caption: 12px;
  --operations-readable-body: 13px;
  --operations-readable-title: 15px;
  width: min(680px, calc(100vw - 32px));
}
.backup-detail-heading { align-items: flex-start; }
.backup-detail-heading > div { min-width: 0; display: grid; gap: 6px; }
.backup-detail-heading > div > span { color: #eef7ff; font: 760 var(--operations-readable-title)/1.35 var(--sans); }
.backup-detail-heading small {
  overflow-wrap: anywhere;
  color: #8fa7bb;
  font: 650 var(--operations-readable-caption)/1.45 var(--mono);
}
.backup-detail-content { min-height: 132px; margin-top: 14px; }
.backup-detail-message {
  display: grid;
  min-height: 132px;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 11px;
  color: #a9bed1;
  background: rgba(2, 8, 16, .28);
  font: 650 var(--operations-readable-body)/1.55 var(--sans);
  text-align: center;
}
.backup-detail-message.is-error { color: #ff9bab; border-color: rgba(255, 98, 122, .24); }
.backup-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.backup-detail-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 74px;
  padding: 12px 13px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 10px;
  background: rgba(2, 8, 16, .28);
}
.backup-detail-field.is-wide { grid-column: 1 / -1; }
.backup-detail-label { color: #8fa7bb; font: 700 var(--operations-readable-caption)/1.35 var(--sans); }
.backup-detail-value {
  color: #e3eef8;
  font: 700 var(--operations-readable-body)/1.5 var(--mono);
  overflow-wrap: anywhere;
  white-space: normal;
}
.backup-detail-value.is-verified { color: var(--designer-green); }
.backup-detail-value.needs-review { color: #ffc36b; }
.backup-detail-safety-note { font-size: var(--operations-readable-caption) !important; }
.check-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; }
.check-label input { width: auto !important; }
@media (max-width: 980px) {
  .release-layout,
  .alert-layout { grid-template-columns: 1fr; }
  .release-table,
  #backup-history-list { overflow-x: auto; }
  .release-table .feature-table-row,
  #backup-history-list .feature-table-row { min-width: 820px; }
  .rollout-target-row { grid-template-columns: minmax(130px, 1fr) repeat(2, minmax(90px, .7fr)) minmax(110px, 1fr) auto; overflow-x: auto; }
}
@media (max-width: 600px) {
  .alert-feed-card,
  .alert-layout .feature-card { min-height: auto !important; }
  .incident-list,
  .notification-channel-list,
  .rule-list { min-height: 0; }
  .release-rollout-summary { align-items: flex-start; flex-direction: column; }
  .rollout-progress { width: 100%; }
  .release-rollout-targets { overflow: visible; }
  .rollout-target-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 14px; min-width: 0; padding: 12px; overflow: visible; }
  .rollout-target-row strong { grid-column: 1 / -1; white-space: normal; }
  .rollout-target-value { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
  .rollout-target-value::before { content: attr(data-label); color: #718a9f; font: 700 9px/1.2 var(--mono); }
  .rollout-target-row .table-actions { grid-column: 1 / -1; justify-content: stretch; }
  .rollout-target-row .table-actions button { width: 100%; }
  #fleet-rollout-node-list { grid-template-columns: 1fr; }
  .backup-detail-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .backup-detail-grid { grid-template-columns: 1fr; }
  .backup-detail-field.is-wide { grid-column: auto; }
}

/* ===== 명시적 다크/라이트 테마 ===== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
.theme-toggle-button .theme-icon { width: 18px; height: 18px; }
.theme-toggle-button .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-button .theme-icon-moon { display: none; }
html[data-theme="light"] .theme-toggle-button .theme-icon-sun { display: block; }

html[data-theme="light"] body {
  --surface: #ffffff;
  --surface-2: #f6f9fc;
  --surface-3: #edf3f8;
  --bg-0: #eef3f8;
  --bg-1: #f7f9fc;
  --bg-2: #ffffff;
  --bg-3: #e7eef5;
  --ink-0: #122033;
  --ink-1: #25364b;
  --ink-2: #51647a;
  --ink-3: #728298;
  --ink-4: #94a1b1;
  --line: rgba(35, 67, 99, .12);
  --line-2: rgba(35, 67, 99, .18);
  --line-3: rgba(35, 67, 99, .28);
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #ffffff;
  --panel-strong: rgba(255, 255, 255, .96);
  --panel-muted: rgba(31, 78, 121, .05);
  --text-primary: #122033;
  --text-secondary: #40546b;
  --text-muted: #728298;
  --glass-bg: rgba(255, 255, 255, .80);
  --glass-bg-strong: rgba(255, 255, 255, .94);
  --glass-border: rgba(36, 75, 111, .15);
  --glass-border-strong: rgba(20, 121, 174, .28);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.95);
  --void-glass: rgba(255, 255, 255, .82);
  --void-glass-strong: rgba(255, 255, 255, .96);
  --void-glass-soft: rgba(33, 92, 140, .055);
  --void-stroke: rgba(36, 75, 111, .15);
  --void-stroke-strong: rgba(20, 121, 174, .30);
  --void-text: #122033;
  --void-muted: #51647a;
  --void-dim: #7d8da1;
  --void-cyan: #087da7;
  --void-blue: #315fc0;
  --void-violet: #7048b8;
  --void-green: #087a4b;
  --void-amber: #9b6400;
  --void-red: #bd2945;
  --void-shadow: 0 20px 52px rgba(46, 74, 105, .14);
  --void-shadow-soft: 0 12px 30px rgba(46, 74, 105, .11);
  --ref-panel: rgba(255, 255, 255, .84);
  --ref-panel-strong: rgba(255, 255, 255, .96);
  --ref-panel-soft: rgba(49, 102, 150, .06);
  --ref-border: rgba(37, 78, 116, .14);
  --ref-border-bright: rgba(20, 121, 174, .28);
  --ref-highlight: rgba(255,255,255,.96);
  --ref-shadow: 0 20px 52px rgba(48, 76, 107, .13), inset 0 1px 0 rgba(255,255,255,.96);
  --final-panel: rgba(255, 255, 255, .86);
  --final-panel-strong: rgba(255, 255, 255, .96);
  --final-panel-soft: rgba(44, 98, 145, .055);
  --final-stroke: rgba(37, 78, 116, .14);
  --final-stroke-bright: rgba(20, 121, 174, .28);
  --final-text: #122033;
  --final-muted: #51647a;
  --final-dim: #7d8da1;
  --final-cyan: #087da7;
  --final-blue: #315fc0;
  --final-violet: #7048b8;
  --final-green: #087a4b;
  --final-amber: #9b6400;
  --final-red: #bd2945;
  --final-shadow: 0 20px 52px rgba(46, 74, 105, .14), inset 0 1px 0 rgba(255,255,255,.96);
  --designer-cyan: #087da7;
  --designer-blue: #315fc0;
  --designer-purple: #7048b8;
  --designer-green: #087a4b;
  --designer-amber: #9b6400;
  --designer-red: #bd2945;
  --designer-shadow: 0 20px 52px rgba(46, 74, 105, .14);
  --green: #087a4b;
  --cyan: #087da7;
  --violet: #7048b8;
  --amber: #9b6400;
  --red: #bd2945;
  color: #122033 !important;
  background:
    radial-gradient(900px 620px at 3% -10%, rgba(73, 169, 226, .16), transparent 66%),
    radial-gradient(820px 600px at 100% 0%, rgba(135, 105, 214, .11), transparent 65%),
    linear-gradient(145deg, #f7f9fc 0%, #edf3f8 48%, #f8fafc 100%) !important;
  filter: none !important;
}
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(52, 92, 127, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 92, 127, .038) 1px, transparent 1px) !important;
  opacity: .72;
}
html[data-theme="light"] body::after { opacity: .025; mix-blend-mode: multiply; }
html[data-theme="light"] body,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] button { color-scheme: light; }

html[data-theme="light"] .topbar,
html[data-theme="light"] .console-nav,
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .ops-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .feature-kpi,
html[data-theme="light"] .kpi,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .metric-summary-card,
html[data-theme="light"] .card,
html[data-theme="light"] .world-side-card,
html[data-theme="light"] .world-event-overlay,
html[data-theme="light"] .world-hud-chip,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .metric-dashboard-head,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .status-event-panel,
html[data-theme="light"] .region-tile {
  border-color: rgba(37, 78, 116, .14) !important;
  color: #122033 !important;
  background: linear-gradient(148deg, rgba(255,255,255,.98), rgba(248,251,254,.92)) !important;
  box-shadow: 0 18px 48px rgba(48, 76, 107, .12), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .overview-card::before,
html[data-theme="light"] .ops-card::before,
html[data-theme="light"] .kpi::before,
html[data-theme="light"] .chart-card::before,
html[data-theme="light"] .metric-summary-card::before,
html[data-theme="light"] .world-side-card::before,
html[data-theme="light"] .region-tile::after,
html[data-theme="light"] .card::before {
  background: radial-gradient(420px 150px at 18% -12%, rgba(70, 164, 220, .10), transparent 64%), radial-gradient(360px 150px at 96% 4%, rgba(132, 93, 204, .07), transparent 66%);
  opacity: .55;
}

html[data-theme="light"] .login-screen {
  color: #122033 !important;
  background:
    radial-gradient(620px 440px at 22% 10%, rgba(69, 179, 255, .16), transparent 70%),
    radial-gradient(560px 420px at 82% 16%, rgba(183, 111, 255, .10), transparent 70%),
    linear-gradient(145deg, #f8fafc 0%, #eef4f9 48%, #ffffff 100%) !important;
}
html[data-theme="light"] .simple-login-card {
  border-color: rgba(37, 78, 116, .16) !important;
  color: #122033 !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 30px 90px rgba(46, 74, 105, .18), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .simple-login-brand strong,
html[data-theme="light"] .login-title,
html[data-theme="light"] .login-auth-state strong,
html[data-theme="light"] .login-google strong { color: #122033 !important; }
html[data-theme="light"] .login-sub,
html[data-theme="light"] .login-note,
html[data-theme="light"] .login-auth-state small,
html[data-theme="light"] .login-google small { color: #607389 !important; }

html[data-theme="light"] .console-nav-btn { color: #607389 !important; }
html[data-theme="light"] .console-nav-btn .nav-copy b,
html[data-theme="light"] .sidebar-brand-copy strong,
html[data-theme="light"] .sidebar-user-card strong,
html[data-theme="light"] .topbar-page strong,
html[data-theme="light"] .panel-heading span,
html[data-theme="light"] .view-title,
html[data-theme="light"] .feature-kpi strong,
html[data-theme="light"] .chart-value,
html[data-theme="light"] .metric-summary-value { color: #122033 !important; }
html[data-theme="light"] .console-nav-btn .nav-copy small,
html[data-theme="light"] .sidebar-section-label,
html[data-theme="light"] .topbar-page small,
html[data-theme="light"] .view-subtitle,
html[data-theme="light"] .panel-heading small,
html[data-theme="light"] .feature-kpi > span,
html[data-theme="light"] .feature-kpi > small,
html[data-theme="light"] .metric-summary-label,
html[data-theme="light"] .metric-summary-foot { color: #607389 !important; }
html[data-theme="light"] .console-nav-btn:hover { color: #164f70 !important; background: rgba(32, 125, 177, .07) !important; }
html[data-theme="light"] .console-nav-btn.active {
  color: #0c5f84 !important;
  border-color: rgba(8, 125, 167, .24) !important;
  background: linear-gradient(100deg, rgba(67, 169, 222, .16), rgba(103, 116, 209, .08) 64%, rgba(164, 116, 217, .06)) !important;
  box-shadow: 0 12px 28px rgba(40, 112, 154, .10), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .server-selector,
html[data-theme="light"] .topbar-icon-button,
html[data-theme="light"] .language-switch,
html[data-theme="light"] .admin-chip,
html[data-theme="light"] .logout-btn,
html[data-theme="light"] .live-pill,
html[data-theme="light"] .toolbar-action,
html[data-theme="light"] .filter,
html[data-theme="light"] .action-btn,
html[data-theme="light"] .world-map-control {
  border-color: rgba(37, 78, 116, .15) !important;
  color: #31475e !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 7px 20px rgba(48,76,107,.08) !important;
}
html[data-theme="light"] .language-option.active,
html[data-theme="light"] .filter.active { color: #075f83 !important; background: rgba(42, 146, 201, .13) !important; }

html[data-theme="light"] .feature-capability,
html[data-theme="light"] .feature-table-row,
html[data-theme="light"] .release-rollout-summary,
html[data-theme="light"] .rollout-target-row,
html[data-theme="light"] #fleet-rollout-node-list label,
html[data-theme="light"] .deployment-item,
html[data-theme="light"] .incident-item,
html[data-theme="light"] .channel-item,
html[data-theme="light"] .rule-item,
html[data-theme="light"] .alert-center-item,
html[data-theme="light"] .world-stat,
html[data-theme="light"] .world-ops-item,
html[data-theme="light"] .compact-summary .world-stat,
html[data-theme="light"] .overview-network-strip .world-ops-item {
  border-color: rgba(37, 78, 116, .12) !important;
  color: #25364b !important;
  background: rgba(246,249,252,.88) !important;
  box-shadow: none !important;
}
html[data-theme="light"] .central-main-stats > div,
html[data-theme="light"] .overview-session-summary > div,
html[data-theme="light"] .world-row {
  border-color: rgba(37, 78, 116, .12) !important;
  background: rgba(243,247,251,.92) !important;
}
html[data-theme="light"] .central-server-identity strong,
html[data-theme="light"] .central-main-stats strong,
html[data-theme="light"] .overview-session-summary strong,
html[data-theme="light"] .traffic-row strong,
html[data-theme="light"] .world-stat .v,
html[data-theme="light"] .world-row-title,
html[data-theme="light"] .world-row-value,
html[data-theme="light"] .world-hud-chip .value,
html[data-theme="light"] .map-stage-title span { color: #173047 !important; }
html[data-theme="light"] .central-main-stats small,
html[data-theme="light"] .overview-session-summary span,
html[data-theme="light"] .traffic-row span,
html[data-theme="light"] .world-stat .k,
html[data-theme="light"] .world-row-sub,
html[data-theme="light"] .world-hud-chip .label,
html[data-theme="light"] .map-stage-title small { color: #607389 !important; }
html[data-theme="light"] .traffic-row > i { background: rgba(55, 85, 112, .12) !important; }
html[data-theme="light"] .feature-table-row.header { color: #52677d !important; background: #edf3f8 !important; }
html[data-theme="light"] .active-release { background: rgba(8, 122, 75, .08) !important; }
html[data-theme="light"] .deployment-item strong,
html[data-theme="light"] .release-rollout-summary strong,
html[data-theme="light"] .rollout-target-row strong,
html[data-theme="light"] .incident-item strong,
html[data-theme="light"] .channel-item strong,
html[data-theme="light"] .rule-item strong,
html[data-theme="light"] .alert-center-item strong,
html[data-theme="light"] .feature-table-row strong,
html[data-theme="light"] .active-release strong,
html[data-theme="light"] .sidebar-system-state b,
html[data-theme="light"] .sidebar-user-card strong { color: #1a2b3f !important; }
html[data-theme="light"] .deployment-item small,
html[data-theme="light"] .release-rollout-summary small,
html[data-theme="light"] .incident-item small,
html[data-theme="light"] .channel-item small,
html[data-theme="light"] .rule-item small,
html[data-theme="light"] .alert-center-item small { color: #6c7f94 !important; }
html[data-theme="light"] .sidebar-system-state small,
html[data-theme="light"] .sidebar-user-card small { color: #607389 !important; }
html[data-theme="light"] .sidebar-system-state,
html[data-theme="light"] .sidebar-user-card { border-color: rgba(37, 78, 116, .12) !important; background: rgba(248,251,254,.86) !important; }
html[data-theme="light"] .table-actions button,
html[data-theme="light"] .deployment-item button,
html[data-theme="light"] .channel-item button,
html[data-theme="light"] .incident-item button,
html[data-theme="light"] .feature-actions button.ghost {
  border-color: rgba(37, 78, 116, .16) !important;
  color: #28445f !important;
  background: #ffffff !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .search input {
  border-color: rgba(37, 78, 116, .17) !important;
  color: #17283b !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(37, 78, 116, .05) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #91a0b0 !important; }
html[data-theme="light"] .management-dialog {
  border-color: rgba(37, 78, 116, .18) !important;
  color: #122033 !important;
  background: #ffffff !important;
  box-shadow: 0 28px 90px rgba(46,74,105,.22) !important;
}
html[data-theme="light"] .fleet-node-picker { border-color: rgba(37, 78, 116, .17) !important; }
html[data-theme="light"] .fleet-node-picker legend,
html[data-theme="light"] .management-help,
html[data-theme="light"] .rollout-target-value::before { color: #52677d !important; }
html[data-theme="light"] .management-dialog .panel-heading button { color: #28445f !important; }
html[data-theme="light"] .backup-detail-heading > div > span,
html[data-theme="light"] .backup-detail-value { color: #17283b !important; }
html[data-theme="light"] .backup-detail-heading small,
html[data-theme="light"] .backup-detail-label,
html[data-theme="light"] .backup-detail-message { color: #445c73 !important; }
html[data-theme="light"] .backup-detail-field,
html[data-theme="light"] .backup-detail-message {
  border-color: rgba(37, 78, 116, .14) !important;
  background: #f6f9fc !important;
}
html[data-theme="light"] .backup-detail-value.is-verified { color: #087b57 !important; }
html[data-theme="light"] .backup-detail-value.needs-review,
html[data-theme="light"] .backup-detail-message.is-error { color: #a14920 !important; }
html[data-theme="light"] .management-dialog::backdrop,
html[data-theme="light"] .modal-backdrop { background: rgba(47, 66, 86, .28) !important; }

html[data-theme="light"] .world-map-panel {
  border-color: rgba(37, 78, 116, .15) !important;
  background: linear-gradient(145deg, #fafdff 0%, #e9f3fa 52%, #f7fbfe 100%) !important;
  box-shadow: 0 20px 52px rgba(46,74,105,.13), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] .world-map-panel::before {
  background: linear-gradient(rgba(52,92,127,.04) 1px, transparent 1px), linear-gradient(90deg,rgba(52,92,127,.035) 1px,transparent 1px) !important;
}
html[data-theme="light"] .world-map-panel::after {
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(111,151,181,.08) 82%, rgba(71,105,132,.14) 100%) !important;
}
html[data-theme="light"] .map-stage-title,
html[data-theme="light"] .map-legend,
html[data-theme="light"] .world-map-help { color: #415a71 !important; }
html[data-theme="light"] .world-map-canvas { filter: none; }

html[data-theme="light"] .chart-canvas,
html[data-theme="light"] .log-pre,
html[data-theme="light"] .chat-pre,
html[data-theme="light"] .action-queue-list,
html[data-theme="light"] .world-event-list,
html[data-theme="light"] .world-list {
  color: #25364b !important;
  background-color: rgba(247,250,252,.72) !important;
}
html[data-theme="light"] * { scrollbar-color: rgba(91, 118, 145, .40) rgba(226, 234, 241, .72); }
html[data-theme="light"] *::-webkit-scrollbar-track { background: rgba(226, 234, 241, .72); }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(91, 118, 145, .38); border-color: rgba(226, 234, 241, .72); }
[data-permission-hidden="true"] {
  display: none !important;
}

/* ===== 운영 관리 화면 가독성 기준 =====
   지도 중심 Overview의 고밀도 HUD는 유지하되, 운영자가 읽고 판단하는
   상태·세션·지표·백업·릴리즈·알림·제어 화면은 12px 미만 보조문을 사용하지 않습니다. */
:is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations) {
  --operations-readable-caption: 12px;
  --operations-readable-body: 13px;
  --operations-readable-title: 15px;
  font-size: var(--operations-readable-body);
  line-height: 1.5;
}

:is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations) .view-subtitle,
:is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations) .panel-heading small,
:is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations) .side-section-head .meta {
  font-size: var(--operations-readable-caption) !important;
  line-height: 1.45 !important;
}

:is(#view-backups, #view-releases, #view-alerts, #view-operations) .panel-heading > span,
#view-operations .side-section-head .title {
  font-size: var(--operations-readable-title) !important;
  line-height: 1.3 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

:is(#view-backups, #view-releases, #view-alerts) .feature-capability {
  padding: 12px 14px;
  font-size: var(--operations-readable-body) !important;
  line-height: 1.55 !important;
}

:is(#view-backups, #view-releases, #view-alerts) .feature-kpi > span {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  letter-spacing: .07em !important;
}

:is(#view-backups, #view-releases, #view-alerts) .feature-kpi > small {
  font-size: var(--operations-readable-caption) !important;
  line-height: 1.45 !important;
}

:is(#view-backups, #view-releases) .feature-table-row {
  min-height: 62px;
  padding: 9px 12px;
  font-size: var(--operations-readable-body) !important;
  line-height: 1.45 !important;
}

:is(#view-backups, #view-releases) .feature-table-row.header {
  min-height: 44px;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  letter-spacing: .04em;
}

:is(#view-backups, #view-releases) .feature-table-row strong {
  color: #f1f7fd;
  font-size: var(--operations-readable-body) !important;
  font-weight: 760 !important;
  line-height: 1.4 !important;
  overflow-wrap: anywhere;
}

:is(#view-backups, #view-releases) .table-actions button,
:is(#view-alerts, #view-operations) button,
.management-dialog button {
  min-height: 34px;
  font-size: var(--operations-readable-caption) !important;
  line-height: 1.2 !important;
}

:is(#view-releases, #view-alerts) :is(.deployment-item, .incident-item, .channel-item, .rule-item, .alert-center-item) strong,
#view-operations :is(.control-name, .announcement-title, .audit-action) {
  font-size: var(--operations-readable-body) !important;
  line-height: 1.4 !important;
}

:is(#view-releases, #view-alerts) :is(.deployment-item, .incident-item, .channel-item, .rule-item, .alert-center-item) small,
#view-alerts .alert-center-copy p,
#view-operations :is(.control-meta, .announcement-message, .announcement-meta, .audit-head, .audit-message, .announcement-empty, .action-queue-empty) {
  font-size: var(--operations-readable-caption) !important;
  line-height: 1.5 !important;
}

:is(#view-releases, #view-alerts) :is(.deployment-item, .incident-item, .channel-item, .rule-item, .alert-center-item),
#view-operations :is(.control-row, .announcement-item, .audit-item) {
  padding: 12px 13px;
}

:is(#view-releases, #view-alerts) :is(.release-rollout-summary, .rollout-target-row),
.management-dialog :is(label, legend, .management-help, input, select, textarea) {
  font-size: var(--operations-readable-body) !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"] :is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations)
  :is(.view-subtitle, .panel-heading small, .feature-kpi > span, .feature-kpi > small, .feature-table-row, .deployment-item small, .incident-item small, .channel-item small, .rule-item small, .alert-center-copy p, .control-meta, .announcement-message, .announcement-meta, .audit-head, .audit-message) {
  color: #a9bed1 !important;
}

html[data-theme="light"] :is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations)
  :is(.view-subtitle, .panel-heading small, .feature-kpi > span, .feature-kpi > small, .feature-table-row, .deployment-item small, .incident-item small, .channel-item small, .rule-item small, .alert-center-copy p, .control-meta, .announcement-message, .announcement-meta, .audit-head, .audit-message) {
  color: #445c73 !important;
}

@media (max-width: 620px) {
  :is(#view-status, #view-sessions, #view-metrics, #view-backups, #view-releases, #view-alerts, #view-operations) {
    --operations-readable-caption: 12px;
    --operations-readable-body: 13px;
    --operations-readable-title: 15px;
  }
}

/* ===== 관리자 보안·2인 승인 운영 패널 ===== */
#view-operations .operations-grid {
  grid-template-areas:
    "control notice audit"
    "security security security";
}
#view-operations .ops-security-card {
  grid-area: security;
  min-height: 0;
}
.admin-security-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.admin-security-summary span {
  padding: 7px 10px;
  border: 1px solid rgba(137, 192, 236, .13);
  border-radius: 999px;
  color: #a9bed1;
  background: rgba(2, 8, 16, .28);
  font: 700 var(--operations-readable-caption)/1.2 var(--mono);
}
.admin-security-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-security-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 12px;
  background: rgba(2, 8, 16, .24);
}
.admin-security-section.admin-approval-section { grid-column: 1 / -1; }
.admin-security-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 11px;
}
.admin-security-heading strong {
  color: #edf6ff;
  font: 760 var(--operations-readable-body)/1.35 var(--sans);
}
.admin-security-heading small {
  color: #8fa7bb;
  font: 600 var(--operations-readable-caption)/1.45 var(--sans);
}
.admin-role-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, .55fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-role-form input,
.admin-role-form select {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(137, 192, 236, .16);
  border-radius: 8px;
  color: #e4eef8;
  background: rgba(5, 15, 27, .78);
  font: 650 var(--operations-readable-caption)/1.3 var(--mono);
}
.admin-security-list { display: grid; gap: 8px; }
.admin-security-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(137, 192, 236, .10);
  border-radius: 9px;
  background: rgba(5, 15, 27, .48);
}
.admin-security-row-copy { min-width: 0; display: grid; gap: 5px; }
.admin-security-row-copy strong {
  overflow-wrap: anywhere;
  color: #dfeaf5;
  font: 720 var(--operations-readable-body)/1.35 var(--sans);
}
.admin-security-row-copy small {
  overflow-wrap: anywhere;
  color: #8fa7bb;
  font: 600 var(--operations-readable-caption)/1.45 var(--mono);
}
.admin-approval-review-summary {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border-left: 2px solid rgba(89, 218, 255, .42);
  border-radius: 0 6px 6px 0;
  white-space: pre-wrap;
  color: #b9cfdf !important;
  background: rgba(28, 103, 137, .10);
  font-family: var(--sans) !important;
  font-size: var(--operations-readable-body) !important;
}
.admin-approval-review-summary b { color: #75dfff; font-size: var(--operations-readable-caption); }
.admin-security-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-security-row-actions button {
  padding: 6px 10px;
  border: 1px solid rgba(137, 192, 236, .16);
  border-radius: 7px;
  color: #bad0e2;
  background: rgba(10, 26, 41, .72);
}
.admin-security-row-actions button.is-danger { color: #ff9bab; border-color: rgba(255, 98, 122, .25); }
.admin-security-row-actions button.is-approve { color: #76f2b5; border-color: rgba(85, 231, 160, .27); }
.two-person-approval-dialog { width: min(640px, calc(100vw - 28px)); }
.approval-request-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.approval-request-summary > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(137, 192, 236, .11);
  border-radius: 9px;
  background: rgba(2, 8, 16, .28);
}
.approval-request-summary > div.is-wide { grid-column: 1 / -1; }
.approval-request-summary > div[hidden] { display: none; }
.approval-request-summary span { color: #8fa7bb; font: 650 12px/1.35 var(--sans); }
.approval-request-summary strong { overflow-wrap: anywhere; color: #e6f1fb; font: 700 13px/1.5 var(--mono); }
.approval-request-summary .approval-review-summary strong {
  white-space: pre-wrap;
  font-family: var(--sans);
}

html[data-theme="light"] :is(.admin-security-section, .admin-security-row, .approval-request-summary > div) {
  border-color: rgba(35, 67, 99, .13) !important;
  background: #f7fafc !important;
}
html[data-theme="light"] .admin-security-summary span {
  border-color: rgba(35, 67, 99, .13);
  color: #405970;
  background: #f3f7fa;
}
html[data-theme="light"] :is(.admin-security-heading strong, .admin-security-row-copy strong, .approval-request-summary strong) { color: #1e344a !important; }
html[data-theme="light"] :is(.admin-security-heading small, .admin-security-row-copy small, .approval-request-summary span) { color: #526a80 !important; }
html[data-theme="light"] .admin-approval-review-summary { color: #29465f !important; background: #edf7fb; }
html[data-theme="light"] .admin-approval-review-summary b { color: #087aa9; }
html[data-theme="light"] .admin-role-form :is(input, select) { color: #20384f; border-color: rgba(35, 67, 99, .16); background: #fff; }

@media (max-width: 1120px) {
  #view-operations .operations-grid {
    grid-template-areas: "control" "security" "notice" "audit";
  }
}
@media (max-width: 760px) {
  .admin-security-layout { grid-template-columns: 1fr; }
  .admin-security-section.admin-approval-section { grid-column: auto; }
  .admin-role-form { grid-template-columns: 1fr; }
  .admin-security-row { grid-template-columns: 1fr; }
  .admin-security-row-actions { justify-content: stretch; }
  .admin-security-row-actions button { flex: 1 1 auto; }
  .approval-request-summary { grid-template-columns: 1fr; }
  .approval-request-summary > div.is-wide { grid-column: auto; }
}

/* ===== 라이트 테마 잔여 다크 컨테이너 보정 =====
   다크 전용 배경이 남아 어두운 글자와 겹쳐 판독이 불가능했던 컴포넌트를 밝은 표면으로 통일합니다. */
html[data-theme="light"] :is(.auth-line, .synthetic-field, .control-row, .audit-item, .action-queue-item, .announcement-item) {
  border-color: rgba(35, 67, 99, .13) !important;
  background: #f7fafc !important;
}
html[data-theme="light"] :is(.event-tabs, .metric-range, .filters, .control-status) {
  border-color: rgba(35, 67, 99, .13) !important;
  background: #eef3f8 !important;
}
html[data-theme="light"] :is(.synthetic-empty, .action-queue-empty, .announcement-empty) {
  color: #48607a !important;
  background: #f1f5f9 !important;
}
html[data-theme="light"] .synthetic-step {
  border-color: rgba(35, 67, 99, .13) !important;
  background: #f1f5f9 !important;
}
html[data-theme="light"] .synthetic-step.bad {
  border-color: rgba(176, 32, 58, .22) !important;
  background: #fdf0f3 !important;
}
html[data-theme="light"] .synthetic-step.bad :is(span, b, small) { color: #a4162f !important; }
html[data-theme="light"] .auth-line.bad { border-color: rgba(176, 32, 58, .2) !important; background: #fdf1f4 !important; }
html[data-theme="light"] .auth-line.ok { border-color: rgba(9, 122, 88, .18) !important; }
html[data-theme="light"] .control-row.drained { border-color: rgba(184, 122, 12, .24) !important; background: #fdf7ec !important; }
html[data-theme="light"] :is(.control-row, .audit-item, .action-queue-item, .auth-line, .synthetic-field) :is(strong, b, .label, .status, .k, .v) {
  color: #1e344a !important;
}
html[data-theme="light"] .control-status { color: #3d5670 !important; }

/* ===== 좁은 화면 레이아웃 보정 =====
   .status-dashboard 2열 규칙이 조건 없이 선언되어 있어 모바일 폭에서 본문 열이 0px로 짜부라졌습니다.
   좁은 폭에서는 단일 열로 내리고, flex 자식이 무한 축소되지 않도록 최소 폭을 되돌립니다. */
@media (max-width: 900px) {
  .status-dashboard,
  .overview-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .status-event-panel,
  .overview-left-column,
  .overview-right-column {
    position: static !important;
    min-height: auto !important;
    width: auto !important;
  }
  .status-main,
  .status-card-grid,
  .kpi-row {
    min-width: 0;
    width: 100%;
  }
  .status-card-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .synthetic-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 620px) {
  .kpi-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* flex 행에서 라벨과 상태값이 한 글자 단위로 줄바꿈되지 않게 최소 폭을 보장합니다. */
.auth-line,
.world-row,
.world-ops-item {
  flex-wrap: wrap;
  min-width: 0;
}
.auth-line .label,
.world-row .label,
.world-ops-item .label {
  flex: 1 1 auto;
  min-width: 6em;
  overflow-wrap: anywhere;
}
.auth-line .status,
.world-row .status,
.world-ops-item .status {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}
.synthetic-field { min-width: 0; }
.synthetic-field strong,
.synthetic-field span { overflow-wrap: anywhere; }
.control-name,
.audit-head,
.action-queue-head { overflow-wrap: anywhere; }

/* ===== 키보드 포커스 가시성 =====
   기존 --focus-ring 알파(0.16)는 다크 배경에서 식별이 어려워 상향하고,
   outline:none 만 걸려 있던 컨트롤에도 공통 표시를 적용합니다. */
:root {
  --focus-ring: 0 0 0 3px rgba(99, 230, 255, .55);
  --focus-ring-outline: 2px solid #63e6ff;
}
html[data-theme="light"] {
  --focus-ring: 0 0 0 3px rgba(8, 122, 167, .45);
  --focus-ring-outline: 2px solid #0b6f95;
}
#fleet-app :is(button, a[href], input, select, textarea, [tabindex]):focus-visible,
.login-screen :is(button, a[href], input, select, textarea):focus-visible,
.management-dialog :is(button, input, select, textarea):focus-visible {
  outline: var(--focus-ring-outline) !important;
  outline-offset: 2px !important;
  box-shadow: var(--focus-ring) !important;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 4000;
  padding: 10px 14px;
  border: 1px solid #63e6ff;
  border-radius: 8px;
  background: #071018;
  color: #e6edf3;
  font: 700 13px/1.2 var(--sans);
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}
html[data-theme="light"] .skip-link {
  background: #ffffff;
  border-color: #0b6f95;
  color: #12283b;
}

/* ===== 저대비 캡션 보정 =====
   운영 화면에서 값 판독이 필요한 보조 텍스트의 대비를 WCAG AA 쪽으로 올립니다. */
html[data-theme="dark"] :is(.kpi-foot, .join-flow-step-meta, .synthetic-field span, .world-map-help, .world-hud-chip .label) {
  color: #aebfd0 !important;
}
html[data-theme="light"] :is(.kpi-foot, .join-flow-step-meta, .synthetic-field span, .world-map-help, .world-hud-chip .label) {
  color: #3f5670 !important;
}
.world-map-help { font-size: 10px !important; }
.compact-summary .world-stat .k { font-size: 9.5px !important; }
.language-option { color: #b9cbdb; }
.language-option.active { color: #04212c; }
html[data-theme="light"] .language-option { color: #3d5670; }
html[data-theme="light"] .language-option.active { color: #04212c; }
.sidebar-avatar { color: #04212c; }

/* 활성 내비게이션 항목을 색 외에 굵기로도 구분합니다. */
.console-nav-btn[aria-current="page"] b { font-weight: 800; }

/* ===== 보조 텍스트 대비 토큰 상향 =====
   --ink-3(#4f5a67)이 패널 배경(rgb(15,28,47)) 위에서 대비 2.44:1로 판독이 어려웠습니다.
   구분자·보조 수치·캡션이 모두 이 토큰을 쓰므로 토큰 자체를 AA 수준으로 올립니다. */
:root {
  --ink-2: #93a2b2;
  --ink-3: #8496a8;
  --ink-4: #6c7f92;
}
html[data-theme="light"] {
  --ink-2: #48607a;
  --ink-3: #4f6478;
  --ink-4: #5b6f83;
}
.sidebar-user-card small { color: #9db0c2 !important; }
html[data-theme="light"] .sidebar-user-card small { color: #4a6178 !important; }
.kpi-value .of { color: #9aabbc !important; }
html[data-theme="light"] .kpi-value .of { color: #47607a !important; }
.action-queue-age,
.region-info .meta .sep,
.audit-head small,
.control-meta .sep { color: #94a6b8 !important; }
html[data-theme="light"] :is(.action-queue-age, .region-info .meta .sep, .audit-head small, .control-meta .sep) { color: #4a6077 !important; }

/* 사이드바 메뉴 부라벨과 배지 텍스트 대비 보정 */
.console-nav-btn small,
.console-nav-btn span { color: #96a9bb !important; }
.console-nav-btn.active small { color: #cfe6f4 !important; }
html[data-theme="light"] :is(.console-nav-btn small, .console-nav-btn span) { color: #4c6178 !important; }
html[data-theme="light"] .console-nav-btn.active small { color: #24425c !important; }

/* ===== 잔여 저대비 캡션 및 초소형 글자 보정 ===== */
.sidebar-status small,
.sidebar-status span,
.panel-heading small,
.world-side-card .panel-heading small,
.backup-ring-legend span,
.backup-ring-legend small { color: #9db0c2 !important; }
html[data-theme="light"] :is(.sidebar-status small, .sidebar-status span, .panel-heading small, .backup-ring-legend span, .backup-ring-legend small) {
  color: #47607a !important;
}

/* 7~8px 글자는 운영 화면에서 판독이 어려우므로 최소 10px 이상으로 올립니다. */
.backup-ring-legend :is(span, small, b),
.backup-summary-caption,
.world-stat .k,
.compact-summary .world-stat .k { font-size: 10px !important; }
.toolbar-action { font-size: 11px !important; }
.sidebar-user-card small { font-size: 9.5px !important; }

/* 백업 성공률 링을 실제 값에 반응하는 게이지로 동작시킵니다.
   값과 색은 JS가 --backup-ring-value / --backup-ring-color로 주입하며,
   캐스케이드 우선순위를 확보하기 위해 파일 말미에 둡니다. */
.backup-health-ring {
  position: relative;
  --backup-ring-value: 0%;
  --backup-ring-color: var(--designer-green);
  background: conic-gradient(var(--backup-ring-color) 0 var(--backup-ring-value), rgba(255,255,255,.055) var(--backup-ring-value) 100%);
  transition: --backup-ring-value .45s ease, box-shadow .3s ease;
}
.backup-health-ring[data-level="warn"] { --backup-ring-color: var(--designer-amber); box-shadow: 0 0 34px rgba(255,200,102,.14); }
.backup-health-ring[data-level="critical"] { --backup-ring-color: #ff7894; box-shadow: 0 0 34px rgba(255,120,148,.16); }

/* 집계할 작업이 없으면 성공률을 0%로 오해하지 않도록 중립 트랙만 보여줍니다. */
.backup-health-ring[data-level="nodata"] {
  --backup-ring-value: 0%;
  background: conic-gradient(rgba(255,255,255,.055) 0 100%);
  box-shadow: none;
}

@property --backup-ring-value {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@media (prefers-reduced-motion: reduce) {
  .backup-health-ring { transition: none; }
}

html[data-theme="light"] .backup-health-ring {
  background: conic-gradient(var(--backup-ring-color) 0 var(--backup-ring-value), rgba(12,22,36,.10) var(--backup-ring-value) 100%);
}
html[data-theme="light"] .backup-health-ring[data-level="nodata"] { background: conic-gradient(rgba(12,22,36,.10) 0 100%); }
html[data-theme="light"] .backup-health-ring::before { background: #ffffff; }
html[data-theme="light"] .backup-health-ring strong { color: #14212f !important; }

/* 목록 페이저: 표시 개수 안내와 더보기 버튼.
   감사 로그와 배포 이력이 고정 상한에서 잘리던 문제를 단계적 확장으로 대체합니다. */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 11px;
  border-top: 1px solid rgba(137,192,236,.10);
}
.list-pager[hidden] { display: none !important; }
.list-pager-count {
  color: #9db0c2;
  font: 650 10px/1 var(--mono);
}
.list-pager-more {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(137,192,236,.18);
  border-radius: 8px;
  color: #cfe2f2;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font: 650 10.5px/1 var(--sans);
}
.list-pager-more:hover {
  border-color: rgba(34,211,238,.42);
  background: rgba(34,211,238,.10);
}
.list-pager-more:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.list-pager-more[hidden] { display: none !important; }

html[data-theme="light"] .list-pager { border-top-color: rgba(12,22,36,.12); }
html[data-theme="light"] .list-pager-count { color: #47607a !important; }
html[data-theme="light"] .list-pager-more {
  border-color: rgba(12,22,36,.18);
  color: #1d3a52;
  background: rgba(12,22,36,.04);
}

@media (max-width: 620px) {
  .list-pager { flex-direction: column; align-items: stretch; }
  .list-pager-more { width: 100%; }
}

/* 페이저로 목록을 펼치면 카드가 끝없이 길어져 더보기 버튼이 화면 밖으로 밀려납니다.
   목록 자체에 스크롤을 주어 페이저가 항상 카드 안에 보이도록 합니다. */
.deployment-list {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ops-audit-card .audit-list,
.audit-list {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 스크롤 영역이 잘린 것처럼 보이지 않게 페이저를 카드 하단에 고정합니다. */
.list-pager {
  position: sticky;
  bottom: 0;
  background: rgba(11,23,39,.92);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .list-pager { background: rgba(255,255,255,.94); }

@media (max-width: 620px) {
  .deployment-list,
  .ops-audit-card .audit-list,
  .audit-list { max-height: 320px; }
}