/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --bg:        #0E1117;
  --panel:     #161B24;
  --panel2:    #1E2533;
  --border:    #262D3A;
  --text:      #E8ECF0;
  --dim:       #6B7B8D;
  --green:     #00C896;
  --red:       #F04060;
  --blue:      #3D8FEF;
  --amber:     #F0A830;
  --purple:    #A070E8;
  --teal:      #00B8D0;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --text-bright: #F0F4F8;
  --sidebar-w: 64px;
}

[data-theme="light"] {
  --bg:        #F2F4F8;
  --panel:     #FFFFFF;
  --panel2:    #F5F7FB;
  --border:    #D0D8E8;
  --text:      #0D1117;
  --dim:       #5A6A7A;
  --green:     #007A5E;
  --red:       #C0203A;
  --blue:      #1A7FD4;
  --amber:     #A06800;
  --purple:    #6030B8;
  --teal:      #006878;
  --text-bright: #0D1117;
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Page wrapper ───────────────────────────────────────────────────────── */
/* .sidebar is position:fixed (out of normal flow), so it doesn't need — and
   must not have — flex sizing here: body was flex with only one real flex
   participant (.page-content), so flex:1 sized it against the FULL body
   width (100vw) and margin-left then shifted the whole box another
   var(--sidebar-w) to the right without shrinking it, overflowing every
   page by exactly the sidebar's width. A plain block with margin-left is
   the correct sizing (100% of the containing block minus the margin). */
.page-content {
  min-width: 0;
  margin-left: var(--sidebar-w);
}

/* ── Global navigation loading feedback (see app.js) ───────────────────── */
#iw-nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  z-index: 9999;
  opacity: 0;
  transition: width 3.5s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.2s ease-in;
  pointer-events: none;
}
#iw-nav-progress.iw-nav-active {
  width: 80%;
  opacity: 1;
}
body.iw-nav-loading { cursor: progress; }
body.iw-nav-loading .page-content {
  opacity: 0.55;
  transition: opacity 0.2s ease-in 0.15s;
  pointer-events: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--teal); }

pre, code {
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-brand { font-size: 22px; font-weight: 700; color: var(--text); }
.login-brand span { color: var(--green); }
.login-subtitle { color: var(--dim); font-size: 13px; margin-bottom: 12px; }
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.login-field label { font-size: 12px; color: var(--dim); letter-spacing: 0.3px; }
.login-field input {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.2s;
}
.login-field input:focus { border-color: var(--green); }
.login-btn { width: 100%; margin-top: 4px; }

/* ── Cookie consent banner ──────────────────────────────────────────────── */
.iw-consent-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.iw-consent-text {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
  margin: 0;
}
.iw-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .iw-consent-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
  .iw-consent-actions { width: 100%; }
  .iw-consent-actions .btn { flex: 1; }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  padding: 14px 0 12px;
  gap: 0;
}

.sb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.sb-brand:hover { opacity: 0.8; }

.sb-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex: 1;
}

.sb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  color: var(--dim);
  text-decoration: none;
  gap: 3px;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.sb-item:hover { color: var(--text); background: var(--panel2); }
.sb-item.active { color: var(--green); background: rgba(0, 200, 150, 0.08); }

.sb-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-align: center;
  line-height: 1;
}

.sb-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sb-item.sb-danger { }
.sb-item.sb-danger:hover { color: var(--red); background: rgba(240, 64, 96, 0.08); }

.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ── Mobile: sidebar becomes a bottom nav bar ────────────────────────────── */
/* A 64px vertical rail eats ~16% of a 390px viewport for icons alone, and
   .page-content's margin-left was sized against it unconditionally — below
   this breakpoint the sidebar relayouts to a horizontal bottom bar instead
   (a native mobile pattern) and page content reclaims the full width. */
@media (max-width: 640px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 58px;
    min-height: 0;
    left: 0; right: 0; top: auto; bottom: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 0 4px;
    gap: 0;
  }
  .sb-brand { display: none; }
  .sb-nav { flex-direction: row; width: auto; flex: 1; justify-content: space-around; }
  .sb-bottom {
    flex-direction: row;
    width: auto;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .sb-item { width: 44px; height: 44px; }
  .sb-label { font-size: 10px; }
  .page-content { padding-bottom: 58px; }
}

/* ── Sections ─ (unchanged) ─────────────────────────────────────────────── */

/* ── Sections ───────────────────────────────────────────────────────────── */
main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
@media (max-width: 640px) {
  /* Desktop-sized page margins + card padding + section gaps were never
     tightened for mobile — on a 390px screen that's a meaningful chunk of
     the viewport spent on empty margin instead of content. .iw-hero's
     negative margin cancels main's top/left/right padding exactly (to go
     edge-to-edge as a sticky header), so it has to shrink in lockstep —
     that override lives near the other ≤640px .iw-hero rules further down
     the file (search for ".iw-hero's negative margin"), since it has to be
     the last ".iw-hero { margin }" declaration in source order to win over
     the unconditional desktop rule and the ≤700px one. */
  main { padding: 16px 12px 32px; }
}

.admin-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

.section { margin-bottom: 56px; }

.section-header { margin-bottom: 24px; }
.section-header h1,
.section-header h2 {
  font-size: clamp(20px, 3vw, 28px);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.subtitle {
  color: var(--dim);
  margin-top: 6px;
  font-size: 13px;
}

/* ── Generate card ──────────────────────────────────────────────────────── */
/* ── Data Source Health panel ─────────────────────────────────────────────── */
.dh-panel { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.dh-loading { padding: 24px; color: var(--dim); font-size: 13px; }
.dh-error   { padding: 16px; color: var(--red); font-size: 13px; }
.dh-header-row {
  display: grid;
  grid-template-columns: 36px 1fr 180px 1fr;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.dh-row {
  display: grid;
  grid-template-columns: 36px 1fr 180px 1fr;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  font-size: 13px;
}
.dh-row:last-of-type { border-bottom: none; }
.dh-cell-status { display: flex; align-items: center; justify-content: center; }
.dh-icon { font-size: 14px; font-weight: 800; }
.dh-status-ok    .dh-icon { color: var(--green); }
.dh-status-warn  .dh-icon { color: var(--amber); }
.dh-status-error .dh-icon { color: var(--red); }
.dh-status-none  .dh-icon { color: var(--dim); }
.dh-cell-label { font-weight: 500; color: var(--text); }
.dh-cell-count { font-size: 12px; color: var(--dim); }
.dh-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.dh-bar-ok   { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s; }
.dh-cell-detail { font-size: 11px; color: var(--dim); }
.dh-errors { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.dh-err-pill {
  background: rgba(240,64,96,0.12);
  color: var(--red);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dh-fail-list { color: var(--amber); font-size: 10px; }
.dh-footer { padding: 8px 16px; font-size: 10px; color: var(--dim); background: var(--panel2); border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .dh-header-row, .dh-row { grid-template-columns: 28px 1fr 100px; }
  .dh-cell-detail { display: none; }
}

/* ── Nightly refresh (cron) panel ── */
.cr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 20px;
}
.cr-status-idle       { background: var(--panel2); color: var(--dim); border: 1px solid var(--border); }
.cr-status-running    { background: rgba(240,168,48,0.12); color: var(--amber); border: 1px solid rgba(240,168,48,0.3); }
.cr-status-completed  { background: rgba(0,255,136,0.1);  color: var(--green); border: 1px solid rgba(0,255,136,0.25); }
.cr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-status-running .cr-status-dot { animation: cr-pulse 1.2s ease-in-out infinite; }
@keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.cr-meta-row { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin: 10px 0; }
.cr-meta-row b { color: var(--text); font-weight: 600; }

.cr-progress-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.cr-progress-bar { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.4s; }

.cr-universe-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-universe-chip { font-size: 10px; color: var(--dim); background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; }
.cr-universe-chip b { color: var(--text); }

.sched-days { display: flex; gap: 6px; flex-wrap: wrap; }
.sched-day-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.sched-day-chip.active { background: rgba(0,255,136,0.12); color: var(--green); border-color: rgba(0,255,136,0.35); }

.cr-pill-group { margin-bottom: 12px; }
.cr-pill-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); margin-bottom: 6px; }
.cr-pills { display: flex; flex-wrap: wrap; gap: 4px; max-height: 160px; overflow-y: auto; }
.cr-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.cr-pill-ok   { background: rgba(0,255,136,0.08);  color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.cr-pill-fail { background: rgba(240,64,96,0.12);   color: var(--red);   border: 1px solid rgba(240,64,96,0.3); cursor: help; }
.cr-pill-pending { background: var(--panel2); color: var(--dim); border: 1px solid var(--border); }
.cr-pill-running { background: rgba(240,168,48,0.12); color: var(--amber); border: 1px solid rgba(240,168,48,0.3); }
.cr-pill-change-up   { color: var(--green); font-weight: 700; }
.cr-pill-change-down { color: var(--red);   font-weight: 700; }

.cr-kill-switch {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  background: rgba(240,64,96,0.1);
  color: var(--red);
  border: 1.5px solid rgba(240,64,96,0.4);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cr-kill-switch:hover { background: rgba(240,64,96,0.18); }
.cr-kill-switch:disabled { opacity: 0.6; cursor: default; }
.cr-kill-switch.cr-kill-switch-off {
  background: rgba(0,255,136,0.1);
  color: var(--green);
  border-color: rgba(0,255,136,0.4);
}

.generate-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 600px;
}

.ticker-input-row {
  display: flex;
  gap: 12px;
}

.ticker-input-row input {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 16px;
  font-size: 18px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: border-color 0.2s;
  outline: none;
}
.ticker-input-row input:focus { border-color: var(--green); }
.ticker-input-row input::placeholder { text-transform: none; letter-spacing: 0; color: var(--dim); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--green); color: #000; }

/* ── Progress ───────────────────────────────────────────────────────────── */
.progress-area { margin-top: 20px; }

.progress-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--teal));
  border-radius: 2px;
  width: 5%;
  transition: width 0.5s ease;
  animation: pulse-bar 2s ease-in-out infinite;
}
@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.progress-msg { color: var(--dim); font-size: 13px; }

/* ── Alerts / errors ────────────────────────────────────────────────────── */
.error-msg {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 61, 90, 0.12);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 13px;
}
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-size: 13px;
}
.alert-warning {
  background: rgba(255, 184, 77, 0.1);
  border: 1px solid var(--amber);
  color: var(--amber);
}
.alert code {
  background: rgba(255,255,255,0.08);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Report grid (gallery) ──────────────────────────────────────────────── */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.report-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  transition: border-color 0.2s, transform 0.2s;
}
.report-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
}

.report-card-img {
  position: relative;
  aspect-ratio: 9 / 5;
  overflow: hidden;
  background: var(--panel2);
}
.report-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--dim);
  font-size: 11px;
  padding: 2px 6px;
}

/* Delete button on gallery card */
.report-card-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--panel);
}
.report-card {
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.btn-clear-cache-card {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-clear-cache-card:hover { border-color: var(--amber); color: var(--amber); }
.btn-clear-cache-card:disabled { opacity: 0.6; cursor: default; }
.btn-track-nightly-card {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-track-nightly-card:hover { border-color: var(--green); color: var(--green); }
.btn-track-nightly-card:disabled { opacity: 0.6; cursor: default; }
.btn-delete-ticker-card {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-delete-ticker-card:hover { border-color: var(--red); color: var(--red); }
.btn-delete-ticker-card:disabled { opacity: 0.6; cursor: default; }
.btn-si-remove-card {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-si-remove-card:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-si-remove-card:disabled { opacity: 0.6; cursor: default; }

/* ── Admin data table (Tickers, Superinvestors) ─────────────────────────── */
.admin-table-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-table-filter {
  flex: 1;
  max-width: 320px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 7px 12px;
}
.admin-table-filter:focus { outline: none; border-color: var(--green); }
.admin-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  overflow-x: auto;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.admin-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  font-weight: 600;
  padding: 8px 10px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  color: var(--text);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
/* The Custom Tickers row can carry 3 action buttons (Clear Cache, Track
   Nightly, Delete) — the table's default white-space:nowrap above (needed
   so ticker/company/price cells don't awkwardly wrap) would otherwise force
   all 3 onto one line and silently overflow past the column/table edge
   instead of wrapping. Let this one cell wrap onto a second line instead. */
.admin-table td.admin-table-actions-cell {
  /* Specificity must beat .admin-table td's white-space: nowrap above
     (class+element beats a plain class selector regardless of source
     order) — a bare .admin-table-actions-cell rule here silently loses
     that cascade fight and the buttons keep overflowing. */
  white-space: normal;
}
.admin-table-actions-cell button,
.admin-table-actions-cell a {
  margin: 2px 6px 2px 0;
}
.admin-table tbody tr:hover { background: var(--panel2); }
.admin-table tbody tr.admin-row-hidden { display: none; }
.admin-table a.admin-table-ticker-link {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}
.admin-table a.admin-table-ticker-link:hover { text-decoration: underline; }
.admin-table .admin-table-dim { color: var(--dim); }

/* Company/Index columns are the two that can otherwise run arbitrarily
   long and force horizontal scrolling — everything else is naturally
   short (ticker symbols, prices, short status words). Truncating just
   these two (full text still available via title= on hover) keeps every
   column readable without the table needing to scroll sideways. */
.admin-td-truncate {
  max-width: 1px; /* with table-layout:fixed, forces the column to respect its <th> share instead of growing to fit content */
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table-sortable thead th[data-sort-col] {
  position: relative;
  padding-right: 16px;
}
.admin-table-sortable thead th[data-sort-col]::after {
  content: '⇅';
  position: absolute;
  right: 4px;
  opacity: 0.35;
  font-size: 9px;
}
.admin-table-sortable thead th.sort-asc::after  { content: '↑'; opacity: 1; color: var(--green); }
.admin-table-sortable thead th.sort-desc::after { content: '↓'; opacity: 1; color: var(--green); }
.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
}
.admin-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.admin-state-fresh   { background: rgba(0,255,136,0.1);  color: var(--green); }
.admin-state-running { background: rgba(240,168,48,0.12); color: var(--amber); }
.admin-state-pending  { background: var(--panel2); color: var(--dim); border: 1px solid var(--border); }
.admin-row-pending { opacity: 0.7; }
.admin-row-pending .admin-state-running { animation: cr-pulse 1.2s ease-in-out infinite; }
.admin-state-failed   { background: rgba(240,64,96,0.12); color: var(--red); }
.admin-state-stale    { background: rgba(240,168,48,0.12); color: var(--amber); }

/* Delete button on report page */
.btn-delete-report {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-delete-report:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 61, 90, 0.08);
}

.report-card-body {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ticker-tag {
  font-weight: 700;
  color: var(--green);
  font-size: 14px;
  letter-spacing: 1px;
}
.ticker-tag-lg {
  font-size: 26px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 2px;
}
.report-date { color: var(--dim); font-size: 11px; }

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--dim);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ── Report page ────────────────────────────────────────────────────────── */
.report-section { max-width: 1200px; }

.report-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.back-link {
  color: var(--dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.back-link:hover { color: var(--text); }

/* Cache status (admin report header) */
.cache-status-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cache-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.3px;
}
.cache-fresh   { background: rgba(0,255,136,0.1);  color: var(--green); border: 1px solid rgba(0,255,136,0.25); }
.cache-stale   { background: rgba(255,184,77,0.1); color: var(--amber); border: 1px solid rgba(255,184,77,0.25); }
.cache-none    { background: rgba(107,122,141,0.1); color: var(--dim);  border: 1px solid var(--border); }
.btn-clear-cache {
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--dim); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.btn-clear-cache:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.btn-clear-cache:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--green);
  border-bottom-color: var(--green);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Charts grid ────────────────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}
.chart-card:hover { border-color: var(--blue); }
.chart-label {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chart-dl-btn {
  font-size: 13px;
  color: var(--dim);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  flex-shrink: 0;
}
.chart-dl-btn:hover { background: var(--border); color: var(--green); }

.chart-img {
  width: 100%;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.chart-img:hover { opacity: 0.88; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.lightbox.hidden { display: none; }

.lb-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 56px 72px 0;
  width: 100%;
}
.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 48px rgba(0,0,0,0.8);
  user-select: none;
}

.lb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.lb-close:hover { background: var(--red); color: #fff; border-color: var(--red); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 64px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.lb-nav:hover { background: rgba(255,255,255,0.15); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

.lb-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  flex-shrink: 0;
}
.lb-counter {
  font-size: 13px;
  color: var(--dim);
  min-width: 48px;
  text-align: center;
}
.lb-label {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lb-dl-btn {
  font-size: 13px;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.lb-dl-btn:hover { border-color: var(--green); color: var(--green); }

/* ── Bias badge ─────────────────────────────────────────────────────────── */
.bias-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 6px;
}
.bias-badge.bias-bullish { background: rgba(0,255,136,0.15); color: var(--green); border: 1px solid var(--green); }
.bias-badge.bias-bearish { background: rgba(255,61,90,0.15);  color: var(--red);   border: 1px solid var(--red); }
.bias-badge.bias-neutral { background: rgba(255,184,77,0.15); color: var(--amber); border: 1px solid var(--amber); }
.bias-badge-sm { font-size: 10px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }

/* ── Public home ────────────────────────────────────────────────────────── */
.pub-hero {
  padding: 64px 24px 48px;
  text-align: center;
}
.pub-hero-inner { max-width: 700px; margin: 0 auto; }
.pub-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  margin-bottom: 16px;
}
.pub-hero-title span { color: var(--green); }
.pub-hero-sub { font-size: 1.05rem; color: var(--dim); max-width: 560px; margin: 0 auto; line-height: 1.6; }

.pub-search-form {
  display: flex;
  gap: 0;
  max-width: 480px;
  margin: 28px auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel2);
  overflow: hidden;
  transition: border-color .15s;
}
.pub-search-form:focus-within { border-color: var(--green); }
.pub-search-input {
  flex: 1;
  padding: 13px 18px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: .5px;
}
.pub-search-input::placeholder { color: var(--dim); }
.pub-search-btn {
  padding: 13px 22px;
  background: var(--green);
  color: #000;
  border: none;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.pub-search-btn:hover { opacity: .85; }

.pub-section { padding: 0 24px 64px; max-width: 1300px; margin: 0 auto; }

/* Featured + side-grid layout */
.pub-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .pub-layout { grid-template-columns: 1fr; }
}

.pub-featured-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: border-color 0.2s, transform 0.2s;
}
.pub-featured-card:hover { border-color: var(--green); transform: translateY(-3px); }
.pub-fc-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--panel2); }
.pub-fc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.4s; }
.pub-featured-card:hover .pub-fc-img img { transform: scale(1.03); }
.pub-fc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,20,0.8) 0%, transparent 60%);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 20px;
  opacity: 0; transition: opacity 0.2s;
}
.pub-featured-card:hover .pub-fc-overlay { opacity: 1; }
.pub-fc-cta { color: var(--green); font-weight: 600; font-size: 15px; }
.pub-fc-body { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.pub-fc-id { display: flex; align-items: center; gap: 10px; }
.pub-fc-ticker { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.pub-fc-meta { font-size: 12px; color: var(--dim); }
.pub-card-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: rgba(255,255,255,0.06); border: 1px solid var(--border); flex-shrink: 0; }
.pub-card-logo--sm { width: 20px; height: 20px; border-radius: 4px; }
.pub-sc-id { display: flex; align-items: center; gap: 6px; }
.pub-lv-id { display: flex; align-items: center; gap: 6px; }

.pub-side-grid { display: flex; flex-direction: column; gap: 12px; }
.pub-side-card {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 0; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.pub-side-card:hover { border-color: var(--green); transform: translateX(3px); }
.pub-sc-img { width: 100px; aspect-ratio: 1/1; overflow: hidden; background: var(--panel2); }
.pub-sc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pub-sc-body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.pub-sc-ticker { font-size: 1rem; font-weight: 700; color: var(--text); }
.pub-sc-meta { font-size: 11px; color: var(--dim); }
.pub-sc-cta { font-size: 12px; color: var(--blue); margin-top: 4px; }
.pub-side-card:hover .pub-sc-cta { color: var(--green); }

/* Single featured wrap */
.pub-featured-wrap { max-width: 700px; margin: 0 auto; }

/* ── Live-data badge (shared: public + admin) ────────────────────────────── */
.pub-lc-badge,
.badge-live {
  display:inline-block;
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--green); background:rgba(0,255,136,.1); border:1px solid rgba(0,255,136,.25);
  padding:2px 6px; border-radius:var(--radius-sm);
  margin-bottom:2px;
}
.pub-lc-name  { font-size:.75rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pub-lc-price { font-size:.88rem; font-weight:600; color:var(--text); margin-top:2px; }
.pub-lc-chg   { font-size:.76rem; font-weight:600; margin-left:3px; }
.pub-lc-pos   { color:var(--green); }
.pub-lc-neg   { color:var(--red); }

/* Public home: live-only full grid (no full reports at all) */
.pub-live-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.pub-live-card {
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none;
  transition:border-color .15s, transform .15s;
}
.pub-live-card:hover { border-color:var(--green); transform:translateY(-2px); }
.pub-live-ticker { font-size:1rem; font-weight:700; color:var(--text); }
.pub-live-name   { font-size:.75rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pub-live-price  { font-size:.9rem;  font-weight:600; color:var(--text); margin-top:3px; }
.pub-live-meta   { font-size:.7rem;  color:var(--dim); margin-top:2px; }

/* Public home: live card inside the side grid */
.pub-side-card.pub-live-card { background:var(--panel2); }
.pub-lc-body {
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px; flex:1;
}

/* Admin: live-data report card */
.report-card-live {
  display:flex; flex-direction:column;
  background:var(--panel2);
  text-decoration:none;
  border-radius:var(--radius) var(--radius) 0 0;
  flex:1;
}
.report-card-live-body {
  display:flex; flex-direction:column; gap:4px;
  padding:18px 16px 14px;
}
.report-live-name  { font-size:.8rem;  color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.report-live-price { font-size:1rem;   font-weight:600; color:var(--text); margin-top:4px; }
.report-live-chg   { font-size:.8rem;  font-weight:600; margin-left:4px; }
.rlc-pos { color:var(--green); }
.rlc-neg { color:var(--red); }

/* Admin: Generate Charts button on live cards */
.btn-gen-live {
  font-size:12px; padding:5px 10px;
  background:transparent; border:1px solid var(--border);
  color:var(--dim); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .15s, color .15s;
  font-family:inherit;
}
.btn-gen-live:hover { border-color:var(--green); color:var(--green); }

/* ── Public ticker page ──────────────────────────────────────────────────── */
.pt-hero {
  background: linear-gradient(180deg, rgba(0,255,136,0.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  padding: 40px 24px 32px;
}
.pt-hero-inner { max-width: 1300px; margin: 0 auto; }
.pt-back {
  display: inline-block; color: var(--dim); text-decoration: none;
  font-size: 13px; margin-bottom: 16px; transition: color 0.15s;
}
.pt-back:hover { color: var(--green); }
.pt-hero-main { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.pt-hero-ticker {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
  letter-spacing: -1px; color: var(--text); line-height: 1;
}
.pt-hero-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.pt-price { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--text); }
.pt-change { font-size: 1rem; font-weight: 600; }
.pt-change-up { color: var(--green); }
.pt-change-down { color: var(--red); }
.pt-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pt-consensus-badge {
  background: rgba(77,159,255,0.12); color: var(--blue);
  border: 1px solid rgba(77,159,255,0.25); border-radius: 20px;
  font-size: 12px; font-weight: 600; padding: 3px 12px; letter-spacing: 0.5px;
}
.pt-hero-sector-chip {
  background: rgba(255,255,255,0.06);
  color: #8899AA;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 10px;
}
.pt-hero-exch-chip {
  background: rgba(255,184,77,0.08);
  color: #FFB84D;
  border-color: rgba(255,184,77,0.2);
}

/* Stats strip */
.pt-stats-strip {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 24px;
  scrollbar-width: none;
  max-width: 100%;
}
.pt-stats-strip::-webkit-scrollbar { display: none; }
.pt-stat-item { padding: 14px 20px; flex-shrink: 0; }
.pt-stat-divider { width: 1px; height: 30px; background: var(--border); padding: 0; flex-shrink: 0; }
.pt-stat-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dim); margin-bottom: 4px; }
.pt-stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
.pt-stat-green { color: var(--green) !important; }
.pt-stat-red   { color: var(--red)   !important; }

/* Sections */
.pt-section { padding: 40px 24px; max-width: 1300px; margin: 0 auto; }
.pt-section-chart { padding-bottom: 0; }
.pt-section-title { font-size: 1rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }

/* Chart section */
.pt-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.pt-chart-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pt-range-group { display: flex; gap: 4px; }
.pt-range-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--dim); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.pt-range-btn:hover   { border-color: var(--green); color: var(--green); }
.pt-range-btn.active  { background: rgba(0,255,136,0.12); border-color: var(--green); color: var(--green); }

/* ── Indicator bar ────────────────────────────────────────────────────────── */
.pt-ind-ctrl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pt-ind-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 28px;
}
.pt-ind-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 3px 6px 3px 8px;
  font-size: 11px; font-weight: 600; color: var(--text);
  white-space: nowrap; transition: background 0.15s, opacity 0.15s;
  cursor: pointer; user-select: none;
}
.pt-ind-chip:hover { background: rgba(255,255,255,0.09); }
.pt-ind-chip.is-off { opacity: 0.38; }
.pt-ind-chip.is-off:hover { opacity: 0.6; }
.pt-ind-chip.is-off .pt-ind-chip-label { text-decoration: line-through; }
.pt-ind-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.pt-ind-chip-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.pt-ind-remove {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 13px; line-height: 1;
  padding: 0 2px; border-radius: 50%; transition: color 0.15s;
}
.pt-ind-remove:hover { color: #FF3D5A; }
@media (max-width: 640px) {
  /* 12×13px is too small to reliably tap — expand the hit area with
     invisible padding + a matching negative margin so the compact chip's
     visual size (and the row's overall layout) doesn't change. */
  .pt-ind-remove { padding: 10px; margin: -10px -6px -10px -8px; }
}
.pt-ind-add-btn {
  background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.3);
  color: var(--green); font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px; cursor: pointer;
  white-space: nowrap; transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.pt-ind-add-btn:hover { background: rgba(0,255,136,0.15); border-color: var(--green); }

/* ── Indicator picker modal ───────────────────────────────────────────────── */
.pt-ind-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pt-ind-modal.hidden { display: none; }
.pt-ind-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
}
.pt-ind-modal-box {
  position: relative; z-index: 1;
  background: #111827; border: 1px solid var(--border);
  border-radius: 12px; width: 100%; max-width: 640px;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.pt-ind-modal-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pt-ind-modal-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.pt-ind-search {
  flex: 1; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 12px; padding: 6px 10px;
  outline: none; transition: border-color 0.15s;
}
.pt-ind-search:focus { border-color: var(--green); }
.pt-ind-search::placeholder { color: var(--dim); }
.pt-ind-modal-close {
  background: none; border: none; color: var(--dim);
  font-size: 16px; cursor: pointer; padding: 4px 6px;
  border-radius: 6px; transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.pt-ind-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.08); }

.pt-ind-modal-cats {
  display: flex; gap: 4px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
.pt-ind-cat-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--dim); font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px; cursor: pointer;
  transition: all 0.15s;
}
.pt-ind-cat-btn:hover   { border-color: var(--green); color: var(--green); }
.pt-ind-cat-btn.active  { background: rgba(0,255,136,0.12); border-color: var(--green); color: var(--green); }

