*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#0d0f14;--bg1:#13161e;--bg2:#1a1e28;--bg3:#222736;
  --border:#2a2f3d;--border2:#3a4055;
  --t1:#e8eaf0;--t2:#8b91a8;--t3:#555d78;
  --green:#00d68f;--red:#ff4d6a;--blue:#4d9fff;--amber:#ffb347;--purple:#9b59ff;
  --brand:#1f7bef;        /* logo royal blue (matches the AlphaBotix logo ring) */
  --brand-deep:#0d67e6;
  --gdim:rgba(0,214,143,0.13);--rdim:rgba(255,77,106,0.13);--bdim:rgba(77,159,255,0.1);
  --topbar-h:64px;
  --nav-h:52px;
  --adsense-maint-h:0px;
}
  
body{  
  font-family:system-ui,-apple-system,sans-serif;
  background:var(--bg0);color:var(--t1);
  font-size:13px;overflow-x:hidden;min-height:100vh;
}

/* ════════════════════════════════════════
   TOPBAR & NAV 
════════════════════════════════════════ */
/* TODO: REVERT THIS AFTER 60 DAYS TO RE-ENABLE LOGIN WALL — remove AdSense maintenance banner */
.adsense-maint-banner{
  width:100%;
  text-align:center;
  background:#7f0000;
  color:#ff1f1f;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.3;
  border-bottom:2px solid #ff0000;
  z-index:210;
}
.adsense-maint-banner--dash{
  position:sticky;
  top:0;
  min-height:var(--adsense-maint-h);
  padding:10px 14px;
  font-size:clamp(12px,1.6vw,15px);
  color:#ff2a2a;
}
.topbar{
  position:sticky;
  top:var(--adsense-maint-h);
  z-index:200;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  margin: 0;
  background:var(--bg1);
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.logo-text{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--brand)}

