/* ══════════════════════════════════════════════════════════════
   Q-DITS Fundamental — Premium Production CSS v3
   Fonts  : Plus Jakarta Sans (display) · Inter (body/numbers)
   Default: Light theme
   ══════════════════════════════════════════════════════════════ */

/* ── THEME VARIABLES ─────────────────────────────────────────── */
:root {
  --bg:         #f2f4f8;
  --surface:    #ffffff;
  --card:       #ffffff;
  --card-alt:   #f8fafc;
  --border:     #e3e8ef;
  --border2:    #c8d1df;
  --accent:     #0052cc;
  --accent-l:   #ebf2ff;
  --accent-dim: rgba(0,82,204,.09);
  --green:      #087443;
  --green-l:    #dcfce7;
  --green-dim:  rgba(8,116,67,.1);
  --red:        #c0392b;
  --red-l:      #fff0ee;
  --red-dim:    rgba(192,57,43,.09);
  --amber:      #b45309;
  --amber-l:    #fef9c3;
  --amber-dim:  rgba(180,83,9,.09);
  --purple:     #5b21b6;
  --purple-l:   #f3f0ff;
  --teal:       #0e7490;
  --text:       #0f172a;
  --text2:      #475569;
  --text3:      #94a3b8;
  --text4:      #cbd5e1;
  --shadow-xs:  0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.1), 0 1px 2px rgba(15,23,42,.06);
  --shadow:     0 4px 16px rgba(15,23,42,.1), 0 1px 3px rgba(15,23,42,.08);
  --shadow-lg:  0 10px 40px rgba(15,23,42,.15);
  --r-sm:       6px;
  --r:          10px;
  --r-lg:       14px;
  --header-h:   56px;
  --tab-h:      44px;
  --mono:       'Inter', -apple-system, sans-serif;
  --sans:       'Plus Jakarta Sans', 'Inter', sans-serif;
}

[data-theme="dark"] {
  --bg:         #090e1a;
  --surface:    #101626;
  --card:       #161e30;
  --card-alt:   #1c2640;
  --border:     #1e2d4a;
  --border2:    #2a3f6a;
  --accent:     #4c9eff;
  --accent-l:   rgba(76,158,255,.12);
  --accent-dim: rgba(76,158,255,.1);
  --green:      #22c55e;
  --green-l:    rgba(34,197,94,.12);
  --green-dim:  rgba(34,197,94,.1);
  --red:        #f87171;
  --red-l:      rgba(248,113,113,.12);
  --red-dim:    rgba(248,113,113,.09);
  --amber:      #fbbf24;
  --amber-l:    rgba(251,191,36,.12);
  --amber-dim:  rgba(251,191,36,.09);
  --purple:     #a78bfa;
  --purple-l:   rgba(167,139,250,.12);
  --teal:       #22d3ee;
  --text:       #f1f5fd;
  --text2:      #94a3b8;
  --text3:      #4e6285;
  --text4:      #2a3d5c;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.3);
  --shadow:     0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.5);
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:13.5px;line-height:1.6;min-height:100vh;
  transition:background .2s,color .2s;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select{font-family:inherit;outline:none}
img{max-width:100%;display:block}