.pt-ind-modal-body {
  overflow-y: auto; padding: 12px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 6px; flex: 1;
}
.pt-ind-pick-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--dim);
  text-align: left; transition: all 0.15s;
}
.pt-ind-pick-btn:hover   { border-color: rgba(255,255,255,0.2); color: var(--text); background: rgba(255,255,255,0.06); }
.pt-ind-pick-btn.is-active { border-color: var(--green); color: var(--text); background: rgba(0,255,136,0.08); }
.pt-ind-pick-label { flex: 1; }
.pt-ind-check { color: var(--green); font-size: 12px; flex-shrink: 0; }
.pt-ind-pick-multi .pt-ind-pick-add { color: var(--accent); font-size: 14px; font-weight: 700; flex-shrink: 0; }
.pt-ind-inst-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: 10px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; flex-shrink: 0;
}

.pt-ind-modal-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.pt-ind-count { flex: 1; font-size: 12px; color: var(--dim); }
.pt-ind-footer-btn {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--dim); font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.pt-ind-footer-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.pt-ind-footer-primary {
  background: var(--green); border-color: var(--green);
  color: #000 !important;
}
.pt-ind-footer-primary:hover { background: #00e67a; border-color: #00e67a; }

/* ── Indicator customization popover ─────────────────────────────────────── */
.pt-ind-popover {
  position: fixed; z-index: 2000;
  background: #111827; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 12px 14px;
  width: 260px; box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 10px;
}
.pt-ind-popover.hidden { display: none; }
.pt-ind-dot-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; flex-shrink: 0;
}
.pt-ind-dot-btn .pt-ind-dot {
  width: 12px; height: 12px;
  border: 1.5px solid rgba(255,255,255,0.25); border-radius: 50%;
  transition: transform 0.15s;
}
.pt-ind-dot-btn:hover .pt-ind-dot { transform: scale(1.25); }
@media (max-width: 640px) {
  /* Same invisible hit-area expansion as .pt-ind-remove — 12×12px is too
     small to reliably tap without visually enlarging the chip's dot. */
  .pt-ind-dot-btn { padding: 10px; margin: -10px; }
}

.pop-section { display: flex; flex-direction: column; gap: 6px; }
.pop-label { font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.pop-row { display: flex; gap: 4px; flex-wrap: wrap; }

/* Color swatches */
.pop-swatches { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pop-swatch {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.pop-swatch:hover  { transform: scale(1.2); }
.pop-swatch.active { border-color: #fff; transform: scale(1.15); }
.pop-color-input {
  width: 24px; height: 24px; border: none; padding: 0; cursor: pointer;
  border-radius: 4px; background: none; outline: none; flex-shrink: 0;
}
.pop-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; }
.pop-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }

/* Width buttons */
.pop-lw-btn {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; padding: 5px 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.pop-lw-btn:hover   { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.09); }
.pop-lw-btn.active  { border-color: var(--green); background: rgba(0,255,136,0.1); }
.pop-lw-icon        { display: block; background: var(--dim); border-radius: 2px; width: 22px; }
.pop-lw-icon.lw1    { height: 1px; }
.pop-lw-icon.lw15   { height: 1.5px; }
.pop-lw-icon.lw2    { height: 2px; }
.pop-lw-icon.lw3    { height: 3px; }

/* Style & fill buttons */
.pop-ls-btn, .pop-fo-btn {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 600;
  color: var(--dim); padding: 5px 4px; letter-spacing: 0.5px;
  transition: all 0.15s; white-space: nowrap;
}
.pop-ls-btn:hover, .pop-fo-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
.pop-ls-btn.active, .pop-fo-btn.active { border-color: var(--green); color: var(--green); background: rgba(0,255,136,0.1); }

/* Light theme overrides */
[data-theme="light"] .pt-ind-popover { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .pop-lw-btn, [data-theme="light"] .pop-ls-btn, [data-theme="light"] .pop-fo-btn { background: rgba(0,0,0,0.03); }
[data-theme="light"] .pop-lw-btn:hover, [data-theme="light"] .pop-ls-btn:hover, [data-theme="light"] .pop-fo-btn:hover { background: rgba(0,0,0,0.06); }

/* Parameter inputs */
.pop-param-fields { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; margin-bottom: 4px; }
.pop-param-label  { font-size: 11px; color: var(--dim); }
.pop-param-input  { width: 72px; background: var(--bg3); border: 1px solid var(--border); color: var(--fg1); border-radius: 4px; padding: 3px 6px; font-size: 12px; text-align: right; }
.pop-param-input:focus { outline: none; border-color: var(--accent); }
.pop-param-select { background: var(--bg3); border: 1px solid var(--border); color: var(--fg1); border-radius: 4px; padding: 3px 6px; font-size: 12px; cursor: pointer; }
.pop-param-select:focus { outline: none; border-color: var(--accent); }
[data-theme="light"] .pop-param-select { background: #f4f5f7; }
.pop-apply-params { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.pop-apply-params:hover { opacity: 0.85; }
[data-theme="light"] .pop-param-input { background: #f4f5f7; }

.pt-chart-area {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  position: relative;
  /* Reserves the fully-loaded price+RSI chart height up front (measured:
     173px while #chartLoading is showing -> 542px once LightweightCharts
     renders both charts + the RSI label). Without this, the whole area
     collapsed to the small loading-spinner height and then jumped ~370px
     the moment the chart populated, shoving every card below it down in
     one frame — this single jump was responsible for essentially this
     page's entire Cumulative Layout Shift score (measured 0.272, "Poor" —
     Google's "Good" threshold is under 0.1). */
  min-height: 542px;
}
.iw-chart-legend {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
  min-height: 18px;
}
.iw-leg-time { color: var(--dim); }
.iw-leg-ohlcv b, .iw-leg-ind b { font-weight: 700; }
.iw-tz-select { font-size: 11px; padding: 4px 22px 4px 8px; height: 28px; }
.pt-lwc-chart { width: 100%; }
.pt-lwc-rsi   { width: 100%; border-top: 1px solid var(--border); }
.pt-rsi-label {
  font-size: 10px; color: var(--dim); padding: 4px 12px 8px;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-top: 1px solid var(--border);
}
.pt-chart-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px; color: var(--dim); font-size: 14px;
}
.pt-chart-loading.hidden { display: none; }
/* Scoped to the #chartLoading instance specifically (not every
   .pt-chart-loading — the earnings/financials sections reuse this same
   class with their own inline padding, in normal document flow, and
   shouldn't be repositioned) — centers the spinner within the min-height
   now reserved on .pt-chart-area above, instead of sitting near the top of
   the taller box. */
#chartLoading { position: absolute; inset: 0; padding: 0; }
.chart-error { color: var(--red); }

/* Spinner */
.pt-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Ticker loading page (instant shell while a new ticker is fetched live) */
.iw-tl-wrap { padding: 24px; max-width: 1100px; }

.iw-tl-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.iw-tl-spinner {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--border); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
.iw-tl-ticker {
  font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; color: var(--text);
}
.iw-tl-status { font-size: 0.9rem; color: var(--dim); }
.iw-tl-status-error { color: var(--red); }
.iw-tl-status-error + .iw-tl-retry { display: inline-flex; }
.iw-tl-retry {
  display: none; margin-left: 4px; padding: 6px 14px; border-radius: 8px;
  background: var(--green); color: #000; font-size: 0.85rem; font-weight: 700;
  border: none; cursor: pointer; align-items: center;
}
.iw-tl-retry:hover { opacity: 0.85; }

@keyframes iw-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.iw-tl-skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel2) 25%, var(--border) 37%, var(--panel2) 63%);
  background-size: 800px 100%;
  animation: iw-shimmer 1.6s linear infinite;
}
.iw-tl-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.iw-tl-strip .iw-tl-skel { height: 52px; flex: 1; min-width: 120px; }
.iw-tl-chart.iw-tl-skel { height: 340px; margin-bottom: 20px; }
.iw-tl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.iw-tl-cards .iw-tl-skel { height: 160px; }

/* Analysis grid */
.pt-analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
@media (max-width: 600px) { .pt-analysis-grid { grid-template-columns: 1fr; } }

.pt-analysis-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.pt-analysis-card:hover { border-color: rgba(0,255,136,0.3); transform: translateY(-2px); }
.pt-ac-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.pt-ac-num {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(0,255,136,0.12); color: var(--green);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-ac-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }
.pt-ac-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.pt-ac-line { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.pt-ac-bull { color: var(--green); font-weight: 500; }
.pt-ac-bear { color: var(--red);   font-weight: 500; }
.pt-ac-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--dim); margin-top: 6px; }
.pt-ac-bullet { font-size: 12.5px; color: var(--dim); padding-left: 4px; line-height: 1.5; }

/* Deep dive charts */
.pt-charts-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
@media (max-width: 520px) { .pt-charts-gallery { grid-template-columns: 1fr; } }

.pt-chart-thumb {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  cursor: pointer; transition: border-color 0.2s;
}
.pt-chart-thumb:hover { border-color: rgba(0,255,136,0.4); }
.pt-chart-thumb-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--dim);
}
.pt-chart-dl { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.15s; }
.pt-chart-dl:hover { color: var(--green); }
.pt-chart-img { width: 100%; display: block; cursor: zoom-in; transition: transform 0.3s; }
.pt-chart-thumb:hover .pt-chart-img { transform: scale(1.02); }

/* ── Analysis card components ───────────────────────────────────────────── */
.pt-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  display: flex; flex-direction: column;
}
.pt-card:hover { border-color: rgba(0,255,136,0.3); transform: translateY(-2px); }

.pt-card-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.pt-card-num {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: rgba(0,255,136,0.12); color: var(--green);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.pt-card-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.3px; }

.pt-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.pt-metric-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--dim);
  display: flex; justify-content: space-between; align-items: center;
}
.pt-metric-value { color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* EMA pills */
.pt-ema-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pt-ema-pill {
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.pt-pill-bull  { background: rgba(0,255,136,0.12); color: var(--green); border: 1px solid rgba(0,255,136,0.25); }
.pt-pill-bear  { background: rgba(255,61,90,0.12);  color: var(--red);   border: 1px solid rgba(255,61,90,0.25); }
.pt-pill-neutral { background: rgba(107,122,141,0.1); color: var(--dim); border: 1px solid var(--border); }

/* RSI bar */
.pt-rsi-bar-wrap {
  position: relative; height: 8px; border-radius: 4px;
  display: flex; overflow: hidden; margin-top: 8px;
}
.pt-rsi-zone-low  { width: 30%; background: rgba(0,255,136,0.25); }
.pt-rsi-zone-mid  { width: 40%; background: rgba(107,122,141,0.15); }
.pt-rsi-zone-high { width: 30%; background: rgba(255,61,90,0.25); }
.pt-rsi-marker {
  position: absolute; top: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--panel);
  transform: translateX(-50%); transition: left 0.5s;
}
.pt-rsi-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--dim); margin-top: 4px; padding: 0 2px;
}

/* 52W range bar */
.pt-52w-bar-wrap { margin-top: 8px; }
.pt-52w-track {
  position: relative; height: 4px; background: var(--border); border-radius: 2px;
  background: linear-gradient(to right, var(--red), var(--dim) 50%, var(--green));
}
.pt-52w-marker {
  position: absolute; top: -4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--panel);
  transform: translateX(-50%); transition: left 0.5s;
}
.pt-52w-labels { font-size: 10px; color: var(--dim); margin-top: 6px; word-break: break-all; line-height: 1.4; }

/* Beat rate bar */
.pt-beat-bar-wrap {
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 8px;
}
.pt-beat-bar { height: 100%; background: linear-gradient(90deg, var(--green), var(--teal)); border-radius: 3px; transition: width 0.8s; }
.pt-beat-pct { font-size: 22px; font-weight: 800; margin-top: 4px; }

/* EPS row */
.pt-eps-row { margin-top: 4px; }
.pt-eps-val { font-size: 13px; color: var(--text); line-height: 1.5; }

