:root {
  --bg: #0a0d13;
  --bg2: #131924;
  --bg3: #1a2130;
  --border: #262e40;
  --text: #e8edf4;
  --muted: #8b98a9;
  --green: #26d47a;
  --red: #ff5c72;
  --accent: #f5a623;
  --accent2: #4da3ff;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .35);
  --radius: 12px;
  --glow1: rgba(245, 166, 35, .06);
  --glow2: rgba(77, 163, 255, .06);
}

:root[data-theme="light"] {
  --bg: #f4f6fa;
  --bg2: #ffffff;
  --bg3: #eef1f7;
  --border: #dde3ee;
  --text: #17202f;
  --muted: #667085;
  --green: #178a51;
  --red: #d92d4c;
  --accent: #c9740a;
  --accent2: #2668c4;
  --shadow-sm: 0 2px 8px rgba(23, 32, 47, .06);
  --shadow-md: 0 8px 28px rgba(23, 32, 47, .12);
  --glow1: rgba(201, 116, 10, .05);
  --glow2: rgba(38, 104, 196, .05);
}
:root[data-theme="light"] input,
:root[data-theme="light"] select { color-scheme: light; }
:root[data-theme="light"] ::selection { background: rgba(201, 116, 10, .25); }

* { box-sizing: border-box; margin: 0; padding: 0; }

a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

::selection { background: rgba(245, 166, 35, .35); color: var(--text); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

body {
  background:
    radial-gradient(1100px 550px at 12% -12%, var(--glow1), transparent 60%),
    radial-gradient(900px 500px at 105% -4%, var(--glow2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  min-height: 100vh;
  transition: background-color .2s ease, color .2s ease;
}

button, .tab, input, select { transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }

/* ---------- header ---------- */
header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand stats right";
  align-items: start;
  gap: 10px 18px;
  padding: 8px 18px 6px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; grid-area: brand; align-self: start; }
/* The crest SVG is self-contained (navy disc + gold ring), so it needs no square
   background — just a soft shadow for depth. */
.logo {
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}
/* Intermittent premium shine: a light band sweeps across the crest, then rests. */
@keyframes logoShine {
  0%   { transform: translateX(-52px) skewX(-16deg); }
  14%  { transform: translateX(118px) skewX(-16deg); }
  100% { transform: translateX(118px) skewX(-16deg); }
}
.logo-shine {
  transform-box: fill-box;
  transform-origin: center;
  animation: logoShine 5.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .logo-shine { animation: none; opacity: 0; } }
.brand h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.tagline { font-size: 12px; color: var(--muted); }

.header-stats { display: flex; gap: 14px; min-width: 0; grid-area: stats; align-self: center; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; }
.hstat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hstat-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  grid-area: right;
  justify-self: end;
  align-self: center;
  flex-wrap: nowrap;
}
.header-topline,
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  width: auto;
}
/* The account block (email + plan + Log Out) sits directly beside the broker/tool
   buttons, so without grouping it reads as just more buttons and people can't find
   their own email or the way out. Enclose it as one distinct pill, with clear space
   before the action buttons that follow. */
.auth-area { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.auth-area .badge { white-space: nowrap; }
.auth-area .btn { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* Rounded account pill — only when signed in (email + Log Out). */
.auth-area.signed-in {
  padding: 4px 5px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg3);
  margin-right: 14px;
  height: 36px;
  box-sizing: border-box;
}
.auth-area.signed-in #btn-logout { height: 28px; padding: 0 12px; border-color: var(--border); }
/* Separate the tool/broker buttons from the account block with a quiet divider. */
.header-actions { border-left: 1px solid var(--border); padding-left: 12px; }
/* Uniform, professional header buttons: one shared height, vertically centred content,
   and icon-only buttons as true squares so the row reads as a clean toolbar rather than
   a scatter of differently-sized boxes. */
.header-actions .btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.header-actions .btn-icon {
  width: 36px;
  padding: 0;
  font-size: 15px;
}
@media (max-width: 720px) {
  /* Stacked header on phones — a left divider/indent would just look broken. */
  .header-actions { border-left: 0; padding-left: 0; }
  .auth-area.signed-in { margin-right: 0; }
}
.badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge.live { color: var(--green); border-color: var(--green); }
.badge.sim { color: var(--accent); border-color: var(--accent); }
.badge.open { color: var(--green); border-color: var(--green); }
.badge.closed { color: var(--muted); }

/* ---------- tabs ---------- */
#tabs {
  display: flex;
  gap: 4px;
  padding: 10px 24px 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  overflow-x: hidden;
  flex-wrap: wrap;
  /* Stay visible while scrolling — the header above scrolls away, the tab bar doesn't.
     z-index must stay below the modal overlay's 50 or tabs would float over open dialogs. */
  position: sticky;
  top: 0;
  z-index: 40;
}
.tab {
  background: none; border: none;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }

/* ---------- paper trading banner & ICICI connect ---------- */
.banner-paper {
  background: rgba(245, 166, 35, .1);
  border: 1px solid rgba(245, 166, 35, .4);
  color: var(--accent);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.banner-paper strong { color: var(--text); }
.icici-connect-banner {
  background: rgba(77, 163, 255, .1);
  border: 1px solid rgba(77, 163, 255, .4);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.icici-connect-banner .msg { flex: 1; font-size: 13.5px; }
.icici-step { margin: 10px 0; padding: 12px 14px; background: var(--bg3); border-radius: 10px; border: 1px solid var(--border); }
.icici-step h4 { font-size: 13px; margin-bottom: 8px; color: var(--accent); }
.icici-step .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 6px; }
.icici-step input { flex: 1; min-width: 200px; }

/* ---------- index ticker ---------- */
#ticker {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  padding: 7px 24px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tick-item { padding-left: 10px; border-left: 2px solid var(--border); border-radius: 2px; }
.tick-item strong { color: var(--accent); font-size: 12px; margin-right: 6px; }
.tick-updated { color: var(--muted); font-size: 12px; margin-left: auto; display: flex; align-items: center; gap: 7px; }
.tick-updated::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 0 rgba(38, 212, 122, .6);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 212, 122, .5); }
  70% { box-shadow: 0 0 0 5px rgba(38, 212, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 212, 122, 0); }
}

@keyframes flashUp { 0% { background: rgba(46, 204, 113, .35); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(255, 92, 92, .35); } 100% { background: transparent; } }
.flash-up { animation: flashUp 1.6s ease-out; }
.flash-down { animation: flashDown 1.6s ease-out; }

/* ---------- layout ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; }
.loading-screen { text-align: center; padding: 100px 0; color: var(--muted); font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bg3); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.panel-head h2 { font-size: 16px; }
.muted { color: var(--muted); font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }
.small { font-size: 12.5px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.card .value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .sub { font-size: 12.5px; margin-top: 2px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--border); font-size: 13.5px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
th:first-child, td:first-child { text-align: left; }
tbody tr { cursor: pointer; transition: background .12s ease; }
tbody tr:hover { background: var(--bg3); box-shadow: inset 3px 0 0 var(--accent2); }
.sym { font-weight: 700; }
.sym .name { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.up { color: var(--green); }
.down { color: var(--red); }
.sector-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
}
.star { cursor: pointer; font-size: 15px; opacity: .35; }
.star.on { opacity: 1; }
.empty { color: var(--muted); padding: 18px 4px; font-size: 14px; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #14100a; box-shadow: 0 3px 12px rgba(245, 166, 35, .25); }
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(245, 166, 35, .35); }
.btn-buy { background: var(--green); border-color: var(--green); color: #06220f; box-shadow: 0 3px 12px rgba(38, 212, 122, .2); }
.btn-sell { background: var(--red); border-color: var(--red); color: #2b0808; box-shadow: 0 3px 12px rgba(255, 92, 114, .2); }
.btn-ghost { background: none; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn.seg { border-radius: 0; }
.btn.seg:first-child { border-radius: 8px 0 0 8px; }
.btn.seg:last-child { border-radius: 0 8px 8px 0; }
.btn.seg.active { background: var(--accent); color: #14100a; border-color: var(--accent); }

input, select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  color-scheme: dark;
}
input:focus, select:focus { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(77, 163, 255, .18); }
#market-search { width: 240px; }

/* ---------- dashboard panel grid & widgets ---------- */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel-grid .panel { margin-bottom: 20px; }
/* !important is deliberate: most .panel-grid uses set grid-template-columns inline,
   which would otherwise beat this rule and keep two columns on a phone — squeezing
   each panel to ~166px and making its tables unreadable. */
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr !important; } }

.mini-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.mini-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.mini-form input, .mini-form select { padding: 6px 8px; font-size: 13px; max-width: 130px; }

.signal-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; align-items: baseline; }
.signal-item:last-child { border-bottom: none; }
.signal-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; font-weight: 700; }
.signal-tag.hot { background: rgba(255,92,92,.15); color: var(--red); border: 1px solid rgba(255,92,92,.4); }
.signal-tag.cool { background: rgba(46,204,113,.15); color: var(--green); border: 1px solid rgba(46,204,113,.4); }

.movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mover-col h3 { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.mover-row { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mover-row:hover { background: var(--bg3); }
.cmdk-row.active, .cmdk-row:hover { background: var(--bg3); }
#cmdk-results { display: flex; flex-direction: column; gap: 2px; }

.pie-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pie-legend { font-size: 13px; display: flex; flex-direction: column; gap: 5px; }
.pie-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.warn-chip { margin-top: 10px; font-size: 12.5px; color: var(--accent); }

.coach-panel { margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg3); display: flex; flex-direction: column; gap: 8px; }
.coach-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.coach-sub { font-size: 11px; font-weight: 600; color: var(--accent2); margin-top: 4px; }
.coach-item { font-size: 12.5px; line-height: 1.5; display: flex; gap: 8px; }
.coach-item .icon { flex-shrink: 0; }
.coach-item.good { color: var(--green); }

/* Recent product events: readable timestamp + key/value meta chips (not raw JSON). */
.evt-time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.meta-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px; margin: 1px 0; border-radius: 999px;
  background: var(--bg3); border: 1px solid var(--border); font-size: 11.5px; white-space: nowrap;
}
.meta-k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }

/* Fixed-income product facts: min/max/lock-in/senior grid + "how to buy for real". */
.fi-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px; margin-top: 12px;
}
.fi-fact { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); }
.fi-fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fi-fact-value { font-size: 13px; font-weight: 600; margin-top: 2px; }
.fi-buy-real {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.55;
}
.fi-buy-real em { color: var(--accent2); font-style: normal; }

/* Product Status — one card per signal: icon, label + state pill, plain-English note. */
.status-grid { display: grid; gap: 8px; }
.status-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg2); transition: border-color .15s ease;
}
.status-row:hover { border-color: var(--accent2); }
.status-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: 14px; line-height: 1.5; }
.status-main { flex: 1; min-width: 0; }
.status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; }
.status-line strong { font-weight: 650; }
.status-note { color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 3px; }
.status-note strong { color: var(--text); font-weight: 600; }
@media (max-width: 480px) { .status-row { padding: 8px 9px; } .status-note { font-size: 11.5px; } }

