/* ==========================================================================
   GAT Desktop — professional trading terminal
   Evolves the existing dashboard's dark-terminal palette (same --bg/--green/
   --red/--yellow tokens, IBM Plex Mono/Sans) rather than replacing it, per
   the Desktop build plan (Stage 1). Refined for a chart-and-decision-first
   workspace instead of a card-grid admin panel.
   ========================================================================== */

:root{
  color-scheme: dark;
  /* --- carried forward from the existing dashboard's palette --- */
  --bg:       #050505;
  --bg2:      #0c0c0c;
  --bg3:      #131313;
  --bg4:      #191919;
  --border:   #232323;
  --border2:  #333333;
  --text:     #f2f2f2;
  --text2:    #9a9a9a;
  --text3:    #5c5c5c;
  --green:    #00e676;
  --green-dim:#0d3d24;
  --red:      #ff3b3b;
  --red-dim:  #5c1414;
  --yellow:   #ffaa00;
  --yellow-dim:#4a3200;
  --blue:     #4da6ff;
  --blue-dim: #12283f;
  --purple:   #c266ff;
  --purple-dim:#2e1a4d;
  --gold:     #ffaa00;

  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  --radius: 6px;
  --radius-lg: 10px;
  --rail-w: 64px;
  --topbar-h: 52px;
  --panel-w: 340px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue-dim);color:var(--text)}
a{color:inherit}
button{font-family:inherit;color:inherit;cursor:pointer}
input{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ---------------------------------------------------------------- gate -- */
#gate{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #0d1410 0%, var(--bg) 65%);
  z-index:1000;
}
#gate-box{width:360px;padding:36px 32px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg2)}
#gate-box .brand{font-family:var(--mono);font-size:20px;letter-spacing:.08em;color:var(--green);margin-bottom:4px}
#gate-box .sub{color:var(--text3);font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:28px}
#gate-input{
  width:100%;padding:11px 12px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--text);font-size:14px;margin-bottom:12px;
}
#gate-input:focus{outline:none;border-color:var(--green)}
#gate-btn{width:100%;padding:11px;background:var(--green);color:#012a15;border:none;border-radius:var(--radius);font-weight:600;font-size:13px;letter-spacing:.03em}
#gate-btn:hover{filter:brightness(1.08)}
#gate-msg{margin-top:12px;font-size:12px;min-height:16px}
#gate-msg.err{color:var(--red)}
#gate-msg.info{color:var(--text2)}

/* --------------------------------------------- change-password modal -- */
/* Old-Desktop capability migrated 2026-08-30 (continued MASTER audit).
   /auth/change-password already existed, safe and fully working (server-
   side 8-char minimum, fresh salt every call, requires the current
   session's own Bearer token) -- classic.html had a working modal for
   it, the new Desktop had none anywhere, confirmed by grep. This is
   very likely part of why the owner's own password rotation -- the
   engagement's one remaining owner action -- hadn't happened yet: there
   was no way to do it from the interface actually being used day to
   day. Reuses #gate's exact overlay/card visual language. */