/* Valuation grid */
.pt-val-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pt-val-item { background: var(--panel2); border-radius: var(--radius-sm); padding: 10px 12px; }
.pt-val-label { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.pt-val-num { font-size: 18px; font-weight: 700; color: var(--text); }

/* Margin bars */
.pt-margin-row { display: grid; grid-template-columns: 72px 1fr 40px; gap: 8px; align-items: center; }
.pt-margin-label { font-size: 11px; color: var(--dim); }
.pt-margin-bar-wrap { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pt-margin-bar { height: 100%; border-radius: 3px; transition: width 0.8s; }
.pt-margin-gross { background: var(--green); }
.pt-margin-op    { background: var(--blue); }
.pt-margin-net   { background: var(--teal); }
.pt-margin-pct   { font-size: 11px; font-weight: 700; color: var(--text); text-align: right; }

/* Consensus */
.pt-consensus-wrap { display: flex; justify-content: center; padding: 8px 0; }
.pt-consensus-badge-lg {
  padding: 10px 28px; border-radius: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: 1.5px;
}
.pt-cons-buy  { background: rgba(0,255,136,0.15); color: var(--green); border: 1px solid rgba(0,255,136,0.3); }
.pt-cons-hold { background: rgba(255,184,77,0.15); color: var(--amber); border: 1px solid rgba(255,184,77,0.3); }
.pt-cons-sell { background: rgba(255,61,90,0.15);  color: var(--red);   border: 1px solid rgba(255,61,90,0.3); }

.pt-target-row { margin-top: 4px; }
.pt-target-val { font-size: 13px; color: var(--text); line-height: 1.5; }

/* Patterns */
.pt-card-patterns .pt-card-body { gap: 12px; }
.pt-bias-center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.bias-badge-lg { font-size: 16px !important; padding: 10px 28px !important; letter-spacing: 1.5px !important; }
.pt-bias-sub { font-size: 11px; color: var(--dim); text-align: center; line-height: 1.4; }
.pt-pattern-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pt-chip {
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
}
.pt-chip-bull    { background: rgba(0,255,136,0.1);  color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.pt-chip-bear    { background: rgba(255,61,90,0.1);   color: var(--red);   border: 1px solid rgba(255,61,90,0.2); }
.pt-chip-neutral { background: rgba(107,122,141,0.1); color: var(--dim);   border: 1px solid var(--border); }

/* Shared card details */
.pt-card-detail { font-size: 12px; color: var(--dim); line-height: 1.5; }
.pt-detail-bull { color: var(--green); }
.pt-detail-bear { color: var(--red); }
.pt-detail-dim  { color: var(--dim); }
.pt-card-divider { height: 1px; background: var(--border); margin: 8px 0; }
.pt-next-earn-row { display: flex; justify-content: space-between; align-items: center; }
.pt-next-earn-date { font-size: 12px; color: var(--text); font-weight: 600; }

/* ── Analysis tab system ────────────────────────────────────────────────── */
.pt-analysis-section { padding-top: 0; }

.pt-tab-bar {
  display: flex; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.pt-tab-bar::-webkit-scrollbar { display: none; }
.pt-tab {
  display: flex; align-items: center; gap: 8px; padding: 14px 22px;
  border: none; background: none; color: var(--dim);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.pt-tab:hover { color: var(--text); }
.pt-tab.active { color: var(--green); border-bottom-color: var(--green); }
.pt-tab-num {
  width: 22px; height: 22px; border-radius: 6px; font-size: 11px;
  background: rgba(107,122,141,0.15);
  display: flex; align-items: center; justify-content: center;
}
.pt-tab.active .pt-tab-num { background: rgba(0,255,136,0.15); color: var(--green); }

.pt-panel { display: none; padding: 24px 0; }
.pt-panel.active { display: block; }

/* Layout grids */
.pt-tech-layout     { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: 16px; }
.pt-earn-layout     { display: grid; grid-template-columns: 180px 1fr 200px; gap: 16px; }
.pt-outlook-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-fund-layout     { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 16px; }
.pt-analyst-layout  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-patterns-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }

@media (max-width: 1100px) {
  .pt-tech-layout     { grid-template-columns: 1fr 1fr; }
  .pt-earn-layout     { grid-template-columns: 1fr 1fr; }
  .pt-fund-layout     { grid-template-columns: 1fr 1fr; }
  .pt-analyst-layout  { grid-template-columns: 1fr 1fr; }
  .pt-patterns-layout { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pt-tech-layout, .pt-earn-layout, .pt-fund-layout,
  .pt-analyst-layout, .pt-patterns-layout,
  .pt-outlook-layout { grid-template-columns: 1fr; }
}

/* ── Key Statistics (Yahoo Finance style) ───────────────────────────────── */
.pt-ks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 32px;
}
.pt-ks-col { min-width: 0; }
.pt-ks-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: var(--accent);
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.pt-ks-subsection-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--dim);
  padding: 12px 0 4px;
}
.pt-ks-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.pt-ks-table tr { border-bottom: 1px solid rgba(255,255,255,0.04); }
.pt-ks-table tr:last-child { border-bottom: none; }
.pt-ks-table tr:hover { background: rgba(255,255,255,0.03); }
.pt-ks-label {
  color: var(--dim); padding: 5px 8px 5px 0; font-size: 12.5px;
  white-space: nowrap;
}
.pt-ks-val {
  color: var(--text); padding: 5px 0 5px 8px; font-size: 13px;
  font-weight: 600; text-align: right; font-variant-numeric: tabular-nums;
}
.pt-ks-val-pos { color: var(--green); }
.pt-ks-val-neg { color: var(--red); }
.pt-ks-annotation {
  font-size: 9.5px; font-weight: 400; color: var(--dim);
  margin-left: 4px; font-variant-numeric: normal;
}
@media (max-width: 1100px) {
  .pt-ks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pt-ks-grid { grid-template-columns: 1fr; }
}

/* ── Fundamentals Visual Layout ─────────────────────────────────────────── */

/* KPI snapshot strip */
.pt-fund-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.pt-fund-kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 12px 12px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pt-fkpi-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--dim);
}
.pt-fkpi-val {
  font-size: 20px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pt-fkpi-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; letter-spacing: 0.5px; margin-top: 2px;
}
.pt-fkpi-green  { background: rgba(0,255,136,0.12); color: var(--green); }
.pt-fkpi-amber  { background: rgba(255,177,0,0.12); color: #ffb100; }
.pt-fkpi-red    { background: rgba(255,61,90,0.12); color: var(--red); }
.pt-fkpi-dim    { background: rgba(107,122,141,0.12); color: var(--dim); }

/* Visual analysis row */
.pt-fund-visual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.pt-fund-vis-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}
.pt-fund-vis-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--dim); margin-bottom: 16px;
}
/* Metric bars (used in both margin + growth cards) */
.pt-fbar-row { margin-bottom: 13px; }
.pt-fbar-row:last-child { margin-bottom: 0; }
.pt-fbar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px;
}
.pt-fbar-name { font-size: 12px; color: var(--dim); }
.pt-fbar-num  { font-size: 13px; font-weight: 700; }
.pt-fbar-track {
  height: 8px; background: rgba(255,255,255,0.06);
  border-radius: 4px; overflow: hidden;
}
.pt-fbar-fill {
  height: 100%; border-radius: 4px;
  transition: width 1.1s cubic-bezier(.25,.8,.25,1);
}
.pt-fbar-green { color: var(--green); }
.pt-fbar-fill-green { background: linear-gradient(90deg, var(--green), #00CED1); }
.pt-fbar-blue  { color: #4D9FFF; }
.pt-fbar-fill-blue  { background: linear-gradient(90deg, #4D9FFF, #B57BFF); }
.pt-fbar-teal  { color: #00CED1; }
.pt-fbar-fill-teal  { background: linear-gradient(90deg, #00CED1, #4D9FFF); }
.pt-fbar-amber { color: #ffb100; }
.pt-fbar-fill-amber { background: linear-gradient(90deg, #ffb100, #ff8c00); }
.pt-fbar-red   { color: var(--red); }
.pt-fbar-fill-red   { background: linear-gradient(90deg, var(--red), #c0392b); }

/* Reference tables (compact, bottom of panel) */
.pt-ks-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

@media (max-width: 1100px) {
  .pt-fund-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .pt-fund-visual-row { grid-template-columns: 1fr; }
  .pt-ks-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pt-fund-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .pt-ks-grid-compact { grid-template-columns: 1fr; }
}

/* Panel card base */
.pt-panel-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  transition: border-color 0.2s;
}
.pt-panel-card:hover { border-color: rgba(0,255,136,0.2); }
.pt-pc-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--dim); margin-bottom: 14px;
}
.pt-pc-label-bull { color: rgba(0,255,136,0.7); }
.pt-pc-label-bear { color: rgba(255,61,90,0.7); }

/* ── Technical ──────────────────────────────────────────────────────────── */
.pt-rsi-gauge-wrap { display: flex; justify-content: center; }
.pt-rsi-arc { width: 160px; height: 110px; color: var(--text); }
.pt-rsi-zones { display: flex; justify-content: space-between; margin-top: 8px; }
.pt-rz { font-size: 9px; font-weight: 600; }
.pt-rz-os { color: var(--green); }
.pt-rz-ob { color: var(--red); }

.pt-ema-stack { display: flex; flex-direction: column; }
.pt-ema-node {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
}
.pt-ema-above   { background: rgba(0,255,136,0.08); color: var(--green); }
.pt-ema-below   { background: rgba(255,61,90,0.08);  color: var(--red); }
.pt-ema-neutral { background: rgba(107,122,141,0.08); color: var(--dim); }
.pt-ema-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.8; flex-shrink: 0; }
.pt-ema-tag { flex: 1; }
.pt-ema-arrow { font-size: 10px; }
.pt-ema-connector { width: 2px; height: 8px; margin-left: 15px; background: var(--border); }
.pt-conn-bull { background: rgba(0,255,136,0.3); }
.pt-conn-bear { background: rgba(255,61,90,0.3); }
.pt-ema-verdict { font-size: 11px; margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-sm); line-height: 1.4; }
.pt-ema-verdict-bull { background: rgba(0,255,136,0.06); color: var(--green); border: 1px solid rgba(0,255,136,0.15); }
.pt-ema-verdict-bear { background: rgba(255,61,90,0.06); color: var(--red); border: 1px solid rgba(255,61,90,0.15); }

.pt-52w-visual { margin-top: 4px; }
.pt-52w-gradient-track {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #FF3D5A 0%, #6B7A8D 50%, #00FF88 100%);
}
.pt-rsi-track {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, #00C896 0%, #6B7A8D 50%, #F04060 100%);
}
.pt-rsi-zone-mark {
  position: absolute; top: -3px; width: 2px; height: 14px;
  background: var(--bg); border-radius: 1px; transform: translateX(-50%);
}
.pt-52w-pip {
  position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: white; border: 3px solid var(--panel);
  box-shadow: 0 0 0 2px var(--green); transform: translateX(-50%);
  transition: left 0.6s cubic-bezier(.25,.8,.25,1);
}
.pt-52w-ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; }
.pt-52w-low  { color: var(--red); font-weight: 600; }
.pt-52w-cur  { color: var(--text); font-weight: 700; text-align: center; }
.pt-52w-high { color: var(--green); font-weight: 600; }
.pt-52w-pct-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.pt-52w-pct { font-size: 14px; font-weight: 700; color: var(--text); }

.pt-kv-list { display: flex; flex-direction: column; gap: 10px; }
.pt-kv { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.pt-kv:last-child { border-bottom: none; padding-bottom: 0; }
.pt-kv-val { color: var(--text); font-weight: 600; }
.pt-val-green { color: var(--green) !important; }
.pt-val-red   { color: var(--red)   !important; }

/* ── Earnings ───────────────────────────────────────────────────────────── */
.pt-beat-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pt-ring-wrap { margin: 4px 0; }
.pt-ring-svg  { width: 130px; height: 130px; display: block; }
.pt-next-earn { width: 100%; margin-top: 12px; padding: 10px 12px; background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.15); border-radius: var(--radius-sm); }
.pt-ne-label  { display: block; font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.pt-ne-val    { font-size: 13px; font-weight: 700; color: var(--green); }

.pt-eps-history-card { display: flex; flex-direction: column; }
.pt-eps-full { grid-column: 1 / -1; }
.pt-eps-chart-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.pt-eps-legend { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--dim); flex-wrap: wrap; }
.pt-leg-est   { display: inline-block; width: 10px; height: 10px; background: rgba(107,122,141,0.5); border-radius: 2px; }
.pt-leg-beat  { display: inline-block; width: 10px; height: 10px; background: var(--green); border-radius: 2px; }
.pt-leg-miss  { display: inline-block; width: 10px; height: 10px; background: var(--red); border-radius: 2px; }
.pt-leg-fwd   { display: inline-block; width: 10px; height: 10px; background: rgba(129,140,248,0.22); border: 1px dashed rgba(129,140,248,0.55); border-radius: 2px; }
.pt-leg-rev   { display: inline-block; width: 10px; height: 10px; background: rgba(0,200,150,0.75); border-radius: 2px; }
.pt-eps-chart-area { flex: 1; min-height: 280px; }

/* ── Earnings reaction legend ─────────────────────────────────────────────── */
.pt-react-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.pt-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.pt-earn-highlights-card {}
.pt-highlight-list { display: flex; flex-direction: column; gap: 12px; }
.pt-hl-item { display: flex; align-items: flex-start; gap: 12px; }
.pt-hl-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.pt-hl-green { background: rgba(0,255,136,0.12); color: var(--green); }
.pt-hl-blue  { background: rgba(77,159,255,0.12); color: var(--blue); }
.pt-hl-amber { background: rgba(255,184,77,0.12); color: var(--amber); }
.pt-hl-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
.pt-hl-val   { font-size: 12px; color: var(--text); margin-top: 2px; line-height: 1.4; }

/* ── Fundamentals ───────────────────────────────────────────────────────── */
.pt-val-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pt-vt { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: center; transition: border-color 0.2s; }
.pt-vt:hover { border-color: rgba(77,159,255,0.3); }
.pt-vt-num   { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.pt-vt-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; }
.pt-vt-ctx   { font-size: 10px; font-weight: 700; margin-top: 4px; }
.pt-vt-expensive .pt-vt-ctx { color: var(--red); }
.pt-vt-cheap     .pt-vt-ctx { color: var(--green); }
.pt-vt-fair      .pt-vt-ctx { color: var(--amber); }
.pt-vt-expensive .pt-vt-num { color: var(--red); }
.pt-vt-cheap     .pt-vt-num { color: var(--green); }
.pt-vs-sp { font-size: 12px; color: var(--dim); padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }

.pt-margin-bars { display: flex; flex-direction: column; gap: 18px; }
.pt-mbar-row {}
.pt-mbar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pt-mbar-label { font-size: 12px; color: var(--dim); }
.pt-mbar-num   { font-size: 13px; font-weight: 700; }
.pt-mbar-green { color: var(--green); }
.pt-mbar-blue  { color: var(--blue); }
.pt-mbar-teal  { color: var(--teal); }
.pt-mbar-track { height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.pt-mbar-fill  { height: 100%; border-radius: 5px; transition: width 1s cubic-bezier(.25,.8,.25,1); }
.pt-mbar-green-fill { background: linear-gradient(90deg, var(--green), #00CED1); }
.pt-mbar-blue-fill  { background: linear-gradient(90deg, #4D9FFF, #B57BFF); }
.pt-mbar-teal-fill  { background: linear-gradient(90deg, #00CED1, #4D9FFF); }

.pt-score-list { display: flex; flex-direction: column; gap: 12px; }
.pt-score-row  { display: flex; align-items: center; gap: 10px; }
.pt-score-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pt-sd-green { background: var(--green); }
.pt-sd-amber { background: var(--amber); }
.pt-sd-red   { background: var(--red); }
.pt-score-label   { flex: 1; font-size: 12px; color: var(--dim); }
.pt-score-verdict { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.pt-sv-green { background: rgba(0,255,136,0.12); color: var(--green); }
.pt-sv-amber { background: rgba(255,184,77,0.12); color: var(--amber); }
.pt-sv-red   { background: rgba(255,61,90,0.12);  color: var(--red); }

/* ── Analyst ────────────────────────────────────────────────────────────── */
.pt-cons-hero { padding: 20px; border-radius: var(--radius); text-align: center; margin: 8px 0 14px; }
.pt-cons-bull { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.2); box-shadow: 0 0 40px rgba(0,255,136,0.05); }
.pt-cons-hold { background: rgba(255,184,77,0.08); border: 1px solid rgba(255,184,77,0.2); box-shadow: 0 0 40px rgba(255,184,77,0.05); }
.pt-cons-bear { background: rgba(255,61,90,0.08);  border: 1px solid rgba(255,61,90,0.2);  box-shadow: 0 0 40px rgba(255,61,90,0.05); }
.pt-ch-word { font-size: 24px; font-weight: 900; letter-spacing: 3px; }
.pt-cons-bull .pt-ch-word { color: var(--green); }
.pt-cons-hold .pt-ch-word { color: var(--amber); }
.pt-cons-bear .pt-ch-word { color: var(--red); }
.pt-rating-bar { display: flex; height: 26px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; }
.pt-rb-buy  { background: rgba(0,255,136,0.35); color: var(--green); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pt-rb-hold { background: rgba(255,184,77,0.3);  color: var(--amber); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pt-rb-sell { background: rgba(255,61,90,0.3);   color: var(--red);   font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pt-rb-labels { display: flex; justify-content: space-between; font-size: 10px; padding: 4px 2px 0; }
.pt-rbl-buy  { color: var(--green);  font-weight: 600; }
.pt-rbl-hold { color: var(--amber);  font-weight: 600; }
.pt-rbl-sell { color: var(--red);    font-weight: 600; }
.pt-inst-strip { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.pt-inst-val { font-size: 12px; color: var(--text); }

.pt-target-hero { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.pt-upside-row  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pt-upside-val  { font-size: 18px; font-weight: 800; }
.pt-target-track-wrap { margin: 12px 0; }
.pt-target-track {
  position: relative; height: 4px;
  background: linear-gradient(to right, var(--dim), var(--green));
  border-radius: 2px; margin: 16px 0;
}
.pt-target-current-marker, .pt-target-goal-marker {
  position: absolute; top: -8px; transform: translateX(-50%);
  width: 4px; height: 20px; border-radius: 2px; transition: left 0.5s;
}
.pt-target-current-marker { background: var(--text); }
.pt-target-goal-marker    { background: var(--green); }
.pt-tcm-label, .pt-tgm-label {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  font-size: 9px; white-space: nowrap; color: var(--dim);
}
.pt-cons-detail { font-size: 11px; color: var(--dim); margin-top: 12px; line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--border); }

.pt-ownership-rings { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.pt-own-ring-wrap { text-align: center; }

/* ── Patterns ───────────────────────────────────────────────────────────── */
.pt-bias-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px 16px; border-radius: var(--radius); gap: 8px; margin: 8px 0;
}
.pt-bh-bull { background: rgba(0,255,136,0.07); border: 1px solid rgba(0,255,136,0.2); box-shadow: 0 0 50px rgba(0,255,136,0.07); }
.pt-bh-bear { background: rgba(255,61,90,0.07);  border: 1px solid rgba(255,61,90,0.2);  box-shadow: 0 0 50px rgba(255,61,90,0.07); }
.pt-bh-neutral { background: rgba(107,122,141,0.07); border: 1px solid var(--border); }
.pt-bh-icon { font-size: 28px; line-height: 1; }
.pt-bh-bull .pt-bh-icon, .pt-bh-bull .pt-bh-word { color: var(--green); }
.pt-bh-bear .pt-bh-icon, .pt-bh-bear .pt-bh-word { color: var(--red); }
.pt-bh-neutral .pt-bh-icon, .pt-bh-neutral .pt-bh-word { color: var(--dim); }
.pt-bh-word { font-size: 22px; font-weight: 900; letter-spacing: 3px; }
.pt-bh-sub  { font-size: 11px; color: var(--dim); max-width: 160px; line-height: 1.4; }

.pt-sig-counts { display: flex; gap: 8px; margin-top: 12px; width: 100%; }
.pt-sig-count  { flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--radius-sm); }
.pt-sig-bull   { background: rgba(0,255,136,0.08); border: 1px solid rgba(0,255,136,0.15); }
.pt-sig-bear   { background: rgba(255,61,90,0.08);  border: 1px solid rgba(255,61,90,0.15); }
.pt-sig-neutral{ background: rgba(107,122,141,0.08); border: 1px solid var(--border); }
.pt-sig-n   { display: block; font-size: 22px; font-weight: 800; line-height: 1; }
.pt-sig-bull .pt-sig-n   { color: var(--green); }
.pt-sig-bear .pt-sig-n   { color: var(--red); }
.pt-sig-neutral .pt-sig-n{ color: var(--dim); }
.pt-sig-lbl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dim); margin-top: 3px; }

.pt-chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pt-achip { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; transition: transform 0.15s; cursor: default; }
.pt-achip:hover { transform: translateY(-1px); }
.pt-achip-bull    { background: rgba(0,255,136,0.1);  color: var(--green); border: 1px solid rgba(0,255,136,0.25); }
.pt-achip-bear    { background: rgba(255,61,90,0.1);   color: var(--red);   border: 1px solid rgba(255,61,90,0.25); }
.pt-achip-neutral { background: rgba(107,122,141,0.08);color: var(--dim);   border: 1px solid var(--border); }

.pt-strength-bars { display: flex; flex-direction: column; gap: 12px; }
.pt-sb-row  { display: grid; grid-template-columns: 60px 1fr 36px; gap: 8px; align-items: center; }
.pt-sb-label { font-size: 11px; font-weight: 600; }
.pt-sb-bull  { color: var(--green); }
.pt-sb-bear  { color: var(--red); }
.pt-sb-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.pt-sb-fill  { height: 100%; border-radius: 4px; transition: width 1s; }
.pt-sb-fill-bull { background: linear-gradient(90deg, var(--green), #00CED1); }
.pt-sb-fill-bear { background: linear-gradient(90deg, var(--red), #FF8C00); }
.pt-sb-pct   { font-size: 11px; font-weight: 700; text-align: right; color: var(--text); }
.pt-total-signals { font-size: 11px; color: var(--dim); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.pt-top-signal { font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); margin-top: 6px; }
.pt-ts-bull { background: rgba(0,255,136,0.06); color: var(--green); border-left: 3px solid var(--green); }
.pt-ts-bear { background: rgba(255,61,90,0.06);  color: var(--red);   border-left: 3px solid var(--red); }

/* ── Pattern overlay panel ──────────────────────────────────────────────── */
.pt-pattern-panel {
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: opacity 0.2s;
}
.pt-pp-hidden { display: none; }

.pt-pp-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
  flex-wrap: wrap; gap: 6px;
}
.pt-pp-left  { display: flex; align-items: center; gap: 8px; }
.pt-pp-mid   { display: flex; gap: 3px; }
.pt-pp-right { display: flex; gap: 4px; }

.pt-pp-glyph   { color: var(--green); font-size: 13px; line-height: 1; }
.pt-pp-heading {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--dim);
}
.pt-pp-count {
  font-size: 10px; font-weight: 700; color: var(--dim);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 20px; min-width: 40px; text-align: center;
  transition: all 0.2s;
}
.pt-pp-count.has-active {
  color: var(--green);
  background: rgba(0,255,136,0.07);
  border-color: rgba(0,255,136,0.25);
}

.pt-ppf {
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  background: transparent; border: 1px solid var(--border); color: var(--dim);
  padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.pt-ppf:hover { color: var(--text); border-color: rgba(255,255,255,0.15); }
.pt-ppf.active {
  background: rgba(255,255,255,0.05); color: var(--text);
  border-color: rgba(255,255,255,0.15);
}
.pt-ppf-bull.active { background: rgba(0,255,136,0.07); color: var(--green); border-color: rgba(0,255,136,0.2); }
.pt-ppf-bear.active { background: rgba(255,61,90,0.07);  color: var(--red);   border-color: rgba(255,61,90,0.2); }

.pt-pp-all-btn {
  font-family: inherit; font-size: 10px; color: var(--dim);
  background: transparent; border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.pt-pp-all-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.15); }

.pt-pp-scroll {
  padding: 10px 14px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.pt-pp-scroll::-webkit-scrollbar { height: 3px; }
.pt-pp-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.pt-pp-chips { display: flex; gap: 7px; min-width: max-content; align-items: center; }
.pt-pp-empty   { font-size: 12px; color: var(--dim); padding: 4px 0; }
.pt-pp-loading { font-size: 11px; color: var(--dim); padding: 4px 0; animation: pulse-bar 1.5s ease-in-out infinite; }

.pt-pp-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all 0.18s ease; user-select: none;
  font-family: inherit; flex-shrink: 0;
}
.pt-pp-chip:hover { transform: translateY(-2px); }
.pt-pp-chip:active { transform: translateY(0); }

/* Active state — per bias */
.pt-pp-chip.pp-bull.is-on {
  border-color: rgba(0,255,136,0.4);
  background: rgba(0,255,136,0.05);
  box-shadow: 0 2px 14px rgba(0,255,136,0.1), inset 0 0 0 1px rgba(0,255,136,0.08);
}
.pt-pp-chip.pp-bear.is-on {
  border-color: rgba(255,61,90,0.4);
  background: rgba(255,61,90,0.05);
  box-shadow: 0 2px 14px rgba(255,61,90,0.1), inset 0 0 0 1px rgba(255,61,90,0.08);
}
.pt-pp-chip.pp-other.is-on {
  border-color: rgba(255,184,77,0.4);
  background: rgba(255,184,77,0.04);
  box-shadow: 0 2px 14px rgba(255,184,77,0.07);
}

/* Inactive */
.pt-pp-chip.is-off { opacity: 0.32; }
.pt-pp-chip.is-off:hover { opacity: 0.65; }

/* Number badge */
.pt-pp-num {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1;
}
.pt-pp-chip.pp-bull  .pt-pp-num { background: rgba(0,255,136,0.15); color: var(--green); }
.pt-pp-chip.pp-bear  .pt-pp-num { background: rgba(255,61,90,0.15);  color: var(--red); }
.pt-pp-chip.pp-other .pt-pp-num { background: rgba(255,184,77,0.15); color: var(--amber); }

/* Label + date */
.pt-pp-body { display: flex; flex-direction: column; gap: 2px; }
.pt-pp-name { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pt-pp-date { font-size: 9px; white-space: nowrap; }
.pt-pp-chip.pp-bull  .pt-pp-date { color: rgba(0,255,136,0.6); }
.pt-pp-chip.pp-bear  .pt-pp-date { color: rgba(255,61,90,0.6); }
.pt-pp-chip.pp-other .pt-pp-date { color: var(--dim); }

@media (max-width: 640px) {
  .pt-pp-bar { gap: 8px; }
  .pt-pp-mid  { order: 3; width: 100%; }
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] body { background: var(--bg); color: var(--text); }

[data-theme="light"] .alert code { background: rgba(0,0,0,0.06); }

[data-theme="light"] .pt-ac-header,
[data-theme="light"] .pt-card-hdr { background: rgba(0,0,0,0.03); }

[data-theme="light"] .pt-ind-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #1a2233; }
[data-theme="light"] .pt-ind-chip:hover { background: rgba(0,0,0,0.07); }
[data-theme="light"] .pt-ind-add-btn { background: rgba(0,200,100,0.08); }
[data-theme="light"] .pt-ind-modal-box { background: #f8f9fb; }
[data-theme="light"] .pt-ind-search { background: rgba(0,0,0,0.04); color: #1a2233; }
[data-theme="light"] .pt-ind-pick-btn { background: rgba(0,0,0,0.03); color: #5a6a7a; }
[data-theme="light"] .pt-ind-pick-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .pt-ind-footer-btn { background: rgba(0,0,0,0.04); }

[data-theme="light"] .pt-pp-count { background: rgba(0,0,0,0.05); }

[data-theme="light"] .pt-pp-chip { background: rgba(0,0,0,0.03); }

[data-theme="light"] .report-card,
[data-theme="light"] .chart-card,
[data-theme="light"] .compose-card,
[data-theme="light"] .login-card { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-primary:hover { filter: brightness(0.9); }

[data-theme="light"] .login-field input:focus { border-color: var(--green); }

/* ── Hero company name ─────────────────────────────────────────────────────── */
.pt-hero-company {
  font-size: 13px;
  color: var(--dim);
  margin-top: 2px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ── Momentum Dashboard ────────────────────────────────────────────────────── */
.pt-momentum-card { grid-column: span 2; }
.pt-momentum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.pt-mom-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0.5;
}
.pt-mom-item {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.pt-mom-label {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pt-mom-val {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pt-mom-pos { color: var(--green); }
.pt-mom-neg { color: var(--red); }

/* ── Trend Strength card ──────────────────────────────────────────────────── */
.pt-trend-card { grid-column: span 2; }
.pt-ts-score-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; margin-top: 4px;
}
.pt-ts-score-bar-wrap {
  flex: 1;
  height: 12px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.pt-ts-score-bar {
  height: 100%;
  background: linear-gradient(90deg, #FF3D5A 0%, #FFB84D 40%, #00FF88 100%);
  border-radius: 6px;
  transition: width 0.6s ease;
}
.pt-ts-score-num {
  font-size: 20px;
  font-weight: 800;
  min-width: 36px;
  text-align: right;
}
.pt-ts-rating {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.pt-ts-bull    { color: var(--green); }
.pt-ts-bear    { color: var(--red); }
.pt-ts-neutral { color: var(--amber); }
.pt-ts-signals { display: flex; flex-direction: column; gap: 4px; }
.pt-ts-sig {
  font-size: 11px;
  color: var(--dim);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--panel2);
}
.pt-ts-sig-bull { border-left: 3px solid var(--green); }
.pt-ts-sig-bear { border-left: 3px solid var(--red); }

/* ── Analyst tab — real counts bar ───────────────────────────────────────── */
.pt-an-total {
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  margin-top: 4px;
}

/* ── Target range chart ───────────────────────────────────────────────────── */
.pt-target-hero-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-upside-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.pt-upside-pos { background: rgba(0,255,136,0.15); color: var(--green); }
.pt-upside-neg { background: rgba(255,61,90,0.15);  color: var(--red); }

.pt-trange-wrap { margin-top: 12px; }
.pt-trange-track {
  position: relative;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  margin-bottom: 6px;
}
.pt-trange-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,61,90,0.3) 0%, rgba(255,184,77,0.3) 50%, rgba(0,255,136,0.3) 100%);
  border-radius: 5px;
}
.pt-trange-mean {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  background: var(--green);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px var(--green);
}
.pt-trange-current {
  position: absolute;
  top: -2px;
  width: 14px;
  height: 14px;
  background: var(--blue);
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--panel);
  box-shadow: 0 0 6px var(--blue);
}
.pt-trange-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--dim);
  margin-bottom: 6px;
}
.pt-trange-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--dim);
  flex-wrap: wrap;
}
.pt-trl-dot {
  width: 8px; height: 8px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.pt-trl-dot-mean { background: var(--green); width: 3px; height: 12px; border-radius: 1px; }
.pt-trl-dot-cur  { background: var(--blue); border-radius: 50%; }

/* ── Forward Estimates card ───────────────────────────────────────────────── */
.pt-fwd-est-card { grid-column: 1 / -1; }
.pt-fwd-tabs {
  display: flex; gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.pt-fwd-tab {
  background: none;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.pt-fwd-tab:hover { background: var(--panel2); color: var(--text); }
.pt-fwd-tab.active { background: var(--border); color: var(--text); }
.pt-fwd-panel { display: none; }
.pt-fwd-panel.active { display: block; }
.pt-fwd-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 100px;
  padding: 0 4px;
  margin-bottom: 6px;
}
.pt-fwd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.pt-fwd-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  height: 80px;
  width: 100%;
}
.pt-fwd-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.pt-fwd-bar {
  width: 70%;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(77,159,255,0.5) 100%);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.4s ease;
}
.pt-fwd-bar-rev {
  background: linear-gradient(180deg, var(--purple) 0%, rgba(181,123,255,0.5) 100%);
}
.pt-fwd-period {
  font-size: 10px;
  color: var(--dim);
  text-align: center;
}
.pt-fwd-note {
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  margin-top: 4px;
}
.pt-fwd-empty {
  font-size: 12px;
  color: var(--dim);
  text-align: center;
  padding: 20px;
}

/* ── Ownership bar chart ──────────────────────────────────────────────────── */
.pt-ownership-card { grid-column: 1 / -1; }
.pt-own-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pt-own-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-own-label {
  font-size: 11px;
  color: var(--dim);
  width: 110px;
  flex-shrink: 0;
}
.pt-own-track {
  flex: 1;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.pt-own-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.pt-own-inst   { background: var(--blue); }
.pt-own-retail { background: var(--purple); }
.pt-own-pct {
  font-size: 12px;
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}
.pt-own-note {
  font-size: 10px;
  color: var(--dim);
  margin-top: 6px;
}

/* ── Pattern tab link card ────────────────────────────────────────────────── */
.pt-pat-link-card { grid-column: 1 / -1; }
.pt-pat-link-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 12px;
  gap: 8px;
}
.pt-pat-link-icon {
  font-size: 32px;
  opacity: 0.5;
}
.pt-pat-link-desc {
  font-size: 12px;
  color: var(--dim);
  max-width: 360px;
  line-height: 1.5;
}
.pt-pat-scroll-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.pt-pat-scroll-btn:hover { background: var(--border); }
.pt-pat-quick-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-pql-item {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--panel2);
}
.pt-pql-bull { border-left: 3px solid var(--green); color: var(--green); }
.pt-pql-bear { border-left: 3px solid var(--red);   color: var(--red); }
.pt-pql-neutral { border-left: 3px solid var(--dim); color: var(--dim); }

/* ── Responsive adjustments for new cards ────────────────────────────────── */
@media (max-width: 700px) {
  .pt-momentum-card, .pt-trend-card { grid-column: span 1; }
  .pt-fwd-est-card, .pt-ownership-card, .pt-pat-link-card { grid-column: 1 / -1; }
}

/* ── Earnings reaction table ──────────────────────────────────────────────── */
.pt-react-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 12px;
}
.pt-react-row {
  display: grid;
  grid-template-columns: 56px 52px 1fr 72px 72px 80px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.pt-react-hdr {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pt-react-row:not(.pt-react-hdr):nth-child(even) { background: var(--panel2); }
.pt-react-date { color: var(--dim); font-size: 11px; }

@media (max-width: 640px) {
  .pt-react-row { grid-template-columns: 50px 44px 1fr 60px 60px 68px; gap: 4px; font-size: 11px; }
}

/* ── EPS chart section labels ─────────────────────────────────────────────── */
.pt-eps-sec-row {
  display: flex;
  padding-left: 38px;   /* match SVG pL */
  padding-right: 12px;  /* match SVG pR */
  margin-bottom: 2px;
}
.pt-esl-hist {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--dim);
  text-align: center;
}
.pt-esl-fwd {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(77,159,255,0.8);
  text-align: center;
}

/* Hide Lightweight Charts attribution logo (Apache 2.0 — no UI attribution required) */
#priceChart a[href*="tradingview"],
#rsiChart   a[href*="tradingview"] { display: none !important; }

/* ── Super Investor Overview Page ────────────────────────────────────────────── */
.si-hero {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px 40px;
  text-align: center;
}
.si-hero-inner { max-width: 720px; margin: 0 auto; }
.si-hero-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--amber); background: rgba(255,184,77,0.1); border: 1px solid rgba(255,184,77,0.25);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 16px;
}
.si-hero-title {
  font-size: clamp(28px, 5vw, 44px); font-weight: 900; color: var(--text-bright);
  margin: 0 0 12px; letter-spacing: -1px;
}
.si-hero-sub { font-size: 15px; color: var(--dim); line-height: 1.6; margin: 0 0 24px; }
.si-refresh-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.si-refresh-btn {
  font-size: 13px; font-weight: 700; padding: 9px 20px;
  background: transparent; border: 1px solid var(--green);
  border-radius: var(--radius); color: var(--green); cursor: pointer;
  transition: all 0.15s;
}
.si-refresh-btn:hover:not(:disabled) { background: var(--green); color: #000; }
.si-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.si-refresh-note { font-size: 12px; color: var(--dim); }
.si-refreshing-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; background: rgba(255,184,77,0.12);
  border: 1px solid rgba(255,184,77,0.3); color: var(--amber);
  animation: si-pulse 1.5s ease-in-out infinite;
}
.si-done-pill { background: rgba(0,255,136,0.1); border-color: rgba(0,255,136,0.3); color: var(--green); animation: none; }
.si-paused-pill { background: rgba(61,143,239,0.1); border-color: rgba(61,143,239,0.3); color: var(--blue); animation: none; }
.si-pause-btn {
  font-size: 12px; font-weight: 600; padding: 6px 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--dim); cursor: pointer;
  transition: all 0.15s;
}
.si-pause-btn:hover { border-color: var(--amber); color: var(--amber); }
.si-pause-btn-paused { border-color: var(--amber); color: var(--amber); }
@keyframes si-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.si-grid-wrap { max-width: 1200px; margin: 32px auto; padding: 0 20px 60px; }
.si-investor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.si-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.si-card:hover { border-color: var(--text); transform: translateY(-2px); }

.si-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.si-avatar {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.si-avatar-text { font-size: 15px; font-weight: 800; letter-spacing: -0.5px; }
.si-card-info { flex: 1; min-width: 0; }
.si-card-name { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.si-card-firm { font-size: 11px; color: var(--dim); margin-top: 2px; }
.si-card-badge { font-size: 11px; font-weight: 700; white-space: nowrap; }
.si-no-data { color: var(--dim); }
.si-card-style {
  font-size: 11px; font-weight: 600; color: var(--amber);
  background: rgba(255,184,77,0.08); border-radius: var(--radius-sm);
  padding: 3px 8px; display: inline-block; margin-bottom: 12px;
}
.si-card-period { font-size: 10px; color: var(--dim); margin-bottom: 8px; }

.si-top-holdings { display: flex; flex-direction: column; gap: 5px; }
.si-holding-row { display: flex; align-items: center; gap: 8px; }
.si-h-ticker { font-size: 11px; font-weight: 700; color: var(--text); width: 50px; flex-shrink: 0; }
.si-h-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.si-h-bar { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.si-h-pct { font-size: 10px; color: var(--dim); width: 36px; text-align: right; flex-shrink: 0; }
.si-more-hint { font-size: 10px; color: var(--dim); padding-top: 4px; }

.si-no-cache-msg {
  font-size: 12px; color: var(--dim); line-height: 1.5;
  padding: 12px; background: var(--panel2); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.si-no-cache-msg strong { color: var(--text); }

/* Modal */
.si-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 900;
}
.si-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(860px, 95vw); max-height: 85vh;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); z-index: 901;
  overflow-y: auto; display: flex; flex-direction: column;
}
.si-modal-header {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 24px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--panel); z-index: 1;
}
.si-modal-avatar .si-avatar { width: 52px; height: 52px; }
.si-modal-title-block { flex: 1; min-width: 0; }
.si-modal-name { font-size: 20px; font-weight: 800; color: var(--text-bright); }
.si-modal-firm { font-size: 13px; color: var(--dim); margin-top: 2px; }
.si-modal-meta { font-size: 11px; color: var(--dim); margin-top: 4px; }
.si-modal-close {
  font-size: 18px; background: transparent; border: none; color: var(--dim);
  cursor: pointer; padding: 4px 8px; transition: color 0.15s;
}
.si-modal-close:hover { color: var(--text); }
.si-modal-bio {
  padding: 16px 24px; font-size: 13px; color: var(--dim); line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.si-modal-holdings { padding: 20px 24px; }
.si-modal-section-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--dim); margin-bottom: 14px; }

.si-htable { width: 100%; border-collapse: collapse; font-size: 12px; }
.si-htable th {
  text-align: left; padding: 6px 8px;
  color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.si-htable td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.si-htable tr:hover td { background: var(--panel2); }
.si-ht-rank { color: var(--dim); width: 32px; }
.si-ht-ticker { width: 80px; }
.si-ht-tick-badge { font-weight: 700; font-size: 12px; }
.si-ht-name { color: var(--dim); font-size: 11px; }
.si-ht-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.si-ht-pct { width: 120px; }
.si-ht-pct-row { display: flex; align-items: center; gap: 6px; }
.si-ht-pct-bar { height: 4px; border-radius: 2px; min-width: 2px; flex-shrink: 0; }
.si-ht-shares { color: var(--dim); }
.si-htable-empty { text-align: center; padding: 32px; color: var(--dim); font-size: 13px; }

/* ── Super Investor panel on ticker page ─────────────────────────────────────── */
.pt-si-panel { padding: 4px 0 8px; }
.pt-si-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.pt-si-desc { font-size: 13px; color: var(--dim); margin: 6px 0 0; line-height: 1.5; }
.pt-si-desc strong { color: var(--text); }
.pt-si-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pt-si-refresh-btn {
  font-size: 12px; font-weight: 700; padding: 7px 14px;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--dim); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.pt-si-refresh-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.pt-si-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pt-si-all-link {
  font-size: 12px; font-weight: 700; color: var(--blue);
  text-decoration: none; white-space: nowrap;
}
.pt-si-all-link:hover { color: var(--text); }

.pt-si-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 32px; justify-content: center; color: var(--dim); font-size: 13px;
}

.pt-si-nocache, .pt-si-none {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 40px 24px; color: var(--dim);
}
.pt-si-nocache-icon, .pt-si-none-icon { font-size: 32px; margin-bottom: 12px; }
.pt-si-nocache-title, .pt-si-none-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.pt-si-nocache-sub, .pt-si-none-sub { font-size: 13px; line-height: 1.6; max-width: 400px; }
.pt-si-nocache-sub strong { color: var(--text); }
.pt-si-period-note { font-size: 11px; color: var(--dim); margin-top: 8px; }

.pt-si-holders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.pt-si-holder-card {
  display: block; text-decoration: none;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  transition: border-color 0.2s, transform 0.15s;
}
.pt-si-holder-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); }
.pt-si-holder-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pt-si-h-avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.pt-si-h-info { flex: 1; min-width: 0; }
.pt-si-h-name { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.pt-si-h-firm { font-size: 10px; color: var(--dim); }
.pt-si-h-pct { font-size: 18px; font-weight: 900; flex-shrink: 0; }
.pt-si-h-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pt-si-h-stat { display: flex; flex-direction: column; gap: 2px; }
.pt-si-h-stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--dim); text-transform: uppercase; }
.pt-si-h-stat-val { font-size: 12px; font-weight: 600; color: var(--text); }
.pt-si-h-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.pt-si-h-bar { height: 100%; border-radius: 2px; }
.pt-si-holder-short { background: rgba(255,61,90,0.05); }
.pt-si-pos-badge {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 10px; margin-bottom: 10px;
}
.pt-si-pos-put  { background: rgba(255,61,90,0.15); color: var(--red); }
.pt-si-pos-call { background: rgba(0,255,136,0.12); color: var(--green); }

/* ── Change badges (shared: overview cards + ticker tab) ─────────────────────── */
.si-move-badge, .pt-si-change {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
  padding: 2px 6px; border-radius: 10px; flex-shrink: 0;
}
.si-move-new,    .pt-si-change-new      { background: rgba(0,255,136,0.15); color: var(--green); }
.si-move-increased, .pt-si-change-increased { background: rgba(0,255,136,0.1); color: var(--green); }
.si-move-decreased, .pt-si-change-decreased { background: rgba(255,184,77,0.12); color: var(--amber); }
.si-move-closed, .pt-si-change-closed   { background: rgba(255,61,90,0.12); color: var(--red); }

/* Last Moves strip on overview investor cards */
.si-moves-sep { height: 1px; background: var(--border); margin: 12px 0 10px; }
.si-moves-label { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; color: var(--dim); text-transform: uppercase; margin-bottom: 7px; }
.si-moves-list { display: flex; flex-direction: column; gap: 4px; }
.si-move-row { display: flex; align-items: center; gap: 7px; }
.si-move-ticker { font-size: 11px; font-weight: 700; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.si-move-pct { font-size: 10px; font-weight: 600; flex-shrink: 0; }
.si-move-up { color: var(--green); }
.si-move-dn { color: var(--amber); }
.si-move-sold { color: var(--red); }

/* Last Moves section inside the detail modal */
.si-modal-moves { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.si-moves-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.si-moves-table th {
  text-align: left; padding: 5px 8px;
  color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.si-moves-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.si-moves-table tr:hover td { background: var(--panel2); }
.si-mt-change { width: 70px; }
.si-mt-ticker { width: 80px; font-weight: 700; }
.si-mt-name { color: var(--dim); font-size: 11px; }
.si-mt-shares { color: var(--dim); font-variant-numeric: tabular-nums; }
.si-mt-pct { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Change badge on ticker-page SI holder card */
.pt-si-h-change-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.pt-si-h-change-lbl { font-size: 9px; font-weight: 600; color: var(--dim); letter-spacing: 0.4px; text-transform: uppercase; }

@media (max-width: 700px) {
  .si-investor-grid { grid-template-columns: 1fr; }
  .si-modal { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pt-si-holders { grid-template-columns: 1fr; }
  .pt-si-header { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Super Investors — List Page
   ═══════════════════════════════════════════════════════════════════════════ */

.si-lp-hero {
  background:
    radial-gradient(ellipse at 65% 0%, rgba(0,200,150,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(61,143,239,0.06) 0%, transparent 45%),
    linear-gradient(180deg, var(--panel2) 0%, var(--panel) 100%);
  border-bottom: 1px solid var(--border);
  padding: 60px 24px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.si-lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.25;
  pointer-events: none;
}
.si-lp-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
.si-lp-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: var(--amber); background: rgba(255,184,77,0.1); border: 1px solid rgba(255,184,77,0.25);
  border-radius: 20px; padding: 4px 14px; margin-bottom: 18px;
}
.si-lp-title { font-size: clamp(30px, 5vw, 48px); font-weight: 900; color: var(--text-bright); margin: 0 0 10px; letter-spacing: -1.5px; }
.si-lp-sub { font-size: 15px; color: var(--dim); line-height: 1.55; margin: 0 0 28px; }
.si-lp-admin-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.si-lp-admin-note { font-size: 12px; color: var(--dim); }

/* Stat strip in hero */
.si-lp-stat-strip {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(14,17,23,0.55);
  backdrop-filter: blur(8px);
  margin-top: 28px;
}
.si-lp-stat {
  padding: 14px 28px;
  text-align: center;
}
.si-lp-stat:not(:last-child) { border-right: 1px solid var(--border); }
.si-lp-stat-n {
  font-size: 20px; font-weight: 900; color: var(--green);
  letter-spacing: -0.5px; line-height: 1;
}
.si-lp-stat-lbl {
  font-size: 9px; font-weight: 700; color: var(--dim);
  letter-spacing: 0.6px; text-transform: uppercase; margin-top: 4px;
}

.si-lp-wrap { max-width: 1260px; margin: 32px auto 72px; padding: 0 24px; }

.si-lp-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}

/* Toggle + search fused into one bar */
.si-search-group {
  display: flex; align-items: stretch; flex: 1; max-width: 580px; min-width: 0;
}
.si-mode-toggle-attached {
  border-right: none !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  flex-shrink: 0;
}
.si-search-group .si-lp-search-wrap {
  flex: 1; min-width: 0; max-width: none;
}
.si-search-group .si-lp-search {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}
.si-search-group .si-lp-search:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,143,239,0.12);
  border-left: 1px solid var(--blue);
}

.si-lp-search-wrap {
  position: relative; flex: 1; max-width: 420px; min-width: 200px;
}
.si-lp-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--dim); pointer-events: none;
}
.si-lp-search {
  width: 100%; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 14px 9px 36px;
  font-size: 13px; color: var(--text); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.si-lp-search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,143,239,0.12); }
.si-lp-count { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* ── Mode toggle ──────────────────────────────────────────────────────────── */
.si-mode-toggle {
  display: flex; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px; gap: 2px; flex-shrink: 0;
}
.si-mode-btn {
  background: none; border: none; padding: 6px 16px;
  font-size: 12px; font-weight: 500; color: var(--dim);
  border-radius: calc(var(--radius) - 2px); cursor: pointer;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.si-mode-btn.active { background: var(--panel2); color: var(--text-bright); }
.si-mode-btn:hover:not(.active) { color: var(--text); }

/* ── Sort control ─────────────────────────────────────────────────────────── */
.si-sort-wrap {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.si-sort-label {
  font-size: 11px; color: var(--dim); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}

/* ── Ticker results banner ────────────────────────────────────────────────── */
.si-ticker-banner {
  display: flex; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px;
  margin-bottom: 16px; font-size: 13px;
}
.si-ticker-count strong { color: var(--green); }
.si-ticker-none { color: var(--dim); }
.si-ticker-loading { color: var(--dim); font-style: italic; }

/* ── Stake overlay on holder cards ───────────────────────────────────────── */
.si-card-stake {
  padding: 9px 14px; border-top: 1px solid var(--border);
  background: rgba(0,200,150,0.05);
}
.si-stake-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.si-stake-ticker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--green); background: rgba(0,200,150,0.1);
  padding: 2px 7px; border-radius: 4px;
}
.si-stake-pct { font-size: 12px; font-weight: 600; color: var(--text-bright); }
.si-stake-val { font-size: 12px; color: var(--dim); }

/* ── Card grid ─────────────────────────────────────────────────────────────── */
.si-lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.si-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.si-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.11);
}

.si-card-accent { height: 3px; width: 100%; flex-shrink: 0; }

.si-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 18px 0;
}
.si-card-avatar {
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; letter-spacing: -0.5px; flex-shrink: 0;
}
.si-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.si-card-rank { font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: 0.3px; }
.si-card-activity {
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(255,184,77,0.12); color: var(--amber);
  border: 1px solid rgba(255,184,77,0.25);
}

.si-card-identity { padding: 12px 18px 14px; }
.si-card-name {
  font-size: 15px; font-weight: 800; color: var(--text-bright);
  margin-bottom: 3px; letter-spacing: -0.2px;
}
.si-card-firm { font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.si-card-style-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(240,168,48,0.1); color: var(--amber);
  border: 1px solid rgba(240,168,48,0.22);
}

.si-card-stats {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.si-card-stat { flex: 1; padding: 10px 12px; text-align: center; }
.si-card-stat:not(:last-child) { border-right: 1px solid var(--border); }
.si-card-stat-val {
  font-size: 13px; font-weight: 800; color: var(--text-bright);
  letter-spacing: -0.3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.si-card-stat-lbl {
  font-size: 9px; font-weight: 600; color: var(--dim);
  letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px;
}

.si-card-holdings {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 12px 18px; min-height: 50px; align-content: flex-start;
}
.si-card-avatar-img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 50%; display: block;
}
.si-card-initials { color: var(--text-bright); }
.si-card-initials-hidden { display: none; }

.si-card-tick {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; border: 1px solid; white-space: nowrap;
}
.si-card-tick-more { border-color: var(--border) !important; color: var(--dim) !important; }
.si-card-nocache {
  font-size: 11px; color: var(--dim); font-style: italic;
  padding: 12px 18px; min-height: 50px; display: flex; align-items: center;
}

.si-card-moves {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 18px 12px; align-items: center;
}
.si-card-more-moves { font-size: 9px; color: var(--dim); }

.si-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid var(--border); margin-top: auto;
}
.si-card-footer-text {
  font-size: 11px; font-weight: 600; color: var(--dim); letter-spacing: 0.2px;
  transition: color 0.15s;
}
.si-card-arrow {
  font-size: 14px; color: var(--dim);
  transition: color 0.15s, transform 0.15s;
}
.si-card:hover .si-card-arrow { color: var(--text); transform: translateX(4px); }
.si-card:hover .si-card-footer-text { color: var(--text); }

.si-lp-empty { text-align: center; padding: 64px; color: var(--dim); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Super Investor — Detail Page  (.sid-*)
   ═══════════════════════════════════════════════════════════════════════════ */

.sid-hero {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px 28px;
}
.sid-hero-inner { max-width: 1100px; margin: 0 auto; }

.sid-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--dim);
  text-decoration: none; letter-spacing: 0.3px; margin-bottom: 20px;
  transition: color 0.15s;
}
.sid-back:hover { color: var(--text); }

.sid-hero-main { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 24px; }
.sid-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; letter-spacing: -1px; flex-shrink: 0;
}
.sid-avatar-img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 50%; display: block;
}
.sid-initials { color: var(--text-bright); }
.sid-initials-hidden { display: none; }
.sid-hero-text { flex: 1; min-width: 0; }
.sid-name { font-size: clamp(22px, 4vw, 36px); font-weight: 900; color: var(--text-bright); margin: 0 0 4px; letter-spacing: -0.5px; }
.sid-firm { font-size: 14px; color: var(--dim); margin-bottom: 10px; }
.sid-style-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  border: 1px solid; border-radius: 20px; padding: 3px 12px; margin-bottom: 12px;
}
.sid-bio { font-size: 13px; color: var(--dim); line-height: 1.65; margin: 0; max-width: 600px; }

.sid-stats-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 20px;
}
.sid-stat { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; }
.sid-stat:first-child { padding-left: 4px; }
.sid-stat-val { font-size: 18px; font-weight: 800; color: var(--text-bright); letter-spacing: -0.5px; }
.sid-stat-lbl { font-size: 10px; font-weight: 600; color: var(--dim); letter-spacing: 0.5px; text-transform: uppercase; }
.sid-stat-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }
.sid-filing-link { text-decoration: none; transition: opacity 0.15s; }
.sid-filing-link:hover { opacity: 0.7; text-decoration: underline; }
.sid-stat-refresh { align-self: center; }
.sid-refresh-btn { font-size: 11px; padding: 6px 14px; }

/* Tabs */
.sid-stale-banner {
  max-width: 1100px; margin: 0 auto 0; padding: 10px 24px;
  background: rgba(255,184,77,0.08); border-bottom: 1px solid rgba(255,184,77,0.2);
  color: var(--amber); font-size: 12px; display: flex; align-items: center; gap: 8px;
}
.sid-stale-icon { font-size: 14px; flex-shrink: 0; }

.sid-tabs-bar {
  border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 0; z-index: 10;
}
.sid-tabs-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; gap: 0; }
.sid-tab {
  font-size: 13px; font-weight: 600; padding: 14px 20px;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); cursor: pointer; transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sid-tab:hover { color: var(--text); }
.sid-tab-active { color: var(--text-bright); border-bottom-color: var(--blue); }
.sid-tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 9px; background: var(--border); color: var(--dim);
  padding: 0 5px; margin-left: 6px;
}
.sid-tab-n-chg { background: rgba(255,184,77,0.15); color: var(--amber); }

/* Panels */
.sid-panel { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.sid-panel-hidden { display: none; }

/* Sections */
.sid-section { margin-bottom: 36px; }
.sid-section-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sid-section-title { font-size: 14px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.sid-section-sub { font-size: 12px; color: var(--dim); }
.sid-search {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 12px; color: var(--text); outline: none;
  min-width: 200px; transition: border-color 0.15s;
}
.sid-search:focus { border-color: var(--blue); }

/* Portfolio Map */
.sid-map {
  display: flex; flex-wrap: wrap; gap: 3px;
  min-height: 180px; align-content: flex-start;
  margin-bottom: 10px;
}
.sid-map-box {
  border: 1px solid; border-radius: 5px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 8px; overflow: hidden; position: relative;
  text-decoration: none; transition: opacity 0.15s, transform 0.12s;
  cursor: default;
  min-height: 70px;
}
a.sid-map-box { cursor: pointer; }
a.sid-map-box:hover { opacity: 0.85; transform: scale(1.015); z-index: 1; }
.sid-map-lg { min-height: 130px; }
.sid-map-md { min-height: 95px; }
.sid-map-sm { min-height: 65px; }
.sid-map-dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
}
.sid-map-dot-new       { background: var(--green); box-shadow: 0 0 5px var(--green); }
.sid-map-dot-increased { background: var(--green); }
.sid-map-dot-decreased { background: var(--amber); }
.sid-map-dot-closed    { background: var(--red); }
.sid-map-ticker { font-size: 12px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
.sid-map-lg .sid-map-ticker { font-size: 16px; }
.sid-map-pct { font-size: 10px; color: var(--dim); font-weight: 600; }
.sid-map-val { font-size: 10px; color: var(--dim); margin-top: 1px; }
.sid-map-lg .sid-map-val, .sid-map-lg .sid-map-pct { font-size: 12px; }
.sid-map-other { justify-content: center; align-items: center; }
.sid-map-put { font-size: 8px; font-weight: 900; letter-spacing: 0.5px; color: var(--red); background: rgba(255,61,90,0.15); border-radius: 3px; padding: 1px 4px; display: inline-block; margin-bottom: 4px; }
.sid-map-call { font-size: 8px; font-weight: 900; letter-spacing: 0.5px; color: var(--green); background: rgba(0,200,150,0.15); border-radius: 3px; padding: 1px 4px; display: inline-block; margin-bottom: 4px; }
.sid-tr-put td { background: rgba(255,61,90,0.04); }
.sid-tr-call td { background: rgba(0,200,150,0.04); }
.sid-type-badge {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 10px;
}
.sid-type-put  { background: rgba(255,61,90,0.15); color: var(--red); }
.sid-type-call { background: rgba(0,200,150,0.15); color: var(--green); }
.sid-type-long { background: var(--panel2); color: var(--dim); }

.sid-map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.sid-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.sid-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Holdings / Changes Table */
.sid-htable-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.sid-htable { width: 100%; border-collapse: collapse; font-size: 12px; }
.sid-th {
  text-align: left; padding: 9px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--dim); border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--panel2);
  user-select: none;
}
.sid-th-rank { width: 32px; }
.sid-th-ticker { width: 75px; }
.sid-th-name { min-width: 160px; }
.sid-th-val, .sid-th-pct, .sid-th-shares, .sid-th-chg { width: 100px; }
.sid-sortable:hover { color: var(--text); }
.sid-sort-active { color: var(--blue); }
.sid-sort-active::after { content: ' ↓'; }
.sid-sort-active.sid-sort-asc::after { content: ' ↑'; }

.sid-td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sid-td-rank { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--dim); font-size: 11px; }
.sid-td-name { color: var(--dim); font-size: 11px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sid-td-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.sid-td-dim { color: var(--dim); font-weight: 400; }
.sid-htable tr:hover td, .sid-htable tr:hover .sid-td-rank { background: var(--panel2); }

.sid-ticker-link { font-weight: 700; text-decoration: none; transition: opacity 0.15s; }
.sid-ticker-link:hover { opacity: 0.75; text-decoration: underline; }
.sid-ticker-plain { font-weight: 700; color: var(--dim); }

.sid-pct-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.sid-pct-track { flex: 0 0 44px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.sid-pct-fill { height: 100%; border-radius: 2px; }
.sid-pct-bar { height: 4px; border-radius: 2px; min-width: 2px; flex-shrink: 0; }

.sid-pos { color: var(--green); }
.sid-neg { color: var(--amber); }

.sid-mrow-new td { background: rgba(0,255,136,0.03); }
.sid-mrow-increased td { background: rgba(0,255,136,0.015); }
.sid-mrow-decreased td { background: rgba(255,184,77,0.03); }
.sid-mrow-closed td { background: rgba(255,61,90,0.03); }

/* Empty states */
.sid-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 24px; }
.sid-empty-icon { font-size: 40px; margin-bottom: 16px; }
.sid-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sid-empty-sub { font-size: 13px; color: var(--dim); line-height: 1.6; max-width: 380px; }
.sid-empty-sub strong { color: var(--text); }

/* Closed position rows in holdings table */
.sid-row-closed td { background: rgba(255,61,90,0.03); }
.sid-closed-dim { color: var(--dim) !important; }
.sid-th-delta { width: 64px; text-align: right; padding-right: 12px; color: var(--dim); font-size: 11px; }
.sid-mrow-closed-row td { opacity: 0.75; }
.sid-mrow-closed-row td:first-child, .sid-mrow-closed-row td:last-child { opacity: 1; }

/* Share delta sub-label and info tooltips */
.sid-delta-sub { display: block; font-size: 10px; color: var(--dim); margin-top: 2px; }
.sid-delta-sub.sid-pos { color: var(--green); opacity: 0.7; }
.sid-delta-sub.sid-neg { color: var(--red); opacity: 0.7; }
.sid-th-tip { cursor: help; position: relative; }
.sid-tip-icon { font-size: 11px; opacity: 0.45; margin-left: 2px; }

/* ── Timeline selector ────────────────────────────────────────────────────── */
.sid-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sid-timeline::-webkit-scrollbar { display: none; }
.sid-period-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .15s;
}
.sid-period-btn:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--panel2);
}
.sid-period-active {
  border-color: var(--blue) !important;
  background: rgba(77,159,255,0.12) !important;
  color: var(--blue) !important;
}