.nav{
  position:sticky;
  top:calc(var(--adsense-maint-h) + var(--topbar-h));
  z-index:199;
  height:var(--nav-h);
  margin: 0;
  display:flex;
  align-items:stretch;
  background:var(--bg1);
  border-bottom:2px solid var(--border);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.nav-tab{
  height:100%;
  padding:0 20px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  color:var(--t2);
  background:none;
  font-family:inherit;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color .15s, border-color .15s;
  text-decoration:none;
  box-sizing:border-box;
}
a.nav-tab{color:var(--t2)}
.nav-tab:hover{color:var(--t1);text-decoration:none}
.nav-tab.active{color:var(--t1);border-bottom-color:var(--blue)}
.nav-spacer{flex:1}

/* ════════════════════════════════════════
   PAGE LAYOUT
════════════════════════════════════════ */
.page{padding:18px 20px;max-width:960px;margin:0 auto}
.page.dash-shell{padding:0;max-width:none;margin:0}

#main-app{
  background:
    radial-gradient(ellipse at 15% 50%,rgba(0,214,143,.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(77,159,255,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(155,89,255,.04) 0%,transparent 50%),
    linear-gradient(160deg,#0a0d13 0%,#0d0f18 40%,#0a1018 100%);
  min-height:100vh;
  position:relative;
}
#main-app::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(77,159,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,159,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;z-index:0;
}
#main-app>*{position:relative;z-index:1}
#main-app .topbar, #main-app .nav{z-index:200}

/* ════════════════════════════════════════
   RESTORED MISSING COMPONENTS (Centered Auth, Cards, etc.)
════════════════════════════════════════ */
/* .auth-wrap legacy centering removed — auth uses .dash-shell / .dash-main parity */

.hidden{display:none!important}
.card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.stat-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.stat-value{font-size:24px;font-weight:600;letter-spacing:-.5px;margin-top:4px}
.bot-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:16px 18px;transition:border-color .2s}
.bot-card.running{border-color:rgba(0,214,143,.3)}
.bot-card.paused{border-color:rgba(255,179,71,.2)}
.user-row{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.user-row:last-child{border-bottom:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:7px;border:1px solid var(--border2);background:transparent;color:var(--t1);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn:hover:not(:disabled){background:var(--bg3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){opacity:.88;background:var(--blue)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-upgrade{
  background:#ffb347;
  color:#1a1208;
  border:1px solid #ff9f1a;
  font-weight:800;
  letter-spacing:.2px;
  text-decoration:none !important;
}
.btn-upgrade:hover{filter:brightness(1.06);color:#1a1208}
.btn-danger{background:var(--rdim);color:var(--red);border-color:rgba(255,77,106,.4)}
.btn-danger:hover:not(:disabled){background:rgba(255,77,106,.22)}
.btn-warning{background:rgba(255,179,71,.13);color:var(--amber);border-color:rgba(255,179,71,.4)}
.btn-warning:hover:not(:disabled){background:rgba(255,179,71,.22)}
.btn-ghost{border-color:transparent;color:var(--t2)}

input,select,textarea{font-family:inherit;font-size:13px;color:var(--t1);background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:8px 11px;width:100%;transition:border .15s}
input::placeholder,textarea::placeholder{color:var(--t3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,159,255,.12)}
select option{background:var(--bg2)}
label.field,div.field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--t2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600;letter-spacing:.2px}
.badge-green{background:var(--gdim);color:var(--green)}
.badge-blue{background:var(--bdim);color:var(--blue)}
.badge-amber{background:rgba(255,179,71,.15);color:var(--amber)}
.badge-red{background:var(--rdim);color:var(--red)}
.badge-purple{background:rgba(155,89,255,.15);color:var(--purple)}
.ind-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 8px;border-radius:20px;background:var(--bg3);color:var(--t2);margin-right:4px}
.funds-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.funds-ctl-label{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.funds-ctl .btn{padding:6px 10px}
.funds-input{width:110px;flex:0 0 auto;text-align:right}
/* Tiny tab icon (e.g. bots-tab.png) sized to match the emoji glyphs in the nav */
.tab-icon{height:1.1em;width:auto;vertical-align:-0.18em;object-fit:contain}

.info-banner{background:rgba(77,159,255,.07);border:1px solid rgba(77,159,255,.2);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--blue);line-height:1.6;margin-bottom:14px}
.warn-banner{background:rgba(255,77,106,.07);border:1px solid rgba(255,77,106,.2);border-radius:8px;padding:11px 14px;font-size:12px;color:var(--red);line-height:1.6;margin-bottom:14px}

.pup{color:var(--green)}.pdn{color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.slbl{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:10px}
.divider{border:none;border-top:1px solid var(--border);margin:14px 0}
.log-box{font-family:'SF Mono',Menlo,monospace;font-size:10px;background:var(--bg0);border-radius:6px;padding:9px 11px;max-height:110px;overflow-y:auto;color:var(--t2);line-height:1.7;border:1px solid var(--border)}

/* ════════════════════════════════════════
   TABLES & MODALS
════════════════════════════════════════ */
.tooltip{position:relative;display:inline-block}
.tooltip .tooltip-text{visibility:hidden;opacity:0;transition:opacity .15s;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--bg2);color:var(--t1);padding:8px 10px;border:1px solid var(--border2);border-radius:8px;font-size:11px;line-height:1.5;max-width:280px;white-space:normal;z-index:10;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.tooltip:hover .tooltip-text,.tooltip:focus-within .tooltip-text{visibility:visible;opacity:1}
.table-wrap{width:100%;overflow-x:auto;margin-top:10px}
.data-table{width:100%;border-collapse:collapse;text-align:left}
.data-table th{padding:10px;color:var(--t2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.data-table td{padding:12px 10px;border-bottom:1px solid var(--border);font-size:13px}

.toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:12px 18px;font-size:13px;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:slideIn .2s ease;pointer-events:all}
.toast.error{border-color:var(--red);color:var(--red);background:var(--rdim)}
.toast.success{border-color:var(--green);color:var(--green);background:var(--gdim)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:5000;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--bg1);border-radius:12px;padding:1.5rem;width:100%;max-width:440px;border:1px solid var(--border2);max-height:90vh;overflow-y:auto}

@media(max-width:640px){
  .grid2,.grid3{grid-template-columns:1fr}
  .nav-tab{padding:0 10px;font-size:12px}
}

/* ── Auth screen sizing ── */
#auth-screen .card {
    padding: 28px 32px;
}
#auth-screen input[type="email"],
#auth-screen input[type="password"],
#auth-screen input[type="text"] {
    font-size: 15px;
    padding: 12px 14px;
}
#auth-screen .btn-primary {
    padding: 12px 16px;
    font-size: 15px;
}

/* ── Password icon wrapper ── */
.input-icon-wrap {
    position: relative;
    display: block;   /* same width as a normal input */
    line-height: 0;   /* kill any inline ghost space below the input */
}
.input-icon-wrap input {
    display: block;
    width: 100%;
    line-height: normal;
    padding-right: 48px !important;
}

/* Icon is now positioned relative to ONLY the input wrapper,
   so top:50% lands exactly in the middle of the input box */
#robot-login,
#robot-reg,
#robot-reg-confirm,
#robot-forgot,
#robot-forgot-confirm {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    pointer-events: auto;
}

/* ══════════════════════════════════════════════
   SPECIFICITY FIX — sticky topbar & nav
   #main-app>* (1,0,0) was overriding position:sticky
   on .topbar (0,1,0) and nav (0,0,1), turning
   top:64px into a relative offset (the visible gap).
   These rules have specificity 1,1,0 / 1,0,1 → win.
══════════════════════════════════════════════ */
#main-app .adsense-maint-banner--dash { position: sticky; top: 0; z-index: 210; }
#main-app .topbar { position: sticky; top: var(--adsense-maint-h); }
#main-app .nav    { position: sticky; top: calc(var(--adsense-maint-h) + var(--topbar-h)); }

/* ══ Mode-toggle buttons (Trading Mode & Broker cards) ══ */
.mode-toggle { display:flex; border:1px solid var(--border2); border-radius:8px; overflow:hidden; width:fit-content; }
.mode-btn { padding:7px 16px; background:transparent; border:none; border-right:1px solid var(--border2); color:var(--t2); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s; white-space:nowrap; }
.mode-btn:last-child { border-right:none; }
.mode-btn:hover { background:var(--bg3); color:var(--t1); }
.mode-btn.active { background:var(--blue); color:#fff; }

/* Topbar / tab-header single-click Paper ↔ Live switch */
.mode-switch-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:0; cursor:pointer; font:inherit; line-height:1.2;
  vertical-align:middle; user-select:none;
  border:1px solid transparent; appearance:none; -webkit-appearance:none;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.mode-switch-btn .mode-switch-hint{ display:none; }
.mode-switch-btn:hover .mode-switch-current{ display:none; }
.mode-switch-btn:hover .mode-switch-hint{ display:inline; }
.mode-switch-btn:hover,
.mode-switch-btn:focus-visible{
  filter:brightness(1.08);
  box-shadow:0 0 0 1px rgba(255,255,255,0.18);
  outline:none;
}
.mode-switch-btn:active{ transform:translateY(1px); }
@media (hover:none){
  /* Touch devices: keep current label; title/aria still explain the action */
  .mode-switch-btn:hover .mode-switch-current{ display:inline; }
  .mode-switch-btn:hover .mode-switch-hint{ display:none; }
}

/* ══ Brand logo + wordmark ══ */
.brand-logo{height:34px;width:34px;border-radius:50%;object-fit:contain;display:block;flex-shrink:0}
/* Sign-in page logo: larger for visibility; bottom margin separates it from the title */
.auth-logo{height:148px;width:148px;border-radius:50%;object-fit:contain;display:block;margin:0 auto 20px}
.brand-title{color:var(--brand)}

/* Auth background + shell live with the unified layout rules near .dash-shell */

/* ══ Portfolio performance graph ══ */
.perf-chart-wrap { position:relative; height:360px; background:var(--bg0); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:8px; }
#perf-chart { position:absolute; inset:0; }
.legend-dot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:3px; }
.perf-tooltip { position:absolute; z-index:20; min-width:180px; max-width:260px; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; font-size:12px; box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:auto; }
.perf-tooltip .pt-title { font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.perf-tooltip .pt-row { display:flex; justify-content:space-between; gap:10px; padding:2px 0; color:var(--t2); }
.perf-tooltip .pt-row span:last-child { color:var(--t1); font-weight:500; }
.perf-tooltip .pt-close { position:absolute; top:6px; right:8px; cursor:pointer; color:var(--t3); }

/* ══ Exchange onboarding steps ══ */
.onboarding-steps { margin:6px 0 0 18px; padding:0; color:var(--t2); line-height:1.9; font-size:13px; }
.onboarding-steps li { margin-bottom:4px; }

/* ══ API key paper/live grid ══ */
.keys-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.keys-col { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
@media(max-width:640px){ .keys-grid{ grid-template-columns:1fr; } }

/* ══ Clickable market rows ══ */
.market-row { cursor:pointer; transition:background .12s; }
.market-row:hover { background:var(--bg2); }
.market-row td:first-child { color:var(--blue); font-weight:700; }
.market-open-hint { color:var(--t3); font-size:11px; }
.market-row:hover .market-open-hint { color:var(--blue); }

/* ══ Market Dashboard modal ══ */
.dash-modal { max-width:880px; width:100%; }
.dash-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dash-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; position:relative; z-index:5; }
.dash-toolbar .mode-btn { padding:5px 14px; font-size:12px; pointer-events:auto; cursor:pointer; }
.dash-preset-group { display:inline-flex; border:1px solid var(--border2); border-radius:8px; overflow:hidden; background:var(--bg2); position:relative; z-index:6; }
.dash-chart-type {
  background: var(--bg2); color: var(--t1); border: 1px solid var(--border2);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-family: inherit;
  cursor: pointer; outline: none;
}
.dash-chart-type:focus { border-color: var(--blue); }
.dash-fetch-status { font-size:11px; color:var(--amber, #f5a524); letter-spacing:.2px; white-space:nowrap; }
.dash-fetch-status.hidden { display:none; }
.dash-chart-wrap { position:relative; height:340px; background:var(--bg0); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#dash-chart { position:absolute; inset:0; }
.dash-chart-msg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--t2); font-size:13px; text-align:center; padding:20px; pointer-events:none; }
.dash-chart-msg.hidden { display:none; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.dash-panel { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:13px 15px; }
.dash-ind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.dash-ind { background:var(--bg0); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dash-ind .k { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; }
.dash-ind .v { font-size:15px; font-weight:600; font-family:'SF Mono',Menlo,monospace; margin-top:2px; }
.pattern-chip { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:8px; background:var(--bg0); border-left:3px solid var(--t3); font-size:12px; }
.pattern-chip.bullish { border-left-color:var(--green); }
.pattern-chip.bearish { border-left-color:var(--red); }
.pattern-chip .pname { font-weight:700; }
.pattern-chip .pdetail { color:var(--t2); margin-top:2px; }
.bot-status-line { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.bot-status-line:last-child { border-bottom:none; }
.bot-status-line .lbl { color:var(--t2); }

@media(max-width:640px){ .dash-grid{ grid-template-columns:1fr; } .dash-chart-wrap{ height:260px; } }

/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO TAB — holographic glassmorphism
   ════════════════════════════════════════════════════════════════════ */
:root{ --holo:#39d9ff; --holo-deep:#1f7bef; }

/* Portfolio stage = full-bleed background canvas under the nav.
   Valuation + details sit ON TOP of this image; empty space shows art. */
.portfolio-stage{
  position:relative;
  margin:0;
  width:100%;
  max-width:100%;
  background-image:url("/static/images/portfolio-background1.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#070b14;
  border-radius:0;
  padding:0;
  min-height:calc(100vh - var(--topbar-h) - var(--nav-h));
  /* visible — overflow:hidden + sticky top was pushing headers ~116px down */
  overflow:visible;
}

/* Column stack: header first, details immediately below in normal flow */
.pf-overlay{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:10px;
  padding:0 0 20px;
  margin:0;
  min-height:0;
  box-sizing:border-box;
  background:transparent;
  pointer-events:none;
}
.pf-overlay > *{ pointer-events:auto; }

/* Header block — normal flow, flush under the nav (not sticky/absolute) */
.pf-sticky-header{
  position:relative !important;
  top:auto !important;
  z-index:2;
  flex:0 0 auto;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:linear-gradient(160deg, rgba(12,28,52,0.82), rgba(6,14,30,0.72)) !important;
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  padding:6px 14px 8px !important;
  margin:0;
  border-radius:0 0 14px 14px !important;
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
}
.pf-sticky-header::before{
  background:linear-gradient(180deg, rgba(57,217,255,0.06), transparent 50%);
}
.pf-sticky-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; margin:0 0 2px; padding:0 0 3px;
  border-bottom:1px solid rgba(57,217,255,0.12);
}
.pf-sticky-mode{
  margin:0 !important; padding:0 !important; border:none !important;
  flex:1; min-width:180px; gap:8px;
}
.pf-sticky-header .pf-mode-title{
  font-size:13px; gap:8px;
}
.pf-sticky-header .pf-mode-toggle .mode-btn{
  padding:4px 10px; font-size:11px;
}
.pf-summary-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; align-items:start;
  margin:0; padding:0;
}
.pf-summary-metric .holo-lbl{ margin-bottom:1px; }
.pf-summary-metric .holo-total-value{ font-size:30px; line-height:1; margin:0; }
.pf-summary-pnl .holo-total-sub{ margin-top:1px; }
.pf-total-pnl{
  font-size:24px; font-weight:800; letter-spacing:-0.3px; line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(57,217,255,0.25);
}
.pf-sticky-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:6px;
  padding-top:4px;
}
.pf-details-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(10,24,45,0.45); border:1px solid rgba(57,217,255,0.35);
  color:#eaf6ff; border-radius:9px; padding:5px 10px; font-size:11px; font-weight:700;
  cursor:pointer; font-family:inherit; letter-spacing:.3px;
  box-shadow:0 0 14px rgba(57,217,255,0.08); transition:background .15s, border-color .15s;
  flex:0 0 auto;
}
.pf-details-toggle:hover{ background:rgba(16,34,60,0.65); border-color:rgba(57,217,255,0.55); }
.pf-details-caret{ display:inline-block; transition:transform .25s ease; color:var(--holo); }
.pf-details-toggle[aria-expanded="true"] .pf-details-caret{ transform:rotate(180deg); }

/* Details accordion — normal flow BELOW the header (never absolute / never under header) */
.pf-details{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
  flex:0 0 auto;
  width:100%;
  background:transparent;
  border:none;
  box-shadow:none;
  margin:0;
  max-height:none;
}
.pf-details.is-open{
  grid-template-rows:1fr;
  overflow:visible;
}
.pf-details.collapsed{ grid-template-rows:0fr; overflow:hidden; }
.pf-details-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; gap:12px;
  background:transparent;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .28s ease, transform .32s ease;
  padding:0 12px 8px;
  position:relative;
  z-index:1;
}
.pf-details.is-open .pf-details-inner{
  opacity:1; transform:translateY(0);
  overflow:visible;
}
.pf-details .holo-card{
  position:relative;
  z-index:1;
  background:linear-gradient(160deg, rgba(14,30,56,0.78), rgba(8,16,34,0.70));
  backdrop-filter:blur(8px) saturate(125%);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
}

@media(max-width:680px){
  .pf-summary-grid{ grid-template-columns:1fr; gap:6px; }
  .pf-total-pnl{ font-size:22px; }
  .pf-sticky-header{ position:relative !important; top:auto !important; }
  .pf-overlay{ padding:0 0 16px; }
  .pf-details-inner{ padding:0 8px 8px; }
  .portfolio-stage, .tab-stage{ margin:0; }
}

/* Glass card matched to the glowing cyan/blue globe so the scene shows through */
.holo-card{
  position:relative;
  /* Semi-transparent glass — enough to read content, enough to see the background */
  background:linear-gradient(160deg, rgba(20,40,70,0.10), rgba(8,18,38,0.06));
  backdrop-filter:blur(4px) saturate(120%);
  -webkit-backdrop-filter:blur(4px) saturate(120%);
  border:1px solid rgba(57,217,255,0.22);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 0 0 1px rgba(57,217,255,0.04),
             0 8px 40px rgba(0,0,0,0.28),
             0 0 24px rgba(57,217,255,0.10),
             inset 0 0 18px rgba(57,217,255,0.04);
  color:#eaf6ff;
}
.holo-card::before{
  /* subtle top neon edge highlight */
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(180deg, rgba(57,217,255,0.10), transparent 38%);
}
.holo-lbl{ font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--holo); text-shadow:0 0 10px rgba(57,217,255,0.45); margin-bottom:8px; }

.pf-mode-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid rgba(57,217,255,0.15); }
.pf-mode-title{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800;
  letter-spacing:-.2px; color:#eaf6ff; text-shadow:0 0 14px rgba(57,217,255,0.25); }
.pf-mode-toggle{ flex:0 0 auto; }
/* Low-profile account badges for the Bots tab: LIVE = neon green, PAPER = cyan */
.badge-mode-live{ background:rgba(0,214,143,.10); color:#00d68f; border:1px solid rgba(0,214,143,.55);
  letter-spacing:.6px; font-weight:700; }
.badge-mode-paper{ background:rgba(57,217,255,.08); color:#57d9ff; border:1px solid rgba(57,217,255,.4);
  letter-spacing:.6px; font-weight:700; }
.holo-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.holo-total-value{ font-size:38px; font-weight:800; letter-spacing:-0.5px; line-height:1.05;
  color:#fff; text-shadow:0 0 18px rgba(57,217,255,0.35); font-variant-numeric:tabular-nums; }
.holo-total-sub{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.pf-delta{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

.holo-tf{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.holo-tf-lbl{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(234,246,255,0.6); }
.holo-select{
  width:auto; min-width:120px; cursor:pointer; color:#eaf6ff;
  background:rgba(10,24,45,0.55); border:1px solid rgba(57,217,255,0.4);
  border-radius:9px; padding:8px 12px; font-weight:600;
  box-shadow:0 0 14px rgba(57,217,255,0.12), inset 0 0 10px rgba(57,217,255,0.05);
}
.holo-select:focus{ outline:none; border-color:var(--holo); box-shadow:0 0 0 3px rgba(57,217,255,0.18); }
.holo-select option{ background:#0a182d; color:#eaf6ff; }

.holo-chart-wrap{ position:relative; width:100%; height:300px; margin-top:14px; }
.holo-chart{ position:absolute; inset:0; }

/* Market-offline stamp over the main chart (glassmorphic warning) */
.market-overlay{ position:absolute; inset:0; z-index:5; display:flex; align-items:center;
  justify-content:center; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,77,106,0.06), rgba(8,14,26,0.34)); }
.market-overlay-box{ text-align:center; padding:18px 26px; border-radius:14px;
  background:rgba(24,10,14,0.34); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,77,106,0.5);
  box-shadow:0 0 30px rgba(255,77,106,0.28), inset 0 0 22px rgba(255,77,106,0.08); }
.market-overlay-title{ font-size:18px; font-weight:800; letter-spacing:2px; color:#ff6b7f;
  text-shadow:0 0 16px rgba(255,77,106,0.6); }
.market-overlay-sub{ font-size:12px; color:#f3c6cd; margin-top:6px; max-width:420px; line-height:1.5; }

/* Per-bot SYSTEM HALT banner in the Bots tab */
.bot-halt{ margin:2px 0 10px; padding:8px 11px; border-radius:8px; font-size:11.5px; font-weight:600;
  color:#ffd36b; background:rgba(255,179,71,0.09); border:1px solid rgba(255,179,71,0.45);
  box-shadow:inset 0 0 16px rgba(255,179,71,0.06); line-height:1.5; }

/* Task 4: bot auto-paused for an exhausted allocated balance */
.bot-lowfunds{ margin:2px 0 10px; padding:9px 12px; border-radius:8px; font-size:12px; font-weight:600;
  color:#ff9db0; background:rgba(255,77,106,0.10); border:1px solid rgba(255,77,106,0.50);
  box-shadow:inset 0 0 16px rgba(255,77,106,0.07); line-height:1.5; }

/* Winner / Loser */
.perf-wl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.perf-wl{ border-radius:12px; padding:14px 16px; background:rgba(10,24,45,0.20);
  border:1px solid rgba(57,217,255,0.18); }
.perf-wl-win{ border-left:3px solid var(--green); box-shadow:inset 0 0 22px rgba(0,214,143,0.07); }
.perf-wl-lose{ border-left:3px solid var(--red); box-shadow:inset 0 0 22px rgba(255,77,106,0.07); }
.perf-wl-tag{ font-size:11px; color:rgba(234,246,255,0.7); margin-bottom:6px; }
.perf-wl-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
.perf-wl-val{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; }

/* Active Bots accordion */
.active-bots-head{ width:100%; display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,24,45,0.32); border:1px solid rgba(57,217,255,0.3); color:#eaf6ff;
  border-radius:11px; padding:11px 15px; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:0 0 16px rgba(57,217,255,0.10); transition:background .15s; }
.active-bots-head:hover{ background:rgba(16,34,60,0.5); }
.active-bots-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px;
  height:20px; padding:0 6px; margin-left:8px; border-radius:10px; font-size:11px;
  background:rgba(57,217,255,0.18); color:var(--holo); }
.active-bots-caret{ transition:transform .2s; color:var(--holo); }
.active-bots.collapsed .active-bots-caret{ transform:rotate(-90deg); }
.active-bots.collapsed .active-bots-list{ display:none; }
.active-bots-list{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }

.mini-bot{ border-radius:12px; border:1px solid rgba(57,217,255,0.2);
  background:rgba(8,20,40,0.24); overflow:hidden; }
.mini-bot-row{ display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:pointer;
  transition:background .15s; }
.mini-bot-row:hover{ background:rgba(57,217,255,0.06); }
.mini-bot-main{ flex:1; min-width:0; }
.mini-bot-name{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.mini-bot-tickers{ font-size:11px; color:rgba(234,246,255,0.6); margin-top:3px; }
.mini-bot-tickers .tk{ display:inline-block; padding:1px 7px; margin-right:5px; border-radius:20px;
  background:rgba(57,217,255,0.12); color:var(--holo); font-weight:600; }
.mini-bot-alloc{ text-align:right; font-variant-numeric:tabular-nums; }
.mini-bot-alloc .amt{ font-weight:700; font-size:14px; }
.mini-bot-alloc .pl{ font-size:12px; font-weight:700; }
.mini-bot-caret{ color:var(--holo); transition:transform .2s; width:14px; text-align:center; }
.mini-bot.open .mini-bot-caret{ transform:rotate(90deg); }
.mini-bot-panel{ display:none; padding:0 15px 15px; border-top:1px solid rgba(57,217,255,0.12); }
.mini-bot.open .mini-bot-panel{ display:block; }
.mini-bot-legend{ font-size:11px; color:rgba(234,246,255,0.65); margin:10px 0 6px; }
.mini-bot-legend .legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:4px; vertical-align:middle; }
.mini-bot-chart{ width:100%; height:200px; }

@media(max-width:680px){ .perf-wl-grid{ grid-template-columns:1fr; } .holo-total-value{ font-size:30px; } }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD SHELL — full-bleed stages (AdSense Auto Ads; no sidebars)
   ════════════════════════════════════════════════════════════════════ */
.page.dash-shell{
  display:block;
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.dash-main{
  min-width:0;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

/* ── Shared stage canvas (Portfolio is source of truth) ───────────────
   .portfolio-stage keeps its own background-image; other tabs
   copy the same box model so every view shares full-bleed art. */
.tab-stage{
  position:relative;
  margin:0;
  width:100%;
  max-width:100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#070b14;
  border-radius:0;
  padding:0;
  min-height:calc(100vh - var(--topbar-h) - var(--nav-h));
  overflow:visible;
}
.auth-stage{
  position:relative;
  margin:0;
  width:100%;
  max-width:100%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#070b14;
  border-radius:0;
  padding:0;
  overflow:visible;
}
/* Portfolio stage already defines the same box model — do not alter it.
   Other tabs only set their background-image. */
#view-stocks.tab-stage  { background-image:url("/static/images/markets-background1.png"); }
#view-bots.tab-stage    { background-image:url("/static/images/bots-background1.png"); }
#view-news.tab-stage    { background-image:url("/static/images/news-background1.png"); }
#view-history.tab-stage { background-image:url("/static/images/history-background1.png"); }
#view-assets.tab-stage  { background-image:url("/static/images/assets-background1.png"); }
#view-account.tab-stage { background-image:url("/static/images/account-background1.png"); }

/* Glass cards over tab backgrounds stay readable (same treatment as Portfolio holo cards) */
.tab-stage .card,
.auth-stage .card{
  background:linear-gradient(160deg, rgba(14,30,56,0.82), rgba(8,16,34,0.74));
  backdrop-filter:blur(8px) saturate(125%);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
  border-color:rgba(57,217,255,0.22);
  color:#eaf6ff;
}
.tab-stage .bot-card{
  background:linear-gradient(160deg, rgba(14,30,56,0.82), rgba(8,16,34,0.74));
  backdrop-filter:blur(8px) saturate(125%);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
}

/* ── Sign-Up / Login: same centered dash-shell as dashboard ─ */
#auth-screen{
  min-height:100vh;
  margin:0;
  padding:0;
  background:transparent; /* image lives on .auth-stage like tab backgrounds */
}
.page.dash-shell.auth-shell{
  min-height:100vh;
  padding:0;
}
.auth-stage{
  min-height:100vh;
  background-image:url("/static/images/signup-background1.png");
}
.auth-overlay{
  min-height:100vh;
  justify-content:center;
  padding:24px 16px 32px;
  pointer-events:none;
}
.auth-overlay > *{ pointer-events:auto; }
.auth-panel{
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.auth-brand{ text-align:center; margin-bottom:1.75rem; }
.auth-brand-title{ font-size:28px; font-weight:700; letter-spacing:-.5px; line-height:1.15; }
.auth-brand-sub{ font-size:14px; color:var(--t2); margin-top:8px; }
#auth-screen .card{
  background:linear-gradient(160deg, rgba(14,30,56,0.88), rgba(8,16,34,0.80));
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(57,217,255,0.22);
}

/* ===== First-run onboarding walkthrough ===== */
/* Dim backdrop behind the welcome modal (blocks interaction). */
#tour-welcome-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:6000;padding:16px;backdrop-filter:blur(3px)}
.tour-welcome{background:linear-gradient(160deg,rgba(20,26,40,.98),rgba(11,15,24,.98));border:1px solid rgba(77,159,255,.35);border-radius:16px;width:100%;max-width:640px;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.tour-welcome-body{display:flex;align-items:stretch;gap:0}
.tour-welcome-text{flex:1 1 55%;padding:28px 26px;display:flex;flex-direction:column;justify-content:center}
.tour-welcome-text h2{margin:0 0 12px;font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--t1);line-height:1.25}
.tour-welcome-text p{margin:0 0 20px;font-size:14px;line-height:1.6;color:var(--t2)}
.tour-welcome-actions{display:flex;gap:10px;flex-wrap:wrap}
.tour-welcome-img{flex:0 0 42%;background:rgba(77,159,255,.06);display:flex;align-items:center;justify-content:center;padding:18px}
.tour-welcome-img img{width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:12px}
@media (max-width:560px){.tour-welcome-body{flex-direction:column-reverse}.tour-welcome-img{flex:none}.tour-welcome-img img{max-height:150px}}

/* Spotlight cutout: the huge box-shadow dims everything except the target. */
#tour-spotlight{position:fixed;z-index:6050;border-radius:10px;pointer-events:none;transition:all .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 0 9999px rgba(0,0,0,.66),0 0 0 3px var(--blue),0 0 22px 5px rgba(77,159,255,.55)}

/* Tour bubble (both big description cards and small pointer bubbles). */
#tour-bubble{position:fixed;z-index:6100;background:linear-gradient(160deg,rgba(20,26,40,.99),rgba(11,15,24,.99));
  border:1px solid rgba(77,159,255,.4);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  padding:16px 18px;transition:top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1)}
#tour-bubble.tour-big{width:min(520px,92vw)}
#tour-bubble.tour-small{width:min(320px,88vw)}
.tour-bubble-inner{display:flex;gap:14px;align-items:flex-start}
#tour-bubble.tour-small .tour-bubble-inner{gap:10px}
.tour-bubble-img{flex:0 0 auto;border-radius:10px;object-fit:contain;background:rgba(77,159,255,.06)}
#tour-bubble.tour-big .tour-bubble-img{width:120px;height:120px;padding:6px}
#tour-bubble.tour-small .tour-bubble-img{width:52px;height:52px;padding:4px}
.tour-bubble-content{flex:1 1 auto;min-width:0}
.tour-bubble-content h3{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.2px}
.tour-bubble-content p{margin:0;font-size:13px;line-height:1.55;color:var(--t2)}
#tour-bubble.tour-small .tour-bubble-content p{font-size:12.5px}
.tour-bubble-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.tour-progress{font-size:11px;color:var(--t3);white-space:nowrap}
.tour-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.tour-skip{background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;padding:4px 6px;font-family:inherit}
.tour-skip:hover{color:var(--t1);text-decoration:underline}
.tour-hint{font-size:12px;color:var(--blue);font-weight:700}

/* Arrow: a rotated square notch on the bubble edge pointing at the target. */
.tour-arrow{position:absolute;width:14px;height:14px;background:linear-gradient(160deg,rgba(20,26,40,.99),rgba(11,15,24,.99));
  border-left:1px solid rgba(77,159,255,.4);border-top:1px solid rgba(77,159,255,.4);transform:rotate(45deg)}
.tour-arrow.arrow-top{top:-8px}
.tour-arrow.arrow-bottom{bottom:-8px;transform:rotate(225deg)}