#pw-modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:1000;
}
#pw-modal-box{width:360px;padding:32px 28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg2)}
#pw-modal-box .brand{font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--green)}
#pw-modal-box .sub{color:var(--text3);font-size:11px;letter-spacing:.05em}
.pw-input{
  width:100%;padding:11px 12px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--text);font-size:14px;margin-bottom:10px;font-family:inherit;
}
.pw-input:focus{outline:none;border-color:var(--green)}
.pw-btn-primary{flex:1;padding:11px;background:var(--green);color:#012a15;border:none;border-radius:var(--radius);font-weight:600;font-size:13px;letter-spacing:.03em;cursor:pointer;font-family:inherit}
.pw-btn-primary:hover{filter:brightness(1.08)}
.pw-btn-primary:disabled{opacity:.6;cursor:default}
.pw-btn-secondary{flex:1;padding:11px;background:none;color:var(--text2);border:1px solid var(--border2);border-radius:var(--radius);font-size:13px;cursor:pointer;font-family:inherit}
.pw-btn-secondary:hover{background:var(--bg3)}
#pw-msg{margin-top:12px;font-size:12px;min-height:16px}
#pw-msg.err{color:var(--red)}
#pw-msg.ok{color:var(--green)}

/* --------------------------------------------------------------- shell -- */
#app{display:flex;flex-direction:column;height:100vh}

#topbar{
  height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:22px;
  padding:0 18px;background:var(--bg2);border-bottom:1px solid var(--border);
}
#topbar .brand{font-family:var(--mono);font-weight:600;letter-spacing:.06em;color:var(--green);font-size:14px}
.tb-metric{display:flex;flex-direction:column;gap:1px}
/* Clickable topbar metrics (2026-08-30, continued MASTER audit) -- Paper
   Balance/Total P&L were plain static divs with no way to reach the full
   trade history behind the number, confirmed live (no onclick, cursor:
   auto). Real <button> elements (not a div+onclick) so they're keyboard-
   focusable and screen-reader-actionable by default, not just mouse-
   clickable. */
.tb-metric-btn{background:none;border:1px solid transparent;border-radius:var(--radius);padding:2px 6px;margin:-2px -6px;cursor:pointer;font-family:inherit;text-align:left}
.tb-metric-btn:hover{border-color:var(--border,#262626);background:var(--bg3)}
.tb-metric .l{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.tb-metric .v{font-family:var(--mono);font-size:13px;font-weight:600}
.tb-metric .v.pos{color:var(--green)}
.tb-metric .v.neg{color:var(--red)}
#topbar .spacer{flex:1}
.tb-pill{
  display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--border2);
}
.tb-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tb-pill.live-off{color:var(--text2);background:var(--bg3)}
.tb-pill.live-on{color:var(--red);background:var(--red-dim);border-color:var(--red)}
.tb-pill.conn-pending{color:var(--text3)}
.tb-pill.conn-ok{color:var(--green)}
.tb-pill.conn-bad{color:var(--yellow)}
#tb-logout{background:none;border:1px solid var(--border2);color:var(--text2);padding:6px 12px;border-radius:var(--radius);font-size:11px}
#tb-logout:hover{border-color:var(--text2);color:var(--text)}

#body{flex:1;display:flex;min-height:0}

/* ---------------------------------------------------------------- rail -- */
#rail{
  width:var(--rail-w);flex:0 0 auto;background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;
}
.rail-item{
  width:44px;height:44px;border-radius:var(--radius);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;color:var(--text3);
  border:1px solid transparent;background:none;
}
.rail-item .ic{font-size:17px;line-height:1}
.rail-item .lb{font-size:8px;letter-spacing:.04em;text-transform:uppercase}
.rail-item:hover{color:var(--text2);background:var(--bg3)}
.rail-item.active{color:var(--green);background:var(--green-dim);border-color:#0d3d24}

/* ------------------------------------------------------------ workspace -- */
#workspace{flex:1;min-width:0;overflow:auto;padding:16px;display:grid;
  grid-template-columns:1fr var(--panel-w);grid-template-rows:1fr auto auto;gap:14px;}

.view{display:none;height:100%}
.view.active{display:contents}

.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden}
.panel-head{padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.panel-head h2{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);font-weight:600}
.panel-head .pair-switch{display:flex;gap:2px;margin-left:auto;background:var(--bg3);border-radius:5px;padding:2px}
.pair-switch button{background:none;border:none;color:var(--text3);font-size:11px;font-weight:600;padding:4px 9px;border-radius:4px;font-family:var(--mono)}
.pair-switch button.active{background:var(--bg4);color:var(--text)}
.panel-body{flex:1;min-height:0;position:relative}

/* -------------------------------------------------------------- chart -- */
#chart-panel{grid-row:1 / 2;grid-column:1 / 2}
#chart-container{position:absolute;inset:0}
#chart-container .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px}