/* Responsive */
@media (max-width: 860px) {
  .si-lp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .si-lp-grid { grid-template-columns: 1fr; }
  .si-lp-stat-strip { flex-wrap: wrap; }
  .sid-hero-main { flex-direction: column; gap: 14px; }
  .sid-stats-strip { gap: 12px; }
  .sid-stat { padding: 0 10px; }
  .sid-stat-val { font-size: 15px; }
  .sid-map-val { display: none; }
  /* font-size below 16px on a focusable input makes iOS Safari auto-zoom
     on tap. */
  .si-lp-search, .sid-search { font-size: 16px; }

  /* Treemap boxes size themselves via flex-basis as a % of container width
     (see buildMap() in superinvestors_detail.html) — the same 4%-of-container
     floor that's a reasonable ~48px on a 1200px desktop container shrinks to
     ~14px on a 375px phone, too narrow for any ticker to render without
     getting clipped mid-letter. A min-width floor forces flex-wrap to give
     small positions their own row instead of squeezing unreadably. */
  .sid-map-box { min-width: 70px; }

  /* Full Portfolio table (#sidHTable): 9 fixed-width columns forced its own
     horizontal scrollbar on every phone. Keep Ticker / Company / % Portfolio
     / Status, drop Rank / Type / Value / Δ% / Shares — all still visible via
     the ticker's own analysis page. */
  #sidHTable :is(th, td):nth-child(1),
  #sidHTable :is(th, td):nth-child(4),
  #sidHTable :is(th, td):nth-child(5),
  #sidHTable :is(th, td):nth-child(7),
  #sidHTable :is(th, td):nth-child(8) { display: none; }
  #sidHTable .sid-th-name, #sidHTable .sid-td-name { min-width: 0; max-width: 90px; }
  #sidHTable .sid-th-ticker { width: 56px; }
  #sidHTable .sid-th-pct, #sidHTable .sid-th-chg { width: 64px; }
  #sidHTable .sid-th, #sidHTable .sid-td { padding: 8px 6px; }
  #sidHTable .sid-pct-track { flex-basis: 24px; }

  /* Last Moves table (#sidMovesTableWrap): same over-wide-table problem, a
     different column layout (Action / Ticker / Company / Shares Δ / Value /
     Wt. Δ / Portfolio %) — keep Action / Ticker / Company / Portfolio %. */
  #sidMovesTableWrap :is(th, td):nth-child(4),
  #sidMovesTableWrap :is(th, td):nth-child(5),
  #sidMovesTableWrap :is(th, td):nth-child(6) { display: none; }
  #sidMovesTableWrap .sid-th-name, #sidMovesTableWrap .sid-td-name { min-width: 0; max-width: 90px; }
  #sidMovesTableWrap .sid-th-pct { width: 64px; white-space: normal; }
  #sidMovesTableWrap .sid-th, #sidMovesTableWrap .sid-td { padding: 8px 6px; }
}

