/* ============================================================================
   MGBR app styles — layout + components on top of NACMO tokens (nacmo.css).
   Corners stay chamfer-only; cyan signal, rationed orange (top-right tell).
   ========================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;background:var(--space-700);overflow-x:hidden}

/* ---- background atmosphere (per design guide): starfield · nebula · dust ---- */
/* Pin to the viewport via CSS so the canvas never contributes to page overflow. */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:-3;display:block;pointer-events:none}
/* nebula wash lives on .nacmo-bg-nebula (z-index:-2) from nacmo.css */
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ----------------------------------------------------------------- app shell */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.sidebar{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:var(--s-5) var(--s-4);
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,17,32,.82),rgba(6,11,23,.92));
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
}
.brandmark{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-6)}
.brandmark .logo{width:34px;height:34px;flex:none}
.brandmark .wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:1.05rem;line-height:1;color:var(--ink-50)}
.brandmark .ver{font-family:var(--font-mono);font-size:10px;color:var(--cyan-300);letter-spacing:.12em;display:block;margin-top:3px}

.nav-group{margin-bottom:var(--s-5)}
.nav-group h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-500);margin:0 0 var(--s-2);padding-left:6px}
.nav-group a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-300);text-decoration:none;font-size:var(--fs-body-s);padding:7px 10px;transition:all var(--d-fast) var(--ease-warp);border-left:2px solid transparent}
.nav-group a:hover{color:var(--ink-50);background:rgba(34,211,238,.08)}
.nav-group a.active{color:var(--cyan-200);background:rgba(34,211,238,.10);border-left-color:var(--cyan-400)}

.sidebar-foot{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line-soft)}
.userchip{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3)}
.userchip .avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--grad-primary-soft);border:1px solid var(--line-cyan);clip-path:var(--cut-sm);font-family:var(--font-display);font-weight:700;color:var(--cyan-200)}
.userchip .meta{min-width:0;display:flex;flex-direction:column;justify-content:center}
.userchip .nm{display:block;font-size:var(--fs-body-s);color:var(--ink-50);font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .em{display:block;font-family:var(--font-mono);font-size:10px;line-height:1.3;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --------------------------------------------------------------- content */
.content{padding:var(--s-8) clamp(var(--s-5),3.2vw,var(--s-10)) var(--s-16);max-width:calc(var(--container) + 160px)}
.page-head{margin-bottom:var(--s-6)}
.page-head h1{margin-bottom:var(--s-2)}
.page-head .sub{color:var(--ink-300);max-width:70ch}

/* mobile top bar */
.navbar{display:none;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
  background:rgba(6,11,23,.9);backdrop-filter:blur(var(--glass-blur))}
.menu-btn{background:var(--glass);border:1px solid var(--line);color:var(--ink-100);width:40px;height:40px;cursor:pointer;font-size:18px;clip-path:var(--cut-sm)}

/* ----------------------------------------------------------------- grids */
.grid{display:grid;gap:var(--s-4)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ----------------------------------------------------------------- stat cards */
.stat{position:relative;padding:var(--s-5);background:var(--grad-surface);border:1px solid var(--line);clip-path:var(--cut)}
.stat .k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500)}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--ink-50);line-height:1.1;margin-top:6px;letter-spacing:-.02em}
.stat .v.mono{font-family:var(--font-mono);font-weight:600;font-size:1.5rem}
.stat .d{font-size:var(--fs-caption);color:var(--ink-500);margin-top:4px}
.stat .v.pos{color:var(--success)} .stat .v.neg{color:var(--danger)}

/* ----------------------------------------------------------- live refresh */
.live-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--ink-300);padding:6px 12px;clip-path:var(--cut-sm);border:1px solid var(--line);background:rgba(4,7,15,.4);white-space:nowrap;transition:color var(--d-fast),border-color var(--d-fast)}
.live-badge .live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.live-badge.is-live{color:var(--success);border-color:rgba(45,212,167,.4)}
.live-badge.is-live .live-dot{animation:live-pulse 2.4s ease-out infinite}
.live-badge.is-updating{color:var(--cyan-200);border-color:var(--line-cyan)}
.live-badge.is-updating .live-dot{background:var(--cyan-400);box-shadow:var(--glow-cyan)}
.live-badge.is-error{color:var(--warning);border-color:rgba(255,176,32,.4)}
.live-badge.is-error .live-dot{background:var(--warning)}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(45,212,167,.45)}70%{box-shadow:0 0 0 6px rgba(45,212,167,0)}100%{box-shadow:0 0 0 0 rgba(45,212,167,0)}}

/* ----------------------------------------------------------------- tables */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-body-s)}
.table th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);padding:10px 12px;border-bottom:1px solid var(--line)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line-soft);color:var(--ink-100)}
.table td.num,.table th.num{text-align:right;font-family:var(--font-mono)}
.table tr:hover td{background:rgba(34,211,238,.04)}
.pos{color:var(--success)} .neg{color:var(--danger)}

/* ----------------------------------------------------------------- misc */
.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.muted{color:var(--ink-500)}
.mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mb-4{margin-bottom:var(--s-4)}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.empty{padding:var(--s-8);text-align:center;color:var(--ink-500);border:1px dashed var(--line);clip-path:var(--cut)}
.empty svg{width:34px;height:34px;opacity:.5;margin-bottom:var(--s-2)}

.ticker-chip{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--blue-300);border:1px solid var(--line);padding:2px 7px;clip-path:var(--cut-sm)}

.trace-pre{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:var(--fs-caption);line-height:1.5;color:var(--ink-300);background:rgba(4,7,15,.5);border:1px solid var(--line);padding:12px;max-height:340px;overflow:auto;margin:6px 0 0}

