/* ============================================================
   OTTOMOS design system — single source of truth for all surfaces.
   Served at https://ottomos.com/assets/ottmos.css (landing nginx).
   Consumed by: landing (ottomos.com) + dashboard (ottomos.com/dashboard).

   Layered command-center system:
     LAYER 0  — aurora mesh + drifting node field + faint terminal log (breathing base)
     LAYER 1  — dimensional central brain/radar hub (tilt, specular, depth-graded rings)
     LAYER 2  — floating frosted-glass panels (tab bar, cards, command bar)

   Edit here; a change propagates to every surface.
   ============================================================ */

  :root {
    --bg: #050508;
    --ink: rgba(255,255,255,0.92);
    --ink-1: var(--ink);
    --ink-2: rgba(255,255,255,0.55);
    --ink-3: rgba(255,255,255,0.32);
    --glass: rgba(255,255,255,0.04);
    --glass-hi: rgba(255,255,255,0.08);
    --hairline: rgba(255,255,255,0.09);

    --cyan: #5eead4;
    --indigo: #818cf8;
    --violet: #c084fc;
    --amber: #fbbf24;
    --red: #f87171;

    --accent: #5eead4;
    --irid: linear-gradient(120deg, #5eead4 0%, #818cf8 50%, #c084fc 100%);

    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
    --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

    --rad: 18px;
    --radius: var(--rad);

    /* spacing scale */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 22px; --sp-6: 28px; --sp-7: 40px; --sp-8: 48px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft: cubic-bezier(0.22, 1.4, 0.36, 1);

    --glass-blur: 26px;
    --glass-sat: 170%;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { height: 100%; }
  body {
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    letter-spacing: -0.01em;
  }

  /* ── LAYER 0 · deep breathing base ── */
  .bg-glow {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(1200px 800px at 12% -10%, rgba(26,26,62,0.55), transparent 60%),
      radial-gradient(1000px 700px at 88% 110%, rgba(58,26,80,0.45), transparent 60%),
      radial-gradient(700px 500px at 50% 50%, rgba(129,140,248,0.05), transparent 70%),
      var(--bg);
    animation: breathe 16s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
  }

  /* ── LAYER 0 · aurora mesh (indigo→violet→cyan drift through deep water) ── */
  .aurora {
    position: fixed; inset: -18%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(42% 42% at 22% 30%, rgba(94,234,212,0.11), transparent 62%),
      radial-gradient(46% 46% at 74% 24%, rgba(129,140,248,0.15), transparent 62%),
      radial-gradient(52% 52% at 56% 76%, rgba(192,132,252,0.13), transparent 64%),
      radial-gradient(36% 36% at 30% 82%, rgba(94,234,212,0.07), transparent 60%),
      radial-gradient(30% 30% at 86% 70%, rgba(129,140,248,0.08), transparent 60%);
    filter: blur(42px) saturate(130%);
    animation: aurora-drift 34s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes aurora-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(3.5%, -2.5%, 0) rotate(4deg) scale(1.07); }
    100% { transform: translate3d(-3%, 2.5%, 0) rotate(-4deg) scale(1.02); }
  }

  #nodefield {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    width: 100%; height: 100%;
    opacity: 1;
  }

  /* faint terminal-log backdrop text (layer 0) */
  .term-log-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; user-select: none;
    overflow: hidden;
    font-family: var(--mono); font-size: 11px; line-height: 2.1;
    color: rgba(255,255,255,0.6);
    opacity: 0.035;
    white-space: pre; letter-spacing: 0.02em;
  }

  .shell {
    position: relative; z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 132px;
  }

  /* ── LAYER 2 · premium frosted glass ── */
  .glass {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.08);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.08);
    border-radius: var(--rad);
    box-shadow:
      0 24px 70px -24px rgba(0,0,0,0.6),
      inset 0 1px 0 0 rgba(255,255,255,0.07);
    transition: transform 0.6s var(--spring-soft), background 0.5s ease, box-shadow 0.5s ease;
  }
  .glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.30) 0%,
      rgba(255,255,255,0.08) 26%,
      rgba(255,255,255,0.02) 72%,
      rgba(255,255,255,0.08) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  /* faint iridescent refraction at the card edge */
  .glass::after {
    content: "";
    position: absolute; inset: 1px;
    border-radius: calc(var(--rad) - 1px);
    padding: 1px;
    background: linear-gradient(135deg, rgba(94,234,212,0.20), rgba(129,140,248,0.10) 40%, transparent 60%, rgba(192,132,252,0.16));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.55;
    pointer-events: none;
  }
  .glass.lift:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045));
    box-shadow:
      0 30px 80px -24px rgba(0,0,0,0.62),
      0 0 46px -18px rgba(129,140,248,0.30),
      inset 0 1px 0 0 rgba(255,255,255,0.09);
  }

  /* ── Header ── */
  header {
    padding: 48px 0 28px;
    display: flex; flex-direction: column; gap: 26px;
  }
  .topline {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  }
  .status-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border-radius: 999px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--hairline);
  }
  .orb {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--cyan);
    box-shadow: 0 0 12px 2px var(--cyan);
    animation: breathe-orb 3.4s ease-in-out infinite;
  }
  body[data-status="DEGRADED"] .orb { background: var(--amber); box-shadow: 0 0 12px 2px var(--amber); }
  body[data-status="ACTION"]   .orb { background: var(--violet); box-shadow: 0 0 14px 3px var(--violet); animation: breathe-orb 1.4s ease-in-out infinite; }
  @keyframes breathe-orb {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.72); opacity: 0.55; }
  }
  .status-label {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-2);
  }
  .topline .spacer { flex: 1; }
  .clock {
    font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .clock .tz { color: var(--ink-3); font-weight: 400; font-size: 12px; }
  .refresh {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── Tab bar (command-center navigation) ── */
  .tabs {
    position: relative;
    display: flex; align-items: center; gap: 4px;
    width: 100%;
    padding: 5px;
    background: rgba(255,255,255,0.035);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border: none; background: none; cursor: pointer;
    font-family: var(--sans); font-size: 12.5px; font-weight: 550; letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-radius: 11px;
    white-space: nowrap;
    transition: color 0.3s ease, background 0.4s var(--spring-soft), box-shadow 0.4s var(--spring-soft), transform 0.3s var(--spring);
  }
  .tab:hover { color: var(--ink-2); }
  .tab:active { transform: scale(0.97); }
  .tab.active {
    color: var(--ink);
    background: linear-gradient(120deg, rgba(94,234,212,0.14), rgba(129,140,248,0.17), rgba(192,132,252,0.14));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.11), 0 6px 20px -8px rgba(129,140,248,0.55);
  }
  .tab-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
    border-radius: 999px;
    color: var(--ink-2);
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--hairline);
    transition: all 0.35s var(--spring);
  }
  .tab.active .tab-badge { color: var(--ink); }
  .tab-badge.zero { opacity: 0.32; }
  .tab-badge.live {
    color: #050508; background: var(--irid); border-color: transparent;
    animation: badge-pulse 2.6s ease-in-out infinite;
  }
  @keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(129,140,248,0.45); }
    50% { box-shadow: 0 0 0 6px rgba(129,140,248,0); }
  }

  /* ── Views (spring slide/fade) ── */
  .view { display: none; }
  .view.active { display: block; animation: viewin 0.55s var(--spring-soft); }
  @keyframes viewin {
    from { opacity: 0; transform: translateY(12px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ── Hero / status word ── */
  .hero { text-align: left; padding: 40px 0 16px; }
  .hero .kicker {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 20px;
  }
  .statusword {
    font-size: clamp(64px, 14vw, 128px);
    font-weight: 300; line-height: 0.95;
    letter-spacing: -0.04em; text-transform: uppercase;
    background: var(--irid);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 34px rgba(129,140,248,0.28));
    text-align: center;
  }
  body[data-status="NOMINAL"]  .statusword { filter: drop-shadow(0 0 30px rgba(94,234,212,0.30)); }
  body[data-status="DEGRADED"] .statusword { filter: drop-shadow(0 0 30px rgba(251,191,36,0.32)); }
  body[data-status="ACTION"]   .statusword {
    filter: drop-shadow(0 0 30px rgba(192,132,252,0.5));
    animation: actionpulse 1.8s ease-in-out infinite;
  }
  @keyframes actionpulse {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(192,132,252,0.45)); }
    50% { filter: drop-shadow(0 0 46px rgba(192,132,252,0.75)); }
  }
  .hero .quiet {
    margin-top: 22px; font-size: 16px; color: var(--ink-2); font-weight: 300;
  }

  /* ── LAYER 1 · central brain / radar hub (dimensional) ── */
  .brain-stage {
    position: relative;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    perspective: 1400px;
    padding: 8px 0;
  }
  .radar-wrap {
    position: relative; z-index: 1;
    width: min(48vh, 74vw, 420px); aspect-ratio: 1 / 1;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(7deg);
    will-change: transform;
  }
  /* specular sheen catching light across the top of the hub */
  .radar-wrap::before {
    content: "";
    position: absolute; inset: 0; z-index: 3; border-radius: 50%;
    background: radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,0.10) 0%, transparent 46%);
    pointer-events: none;
  }
  .radar-bg, .radar-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
  .radar-bg { pointer-events: none; }
  .sweep {
    position: absolute; inset: 0; z-index: 1; border-radius: 50%;
    background: conic-gradient(from 0deg,
      rgba(94,234,212,0) 0deg,
      rgba(94,234,212,0) 306deg,
      rgba(94,234,212,0.22) 356deg,
      rgba(129,140,248,0.07) 360deg);
    -webkit-mask: radial-gradient(circle at center, #000 0, #000 91%, transparent 95%);
    mask: radial-gradient(circle at center, #000 0, #000 91%, transparent 95%);
    animation: sweep 32s linear infinite;
    pointer-events: none;
  }
  @keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .core-glow {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 44%; height: 44%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129,140,248,0.30) 0%, rgba(129,140,248,0.08) 45%, transparent 70%);
    animation: corebreathe 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes corebreathe {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  }
  .radar-nodes { z-index: 2; }
  .radar-nodes .link { stroke: #818cf8; stroke-opacity: 0.14; stroke-width: 1; }
  .radar-nodes .node { cursor: pointer; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
  .radar-nodes .node:hover { transform: scale(1.22); }
  .radar-nodes .lbl {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em;
    fill: var(--ink-2);
    paint-order: stroke; stroke: #050508; stroke-width: 3px; stroke-linejoin: round;
  }
  .radar-nodes .node.down .lbl { fill: var(--amber); }
  .radar-nodes .node.semantic .lbl { font-weight: 600; }
  .radar-nodes .node.king .lbl { fill: var(--violet); stroke: #050508; }
  .radar-nodes .node.external .lbl { fill: var(--indigo); stroke: #050508; }

  .brain-statusword {
    margin-top: 20px; text-align: center;
    font-size: clamp(34px, 7vw, 56px);
    font-weight: 300; line-height: 1;
    letter-spacing: -0.03em; text-transform: uppercase;
    background: var(--irid);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 26px rgba(129,140,248,0.28));
  }
  .brain-quiet {
    margin-top: 10px; text-align: center;
    font-size: 14px; color: var(--ink-2); font-weight: 300;
  }
  .glance-hero { position: relative; padding: 14px 0 8px; }
  .glance-hero .statusword { font-size: clamp(40px, 11vw, 84px); }
  .glance-hero .quiet {
    margin-top: 18px; font-size: 15px; color: var(--ink-2); font-weight: 300; text-align: center;
  }
  .term-log {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
    pointer-events: none; user-select: none;
    font-family: var(--mono); font-size: 11px; line-height: 2;
    color: rgba(255,255,255,0.6);
    opacity: 0.05;
    white-space: pre;
    letter-spacing: 0.02em;
  }

  .node-detail {
    position: fixed; z-index: 30;
    min-width: 210px; max-width: 270px;
    padding: 12px 14px;
    background: rgba(12,12,20,0.94);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: 0 18px 50px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03);
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  }
  .node-detail .nd-name { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
  .node-detail .nd-img { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; word-break: break-all; }
  .node-detail .nd-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  .node-detail .nd-status {
    display: inline-block; margin-top: 9px; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--hairline);
  }
  .node-detail .nd-status.up { color: var(--cyan); border-color: rgba(94,234,212,0.4); }
  .node-detail .nd-status.down { color: var(--amber); border-color: rgba(251,191,36,0.4); }
  .node-detail .nd-status.semantic { color: var(--indigo); border-color: rgba(129,140,248,0.4); }
  @media (max-width: 640px) {
    .glance-hero .statusword { font-size: clamp(34px, 15vw, 60px); }
    .radar-wrap { width: min(92vw, 380px); }
  }

  /* ── Kicker + panel header (shared) ── */
  .kicker {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .panel-head {
    display: flex; align-items: center; gap: 14px;
    padding: 0 0 8px;
  }
  .panel-head .z-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .panel-head .z-count {
    font-family: var(--mono); font-size: 12px; color: var(--ink-3);
    background: rgba(255,255,255,0.05); border: 1px solid var(--hairline);
    padding: 2px 9px; border-radius: 999px;
  }

  /* ── Hero gate card ── */
  .herogate { margin-top: 30px; padding: 22px 24px; }
  .herogate .gate-title { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
  .herogate .gate-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
  .btn-primary {
    margin-top: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    border: none; cursor: pointer;
    font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
    color: #050508;
    background: var(--irid);
    border-radius: 12px; padding: 12px 22px;
    box-shadow: 0 10px 30px -10px rgba(129,140,248,0.6);
    transition: transform 0.25s var(--spring), box-shadow 0.3s ease, filter 0.3s ease;
  }
  .btn-primary:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); box-shadow: 0 14px 40px -10px rgba(129,140,248,0.78); }
  .btn-primary:active { transform: scale(0.96); }

  /* ── Tab view panels (LAYER 2 floating glass) ── */
  .tab-panel {
    position: relative; z-index: 1;
    display: grid; gap: 16px;
    height: 100%; overflow: hidden;
  }
  .tab-panel .glass { padding: 20px 22px; }

  .grid-cards {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-content: start;
  }
  .fleet-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    transition: transform 0.45s var(--spring), background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .fleet-card:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,0.055);
    border-color: rgba(129,140,248,0.3);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6), 0 0 30px -14px rgba(129,140,248,0.4);
  }
  .fleet-card .fc-top { display: flex; align-items: center; gap: 10px; }
  .fleet-card .fc-name { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fleet-card .fc-img { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fleet-card .fc-state {
    align-self: flex-start; margin-left: auto;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 6px; border: 1px solid var(--hairline);
  }
  .fleet-card .fc-state.up { color: var(--cyan); border-color: rgba(94,234,212,0.35); }
  .fleet-card .fc-state.down { color: #f87171; border-color: rgba(248,113,113,0.35); }

  /* rows inside panels */
  .row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .row:last-child { border-bottom: none; }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .dot.up { background: var(--cyan); box-shadow: 0 0 10px rgba(94,234,212,0.7); }
  .dot.down { background: #f87171; box-shadow: 0 0 10px rgba(248,113,113,0.6); }
  .dot.neutral { background: var(--indigo); box-shadow: 0 0 10px rgba(129,140,248,0.6); }
  .row .name { flex: 0 0 auto; font-family: var(--mono); font-size: 13px; }
  .row .img { color: var(--ink-3); font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

  .cronline { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
  .cronline .num { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
  .cronline .num .lbl { color: var(--ink-3); font-size: 12px; }
  .cronline .failing { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--amber); text-align: right; }

  .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .stat-row:last-child { border-bottom: none; }
  .stat-row .k { font-size: 13px; color: var(--ink-2); }
  .stat-row .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

  .it { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .it:last-child { border-bottom: none; }
  .it .top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .it .id { font-family: var(--mono); font-size: 12px; color: var(--indigo); flex: 0 0 auto; }
  .it .prio { font-family: var(--mono); font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
  .it .title { flex: 1 1 auto; font-size: 14px; min-width: 0; }
  .it .sub { margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

  .badge {
    font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 6px;
    border: 1px solid var(--hairline); color: var(--ink-3); flex: 0 0 auto;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .badge.blocked { color: #f87171; border-color: rgba(248,113,113,0.35); }
  .badge.in-progress, .badge.inprogress { color: var(--cyan); border-color: rgba(94,234,212,0.35); }
  .badge.done { color: var(--cyan); border-color: rgba(94,234,212,0.25); }

  .empty { padding: 18px 0; color: var(--ink-3); font-size: 13px; font-weight: 300; }

  /* ── Placeholder empty-state (elegant "not yet wired") ── */
  .placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center;
    padding: 40px 24px;
    height: 100%;
  }
  .placeholder .ph-glyph {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 22px; font-weight: 300;
    color: var(--ink-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 12px 30px -16px rgba(0,0,0,0.6);
  }
  .placeholder .ph-title { font-size: 16px; font-weight: 550; letter-spacing: -0.01em; }
  .placeholder .ph-sub { font-size: 13px; color: var(--ink-3); font-weight: 300; max-width: 320px; }

  /* ── Gates (tap-friendly) ── */
  .gate {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .gate:last-child { border-bottom: none; }
  .gate .g-main { flex: 1 1 auto; min-width: 0; }
  .gate .g-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
  .gate .g-id { font-family: var(--mono); font-size: 11px; color: var(--violet); }
  .gate .g-by { margin-top: 3px; font-family: var(--mono); font-size: 11px; color: #f87171; }
  .gate .g-next { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
  .gate .g-act {
    flex: 0 0 auto;
    border: 1px solid rgba(192,132,252,0.4);
    background: rgba(192,132,252,0.10);
    color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 10px; cursor: pointer;
    transition: transform 0.2s var(--spring), box-shadow 0.25s ease, background 0.25s ease;
  }
  .gate .g-act:hover { background: rgba(192,132,252,0.18); box-shadow: 0 0 22px -4px rgba(192,132,252,0.6); }
  .gate .g-act:active { transform: scale(0.92); }
  .gate .g-act.flash {
    animation: gateflash 0.6s var(--ease);
  }
  @keyframes gateflash {
    0% { transform: scale(0.92); box-shadow: 0 0 0 rgba(192,132,252,0); }
    35% { transform: scale(1.05); box-shadow: 0 0 34px -2px rgba(192,132,252,0.9); background: rgba(192,132,252,0.34); }
    100% { transform: scale(1); box-shadow: 0 0 22px -4px rgba(192,132,252,0.5); }
  }

  /* ── Command bar (docked, Jarvis-style, LAYER 2) ── */
  .cmdbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
  }
  .cmdbar .cmd-shell {
    pointer-events: auto;
    max-width: 812px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px 10px 20px;
    background: linear-gradient(180deg, rgba(18,18,28,0.74), rgba(12,12,20,0.70));
    -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.06);
    backdrop-filter: blur(28px) saturate(170%) brightness(1.06);
    border: 1px solid var(--hairline);
    border-radius: 22px;
    box-shadow:
      0 24px 70px -20px rgba(0,0,0,0.7),
      inset 0 1px 0 0 rgba(255,255,255,0.08);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.4s ease;
  }
  .cmd-shell:focus-within {
    border-color: rgba(129,140,248,0.5);
    box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7), 0 0 40px -12px rgba(129,140,248,0.5);
  }
  .cmd-shell .shimmer {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(129,140,248,0.14) 50%, transparent 70%);
    background-size: 250% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .cmd-shell:focus-within .shimmer {
    opacity: 1; animation: shimmer 2.6s linear infinite;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }
  .cmdbar .typing {
    display: none; align-items: center; gap: 4px; flex: 0 0 auto;
  }
  .cmdbar.thinking .typing { display: inline-flex; }
  .cmdbar.thinking .send-ico { display: none; }
  .typing span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--indigo);
    animation: dotpulse 1.1s ease-in-out infinite;
  }
  .typing span:nth-child(2) { animation-delay: 0.15s; }
  .typing span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes dotpulse {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 1; }
  }
  .cmdbar input {
    flex: 1 1 auto; min-width: 0;
    background: none; border: none; outline: none;
    color: var(--ink); font-family: var(--sans); font-size: 15px;
    caret-color: var(--cyan);
  }
  .cmdbar input::placeholder { color: var(--ink-3); }
  .cmdbar .send {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 14px; border: none; cursor: pointer;
    background: var(--irid); color: #050508;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px -8px rgba(129,140,248,0.7);
    transition: transform 0.2s var(--spring), filter 0.3s ease;
  }
  .cmdbar .send:hover { filter: brightness(1.08); }
  .cmdbar .send:active { transform: scale(0.9); }
  .cmdbar .send:disabled { opacity: 0.5; cursor: default; }
  .cmdbar .send svg { width: 18px; height: 18px; }

  /* response toast */
  .toast {
    position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    z-index: 6;
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
    background: rgba(14,14,22,0.85);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--hairline); border-radius: 12px;
    padding: 10px 16px; max-width: 80vw;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s var(--ease);
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast.ok { color: var(--cyan); border-color: rgba(94,234,212,0.35); }
  .toast.err { color: #f87171; border-color: rgba(248,113,113,0.35); }

  /* status flip pulse */
  .statusword.pulse { animation: wordpulse 0.6s var(--ease); }
  @keyframes wordpulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

  /* ── Mobile ── */
  @media (max-width: 640px) {
    .shell { padding: 0 16px 120px; }
    header { padding: 28px 0 22px; gap: 20px; }
    .topline { gap: 12px; }
    .clock { font-size: 13px; }
    .tabs { border-radius: 14px; }
    .tab { padding: 9px 12px; font-size: 11.5px; }
    .hero { padding: 20px 0 8px; }
    .hero .statusword { font-size: clamp(52px, 20vw, 88px); }
    .cmdbar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .gate { flex-wrap: wrap; }
    .gate .g-act { width: 100%; }
    .grid-cards { grid-template-columns: 1fr; }
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    #nodefield, .aurora { display: none; }
  }

  /* ============================================================
     Command-center (dashboard) layout — no scroll, full viewport.
     Scoped under body.cmdcenter so the landing is untouched.
     ============================================================ */
  body.cmdcenter {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.cmdcenter .shell {
    position: relative; z-index: 1;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    width: 100%; max-width: 1220px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 44px) 76px; /* reserve docked command bar */
  }
  body.cmdcenter header { flex: 0 0 auto; padding: 26px 0 16px; gap: 18px; }
  body.cmdcenter main {
    flex: 1 1 auto; min-height: 0;
    position: relative;
  }
  body.cmdcenter .view {
    display: flex; flex-direction: column;
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transform: translateY(14px) scale(0.992);
    transition: opacity 0.5s var(--spring-soft), transform 0.55s var(--spring-soft);
  }
  body.cmdcenter .view.active {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: none;
  }
  body.cmdcenter .brain-stage { padding: 0; }
  body.cmdcenter .brain-statusword { margin-top: 16px; }

  /* gate-pending: the central brain node pulses violet when decisions await */
  body[data-status="ACTION"] .core-glow {
    background: radial-gradient(circle, rgba(192,132,252,0.36) 0%, rgba(192,132,252,0.11) 45%, transparent 70%);
    animation-duration: 3s;
  }
  body[data-status="ACTION"] .radar-wrap::before {
    background: radial-gradient(120% 90% at 50% -12%, rgba(192,132,252,0.12) 0%, transparent 46%);
  }

  /* ============================================================
     MOBILE-RESPONSIVE — consolidated small-screen overrides.
     Scoped under body.cmdcenter ONLY, so the landing page
     (ottomos.com, non-.cmdcenter) keeps its existing behavior.
     ============================================================ */
  @media (max-width: 640px) {

    /* ── (A) Tab bar: wrap all 8 tabs so none look cut off ── */
    body.cmdcenter .tabs {
      flex-wrap: wrap;
      overflow-x: hidden;
      overflow-y: visible;
      gap: 6px;
    }
    body.cmdcenter .tab {
      min-height: 44px;   /* comfortable tap target */
      padding: 10px 13px;
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    /* ── (B) Command-center: allow vertical scroll below the dock ── */
    body.cmdcenter {
      height: auto;
      min-height: 100dvh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    body.cmdcenter .shell {
      padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0px));
    }
    /* let the active view flow in-document so tall content scrolls */
    body.cmdcenter .view {
      position: relative;
      inset: auto;
      transform: none;
    }
    body.cmdcenter .view:not(.active) {
      display: none;
    }

    /* ── (C) Gate-card / meta text legibility bump ── */
    body.cmdcenter .herogate .gate-meta {
      font-size: 13px;
      line-height: 1.6;
      color: var(--ink-2);
    }
    body.cmdcenter .herogate .gate-title { font-size: 19px; }
    body.cmdcenter .kicker,
    body.cmdcenter .panel-head .z-count {
      font-size: 12.5px;
      color: var(--ink-2);
    }
    body.cmdcenter .gate .g-id { font-size: 12.5px; }
    body.cmdcenter .gate .g-by { font-size: 12px; }
    body.cmdcenter .gate .g-next { font-size: 13px; }
    body.cmdcenter .fleet-card .fc-img { font-size: 12px; }
    body.cmdcenter .placeholder .ph-sub { font-size: 14px; }
    body.cmdcenter .stat-row .k,
    body.cmdcenter .stat-row .v { font-size: 14px; }
  }