/* ── Company Overview ──────────────────────────────────────────────────────── */
.pt-co-section {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
}
.pt-co-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 20px;
}
.pt-co-desc-wrap { position: relative; }
.pt-co-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: #8899AA;
  max-height: 68px;
  overflow: hidden;
  transition: max-height 0.35s ease;
  margin: 0 0 4px;
}
.pt-co-desc.expanded { max-height: 600px; }
.pt-co-more {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 0 8px;
  opacity: 0.8;
}
.pt-co-more:hover { opacity: 1; }
.pt-co-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pt-co-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: rgba(77,159,255,0.1);
  color: var(--blue);
  border: 1px solid rgba(77,159,255,0.22);
}
.pt-co-chip-dim {
  background: rgba(255,255,255,0.05);
  color: #8899AA;
  border-color: rgba(255,255,255,0.09);
}
.pt-co-chip-link {
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.pt-co-chip-link:hover { background: rgba(77,159,255,0.18); border-color: rgba(77,159,255,0.4); }

/* ── Financials Tab ────────────────────────────────────────────────────────── */
.pt-fin-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  padding: 14px 0;
}
.pt-fin-chart-card {
  grid-column: 1 / -1;
}
.pt-fin-chart-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.pt-fin-tab-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.pt-fin-tab {
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #8899AA;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.pt-fin-tab.active, .pt-fin-tab:hover {
  background: rgba(77,159,255,0.12);
  border-color: rgba(77,159,255,0.35);
  color: var(--blue);
}
.pt-qf-chart-wrap {
  position: relative;
  height: 300px;
}
.pt-qf-kpi-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.pt-qf-kpi {
  flex: 1;
  min-width: 110px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
}
.pt-qf-kpi-label { font-size: 10px; color: #6B7A8D; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.pt-qf-kpi-val { font-size: 18px; font-weight: 700; color: white; }
.pt-qf-kpi-chg { display: block; font-size: 11px; margin-top: 3px; }
.pt-qf-pos { color: var(--green); }
.pt-qf-neg { color: var(--red); }
.pt-fin-nodata { color: #6B7A8D; font-size: 13px; padding: 40px 0; text-align: center; }

/* Revenue bar list */
.pt-fin-bar-list { display: flex; flex-direction: column; gap: 8px; }
.pt-fin-bar-row { display: flex; align-items: center; gap: 8px; }
.pt-fin-bar-label { font-size: 11px; color: #6B7A8D; width: 54px; flex-shrink: 0; }
.pt-fin-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.pt-fin-bar-fill { height: 100%; background: rgba(77,159,255,0.6); border-radius: 3px; transition: width 0.4s ease; }
.pt-fin-bar-val { font-size: 11px; color: white; width: 60px; text-align: right; flex-shrink: 0; }

/* Margin history */
.pt-fin-margin-list { display: flex; flex-direction: column; gap: 10px; }
.pt-fin-margin-row { display: flex; align-items: center; gap: 10px; }
.pt-fin-margin-period { font-size: 11px; color: #6B7A8D; width: 54px; flex-shrink: 0; }
.pt-fin-margin-cols { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-fin-margin-chip {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.pt-fin-gm { background: rgba(0,255,136,0.1); color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.pt-fin-om { background: rgba(255,184,77,0.1); color: #FFB84D; border: 1px solid rgba(255,184,77,0.2); }
.pt-fin-nm { background: rgba(255,61,90,0.08); color: #FF6B85; border: 1px solid rgba(255,61,90,0.2); }

/* ── News + Insider row ────────────────────────────────────────────────────── */
.pt-ni-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* News */
.pt-news-section { padding-bottom: 8px; }
.pt-news-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
}
.pt-news-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
.pt-news-card:hover {
  border-color: rgba(77,159,255,0.3);
  background: rgba(77,159,255,0.04);
}
.pt-news-card-hero { padding: 18px 20px; }
.pt-news-pub {
  font-size: 10.5px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}
.pt-news-title {
  font-size: 13px;
  color: #D0DCE8;
  line-height: 1.5;
  font-weight: 500;
  flex: 1;
}
.pt-news-card-hero .pt-news-title { font-size: 15px; }
.pt-news-time {
  font-size: 11px;
  color: #6B7A8D;
  margin-top: 8px;
}

/* Insider table */
.pt-insider-section { }
.pt-insider-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.pt-insider-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pt-insider-table th {
  text-align: left;
  padding: 9px 14px;
  color: #6B7A8D;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pt-insider-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #C8D4E0;
}
.pt-insider-table tr:last-child td { border-bottom: none; }
.pt-insider-table td.iw-num, .pt-insider-table th.iw-num { text-align: right; font-variant-numeric: tabular-nums; }
.pt-table-collapse { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.pt-table-collapse.expanded { max-height: 3000px; }
.pt-table-toggle-wrap { text-align: center; margin-top: 10px; }
.pt-ins-name { font-weight: 500; color: white; }
.pt-ins-role { color: #6B7A8D; font-size: 11px; }
.pt-ins-txn-buy  { color: var(--green); font-weight: 600; }
.pt-ins-txn-sell { color: var(--red);   font-weight: 600; }
/* Mobile card list — same data as .pt-insider-table, one card per transaction.
   6 columns (Date/Insider/Role/Transaction/Shares/Value) forced the table
   into its own horizontal scrollbar on phones. */
.pt-ins-cards { display: none; }
.pt-ins-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 12.5px;
}
.pt-ins-card.pt-ins-buy  { border-left-color: rgba(0,200,150,0.5); }
.pt-ins-card.pt-ins-sell { border-left-color: rgba(240,64,96,0.5); }
.pt-ins-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-ins-card-role { color: var(--dim); font-size: 11px; flex-shrink: 0; }
.pt-ins-card .pt-ins-txn { display: block; margin-top: 4px; font-size: 12px; }
.pt-ins-card-bottom { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--dim); }
@media (max-width: 640px) {
  .pt-insider-table-wrap { display: none; }
  .pt-ins-cards { display: block; }
}

.pt-ins-buy  td:first-child { border-left: 3px solid rgba(0,255,136,0.5); }
.pt-ins-sell td:first-child { border-left: 3px solid rgba(255,61,90,0.5); }

@media (max-width: 900px) {
  .pt-fin-layout { grid-template-columns: 1fr; }
  .pt-news-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pt-news-grid  { grid-template-columns: 1fr; }
  .pt-co-inner   { padding: 14px 16px 16px; }
  .pt-ni-row     { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   InsiderWolf — New layout classes (5-tab redesign)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero meta row ───────────────────────────────────────────────────────── */
.pt-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  margin-bottom: 8px;
  font-size: 11px;
}
.pt-hero-meta-item  { color: var(--text); font-weight: 600; }
.pt-hero-meta-dim   { color: var(--dim); }
.pt-hero-meta-sep   { color: var(--border); }
.pt-hero-meta-link  { color: var(--blue); text-decoration: none; }
.pt-hero-meta-link:hover { color: var(--teal); }

/* ── Overview tab ────────────────────────────────────────────────────────── */
.pt-ov-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.pt-ov-desc-card    { grid-column: 1 / -1; }
.pt-ov-compare-card { grid-column: 1 / -1; }

.pt-ov-signals { display: flex; flex-direction: column; }
.pt-ov-sig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pt-ov-sig-row:last-child { border-bottom: none; }
.pt-ov-sig-label { font-size: 11px; color: var(--dim); }
.pt-ov-sig-val   { font-size: 12px; font-weight: 600; text-align: right; }

@media (max-width: 700px) {
  .pt-ov-layout { grid-template-columns: 1fr; }
  .pt-ov-desc-card, .pt-ov-compare-card { grid-column: span 1; }
}

/* ── Technical tab — Patterns card ──────────────────────────────────────── */
.pt-patterns-card { grid-column: 1 / -1; }

/* ── Financials tab — Fundamentals section ───────────────────────────────── */
.pt-fin-section-sep {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dim);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 4px;
  margin-bottom: 14px;
}

/* Collapsible reference table */
details.pt-fund-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}
details.pt-fund-details > summary {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dim);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel2);
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
details.pt-fund-details > summary::-webkit-details-marker { display: none; }
details.pt-fund-details > summary::after { content: '▼'; font-size: 9px; transition: transform 0.2s; }
details.pt-fund-details[open] > summary::after { transform: rotate(180deg); }
details.pt-fund-details > summary:hover { background: var(--border); color: var(--text); }
details.pt-fund-details > .pt-fund-details-body { padding: 16px; }

/* ── Smart Money tab ─────────────────────────────────────────────────────── */
.pt-money-layout { display: flex; flex-direction: column; gap: 32px; }
.pt-money-insiders { }

/* ── Target range — pub_chart.js compatibility ───────────────────────────── */
.pt-target-hero { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   InsiderWolf — iw-* Design System (5-tab ticker page)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared color utilities ─────────────────────────────────────────────── */
.iw-val-green { color: var(--green); }
.iw-val-red   { color: var(--red); }
.iw-val-amber { color: var(--amber); }
.iw-val-blue  { color: var(--blue); }
.iw-val-dim   { color: var(--dim); }

/* ── Hero — compact single-row bar ──────────────────────────────────────── */
.iw-hero {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  margin: -32px -24px 0;
}

.iw-hero-search { flex-shrink: 0; }
.iw-hero-search-input {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 5px 12px;
  width: 150px;
  outline: none;
  transition: border-color 0.15s;
}
.iw-hero-search-input::placeholder { color: var(--dim); }
.iw-hero-search-input:focus { border-color: var(--blue); }

.iw-search-suggest {
  display: none;
  /* top/left are set inline by JS (position:fixed, computed off the
     input's own getBoundingClientRect) — not here, since the dropdown is
     appended to document.body, not nested under the input. left is always
     16-24px in from the viewport edge (matches page padding), so capping
     width at calc(100vw - left*2) keeps the box from bleeding off the right
     edge — min-width alone doesn't stop it growing wider than that to fit
     a long ETF name + index badges (see .iw-search-suggest-name below, which
     needs min-width:0 in this flex row for its own ellipsis to ever apply). */
  min-width: 260px;
  max-width: calc(100vw - 32px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 60;
}
.iw-search-suggest-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}
.iw-search-suggest-item:hover,
.iw-search-suggest-item.active { background: var(--border); }
.iw-search-suggest-ticker { font-weight: 600; color: var(--text); flex-shrink: 0; }
.iw-search-suggest-idx {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green);
  white-space: nowrap;
}
.iw-search-suggest-name {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.iw-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Measured: 72px while #priceDisplay still shows its "—" placeholder,
     78px once the real price/change% load via JS (updateHero()) — the
     6px difference is enough, combined with this being a flex row, to
     shift every sibling and everything below the hero on the page. Was
     the second-largest contributor to this page's CLS after the chart
     area above. */
  min-height: 78px;
  flex-wrap: wrap;
}

.iw-back {
  font-size: 18px;
  color: var(--dim);
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px 2px;
  line-height: 1;
  transition: color 0.15s;
}
.iw-back:hover { color: var(--text); }
@media (max-width: 640px) {
  /* 20×26px is too small a tap target on a control used on every page
     view — pad it out to something closer to Apple's 44pt guidance without
     shifting where it visually sits in the hero row. */
  .iw-back { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; margin: 0 -8px 0 -10px; }
}

.iw-hero-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0; }
.iw-hero-id-text { display: flex; flex-direction: column; min-width: 0; }
.iw-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.iw-hero-ticker {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.iw-hero-sep { color: var(--border); font-size: 14px; }
.iw-hero-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.iw-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 10.5px;
}
.iw-hero-spacer { flex: 1; min-width: 12px; }

.iw-meta-pill {
  background: rgba(77,159,255,0.12);
  color: var(--blue);
  border: 1px solid rgba(77,159,255,0.22);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.iw-meta-sep  { color: var(--border); }
.iw-meta-dim  { color: var(--dim); }
.iw-meta-link { color: var(--blue); text-decoration: none; transition: color 0.15s; }
.iw-meta-link:hover { color: var(--teal); }

/* min-width reserves space for the loaded price+change% content (measured:
   207px showing the "—" placeholder -> 343px once real data loads via JS).
   Without this, that width increase was sometimes just enough to tip the
   whole flex hero row from one line to two (depending on how long the
   company name is — short ones like "Apple Inc." never wrapped either way,
   but longer ones like "State Street SPDR S&P 500 ETF Trust" did), which a
   height-only reservation on .iw-hero-inner can't prevent since it's a
   content-width-triggered wrap, not a fixed-size element growing. */
.iw-hero-price-block { flex-shrink: 0; text-align: right; min-width: 300px; }
.iw-hero-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 5px;
}
.iw-price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.iw-change { font-size: 13px; font-weight: 600; }
/* Single clickable pill: shows the cached "As of" time by default, or a
   live quote when tapped — one control, not two separate "Live" labels
   sitting next to each other (that read as duplicated/confusing). */
.iw-asof {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dim);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.iw-asof:hover { color: var(--text); border-color: var(--green); }
.iw-asof.active {
  color: var(--green);
  background: rgba(0,255,136,0.1);
  border-color: rgba(0,255,136,0.35);
}
.iw-hero-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}
.iw-bias-badge,
.iw-cons-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.iw-badge-bull    { background: rgba(0,255,136,0.12);   color: var(--green); border: 1px solid rgba(0,255,136,0.25); }
.iw-badge-bear    { background: rgba(255,61,90,0.12);   color: var(--red);   border: 1px solid rgba(255,61,90,0.25); }
.iw-badge-neutral { background: rgba(107,122,141,0.14); color: var(--dim);   border: 1px solid rgba(107,122,141,0.25); }
.iw-cons-badge    { background: rgba(77,159,255,0.10);  color: var(--blue);  border: 1px solid rgba(77,159,255,0.22); }

/* ── Ticker hero: mobile stacking ────────────────────────────────────────── */
/* .iw-hero-inner is one wrapping flex row (back / identity / spacer / search
   / price). .iw-hero-spacer is an empty flex:1 div that only makes sense to
   push content apart on a wide single-line desktop layout — once the row
   wraps on mobile it just eats space unpredictably and scrambles where
   everything else lands. Drop it and give search/price their own full-width
   rows instead of letting them wrap wherever they happen to fit. */
@media (max-width: 640px) {
  .iw-hero-inner { padding: 12px 16px; min-height: 0; }
  .iw-hero-spacer { display: none; }
  .iw-hero-search { width: 100%; order: 3; }
  /* font-size below 16px on a focusable text input makes iOS Safari
     auto-zoom the whole page on tap — jarring on a page you're about to
     scroll/interact with. 16px avoids that; desktop keeps the smaller size. */
  .iw-hero-search-input { width: 100%; font-size: 16px; }
  .iw-hero-price-block {
    width: 100%;
    min-width: 0;
    text-align: left;
    order: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .iw-hero-price-row { justify-content: flex-start; margin-bottom: 0; }
  .iw-hero-badges { justify-content: flex-start; }
  .iw-hero-name { max-width: 160px; }
}

/* ── Stats strip — compact ───────────────────────────────────────────────── */
.iw-hero-stats {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  gap: 0;
  padding: 0 16px;
}
.iw-hero-stats::-webkit-scrollbar { display: none; }
.iw-hs-item { display: inline-flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.iw-hs-lbl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.iw-hs-val { font-size: 11px; font-weight: 600; color: var(--text); }
.iw-hs-sep { color: var(--border); font-size: 10px; padding: 0 6px; flex-shrink: 0; user-select: none; }
.iw-hs-upside { font-size: 10px; font-weight: 500; }

/* ── Chart controls (lives inside chart tab panel) ──────────────────────── */
.iw-chart-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.iw-chart-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
}
.iw-chart-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iw-range-group {
  display: flex;
  gap: 2px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.iw-range-btn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.iw-range-btn:hover  { color: var(--text); background: rgba(255,255,255,0.06); }
.iw-range-btn.active { background: rgba(77,159,255,0.14); color: var(--blue); }

.iw-interval-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B7B8D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 8px 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 26px 5px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  height: 30px;
}
.iw-interval-select:hover { border-color: var(--green); }
.iw-interval-select:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(0,200,150,0.15); }
[data-theme="light"] .iw-interval-select {
  background-color: #F2F4F8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23475569'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  /* .iw-chart-controls wraps its 4 children (interval select, range-group,
     indicator controls, TZ select) as atomic blocks — each either fits on
     the current row or bumps whole to the next. interval-select + range-
     group together are ~370px, just over a ~366px mobile row, so the short
     select was landing alone with the rest of its row empty and range-group
     wrapping below by itself. Reordering (visual only, DOM/desktop
     untouched) pairs the two compact selects together so no row is left
     mostly empty. */
  .iw-interval-select#intervalSel { order: 1; }
  .iw-tz-select { order: 2; }
  .iw-range-group { order: 3; width: 100%; justify-content: space-between; }
  .pt-ind-ctrl { order: 4; }
  /* font-size below 16px on a select makes iOS Safari auto-zoom on tap. */
  .iw-interval-select { font-size: 16px; height: 34px; }
  /* 21px tall was too short for a control this frequently tapped (changing
     chart range). */
  .iw-range-btn { padding: 9px 11px; }
}

/* ── Tabs section — flush below strip, menu-bar style ───────────────────── */
.iw-tabs-section { padding: 0 0 56px; }
@media (max-width: 640px) {
  .iw-tabs-section { padding: 0 0 24px; }
}

.iw-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  margin: 0 -24px;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  /* .iw-hero is also sticky at top:0 — this has to sit right below its
     actual rendered height (set by JS, see public_ticker.html/public_etf.html)
     or the two overlap instead of stacking. 72px fallback matches the
     desktop single-row hero height for the moment before JS runs. */
  top: var(--iw-hero-h, 72px);
  z-index: 10;
}
.iw-tab-bar::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  /* Fades the trailing edge instead of hard-clipping mid-label — signals
     "swipe for more" instead of looking like the layout is just broken. */
  .iw-tab-bar {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}
@media (max-width: 640px) {
  /* Same edge-to-edge bleed as .iw-hero: this -24px/24px margin/padding
     pair only cancels out against main's desktop padding. Left uncorrected
     here, the mismatch against main's ≤640px 12px padding pushed the whole
     page's scrollWidth 12px past the viewport (the bar's own overflow-x:auto
     doesn't contain it, since the mismatch is on the bar's outer box, not
     its scrollable inner content). */
  .iw-tab-bar { margin: 0 -12px; padding: 0 12px; }
}

.iw-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 13px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.iw-tab:hover  { color: var(--text); }
.iw-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.iw-panel              { display: none; }
.iw-panel.active       { display: block; padding-top: 22px; }
.iw-panel-chart.active { padding-top: 18px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.iw-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .iw-card { padding: 14px; }
}
.iw-card-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dim);
  margin-bottom: 14px;
}
.iw-earn-react-sub {
  font-size: 10px;
  color: var(--dim);
  margin: -10px 0 12px;
}
.iw-earn-filings { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.iw-earn-fil-lbl { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; }
.iw-earn-fil-link {
  font-size: 10px; font-weight: 600; text-decoration: none;
  padding: 2px 8px; border: 1px solid; border-radius: 4px;
  transition: opacity 0.12s;
}
.iw-earn-fil-link:hover { opacity: 0.75; }
.iw-card-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ── Overview — Description ─────────────────────────────────────────────── */
.pt-co-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  max-height: 70px;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.pt-co-desc.expanded { max-height: 600px; }
.iw-expand-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 0 0;
  display: block;
  transition: color 0.15s;
}
.iw-expand-btn:hover { color: var(--teal); }
.iw-inline-chip {
  display: inline-block;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--dim);
}

