@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap");
/* AlphaScreen design system — one stylesheet shared by the subscriber and admin apps.
   Dark "research terminal" theme: deep slate surfaces, emerald accent, tabular data. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #06090e;
  --bg-2: #0a0f16;
  --surface: #0d131b;
  --card: rgba(17, 24, 34, 0.78);
  --card-2: #182230;
  --card-3: #1f2b3b;
  --border: rgba(148, 177, 207, 0.13);
  --border-soft: rgba(148, 177, 207, 0.08);
  --border-strong: rgba(148, 177, 207, 0.22);

  /* Text */
  --text: #f1f5fa;
  --text-dim: #cbd5e1;
  --muted: #8b9bb0;

  /* Brand */
  --accent: #35d399;
  --accent-2: #16b981;
  --accent-ink: #04140d;
  --accent-soft: rgba(53, 211, 153, 0.12);
  --blue: #5ea2ff;
  --neg: #f87171;
  --warn: #fbbf24;

  /* Shape + depth */
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lg: 0 32px 72px -24px rgba(0, 0, 0, 0.8);
  --ring: 0 0 0 3px rgba(53, 211, 153, 0.22);

  /* Type */
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 1.5rem; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 0% -20%, rgba(53, 211, 153, 0.09), transparent 60%),
    radial-gradient(1000px 560px at 110% -10%, rgba(94, 162, 255, 0.08), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

::selection { background: rgba(53, 211, 153, 0.28); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #24313f; border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #314152; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; }
p { margin: 0.35rem 0; }
code {
  font-family: var(--mono);
  font-size: 0.84em;
  color: #b9cade;
  background: rgba(148, 177, 207, 0.09);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 0.08em 0.38em;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.9rem; }

/* ---------- App shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: rgba(9, 13, 19, 0.72);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  backdrop-filter: blur(18px) saturate(140%);
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; color: var(--text);
  padding: 0.3rem 0.55rem 1.4rem;
  white-space: nowrap;
}
.brand-tag {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(53, 211, 153, 0.28); border-radius: 5px;
  padding: 0.16rem 0.36rem; margin-left: 0.1rem;
}
.brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: radial-gradient(circle at 30% 20%, rgba(94, 162, 255, 0.35), rgba(9, 14, 20, 0.9) 70%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 1px rgba(53, 211, 153, 0.10), 0 8px 20px -8px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.sidebar a, .sidebar button.nav-btn {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: inherit; font-size: 0.875rem; font-weight: 500;
  background: none; border: 0; box-shadow: none; cursor: pointer; text-align: left; width: 100%;
  justify-content: flex-start; white-space: normal;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.sidebar a:hover, .sidebar button.nav-btn:hover {
  background: rgba(148, 177, 207, 0.07); color: var(--text); text-decoration: none;
  box-shadow: none; filter: none;
}
.sidebar a.active {
  background: rgba(53, 211, 153, 0.10);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(53, 211, 153, 0.22);
}
.sidebar a.active .nav-icon { color: var(--accent); opacity: 1; }
.sidebar .nav-icon {
  width: 31px; height: 31px; flex: 0 0 31px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(148,177,207,.09); border-radius: 10px;
  background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  opacity: 0.86; color: currentColor;
  transition: color 0.16s ease, opacity 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.sidebar .nav-icon svg { width: 16px; height: 16px; display: block; }
.sidebar a:hover .nav-icon, .sidebar button.nav-btn:hover .nav-icon { opacity: 1; color: #9ce8c9; border-color: rgba(93,210,164,.24); background: linear-gradient(145deg,rgba(53,211,153,.13),rgba(53,211,153,.045)); transform: translateY(-1px); }
.sidebar a.active .nav-icon { border-color: rgba(53,211,153,.28); background: linear-gradient(145deg,rgba(53,211,153,.18),rgba(53,211,153,.065)); box-shadow: inset 0 1px rgba(255,255,255,.05),0 4px 12px -9px rgba(53,211,153,.8); }
.sidebar .spacer { flex: 1; }

.main {
  flex: 1; min-width: 0; width: 100%;
  max-width: 1560px; margin: 0 auto;
  padding: 2.1rem 2.4rem 4rem;
}
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head h1 {
  font-size: 1.85rem; font-weight: 700; letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff, #b8c6d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head .sub { color: var(--muted); margin-top: 0.35rem; max-width: 62ch; }

/* ---------- KPI tiles ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.kpi {
  position: relative;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.045), transparent 55%), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 211, 153, 0.55), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kpi:hover::before { opacity: 1; }
.kpi .label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.075em; font-weight: 600; }
.kpi .value {
  font-size: 1.95rem; font-weight: 700; line-height: 1.15; margin-top: 0.4rem;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.kpi .value.pos { color: var(--accent); }
.kpi .value.neg { color: var(--neg); }
.kpi .hint { color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.035), transparent 40%), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.55rem;
  margin-bottom: 1.35rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.9rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}
#ranking-search { width: 16rem; max-width: 100%; }
.table-tools { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin:-.2rem 0 .8rem; }
.table-tools .table-search { position:relative; flex:1 1 200px; max-width:290px; }
.table-tools .table-search input { width:100%; min-height:37px; padding:.48rem .75rem .48rem 2.15rem; font-size:.82rem; background-color:rgba(6,10,15,.55); }
.table-tools .table-search::before { content:""; position:absolute; z-index:1; left:.82rem; top:50%; width:10px; height:10px; border:1.6px solid #8293a6; border-radius:50%; transform:translateY(-62%); pointer-events:none; }
.table-tools .table-search::after { content:""; position:absolute; z-index:1; left:1.47rem; top:calc(50% + 4px); width:5px; height:1.6px; border-radius:2px; background:#8293a6; transform:rotate(45deg); pointer-events:none; }
.table-tools .table-select select,.table-tools .page-size-label select { min-height:37px; padding:.42rem 1.85rem .42rem .7rem; font-size:.8rem; cursor:pointer; }
.table-tools .page-size-label { display:flex; flex-direction:row; align-items:center; gap:.4rem; color:var(--muted); font-size:.75rem; white-space:nowrap; }
.table-count { margin-left:auto; color:var(--muted); font-size:.76rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pagination { display:inline-flex; align-items:center; gap:.4rem; }
.pagination .page-button { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; color:var(--text-dim); background:rgba(148,177,207,.06); border:1px solid var(--border); box-shadow:none; }
.pagination .page-button:hover:not(:disabled) { color:var(--accent); background:var(--accent-soft); border-color:rgba(53,211,153,.28); filter:none; box-shadow:none; }
.pagination .page-button:disabled { opacity:.38; cursor:default; }
.pagination .page-button svg { width:16px; height:16px; }
.pagination .page-current { min-width:3.5rem; text-align:center; color:var(--text-dim); font-size:.77rem; font-variant-numeric:tabular-nums; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.card-head h2 { font-size: 1.02rem; }
.card-head .sub { color: var(--muted); font-size: 0.83rem; margin-top: 0.2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

details { margin: 0.25rem 0 0.9rem; }
summary {
  cursor: pointer; color: var(--text-dim); font-size: 0.86rem;
  font-weight: 500; list-style: none; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.2rem 0;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease; transform-origin: 30% 50%;
}
details[open] > summary::before { transform: rotate(90deg); }
summary:hover { color: var(--accent); }
details ol, details ul { color: var(--muted); font-size: 0.88rem; line-height: 1.6; padding-left: 1.25rem; }
details li { margin: 0.35rem 0; }
details strong { color: var(--text-dim); }

/* ---------- Forms ---------- */
form { display: flex; flex-direction: column; gap: 0.85rem; }
form.inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
label { display: flex; flex-direction: column; gap: 0.38rem; color: var(--text-dim); font-size: 0.79rem; font-weight: 500; }
input, textarea, select {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: rgba(6, 10, 15, 0.6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:hover, textarea:hover, select:hover { border-color: rgba(148, 177, 207, 0.34); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); background: rgba(7, 12, 18, 0.9);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: #5d6f83; }
input[type="number"] { font-variant-numeric: tabular-nums; }
button:focus-visible, a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
button, .btn {
  font: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  background: linear-gradient(180deg, #40dda4, #1fbd86);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 4px 12px -8px rgba(31, 189, 134, 0.55);
  transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  white-space: nowrap;
}
button:hover, .btn:hover { filter: brightness(1.07); text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 6px 16px -8px rgba(31, 189, 134, 0.65); }
button:active, .btn:active { transform: translateY(1px); filter: brightness(0.98); }
button.secondary, .btn.secondary {
  background: var(--card-2); color: var(--text-dim); border-color: var(--border-strong);
  box-shadow: none; font-weight: 500;
}
button.secondary:hover, .btn.secondary:hover {
  background: var(--card-3); color: var(--text); filter: none; box-shadow: none;
}
button.danger {
  background: rgba(248, 113, 113, 0.10); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35);
  box-shadow: none;
}
button.danger:hover { background: rgba(248, 113, 113, 0.18); color: #fecaca; filter: none; box-shadow: none; }
button.sm { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
button.block, .btn.block { width: 100%; }
.google-btn {
  background: #fff; color: #1f1f1f; border-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.google-btn:hover { background: #eef1f4; filter: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

/* ---------- Alerts ---------- */
.error, .ok, .banner {
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin: 0.6rem 0; font-size: 0.87rem;
  border: 1px solid transparent; line-height: 1.45;
}
.error { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.32); color: #fca5a5; }
.ok { background: rgba(53, 211, 153, 0.10); border-color: rgba(53, 211, 153, 0.32); color: #7fe8bf; }
.banner { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.36); color: #fcd679; }
.banner a { color: #fcd679; font-weight: 600; text-decoration: underline; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.88rem; }
th, td { padding: 0.62rem 0.7rem; text-align: left; vertical-align: middle; }
th {
  color: var(--muted); font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; border-bottom: 1px solid var(--border);
  background: rgba(148, 177, 207, 0.04);
}
th:first-child { border-top-left-radius: 6px; }
th:last-child { border-top-right-radius: 6px; }
td { border-bottom: 1px solid var(--border-soft); }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover td { background: rgba(148, 177, 207, 0.05); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.muted { font-size: inherit; }
.top-scroll { overflow-x: auto; overflow-y: hidden; display: none; margin-bottom: 0.25rem; }
.top-scroll > div { height: 1px; }
/* Full ranking has 14 columns: tighten spacing so it fits without a horizontal scrollbar. */
#ranking-table { font-size: 0.82rem; }
#ranking-table th, #ranking-table td { padding: 0.55rem 0.4rem; white-space: nowrap; }
#ranking-table th { letter-spacing: 0.03em; font-size: 0.64rem; white-space: normal; line-height: 1.2; }
/* Small screens: drop the least important columns (3 Band, 12 Cycle, 13 News, then 10 Moat, 11 Margin, 9 Value, 7 Trend). */
@media (max-width: 1300px) {
  #ranking-table th:nth-child(3), #ranking-table td:nth-child(3),
  #ranking-table th:nth-child(12), #ranking-table td:nth-child(12),
  #ranking-table th:nth-child(13), #ranking-table td:nth-child(13) { display: none; }
}
@media (max-width: 1000px) {
  #ranking-table th:nth-child(10), #ranking-table td:nth-child(10),
  #ranking-table th:nth-child(11), #ranking-table td:nth-child(11) { display: none; }
}
@media (max-width: 760px) {
  #ranking-table th:nth-child(9), #ranking-table td:nth-child(9),
  #ranking-table th:nth-child(7), #ranking-table td:nth-child(7) { display: none; }
}
.ticker-link {
  cursor: pointer; font-weight: 650; color: var(--text);
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.03em;
  border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease;
}
.ticker-link:hover { color: var(--accent); border-bottom-color: rgba(53, 211, 153, 0.45); }
button.ticker-link:not(.kpi-stock-link) {
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 0;
  box-shadow: none; border-radius: 0; display: inline; align-items: normal;
  justify-content: normal; gap: normal; white-space: normal; filter: none; transform: none;
}
button.ticker-link:not(.kpi-stock-link):hover,
button.ticker-link:not(.kpi-stock-link):active { box-shadow: none; filter: none; transform: none; }
.ticker-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
/* Brand logo tile: the img covers the letter, so a missing logo leaves a clean initial. */
.ticker-logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; overflow: hidden;
  border-radius: 7px; border: 1px solid var(--border-soft); background: var(--card-3);
  color: var(--muted); font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
}
.ticker-logo::before { content: attr(data-initial); }
.ticker-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff;
}
.ticker-logo.lg { width: 34px; height: 34px; font-size: 0.85rem; margin-right: 0.55rem; vertical-align: middle; }
.rank-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .25rem; min-width: 31px; height: 27px; padding: 0 .42rem; border-radius: 8px;
  background: linear-gradient(145deg,rgba(148,177,207,.08),rgba(148,177,207,.025)); border: 1px solid var(--border-soft);
  font-weight: 650; font-size: 0.73rem; font-variant-numeric: tabular-nums; color: var(--text-dim);
}
.rank-pill svg { width: 14px; height: 14px; flex: none; }
.rank-pill.top {
  background: linear-gradient(145deg,rgba(53,211,153,.15),rgba(53,211,153,.055)); border-color: rgba(53, 211, 153, 0.30); color: #82e1bc;
}
.rank-pill.rank-1 { color:#f1cf83; background:linear-gradient(145deg,rgba(236,190,98,.17),rgba(236,190,98,.055)); border-color:rgba(236,190,98,.34); }
.rank-pill.rank-2 { color:#c5d3e2; background:linear-gradient(145deg,rgba(173,194,218,.15),rgba(173,194,218,.045)); border-color:rgba(173,194,218,.28); }
.rank-pill.rank-3 { color:#dfa17c; background:linear-gradient(145deg,rgba(204,129,83,.16),rgba(204,129,83,.05)); border-color:rgba(204,129,83,.30); }
.badge {
  display: inline-flex; align-items: center;
  padding: 0.16rem 0.5rem; border-radius: 6px;
  font-weight: 600; font-size: 0.75rem; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; text-transform: capitalize;
}
.badge.pos { background: rgba(53, 211, 153, 0.12); border-color: rgba(53, 211, 153, 0.25); color: var(--accent); }
.badge.neg { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.25); color: #fca5a5; }
.badge.flat { background: var(--card-2); border-color: var(--border-soft); color: var(--muted); }
.badge.pending { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28); color: var(--warn); }
.badge.approved { background: rgba(53, 211, 153, 0.12); border-color: rgba(53, 211, 153, 0.25); color: var(--accent); }
.badge.rejected { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.25); color: #fca5a5; }
.score { display: flex; align-items: center; gap: 0.6rem; min-width: 150px; }
.score-bar { flex: 1; height: 5px; background: rgba(148, 177, 207, 0.14); border-radius: 999px; overflow: hidden; }
.score-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent)); border-radius: 999px; }
.score-val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.4ch; text-align: right; color: var(--text-dim); }
.row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; align-items: center; }
.action-icon { display:inline-block; width:15px; height:15px; flex:none; vertical-align:middle; }
.row-actions button { gap:.42rem; }
.sort-icon { width:13px; height:13px; margin-left:.28rem; vertical-align:-2px; color:var(--accent); transition:transform .15s ease; }
.sort-icon.descending { transform:rotate(180deg); }
.empty {
  color: var(--muted); padding: 1.6rem 1rem; text-align: center; font-size: 0.88rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: rgba(148, 177, 207, 0.025); margin: 0.5rem 0;
}
pre {
  background: rgba(7, 12, 18, 0.7); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.9rem; overflow: auto;
  font-size: 0.79rem; line-height: 1.55; color: #aebfd2;
}
.emails { font-size: 0.85rem; color: var(--text-dim); line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.chip {
  background: var(--card-2); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0.16rem 0.5rem; font-size: 0.78rem; font-family: var(--mono); color: var(--text-dim);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 8, 13, 0.66); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  animation: fade-in 0.15s ease;
}
.modal-inner {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.035), transparent 40%), #111a24;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 1.4rem 1.75rem; max-width: 44rem; width: 100%; max-height: 86vh; overflow: auto;
  box-shadow: var(--shadow-lg); position: relative;
  animation: pop-in 0.18s ease;
}
.modal-inner #modal-close { position: absolute; top: 1rem; right: 1rem; }
.modal-inner h2 {
  font-size: 1.3rem; font-family: var(--mono); letter-spacing: 0.02em;
  margin-bottom: 0.9rem; padding-right: 5rem;
}
.ctx-section { border-top: 1px solid var(--border-soft); padding: 0.9rem 0; }
.ctx-section h3 { margin-bottom: 0.45rem; }
.plain-list { margin: 0; padding-left: 1.2rem; }
.plain-list li { margin-bottom: 0.25rem; }
.ctx-stats { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.ctx-stat {
  background: rgba(7, 12, 18, 0.6); border: 1px solid var(--border); border-radius: 7px;
  padding: 0.32rem 0.65rem; font-size: 0.82rem; color: var(--muted);
}
.ctx-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bd-table th, .bd-table td { padding: 0.25rem 0.4rem; text-align: left; color: var(--text-dim); }
.bd-table th { color: var(--muted); font-weight: 500; }
.bd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bd-bar { display: block; width: 100%; min-width: 80px; height: 6px; background: var(--border); border-radius: 3px; }
.bd-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.bd-hi td { color: var(--accent); }
.bd-hi .bd-bar i { background: var(--accent); }
.bd-lo td { color: var(--neg); }
.bd-lo .bd-bar i { background: var(--neg); }
.bd-total td { border-top: 1px solid var(--border); color: var(--text); font-weight: 600; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.75rem;
  background:
    radial-gradient(720px 420px at 12% 8%, rgba(53, 211, 153, 0.14), transparent 62%),
    radial-gradient(720px 420px at 88% 92%, rgba(94, 162, 255, 0.12), transparent 62%),
    linear-gradient(rgba(148, 177, 207, 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(148, 177, 207, 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--bg);
}
.auth-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%), var(--card);
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 2.4rem 2.2rem; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--blue), transparent);
  opacity: 0.85;
}
.auth-card .brand { justify-content: center; padding-bottom: 1rem; }
.auth-card h1 { text-align: center; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 1.35rem; font-size: 0.88rem; }
.auth-card form { margin-top: 0.6rem; }
.auth-card .links { text-align: center; margin-top: 1.25rem; color: var(--muted); font-size: 0.88rem; }
.auth-card .links a { font-weight: 500; }
/* Chinese has no spaces, so default wrapping splits headers and short cells mid-word; the tables scroll sideways. */
html[lang="zh-CN"] .table-wrap th { white-space: nowrap; }
html[lang="zh-CN"] .table-wrap td { word-break: keep-all; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent, inherit); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; }
.sidebar .lang-toggle {
  min-height: 54px;
  margin-top: 0.3rem;
  padding: 0.48rem 0.62rem;
  gap: 0.62rem;
  border: 1px solid rgba(112, 146, 166, 0.16);
  border-radius: 13px;
  color: var(--text-dim);
  background: linear-gradient(135deg, rgba(53, 211, 153, 0.075), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.sidebar .lang-toggle:hover {
  border-color: rgba(93, 210, 164, 0.34);
  background: linear-gradient(135deg, rgba(53, 211, 153, 0.13), rgba(255, 255, 255, 0.035));
}
.sidebar .lang-toggle:focus-visible {
  outline: 2px solid rgba(93, 210, 164, 0.72);
  outline-offset: 2px;
}
.sidebar .lang-toggle .lang-toggle-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  color: #83dfbb;
  border-color: rgba(93, 210, 164, 0.2);
  background: rgba(53, 211, 153, 0.075);
}
.sidebar .lang-toggle .lang-toggle-icon svg { width: 17px; height: 17px; }
.lang-toggle-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0.12rem; }
.lang-toggle-caption { color: var(--muted); font-size: 0.61rem; font-weight: 650; letter-spacing: 0.095em; line-height: 1; }
.lang-toggle-label { color: var(--text); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.lang-toggle-arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); opacity: 0.75; transition: transform 0.16s ease, color 0.16s ease; }
.sidebar .lang-toggle:hover .lang-toggle-arrow { color: #9ce8c9; transform: translateX(2px); }
.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.76rem; margin: 1.1rem 0; text-transform: uppercase; letter-spacing: 0.06em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Billing ---------- */
.plan {
  border: 1px solid rgba(53, 211, 153, 0.28); border-radius: var(--radius-lg); padding: 1.5rem;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(53, 211, 153, 0.14), transparent 65%),
    linear-gradient(160deg, rgba(53, 211, 153, 0.06), transparent 55%),
    var(--card);
  box-shadow: var(--shadow);
}
.plan .price { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.035em; margin-top: 0.45rem; }
.plan ul { margin: 0.85rem 0 1.25rem; padding-left: 1.1rem; color: var(--text-dim); font-size: 0.9rem; line-height: 1.7; }
.plan li { margin: 0.3rem 0; }
.plan li::marker { color: var(--accent); }