/* --------------------------------------------------------- side stack -- */
#side-stack{grid-row:1 / 2;grid-column:2 / 3;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
/* 2026-08-30 fix: flex's default flex-shrink:1 was silently compressing
   these 3 panels below their real content height to force-fit
   side-stack's fixed grid-row height -- and .panel's own overflow:hidden
   then clipped whatever got squeezed out, invisibly, with no scrollbar
   and no visual sign anything was missing (caught via the new Market
   Quality row: correct in the DOM, genuinely un-renderable on screen).
   flex-shrink:0 stops the compression; side-stack's existing
   overflow-y:auto then does its actual job -- an honest scrollbar when
   content exceeds the visible area, never silent data loss. */
#side-stack .panel{flex-shrink:0}

/* ----------------------------------------------------- decision panel -- */
#decision-panel .panel-body{padding:16px;display:flex;flex-direction:column;gap:14px}
#decision-status{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-radius:var(--radius);border:1px solid var(--border2);
}
#decision-status .label{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.02em}
#decision-status .score{font-family:var(--mono);font-size:13px;color:var(--text2)}
#decision-status.st-buy{background:var(--green-dim);border-color:#0e6b3d}
#decision-status.st-buy .label{color:var(--green)}
#decision-status.st-sell{background:var(--red-dim);border-color:#8a2323}
#decision-status.st-sell .label{color:var(--red)}
#decision-status.st-wait{background:var(--bg3);border-color:var(--border2)}
#decision-status.st-wait .label{color:var(--text2)}
#decision-status.st-rejected{background:var(--yellow-dim);border-color:#7a5200}
#decision-status.st-rejected .label{color:var(--yellow);font-size:16px}

.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dg-item .l{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);margin-bottom:2px}
.dg-item .v{font-family:var(--mono);font-size:14px;font-weight:600}
#decision-reason{font-size:11.5px;color:var(--text2);line-height:1.5;padding-top:4px;border-top:1px solid var(--border)}
.dq-wrap:empty{display:none}
.dq-wrap .safety-row{padding:6px 10px;margin:8px 0 0}
.dq-wrap .safety-row .name{width:auto;margin-right:2px}
#decision-meta{font-size:10px;color:var(--text3);display:flex;justify-content:space-between}