/* ── Overview — KPI metric grid ─────────────────────────────────────────── */
.iw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.iw-kpi-tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.15s;
}
.iw-kpi-tile:hover { border-color: rgba(77,159,255,0.28); }
.iw-kpi-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
  margin-bottom: 5px;
}
.iw-kpi-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.iw-kpi-sub {
  display: block;
  font-size: 10px;
  color: var(--dim);
  font-weight: 400;
  margin-top: 2px;
}
.iw-upside { font-size: 11px; font-weight: 600; }

/* ── Overview — Signals + Ownership 2-col ───────────────────────────────── */
.iw-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.iw-two-col > .iw-card { margin-bottom: 0; }

.iw-bias-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.iw-bias-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.iw-icon-bull    { background: rgba(0,255,136,0.1);   color: var(--green); border: 1px solid rgba(0,255,136,0.22); }
.iw-icon-bear    { background: rgba(255,61,90,0.1);   color: var(--red);   border: 1px solid rgba(255,61,90,0.22); }
.iw-icon-neutral { background: rgba(107,122,141,0.1); color: var(--dim);   border: 1px solid rgba(107,122,141,0.22); }

.iw-bias-word {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.iw-bias-sub { font-size: 11px; color: var(--dim); line-height: 1.4; }

.iw-signal-rows { display: flex; flex-direction: column; }
.iw-sig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.iw-sig-row:last-child { border-bottom: none; }
.iw-sig-lbl { font-size: 11.5px; color: var(--dim); }
.iw-sig-val { font-size: 12px; font-weight: 600; text-align: right; }

/* Ownership */
.iw-own-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 10px; }
.iw-own-row  { display: flex; align-items: center; gap: 10px; }
.iw-own-lbl  { font-size: 11.5px; color: var(--dim); width: 105px; flex-shrink: 0; }
.iw-own-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.iw-own-fill   { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.iw-own-inst   { background: var(--blue); }
.iw-own-retail { background: rgba(107,122,141,0.45); }
.iw-own-pct    { font-size: 12px; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; }
.iw-own-note   { font-size: 10px; color: var(--dim); margin: 0; }

/* ── Technical — 3-column row ───────────────────────────────────────────── */
.iw-tech-row1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.iw-tech-row1 > .iw-card { margin-bottom: 0; }

/* Detected patterns — signal counts */
.iw-sig-counts {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.iw-sc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.iw-sc-bull { border-color: rgba(0,255,136,0.2);  background: rgba(0,255,136,0.04); }
.iw-sc-bear { border-color: rgba(255,61,90,0.2);   background: rgba(255,61,90,0.04); }
.iw-sc-n    { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); }
.iw-sc-bull .iw-sc-n { color: var(--green); }
.iw-sc-bear .iw-sc-n { color: var(--red); }
.iw-sc-lbl  { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-top: 4px; }

.iw-pat-list { display: flex; flex-direction: column; gap: 5px; }
.iw-pat-item {
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 7px;
  border-left: 3px solid transparent;
}
.iw-pat-bull { color: var(--green); background: rgba(0,255,136,0.05); border-left-color: rgba(0,255,136,0.35); }
.iw-pat-bear { color: var(--red);   background: rgba(255,61,90,0.05);  border-left-color: rgba(255,61,90,0.35); }
.iw-pat-neut { color: var(--dim);   background: rgba(255,255,255,0.02); border-left-color: rgba(107,122,141,0.3); }
.iw-empty-note { font-size: 12px; color: var(--dim); padding: 10px 0; }
.iw-pat-hint   { font-size: 11px; color: var(--dim); margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.iw-pat-hint-link { color: var(--green); text-decoration: none; }
.iw-pat-hint-link:hover { text-decoration: underline; }

/* ── Earnings — next date banner ────────────────────────────────────────── */
.iw-next-earn-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,184,77,0.07);
  border: 1px solid rgba(255,184,77,0.2);
  border-radius: 10px;
  padding: 11px 18px;
  margin-bottom: 14px;
}
.iw-next-earn-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
}
.iw-next-earn-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--amber);
}

/* ── Earnings — 3-column row ────────────────────────────────────────────── */
.iw-earn-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.iw-earn-row3 > .iw-card { margin-bottom: 0; }

/* ── Beat Rate card ──────────────────────────────────────────────────────── */
.pt-beat-hero { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; }
.pt-beat-pct  { font-size: 28px; font-weight: 800; color: var(--green); line-height: 1; }
.pt-beat-sub  { font-size: 11px; color: var(--dim); }
.pt-beat-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-beat-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Consensus card ──────────────────────────────────────────────────────── */
.pt-cc-word   { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; margin: 6px 0 0; }
.pt-cc-bull   { color: var(--green); }
.pt-cc-hold   { color: var(--amber); }
.pt-cc-bear   { color: var(--red); }
.pt-cc-footer { font-size: 11px; color: var(--dim); margin-top: 6px; }

/* ── Price Target card ───────────────────────────────────────────────────── */
.pt-tgt-header { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.pt-tgt-mean   { font-size: 24px; font-weight: 800; color: var(--text); }
.pt-tgt-pip-mean { z-index: 2; }
.pt-tgt-pip-cur  { z-index: 1; background: var(--blue) !important; }
.pt-tgt-legend { display: flex; gap: 12px; align-items: center; font-size: 10px; color: var(--dim); margin-top: 8px; }
.pt-tgt-dot    { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.iw-earn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
}
.iw-earn-meta:first-of-type { border-top: none; margin-top: 8px; }
.iw-earn-meta-lbl { font-size: 11px; color: var(--dim); }
.iw-earn-meta-val { font-size: 12px; font-weight: 600; }

/* ── Financials — 2-column rows ─────────────────────────────────────────── */
.iw-fin-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.iw-fin-row2 > .iw-card { margin-bottom: 0; }

.iw-section-divider {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 4px;
  margin-bottom: 12px;
}

/* Fund KPI row (5 tiles) */
.iw-fund-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.iw-fund-kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px 11px;
}
.iw-fund-kpi-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
  margin-bottom: 5px;
}
.iw-fund-kpi-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}

/* Quality badges */
.iw-qual-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.iw-qb-green { background: rgba(0,255,136,0.1);   color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.iw-qb-amber { background: rgba(255,184,77,0.1);  color: var(--amber); border: 1px solid rgba(255,184,77,0.2); }
.iw-qb-red   { background: rgba(255,61,90,0.1);   color: var(--red);   border: 1px solid rgba(255,61,90,0.2); }
.iw-qb-dim   { background: rgba(107,122,141,0.1); color: var(--dim);   border: 1px solid rgba(107,122,141,0.2); }

/* Collapsible details */
.iw-details {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.iw-details > summary {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel2);
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.iw-details > summary::-webkit-details-marker { display: none; }
.iw-details > summary::after { content: '▼'; font-size: 8px; transition: transform 0.2s; }
.iw-details[open] > summary::after { transform: rotate(180deg); }
.iw-details > summary:hover { background: var(--border); color: var(--text); }
.iw-details-body { padding: 20px; }

/* ── Smart Money ────────────────────────────────────────────────────────── */
.iw-sm-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.iw-sm-sub {
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.55;
  margin: 4px 0 0;
}
.iw-sm-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
}
.iw-sm-all-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  padding: 5px 13px;
  border: 1px solid rgba(77,159,255,0.25);
  border-radius: 7px;
  transition: background 0.15s;
}
.iw-sm-all-link:hover { background: rgba(77,159,255,0.1); color: var(--blue); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .iw-fund-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .iw-earn-row3    { grid-template-columns: 1fr 1fr; }
  .iw-tech-row1    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .iw-hero-inner   { padding: 0 16px; gap: 10px; }
  .iw-hero-stats { display: none; }
  .iw-hero-spacer  { display: none; }
  .iw-hero-price-block { text-align: left; width: 100%; min-width: 0; }
  .iw-hero-price-row   { justify-content: flex-start; }
  .iw-hero-badges      { justify-content: flex-start; }
  .iw-price            { font-size: 20px; }
  .iw-hero-name        { max-width: 200px; }
  .iw-two-col          { grid-template-columns: 1fr; }
  .iw-fin-row2         { grid-template-columns: 1fr; }
  .iw-earn-row3        { grid-template-columns: 1fr; }
  .iw-tech-row1        { grid-template-columns: 1fr; }
  .iw-fund-kpi-row     { grid-template-columns: repeat(2, 1fr); }
  .iw-kpi-grid         { grid-template-columns: repeat(2, 1fr); }
  .iw-tab              { padding: 9px 13px; font-size: 12px; }
  .iw-qt-wrap          { overflow-x: auto; }
}
@media (max-width: 640px) {
  /* .iw-hero's negative margin must cancel main's ≤640px padding
     (16px 12px, set near the top of this file) exactly, to go edge-to-edge
     as a sticky header. This has to be the last ".iw-hero { margin }" rule
     in source order — it was previously shadowed by the unconditional
     desktop rule above and the ≤700px block, which both come later in the
     file than the old ≤640px override, silently widening the hero (and the
     whole page) by 8px past the viewport on phones. */
  .iw-hero { margin: -16px -12px 0; }
}

/* ── Sankey SVG ─────────────────────────────────────────────────────────── */
#sankeyChart,
#cfSankeyChart {
  min-height: 280px;
}