/* Tabular nums everywhere numbers appear */
.num,td,.stat-val,.kpi-val,.m-cell,.rc-num,.score-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ── HEADER ──────────────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:200;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:background .2s,border-color .2s;
}
.header-inner{
  height:100%;padding:0 20px;
  display:flex;align-items:center;gap:12px;
  max-width:1440px;margin:0 auto;
}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none;color:inherit}
.logo-mark{
  width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,#0052cc,#0038a8);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:800;font-size:14px;color:#fff;
}
.logo-text{font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--text);letter-spacing:-.3px}
.logo-text span{color:var(--accent)}
.header-search{flex:1;max-width:500px;position:relative}
.srch{
  width:100%;height:34px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:20px;color:var(--text);font-size:13px;
  padding:0 14px 0 36px;transition:border-color .2s,box-shadow .2s,background .2s;
}
.srch:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);background:var(--surface)}
.srch::placeholder{color:var(--text3)}
.srch-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);width:14px;height:14px;pointer-events:none}
.srch-drop{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-height:320px;overflow-y:auto;display:none;z-index:300;
}
.srch-drop.open{display:block}
.si{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.si:last-child{border-bottom:none}
.si:hover{background:var(--accent-dim)}
.si-sym{font-weight:700;color:var(--accent);font-size:13px;min-width:75px}
.si-meta{flex:1}
.si-name{font-size:12px;color:var(--text);font-weight:500}
.si-sec{font-size:10.5px;color:var(--text3);margin-top:1px}
.si-score{font-size:11.5px;font-weight:700;white-space:nowrap}
.si-empty{padding:14px;text-align:center;color:var(--text3);font-size:13px}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.btn-theme{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--border);
  color:var(--text2);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.btn-theme:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.btn-pill{
  height:32px;padding:0 14px;border-radius:20px;
  background:var(--bg);border:1.5px solid var(--border);
  color:var(--text2);font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:5px;
  transition:all .2s;white-space:nowrap;
}
.btn-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

/* ── TOOLTIP ─────────────────────────────────────────────────── */
#tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:var(--text);color:var(--surface);
  font-size:12px;padding:7px 12px;border-radius:7px;
  max-width:260px;line-height:1.55;box-shadow:var(--shadow-lg);
  display:none;font-family:'Inter',sans-serif;
}
#tip.show{display:block}

/* ── INFO ICON ───────────────────────────────────────────────── */
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:11px;height:11px;min-width:11px;max-width:11px;border-radius:50%;
  border:1px solid var(--text4);color:var(--text3);
  font-size:8px;font-style:normal;font-weight:700;
  cursor:help;vertical-align:middle;flex-shrink:0;
  transition:border-color .15s,color .15s;line-height:1;
  font-family:'Inter',sans-serif;user-select:none;
}
.info-icon:hover{border-color:var(--accent);color:var(--accent)}
/* Hard cap any inline SVG icons so a CSS/DOM glitch can never blow them up */
.srch-icon,.hero-srch-btn svg,.qdits-head-title svg{max-width:18px;max-height:18px}