/* ------------------------------------------------------------ safety -- */
#safety-panel .panel-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.safety-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:var(--bg3)}
.safety-row .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.safety-row.ok .dot{background:var(--green)}
.safety-row.warn .dot{background:var(--yellow)}
.safety-row.block .dot{background:var(--red)}
.safety-row .name{font-size:11px;color:var(--text2);width:78px;flex:0 0 auto}
.safety-row .msg{font-size:11px;color:var(--text);flex:1}
.safety-row.block{background:var(--red-dim)}
.safety-row.block .msg{color:#ffd6d6}
/* Emergency-stop engage control (2026-08-30) -- deliberately styled as
   an unmistakably dangerous action, not a routine button. */
.emergency-stop-btn{margin-left:auto;flex:0 0 auto;padding:4px 12px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;background:var(--red);color:#2a0a0a;
  border:none;border-radius:var(--radius);cursor:pointer;font-family:inherit}
.emergency-stop-btn:hover{filter:brightness(1.12)}
.emergency-stop-btn:disabled{opacity:.6;cursor:default}

/* -------------------------------------------------------- bottom strip -- */
#command-center{grid-row:2 / 3;grid-column:1 / 3;display:flex;gap:14px}
#command-center .panel{flex:1;min-width:0}
.cc-headline{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:800;flex-wrap:wrap}
.cc-headline .cc-score{color:var(--text3);font-size:12px;font-weight:600}
.cc-sub{font-size:11px;color:var(--text2);margin-top:6px;line-height:1.5}
.cc-wait{font-size:13px;font-weight:700;color:var(--text2);letter-spacing:.02em}
.cc-tag{display:inline-block;margin-top:6px;font-size:10px;padding:2px 8px;border-radius:10px;background:var(--green-dim);color:var(--green)}
.cc-link{display:block;margin-top:10px;font-size:10px;color:var(--text3);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cc-link:hover{color:var(--text2)}
#account-strip{grid-row:3 / 4;grid-column:1 / 3;display:flex;gap:14px}
#account-strip .panel{flex:1;padding:12px 16px;flex-direction:row;align-items:center;gap:26px}
.acct-stat{display:flex;flex-direction:column;gap:2px}
.acct-stat .l{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.acct-stat .v{font-family:var(--mono);font-size:16px;font-weight:700}
.acct-stat .v.pos{color:var(--green)}
.acct-stat .v.neg{color:var(--red)}
#telegram-mini{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;color:var(--text2)}
#telegram-mini .tg-dot{width:7px;height:7px;border-radius:50%;background:var(--text3)}
#telegram-mini .tg-dot.recent{background:var(--green)}

/* ------------------------------------------------------ coming-soon -- */
.stub{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3)}
.stub .ic{font-size:34px;opacity:.5}
.stub .t{font-size:13px;color:var(--text2)}
.stub .d{font-size:11px;max-width:320px;text-align:center}

/* ------------------------------------------------------- shared bits -- */
.empty-state{color:var(--text3);font-size:12px;padding:14px 4px;text-align:center}
.badge-pill{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--bg3);color:var(--text2)}
.badge-pill.ok{background:var(--green-dim);color:var(--green)}
.badge-pill.warn{background:var(--yellow-dim);color:var(--yellow)}
.badge-pill.bad{background:var(--red-dim);color:var(--red)}
.stale-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:4px;background:var(--yellow-dim);color:var(--yellow)}
.freshness-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}
.freshness-dot.fresh{background:var(--green)}
.freshness-dot.stale{background:var(--yellow)}
.freshness-dot.missing{background:var(--red)}
.count-badge{margin-left:8px;font-size:10px;color:var(--text3);font-family:var(--mono)}