/* ── Sankey period selector ─────────────────────────────────────────────── */
.iw-sankey-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.iw-period-btns {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.iw-pbtn {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.iw-pbtn:hover { background: var(--panel2); color: var(--text); }
.iw-pbtn.active { background: var(--panel2); color: var(--green); }
.iw-pselect {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: inherit;
}
.iw-pselect:focus { outline: none; border-color: var(--green); }

/* ── Income Statement Flow (legacy bar version, kept for reference) ────── */
.iw-is-period {
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
}

.iw-is-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.iw-is-row {
  display: grid;
  grid-template-columns: 180px 1fr 90px 58px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.iw-is-row:last-child { border-bottom: none; }

.iw-is-lbl {
  font-size: 13px;
  color: var(--dim);
  white-space: nowrap;
}

.iw-is-revenue .iw-is-lbl,
.iw-is-net .iw-is-lbl {
  font-weight: 600;
  color: var(--text);
}
.iw-is-subtotal .iw-is-lbl {
  font-weight: 600;
  color: var(--text-bright);
}
.iw-is-deduct .iw-is-lbl {
  font-size: 12px;
  padding-left: 8px;
}

.iw-is-bar-cell {
  height: 8px;
  background: var(--panel2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.iw-is-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.iw-bar-blue        { background: var(--blue); opacity: 0.7; }
.iw-bar-green       { background: var(--green); opacity: 0.75; }
.iw-bar-green-strong{ background: var(--green); opacity: 1; }
.iw-bar-red         { background: var(--red); opacity: 0.65; }

.iw-is-revenue .iw-is-bar-cell { height: 10px; }
.iw-is-net .iw-is-bar-cell     { height: 10px; }

.iw-is-amt {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.iw-is-pct {
  font-size: 12px;
  text-align: right;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.iw-amt-pos { color: var(--green); }
.iw-amt-neg { color: var(--dim); }
.iw-pct-pos { color: var(--green); opacity: 0.8; }
.iw-pct-neg { color: var(--dim); }

.iw-is-revenue .iw-is-amt,
.iw-is-net     .iw-is-amt { font-size: 14px; }

/* ── Quarterly Metrics Table ─────────────────────────────────────────────── */
/* Unlike the list-style tables elsewhere on this page (insider transactions,
   analyst ratings — converted to mobile cards, see .pt-ins-cards/.iw-ar-cards),
   this one is a genuine metric × period comparison grid: 9 metrics per
   quarter, meant to be scanned across periods. That doesn't collapse into a
   card per row without losing the ability to compare a metric across
   quarters, so horizontal scroll stays — but the first column (period) is
   pinned so you always know which row you're looking at while swiping, and
   the fade signals there's more instead of just cutting off mid-header. */
.iw-qt-wrap {
  overflow-x: auto;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .iw-qt-wrap {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
  }
  .iw-qt-table th:first-child, .iw-qt-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--panel);
    z-index: 1;
  }
  .iw-qt-latest td:first-child { background: var(--panel); }
}

.iw-qt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.iw-qt-table th {
  padding: 8px 12px;
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.iw-qt-table th:first-child { text-align: left; }

.iw-qt-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.iw-qt-table tbody tr:last-child td { border-bottom: none; }
.iw-qt-table tbody tr:hover { background: var(--panel2); }

.iw-qt-latest { background: rgba(0, 200, 150, 0.04); }
.iw-qt-latest td { font-weight: 500; }

.iw-qt-date { color: var(--dim); font-size: 12px; white-space: nowrap; }
.iw-qt-num  { text-align: right; color: var(--text); }
.iw-qt-pct  { text-align: right; color: var(--dim); }
.iw-qt-green { color: var(--green); font-weight: 600; }
.iw-qt-yoy  { text-align: right; font-size: 11px; font-weight: 600; }
.iw-qt-yoy-pos { color: var(--green); }
.iw-qt-yoy-neg { color: var(--red); }

/* ── Overview single-row strip ─────────────────────────────────────────────── */
.iw-ov-strip {
  display: flex;
  align-items: center;
  height: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  margin-bottom: 10px;
  padding: 0 10px;
  gap: 0;
}
.iw-ov-strip::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .iw-ov-strip {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}
.iw-ovs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}
.iw-ovs-chip:hover .iw-ovs-lbl { color: var(--text); }
.iw-ovs-lbl { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.iw-ov-strip .iw-sc-score { font-size: 11px; font-weight: 700; letter-spacing: 0; }
.iw-ov-strip .iw-sc-rating { font-size: 9px; font-weight: 600; }
.iw-ov-strip-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; margin: 0 10px; }
.iw-ovm {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 12px 0 0;
  flex-shrink: 0;
}
.iw-ovm-lbl { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.iw-ovm-val { font-size: 11px; font-weight: 600; color: var(--text); }

.iw-snapshot {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  gap: 2px;
  padding: 7px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.iw-snapshot::-webkit-scrollbar { display: none; }
.iw-snap-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; margin: 0 8px; align-self: center; }
.iw-snap-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.iw-snap-chip:hover { background: var(--panel2); }
.iw-snap-kpi { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 6px; flex-shrink: 0; }
.iw-snap-lbl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.iw-snap-val { font-size: 12px; font-weight: 600; color: var(--text); }
.iw-snapshot .iw-sc-score { font-size: 12px; font-weight: 700; line-height: 1; }

.iw-scorecard {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.012);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 12px;
}
.iw-scorecard::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .iw-scorecard {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}
.iw-sc-dim {
  flex: 1;
  min-width: 88px;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.iw-sc-sep { width: 1px; background: var(--border); margin: 8px 0; flex-shrink: 0; }
.iw-sc-header { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.iw-sc-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); font-weight: 700; white-space: nowrap; }
.iw-sc-score { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }
.iw-sc-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.iw-sc-fill  { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
.iw-sc-rating { font-size: 9px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
.iw-sc-high  { color: var(--green); }
.iw-sc-mid   { color: var(--amber); }
.iw-sc-low   { color: var(--red);   }
.iw-sc-fill-high { background: linear-gradient(90deg, var(--green), var(--teal)); }
.iw-sc-fill-mid  { background: var(--amber); }
.iw-sc-fill-low  { background: var(--red); }

/* ── Quick Take card ──────────────────────────────────────────────────────── */
.iw-quick-take {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iw-qt-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.iw-qt-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); }
.iw-qt-badge-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.iw-qt-bias { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; }
.iw-qt-bull { background: rgba(0,200,150,0.12); color: var(--green); border: 1px solid rgba(0,200,150,0.25); }
.iw-qt-bear { background: rgba(240,64,96,0.12);  color: var(--red);   border: 1px solid rgba(240,64,96,0.25); }
.iw-qt-neut { background: rgba(107,123,141,0.08); color: var(--dim);  border: 1px solid var(--border); }
.iw-qt-cons { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: rgba(61,143,239,0.1); color: var(--blue); border: 1px solid rgba(61,143,239,0.2); }
.iw-qt-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
.iw-qt-kpi  { display: flex; flex-direction: column; gap: 1px; }
.iw-qt-kpi-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.iw-qt-kpi-val { font-size: 14px; font-weight: 700; color: var(--text); }
.iw-qt-kpi-val.kpi-green { color: var(--green); }
.iw-qt-kpi-val.kpi-red   { color: var(--red); }
.iw-qt-kpi-val.kpi-amber { color: var(--amber); }

/* ── Company description ──────────────────────────────────────────────────── */
.iw-company-desc { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px; margin-bottom: 14px; }
.iw-desc-body { display: flex; flex-direction: column; gap: 6px; }
.iw-desc-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.iw-desc-pill { font-size: 10px; font-weight: 600; padding: 2px 10px; border-radius: 20px; background: var(--panel2); border: 1px solid var(--border); color: var(--dim); }
.iw-desc-text { font-size: 13px; color: var(--dim); line-height: 1.7; max-height: 4.55em; overflow: hidden; transition: max-height 0.3s ease; }
.iw-desc-text.expanded { max-height: 400px; }
.iw-desc-toggle { margin-top: 5px; display: inline-block; font-size: 11px; font-weight: 600; color: var(--blue); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; transition: color 0.15s; }
.iw-desc-toggle:hover { color: var(--teal); }
@media (max-width: 640px) {
  /* Full-width but only 13px tall — pad out the tap height without adding
     visible gap (negative margin cancels the added padding). */
  .iw-desc-toggle { padding: 8px 0; margin: -3px 0 -3px; }
}

/* ── Financial health grid ────────────────────────────────────────────────── */
.iw-fh-groups {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .iw-fh-groups { flex-direction: column; width: 100%; }
}
.iw-fh-group {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.iw-fh-group-hdr {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--dim);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}
.iw-fh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  gap: 8px;
}
.iw-fh-row + .iw-fh-row { border-top: 1px solid var(--border); }
.iw-fh-lbl  { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.iw-fh-val-wrap { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.iw-fh-val  { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.iw-fh-period { font-size: 9px; color: var(--dim); font-weight: 500; }
.iw-fh-pos  { color: var(--green); }
.iw-fh-neg  { color: var(--red); }
.iw-fh-warn { color: var(--amber); }

@media (max-width: 640px) {
  .iw-scorecard { padding: 0 12px; }
  .iw-sc-dim { min-width: 70px; padding: 10px 8px; }
  .iw-sc-score { font-size: 17px; }
  .iw-qt-kpis { grid-template-columns: repeat(3, 1fr); }
}
.iw-qt-green { color: var(--green) !important; }

/* ── Technical tab: EMA levels & volume ──────────────────────────────────── */
.iw-ema-levels { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.iw-ema-row {
  display: grid;
  grid-template-columns: 72px 1fr 72px 72px;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.iw-ema-name  { font-size: 11px; font-weight: 700; color: var(--dim); }
.iw-ema-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.iw-ema-bar   { height: 100%; border-radius: 2px; }
.iw-ema-price { font-size: 12px; font-weight: 600; color: var(--text); text-align: right; }
.iw-ema-diff  { font-size: 11px; font-weight: 700; text-align: right; }
.iw-ema-above { color: var(--green); }
.iw-ema-below { color: var(--red); }

.iw-vol-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.iw-vol-stat { display: flex; flex-direction: column; gap: 2px; }
.iw-vol-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.iw-vol-val  { font-size: 15px; font-weight: 700; color: var(--text); }
.iw-vol-bar-wrap { flex: 1; min-width: 120px; align-self: center; }
.iw-vol-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.iw-vol-fill  { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.iw-vol-high  { background: linear-gradient(90deg, var(--green), var(--teal)); }
.iw-vol-low   { background: var(--red); }
.iw-vol-norm  { background: var(--blue); }

/* ── Earnings tab: forward estimates ─────────────────────────────────────── */
.iw-fwd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
.iw-fwd-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dim);
  margin-bottom: 10px;
}
.iw-fwd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.iw-fwd-table tr { border-bottom: 1px solid var(--border); }
.iw-fwd-table tr:last-child { border-bottom: none; }
.iw-fwd-table td { padding: 6px 4px; }
.iw-fwd-period { color: var(--dim); font-size: 11px; }
.iw-fwd-val    { text-align: right; font-weight: 600; color: var(--text); }
.iw-fwd-next   { color: var(--green); }
@media (max-width: 600px) { .iw-fwd-grid { grid-template-columns: 1fr; } }

/* ── Financials tab: dividend card, cash vs debt ─────────────────────────── */
.iw-cd-cash { color: var(--green); }
.iw-cd-debt { color: var(--red); }
.iw-cd-net { font-size: 10px; color: var(--dim); padding: 4px 12px 6px; }

/* ── Smart Money tab: ownership breakdown ────────────────────────────────── */
/* ── Ownership Breakdown: stacked bar ───────────────────────────────────── */
.iw-own-stack-bar {
  display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px;
  margin-bottom: 12px;
}
.iw-own-seg { height: 100%; min-width: 2px; border-radius: 3px; transition: width 0.4s ease; }
.iw-own-seg-inst { background: var(--blue); }
.iw-own-seg-ins  { background: var(--green); }
.iw-own-seg-pub  { background: rgba(107,122,141,0.35); }
.iw-own-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.iw-own-leg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); }
.iw-own-leg-item strong { color: var(--text); font-weight: 700; }
.iw-own-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.iw-own-dot-inst { background: var(--blue); }
.iw-own-dot-ins  { background: var(--green); }
.iw-own-dot-pub  { background: rgba(107,122,141,0.5); }
/* Short interest row */
.iw-own-short-row { padding-top: 14px; border-top: 1px solid var(--border); }
.iw-own-short-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.iw-own-short-lbl { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 4px; }
.iw-own-short-val { font-size: 15px; font-weight: 800; color: var(--red); }
.iw-own-short-sub { font-size: 10px; font-weight: 400; color: var(--dim); margin-left: 3px; }
.iw-own-short-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.iw-own-short-fill { height: 100%; border-radius: 3px; background: var(--red); transition: width 0.4s ease; }
.iw-own-short-ctx { font-size: 10px; color: var(--dim); }

/* ── Scorecard: info tooltip ─────────────────────────────────────────────── */
.iw-sc-label-wrap { display: flex; align-items: center; gap: 5px; }
.iw-sc-info-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 12px; line-height: 1;
  padding: 1px 3px; border-radius: 50%;
  transition: color 0.15s; flex-shrink: 0;
}
.iw-sc-info-btn:hover { color: var(--text); }
.iw-tip-btn {
  background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 11px; line-height: 1;
  padding: 1px 3px; border-radius: 50%;
  transition: color 0.15s; flex-shrink: 0; vertical-align: middle;
}
.iw-tip-btn:hover { color: var(--text); }
.iw-sc-tip {
  display: none;
  position: fixed; z-index: 300;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  width: 240px; box-shadow: 0 4px 24px rgba(0,0,0,0.32);
  pointer-events: none;
}
.iw-sc-tip-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text); margin-bottom: 6px; }
.iw-sc-tip-body  { font-size: 11px; color: var(--dim); line-height: 1.6; }

/* ── Hero: company logo ───────────────────────────────────────────────────── */
.iw-hero-logo {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
  margin-right: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

/* ── Earnings: compact top bar ───────────────────────────────────────────── */
.iw-earn-top-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,184,77,0.05);
  border: 1px solid rgba(255,184,77,0.14);
  border-radius: var(--radius);
}
.iw-earn-chip { display: flex; align-items: center; gap: 8px; }
.iw-earn-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
  flex-shrink: 0;
}
.iw-earn-chip-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.iw-earn-chip-val { font-size: 13px; font-weight: 700; color: var(--amber); }
.iw-earn-chip-countdown { font-size: 11px; color: var(--dim); }
.iw-earn-summary-stat { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; border-left: 1px solid var(--border); }
.iw-earn-sum-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.iw-earn-sum-val { font-size: 13px; font-weight: 700; }

/* ── Earnings: forward estimates redesigned ──────────────────────────────── */
.iw-fwd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.iw-fwd-col { display: flex; flex-direction: column; gap: 0; }
.iw-fwd-col-hdr {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--dim); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.iw-fwd-col-unit { font-size: 9px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dim); opacity: 0.7; }
.iw-fwd-row {
  display: grid; grid-template-columns: 80px 1fr 60px;
  align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.035);
}
.iw-fwd-row-first { padding-top: 4px; }
.iw-fwd-row:last-child { border-bottom: none; }
.iw-fwd-group-lbl {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--dim); opacity: 0.7;
  padding: 6px 0 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.iw-fwd-group-lbl-ann { margin-top: 12px; }
.iw-fwd-period-lbl { font-size: 11px; color: var(--dim); font-weight: 500; }
.iw-fwd-bar-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.iw-fwd-bar { height: 100%; background: rgba(0,255,136,0.55); border-radius: 2px; transition: width 0.5s ease; }
.iw-fwd-bar-rev { background: rgba(77,159,255,0.55); }
.iw-fwd-val-lbl { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
.iw-fwd-val-accent { color: var(--green); }
.iw-fwd-group-lbl-prev { color: var(--amber); border-color: rgba(255,184,77,0.18); }
.iw-fwd-bar-prev { background: rgba(255,184,77,0.65) !important; }
.iw-fwd-val-prev { color: var(--amber); }
@media (max-width: 600px) { .iw-fwd-grid2 { grid-template-columns: 1fr; } }

/* ── Analyst Ratings table ───────────────────────────────────────────────── */
.iw-ar-table th { white-space: nowrap; }
.iw-ar-row-buy  td:first-child { border-left: 3px solid rgba(0,200,150,0.5); }
.iw-ar-row-sell td:first-child { border-left: 3px solid rgba(240,64,96,0.5); }
.iw-ar-row-hold td:first-child { border-left: 3px solid rgba(240,168,48,0.5); }
.iw-ar-td-firm  { font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.iw-ar-td-grade { font-weight: 700; white-space: nowrap; }
.iw-ar-grade-buy  { color: var(--green); }
.iw-ar-grade-sell { color: var(--red); }
.iw-ar-grade-hold { color: var(--amber); }
.iw-ar-td-change { white-space: nowrap; font-size: 11px; }
.iw-ar-from-grade { color: var(--dim); }
.iw-ar-arrow      { color: var(--dim); margin: 0 3px; }
.iw-ar-td-pt   { font-weight: 600; white-space: nowrap; }
.iw-ar-pt-val  { color: var(--text-bright); }
.iw-ar-pt-na   { color: var(--dim); }
.iw-ar-td-date { color: var(--dim); font-size: 11px; white-space: nowrap; }
.iw-ar-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.iw-ar-badge-up    { background: rgba(0,200,150,0.12); color: var(--green); }
.iw-ar-badge-dn    { background: rgba(240,64,96,0.12); color: var(--red); }
.iw-ar-badge-new   { background: rgba(61,143,239,0.12); color: var(--blue); }
.iw-ar-badge-maint { background: rgba(107,123,141,0.12); color: var(--dim); }

/* Mobile card list — same data as .iw-ar-table, one card per rating. 5
   columns still forced its own horizontal scrollbar on phones. */
.iw-ar-cards { display: none; }
.iw-ar-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 12.5px;
}
.iw-ar-card.iw-ar-row-buy  { border-left-color: rgba(0,200,150,0.5); }
.iw-ar-card.iw-ar-row-sell { border-left-color: rgba(240,64,96,0.5); }
.iw-ar-card.iw-ar-row-hold { border-left-color: rgba(240,168,48,0.5); }
.iw-ar-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.iw-ar-card-bottom { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* .pt-insider-table-wrap (shared with Insider Transactions) is already
   hidden at ≤640px above — this table uses the same wrap class. */
@media (max-width: 640px) {
  .iw-ar-cards { display: block; }
}

/* ── Earnings: beat-rate dot tooltip ─────────────────────────────────────── */
.pt-beat-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; cursor: pointer; border: none; padding: 0;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pt-beat-dot:hover { transform: scale(1.35); }
.pt-beat-dot-hit  { background: var(--green); box-shadow: 0 0 4px rgba(0,255,136,0.35); }
.pt-beat-dot-miss { background: var(--red);   box-shadow: 0 0 4px rgba(255,61,90,0.35); }
.pt-beat-tooltip {
  margin-top: 10px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px;
}
.pt-bt-date { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin-bottom: 8px; }
.pt-bt-row  { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.pt-bt-lbl  { font-size: 11px; color: var(--dim); }
.pt-bt-val  { font-size: 12px; font-weight: 700; }

/* ── InsiderWolf Home Page ───────────────────────────────────────────────── */

/* Hero logo */
.iwh-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 14px;
}
.iwh-logo-mark {
  width: 96px;
  height: 96px;
  display: block;
  object-fit: contain;
}
.iwh-logo-wordmark {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
  line-height: 1;
}
.iwh-logo-wordmark span { color: var(--green); }
.iwh-logo-tagline {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.2px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-top: 2px;
}

/* Hero */
.iwh-hero {
  padding: 20px 24px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.iwh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,255,136,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.iwh-hero-inner { max-width: 680px; margin: 0 auto; position: relative; }

.iwh-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.iwh-hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: iwh-pulse 2s ease-in-out infinite;
}
@keyframes iwh-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.8); }
}

.iwh-hero-title {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 8px;
}
.iwh-hero-title span { color: var(--green); }

.iwh-hero-sub {
  font-size: .9rem;
  color: var(--dim);
  max-width: 540px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

.iwh-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.iwh-search-form:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0,255,136,0.08);
}
.iwh-search-icon {
  flex-shrink: 0;
  margin-left: 16px;
  color: var(--dim);
}
.iwh-search-input {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: .5px;
}
.iwh-search-input::placeholder { color: var(--dim); }
.iwh-search-btn {
  padding: 14px 24px;
  background: var(--green);
  color: #000;
  border: none;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.iwh-search-btn:hover { opacity: .85; }
@media (max-width: 480px) {
  .iwh-search-btn { padding: 14px 16px; }
  /* The hero was ~500px of stacked centered elements before any scrollable
     content on a phone (logo mark + wordmark + tagline + badge + 2-line
     title + 3-line subhead + search, each with independent margins).
     Tighten the gaps — same content, less dead vertical space — rather than
     cutting copy. */
  .iwh-hero { padding: 16px 20px 20px; }
  .iwh-logo { margin-bottom: 8px; }
  .iwh-logo-mark { width: 64px; height: 64px; }
  .iwh-logo-wordmark { font-size: 20px; }
  .iwh-hero-badge { margin-bottom: 8px; }
  .iwh-hero-title { margin-bottom: 6px; }
  .iwh-hero-sub { margin-bottom: 12px; }
}

.iwh-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.iwh-hstat { font-size: .8rem; color: var(--dim); }
.iwh-hstat strong { color: var(--text); }
.iwh-hstat-div { width: 1px; height: 12px; background: var(--border); }

/* Feature pillars */
.iw-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 32px;
}
@media (max-width: 760px) { .iw-pillars { grid-template-columns: 1fr; } }

.iw-pillar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.iw-pillar-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(0,255,136,0.1);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.iw-pillar-title { font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.iw-pillar-desc  { font-size: .8rem; color: var(--dim); line-height: 1.6; }

/* Section headers */
.iw-si-section,
.iw-analyses-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 40px;
}
.iw-section-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.iw-section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.iw-section-title { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.iw-section-link {
  font-size: .82rem;
  color: var(--dim);
  text-decoration: none;
  transition: color .15s;
}
.iw-section-link:hover { color: var(--green); }

/* Super Investor preview cards */
.iw-si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.iw-si-card {
  display: block;
  text-decoration: none;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .15s, transform .15s;
}
.iw-si-card:hover { border-color: var(--green); transform: translateY(-2px); }

.iw-si-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.iw-si-avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iw-si-name  { font-size: .85rem; font-weight: 700; color: var(--text); }
.iw-si-firm  { font-size: .7rem; color: var(--dim); margin-top: 1px; }
.iw-si-period { margin-left: auto; font-size: .68rem; color: var(--dim); white-space: nowrap; }

.iw-si-tickers { display: flex; flex-wrap: wrap; gap: 6px; }
.iw-si-tick {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid;
  letter-spacing: .03em;
}

/* Report grid */
.iw-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.iw-report-card {
  display: block;
  text-decoration: none;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.iw-report-card:hover { border-color: var(--green); transform: translateY(-3px); }
.iw-report-card:hover .iw-rc-overlay { opacity: 1; }
.iw-report-card:hover .iw-rc-img img { transform: scale(1.04); }

.iw-rc-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--panel); }
.iw-rc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.iw-rc-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}