/* ── HOMEPAGE ────────────────────────────────────────────────── */
.home-hero{
  background:linear-gradient(135deg,#0034a8 0%,#0052cc 60%,#0066ff 100%);
  padding:54px 20px 44px;text-align:center;position:relative;overflow:hidden;
}
[data-theme="dark"] .home-hero{background:linear-gradient(135deg,#040d2e 0%,#0d1a4f 60%,#162060 100%)}
.home-hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 65% 40%,rgba(255,255,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.9);font-size:11.5px;font-weight:600;
  padding:4px 14px;border-radius:20px;margin-bottom:18px;letter-spacing:.3px;
}
.hero-h1{
  font-family:var(--sans);font-size:clamp(24px,5vw,46px);
  font-weight:800;color:#fff;line-height:1.12;margin-bottom:12px;letter-spacing:-.5px;
}
.hero-p{
  font-size:clamp(13px,2vw,17px);color:rgba(255,255,255,.72);
  margin-bottom:28px;max-width:540px;margin-left:auto;margin-right:auto;
}
.hero-srch-wrap{max-width:520px;margin:0 auto;position:relative}
.hero-srch{
  width:100%;height:48px;
  background:#fff;border:none;
  border-radius:12px;color:#0f172a;
  font-size:14.5px;padding:0 52px 0 18px;
  box-shadow:0 4px 24px rgba(0,0,0,.2);
}
.hero-srch::placeholder{color:#94a3b8}
.hero-srch:focus{outline:3px solid rgba(255,255,255,.35)}
.hero-srch-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:var(--accent);color:#fff;
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:background .2s;
}
.hero-srch-btn:hover{background:#003db5}
.hero-stats{display:flex;justify-content:center;gap:36px;margin-top:28px;flex-wrap:wrap}
.hs{color:rgba(255,255,255,.75);font-size:12.5px;text-align:center}
.hs strong{display:block;color:#fff;font-size:21px;font-weight:800;font-family:var(--sans)}
.hero-drop{background:#fff!important;border-color:#e0e8f0!important}
.hero-drop .si-name{color:#0f172a}
.hero-drop .si-sec{color:#64748b}

/* ── STOCK GRID ──────────────────────────────────────────────── */
.cards-section{padding:28px 20px;max-width:1440px;margin:0 auto}
.cards-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.cards-title{font-family:var(--sans);font-size:18px;font-weight:700;color:var(--text)}
.cards-sub{font-size:12.5px;color:var(--text3);margin-top:2px}
.sort-row{display:flex;gap:5px;flex-wrap:wrap}
.sort-chip{
  padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;
  color:var(--text2);border:1.5px solid var(--border);background:var(--surface);
  cursor:pointer;transition:all .15s;
}
.sort-chip:hover,.sort-chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-l)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:14px}

/* Stock card */
.scard{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px 18px;
  cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .15s;
  text-decoration:none;color:inherit;display:block;
}
.scard:hover{box-shadow:var(--shadow);border-color:var(--accent);transform:translateY(-1px)}
.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.sc-logo{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  background:var(--accent-l);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.sc-logo img{width:100%;height:100%;object-fit:contain}
.sc-logo-fb{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--accent)}
.sc-name-wrap{flex:1;min-width:0}
.sc-sym{font-family:var(--sans);font-weight:800;font-size:14.5px;color:var(--text);line-height:1.2}
.sc-co{font-size:11px;color:var(--text2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-score-wrap{text-align:right;flex-shrink:0}
.sc-score{font-family:var(--sans);font-weight:800;font-size:22px;line-height:1}
.sc-score-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}
.sc-chips{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.chip{
  font-size:10.5px;padding:2px 7px;border-radius:4px;
  background:var(--bg);border:1px solid var(--border);color:var(--text2);white-space:nowrap;
}
.chip-sector{background:var(--accent-l);color:var(--accent);border-color:transparent}
.chip-safe{background:var(--green-l);color:var(--green);border-color:transparent}
.chip-grey{background:var(--amber-l);color:var(--amber);border-color:transparent}
.chip-dist{background:var(--red-l);color:var(--red);border-color:transparent}
.chip-fo{background:var(--purple-l);color:var(--purple);border-color:transparent}
.sc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);padding-top:10px;margin-top:2px}
.scm{text-align:center;padding:4px 0}
.scm-v{font-size:13.5px;font-weight:600;color:var(--text)}
.scm-l{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-top:1px}

/* ══════════════════════════════════════════════════════════════
   STOCK DETAIL
   ══════════════════════════════════════════════════════════════ */
.detail-wrap{min-height:100vh}

/* Sticky tab bar */
.tab-bar{
  position:sticky;top:var(--header-h);z-index:100;
  background:var(--surface);border-bottom:2px solid var(--border);
  display:flex;overflow-x:auto;transition:background .2s;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{
  flex-shrink:0;padding:0 20px;height:var(--tab-h);
  font-size:13px;font-weight:500;color:var(--text2);
  border-bottom:2.5px solid transparent;margin-bottom:-2px;
  cursor:pointer;transition:color .15s,border-color .15s;
  white-space:nowrap;display:flex;align-items:center;
  background:none;border-top:none;border-left:none;border-right:none;
}
.tab-btn:hover{color:var(--accent)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.tab-panel{display:none}
.tab-panel.active{display:block}

.detail-body{max-width:1360px;margin:0 auto;padding:22px 16px 80px}
@media(min-width:768px){.detail-body{padding:26px 24px 80px}}

/* ── COMPANY HERO ────────────────────────────────────────────── */
.co-hero{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:18px;
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.co-logo{
  width:52px;height:52px;border-radius:10px;flex-shrink:0;
  background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.co-logo img{width:100%;height:100%;object-fit:contain}
.co-logo-fb{font-family:var(--sans);font-weight:800;font-size:16px;color:var(--accent)}
.co-name-block{flex:1;min-width:0}
.co-sym{font-family:var(--sans);font-size:26px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.3px}
.co-full{font-size:14px;color:var(--text2);margin-top:5px}
.co-chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.co-chip{font-size:11px;padding:3px 9px;border-radius:5px;border:1px solid var(--border);color:var(--text2);background:var(--bg)}
.co-chip-accent{background:var(--accent-l);color:var(--accent);border-color:transparent}
.co-chip-sec{background:var(--purple-l);color:var(--purple);border-color:transparent}
.co-price-block{text-align:right;flex-shrink:0}
.co-price{font-family:var(--sans);font-size:24px;font-weight:800;color:var(--text)}
.co-chg{font-size:13px;font-weight:600;margin-top:3px}
.co-chg-date{font-size:10.5px;color:var(--text3);margin-top:2px}

/* ── ABOUT CARD ──────────────────────────────────────────────── */
.about-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.about-txt{font-size:13px;color:var(--text2);line-height:1.7}
.about-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.am-kv{}
.am-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.am-val{font-size:13px;color:var(--text);font-weight:600;margin-top:2px}
.am-link{color:var(--accent);font-size:12.5px;text-underline-offset:3px}
.am-link:hover{text-decoration:underline}

/* ── KPI GRID ────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
@media(min-width:520px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:800px){.kpi-grid{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1100px){.kpi-grid{grid-template-columns:repeat(8,1fr)}}
.kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 13px 11px;box-shadow:var(--shadow-xs);text-align:center;
}
.kpi-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:3px}
.kpi-val{font-size:17px;font-weight:700;color:var(--text);line-height:1}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:2px}

/* ── Q-DITS SCORE CARD (Radar) ───────────────────────────────── */
.qdits-score-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:18px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.qdits-score-head{
  background:linear-gradient(135deg,#0034a8,#0052cc);
  padding:14px 20px;display:flex;align-items:center;justify-content:space-between;
}
[data-theme="dark"] .qdits-score-head{background:linear-gradient(135deg,#0d1a4f,#162060)}
.qdits-head-title{font-family:var(--sans);font-size:14px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.qdits-badge{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.9);font-size:11px;padding:2px 10px;border-radius:20px;
}
.qdits-body{display:grid;grid-template-columns:1fr;padding:20px;gap:20px;align-items:center}
@media(min-width:700px){.qdits-body{grid-template-columns:260px 1fr}}
.qdits-chart-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.qdits-composite{text-align:center}
.rc-num{font-family:var(--sans);font-size:54px;font-weight:800;line-height:1}
.rc-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-top:3px}
.rc-sub{font-size:14px;font-weight:700;margin-top:3px}
.qdits-dims{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:700px){.qdits-dims{grid-template-columns:1fr}}
.dim-row{display:flex;align-items:center;gap:9px}
.dim-lbl{font-size:12px;font-weight:600;color:var(--text2);min-width:100px}
.dim-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.dim-fill{height:100%;border-radius:3px;transition:width .9s cubic-bezier(.4,0,.2,1)}
.dim-val{font-size:12px;font-weight:700;color:var(--text);min-width:28px;text-align:right}

/* ── SECTION HEADING ─────────────────────────────────────────── */
.sec-h{
  font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--text);
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:2px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.sec-stripe{width:3px;height:18px;border-radius:2px;background:var(--accent);flex-shrink:0}

/* ── CARD CONTAINER ──────────────────────────────────────────── */
.data-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:background .2s;
}
.dc-hd{
  padding:12px 18px;
  background:linear-gradient(90deg,var(--card-alt) 0%,var(--card) 100%);
  border-bottom:1px solid var(--border);
  font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.dc-hint{font-size:11px;color:var(--text3);font-weight:400;font-family:'Inter',sans-serif}
.dc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

/* ══════════════════════════════════════════════════════════════
   METRIC TABLE  (transposed: rows = metrics, cols = years)
   ══════════════════════════════════════════════════════════════ */
.metric-tbl{width:100%;border-collapse:collapse;white-space:nowrap;font-size:13px;min-width:600px}
.metric-tbl thead th{
  background:var(--card-alt);padding:9px 14px;
  font-size:10.5px;color:var(--text3);text-align:right;font-weight:600;
  border-bottom:2px solid var(--border2);letter-spacing:.3px;
  position:sticky;top:0;z-index:2;
}
.metric-tbl thead th.th-metric{text-align:left;position:sticky;left:0;z-index:3;min-width:180px}
.metric-tbl thead th.th-latest{
  background:var(--accent-l) !important;color:var(--accent);
  font-weight:700;
}

/* Metric row — clickable */
.m-row{cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.m-row:hover{background:var(--accent-dim)}
.m-row.m-open{background:var(--accent-l)}
[data-theme="dark"] .m-row.m-open{background:rgba(76,158,255,.07)}
.m-row td{padding:10px 14px;text-align:right;vertical-align:middle;color:var(--text)}
.m-row td.td-metric{
  text-align:left;
  position:sticky;left:0;background:var(--card);z-index:1;
  transition:background .12s;
}
.m-row:hover td.td-metric{background:var(--card-alt)}
.m-row.m-open td.td-metric{background:var(--accent-l)}
[data-theme="dark"] .m-row.m-open td.td-metric{background:rgba(76,158,255,.07)}
.td-latest{background:rgba(0,82,204,.04)!important;font-weight:600!important}
[data-theme="dark"] .td-latest{background:rgba(76,158,255,.06)!important}

/* Metric label cell internals */
.m-label{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.m-expand{
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:400;color:var(--text3);flex-shrink:0;
  line-height:1;transition:color .15s;
}
.m-expand::before{content:'+'}
.m-open .m-expand{color:var(--accent)}
.m-open .m-expand::before{content:'\2212'}
.m-name{font-weight:600;font-size:13px;color:var(--text)}
.m-unit{font-size:10px;color:var(--text3);margin-left:1px}

/* Expand row — holds inline chart */
.expand-tr td{padding:0;border:none}
.expand-box{
  overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1);
  max-height:0;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.expand-box.open{max-height:300px}
.expand-inner{padding:12px 18px 16px}
.expand-chart-holder{position:relative;width:100%;height:220px}

/* Trend indicator */
.td-trend{font-size:14px;font-weight:700;text-align:center;padding:10px 10px!important}

/* ── CHARTS IN FINANCIALS TAB ────────────────────────────────── */
.chart-grid-2{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
.chart-grid-3{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px}
@media(min-width:680px){.chart-grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:680px){.chart-grid-3{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.chart-grid-3{grid-template-columns:1fr 1fr 1fr}}
.chart-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);
}
.cc-title{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:4px}
.cc-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cc-leg{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text2)}
.cc-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* ── SCORES TAB ──────────────────────────────────────────────── */
.scores-layout{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px}
@media(min-width:700px){.scores-layout{grid-template-columns:240px 1fr}}
@media(min-width:1100px){.scores-layout{grid-template-columns:260px 1fr}}
.composite-card{
  background:linear-gradient(160deg,#0034a8 0%,#0052cc 100%);
  border-radius:var(--r-lg);padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;box-shadow:var(--shadow);
}
[data-theme="dark"] .composite-card{background:linear-gradient(160deg,#0c1a50,#14266e)}
.comp-n{font-family:var(--sans);font-size:58px;font-weight:800;color:#fff;line-height:1}
.comp-lbl{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:2px}
.comp-sub{font-size:15px;font-weight:700;color:rgba(255,255,255,.9)}
.comp-bar{width:100%;height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden;margin-top:8px}
.comp-fill{height:100%;background:rgba(255,255,255,.9);border-radius:3px;transition:width .8s ease}
.comp-rows{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);width:100%;display:flex;flex-direction:column;gap:7px}
.comp-r{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.8)}
.comp-r strong{color:#fff;font-weight:700}
.scores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:500px){.scores-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.scores-grid{grid-template-columns:repeat(2,1fr)}}
.score-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .2s;
}
.score-card:hover{border-color:var(--accent)}
.sc-hd{padding:13px 15px 0;display:flex;justify-content:space-between;align-items:flex-start}
.sc-ttl{font-size:11.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.sc-n-row{padding:5px 15px 10px;display:flex;align-items:baseline;gap:5px}
.score-num{font-family:var(--sans);font-size:32px;font-weight:800;line-height:1}
.sc-max{font-size:14px;color:var(--text3);font-weight:500}
.sc-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;margin-left:auto}
.sc-div{height:1px;background:var(--border);margin:0 15px}
.sc-bd{padding:10px 15px 14px}
/* Piotroski checks */
.piot-checks{display:flex;flex-direction:column;gap:0}
.pc-r{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:5px 0;border-bottom:1px solid var(--border)}
.pc-r:last-child{border-bottom:none}
.pc-ico{width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.pc-pass{background:var(--green-l);color:var(--green)}
.pc-fail{background:var(--red-l);color:var(--red)}
.pc-lbl{flex:1;font-size:11px;color:var(--text2)}
.pc-val{font-size:10.5px;color:var(--text3);white-space:nowrap}
/* Score breakdown rows */
.sbr{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--text2);padding:5px 0;border-bottom:1px solid var(--border)}
.sbr:last-child{border-bottom:none}
.sbr-val{font-weight:700;color:var(--text);white-space:nowrap;display:flex;align-items:center;gap:4px}
.sbr-bar{width:36px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;display:inline-block;vertical-align:middle}
.sbr-fill{height:100%;border-radius:2px}

/* ── SHAREHOLDING ────────────────────────────────────────────── */
.sh-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
@media(min-width:680px){.sh-grid{grid-template-columns:200px 1fr}}
.sh-donut{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:var(--shadow-sm);
}
.sh-legend{width:100%;display:flex;flex-direction:column;gap:0}
.sh-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.sh-row:last-child{border-bottom:none}
.sh-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.sh-nm{flex:1;color:var(--text2)}
.sh-pct{font-weight:700;color:var(--text)}

/* ── GENERIC DATA TABLE ──────────────────────────────────────── */
.data-tbl{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;min-width:650px}
.data-tbl th{
  padding:9px 14px;background:var(--card-alt);
  font-size:10.5px;color:var(--text3);text-align:right;
  border-bottom:1px solid var(--border);font-weight:600;letter-spacing:.3px;
  position:sticky;top:0;z-index:2;
}
.data-tbl th:first-child{text-align:left;position:sticky;left:0;z-index:3;background:var(--card-alt)}
.data-tbl td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.data-tbl td:first-child{text-align:left;color:var(--text2);font-weight:600;position:sticky;left:0;background:var(--card);z-index:1}
.data-tbl tr:last-child td{border-bottom:none}
.data-tbl tr:hover td{background:var(--accent-dim)}
.data-tbl tr:hover td:first-child{background:var(--card-alt)}

/* ── EQ METRIC ROW ───────────────────────────────────────────── */
.eq-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.eq-row:last-child{border-bottom:none}
.eq-lbl{color:var(--text2)}
.eq-val{font-weight:600;color:var(--text)}

/* ── COLOR SYSTEM ────────────────────────────────────────────── */
.c-pos{color:var(--green)!important}
.c-neg{color:var(--red)!important}
.c-na{color:var(--text3)!important;font-size:12px}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 9px;border-radius:5px;font-size:12px;font-weight:600;white-space:nowrap}
.b-great{background:var(--green-l);color:var(--green)}
.b-good{background:var(--accent-l);color:var(--accent)}
.b-ok{background:var(--amber-l);color:var(--amber)}
.b-warn{background:var(--red-l);color:var(--red)}
.b-na{color:var(--text3);font-size:12px}
.z-safe{background:var(--green-l);color:var(--green);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;display:inline-block}
.z-grey{background:var(--amber-l);color:var(--amber);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;display:inline-block}
.z-dist{background:var(--red-l);color:var(--red);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;display:inline-block}
.n-pos{color:var(--green);font-weight:600}
.n-neg{color:var(--red);font-weight:600}
.n-na{color:var(--text3);font-size:12px}

/* ── LOADING ─────────────────────────────────────────────────── */
.loading-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:12px}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{color:var(--text2);font-size:14px}

/* ── MODAL ───────────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:16px}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);padding:26px 28px;max-width:600px;width:100%;max-height:84vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative}
.modal-x{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;transition:color .15s}
.modal-x:hover{color:var(--red)}
.modal-title{font-family:var(--sans);font-size:19px;font-weight:800;color:var(--accent);margin-bottom:18px}
.sg-list{display:flex;flex-direction:column;gap:13px}
.sg-row{display:flex;gap:12px;align-items:flex-start}
.sg-bdg{min-width:74px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;text-align:center;flex-shrink:0;margin-top:1px}
.sg-body{font-size:12.5px;color:var(--text);line-height:1.6}
.sg-body strong{color:var(--accent)}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:14px 20px;font-size:11.5px;color:var(--text3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;transition:background .2s}
.footer-brand{font-family:var(--sans);font-weight:700;color:var(--accent)}
.footer a{color:var(--accent)}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:480px){
  .hero-h1{font-size:23px}
  .cards-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .qdits-dims{grid-template-columns:1fr}
  .scores-grid{grid-template-columns:1fr}
  .detail-body{padding:14px 10px 60px}
  .co-price-block{width:100%;text-align:left}
  .tab-btn{padding:0 14px;font-size:12px}
}
@media(max-width:640px){
  .header-search{flex:1}
  .about-meta{gap:12px}
  .data-tbl,.metric-tbl{font-size:12px}
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}