/* ----------------------------------------------------------- trade engine */
.engine-led{width:16px;height:16px;border-radius:50%;flex:none}
/* steady glowing dot — the "running" motion lives on the whole holo panel now */
.engine-led.on{background:var(--success);box-shadow:0 0 8px 1px rgba(45,212,167,.55)}
.engine-led.off{background:var(--space-300);border:1px solid var(--line)}
.engine-state{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.05em;color:var(--ink-50);line-height:1}

/* ----------------------------------------------------------- constraints */
.profile-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s-3)}
.profile-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--ink-300);text-decoration:none;padding:8px 14px;border:1px solid var(--line);background:rgba(4,7,15,.4);clip-path:var(--cut-sm);transition:all var(--d-fast) var(--ease-warp)}
.profile-chip:hover{border-color:var(--line-strong);color:var(--ink-50)}
.profile-chip.is-selected{border-color:var(--cyan-400);color:var(--cyan-100);background:rgba(34,211,238,.08)}
.profile-chip .profile-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(45,212,167,.6)}
.profile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft)}
.inline-form{display:inline-flex;gap:8px;align-items:center}

.cfield{display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.cfield:last-child{border-bottom:none}
.cfield-meta{min-width:0;flex:1}
.cfield-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;color:var(--ink-50);font-size:var(--fs-body-s)}
.cfield-help{color:var(--ink-500);font-size:var(--fs-caption);margin-top:3px;max-width:64ch;line-height:1.5}
.cfield-key{font-family:var(--font-mono);font-size:10px;color:var(--space-200);letter-spacing:.04em;margin-top:4px}
.cfield-control{flex:none;display:flex;justify-content:flex-end;align-items:center;min-width:220px}
.cfield.is-locked .cfield-label{color:var(--ink-300)}

.changed-dot{width:7px;height:7px;border-radius:50%;background:var(--orange-400);box-shadow:0 0 6px rgba(255,159,69,.5);flex:none}
.vbadge{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--blue-300);border:1px solid var(--line);padding:0 5px}
.lock-chip{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--ink-500);border:1px solid var(--line);padding:1px 6px}
.field-static{font-family:var(--font-mono);font-size:var(--fs-body-s);color:var(--ink-200,var(--ink-300))}

.slider{display:flex;align-items:center;gap:12px}
.slider .nacmo-range{width:200px}
.slider-val{font-family:var(--font-mono);font-size:var(--fs-body-s);color:var(--cyan-200);min-width:74px;text-align:right}
.cfield.is-text{flex-direction:column;align-items:stretch;gap:10px}
.cfield.is-text .cfield-control{min-width:0;width:100%;justify-content:stretch}
.prompt-area{width:100%;font-family:var(--font-mono);font-size:var(--fs-caption);line-height:1.55;min-height:170px;resize:vertical}
.prompt-area[readonly]{opacity:.85;cursor:default}
.rangepair{display:flex;flex-direction:column;gap:8px}
.rangepair .rp-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);width:30px}
.save-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6);padding:var(--s-4);background:rgba(6,11,23,.92);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--line);clip-path:var(--cut)}

@media(max-width:720px){
  .cfield{flex-direction:column;align-items:flex-start;gap:10px}
  .cfield-control{justify-content:flex-start;min-width:0;width:100%}
  .slider .nacmo-range{width:100%;flex:1}
}

/* ----------------------------------------------------------------- welcome hero */
.hero{position:relative;padding:var(--s-10) var(--s-8);overflow:hidden}
.hero .eyebrow{display:inline-block;margin-bottom:var(--s-4)}
.hello{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1.05;letter-spacing:-.02em;margin:0}
.hero .tagline{font-size:var(--fs-body-l);color:var(--ink-300);max-width:60ch;margin-top:var(--s-4)}
.hero .cta{margin-top:var(--s-6)}
.orbit{position:absolute;right:-80px;top:-80px;width:320px;height:320px;border:1px solid var(--line-soft);border-radius:50%;pointer-events:none}
.orbit::after{content:"";position:absolute;inset:48px;border:1px solid var(--line-soft);border-radius:50%}

/* ----------------------------------------------------------------- login */
/* Bulletproof full-viewport centering. svh avoids the mobile/dynamic-chrome
   overscroll that 100vh causes; flex centering is unambiguous (no grid-stretch
   dependency). */
.login-wrap{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--s-6)}
.login-card{width:100%;max-width:440px}
.login-card .inner{padding:var(--s-8)}
/* button-anchors must not show the default underline */
.nacmo-btn{text-decoration:none}
.login-btn{width:100%;min-height:52px;line-height:1;font-size:var(--fs-body);letter-spacing:.01em;gap:10px}
.login-btn svg{width:18px;height:18px}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-6)}
.login-brand .wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:1.3rem;color:var(--ink-50)}
.devnote{margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--ink-500);letter-spacing:.04em}
.user-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.user-suggest button{font-family:var(--font-mono);font-size:var(--fs-micro);background:rgba(34,211,238,.06);border:1px solid var(--line);color:var(--cyan-200);padding:4px 8px;cursor:pointer;clip-path:var(--cut-sm)}
.user-suggest button:hover{border-color:var(--line-cyan)}

/* ----------------------------------------------------------------- responsive */
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .navbar{display:flex}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;z-index:50;transform:translateX(-100%);transition:transform var(--d-base) var(--ease-warp)}
  .sidebar.open{transform:translateX(0)}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .content{padding:var(--s-5)}
}
@media(min-width:560px) and (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}