/* ---------- Headlines in ticker modal ---------- */
.hl-list { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.hl-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--border-soft); }
.hl-list li:last-child { border-bottom: 0; }
.hl-score { display: inline-block; min-width: 2.9rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.hl-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.hl-original { display: block; margin-left: 2.9rem; color: var(--muted); font-size: 0.78rem; }
.hl-score.pos { color: var(--accent); }
.hl-score.neg { color: var(--neg); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable[aria-sort="ascending"]::after, th.sortable[aria-sort="descending"]::after { content:""; display:inline-block; width:6px; height:6px; margin-left:.4rem; border-top:1.5px solid var(--accent); border-left:1.5px solid var(--accent); vertical-align:2px; }
th.sortable[aria-sort="ascending"]::after { transform:rotate(45deg); }
th.sortable[aria-sort="descending"]::after { transform:rotate(225deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .main { padding: 1.75rem 1.5rem 3rem; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: auto; flex: none; height: auto; position: sticky; top: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 0.7rem 0.9rem; gap: 0.15rem;
    border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .sidebar .brand { padding: 0 0.65rem 0 0; width: auto; font-size: 0.95rem; }
  .sidebar .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .sidebar .spacer { display: none; }
  .sidebar a, .sidebar button.nav-btn { width: auto; padding: 0.45rem 0.6rem; font-size: 0.82rem; }
  .sidebar .lang-toggle { min-height: 42px; margin-top: 0; padding: 0.35rem 0.55rem; gap: 0.42rem; }
  .sidebar .lang-toggle .lang-toggle-icon { width: 29px; height: 29px; flex-basis: 29px; }
  .lang-toggle-caption { display: none; }
  .lang-toggle-label { font-size: 0.76rem; }
  .lang-toggle-arrow { width: 14px; height: 14px; flex-basis: 14px; }
  .sidebar a.active { box-shadow: inset 0 -2px 0 var(--accent); }
  .main { padding: 1.4rem 1rem 2.5rem; }
  section[id] { scroll-margin-top: 5.5rem; }
  .page-head h1 { font-size: 1.4rem; }
}
@media (max-width: 620px) {
  .kpis { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; }
  .card { padding: 1.05rem 1rem; border-radius: var(--radius); }
  .card-head { gap: 0.6rem; }
  table { font-size: 0.82rem; }
  th, td { padding: 0.5rem 0.45rem; }
  form.inline { width: 100%; }
  form.inline label { flex: 1 1 100%; }
  form.inline input { width: 100% !important; }
  input, textarea, select { max-width: 100%; }
  .modal-inner { padding: 1.2rem 1.1rem; }
  .auth-card { padding: 1.75rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---------- Dashboard refresh ---------- */
.dashboard-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  align-items: center; min-height: 270px; margin: 0 0 1.5rem; padding: 2.2rem 2.5rem;
  border: 1px solid rgba(112, 174, 165, 0.22); border-radius: 22px;
  background: radial-gradient(ellipse at 78% 42%, rgba(35, 126, 112, 0.2), transparent 34%),
    radial-gradient(ellipse at 94% 100%, rgba(67, 113, 180, 0.16), transparent 40%),
    linear-gradient(112deg, #101b22 0%, #101a22 48%, #111b26 100%);
  box-shadow: 0 20px 55px -32px rgba(20, 193, 146, 0.25), inset 0 1px rgba(255,255,255,.035);
}
.dashboard-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.2; pointer-events:none;
  background-image:linear-gradient(rgba(176,210,220,.07) 1px, transparent 1px),linear-gradient(90deg,rgba(176,210,220,.07) 1px,transparent 1px); background-size:38px 38px;
  mask-image:linear-gradient(90deg,transparent 8%,#000 100%); }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:.55rem; color:#91b4aa; font-size:.66rem; font-weight:700; letter-spacing:.16em; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#42d7a1; box-shadow:0 0 13px rgba(66,215,161,.7); }
.dashboard-hero h1 { margin:.8rem 0 .55rem; font-size:clamp(2rem,3.5vw,3rem); font-weight:680; letter-spacing:-.055em; line-height:1.06; color:#f4f7f7; }
.dashboard-hero h1 span { color:#80dbba; }
.dashboard-hero .hero-copy > p { color:#9aabb3; font-size:.95rem; max-width:40ch; margin:0; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; margin-top:1.35rem; }
.hero-primary,.hero-secondary { display:inline-flex; align-items:center; gap:.65rem; min-height:40px; padding:.62rem .95rem; border-radius:9px; font-size:.82rem; font-weight:650; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.hero-primary { color:#07160f; background:#67d9ad; box-shadow:0 5px 18px -10px rgba(103,217,173,.8); }
.hero-primary:hover { color:#07160f; text-decoration:none; transform:translateY(-1px); background:#83e6bf; }
.hero-secondary { color:#d0dcdf; border:1px solid rgba(178,205,210,.19); background:rgba(255,255,255,.035); }
.hero-secondary:hover { color:#fff; text-decoration:none; border-color:rgba(178,205,210,.38); background:rgba(255,255,255,.07); }
.hero-aside { position:relative; height:220px; display:flex; align-items:center; justify-content:center; }
.hero-orbit { position:absolute; width:194px; height:194px; border:1px solid rgba(116,201,178,.17); border-radius:50%; transform:rotate(-30deg) scaleY(.53); }
.orbit-one { width:240px; height:240px; transform:rotate(36deg) scaleY(.53); border-color:rgba(115,168,202,.17); }
.orbit-two::before,.orbit-one::after { content:""; position:absolute; top:16%; right:20%; width:6px; height:6px; border-radius:50%; background:#7de0b7; box-shadow:0 0 14px #5de2ae; }
.orbit-one::after { top:74%; right:12%; width:5px; height:5px; background:#8ab9ff; box-shadow:0 0 14px #72aaff; }
.hero-core { display:flex; align-items:center; gap:.6rem; color:#bed0d2; font-size:.61rem; font-weight:700; letter-spacing:.12em; line-height:1.45; }
.hero-core-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; color:#07160f; background:linear-gradient(145deg,#a0f1d1,#4bc99b); font:600 1.7rem Georgia,serif; box-shadow:0 0 30px rgba(83,213,165,.2); }
.hero-note { position:absolute; right:-.4rem; bottom:.2rem; display:flex; flex-direction:column; gap:.13rem; padding:.65rem .8rem; border:1px solid rgba(184,210,218,.13); border-radius:10px; background:rgba(9,17,24,.76); box-shadow:0 12px 28px -18px #000; backdrop-filter:blur(10px); }
.hero-note span { color:#8198a0; font-size:.58rem; letter-spacing:.1em; }
.hero-note strong { color:#e4ecea; font-size:.78rem; font-weight:600; }
.page-head { align-items:center; margin-bottom:1.15rem; }
.page-head h1 { font-size:1.46rem; }
.page-head .muted { padding:.43rem .7rem; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.025); font-size:.76rem; }
.kpis { gap:.8rem; margin-bottom:1.5rem; }
.kpi { min-height:132px; padding:1rem 1.1rem; border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 70%),rgba(16,23,32,.9); }
.kpi .label { display:flex; align-items:center; gap:.45rem; color:#a6b3c1; font-size:.68rem; letter-spacing:.055em; }
.kpi-icon { display:grid; place-items:center; width:30px; height:30px; flex:none; border:1px solid rgba(83,211,160,.22); border-radius:9px; color:#82e1bc; background:linear-gradient(145deg,rgba(83,211,160,.16),rgba(83,211,160,.055)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 10px -7px rgba(83,211,160,.7); }
.kpi-icon svg { display:block; width:17px; height:17px; overflow:visible; }
.kpi:nth-child(2) .kpi-icon { color:#93baff; border-color:rgba(107,158,255,.24); background:linear-gradient(145deg,rgba(94,162,255,.17),rgba(94,162,255,.055)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 10px -7px rgba(94,162,255,.7); }
.kpi:nth-child(3) .kpi-icon { color:#f3cc83; border-color:rgba(239,190,99,.24); background:linear-gradient(145deg,rgba(239,190,99,.17),rgba(239,190,99,.055)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 10px -7px rgba(239,190,99,.65); }
.kpi:nth-child(4) .kpi-icon { color:#c0a7ff; border-color:rgba(173,143,255,.24); background:linear-gradient(145deg,rgba(173,143,255,.17),rgba(173,143,255,.055)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 10px -7px rgba(173,143,255,.65); }
.kpi .value { margin-top:.55rem; font-size:1.85rem; }
.card { border-radius:15px; padding:1.25rem 1.4rem; }
.card-head { align-items:center; padding-bottom:.8rem; }
.card-head h2 { font-size:1rem; letter-spacing:-.01em; }
.card-head .sub { font-size:.8rem; }
.table-wrap { scrollbar-color:#334454 transparent; scrollbar-width:thin; }
th { background:rgba(123,155,176,.055); }
#watchlist-table th:first-child,#leaderboard-table th:first-child,#ranking-table th:first-child { white-space:nowrap; }
.dashboard-hero a:focus-visible { outline:2px solid #a0f1d1; outline-offset:3px; }
@media (max-width:860px) {
  .dashboard-hero { min-height:240px; padding:1.8rem 1.6rem; grid-template-columns:minmax(0,1fr) 220px; }
  .hero-aside { transform:scale(.84); transform-origin:center right; }
}
@media (max-width:620px) {
  .dashboard-hero { min-height:0; grid-template-columns:1fr; padding:1.5rem 1.25rem 1.2rem; border-radius:17px; }
  .dashboard-hero h1 { font-size:2.2rem; }
  .hero-aside { display:none; }
  .hero-actions { gap:.5rem; margin-top:1.05rem; }
  .hero-primary,.hero-secondary { min-height:38px; padding:.55rem .72rem; font-size:.76rem; }
  .page-head { gap:.65rem; }
  .page-head .muted { font-size:.7rem; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .kpi { min-height:119px; padding:.8rem .75rem; }
  .kpi .label { font-size:.61rem; letter-spacing:.025em; }
  .kpi .value { font-size:1.55rem; }
  .kpi .hint { font-size:.7rem; }
  .kpi-icon { width:27px; height:27px; border-radius:8px; }
  .kpi-icon svg { width:15px; height:15px; }
  .table-tools { gap:.45rem; }
  .table-tools .table-search { flex:1 1 100%; max-width:none; }
  .table-tools .table-select { flex:1 1 calc(50% - .45rem); }
  .table-tools .table-select select { width:100%; }
  .table-count { margin-left:0; flex:1 1 auto; }
  .table-tools .page-size-label { margin-left:auto; }
  .pagination { flex:0 0 auto; }
}


/* ---------- Stock profile experience ---------- */
.modal { padding:clamp(.7rem,2.4vw,2rem); background:rgba(3,8,13,.76); backdrop-filter:blur(14px) saturate(118%); }
.modal-inner { width:min(100%,72rem); max-width:72rem; max-height:min(91vh,58rem); padding:0; overflow:auto; overscroll-behavior:contain; border-radius:20px; border-color:rgba(151,184,205,.18); background:radial-gradient(ellipse at 10% 0%,rgba(52,211,153,.07),transparent 34%),linear-gradient(160deg,#131e29 0%,#101923 48%,#0e1720 100%); box-shadow:0 38px 110px -38px rgba(0,0,0,.88),inset 0 1px rgba(255,255,255,.04); scrollbar-color:#344858 transparent; }
.ticker-modal-bar { position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:58px; padding:.7rem clamp(1rem,4vw,2.5rem); border-bottom:1px solid rgba(152,181,197,.12); background:rgba(15,24,33,.94); backdrop-filter:blur(18px); }
.ticker-modal-context { display:flex; align-items:center; gap:.55rem; min-width:0; color:#9db1bd; font-size:.66rem; font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.ticker-modal-spark { width:8px; height:8px; flex:none; border-radius:50%; background:#5be0ac; box-shadow:0 0 14px rgba(91,224,172,.64); }
.ticker-modal-divider { width:1px; height:13px; margin:0 .12rem; background:rgba(161,188,202,.2); }
.ticker-modal-context span:last-child { overflow:hidden; color:#6f8795; font-size:.61rem; font-weight:550; letter-spacing:.08em; text-overflow:ellipsis; }
.ticker-modal-bar #modal-close { position:static; display:inline-flex; align-items:center; gap:.45rem; flex:none; min-height:34px; padding:.42rem .7rem; border-radius:9px; font-size:.77rem; }
.ticker-modal-bar #modal-close svg { width:15px; height:15px; }
#modal-body { padding:0 clamp(1rem,4vw,2.5rem) 2.25rem; }
.ticker-profile-heading { display:flex; align-items:center; gap:.9rem; padding:1.5rem 0 1.25rem; }
.ticker-profile-heading h2 { display:flex; align-items:center; gap:.75rem; margin:0; padding:0; color:#f1f6f7; font-size:1.7rem; font-weight:690; letter-spacing:-.035em; font-family:var(--mono); }
.ticker-profile-heading .ticker-logo.lg { width:48px; height:48px; border-radius:14px; box-shadow:0 8px 24px -13px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.12); }
.ticker-profile-heading .ticker-logo.lg img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.ticker-profile-caption { display:flex; align-items:center; gap:.4rem; margin-left:.1rem; padding:.34rem .55rem; color:#8296a3; border:1px solid rgba(148,174,190,.13); border-radius:7px; background:rgba(148,174,190,.045); font-size:.68rem; }
.ticker-profile-caption span { color:#4dd6a4; }
.ticker-section-nav { position:sticky; top:58px; z-index:7; display:flex; align-items:center; gap:.35rem; margin:0 calc(-1 * clamp(1rem,4vw,2.5rem)) .8rem; padding:.65rem clamp(1rem,4vw,2.5rem); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; border-top:1px solid rgba(145,174,192,.08); border-bottom:1px solid rgba(145,174,192,.12); background:rgba(15,24,33,.95); backdrop-filter:blur(15px); }
.ticker-section-nav::-webkit-scrollbar { display:none; }
.ticker-section-label { flex:none; margin-right:.24rem; color:#718794; font-size:.59rem; font-weight:750; letter-spacing:.13em; }
.ticker-section-nav a { flex:none; padding:.4rem .62rem; border:1px solid transparent; border-radius:7px; color:#9aadb8; font-size:.73rem; line-height:1.2; white-space:nowrap; transition:background .16s ease,color .16s ease,border-color .16s ease; }
.ticker-section-nav a:hover,.ticker-section-nav a.active { color:#aaf0d4; border-color:rgba(78,211,159,.21); background:rgba(62,196,145,.09); text-decoration:none; }
.ticker-section-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#modal-body > p { max-width:66ch; color:#aab9c2; font-size:.91rem; line-height:1.7; }
#modal-body > .ticker-profile-heading + p { margin:.5rem 0 1.1rem; color:#aab9c2; }
.ctx-section { scroll-margin-top:126px; padding:1.1rem 0 1.25rem; border-top:1px solid rgba(145,174,192,.12); }
.ctx-section h3 { display:flex; align-items:center; gap:.55rem; margin:0 0 .62rem; color:#a8bdc7; font-size:.7rem; font-weight:740; letter-spacing:.105em; line-height:1.5; text-transform:uppercase; }
.ctx-section h3::before { content:""; width:3px; height:13px; flex:none; border-radius:5px; background:linear-gradient(180deg,#71e4ba,#479fdb); box-shadow:0 0 10px rgba(75,205,162,.22); }
.ctx-section p,.ctx-section > .plain-list { max-width:78ch; color:#cfdae0; font-size:.91rem; line-height:1.72; }
.ctx-section > p { margin:0; }
.ctx-section .plain-list { padding-left:1.15rem; }
.ctx-section .plain-list li { padding:.13rem 0 .13rem .18rem; }
.ctx-section .plain-list li::marker { color:#62d8aa; }
.ctx-section .muted { color:#8295a2; font-size:.78rem; line-height:1.6; }
.ctx-section .ctx-stats { gap:.48rem; margin:0 0 .65rem; }
.ctx-section .ctx-stat { padding:.42rem .66rem; border-color:rgba(148,178,195,.13); border-radius:9px; background:rgba(5,12,18,.4); color:#91a5b1; font-size:.76rem; }
.ctx-section .ctx-stat b { margin-left:.16rem; color:#deeaed; }
.ctx-section .bd-table { display:table; border-spacing:0; font-size:.79rem; }
.ctx-section .bd-table th { padding:.52rem .55rem; border-bottom:1px solid rgba(151,179,193,.13); color:#7f96a3; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; }
.ctx-section .bd-table td { padding:.55rem; border-bottom:1px solid rgba(151,179,193,.075); }
.ctx-section .bd-bar { min-width:72px; height:5px; background:rgba(151,179,193,.12); }
.ctx-section .bd-bar i { border-radius:5px; box-shadow:0 0 10px rgba(84,205,160,.22); }
.ctx-section .hl-list { max-width:80ch; }
.ctx-section .hl-list li { padding:.63rem .35rem; border-bottom-color:rgba(145,174,192,.1); color:#c6d3d9; line-height:1.55; }
.ctx-section .hl-list li a { color:#c8e4dc; text-decoration-color:rgba(104,217,171,.36); text-underline-offset:3px; }
.ctx-section .hl-list li a:hover { color:#7ce0b8; }
#modal-body .banner.subscribe { margin:1rem 0; }
@media (max-width:700px) {
  .modal { align-items:flex-end; padding:0; }
  .modal-inner { width:100%; max-width:none; max-height:96dvh; border-radius:18px 18px 0 0; border-bottom:0; }
  .ticker-modal-bar { min-height:53px; padding:.55rem 1rem; }
  .ticker-modal-context { gap:.4rem; font-size:.58rem; }
  .ticker-modal-context span:last-child { font-size:.54rem; }
  .ticker-modal-bar #modal-close { min-height:32px; padding:.38rem .58rem; }
  #modal-body { padding:0 1rem 1.6rem; }
  .ticker-profile-heading { flex-wrap:wrap; gap:.55rem .75rem; padding:1.05rem 0 .9rem; }
  .ticker-profile-heading h2 { font-size:1.45rem; }
  .ticker-profile-heading .ticker-logo.lg { width:41px; height:41px; border-radius:12px; }
  .ticker-profile-caption { margin-left:0; }
  .ticker-section-nav { top:53px; gap:.2rem; margin:0 -1rem .6rem; padding:.55rem 1rem; }
  .ticker-section-label { font-size:.54rem; }
  .ticker-section-nav a { padding:.38rem .52rem; font-size:.69rem; }
  .ctx-section { scroll-margin-top:112px; padding:.95rem 0 1.05rem; }
  .ctx-section p,.ctx-section > .plain-list { font-size:.86rem; line-height:1.65; }
  .ctx-section .bd-table { min-width:570px; }
  .ctx-section:has(.bd-table) { overflow-x:auto; }
}


/* Top-pick stock identity */
.kpi .value.has-stock { margin-top:.62rem; }
.kpi .value.has-stock .kpi-stock-link { display:flex; align-items:center; gap:.72rem; width:100%; min-height:49px; padding:0; color:#f1f7f6; border:0; border-radius:11px; background:transparent; box-shadow:none; text-align:left; cursor:pointer; }
.kpi .value.has-stock .kpi-stock-link:hover { color:#fff; background:rgba(73,209,160,.045); box-shadow:none; filter:none; transform:translateY(-1px); }
.kpi-stock-logo { width:46px; height:46px; flex:none; border:1px solid rgba(93,226,174,.32); border-radius:14px; color:#a9f2d6; background:radial-gradient(circle at 32% 24%,rgba(104,240,190,.24),rgba(44,176,132,.09) 55%,rgba(16,40,37,.88)); box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 0 3px rgba(66,212,156,.045),0 8px 20px -13px rgba(48,226,163,.72); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.kpi-stock-logo::before { font-family:var(--mono); font-size:1rem; font-weight:800; letter-spacing:-.07em; text-shadow:0 0 12px rgba(92,238,183,.25); }
.ticker-logo::before { content:none; }
.stock-logo-mark { position:absolute; z-index:0; width:22px; height:22px; color:currentColor; }
.kpi-stock-logo .stock-logo-mark { width:32px; height:32px; color:#85efb7; filter:drop-shadow(0 0 6px rgba(90,235,165,.28)); }
.kpi-stock-logo img { inset:6px; width:32px; height:32px; padding:4px; border-radius:9px; background:#f7faf9; object-fit:contain; }
.kpi .value.has-stock .kpi-stock-link:hover .kpi-stock-logo { border-color:rgba(106,241,193,.58); box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 0 4px rgba(66,212,156,.07),0 10px 24px -12px rgba(48,226,163,.72); transform:scale(1.035); }
.kpi-stock-symbol { color:#f4f8f8; font-size:1.92rem; font-weight:760; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-stock-arrow { width:17px; height:17px; flex:none; margin-left:auto; color:#748b92; transition:color .16s ease,transform .16s ease; }
.kpi .value.has-stock .kpi-stock-link:hover .kpi-stock-arrow { color:#73e0b6; transform:translate(1px,-1px); }
.kpi .value.has-stock .kpi-stock-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:620px) {
  .kpi .value.has-stock .kpi-stock-link { gap:.6rem; min-height:43px; }
  .kpi-stock-logo { width:40px; height:40px; border-radius:12px; }
  .kpi-stock-logo img { inset:5px; width:30px; height:30px; padding:4px; }
  .kpi-stock-logo .stock-logo-mark { width:29px; height:29px; }
  .kpi-stock-symbol { font-size:1.65rem; }
  .kpi-stock-arrow { width:15px; height:15px; }
}


/* Historical quantitative risk cards */
.quant-risk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:.15rem 0 .72rem; }
.quant-risk-card { display:flex; flex-direction:column; min-width:0; min-height:102px; padding:.82rem .9rem .75rem; border:1px solid rgba(135,169,185,.14); border-radius:12px; background:linear-gradient(145deg,rgba(22,39,49,.72),rgba(13,24,33,.76)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.quant-risk-card > span { color:#8ca4b0; font-size:.64rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.quant-risk-card strong { margin:.42rem 0 .3rem; color:#e8f2f2; font-family:var(--mono); font-size:1.27rem; font-weight:690; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.quant-risk-card small { margin-top:auto; color:#778e9a; font-size:.64rem; line-height:1.45; }
.quant-risk-note { max-width:100%!important; margin:.35rem 0 0!important; color:#8296a1!important; font-size:.68rem!important; line-height:1.55!important; }
@media (max-width:760px) { .quant-risk-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } .quant-risk-card { min-height:92px; padding:.7rem .72rem; } .quant-risk-card strong { font-size:1.12rem; } }


/* Keep every stock-section shortcut discoverable instead of clipping the last buttons */
.ticker-section-nav { flex-wrap:wrap; overflow-x:visible; overflow-y:visible; scrollbar-width:auto; }
.ctx-section { scroll-margin-top:170px; }
@media (max-width:700px) {
  .ticker-section-nav { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(99,220,176,.62) rgba(124,154,169,.12); padding-bottom:.78rem; }
  .ticker-section-nav::-webkit-scrollbar { display:block; height:5px; }
  .ticker-section-nav::-webkit-scrollbar-track { border-radius:5px; background:rgba(124,154,169,.12); }
  .ticker-section-nav::-webkit-scrollbar-thumb { border-radius:5px; background:rgba(99,220,176,.62); }
  .ctx-section { scroll-margin-top:120px; }
}

/* Screening-filter diagram: each rule is a legible gate, not a dense table */
.gate-status-section { min-width:0; overflow-x:clip; }
.gate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.62rem; min-width:0; margin:.15rem 0 .7rem; }
.gate-row { display:flex; flex-direction:column; gap:.53rem; min-width:0; padding:.78rem .82rem .72rem; border:1px solid rgba(135,169,185,.14); border-radius:12px; background:linear-gradient(145deg,rgba(22,39,49,.72),rgba(13,24,33,.76)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.gate-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.45rem; min-width:0; }
.gate-name { color:#d6e3e7; font-size:.75rem; font-weight:690; line-height:1.35; overflow-wrap:anywhere; }
.gate-badge { flex:none; padding:.22rem .42rem; border:1px solid transparent; border-radius:6px; font-size:.57rem; font-weight:800; letter-spacing:.08em; line-height:1.2; }
.gate-badge.pass { color:#83e8bd; border-color:rgba(89,222,168,.24); background:rgba(55,184,130,.11); }
.gate-badge.fail { color:#f2c078; border-color:rgba(235,173,86,.25); background:rgba(201,135,46,.12); }
.gate-badge.unknown { color:#8b9ca5; border-color:rgba(139,156,165,.16); background:rgba(139,156,165,.07); }
.gate-values { display:flex; flex-wrap:wrap; gap:.28rem .75rem; color:#8196a1; font-size:.63rem; line-height:1.4; }
.gate-values span { display:flex; gap:.24rem; min-width:0; }
.gate-values b { color:#dce8eb; font-family:var(--mono); font-size:.67rem; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gate-gauge { position:relative; height:8px; overflow:visible; border:1px solid rgba(153,180,193,.1); border-radius:99px; background:linear-gradient(90deg,rgba(204,151,70,.14),rgba(128,154,166,.13) 50%,rgba(70,195,143,.15)); }
.gate-gauge.signed { background:linear-gradient(90deg,rgba(204,151,70,.13),rgba(128,154,166,.13) 50%,rgba(70,195,143,.15)); }
.gate-gauge.signed::before { content:""; position:absolute; z-index:1; top:-3px; left:var(--gate-zero,50%); width:1px; height:12px; background:rgba(220,232,235,.72); box-shadow:0 0 5px rgba(220,232,235,.3); }
.gate-gauge.rank { background:linear-gradient(90deg,rgba(70,195,143,.17),rgba(128,154,166,.12) 46%,rgba(204,151,70,.13)); }
.gate-gauge.neutral { overflow:hidden; background:rgba(128,154,166,.12); }
.gate-gauge-fill { position:absolute; top:0; height:100%; border-radius:99px; background:linear-gradient(90deg,#47ba91,#78e0b4); }
.gate-gauge-fill.fail { background:linear-gradient(90deg,#d69b48,#f0c078); }
.gate-gauge-fill.pass { background:linear-gradient(90deg,#35a97d,#78e0b4); }
.gate-cutoff-marker { position:absolute; z-index:2; top:-4px; width:2px; height:14px; border-radius:2px; background:#f4d08a; box-shadow:0 0 0 2px rgba(244,208,138,.13),0 0 8px rgba(244,208,138,.35); transform:translateX(-50%); }
.gate-value-marker { position:absolute; z-index:3; top:50%; width:7px; height:7px; border:1.5px solid #e6f5ee; border-radius:50%; background:#43c995; box-shadow:0 0 7px rgba(83,224,171,.62); transform:translate(-50%,-50%); }
.gate-gauge-fill.fail + .gate-value-marker { background:#e5ad5c; box-shadow:0 0 7px rgba(229,173,92,.52); }
.gate-axis { display:flex; justify-content:space-between; margin-top:-.33rem; color:#718793; font-family:var(--mono); font-size:.55rem; font-variant-numeric:tabular-nums; }
.gate-detail { color:#8296a1; font-size:.62rem; line-height:1.45; overflow-wrap:anywhere; }
.gate-status-note { max-width:100%!important; margin:.35rem 0 0!important; color:#8296a1!important; font-size:.68rem!important; line-height:1.55!important; overflow-wrap:anywhere; }
.gate-empty { grid-column:1/-1; margin:.2rem 0!important; color:#8296a1!important; font-size:.78rem!important; }
@media (max-width:760px) { .gate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.52rem; } }
@media (max-width:420px) { .gate-row { gap:.46rem; padding:.68rem .64rem .64rem; } .gate-name { font-size:.7rem; } .gate-values { gap:.2rem .42rem; font-size:.6rem; } .gate-values b { font-size:.62rem; } }

/* Keep every stock-section shortcut discoverable instead of clipping the last buttons */
.ticker-section-nav { flex-wrap:wrap; overflow-x:visible; overflow-y:visible; scrollbar-width:auto; }
.ctx-section { scroll-margin-top:170px; }
@media (max-width:700px) {
  .ticker-section-nav { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:rgba(99,220,176,.62) rgba(124,154,169,.12); padding-bottom:.78rem; }
  .ticker-section-nav::-webkit-scrollbar { display:block; height:5px; }
  .ticker-section-nav::-webkit-scrollbar-track { border-radius:5px; background:rgba(124,154,169,.12); }
  .ticker-section-nav::-webkit-scrollbar-thumb { border-radius:5px; background:rgba(99,220,176,.62); }
  .ctx-section { scroll-margin-top:120px; }
}
/* Historical quantitative risk cards */
.quant-risk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:.15rem 0 .72rem; }
.quant-risk-card { display:flex; flex-direction:column; min-width:0; min-height:102px; padding:.82rem .9rem .75rem; border:1px solid rgba(135,169,185,.14); border-radius:12px; background:linear-gradient(145deg,rgba(22,39,49,.72),rgba(13,24,33,.76)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.quant-risk-card > span { color:#8ca4b0; font-size:.64rem; font-weight:700; letter-spacing:.075em; text-transform:uppercase; }
.quant-risk-card strong { margin:.42rem 0 .3rem; color:#e8f2f2; font-family:var(--mono); font-size:1.27rem; font-weight:690; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.quant-risk-card small { margin-top:auto; color:#778e9a; font-size:.64rem; line-height:1.45; }
.quant-risk-note { max-width:100%!important; margin:.35rem 0 0!important; color:#8296a1!important; font-size:.68rem!important; line-height:1.55!important; }
@media (max-width:760px) { .quant-risk-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; } .quant-risk-card { min-height:92px; padding:.7rem .72rem; } .quant-risk-card strong { font-size:1.12rem; } }
/* Semantic metric colors */
.quant-risk-card strong.metric-positive { color:#73e0ad; }
.quant-risk-card strong.metric-caution { color:#f0c16f; }
.quant-risk-card strong.metric-negative { color:#ff8087; }
.quant-risk-card strong.metric-neutral { color:#b9c8cf; }
/* Screening-filter diagram: each rule is a legible gate, not a dense table */
.gate-status-section { min-width:0; overflow-x:clip; }
.gate-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.62rem; min-width:0; margin:.15rem 0 .7rem; }
.gate-row { display:flex; flex-direction:column; gap:.53rem; min-width:0; padding:.78rem .82rem .72rem; border:1px solid rgba(135,169,185,.14); border-radius:12px; background:linear-gradient(145deg,rgba(22,39,49,.72),rgba(13,24,33,.76)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.gate-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.45rem; min-width:0; }
.gate-name { color:#d6e3e7; font-size:.75rem; font-weight:690; line-height:1.35; overflow-wrap:anywhere; }
.gate-badge { flex:none; padding:.22rem .42rem; border:1px solid transparent; border-radius:6px; font-size:.57rem; font-weight:800; letter-spacing:.08em; line-height:1.2; }
.gate-badge.pass { color:#83e8bd; border-color:rgba(89,222,168,.24); background:rgba(55,184,130,.11); }
.gate-badge.fail { color:#f2c078; border-color:rgba(235,173,86,.25); background:rgba(201,135,46,.12); }
.gate-badge.unknown { color:#8b9ca5; border-color:rgba(139,156,165,.16); background:rgba(139,156,165,.07); }
.gate-values { display:flex; flex-wrap:wrap; gap:.28rem .75rem; color:#8196a1; font-size:.63rem; line-height:1.4; }
.gate-values span { display:flex; gap:.24rem; min-width:0; }
.gate-values b { color:#dce8eb; font-family:var(--mono); font-size:.67rem; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.gate-gauge { position:relative; height:8px; overflow:visible; border:1px solid rgba(153,180,193,.1); border-radius:99px; background:linear-gradient(90deg,rgba(204,151,70,.14),rgba(128,154,166,.13) 50%,rgba(70,195,143,.15)); }
.gate-gauge.signed { background:linear-gradient(90deg,rgba(204,151,70,.13),rgba(128,154,166,.13) 50%,rgba(70,195,143,.15)); }
.gate-gauge.signed::before { content:""; position:absolute; z-index:1; top:-3px; left:var(--gate-zero,50%); width:1px; height:12px; background:rgba(220,232,235,.72); box-shadow:0 0 5px rgba(220,232,235,.3); }
.gate-gauge.rank { background:linear-gradient(90deg,rgba(70,195,143,.17),rgba(128,154,166,.12) 46%,rgba(204,151,70,.13)); }
.gate-gauge.neutral { overflow:hidden; background:rgba(128,154,166,.12); }
.gate-gauge-fill { position:absolute; top:0; height:100%; border-radius:99px; background:linear-gradient(90deg,#47ba91,#78e0b4); }
.gate-gauge-fill.fail { background:linear-gradient(90deg,#d69b48,#f0c078); }
.gate-gauge-fill.pass { background:linear-gradient(90deg,#35a97d,#78e0b4); }
.gate-cutoff-marker { position:absolute; z-index:2; top:-4px; width:2px; height:14px; border-radius:2px; background:#f4d08a; box-shadow:0 0 0 2px rgba(244,208,138,.13),0 0 8px rgba(244,208,138,.35); transform:translateX(-50%); }
.gate-value-marker { position:absolute; z-index:3; top:50%; width:7px; height:7px; border:1.5px solid #e6f5ee; border-radius:50%; background:#43c995; box-shadow:0 0 7px rgba(83,224,171,.62); transform:translate(-50%,-50%); }
.gate-gauge-fill.fail + .gate-value-marker { background:#e5ad5c; box-shadow:0 0 7px rgba(229,173,92,.52); }
.gate-axis { display:flex; justify-content:space-between; margin-top:-.33rem; color:#718793; font-family:var(--mono); font-size:.55rem; font-variant-numeric:tabular-nums; }
.gate-detail { color:#8296a1; font-size:.62rem; line-height:1.45; overflow-wrap:anywhere; }
.gate-charts { min-width:0; width:100%; margin:.9rem 0 .7rem; padding:.75rem .8rem .55rem; overflow:hidden; border:1px solid rgba(135,169,185,.13); border-radius:12px; background:linear-gradient(155deg,rgba(17,31,41,.78),rgba(11,20,28,.72)); }
.gate-chart-legend { display:flex; flex-wrap:wrap; gap:.35rem .9rem; align-items:center; margin:0 0 .12rem; color:#9aadb7; font-size:.61rem; line-height:1.4; }
.gate-chart-legend span { display:inline-flex; align-items:center; gap:.33rem; }
.gate-chart-legend span i { display:inline-block; width:16px; height:2px; border-radius:2px; background:#64d8b0; }
.gate-chart-legend .legend-ma { background:#95a5af; }
.gate-chart-legend .legend-band,.gate-chart-legend .legend-cutoff { height:0; border-top:2px dashed #e5b96c; background:transparent; }
.gate-chart-legend .legend-rsi { background:#7ac7ed; }
.gate-price-chart,.gate-rsi-chart { display:block; width:100%; height:160px; overflow:visible; }
.gate-rsi-chart { height:90px; }
.gate-price-chart-frame,.gate-rsi-chart-frame { position:relative; width:100%; min-width:0; }
.gate-price-chart-frame { height:160px; }
.gate-rsi-chart-frame { height:90px; }
.gate-y-label { position:absolute; z-index:2; left:0; width:40px; transform:translateY(-50%); color:#8296a1; font-family:var(--mono); font-size:9px; line-height:1; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.price-y-top { top:13.75%; }
.price-y-mid { top:46.25%; }
.price-y-bottom { top:78.75%; }
.rsi-y-top { top:8.89%; }
.rsi-y-mid { top:40%; }
.rsi-y-bottom { top:71.11%; }
.gate-chart-last-value { position:absolute; z-index:2; top:3px; right:2px; padding:.12rem .35rem; border:1px solid rgba(104,224,181,.2); border-radius:5px; background:rgba(10,24,26,.8); color:#83e8bd; font-family:var(--mono); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.gate-chart-dates { display:flex; justify-content:space-between; margin:-.1rem 0 .25rem; padding:0 1.67% 0 6.39%; color:#8296a1; font-size:9px; line-height:1.2; white-space:nowrap; }
.gate-chart-dates span { overflow:hidden; text-overflow:ellipsis; }
.gate-chart-dates span:first-child { text-align:left; }
.gate-chart-dates span:last-child { text-align:right; }
.gate-chart-gridline { stroke:rgba(145,174,192,.12); stroke-width:1; vector-effect:non-scaling-stroke; }
.gate-chart-axis,.gate-chart-date,.gate-last-label,.gate-rsi-label { fill:#8296a1; font-family:var(--mono); font-size:9px; }
.gate-chart-date { font-family:Inter,system-ui,sans-serif; font-size:9px; }
.gate-last-label { fill:#83e8bd; font-size:10px; font-weight:700; }
.gate-series-close,.gate-series-ma,.gate-series-band,.gate-series-rsi { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.gate-series-close { stroke:#61ddb0; stroke-width:2.2; }
.gate-series-ma { stroke:#9aabb5; stroke-width:1.45; }
.gate-series-band { stroke:#e4b669; stroke-width:1.65; stroke-dasharray:5 4; }
.gate-close-dot { fill:#68e0b5; stroke:#d1f7e7; stroke-width:1.3; vector-effect:non-scaling-stroke; }
.gate-rsi-plot { fill:rgba(127,153,167,.045); }
.gate-rsi-shade { fill:rgba(226,174,86,.09); }
.gate-rsi-midline { stroke:rgba(160,181,192,.3); stroke-width:1; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; }
.gate-rsi-cutoff { stroke:#e5b96c; stroke-width:1.4; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.gate-rsi-label { fill:#e5c486; font-size:8px; }
.gate-series-rsi { stroke:#78c9ee; stroke-width:2; }
.gate-rsi-dot { fill:#92dcf7; stroke:#e5f8ff; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.gate-chart-caption { max-width:none!important; margin:.2rem 0 0!important; color:#8296a1!important; font-size:.64rem!important; line-height:1.5!important; }
.gate-chart-empty { max-width:none!important; margin:.8rem 0!important; padding:.85rem; border:1px dashed rgba(135,169,185,.18); border-radius:9px; color:#8296a1!important; font-size:.76rem!important; text-align:center; }
.gate-status-note { max-width:100%!important; margin:.35rem 0 0!important; color:#8296a1!important; font-size:.68rem!important; line-height:1.55!important; overflow-wrap:anywhere; }
.gate-empty { grid-column:1/-1; margin:.2rem 0!important; color:#8296a1!important; font-size:.78rem!important; }
@media (max-width:760px) { .gate-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.52rem; } }
@media (max-width:760px) { .gate-price-chart,.gate-price-chart-frame { height:120px; } .gate-rsi-chart,.gate-rsi-chart-frame { height:70px; } .gate-charts { padding:.65rem .55rem .45rem; } .gate-chart-legend { gap:.3rem .65rem; font-size:.58rem; } }
@media (max-width:420px) { .gate-row { gap:.46rem; padding:.68rem .64rem .64rem; } .gate-name { font-size:.7rem; } .gate-values { gap:.2rem .42rem; font-size:.6rem; } .gate-values b { font-size:.62rem; } }