/* ---------------------------------------------------- intelligence -- */
#workspace #view-intelligence{display:none}
#workspace #view-intelligence.active{display:block;overflow-y:auto}
.intel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:8px}
.intel-span2{grid-column:1 / 3}
.intel-quality-body{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 14px !important}
.freshness-chip{font-size:10.5px;color:var(--text2);white-space:nowrap}
.intel-tile-body{padding:10px 14px !important;display:flex;flex-direction:column;gap:9px}
.intel-tile{display:flex;align-items:baseline;gap:8px;font-size:11.5px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.intel-tile:last-child{border-bottom:none;padding-bottom:0}
.intel-tile .name{color:var(--text3);width:118px;flex:0 0 auto}
.intel-tile .val{font-family:var(--mono);font-weight:600;width:64px;flex:0 0 auto}
.intel-tile .val.bullish,.intel-tile .val.buy{color:var(--green)}
.intel-tile .val.bearish,.intel-tile .val.sell{color:var(--red)}
.intel-tile .desc{color:var(--text2);flex:1}
.thesis-scenario{font-size:15px;font-weight:600;margin-bottom:6px}
.thesis-meta{font-size:11px;color:var(--text3);margin-bottom:12px}
.evidence-row{display:flex;gap:10px;margin-bottom:8px;font-size:11px}
.evidence-row .lbl{width:60px;flex:0 0 auto;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-size:9.5px;padding-top:2px}
.evidence-tags{display:flex;flex-wrap:wrap;gap:5px}
.evidence-tag{padding:2px 8px;border-radius:10px;font-size:10.5px;background:var(--bg3)}
.evidence-tag.bull{color:var(--green)}
.evidence-tag.bear{color:var(--red)}
.evidence-tag.neutral{color:var(--text3)}
.anomaly-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.anomaly-row:last-child{border-bottom:none}
.anomaly-row .lvl{width:70px;flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;text-align:center}
.anomaly-row .lvl.NORMAL{background:var(--bg3);color:var(--text3)}
.anomaly-row .lvl.MEDIUM{background:var(--yellow-dim);color:var(--yellow)}
.anomaly-row .lvl.HIGH,.anomaly-row .lvl.WARNING,.anomaly-row .lvl.CRITICAL{background:var(--red-dim);color:var(--red)}
.news-headline{padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px;line-height:1.4}
.news-headline:last-child{border-bottom:none}
.news-headline a{color:var(--text);text-decoration:none}
.news-headline a:hover{color:var(--blue)}
.news-headline .src{color:var(--text3);font-size:10px;margin-top:2px}
/* .sentiment-strip/.sentiment-chip removed 2026-09-08 (Priority 4 audit) --
   dead CSS, nothing generates this markup since intel.js's sentiment
   rendering was removed under Priority 2's Claude/Anthropic removal. */

/* -------------------------------------------------- positions/history -- */
.positions-shell{display:flex;flex-direction:column}
.positions-body{overflow-y:auto;padding:14px}
.tab-switch{display:flex;gap:2px;background:var(--bg3);border-radius:5px;padding:2px}
.tab-switch button{background:none;border:none;color:var(--text3);font-size:11px;font-weight:600;padding:6px 12px;border-radius:4px}
.tab-switch button.active{background:var(--bg4);color:var(--text)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.sub-panel-head{display:flex;align-items:center;margin:16px 0 8px}
.sub-panel-head:first-child{margin-top:0}
.sub-panel-head h3{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text2)}
.data-table{width:100%;border-collapse:collapse;font-size:11.5px}
.data-table th{text-align:left;color:var(--text3);font-weight:600;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-bottom:1px solid var(--border2)}
.data-table td{padding:7px 10px;border-bottom:1px solid var(--border);font-family:var(--mono)}
.data-table tr:last-child td{border-bottom:none}
.data-table .pos{color:var(--green)}
.data-table .neg{color:var(--red)}
.side-buy{color:var(--green);font-weight:600}
.side-sell{color:var(--red);font-weight:600}
.tg-history-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.tg-history-item:last-child{border-bottom:none}
.tg-history-item .tg-type{width:76px;flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 0;text-align:center;border-radius:4px;height:fit-content}
.tg-history-item .tg-type.OPENED{background:var(--green-dim);color:var(--green)}
.tg-history-item .tg-type.REJECTED{background:var(--yellow-dim);color:var(--yellow)}
.tg-history-item .tg-type.CLOSED{background:var(--blue-dim);color:var(--blue)}
.tg-history-item .tg-type.SCALED_IN{background:var(--purple-dim);color:var(--purple)}
.tg-history-item .tg-body{flex:1}
.tg-history-item .tg-headline{font-weight:600;margin-bottom:2px}
.tg-history-item .tg-detail{color:var(--text2);font-size:10.5px}
.tg-history-item .tg-time{color:var(--text3);font-size:10px;flex:0 0 auto}

/* --------------------------------------------------------- system view -- */
#workspace #view-system{display:none}
#workspace #view-system.active{display:block;overflow-y:auto}
.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px !important}
.resource-tile{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:var(--radius);background:var(--bg3)}
.resource-tile .rl{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
.resource-tile .rv{font-family:var(--mono);font-size:19px;font-weight:700}
.resource-tile .rbar{height:4px;border-radius:2px;background:var(--bg4);overflow:hidden}
.resource-tile .rbar-fill{height:100%;border-radius:2px}
.resource-tile.OK .rv{color:var(--green)}
.resource-tile.OK .rbar-fill{background:var(--green)}
.resource-tile.WARNING .rv{color:var(--yellow)}
.resource-tile.WARNING .rbar-fill{background:var(--yellow)}
.resource-tile.CLEANUP .rv,.resource-tile.CRITICAL .rv{color:var(--red)}
.resource-tile.CLEANUP .rbar-fill,.resource-tile.CRITICAL .rbar-fill{background:var(--red)}
.resource-tile.UNKNOWN .rv{color:var(--text3)}
.service-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.service-row:last-child{border-bottom:none}
.service-row .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.service-row .dot.alive{background:var(--green)}
.service-row .dot.dead{background:var(--red)}
.service-row .dot.unknown{background:var(--text3)}
.service-row .svc-name{width:180px;flex:0 0 auto;color:var(--text2)}
.service-row .svc-age{color:var(--text3);font-family:var(--mono);font-size:10.5px}
.maint-summary{display:flex;gap:20px;padding:12px 14px;margin-bottom:12px;background:var(--bg3);border-radius:var(--radius);flex-wrap:wrap}
.maint-history-item{padding:8px 0;border-bottom:1px solid var(--border);font-size:11px}
.maint-history-item:last-child{border-bottom:none}
.maint-protected-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.protected-chip{font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:4px;background:var(--bg3);color:var(--text3)}

@media (max-width: 1100px){
  .intel-grid{grid-template-columns:1fr}
  .intel-span2{grid-column:1}
  .system-grid{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:repeat(2,1fr)}
}

/* -------------------------------------------------------------- toast -- */
#toast-wrap{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:900}
.toast{background:var(--bg4);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 14px;font-size:12px;max-width:320px;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.toast.err{border-color:var(--red)}

/* ------------------------------------------------------------------ xai -- */
.xai-toggle{width:100%;background:none;border:1px solid var(--border2);color:var(--text2);font-size:10.5px;padding:6px;border-radius:var(--radius);letter-spacing:.03em;margin-top:2px}
.xai-toggle:hover{border-color:var(--text2);color:var(--text)}
#xai-panel{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.xai-section{display:flex;flex-direction:column;gap:5px}
.xai-label{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.xai-label.supporting{color:var(--green)}
.xai-label.conflicting{color:var(--yellow)}
.xai-list{display:flex;flex-direction:column;gap:3px}
.xai-item{font-size:10.5px;color:var(--text2);padding-left:10px;position:relative}
.xai-item::before{content:'—';position:absolute;left:0;color:var(--text3)}
.xai-meta{font-size:10px;color:var(--text3);padding-top:4px;border-top:1px solid var(--border)}

/* --------------------------------------------------------- admin panel -- */
.admin-panel{border-color:#3d2f0d;background:linear-gradient(180deg,var(--bg2) 0%,#141008 100%)}
.admin-panel .panel-head{background:rgba(255,170,0,.05)}
.admin-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:11.5px}
.admin-row:last-child{border-bottom:none}
.admin-row .al{width:180px;flex:0 0 auto;color:var(--text3)}
.admin-row .av{font-family:var(--mono);font-weight:600}
.admin-note{margin-top:10px;padding:10px;background:var(--bg3);border-radius:var(--radius);font-size:10.5px;color:var(--text2);line-height:1.5}

/* --------------------------------------------------------- risk-of-ruin -- */
.ror-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* --------------------------------------------- multi-target calculator -- */
.mt-input{width:100%;padding:7px 8px;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);color:var(--text);font-size:12px;font-family:inherit}
.mt-input:focus{outline:none;border-color:var(--green)}

/* ------------------------------------------------------------------ tile -- */
.style-tile-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.style-chip{font-size:10px;padding:3px 9px;border-radius:12px;background:var(--bg3);color:var(--text2);font-family:var(--mono)}
.style-chip.active{background:var(--green-dim);color:var(--green)}

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1100px){
  #workspace{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  #chart-panel{grid-column:1;grid-row:1;height:360px}
  #side-stack{grid-column:1;grid-row:2}
  #command-center{grid-column:1;grid-row:3;flex-direction:column}
  #account-strip{grid-column:1;grid-row:4;flex-direction:column}
}
@media (max-width: 720px){
  /* 2026-09-01 continued: measured live at 375px -- the topbar's
     remaining content (brand, Paper Balance, 4 status pills, Change
     Password, Logout) still overflowed horizontally even after the
     .tb-metric fix below, dragging the WHOLE PAGE's effective width to
     602px (confirmed via window.innerWidth) and cutting off LIVE EXEC
     status and the chart's right-hand timeframe/overlay controls --
     exactly the "critical information clipped/inaccessible" failure
     mode this platform's own standing mobile requirement exists to
     catch. Rather than hiding any more pills (every remaining one --
     REAL EXEC mode, PAPER AUTO, LIVE EXEC, connection status -- is
     independently safety-relevant and this session already established
     "nothing critical gets hidden" as the bar), the topbar now wraps
     onto multiple rows instead: no information is removed, it just
     takes more vertical space, which a scrolling mobile page has
     plenty of. --topbar-h is widened to match (it also positions
     #rail's fixed top edge below) -- a generous, empirically-sized
     value rather than an exact fit, since exact wrap height depends on
     live label text length (e.g. "REAL EXEC: AUTO" vs "REAL EXEC:
     MANUAL"). */
  :root{--topbar-h:118px}
  #topbar{flex-wrap:wrap;height:auto;min-height:var(--topbar-h);row-gap:8px;padding:10px 18px}
  #topbar .spacer{flex:0 0 100%;height:0}
  #rail{position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:80;box-shadow:2px 0 12px rgba(0,0,0,.4)}
  /* 2026-09-01 (continued MASTER audit item 8) -- #rail going fixed
     removes it from #body's flex flow, so #workspace was expanding to
     the full viewport width and the fixed rail then visually overlaid
     on top of its own leftmost 64px, clipping every Front-Desktop card
     underneath it. Reserves that same width back with padding instead. */
  #body{padding-left:var(--rail-w)}
  /* 2026-09-01 -- was :not(:first-child), a DOM-position check that
     matched EVERY .tb-metric (since #topbar's real first child is
     .brand, not any .tb-metric) and hid all of them, including Paper
     Balance, on every mobile visit. Explicit marker class instead --
     keeps exactly the intended metric visible regardless of DOM order
     or element tag-type. Total P&L specifically (not a pill, a genuine
     duplicate-of-Paper-Balance-page metric one tap away) is still the
     one thing intentionally condensed away here, unchanged from before
     this fix -- everything added by this fix is about the pills/
     buttons that were never touched by this rule at all. */
  .tb-metric:not(.tb-metric-primary){display:none}
  #topbar{gap:12px}
}

.tf-switch { display: flex; gap: 4px; margin-right: 8px; }
.tf-switch button { background: var(--surface2, #141414); color: var(--text2, #9a9a9a); border: 1px solid var(--border, #262626); border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.tf-switch-sep { width: 1px; align-self: stretch; background: var(--border, #262626); margin: 0 2px; }
.tf-switch button.active { background: var(--accent, #00e676); color: #000; border-color: var(--accent, #00e676); font-weight: 600; }
.tf-switch button:hover:not(.active) { border-color: var(--text3, #666); }

/* Structural chart overlays (2026-08-30) -- floats over the chart's
   top-left corner rather than crowding an already-full panel-head. */
.overlay-switch{position:absolute;top:8px;left:8px;z-index:5;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 16px)}
.overlay-switch button{background:rgba(20,20,20,.85);color:var(--text3, #9a9a9a);border:1px solid var(--border, #262626);
  border-radius:4px;padding:3px 8px;font-size:10px;cursor:pointer;font-family:inherit;backdrop-filter:blur(2px)}
.overlay-switch button.active{background:var(--accent, #00e676);color:#000;border-color:var(--accent, #00e676);font-weight:600}
.overlay-switch button:hover:not(.active){border-color:var(--text3, #666)}
#chart-closed-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(255, 59, 59, 0.12); border: 1px solid rgba(255, 59, 59, 0.4); color: #ff8080; font-size: 11px; letter-spacing: 0.03em; padding: 4px 12px; border-radius: 4px; pointer-events: none; }
#chart-closed-banner.hidden { display: none; }