.news-item { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; }
.news-item:last-child { border-bottom: none; }
.news-item a { color: var(--text); text-decoration: none; }
.news-item a:hover { color: var(--accent2); }
.news-item .name { display: block; font-size: 11.5px; color: var(--muted); }

#portfolio-sel { max-width: 140px; padding: 6px 8px; font-size: 13px; }

.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.month-grid td.up, .month-grid td.down { font-weight: 600; }

/* ---------- correlation heatmap ---------- */
.corr-table { border-collapse: collapse; font-size: 12px; }
.corr-table th, .corr-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.corr-table th { color: var(--muted); font-weight: 600; }
.corr-table th:first-child, .corr-table td:first-child { text-align: left; font-weight: 700; color: var(--text); }

/* ---------- score math breakdown ---------- */
.score-math { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; }
.score-math table { font-size: 12.5px; }
.score-math td, .score-math th { padding: 4px 6px; }
.math-toggle { background: none; border: none; color: var(--accent2); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- attribution ---------- */
.attr-bar-wrap { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin: 12px 0; border: 1px solid var(--border); }
.attr-bar { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0b0f14; white-space: nowrap; overflow: hidden; }

/* ---------- recommendations ---------- */
#recommend-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.reco-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.reco-top { display: flex; justify-content: space-between; align-items: flex-start; }
.reco-rank { font-size: 12px; color: var(--accent); font-weight: 700; }
.score-pill {
  font-size: 13px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(46, 204, 113, .15); color: var(--green);
  border: 1px solid rgba(46, 204, 113, .4);
}
/* ---------------- professional polish layer ---------------- */
:root {
  --success: #2ecc71; --danger: #ff5c5c; --warn: #f5a623; --info: #4da3ff;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body { font-family: var(--font); }
h1 { font-size: 24px; } h2 { font-size: 16px; } h3 { font-size: 13px; letter-spacing: .4px; }

/* numerals that line up, money that reads like a statement */
table { font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) { background: rgba(128, 140, 160, 0.05); }

/* keyboard users get visible focus, mouse users don't get rings */
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* comfortable touch targets */
.btn { min-height: 32px; }
@media (max-width: 640px) { .btn, select, input { min-height: 42px; } }

/* skeleton shimmer for loading states */
.skeleton {
  border-radius: 8px; min-height: 60px;
  background: linear-gradient(100deg, transparent 30%, rgba(128,140,160,.12) 50%, transparent 70%) var(--bg2);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* styled dialogs (replaces native confirm/prompt) */
#app-dialog {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 10, 14, 0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#app-dialog .dlg-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; max-width: 480px; width: 100%;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
#app-dialog .dlg-msg { white-space: pre-line; font-size: 14px; line-height: 1.55; }
#app-dialog input { width: 100%; margin-top: 12px; }
#app-dialog .dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* site footer */
#site-footer {
  border-top: 1px solid var(--border); margin-top: 40px; padding: 22px 24px 30px;
  font-size: 12px; color: var(--muted); text-align: center; line-height: 1.7;
}
#site-footer a { color: var(--muted); text-decoration: underline; margin: 0 6px; }
#site-footer a:hover { color: var(--fg); }

/* static info pages (about/terms/faq/…) */
.page-doc { max-width: 760px; margin: 40px auto; padding: 0 20px; line-height: 1.7; font-size: 14px; }
.page-doc h1 { margin-bottom: 4px; } .page-doc h2 { margin: 26px 0 8px; font-size: 15px; }
.page-doc p, .page-doc li { color: var(--fg); }

/* Pre-login landing overlay */
#landing {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: var(--bg);
  /* Top-align content: the page is taller than the viewport, and centering it
     would push the top (the orange banner) off-screen and out of scroll reach. */
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center; padding: 88px 18px 30px;
}
.landing-inner { max-width: 980px; }

/* Landing top bar: logo left, auth buttons top-right */
#landing-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 201;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.landing-brand { display: flex; align-items: center; gap: 10px; }
.landing-brand-name { font-size: 20px; font-weight: 700; color: var(--fg); }
.landing-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.landing-topbar-actions .btn { font-size: 14px; padding: 9px 18px; font-weight: 600; }
@media (max-width: 620px) {
  #landing-topbar { padding: 10px 14px; }
  .landing-brand-name { display: none; }
  .landing-topbar-actions .btn { font-size: 12.5px; padding: 8px 12px; }
}
@media (max-width: 420px) {
  #landing { padding-top: 72px; }
  #landing-topbar { gap: 8px; padding: 9px 12px; }
  .landing-topbar-actions { flex-wrap: nowrap; gap: 5px; }
  .landing-topbar-actions .btn { padding: 7px 8px; font-size: 0; white-space: nowrap; }
  .landing-topbar-actions .btn::after { font-size: 11px; font-weight: 700; }
  #landing-top-signup::after { content: "Join"; }
  #landing-top-signin::after { content: "Sign in"; }
  #landing-top-explore::after { content: "Explore"; }
}
.landing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 10px; text-align: left;
}
.landing-grid .card .label { font-size: 14px; color: var(--fg); font-weight: 700; margin-bottom: 6px; }
.landing-grid .card .sub { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* Visual product tour on the pre-login landing page. Older long-form pitch blocks
   remain in markup for now but are deliberately hidden in favour of this focused,
   screen-led tour. */
.landing-inner > :not(.landing-showcase) { display: none; }

/* Signed-in dashboard: an information-dense but calm command centre.  The visual
   treatment is scoped to the dashboard so trading, reports and broker screens keep
   their familiar controls. */
#tab-dashboard { padding-top:8px; }
#dashboard-overview-panel { overflow:hidden; border-color:rgba(106,145,193,.25); background:linear-gradient(135deg,rgba(17,34,60,.96),rgba(17,28,49,.98)); box-shadow:0 24px 55px rgba(7,15,31,.16); }
.dashboard-overview-head { align-items:center; padding-bottom:17px; border-bottom:1px solid rgba(184,205,234,.13); }.dashboard-overview-head h2 { margin:5px 0 0; color:#f4f7fd; font-size:25px; letter-spacing:-.035em; }.dashboard-live-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#a9c6e9; font-size:11px; font-weight:700; border:1px solid rgba(118,181,226,.22); border-radius:999px; background:rgba(55,112,171,.13); }.dashboard-live-chip i { width:7px; height:7px; border-radius:50%; background:#50d99a; box-shadow:0 0 0 5px rgba(80,217,154,.12); }.dashboard-overview-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; padding-top:18px; }.dashboard-section-label { margin:0 0 9px; color:#8fa4c4; font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
.dashboard-brief { position:relative; overflow:hidden; padding:23px; border:1px solid rgba(132,180,226,.17); border-radius:16px; background:radial-gradient(circle at 92% 3%,rgba(242,175,54,.18),transparent 32%),linear-gradient(140deg,rgba(34,61,99,.82),rgba(20,38,66,.82)); }.dashboard-brief::after { content:""; position:absolute; width:220px; height:220px; right:-110px; bottom:-150px; border:1px solid rgba(255,205,103,.25); border-radius:50%; box-shadow:0 0 0 24px rgba(255,205,103,.035),0 0 0 48px rgba(255,205,103,.02); }.dashboard-brief > * { position:relative; z-index:1; }.dashboard-brief-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.dashboard-time { color:#f0bc55; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.dashboard-brief h3 { margin:8px 0 7px; color:#f7f9ff; font-size:26px; letter-spacing:-.04em; }.dashboard-brief p { max-width:480px; margin:0; color:#b6c7dc; font-size:13px; line-height:1.55; }.dashboard-market-orb { flex:0 0 90px; display:grid; justify-items:center; gap:3px; padding:12px 5px; text-align:center; border:1px solid rgba(158,196,238,.2); border-radius:13px; background:rgba(13,28,50,.35); }.dashboard-market-orb i { width:9px; height:9px; border-radius:50%; background:#53dca0; box-shadow:0 0 0 6px rgba(83,220,160,.13); }.dashboard-market-orb span { color:#ecf5ff; font-size:10px; font-weight:800; }.dashboard-market-orb small { color:#9ab2ce; font-size:8px; }.dashboard-quick-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:19px; }.dashboard-quick-actions .btn { font-size:12px; }.dashboard-quick-actions .btn-primary span { margin-left:5px; font-size:14px; }.dashboard-signal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:22px -23px -23px; background:rgba(176,200,232,.13); border-top:1px solid rgba(176,200,232,.13); }.dashboard-signal-grid > div { min-width:0; display:grid; gap:4px; padding:14px 17px; background:rgba(9,23,43,.2); }.dashboard-signal-grid small { color:#8fa8c6; font-size:9px; font-weight:800; letter-spacing:.09em; }.dashboard-signal-grid b { overflow:hidden; color:#f5f8ff; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }.dashboard-signal-grid span { color:#99aec8; font-size:10px; }
#dashboard-overview-panel .status-grid { overflow:hidden; border:1px solid rgba(156,190,228,.16); border-radius:16px; background:rgba(11,25,46,.34); } #dashboard-overview-panel .status-row { padding:13px 14px; border-color:rgba(157,187,222,.1); } #dashboard-overview-panel .status-row:hover { background:rgba(87,145,206,.08); } #dashboard-overview-panel .status-main { min-width:0; } #dashboard-overview-panel .status-note { color:#91a7c3; }
#dashboard-plan-panel,#dashboard-growth-panel,#market-pulse-panel,#portfolio-snapshot-panel { border-radius:17px; } #dashboard-plan-panel .panel-head h2,#dashboard-growth-panel .panel-head h2,#market-pulse-panel .panel-head h2 { letter-spacing:-.025em; }
@media (max-width:850px) { .dashboard-overview-grid { grid-template-columns:1fr; }.dashboard-brief h3 { font-size:23px; } }
@media (max-width:540px) { .dashboard-overview-head { align-items:flex-start; }.dashboard-live-chip { margin-top:5px; }.dashboard-brief { padding:18px; }.dashboard-brief-top { display:block; }.dashboard-market-orb { width:108px; margin-top:14px; }.dashboard-quick-actions .btn { flex:1; padding-left:10px; padding-right:10px; }.dashboard-signal-grid { grid-template-columns:1fr; margin:18px -18px -18px; }.dashboard-signal-grid > div { padding:11px 18px; }.dashboard-signal-grid > div + div { border-top:1px solid rgba(176,200,232,.13); }.dashboard-overview-head h2 { font-size:22px; } }
.landing-inner { width: min(1180px, 100%); max-width: 1180px; }
.landing-showcase { text-align: left; padding: 22px 0 56px; }
.landing-hero { min-height: 560px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 42px; align-items: center; padding: 36px 38px; border: 1px solid var(--border); border-radius: 26px; overflow: hidden; position: relative; background: radial-gradient(circle at 93% 0%, rgba(219,142,14,.18), transparent 32%), radial-gradient(circle at 5% 100%, rgba(44,150,111,.12), transparent 35%), var(--bg2); }
.landing-hero::after { content:""; position:absolute; inset:auto -110px -180px auto; width:390px; height:390px; border-radius:50%; border:1px solid rgba(224,151,30,.19); box-shadow:0 0 0 42px rgba(224,151,30,.035), 0 0 0 84px rgba(224,151,30,.025); pointer-events:none; }
.landing-hero::before { content:""; position:absolute; inset:-38%; pointer-events:none; opacity:.38; background:radial-gradient(circle at 55% 50%,rgba(63,190,142,.14),transparent 19%),radial-gradient(circle at 72% 38%,rgba(239,174,54,.14),transparent 20%); animation:hero-aurora 13s ease-in-out infinite alternate; }
.landing-hero-copy { position:relative; z-index:1; min-width:0; }
.landing-eyebrow, .feature-kicker { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.landing-eyebrow > span { width:8px; height:8px; border-radius:99px; background:#27b879; box-shadow:0 0 0 5px rgba(39,184,121,.13); }
.landing-hero h1 { margin:18px 0; font-size:clamp(37px, 4.4vw, 63px); line-height:1.04; letter-spacing:-.055em; max-width:630px; }
.landing-hero h1 em { font-family:Georgia,serif; color:var(--accent); font-weight:600; }
.landing-hero p { max-width:560px; font-size:17px; line-height:1.65; color:var(--muted); }
.landing-hero-actions { display:flex; gap:11px; flex-wrap:wrap; margin-top:27px; }
.landing-hero-actions .btn, .landing-final-cta .btn { padding:12px 19px; font-weight:700; }
.landing-proof { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; color:var(--muted); font-size:12px; font-weight:600; }
.landing-proof span::first-letter { color:#29b879; }
.landing-safety-glimpse { width:min(100%,548px); display:flex; align-items:center; gap:10px; margin-top:15px; padding:10px 12px; text-align:left; color:#d8e6fa; background:linear-gradient(100deg,rgba(77,148,207,.16),rgba(41,183,126,.11)); border:1px solid rgba(111,179,228,.28); border-radius:11px; cursor:pointer; transition:transform .2s ease,border-color .2s ease,background .2s ease; }.landing-safety-glimpse:hover,.landing-safety-glimpse:focus-visible { outline:none; transform:translateY(-2px); border-color:rgba(235,184,75,.62); background:linear-gradient(100deg,rgba(77,148,207,.23),rgba(41,183,126,.16)); }.landing-safety-glimpse > span:nth-child(2) { display:grid; gap:2px; }.landing-safety-glimpse b { font-size:12px; color:#f4f8ff; }.landing-safety-glimpse small { color:#a9bdd8; font-size:10px; }.landing-safety-glimpse > i { margin-left:auto; color:#efbc59; font-size:10px; font-style:normal; font-weight:800; white-space:nowrap; }.landing-safety-icon { display:grid; place-items:center; width:28px; height:28px; color:#76e1ad; border-radius:8px; background:rgba(88,212,156,.13); font-weight:900; }
.landing-hero-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:27px; max-width:548px; }.landing-hero-meta > div { min-height:58px; display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(124,145,178,.19); border-radius:10px; background:rgba(255,255,255,.025); }.landing-hero-meta b { color:#f0ad2f; font-size:11px; }.landing-hero-meta span { color:#aab6c9; font-size:10px; line-height:1.35; font-weight:700; }
.landing-screen { position:relative; z-index:1; min-width:0; color:#eaf0ff; border-radius:16px; overflow:visible; background:#111c32; border:1px solid rgba(255,255,255,.13); box-shadow:0 27px 60px rgba(3,9,23,.28); transform:perspective(1100px) rotateY(-5deg) rotateX(2deg); animation:screen-float 6s ease-in-out infinite; }.landing-screen > :not(.preview-insight) { overflow:hidden; }.landing-screen::before { content:""; position:absolute; z-index:-1; inset:12% -7%; background:radial-gradient(circle,rgba(58,190,142,.25),transparent 60%); filter:blur(28px); }
.preview-window-bar { height:34px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#172641; border-bottom:1px solid rgba(255,255,255,.08); font-size:10px; color:#aab9d1; }
.preview-window-bar span { width:7px; height:7px; border-radius:99px; background:#e76b6b; }.preview-window-bar span:nth-child(2){background:#e4b755}.preview-window-bar span:nth-child(3){background:#50c58e}
.preview-window-bar b { margin-left:6px; font-weight:600; }.preview-window-bar i { margin-left:auto; font-style:normal; color:#68dca5; font-weight:800; font-size:9px; }
.preview-ticker { display:flex; align-items:center; gap:7px; white-space:nowrap; overflow:hidden; padding:9px 13px; font-size:10px; color:#c8d3e8; border-bottom:1px solid rgba(255,255,255,.07); }.preview-ticker b { color:#ffb333; }.preview-ticker strong,.preview-up { color:#56d79b; }
.preview-mini-nav { display:flex; align-items:center; gap:14px; padding:8px 13px; color:#91a2bd; font-size:9px; border-bottom:1px solid rgba(255,255,255,.07); }.preview-mini-nav span.selected { color:#f7c25c; font-weight:800; }.preview-mini-nav i { margin-left:auto; padding:3px 6px; border-radius:99px; background:rgba(255,189,80,.1); color:#f2c767; font-style:normal; font-size:8px; }
.preview-dashboard-grid { display:grid; grid-template-columns: 34% 66%; min-height:326px; border-radius:0 0 16px 16px; overflow:hidden; }.preview-side { padding:18px 13px; background:#142139; border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:5px; }.preview-side small,.preview-main small,.feature-preview small { color:#91a2bd; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.preview-side small:nth-of-type(2) { margin-top:22px; }.preview-side b { font-size:15px; }.preview-side span,.preview-main span { color:#aebbd0; font-size:10px; line-height:1.35; }
.preview-main { padding:19px; }.preview-title-row { display:flex; justify-content:space-between; }.preview-title-row b { display:block; margin:4px 0; font-size:20px; }.preview-live-dot { width:9px; height:9px; background:#38ca8b; border-radius:99px; box-shadow:0 0 0 5px rgba(56,202,139,.12); animation:landing-pulse 1.8s infinite; }.preview-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:19px 0; }.preview-cards > div { padding:10px; background:#1c2c49; border:1px solid rgba(255,255,255,.07); border-radius:8px; }.preview-cards b { display:block; margin:5px 0; font-size:15px; }.preview-chart { height:108px; padding:10px; border-radius:9px; background:linear-gradient(180deg,rgba(64,213,147,.09),transparent),#182744; color:#57d59b; overflow:hidden; }.chart-label { display:block; color:#c4d0e4!important; font-size:10px!important; }.preview-chart svg { width:100%; height:76px; }.preview-chart polyline { stroke-dasharray:420; stroke-dashoffset:420; animation:chart-draw 2.4s 1s ease forwards; }
.preview-insight { position:absolute; z-index:3; right:-24px; bottom:25px; display:flex; align-items:center; gap:9px; width:245px; padding:10px 11px; border:1px solid rgba(119,222,176,.36); border-radius:10px; background:rgba(18,35,61,.95); box-shadow:0 13px 28px rgba(3,10,27,.34); }.preview-insight > span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; color:#fee0a1; background:rgba(234,173,50,.16); font-size:13px; }.preview-insight small,.preview-insight b { display:block; }.preview-insight small { color:#9eb2cf; font-size:7px; letter-spacing:.08em; }.preview-insight b { margin-top:3px; color:#edf4ff; font-size:9px; line-height:1.3; }.preview-insight i { margin-left:auto; color:#75d9a5; font-style:normal; font-size:8px; font-weight:800; }
.landing-section-heading { max-width:650px; text-align:center; margin:92px auto 34px; }.landing-section-heading > span { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.12em; }.landing-section-heading h2,.landing-flow h2,.landing-final-cta h2 { margin:10px 0; font-size:clamp(29px,3.2vw,43px); letter-spacing:-.04em; }.landing-section-heading p { color:var(--muted); line-height:1.6; }
.landing-decision-strip { display:grid; grid-template-columns:.85fr 1.15fr; gap:38px; align-items:center; margin:35px 0 -24px; padding:25px 28px; border:1px solid rgba(123,145,177,.2); border-radius:17px; background:linear-gradient(110deg,rgba(37,57,91,.52),rgba(27,41,68,.12)); }.decision-strip-title h2 { margin:8px 0 5px; font-size:27px; letter-spacing:-.04em; }.decision-strip-title p { max-width:365px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.decision-loop { display:grid; grid-template-columns:1fr 25px 1fr 25px 1fr; align-items:center; }.decision-loop > div { min-height:105px; padding:14px 11px; border-radius:12px; background:rgba(15,27,50,.42); border:1px solid rgba(145,167,200,.13); }.loop-number { display:block; margin-bottom:10px; color:#e8ae39; font-size:10px; font-weight:800; letter-spacing:.08em; }.decision-loop b,.decision-loop small { display:block; }.decision-loop b { color:var(--fg); font-size:14px; }.decision-loop small { margin-top:5px; color:var(--muted); font-size:10px; line-height:1.45; }.decision-loop > i { height:1px; margin:0 5px; background:linear-gradient(90deg,rgba(231,174,58,.65),rgba(99,210,161,.35)); position:relative; }.decision-loop > i::after { content:""; position:absolute; right:-1px; top:-3px; width:6px; height:6px; border-top:1px solid #6bd7a1; border-right:1px solid #6bd7a1; transform:rotate(45deg); }
.feature-tour-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.feature-tour-card { min-height:345px; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--bg2); box-shadow:0 12px 34px rgba(10,23,43,.06); }.feature-preview { min-height:188px; padding:16px 17px; color:#e6eefc; background:#152440; }.feature-tour-card:nth-child(even) .feature-preview { background:#1b2946; }.preview-top { display:flex; justify-content:space-between; align-items:center; color:#b9c6da; font-size:10px; }.preview-top b { color:#f3f6ff; font-size:12px; }.preview-top > span { color:#8da0bd; }.preview-filter-row { display:flex; gap:7px; margin:16px 0 10px; }.preview-filter-row i { padding:5px 7px; border:1px solid rgba(255,255,255,.17); border-radius:5px; color:#acc0dc; font-size:9px; font-style:normal; }.preview-stock-row,.sim-position,.broker-row { display:grid; grid-template-columns:1.15fr 1fr .7fr; align-items:center; padding:8px 1px; border-top:1px solid rgba(255,255,255,.09); font-size:10px; }.preview-stock-row b,.sim-position b,.broker-row b { color:#f2f6ff; }.preview-stock-row span,.sim-position span,.broker-row span { color:#adbed5; }.preview-stock-row strong,.sim-position strong,.broker-row strong { color:#61d6a0; text-align:right; font-size:10px; }
.feature-screener .feature-preview { background:radial-gradient(circle at 88% 0,rgba(52,176,139,.22),transparent 35%),#152440; }.feature-simulator .feature-preview { background:radial-gradient(circle at 85% 0,rgba(232,172,52,.2),transparent 36%),#1b2946; }.feature-risk .feature-preview { background:radial-gradient(circle at 90% 0,rgba(91,156,228,.2),transparent 35%),#152440; }.feature-broker .feature-preview { background:radial-gradient(circle at 88% 0,rgba(138,105,228,.18),transparent 35%),#1b2946; }.feature-reports .feature-preview { background:radial-gradient(circle at 88% 0,rgba(61,182,165,.2),transparent 34%),#152440; }.feature-plan .feature-preview { background:radial-gradient(circle at 88% 0,rgba(230,154,67,.2),transparent 36%),#1b2946; }
.sim-balance,.broker-value { margin:22px 0 12px; padding:13px; border-radius:9px; background:linear-gradient(135deg,rgba(66,207,143,.15),rgba(59,94,150,.15)); }.sim-balance b,.broker-value b { display:block; margin:5px 0; color:#fff; font-size:21px; }.sim-balance span,.broker-value span { color:#9fc6b2; font-size:10px; }.preview-pill { padding:3px 6px; border-radius:99px; color:#ffca75!important; background:rgba(255,187,75,.14); font-weight:800; font-size:8px!important; }.risk-gauge { display:flex; gap:24px; align-items:center; margin:18px 0 12px; }.risk-ring { width:72px; height:72px; border-radius:50%; display:grid; place-content:center; text-align:center; background:conic-gradient(#58d398 0 72%,#304766 72%); box-shadow:inset 0 0 0 7px #152440; }.risk-ring b { font-size:19px; }.risk-ring small,.risk-gauge small { color:#aebed5; font-size:9px; }.risk-gauge > div:last-child { display:flex; flex-direction:column; gap:4px; }.risk-gauge > div:last-child b { font-size:19px; }.risk-list { display:grid; gap:7px; color:#a9bdda; font-size:10px; }.risk-list span::first-letter { color:#5bd69b; }
.report-bars { height:91px; display:flex; align-items:flex-end; gap:9px; padding:15px 8px 6px; margin-top:15px; background:repeating-linear-gradient(0deg,transparent,transparent 25px,rgba(255,255,255,.06) 26px); }.report-bars i { flex:1; min-height:14px; border-radius:4px 4px 1px 1px; background:linear-gradient(#6ccca0,#2d896d); }.report-foot { display:flex; justify-content:space-between; padding-top:13px; color:#aebed5; font-size:9px; }.report-foot b { display:block; margin-top:4px; color:#f1f5ff; font-size:12px; }.goal-line { display:flex; justify-content:space-between; align-items:center; margin:20px 0 9px; }.goal-line b,.goal-line small { display:block; }.goal-line b { font-size:12px; }.goal-line small,.activity-line small { color:#a8b9d0; font-size:9px; margin-top:4px; }.goal-line strong { color:#67d6a1; font-size:18px; }.goal-progress { height:7px; overflow:hidden; border-radius:9px; background:#334560; }.goal-progress i { display:block; height:100%; width:62%; background:linear-gradient(90deg,#e6a52d,#61d498); border-radius:inherit; }.activity-line { display:flex; gap:9px; align-items:center; padding-top:11px; color:#eff4ff; font-size:10px; }.activity-line b { display:block; }.activity-dot { width:8px; height:8px; border-radius:50%; background:#63d69e; box-shadow:0 0 0 4px rgba(99,214,158,.12); }.activity-dot.gold { background:#e9b14a; box-shadow:0 0 0 4px rgba(233,177,74,.12); }
.feature-copy { padding:19px 21px 22px; }.feature-copy h3 { margin:7px 0; font-size:19px; letter-spacing:-.025em; }.feature-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.62; }
.feature-tour-card { cursor:pointer; transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; }.feature-tour-card:hover,.feature-tour-card.is-featured { transform:translateY(-5px); border-color:rgba(225,155,35,.58); box-shadow:0 20px 42px rgba(10,23,43,.14); }.feature-tour-card:focus-visible { outline:3px solid rgba(225,155,35,.65); outline-offset:3px; }.feature-copy h3 small { float:right; margin-top:5px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.03em; }.preview-tick-pulse { display:block; width:7px; height:7px; margin-left:auto; border-radius:50%; background:#50d69b; box-shadow:0 0 0 0 rgba(80,214,155,.5); animation:landing-pulse 1.8s infinite; }.preview-ticker strong.is-down { color:#ff8b94; }@keyframes landing-pulse { 70% { box-shadow:0 0 0 7px rgba(80,214,155,0); } 100% { box-shadow:0 0 0 0 rgba(80,214,155,0); } }
.landing-motion-ready .feature-tour-card,.landing-motion-ready .landing-flow,.landing-motion-ready .landing-start-card,.landing-motion-ready .landing-final-cta { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease,box-shadow .24s ease,border-color .24s ease; }.landing-motion-ready .feature-tour-card.is-visible,.landing-motion-ready .landing-flow.is-visible,.landing-motion-ready .landing-start-card.is-visible,.landing-motion-ready .landing-final-cta.is-visible { opacity:1; transform:translateY(0); }.landing-motion-ready .feature-tour-card:nth-child(2),.landing-motion-ready .landing-start-card:nth-child(2) { transition-delay:.06s; }.landing-motion-ready .feature-tour-card:nth-child(3),.landing-motion-ready .landing-start-card:nth-child(3) { transition-delay:.1s; }.landing-motion-ready .feature-tour-card:nth-child(4) { transition-delay:.14s; }.landing-motion-ready .feature-tour-card:nth-child(5) { transition-delay:.18s; }.landing-motion-ready .feature-tour-card:nth-child(6) { transition-delay:.22s; }
.landing-motion-ready .feature-tour-card.is-visible.is-featured { transform:translateY(-5px); }
.landing-flow { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; margin:72px 0; padding:34px 38px; border-radius:19px; background:linear-gradient(110deg,rgba(201,132,24,.12),rgba(50,141,115,.08)); border:1px solid rgba(202,153,60,.22); }.landing-flow h2 { max-width:430px; }.landing-flow ol { margin:0; padding:0; display:grid; gap:19px; list-style:none; }.landing-flow li { display:flex; gap:13px; align-items:flex-start; }.landing-flow li > b { color:var(--accent); font-size:12px; padding-top:2px; }.landing-flow li span { display:grid; gap:4px; color:var(--muted); font-size:13px; line-height:1.5; }.landing-flow li strong { color:var(--fg); font-size:14px; }.landing-final-cta { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:40px; border-radius:20px; background:#151f35; color:#f7f9ff; overflow:hidden; position:relative; }.landing-final-cta::before { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,194,75,.25); border-radius:50%; right:-96px; top:-160px; }.landing-final-cta > * { position:relative; z-index:1; }.landing-final-cta h2 { margin-bottom:7px; }.landing-final-cta p { margin:0; color:#bdc9db; max-width:590px; }
.landing-start { margin:0 0 72px; }.landing-start-head { max-width:580px; margin-bottom:24px; }.landing-start-head h2 { margin:8px 0; font-size:clamp(28px,3vw,40px); letter-spacing:-.045em; }.landing-start-head p { margin:0; color:var(--muted); line-height:1.6; }.landing-start-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.landing-start-card { min-height:195px; padding:21px; border:1px solid var(--border); border-radius:16px; cursor:pointer; position:relative; overflow:hidden; transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }.landing-start-card::after { content:""; position:absolute; width:180px; height:180px; right:-76px; bottom:-106px; border-radius:50%; opacity:.68; }.landing-start-card > * { position:relative; z-index:1; }.landing-start-card > span { color:#e2ad42; font-size:10px; font-weight:800; letter-spacing:.1em; }.landing-start-card > i { display:block; margin:17px 0 10px; color:#d9e5f8; font-size:25px; font-style:normal; }.landing-start-card h3 { margin:0 0 7px; font-size:18px; letter-spacing:-.025em; }.landing-start-card p { min-height:38px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.landing-start-card > b { display:block; margin-top:14px; color:var(--accent); font-size:12px; }.landing-start-card > b small { margin-left:5px; font-size:14px; }.start-market { background:linear-gradient(135deg,rgba(44,141,111,.1),var(--bg2)); }.start-market::after { background:rgba(48,179,134,.13); }.start-simulator { background:linear-gradient(135deg,rgba(209,141,27,.1),var(--bg2)); }.start-simulator::after { background:rgba(226,162,46,.13); }.start-real { background:linear-gradient(135deg,rgba(88,108,203,.1),var(--bg2)); }.start-real::after { background:rgba(105,126,228,.14); }.landing-start-card:hover,.landing-start-card:focus-visible { transform:translateY(-5px); border-color:rgba(225,155,35,.58); box-shadow:0 18px 37px rgba(10,23,43,.12); outline:none; }.landing-start-card:hover > b small { display:inline-block; transform:translateX(4px); }
@keyframes hero-aurora { from { transform:translate3d(-3%,0,0) rotate(-6deg); } to { transform:translate3d(4%,2%,0) rotate(6deg); } }@keyframes screen-float { 0%,100% { transform:perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(0); } 50% { transform:perspective(1100px) rotateY(-5deg) rotateX(2deg) translateY(-7px); } }@keyframes chart-draw { to { stroke-dashoffset:0; } }
@media (max-width:850px) { .landing-hero { grid-template-columns:1fr; padding:32px 25px; }.landing-screen { max-width:620px; width:100%; margin:auto; transform:none; animation:none; }.preview-insight { right:14px; }.landing-decision-strip { grid-template-columns:1fr; gap:23px; margin-bottom:-24px; }.feature-tour-grid { grid-template-columns:1fr; }.landing-flow { grid-template-columns:1fr; gap:20px; }.landing-start-grid { grid-template-columns:1fr; }.landing-final-cta { align-items:flex-start; flex-direction:column; } }
@media (max-width:540px) { #landing { padding-left:12px; padding-right:12px; }.landing-showcase { padding-top:7px; }.landing-hero { padding:25px 18px; border-radius:18px; }.landing-hero h1 { font-size:37px; }.landing-hero p { font-size:15px; }.landing-hero-meta { grid-template-columns:1fr; }.preview-mini-nav { gap:8px; }.preview-mini-nav span:nth-child(3),.preview-mini-nav span:nth-child(4) { display:none; }.preview-dashboard-grid { min-height:280px; }.preview-side { padding:13px 9px; }.preview-main { padding:13px; }.preview-title-row b { font-size:16px; }.preview-cards { grid-template-columns:1fr; margin:12px 0; }.preview-chart { display:none; }.preview-insight { position:relative; inset:auto; width:auto; margin:11px 13px -8px; }.decision-loop { grid-template-columns:1fr; gap:7px; }.decision-loop > i { width:1px; height:17px; margin:auto; }.decision-loop > i::after { right:-3px; top:auto; bottom:0; transform:rotate(135deg); }.feature-tour-card { min-height:0; }.landing-flow,.landing-final-cta { padding:27px 21px; }.landing-proof { gap:8px; }.landing-proof span { font-size:10px; } }

/* Privacy mask — body.money-masked blurs money values (headline portfolio/cash/holdings
   figures plus the quantity/value/P&L columns of holdings tables). Visual only; numbers
   underneath keep updating and stay clickable-adjacent (blur, not display:none, so layout
   never shifts when toggling). */
body.money-masked #hdr-total,
body.money-masked #hdr-cash,
body.money-masked #hdr-pl,
body.money-masked #dash-cards .value,
body.money-masked #paper-cards .value,
body.money-masked #icici-holdings-table td:nth-child(3),
body.money-masked #icici-holdings-table td:nth-child(5),
body.money-masked #holdings-table td:nth-child(2),
body.money-masked #holdings-table td:nth-child(5),
body.money-masked #holdings-table td:nth-child(6),
body.money-masked #holdings-table td:nth-child(7),
body.money-masked #intraday-table td:nth-child(2),
body.money-masked #intraday-table td:nth-child(5),
body.money-masked #intraday-table td:nth-child(6),
body.money-masked #intraday-table td:nth-child(7) {
  filter: blur(9px);
  user-select: none;
}

.live-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(46, 204, 113, .15); color: var(--green);
  border: 1px solid rgba(46, 204, 113, .4);
}
.reco-reasons { list-style: none; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.reco-reasons li::before { content: "▸ "; color: var(--accent); }
.reco-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 4px; }

/* ---------- simulator ---------- */
.sim-mode { display: flex; margin-bottom: 14px; }
.sim-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.sim-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.result-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 14px 0;
}
.verdict { font-size: 15px; line-height: 1.55; margin: 10px 0; }

/* ---------- modal ---------- */
[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  /* Must sit above the landing overlay (200) and its top bar (201) so the
     sign-in/sign-up dialog is visible when opened from the landing page. */
  z-index: 300;
  padding: 20px;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-md);
  animation: modalIn .16s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer;
}
.modal h2 { margin-bottom: 2px; }
.modal .price-line { font-size: 24px; font-weight: 700; margin: 8px 0 2px; }
.range-btns { display: flex; gap: 6px; margin: 12px 0 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.stat-grid .card { padding: 10px 12px; }
.stat-grid .value { font-size: 15px; }
.trade-box {
  border-top: 1px solid var(--border);
  margin-top: 14px; padding-top: 14px;
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.trade-box label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.trade-box input { width: 130px; }
.trade-msg { font-size: 13px; margin-top: 10px; }

canvas { width: 100%; display: block; }
.chart-hover {
  position: absolute; pointer-events: none;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px;
  font-size: 12px; display: none; z-index: 5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

footer {
  max-width: 1180px; margin: 0 auto;
  padding: 16px 24px 40px;
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
  border-top: 1px solid var(--border);
}

/* toast */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); border: 1px solid var(--accent);
  padding: 10px 20px; border-radius: 10px;
  font-size: 14px; z-index: 100;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

/* Below full desktop width the brand + stats + button-heavy right side can't sit in one
   row: the stats column gets squeezed to zero and the right column (market badges) then
   overflows on top of the Cash/Portfolio values. A signed-in owner's toolbar alone is
   ~1170px, so the crush happens well above 1280 — use a high breakpoint that drops the
   right side onto its own row before the stats can collapse. */
@media (max-width: 1600px) {
  header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand stats"
      "right right";
    row-gap: 8px;
  }
  .header-right {
    justify-self: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 8px;
  }
  .header-topline, .header-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 720px) {
  header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "stats"
      "right";
  }
  .header-right { align-items: flex-start; }
  .header-topline, .header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .header-stats { gap: 12px; }
  main { padding: 14px 12px 50px; }

  /* Dense financial tables can't shrink onto a phone without becoming unreadable, and
     squeezing them makes the whole page scroll sideways. Instead let each table scroll
     inside its own panel, keep cells on one line, and pin the first column so you can
     always see which stock a row belongs to while scrolling across. */
  .panel { overflow-x: auto; }
  th, td { padding: 8px 9px; font-size: 12.5px; white-space: nowrap; }
  .sym .name { white-space: normal; }        /* the secondary company name may wrap */
  th:first-child, td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg2);                  /* opaque, or scrolled cells show through */
  }
  /* Keep the pinned cell readable on the hover/active row highlight. */
  tbody tr:hover td:first-child { background: var(--bg3); }
}

/* ---------- premium workspace chrome ----------
   A restrained “trading terminal” finish for the signed-in product: depth, subtle
   light, and clear information layers without turning financial data into decoration. */
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:.48; background:linear-gradient(rgba(121,151,193,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(121,151,193,.022) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
header { padding:10px 22px 8px; border-bottom-color:rgba(128,155,194,.22); background:linear-gradient(105deg,rgba(14,22,39,.96),rgba(19,30,51,.92)); backdrop-filter:blur(18px) saturate(135%); box-shadow:0 10px 30px rgba(0,0,0,.18); }
:root[data-theme="light"] header { background:linear-gradient(105deg,rgba(255,255,255,.96),rgba(241,246,255,.92)); }
.brand h1 { letter-spacing:-.035em; background:linear-gradient(110deg,var(--text),#d2e1f8); -webkit-background-clip:text; background-clip:text; color:transparent; }.tagline { letter-spacing:.1em; text-transform:uppercase; font-size:9px!important; }
.header-stats { gap:7px; }.hstat { min-width:94px; padding:6px 10px; border:1px solid rgba(134,163,202,.16); border-radius:10px; background:rgba(4,12,25,.19); }.hstat-value { margin-top:2px; font-size:16px; letter-spacing:-.025em; }.hstat-label { font-size:9px; font-weight:800; letter-spacing:.09em; }
#tabs { gap:6px; padding:9px 22px 7px; border-bottom-color:rgba(128,155,194,.16); background:rgba(13,22,39,.88); backdrop-filter:blur(16px) saturate(135%); box-shadow:0 8px 25px rgba(1,8,20,.08); }.tab { position:relative; padding:9px 13px; border:1px solid transparent; border-radius:9px; font-size:13px; }.tab:hover { color:var(--text); background:rgba(129,160,204,.09); }.tab.active { border-bottom-color:transparent; border-color:rgba(234,175,65,.32); background:linear-gradient(135deg,rgba(245,166,35,.19),rgba(245,166,35,.06)); box-shadow:inset 0 1px rgba(255,231,174,.14),0 5px 14px rgba(0,0,0,.1); }
:root[data-theme="light"] #tabs { background:rgba(250,252,255,.9); }
#ticker { padding:8px 26px; background:linear-gradient(90deg,rgba(20,33,55,.86),rgba(17,28,47,.72)); border-bottom-color:rgba(126,154,192,.15); }.tick-item { border-left-color:rgba(242,181,62,.5); }.tick-updated { padding:3px 8px; border:1px solid rgba(135,164,202,.16); border-radius:999px; background:rgba(7,16,31,.16); }
main { max-width:1240px; padding:26px 30px 84px; }.tab-panel { animation:workspace-in .38s cubic-bezier(.2,.8,.2,1) both; }@keyframes workspace-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.panel { border-color:rgba(128,157,198,.2); border-radius:17px; background:linear-gradient(145deg,rgba(27,39,62,.91),rgba(18,28,46,.95)); box-shadow:0 14px 34px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.025); }.panel:hover { border-color:rgba(143,176,220,.3); box-shadow:0 19px 42px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.03); }.panel-head { padding-bottom:12px; border-bottom:1px solid rgba(137,164,202,.13); }.panel-head h2 { font-size:17px; letter-spacing:-.025em; }
:root[data-theme="light"] .panel { background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(247,250,255,.98)); border-color:rgba(106,135,176,.19); box-shadow:0 12px 30px rgba(34,58,93,.08),inset 0 1px rgba(255,255,255,.75); }
.card { position:relative; overflow:hidden; min-height:96px; border-color:rgba(132,161,203,.19); border-radius:14px; background:linear-gradient(145deg,rgba(43,61,92,.55),rgba(20,31,51,.88)); box-shadow:0 10px 24px rgba(0,0,0,.1); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }.card::after { content:""; position:absolute; width:100px; height:100px; right:-58px; top:-62px; border:1px solid rgba(117,181,226,.21); border-radius:50%; }.card:hover { transform:translateY(-3px); border-color:rgba(236,181,72,.43); box-shadow:0 17px 31px rgba(0,0,0,.16); }.card .label { font-size:10px; font-weight:800; letter-spacing:.09em; }.card .value { font-size:24px; letter-spacing:-.04em; }.card .sub { color:var(--muted); line-height:1.45; }
:root[data-theme="light"] .card { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,248,255,.96)); }
.btn { border-radius:9px; font-weight:700; }.btn-primary { box-shadow:0 7px 16px rgba(210,133,19,.19); }.btn-primary:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(210,133,19,.26); }.btn-ghost { background:rgba(110,145,192,.07); }
table { overflow:hidden; border:1px solid rgba(130,158,198,.16); border-radius:12px; } th { padding-top:11px; padding-bottom:11px; color:#94a9c7; background:rgba(85,112,153,.11); } td { border-bottom-color:rgba(127,156,196,.12); } tbody tr:hover { background:linear-gradient(90deg,rgba(69,127,193,.14),rgba(69,127,193,.03)); box-shadow:inset 3px 0 0 var(--accent); }
.badge { font-weight:700; border-color:rgba(137,165,203,.24); background:rgba(91,122,166,.1); }.sector-chip { background:rgba(91,122,166,.12); border-color:rgba(139,166,202,.2); }.icici-connect-banner,.banner-paper { border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.08); }
@media (max-width:720px) { header { padding:9px 14px; }.hstat { min-width:calc(33.333% - 8px); flex:1; } #tabs { padding:8px 12px 6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }.tab { padding:8px 11px; font-size:12px; } main { padding:18px 12px 58px; }.panel { padding:16px; border-radius:15px; }.card { min-height:84px; }.card .value { font-size:21px; } }
@media (prefers-reduced-motion:reduce) { .tab-panel { animation:none; }.card,.btn { transition:none; } }

/* Real Shares gets its own portfolio-grade hierarchy: the ICICI values remain
   plainly labelled, while the visual treatment makes the P&L coverage state obvious. */
.real-shares-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:2px 0 18px; padding:28px 29px; overflow:hidden; position:relative; border:1px solid rgba(116,160,219,.29); border-radius:19px; background:radial-gradient(circle at 89% 15%,rgba(82,169,225,.22),transparent 27%),radial-gradient(circle at 6% 110%,rgba(44,206,141,.15),transparent 34%),linear-gradient(122deg,#142c50,#182843 55%,#17233a); box-shadow:0 19px 44px rgba(0,0,0,.19); }.real-shares-hero::after { content:""; position:absolute; width:310px; height:310px; right:-112px; bottom:-210px; border:1px solid rgba(150,201,255,.24); border-radius:50%; box-shadow:0 0 0 38px rgba(150,201,255,.035),0 0 0 76px rgba(150,201,255,.018); }.real-shares-hero > * { position:relative; z-index:1; }.real-eyebrow { display:flex; align-items:center; gap:7px; color:#8fbee9; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.real-eyebrow i { width:7px; height:7px; border-radius:50%; background:#55dca3; box-shadow:0 0 0 5px rgba(85,220,163,.12); }.real-shares-hero h2 { max-width:580px; margin:9px 0 7px; color:#f5f8ff; font-size:31px; letter-spacing:-.045em; }.real-shares-hero p { max-width:650px; margin:0; color:#b7c8dc; font-size:13px; line-height:1.6; }.real-shares-hero-stat { flex:0 0 185px; padding:15px 16px; border:1px solid rgba(182,215,249,.2); border-radius:14px; background:rgba(5,17,34,.31); }.real-shares-hero-stat small { display:block; color:#94adcb; font-size:9px; font-weight:800; letter-spacing:.1em; }.real-shares-hero-stat b { display:block; margin:7px 0 4px; color:#f5f8ff; font-size:25px; letter-spacing:-.05em; }.real-shares-hero-stat span { color:#a9bed6; font-size:10px; }
.real-share-cards { gap:12px; }.real-share-cards .card:first-child { background:linear-gradient(145deg,rgba(48,101,157,.6),rgba(19,38,65,.92)); }.real-share-cards .card:nth-child(3) { background:linear-gradient(145deg,rgba(36,129,94,.4),rgba(18,45,52,.91)); }
.real-pnl-readiness { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:17px 0; padding:19px 21px; border:1px solid rgba(242,180,69,.35); border-radius:16px; background:linear-gradient(105deg,rgba(175,113,28,.16),rgba(57,82,115,.1)); }.real-pnl-ring { width:71px; height:71px; display:grid; place-content:center; align-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle at center,var(--bg2) 59%,transparent 61%),conic-gradient(#f3b846 calc(var(--coverage) * 1%),rgba(156,178,211,.18) 0); }.real-pnl-ring b { color:#f4c05c; font-size:16px; }.real-pnl-ring span { color:var(--muted); font-size:8px; font-weight:700; text-transform:uppercase; }.real-pnl-readiness h3 { margin:5px 0 5px; font-size:16px; letter-spacing:-.025em; }.real-pnl-readiness p { max-width:670px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.real-pnl-readiness .btn span { margin-left:5px; }.real-pnl-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.real-pnl-meta span { padding:3px 7px; color:#aac2df; font-size:10px; border:1px solid rgba(147,177,214,.17); border-radius:999px; background:rgba(52,82,121,.15); }
.real-holdings-table { overflow:hidden; margin-top:15px; border:1px solid rgba(130,158,198,.19); border-radius:16px; background:rgba(14,25,43,.35); }.real-table-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(133,160,199,.14); }.real-table-head h3 { margin-top:4px; font-size:17px; letter-spacing:-.025em; }.real-table-head > span { padding:5px 8px; color:#a7bdd6; font-size:10px; font-weight:700; border:1px solid rgba(133,160,199,.2); border-radius:999px; background:rgba(82,112,152,.1); }.real-holdings-table table { margin:0; border:0; border-radius:0; }.real-holdings-table th { background:rgba(69,101,145,.14); }
@media (max-width:720px) { .real-shares-hero { display:block; padding:22px 19px; }.real-shares-hero h2 { font-size:25px; }.real-shares-hero-stat { width:100%; margin-top:17px; }.real-pnl-readiness { grid-template-columns:auto 1fr; padding:16px; }.real-pnl-readiness .btn { grid-column:1/-1; width:100%; }.real-table-head { padding:14px; }.real-holdings-table { overflow-x:auto; } }

.real-optional-analysis { margin:18px 0 0; border:1px solid rgba(128,157,198,.22); border-radius:14px; background:rgba(18,30,49,.42); }.real-optional-analysis summary { padding:15px 17px; color:#b9cce2; font-size:12px; font-weight:800; cursor:pointer; list-style:none; }.real-optional-analysis summary::after { content:"Show"; float:right; color:#85bce9; font-size:10px; }.real-optional-analysis[open] summary::after { content:"Hide"; }.real-optional-analysis-body { padding:0 17px 17px; }
.real-analysis-expanded { margin:20px 0 0; }.real-analysis-expanded-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:20px; border:1px solid rgba(107,164,217,.28); border-radius:17px; background:linear-gradient(135deg,rgba(20,54,88,.78),rgba(18,31,52,.92)); }.real-analysis-expanded-head h3 { margin:5px 0; color:#f4f8ff; font-size:21px; letter-spacing:-.035em; }.real-analysis-expanded-head p { margin:0; color:#b5c9df; font-size:12px; }.real-holdings-table { border-color:rgba(63,119,177,.34); background:linear-gradient(145deg,rgba(20,42,70,.96),rgba(12,27,49,.98)); box-shadow:0 14px 28px rgba(16,44,78,.15); }.real-table-head { border-bottom-color:rgba(137,192,240,.25); background:linear-gradient(90deg,rgba(40,91,145,.54),rgba(24,55,94,.56)); }.real-table-head h3 { color:#f5f9ff; }.real-table-head > span { color:#d6ecff; border-color:rgba(163,211,252,.35); background:rgba(83,148,210,.28); }.real-holdings-table th { color:#c4e4ff; background:rgba(42,91,143,.62); border-bottom-color:rgba(149,203,245,.3); }.real-holdings-table td { color:#eef6ff; border-bottom-color:rgba(131,182,226,.18); background:rgba(8,24,45,.18); }.real-holdings-table tbody tr:hover td { color:#fff; background:rgba(58,128,196,.32); }.real-holdings-table .sym { color:#fff; }.real-holdings-table .sym .name { color:#b8d2eb; }.real-holdings-table .sector-chip { color:#d5eaff; border-color:rgba(150,205,249,.32); background:rgba(87,148,207,.24); }.real-holdings-table .up { color:#58e6a3; font-weight:800; }.real-holdings-table .down { color:#ff91a4; font-weight:800; }.real-holdings-table .muted { color:#b5cce3!important; }
:root[data-theme="light"] .real-holdings-table { border-color:#9cbfe3; background:#fff; box-shadow:0 12px 26px rgba(39,80,128,.12); }:root[data-theme="light"] .real-table-head { background:linear-gradient(90deg,#dceeff,#edf6ff); border-bottom-color:#afcde9; }:root[data-theme="light"] .real-table-head h3 { color:#10294a; }:root[data-theme="light"] .real-table-head > span { color:#1e588d; border-color:#aacce9; background:#eff7ff; }:root[data-theme="light"] .real-holdings-table th { color:#194f80; background:#d8edff; border-bottom-color:#9fc7e9; }:root[data-theme="light"] .real-holdings-table td { color:#142b46; background:#fff; border-bottom-color:#d5e5f2; }:root[data-theme="light"] .real-holdings-table tbody tr:hover td { color:#0d2a4c; background:#eaf5ff; }:root[data-theme="light"] .real-holdings-table .sym { color:#102d4d; }:root[data-theme="light"] .real-holdings-table .sym .name,:root[data-theme="light"] .real-holdings-table .muted { color:#54708f!important; }:root[data-theme="light"] .real-holdings-table .sector-chip { color:#1d5e99; border-color:#b7d8f0; background:#edf7ff; }
@media (max-width:720px) { .real-analysis-expanded-head { display:block; padding:17px; }.real-analysis-expanded-head .btn { margin-top:12px; width:100%; } }

.portfolio-intelligence { margin:17px 0; padding:20px; overflow:hidden; position:relative; border:1px solid rgba(116,160,219,.22); border-radius:17px; background:linear-gradient(135deg,rgba(30,52,84,.68),rgba(18,30,49,.79)); }.portfolio-intelligence::after { content:""; position:absolute; right:-80px; top:-90px; width:210px; height:210px; border:1px solid rgba(103,177,229,.17); border-radius:50%; box-shadow:0 0 0 29px rgba(103,177,229,.025); }.portfolio-intelligence > * { position:relative; z-index:1; }.portfolio-intelligence-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:17px; }.portfolio-intelligence h3 { margin:5px 0; font-size:19px; letter-spacing:-.03em; }.portfolio-intelligence p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.intelligence-live { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:5px 8px; color:#9fc0e5; font-size:10px; font-weight:700; border:1px solid rgba(127,171,215,.2); border-radius:999px; background:rgba(47,91,143,.13); white-space:nowrap; }.intelligence-live i { width:6px; height:6px; border-radius:50%; background:#56dba1; box-shadow:0 0 0 4px rgba(86,219,161,.12); }.intelligence-grid { display:grid; grid-template-columns:1.25fr 1fr .85fr; gap:11px; }.intel-card { min-height:158px; padding:15px; border:1px solid rgba(133,162,203,.16); border-radius:13px; background:rgba(7,18,35,.22); }.intel-label { display:block; margin-bottom:13px; color:#91aac9; font-size:9px; font-weight:800; letter-spacing:.11em; }.provenance-bar { display:flex; height:9px; overflow:hidden; margin-bottom:10px; border-radius:99px; background:rgba(164,185,217,.12); }.provenance-bar i { min-width:0; }.provenance-bar i:nth-child(1) { background:#53d59b; }.provenance-bar i:nth-child(2) { background:#55a9ed; }.provenance-bar i:nth-child(3) { background:#c79af2; }.provenance-bar i:nth-child(4) { background:#e2a841; }.provenance-legend { display:flex; flex-wrap:wrap; gap:7px 9px; margin-bottom:12px; }.provenance-legend span { display:inline-flex; align-items:center; gap:4px; color:#aebed3; font-size:9px; }.provenance-legend i { width:6px; height:6px; border-radius:50%; background:#53d59b; }.provenance-legend span:nth-child(2) i { background:#55a9ed; }.provenance-legend span:nth-child(3) i { background:#c79af2; }.provenance-legend span:nth-child(4) i { background:#e2a841; }.weather-line { display:flex; align-items:baseline; gap:5px; margin:6px 0 15px; }.weather-line b { color:#edf4ff; font-size:24px; letter-spacing:-.05em; }.weather-line span { color:#a9bdd4; font-size:10px; }.weather-line i { width:1px; height:22px; margin:0 5px; background:rgba(153,178,212,.22); }.weather-impact { margin-bottom:10px; font-size:15px; font-weight:800; }.weather-impact small { margin-left:4px; color:var(--muted); font-size:10px; font-weight:500; }.blindspot-value { display:block; margin:0 0 3px; color:#f3bc52; font-size:38px; line-height:1; letter-spacing:-.06em; }.intel-blindspot strong { color:#dbe8f8; font-size:12px; }.intel-blindspot p { margin:10px 0; }.intel-blindspot .btn { margin-top:2px; }
@media (max-width:850px) { .intelligence-grid { grid-template-columns:1fr; }.intel-card { min-height:0; }.portfolio-intelligence-head { display:block; }.intelligence-live { margin-top:10px; } }

.portfolio-review { margin:17px 0; padding:21px; position:relative; overflow:hidden; border:1px solid rgba(214,165,70,.27); border-radius:18px; background:radial-gradient(circle at 96% 0%,rgba(236,177,61,.14),transparent 28%),linear-gradient(133deg,rgba(50,42,50,.55),rgba(22,31,50,.86)); }.portfolio-review::after { content:""; position:absolute; left:-62px; bottom:-118px; width:250px; height:250px; border:1px solid rgba(100,185,227,.17); border-radius:50%; box-shadow:0 0 0 34px rgba(100,185,227,.025); }.portfolio-review > * { position:relative; z-index:1; }.portfolio-review-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:17px; }.portfolio-review h3 { margin:5px 0; font-size:20px; letter-spacing:-.035em; }.portfolio-review p { max-width:730px; margin:0; color:var(--muted); font-size:12px; line-height:1.55; }.review-badge { padding:6px 9px; color:#f2c46d; font-size:10px; font-weight:800; border:1px solid rgba(231,182,76,.25); border-radius:999px; background:rgba(229,165,54,.1); white-space:nowrap; }.review-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:13px; }.review-summary article { display:grid; gap:4px; padding:14px; border:1px solid rgba(151,171,203,.16); border-radius:12px; background:rgba(6,15,29,.24); }.review-summary small { color:#96aeca; font-size:9px; font-weight:800; letter-spacing:.1em; }.review-summary b { color:#f2f6ff; font-size:25px; letter-spacing:-.05em; }.review-summary span { color:#a7b9d1; font-size:10px; line-height:1.4; }.review-list { overflow:hidden; border:1px solid rgba(143,168,204,.15); border-radius:13px; background:rgba(7,17,32,.2); }.review-row { display:grid; grid-template-columns:1.05fr .55fr 1.8fr .9fr; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid rgba(143,168,204,.11); transition:background .18s ease; }.review-row:last-child { border-bottom:0; }.review-row:hover { background:linear-gradient(90deg,rgba(83,137,204,.13),transparent); }.review-stock { display:grid; gap:3px; }.review-stock b { color:#f4f7fe; font-size:14px; }.review-stock span,.review-context span { color:#9eb0c9; font-size:10px; line-height:1.4; }.review-score { display:grid; gap:0; }.review-score b { font-size:22px; letter-spacing:-.05em; }.review-score span { color:#92a8c4; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.review-context { display:grid; gap:4px; }.review-context strong { font-size:12px; }.review-pnl { text-align:right; font-size:12px; font-weight:700; }.review-pnl .muted { margin:0; font-size:10px; }
@media (max-width:850px) { .portfolio-review-head { display:block; }.review-badge { display:inline-block; margin-top:10px; }.review-summary { grid-template-columns:1fr; }.review-row { grid-template-columns:1fr auto; }.review-context { grid-column:1/-1; }.review-pnl { text-align:left; } }

.portfolio-constellation { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; align-items:stretch; min-height:300px; margin:17px 0; padding:20px; overflow:hidden; position:relative; border:1px solid rgba(110,166,222,.29); border-radius:19px; background:radial-gradient(circle at 80% 12%,rgba(81,151,237,.2),transparent 31%),radial-gradient(circle at 4% 98%,rgba(65,216,159,.13),transparent 36%),#101d34; }.portfolio-constellation::before { content:""; position:absolute; inset:0; opacity:.42; pointer-events:none; background-image:radial-gradient(circle,rgba(199,225,255,.52) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(241,202,119,.35) 0 1px,transparent 1.6px); background-position:4% 19%,83% 73%; background-size:59px 59px,91px 91px; }.portfolio-constellation > * { position:relative; z-index:1; }.constellation-copy { padding:8px 4px; }.constellation-copy h3 { margin:6px 0 8px; color:#f2f7ff; font-size:25px; letter-spacing:-.045em; }.constellation-copy p { color:#aec1d9; font-size:12px; line-height:1.62; }.constellation-legend { display:grid; gap:8px; margin-top:22px; }.constellation-legend span { display:flex; align-items:center; gap:7px; color:#b7c9df; font-size:10px; }.constellation-legend i { width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.05); }.star-profit { background:#5ce0a5; }.star-loss { background:#ff7187; }.star-unknown { background:#6daeff; }.portfolio-sky { display:flex; align-items:center; justify-content:center; align-content:center; flex-wrap:wrap; gap:13px; min-height:255px; padding:25px; border:1px solid rgba(174,208,245,.16); border-radius:16px; background:radial-gradient(ellipse at center,rgba(81,142,211,.17),transparent 65%),rgba(4,13,29,.37); box-shadow:inset 0 0 65px rgba(20,87,157,.16); }.constellation-star { width:var(--star-size); height:var(--star-size); display:grid; place-content:center; align-content:center; gap:3px; flex:0 0 auto; border:1px solid rgba(147,211,255,.38); border-radius:50%; color:#eaf4ff; cursor:pointer; background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.5),rgba(74,143,221,.38) 24%,rgba(20,72,139,.5) 60%,rgba(12,39,81,.8)); box-shadow:0 0 0 5px rgba(92,171,238,.045),0 0 20px rgba(83,168,238,.22); transition:transform .22s ease,box-shadow .22s ease,filter .22s ease; }.constellation-star:hover,.constellation-star:focus-visible { outline:none; z-index:2; transform:scale(1.11); filter:brightness(1.14); box-shadow:0 0 0 7px rgba(118,203,255,.11),0 0 32px rgba(83,185,246,.48); }.constellation-star b { max-width:84px; overflow:hidden; font-size:clamp(8px,1vw,12px); text-overflow:ellipsis; white-space:nowrap; }.constellation-star span { color:#d5e7fa; font-size:9px; }.constellation-star.profit { border-color:rgba(105,237,173,.57); background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.6),rgba(71,202,143,.48) 25%,rgba(16,103,76,.63) 62%,rgba(9,56,54,.84)); box-shadow:0 0 20px rgba(71,218,151,.26); }.constellation-star.loss { border-color:rgba(255,128,146,.56); background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.6),rgba(231,101,122,.46) 25%,rgba(132,32,58,.61) 62%,rgba(67,17,38,.86)); box-shadow:0 0 20px rgba(243,93,120,.23); }
@media (max-width:850px) { .portfolio-constellation { grid-template-columns:1fr; }.portfolio-sky { min-height:225px; }.constellation-copy h3 { font-size:22px; } }

.purchase-postmortem { margin:17px 0; padding:22px; position:relative; overflow:hidden; border:1px solid rgba(228,124,97,.28); border-radius:18px; background:radial-gradient(circle at 100% 0%,rgba(239,136,75,.16),transparent 28%),linear-gradient(135deg,rgba(56,38,48,.62),rgba(23,29,47,.91)); }.purchase-postmortem::after { content:""; position:absolute; width:220px; height:220px; left:-110px; top:-115px; border:1px solid rgba(242,175,104,.22); border-radius:50%; box-shadow:0 0 0 34px rgba(242,175,104,.025); }.purchase-postmortem > * { position:relative; z-index:1; }.postmortem-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; }.postmortem-head h3 { margin:5px 0; font-size:21px; letter-spacing:-.035em; }.postmortem-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.postmortem-head > span { padding:6px 9px; color:#f0b578; font-size:10px; font-weight:800; border:1px solid rgba(237,166,100,.25); border-radius:999px; background:rgba(214,117,58,.11); white-space:nowrap; }.lesson-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }.lesson-grid article { display:flex; gap:11px; padding:14px; border:1px solid rgba(172,167,191,.15); border-radius:13px; background:rgba(10,16,30,.24); }.lesson-grid i { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; color:#ffc171; font-size:15px; font-style:normal; border:1px solid rgba(246,179,104,.24); border-radius:9px; background:rgba(224,133,57,.1); }.lesson-grid strong { color:#edf3fc; font-size:13px; }.lesson-grid p { margin:4px 0 6px; color:#aab8cb; font-size:11px; line-height:1.45; }.lesson-grid small { color:#edbd7e; font-size:10px; line-height:1.35; }.purchase-history { margin-top:14px; padding:15px; border:1px solid rgba(158,177,208,.15); border-radius:13px; background:rgba(7,16,30,.25); }.purchase-history h4 { margin:4px 0 11px; font-size:15px; }.purchase-trace-row { display:grid; grid-template-columns:.45fr 1.55fr 1fr; gap:12px; padding:9px 2px; border-top:1px solid rgba(151,173,205,.1); }.purchase-trace-row b { color:#eff5fd; font-size:12px; }.purchase-trace-row span { color:#a8b9cf; font-size:10px; line-height:1.4; }.purchase-trace-row span:last-child { text-align:right; color:#d1deee; }
@media (max-width:720px) { .postmortem-head { display:block; }.postmortem-head > span { display:inline-block; margin-top:10px; }.purchase-trace-row { grid-template-columns:1fr; gap:3px; }.purchase-trace-row span:last-child { text-align:left; } }

.portfolio-command-deck { margin:17px 0; padding:22px; position:relative; overflow:hidden; border:1px solid rgba(100,173,234,.31); border-radius:20px; background:radial-gradient(circle at 89% 8%,rgba(77,176,237,.21),transparent 31%),linear-gradient(127deg,#132946,#17263f 54%,#121f35); }.portfolio-command-deck::after { content:""; position:absolute; right:-80px; bottom:-110px; width:300px; height:300px; border:1px solid rgba(110,196,250,.2); border-radius:50%; box-shadow:0 0 0 33px rgba(98,191,250,.026),0 0 0 66px rgba(98,191,250,.015); }.portfolio-command-deck > * { position:relative; z-index:1; }.command-deck-head,.heatmap-head,.timeline-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:17px; }.command-deck-head h3,.heatmap-head h3,.timeline-head h3 { margin:5px 0; color:#f0f6ff; font-size:21px; letter-spacing:-.035em; }.command-deck-head p,.heatmap-head p,.timeline-head p { max-width:600px; margin:0; color:#a9bed6; font-size:12px; line-height:1.5; }.command-status { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; color:#9ac8ee; font-size:10px; font-weight:800; border:1px solid rgba(122,183,234,.25); border-radius:999px; background:rgba(52,126,185,.12); white-space:nowrap; }.command-status i { width:7px; height:7px; border-radius:50%; background:#53dca1; box-shadow:0 0 0 4px rgba(83,220,161,.11); }.command-grid { display:grid; grid-template-columns:1.35fr repeat(3,1fr); gap:11px; }.command-orbit,.command-metric { min-height:151px; padding:15px; border:1px solid rgba(152,190,228,.16); border-radius:14px; background:rgba(5,15,31,.24); }.command-orbit { display:flex; align-items:center; gap:14px; }.orbit-ring { width:83px; height:83px; flex:0 0 83px; display:grid; place-content:center; align-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle at center,#12233d 58%,transparent 60%),conic-gradient(#62c8ee calc(var(--context) * 1%),rgba(153,183,220,.16) 0); }.orbit-ring span { color:#f2f8ff; font-size:23px; font-weight:800; letter-spacing:-.06em; }.orbit-ring small { color:#9ebbd7; font-size:8px; }.command-orbit strong { color:#e9f3ff; font-size:13px; }.command-orbit p { margin:5px 0 0; color:#a9bdd4; font-size:10px; line-height:1.45; }.command-metric { display:grid; align-content:start; gap:5px; }.command-metric small { color:#93adca; font-size:9px; font-weight:800; letter-spacing:.1em; }.command-metric b { color:#f2f7ff; font-size:26px; letter-spacing:-.055em; }.command-metric span { color:#a6bbd4; font-size:10px; }.command-meter { height:6px; overflow:hidden; margin-top:9px; border-radius:99px; background:rgba(150,179,214,.13); }.command-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e9ac42,#f2c76c); }.command-meter.evidence i { background:linear-gradient(90deg,#4f94e3,#58d5a1); }.command-spark { display:flex; align-items:end; gap:4px; height:21px; margin-top:9px; }.command-spark i { width:7px; border-radius:4px 4px 0 0; background:linear-gradient(#65dba3,#287d65); }.command-spark i:nth-child(1){height:36%}.command-spark i:nth-child(2){height:65%}.command-spark i:nth-child(3){height:47%}.command-spark i:nth-child(4){height:89%}.command-spark i:nth-child(5){height:58%}.command-spark i:nth-child(6){height:74%}.command-spark i:nth-child(7){height:100%}
.sector-heatmap { margin:17px 0; padding:21px; border:1px solid rgba(108,176,215,.22); border-radius:18px; background:linear-gradient(135deg,rgba(25,46,76,.64),rgba(16,28,48,.88)); }.heatmap-head p { max-width:350px; }.heatmap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.heat-cell { min-height:116px; display:flex; flex-direction:column; justify-content:flex-end; padding:13px; border:1px solid rgba(144,182,220,.17); border-radius:13px; background:linear-gradient(135deg,rgba(55,122,190,calc(var(--heat) * .007)),rgba(10,22,40,.42)); }.heat-cell span { color:#c5d8ed; font-size:10px; }.heat-cell b { margin:4px 0; color:#f2f7ff; font-size:23px; letter-spacing:-.055em; }.heat-cell small { color:#97b1cc; font-size:10px; }.heat-1 { background:linear-gradient(135deg,rgba(74,181,144,calc(var(--heat) * .007)),rgba(10,33,40,.42)); }.heat-2 { background:linear-gradient(135deg,rgba(219,151,66,calc(var(--heat) * .007)),rgba(42,27,37,.42)); }.heat-3 { background:linear-gradient(135deg,rgba(145,105,220,calc(var(--heat) * .007)),rgba(30,24,50,.42)); }
.decision-timeline { margin:17px 0; padding:21px; border:1px solid rgba(141,161,212,.23); border-radius:18px; background:linear-gradient(135deg,rgba(30,38,69,.62),rgba(17,26,46,.9)); }.timeline-list { overflow:hidden; border:1px solid rgba(143,169,207,.14); border-radius:13px; background:rgba(6,14,28,.22); }.timeline-event { display:grid; grid-template-columns:10px .7fr 1.45fr 1fr; gap:12px; align-items:center; padding:13px 15px; border-bottom:1px solid rgba(143,169,207,.1); }.timeline-event:last-child { border-bottom:0; }.timeline-event > i { width:9px; height:9px; border-radius:50%; background:#65aaf0; box-shadow:0 0 0 5px rgba(101,170,240,.1); }.timeline-event > i.profit { background:#57dba0; }.timeline-event > i.loss { background:#f56b83; }.timeline-date { color:#cbd9eb; font-size:11px; font-weight:700; }.timeline-date small,.timeline-main span,.timeline-outcome small { display:block; margin-top:3px; color:#93a9c5; font-size:9px; font-weight:400; }.timeline-main b { color:#f0f6ff; font-size:13px; }.timeline-outcome { text-align:right; color:#e0eaf7; font-size:12px; font-weight:700; }
@media (max-width:900px) { .command-grid { grid-template-columns:1fr 1fr; }.command-orbit { grid-column:1/-1; }.heatmap-grid { grid-template-columns:repeat(2,1fr); }.timeline-event { grid-template-columns:10px 1fr 1fr; }.timeline-outcome { grid-column:2/-1; text-align:left; } }
@media (max-width:620px) { .command-deck-head,.heatmap-head,.timeline-head { display:block; }.command-status { margin-top:10px; }.command-grid,.heatmap-grid { grid-template-columns:1fr; }.timeline-event { grid-template-columns:10px 1fr; }.timeline-main,.timeline-outcome { grid-column:2; }.timeline-outcome { text-align:left; } }

/* Personal Edge Engine: an evidence surface for completed simulator trades. It is
   intentionally calm and data-forward, so a green result never reads as a trade tip. */
.personal-edge { margin:20px 0; padding:0; overflow:hidden; border-color:rgba(105,181,232,.3); background:radial-gradient(circle at 93% 0%,rgba(82,187,233,.16),transparent 28%),radial-gradient(circle at 3% 104%,rgba(76,215,158,.12),transparent 34%),linear-gradient(135deg,rgba(18,46,73,.94),rgba(16,27,48,.97)); }.personal-edge-head { display:flex; justify-content:space-between; gap:20px; padding:25px 25px 19px; border-bottom:1px solid rgba(148,190,225,.15); }.personal-edge-head > div > span { color:#93c5eb; font-size:10px; font-weight:800; letter-spacing:.14em; }.personal-edge-head h2 { margin:6px 0 6px; color:#f2f8ff; font-size:24px; letter-spacing:-.045em; }.personal-edge-head p { max-width:690px; margin:0; color:#aec3da; font-size:12px; line-height:1.55; }.personal-edge-head > b { align-self:flex-start; padding:7px 9px; color:#8fdcb7; font-size:10px; letter-spacing:.07em; border:1px solid rgba(94,214,160,.27); border-radius:999px; background:rgba(76,192,137,.09); white-space:nowrap; }.personal-edge-head > b.down { color:#ff9aac; border-color:rgba(242,111,132,.3); background:rgba(222,88,112,.08); }.personal-edge-head > b.muted { color:#b3c3d7; border-color:rgba(157,178,206,.25); background:rgba(100,124,157,.1); }.personal-edge-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(143,181,217,.13); border-bottom:1px solid rgba(148,190,225,.15); }.personal-edge-metrics article { min-height:109px; padding:18px 20px; background:rgba(7,20,37,.37); }.personal-edge-metrics small { display:block; color:#90abc7; font-size:9px; font-weight:800; letter-spacing:.1em; }.personal-edge-metrics b { display:block; margin:7px 0 3px; color:#f0f7ff; font-size:27px; letter-spacing:-.06em; }.personal-edge-metrics b.up { color:#69dfa7; }.personal-edge-metrics b.down { color:#ff879c; }.personal-edge-metrics span { color:#a3b9d1; font-size:10px; }.personal-edge-verdict { display:flex; gap:10px; align-items:center; margin:17px 20px; padding:12px 14px; color:#a8c3dd; font-size:12px; border:1px solid rgba(111,157,204,.2); border-radius:11px; background:rgba(30,75,113,.2); }.personal-edge-verdict strong { color:#92dbb7; white-space:nowrap; }.personal-edge-verdict.down strong { color:#ff99aa; }.personal-edge-verdict.muted strong { color:#c7d2e1; }.personal-edge-table { overflow-x:auto; margin:0 20px; border:1px solid rgba(143,181,217,.16); border-radius:13px; }.personal-edge-table table { min-width:780px; margin:0; border:0; border-radius:0; }.personal-edge-note { margin:13px 21px 21px; line-height:1.55; }
@media (max-width:760px) { .personal-edge-head { display:block; padding:20px 17px 16px; }.personal-edge-head > b { display:inline-block; margin-top:11px; }.personal-edge-metrics { grid-template-columns:repeat(2,1fr); }.personal-edge-metrics article { min-height:92px; padding:15px; }.personal-edge-verdict { display:block; margin:14px 15px; }.personal-edge-verdict span { display:block; margin-top:5px; }.personal-edge-table { margin:0 15px; }.personal-edge-note { margin:12px 16px 18px; } }

/* Real Shares Report sits above the simulator-only reports and deliberately keeps
   ICICI values, imported calculations, and unavailable broker data distinguishable. */
.real-shares-report { margin:16px 0 22px; padding:0; overflow:hidden; border-color:rgba(92,183,228,.3); background:radial-gradient(circle at 92% 0%,rgba(64,177,229,.17),transparent 27%),linear-gradient(135deg,rgba(16,43,69,.95),rgba(18,29,51,.97)); }.real-report-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:24px 25px 18px; border-bottom:1px solid rgba(143,188,222,.16); }.real-report-head span { color:#92c7ee; font-size:10px; font-weight:800; letter-spacing:.13em; }.real-report-head h2 { margin:6px 0; color:#f2f8ff; font-size:24px; letter-spacing:-.045em; }.real-report-head p { max-width:680px; margin:0; color:#abc2d9; font-size:12px; line-height:1.55; }.real-report-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(139,181,218,.14); }.real-report-grid .card { min-height:116px; border:0; border-radius:0; background:rgba(6,18,35,.34); box-shadow:none; }.real-report-grid .card:hover { transform:none; border-color:transparent; box-shadow:none; }.real-report-disclosure { display:flex; gap:9px; align-items:flex-start; margin:17px 20px 12px; padding:12px 14px; color:#d7b6bc; font-size:12px; line-height:1.45; border:1px solid rgba(234,148,123,.25); border-radius:11px; background:rgba(141,62,55,.14); }.real-report-disclosure strong { color:#ffaf9d; white-space:nowrap; }.real-report-disclosure.ready { color:#b7d8c8; border-color:rgba(92,211,154,.25); background:rgba(40,119,83,.14); }.real-report-disclosure.ready strong { color:#83dfae; }.real-report-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0 20px 20px; color:#a7bdd4; font-size:10px; }.real-report-meta > span { padding:5px 8px; border:1px solid rgba(143,182,218,.18); border-radius:999px; background:rgba(73,117,163,.1); }.real-report-meta .btn { margin-left:auto; }
@media (max-width:800px) { .real-report-head { display:block; padding:20px 17px 15px; }.real-report-head .btn { margin-top:12px; }.real-report-grid { grid-template-columns:repeat(2,1fr); }.real-report-disclosure { display:block; margin:14px 15px 12px; }.real-report-disclosure span { display:block; margin-top:5px; }.real-report-meta { padding:0 15px 17px; }.real-report-meta .btn { margin-left:0; } }

.real-analytics-hero { display:flex; justify-content:space-between; gap:22px; margin-bottom:15px; padding:27px; overflow:hidden; position:relative; border:1px solid rgba(92,183,228,.3); border-radius:19px; background:radial-gradient(circle at 92% 8%,rgba(68,189,230,.22),transparent 29%),radial-gradient(circle at 5% 110%,rgba(80,221,165,.13),transparent 33%),linear-gradient(130deg,#122c4a,#16253f); }.real-analytics-hero span { color:#91c9ec; font-size:10px; font-weight:800; letter-spacing:.13em; }.real-analytics-hero h2 { margin:7px 0; color:#f2f8ff; font-size:29px; letter-spacing:-.05em; }.real-analytics-hero p { max-width:700px; margin:0; color:#b2c6dc; font-size:12px; line-height:1.55; }.real-analytics-hero .btn { align-self:flex-start; }.real-analytics-cards { margin-bottom:15px; }.real-analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px; }.analytics-panel { margin:0; }.analytics-chart { position:relative; min-height:245px; }.analytics-charge-cards { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); margin-top:5px; }.analytics-charge-cards .card { min-height:88px; }.analytics-charge-cards .card .value { font-size:19px; }
.real-reports-router { display:flex; justify-content:space-between; align-items:center; gap:18px; border-color:rgba(87,172,227,.3); background:linear-gradient(135deg,rgba(23,57,91,.76),rgba(18,31,52,.94)); }.real-reports-router h2 { margin:5px 0; color:#f2f8ff; font-size:21px; }.real-reports-router p { max-width:720px; margin:0; line-height:1.55; }
@media (max-width:760px) { .real-analytics-hero { display:block; padding:21px; }.real-analytics-hero h2 { font-size:24px; }.real-analytics-hero .btn { margin-top:12px; }.real-analytics-grid { grid-template-columns:1fr; }.analytics-chart { min-height:215px; } }
@media (max-width:760px) { .real-reports-router { display:block; }.real-reports-router .btn { width:100%; margin-top:14px; } }