.iw-rc-body { padding: 14px 16px; }
.iw-rc-id   { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.iw-rc-logo { width: 24px; height: 24px; border-radius: 4px; object-fit: contain; }
.iw-rc-ticker { font-size: .95rem; font-weight: 700; color: var(--text); }
.iw-rc-name   { font-size: .72rem; color: var(--dim); margin-top: 1px; }
.iw-rc-meta   { font-size: .72rem; color: var(--dim); }

/* Live data grid */
.iw-live-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 12px; }
.iw-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.iw-live-card {
  display: block;
  text-decoration: none;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color .15s, transform .15s;
}
.iw-live-card:hover { border-color: var(--green); transform: translateY(-2px); }
.iw-lc-top    { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.iw-lc-ticker { font-size: .92rem; font-weight: 700; color: var(--text); }
.iw-lc-name   { font-size: .72rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-lc-price  { font-size: .88rem; font-weight: 600; color: var(--text); margin-top: 4px; }
.iw-lc-chg    { font-size: .78rem; margin-left: 4px; }
.iw-pos { color: var(--green); }
.iw-neg { color: var(--red); }

/* ── Ticker tape ─────────────────────────────────────────────────────────── */
.iw-tape-wrap {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
  padding: 8px 0;
  white-space: nowrap;
}
.iw-tape {
  display: inline-flex;
  gap: 0;
  will-change: transform;
}
.iw-tape-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 20px 2px 0;
  text-decoration: none;
  border-right: 1px solid var(--border);
  margin-right: 20px;
  transition: opacity .15s;
}
.iw-tape-item:hover { opacity: .7; }
.iw-tape-sym  { font-size: .75rem; font-weight: 700; color: var(--text); letter-spacing: .04em; }
.iw-tape-px   { font-size: .75rem; color: var(--dim); }
.iw-tape-chg  { font-size: .72rem; font-weight: 600; }

/* ── Feature showcase ────────────────────────────────────────────────────── */
.iw-showcase {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.iw-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.iw-feat-rev { direction: rtl; }
.iw-feat-rev > * { direction: ltr; }
@media (max-width: 820px) {
  .iw-feat { grid-template-columns: 1fr; gap: 32px; }
  .iw-feat-rev { direction: ltr; }
}

/* Compact 3-up row (Technical / Earnings / Post-earnings) — three shorter
   cards side by side instead of three full-width alternating sections that
   all demo the same ticker back to back. */
.iw-feat-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) {
  .iw-feat-trio { grid-template-columns: 1fr; gap: 32px; }
}
.iw-feat-card { display: flex; flex-direction: column; }
.iw-feat-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -.2px;
  margin-bottom: 8px;
}
.iw-feat-card-desc {
  font-size: .82rem;
  color: var(--dim);
  line-height: 1.55;
  margin-bottom: 16px;
}
.iw-feat-card .iw-feat-demo { padding: 14px; margin-bottom: 16px; }
.iw-feat-card .iw-feat-cta { align-self: flex-start; }

.iw-feat-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.iw-feat-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.4px;
  margin-bottom: 14px;
}
.iw-feat-desc {
  font-size: .88rem;
  color: var(--dim);
  line-height: 1.7;
  margin-bottom: 20px;
}
.iw-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  border: 1px solid rgba(0,255,136,.3);
  border-radius: 6px;
  padding: 7px 16px;
  transition: background .15s;
}
.iw-feat-cta:hover { background: rgba(0,255,136,.08); }

/* Demo panels */
.iw-feat-demo {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.iw-feat-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,255,136,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.iw-demo-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

/* Portfolio map */
.iw-map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.iw-map-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px 6px;
  border-radius: 8px;
  border: 1px solid;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  min-height: 52px;
  flex-grow: 1;
  flex-basis: 10%;
}
.iw-map-box:hover { opacity: .8; transform: translateY(-1px); }
.iw-map-tick { font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.iw-map-pct  { font-size: .6rem;  color: rgba(255,255,255,.4); margin-top: 2px; }

/* Sparkline */
.iw-sparkline {
  width: 100%;
  height: 110px;
  display: block;
  margin-bottom: 12px;
}
.iw-demo-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.iw-pat-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid;
}
.iw-pat-bull  { color: var(--green); border-color: rgba(0,255,136,.35); background: rgba(0,255,136,.08); }
.iw-pat-break { color: #60a5fa;      border-color: rgba(96,165,250,.35); background: rgba(96,165,250,.08); }
.iw-pat-ema   { color: var(--amber); border-color: rgba(255,184,77,.35); background: rgba(255,184,77,.08); }

/* EPS SVG */
.iw-eps-svg { width: 100%; height: 110px; display: block; }

/* ── Earnings reaction chart ─────────────────────────────────────────────── */
.iw-rxn-svg { width: 100%; height: 180px; display: block; margin-bottom: 10px; }
.iw-rxn-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.iw-rxn-leg { font-size: .7rem; }
.iw-rxn-beat     { color: #00FF88; }
.iw-rxn-beatdown { color: #ff8c42; }

/* ── ETF meta pill ────────────────────────────────────────────────────────── */
.iw-meta-pill-etf { background: rgba(61,143,239,0.15); color: var(--blue); border: 1px solid rgba(61,143,239,0.3); }

/* ── ETF holdings tab layout ──────────────────────────────────────────────── */
.iw-etf-hold-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .iw-etf-hold-grid { grid-template-columns: 1fr; } }

/* ── Holdings table ───────────────────────────────────────────────────────── */
.iw-hold-table { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.iw-hold-row { display: grid; grid-template-columns: 24px 56px 1fr 80px 50px; align-items: center; gap: 8px; padding: 6px 4px; border-radius: var(--radius-sm); transition: background .15s; }
.iw-hold-row:hover { background: var(--panel2); }
.iw-hold-rank { font-size: 11px; color: var(--dim); text-align: right; }
.iw-hold-tick { font-size: 12px; font-weight: 700; }
.iw-hold-ticker-link { color: var(--blue); text-decoration: none; }
.iw-hold-ticker-link:hover { text-decoration: underline; }
.iw-hold-name { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-hold-bar-wrap { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.iw-hold-bar { height: 100%; background: var(--green); border-radius: 3px; }
.iw-hold-pct { font-size: 12px; font-weight: 600; color: var(--text-bright); text-align: right; }
.iw-hold-footer { margin-top: 10px; font-size: 11px; color: var(--dim); text-align: right; }

/* ── ETF home page section ─────────────────────────────────────────────────── */
.iw-etf-section { padding: 32px 20px 48px; max-width: 1280px; margin: 0 auto; }
.iw-etf-hd-right { display: flex; align-items: center; gap: 16px; }
.iw-etf-region-toggle { display: flex; gap: 8px; }
.iw-etf-rgn-btn { padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--dim); font-size: 13px; cursor: pointer; transition: all .15s; }
.iw-etf-rgn-btn.active, .iw-etf-rgn-btn:hover { border-color: var(--green); color: var(--green); background: rgba(0,200,150,0.08); }
/* Fixed 4 columns, not auto-fill — the list is always exactly 8 items, and
   auto-fill's minmax(200px,1fr) happens to fit 5 per row at this page's
   1280px max-width, leaving an awkward 5+3 split. 4 columns divides evenly. */
.iw-etf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 900px) {
  .iw-etf-grid { grid-template-columns: repeat(2, 1fr); }
}
.iw-etf-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: border-color .2s, background .2s; }
.iw-etf-card:hover { border-color: var(--blue); background: rgba(61,143,239,0.06); }
.iw-etf-card-ticker { font-size: 15px; font-weight: 800; color: var(--text-bright); }
.iw-etf-card-name { font-size: 12px; color: var(--dim); line-height: 1.4; }
.iw-etf-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.iw-etf-cat { font-size: 11px; color: var(--dim); }
.iw-etf-er { font-size: 12px; font-weight: 700; }

/* "View all ETFs" — desktop version sits inline in the header next to the
   region toggle; mobile gets its own full-width link below the grid instead
   (see .iw-etf-view-all-mobile), since the header row has no room for a
   third element once the label wraps to 2 lines on a phone. */
.iw-etf-view-all-mobile { display: none; }

@media (max-width: 640px) {
  .iw-etf-grid { grid-template-columns: 1fr; }
  /* Stack the header instead of squeezing the region toggle onto the same
     row as a label that wraps to 2 lines on a phone ("Popular EU / UCITS
     ETFs" vs. "Popular US ETFs" — the longer one was colliding with the
     toggle pills). */
  .iw-etf-section .iw-section-hd { flex-direction: column; align-items: flex-start; gap: 12px; }
  .iw-etf-view-all { display: none; }
  /* A fixed 8-item list becomes 8 full-width stacked cards on a phone
     (~1,350px, 1.7 screens) with nothing else visible — cap to the first 4
     and link out to the full /etfs screener instead of dumping all 8 here. */
  .iw-etf-card:nth-child(n+5) { display: none; }
  .iw-etf-view-all-mobile {
    display: block;
    margin-top: 14px;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .iw-etf-view-all-mobile:active { background: var(--panel2); }
}

/* ── ETF badge on Quick Take ─────────────────────────────────────────────── */
.iw-badge-etf { background: rgba(61,143,239,0.15); color: var(--blue); border: 1px solid rgba(61,143,239,0.25); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.iw-rxn-miss     { color: #ff3d5a; }

/* ── ETF Screener (/etfs) ────────────────────────────────────────────────── */
.etfs-page { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; }

/* Header */
.etfs-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.etfs-title-row { display: flex; align-items: center; gap: 12px; }
.etfs-title { font-size: 24px; font-weight: 800; color: var(--text-bright); margin: 0; }
.etfs-count-badge { background: rgba(0,200,150,0.12); color: var(--green); border: 1px solid rgba(0,200,150,0.25); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.etfs-subtitle { font-size: 13px; color: var(--dim); margin: 4px 0 0; }
.etfs-search-wrap { position: relative; }
.etfs-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.etfs-search { width: 280px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px 9px 34px; color: var(--text); font-size: 13px; }
.etfs-search:focus { outline: none; border-color: var(--blue); }

/* Filters */
.etfs-filters { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.etfs-filter-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etfs-filter-label { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
.etfs-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.etfs-pill { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; transition: all .15s; }
.etfs-pill:hover { border-color: var(--blue); color: var(--blue); }
.etfs-pill.active { border-color: var(--green); color: var(--green); background: rgba(0,200,150,0.08); font-weight: 600; }

/* TER slider */
.etfs-ter-wrap { display: flex; align-items: center; gap: 10px; }
.etfs-ter-slider { width: 140px; accent-color: var(--green); cursor: pointer; }
.etfs-ter-val { font-size: 12px; font-weight: 700; color: var(--text-bright); min-width: 36px; }

/* Provider checkboxes */
.etfs-provider-group { align-items: flex-start; }
.etfs-provider-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.etfs-chk { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--dim); cursor: pointer; }
.etfs-chk input { accent-color: var(--green); cursor: pointer; }

.etfs-clear-btn { margin-left: auto; padding: 5px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; transition: all .15s; align-self: flex-end; }
.etfs-clear-btn:hover { border-color: var(--red); color: var(--red); }

/* Sort bar */
.etfs-sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.etfs-result-count { font-size: 12px; color: var(--dim); }
.etfs-sort-controls { display: flex; align-items: center; gap: 8px; }
.etfs-sort-label { font-size: 12px; color: var(--dim); }
.etfs-sort-select { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; padding: 4px 8px; cursor: pointer; }
.etfs-sort-select:focus { outline: none; border-color: var(--blue); }

/* Table */
.etfs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.etfs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.etfs-th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--panel); }
.etfs-th-r { text-align: right; }
.etfs-th-c { text-align: center; }
.etfs-row { cursor: pointer; transition: background .1s; }
.etfs-row:hover { background: var(--panel2); }
.etfs-row:not(:last-child) .etfs-td { border-bottom: 1px solid var(--border); }
.etfs-td { padding: 10px 12px; vertical-align: middle; }
.etfs-td-r { text-align: right; }
.etfs-td-c { text-align: center; }
.etfs-td-ticker { white-space: nowrap; }
.etfs-ticker-link { font-weight: 800; font-size: 13px; color: var(--text-bright); text-decoration: none; }
.etfs-ticker-link:hover { color: var(--blue); }
.etfs-td-name { max-width: 260px; }
.etfs-name { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.etfs-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
.etfs-td-index { font-size: 12px; color: var(--dim); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etfs-ter { color: var(--green); font-weight: 700; }
.etfs-pos { color: var(--green); font-weight: 600; }
.etfs-neg { color: var(--red); font-weight: 600; }
.etfs-dim { color: var(--dim); }

/* Badges */
.etfs-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; border: 1px solid transparent; }
.etfs-badge-acc  { background: rgba(61,143,239,0.12); color: var(--blue); border-color: rgba(61,143,239,0.25); }
.etfs-badge-dist { background: rgba(0,200,150,0.1); color: var(--green); border-color: rgba(0,200,150,0.2); }
.etfs-badge-us   { background: rgba(240,168,48,0.1); color: #F0A830; border-color: rgba(240,168,48,0.25); }
.etfs-badge-eu   { background: rgba(61,143,239,0.1); color: var(--blue); border-color: rgba(61,143,239,0.2); }

/* Action button */
.etfs-action-btn { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(0,200,150,0.1); color: var(--green); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid rgba(0,200,150,0.2); transition: all .15s; }
.etfs-action-btn:hover { background: rgba(0,200,150,0.2); color: var(--green); }

/* Loading/empty */
.etfs-loading-row { padding: 40px; text-align: center; }
.etfs-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; color: var(--dim); }
.etfs-empty p { font-size: 14px; margin: 0; }

/* Card list — mobile-only alternative to the table (see .etfs-cards below).
   All 10 table columns don't fit a phone width without either hiding most of
   them or scrolling sideways; a card can show ticker/name/TER/AUM/type/return
   in one glanceable block instead. Hidden on desktop/tablet where the table
   already works fine. */
.etfs-cards { display: none; }
.etfs-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
}
.etfs-card:active { background: var(--panel2); }
.etfs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etfs-card-id { display: flex; align-items: center; gap: 6px; min-width: 0; }
.etfs-card-ticker { font-weight: 800; font-size: 14px; color: var(--text-bright); flex-shrink: 0; }
.etfs-card-ter { font-size: 13px; font-weight: 700; color: var(--green); flex-shrink: 0; white-space: nowrap; }
.etfs-card-ter-lbl { font-size: 9px; font-weight: 600; color: var(--dim); text-transform: uppercase; }
.etfs-card-name {
  font-size: 13px; font-weight: 500; color: var(--text); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etfs-card-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.etfs-card-sub {
  font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etfs-card-ret { font-size: 12px; font-weight: 600; flex-shrink: 0; }

@media (max-width: 900px) {
  .etfs-td-index, .etfs-th:nth-child(3) { display: none; }
  .etfs-search { width: 200px; }
  .etfs-td-name { max-width: 180px; }
  .etfs-name { max-width: 170px; }
}
@media (max-width: 640px) {
  .etfs-header { flex-direction: column; }
  /* font-size below 16px on a focusable input/select makes iOS Safari
     auto-zoom on tap. */
  .etfs-search { width: 100%; font-size: 16px; }
  .etfs-sort-select { font-size: 16px; }
  .etfs-filter-label { min-width: 60px; font-size: 10px; }
  .etfs-table-wrap { display: none; }
  .etfs-cards { display: flex; flex-direction: column; }
}

/* ── Sector Heatmap ─────────────────────────────────────────────────────── */
.hm-page { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; }
.hm-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.hm-title { font-size: 22px; font-weight: 700; color: var(--text-bright); margin: 0; }
.hm-subtitle { font-size: 13px; color: var(--dim); margin: 4px 0 0; }
.hm-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hm-index-pills { display: flex; gap: 8px; }
.hm-pill { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--dim); font-size: 12px; cursor: pointer; transition: all .15s; }
.hm-pill:hover { border-color: var(--blue); color: var(--blue); }
.hm-pill.active { border-color: var(--green); color: var(--green); background: rgba(0,200,150,0.08); font-weight: 600; }
.hm-metric-select {
  padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 12px; cursor: pointer;
}
.hm-metric-select:hover { border-color: var(--blue); }

.hm-legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hm-legend-bar {
  /* Matches pub_heatmap.js's POLE constants exactly — the map's own fixed
     palette, not the site's theme-following --green/--red/--dim. */
  width: 180px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #EF4444, #5A5A5A 50%, #22C55E);
}
.hm-legend-label { font-size: 11px; font-weight: 600; color: var(--dim); }
.hm-legend-neg { color: #EF4444; }
.hm-legend-pos { color: #22C55E; }

/* The map (and its tooltip) is a fixed dark surface, like Finviz's — not
   tied to the site's light/dark toggle. Letting it follow var(--panel) etc.
   meant light mode put pure-white 1-2px borders and header bars through
   otherwise-dark, saturated tiles, and --text-bright's light-mode flip to
   near-black made the sector hover ring invisible against dark tiles. Fixed
   hex literals below, not CSS vars, are the point. */
.hm-map-wrap { overflow: auto; border: 1px solid #262D3A; border-radius: var(--radius); background: #12161F; }
.hm-map { position: relative; width: 100%; height: 640px; min-width: 640px; }

.hm-sector { position: absolute; box-sizing: border-box; border: 2px solid #12161F; overflow: hidden; z-index: 1; }
/* border-color, not box-shadow: children tile the sector's interior edge-to-
   edge and paint over an inset shadow there; the border sits outside the
   content box where children can't cover it. */
.hm-sector.hm-sector-active { z-index: 2; border-color: #F0F4F8; }
.hm-sector-label {
  display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 700;
  color: #8B98AB; text-transform: uppercase; letter-spacing: .04em;
  background: #1E2533; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-sector-body { position: absolute; left: 0; right: 0; }

.hm-industry { position: absolute; box-sizing: border-box; border: 1px solid rgba(0,0,0,.35); overflow: hidden; }
.hm-industry-label {
  display: flex; align-items: center; padding: 0 4px; font-size: 9px; font-weight: 700;
  color: #8B98AB; text-transform: uppercase; letter-spacing: .03em; background: #1E2533;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-industry-body { position: absolute; left: 0; right: 0; }

.hm-tile {
  position: absolute; box-sizing: border-box; border: 1px solid rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: filter .1s; z-index: 1;
}
.hm-tile.hm-tile-active { filter: brightness(1.12); z-index: 2; box-shadow: 0 0 0 2px #fff; }
.hm-tile-sym { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); line-height: 1.3; }

.hm-tooltip {
  /* No max-height/overflow clip here: PEER_LIST_CAP in pub_heatmap.js is the
     one deliberate truncation point (with a "+N more" note) — a CSS height
     cap on top of that would silently hide rows JS already decided to show,
     with no indication. moveTooltip() repositions to keep it on-screen instead. */
  position: fixed; z-index: 500; background: #161B24; border: 1px solid #262D3A;
  border-radius: var(--radius); padding: 10px 12px; min-width: 220px; max-width: 320px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.hm-pos { color: #22C55E; font-weight: 600; }
.hm-neg { color: #EF4444; font-weight: 600; }

.hm-tip-title {
  font-size: 10px; font-weight: 700; color: #8B98AB; text-transform: uppercase; letter-spacing: .04em;
  background: #1E2533; margin: -10px -12px 8px; padding: 6px 12px; border-radius: var(--radius) var(--radius) 0 0;
}
.hm-tip-header { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #262D3A; }
.hm-tip-header-row { display: flex; align-items: center; gap: 8px; }
.hm-tip-header-ticker { font-size: 14px; font-weight: 700; color: #F0F4F8; }
.hm-tip-header-price { font-size: 13px; font-weight: 600; color: #E8ECF0; margin-left: auto; }
.hm-tip-name { font-size: 11px; color: #8B98AB; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

.hm-tip-stats-label { font-size: 9px; font-weight: 700; color: #8B98AB; text-transform: uppercase; letter-spacing: .04em; margin-top: 8px; margin-bottom: 4px; }
.hm-tip-stats-row { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.hm-tip-stat { display: flex; flex-direction: column; min-width: 38px; }
.hm-tip-stat-label { font-size: 9px; color: #8B98AB; }
.hm-tip-stat-value { font-size: 11px; font-weight: 600; color: #E8ECF0; }
/* Compound selectors, not source order, decide the tie against .hm-pos/
   .hm-neg (single-class, defined earlier) — without these, .hm-tip-stat-
   value's color silently wins and the red/green never shows. */
.hm-tip-stat-value.hm-pos { color: #22C55E; }
.hm-tip-stat-value.hm-neg { color: #EF4444; }
.hm-tip-stat-value.hm-tip-stat-active { text-decoration: underline; text-decoration-color: #8B98AB; text-underline-offset: 2px; }

.hm-tip-list { display: flex; flex-direction: column; }
.hm-tip-list-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #E8ECF0; padding: 3px 0; }
.hm-tip-list-row-active { background: #1E2533; border-radius: 4px; font-weight: 700; }
.hm-tip-list-ticker { font-weight: 600; color: #E8ECF0; min-width: 40px; }
.hm-tip-list-row span:nth-child(3) { margin-left: auto; }
.hm-tip-more { font-size: 10px; color: #8B98AB; padding-top: 4px; }
.hm-spark { flex-shrink: 0; }
.hm-spark-empty { display: inline-block; width: 56px; height: 20px; flex-shrink: 0; }

.hm-empty { text-align: center; padding: 48px 0; color: var(--dim); font-size: 13px; }

@media (max-width: 640px) {
  .hm-header { flex-direction: column; }
  .hm-map { height: 900px; }
}