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

:root{
  --bg:#f8f9fa;--surface:#ffffff;--border:#e2e6ea;
  --text:#212529;--text-muted:#6c757d;
  --primary:#0d6efd;--primary-light:#e8f0fe;
  --green:#198754;--red:#dc3545;--amber:#fd7e14;
  --radius:8px;--shadow:0 1px 3px rgba(0,0,0,.08);
}

body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 8px;gap:12px}
.header-brand{display:flex;flex-direction:column}
h1{font-size:20px;font-weight:700;color:var(--primary)}
.header-tagline{font-size:11px;color:var(--text-muted);margin-top:1px}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.last-update{font-size:12px;color:var(--text-muted);background:var(--primary-light);padding:4px 10px;border-radius:20px;white-space:nowrap}
.btn-support{padding:6px 14px;background:#FFDD00;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;color:#333;transition:opacity .15s}
.btn-support:hover{opacity:.85}

/* ── TABS ────────────────────────────────────────────────────────────────── */
.tab-nav{display:flex;gap:4px;padding:0 16px;overflow-x:auto}
.tab-btn{padding:8px 16px;border:none;background:transparent;cursor:pointer;font-size:14px;color:var(--text-muted);border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}

main{max-width:1400px;margin:0 auto;padding:20px 16px}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── REPORT NAV ──────────────────────────────────────────────────────────── */
.report-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.report-btn{padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);cursor:pointer;font-size:13px;color:var(--text-muted);transition:all .15s}
.report-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── REPORT HEADER ───────────────────────────────────────────────────────── */
.report-header{margin-bottom:12px}
.report-header h2{font-size:18px;font-weight:600;margin-bottom:4px}
.report-desc{font-size:13px;color:var(--text-muted);line-height:1.5;max-width:800px}

/* ── SEARCH ──────────────────────────────────────────────────────────────── */
.table-search{width:100%;max-width:300px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;margin-bottom:10px;background:var(--surface)}

/* ── TABLE ───────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;overflow-y:auto;max-height:72vh;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:#f1f3f5;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:2}
thead th:hover{background:#e9ecef}
thead th.sort-asc::after{content:' ↑';color:var(--primary)}
thead th.sort-desc::after{content:' ↓';color:var(--primary)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--primary-light)}
tbody td{padding:9px 12px;white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.pos{color:var(--green);font-weight:500}
td.neg{color:var(--red);font-weight:500}

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.pass{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:#d1e7dd;color:#0a3622}
.fail{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:#f8d7da;color:#58151c}
.na  {display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600;background:#e9ecef;color:#6c757d}

/* ── SCORE BAR ───────────────────────────────────────────────────────────── */
.score-bar{display:flex;align-items:center;gap:8px}
.score-bar-track{flex:1;height:6px;background:#e9ecef;border-radius:3px;min-width:60px}
.score-bar-fill{height:6px;border-radius:3px;background:var(--primary)}
.score-bar-fill.good  {background:var(--green)}
.score-bar-fill.medium{background:var(--amber)}
.score-bar-fill.bad   {background:var(--red)}
.score-label{font-size:12px;font-weight:600;min-width:28px;text-align:right}

/* ── VERDICT ─────────────────────────────────────────────────────────────── */
.verdict{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600}
.verdict-great{background:#d1e7dd;color:#0a3622}
.verdict-good {background:#cfe2ff;color:#084298}
.verdict-avg  {background:#fff3cd;color:#664d03}
.verdict-bad  {background:#f8d7da;color:#58151c}

/* ── TICKER SELECTOR ─────────────────────────────────────────────────────── */
.ticker-selector{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ticker-selector label{font-weight:500}
#ticker-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;min-width:160px;background:var(--surface)}

/* ── REPORT CARDS ────────────────────────────────────────────────────────── */
.report-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.report-card h2{font-size:16px;font-weight:600;margin-bottom:4px}

/* ── SNAPSHOT GRID ───────────────────────────────────────────────────────── */
.snapshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin-top:12px}
.snapshot-item{background:var(--bg);border-radius:var(--radius);padding:12px}
.snapshot-item .label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.snapshot-item .value{font-size:18px;font-weight:600;margin-top:4px}

/* ── STATIC PAGES (Contact / Support) ───────────────────────────────────── */
.static-page{max-width:860px;margin:0 auto;padding:8px 0 40px}
.static-page h2{font-size:24px;font-weight:700;margin-bottom:8px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.contact-icon{font-size:32px;margin-bottom:12px}
.contact-card h3{font-size:17px;font-weight:600;margin-bottom:8px}
.contact-card p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
.btn-contact{display:inline-block;padding:9px 18px;background:var(--primary);color:#fff;border-radius:var(--radius);font-size:14px;font-weight:500;text-decoration:none;transition:opacity .15s}
.btn-contact:hover{opacity:.85}
.contact-hint{font-size:12px;color:var(--text-muted);margin-top:10px!important}
.contact-note{background:#fff3cd;border:1px solid #ffc107;border-radius:var(--radius);padding:14px 18px;font-size:13px;color:#664d03;margin-top:8px}

/* Support */
.support-hero{text-align:center;padding:32px 0 24px}
.support-hero-icon{font-size:52px;margin-bottom:12px}
.support-hero h2{font-size:28px;font-weight:700;margin-bottom:6px}
.support-subtitle{font-size:16px;color:var(--text-muted)}
.support-story{font-size:15px;line-height:1.7;color:var(--text-muted);margin:20px 0;display:flex;flex-direction:column;gap:12px}
.support-story p{margin:0}
.support-perks{margin:28px 0}
.support-perks h3{font-size:17px;font-weight:600;margin-bottom:16px}
.perks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.perk-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;font-size:14px}
.perk-icon{font-size:20px;flex-shrink:0}
.bmc-section{text-align:center;padding:24px 16px 28px;background:#fffde7;border:2px solid #FFDD00;border-radius:12px;margin:28px 0}
.bmc-section h3{font-size:18px;font-weight:700;margin-bottom:6px;color:#333}
.bmc-section .bmc-tagline{font-size:14px;color:var(--text-muted);margin-bottom:20px}
.bmc-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bmc-btn-inner{display:inline-flex;align-items:center;gap:10px;background:#FFDD00;color:#000;font-family:system-ui,sans-serif;font-size:22px;font-weight:400;padding:10px 24px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.bmc-button:hover .bmc-btn-inner{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.bmc-coffee-icon{width:28px;height:28px;flex-shrink:0}
.bmc-note{font-size:13px;color:var(--text-muted);margin-top:14px;max-width:480px;margin-left:auto;margin-right:auto}
@media(max-width:480px){.bmc-btn-inner{font-size:19px;padding:9px 18px;gap:8px}.bmc-coffee-icon{width:24px;height:24px}}
@media(max-width:480px){.bmc-button img{width:190px}}
.support-footer-note{text-align:center;padding:20px 0;font-size:14px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:8px}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:20px 20px;margin-top:40px}
.footer-inner{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--text-muted)}
.footer-inner strong{color:var(--text)}
.footer-links a{color:var(--primary);text-decoration:none;margin:0 4px}
.footer-links a:hover{text-decoration:underline}
.footer-disclaimer{font-size:12px;opacity:.8}

.hidden{display:none}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .header-right{width:100%;justify-content:space-between}
  .contact-grid{grid-template-columns:1fr}
  .snapshot-grid{grid-template-columns:1fr 1fr}
  table{font-size:12px}
  thead th,tbody td{padding:7px 8px}
  main{padding:12px 10px}
}
@media(max-width:480px){
  .tab-btn{padding:6px 10px;font-size:12px}
  .report-btn{font-size:12px;padding:5px 10px}
  .snapshot-grid{grid-template-columns:1fr 1fr}
  .perks-grid{grid-template-columns:1fr}
}

/* ── HELP & GLOSSARY ─────────────────────────────────────────────────────── */
.help-page{max-width:900px}
.help-search{width:100%;max-width:420px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;margin-bottom:20px;background:var(--surface);display:block}

.help-section{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.help-toggle{width:100%;display:flex;align-items:center;gap:12px;padding:14px 18px;background:none;border:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--text);text-align:left;transition:background .1s}
.help-toggle:hover{background:var(--primary-light)}
.help-icon{font-size:18px;flex-shrink:0}
.help-toggle span:nth-child(2){flex:1}
.help-chevron{font-size:12px;color:var(--text-muted);transition:transform .2s;flex-shrink:0}
.help-section.open .help-chevron{transform:rotate(180deg)}

.help-body{display:none;padding:0 18px 20px;border-top:1px solid var(--border)}
.help-section.open .help-body{display:block}

.help-intro{font-size:14px;color:var(--text-muted);line-height:1.6;margin:14px 0 16px}

.help-metrics{display:flex;flex-direction:column;gap:0}
.metric-row{display:grid;grid-template-columns:220px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #f1f3f5;font-size:13px;line-height:1.55}
.metric-row:last-child{border-bottom:none}
.metric-name{font-weight:600;color:var(--text);padding-top:1px}
.metric-def{color:var(--text-muted)}

.help-bands{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.band-row{display:flex;align-items:center;gap:12px;font-size:13px}
.band-label{padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap;min-width:70px;text-align:center}
.band-label.low    {background:#d1e7dd;color:#0a3622}
.band-label.medium {background:#fff3cd;color:#664d03}
.band-label.high   {background:#fde8d8;color:#7c3300}
.band-label.veryhigh{background:#f8d7da;color:#58151c}

.help-score-legend{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}

.help-tip{background:var(--primary-light);border-left:3px solid var(--primary);border-radius:0 var(--radius) var(--radius) 0;padding:10px 14px;font-size:13px;color:var(--text);margin-top:16px;line-height:1.55}

@media(max-width:600px){
  .metric-row{grid-template-columns:1fr;gap:4px}
  .metric-name{color:var(--primary)}
}

/* Sub-line below button: "Name · short description" */
.report-sub{
  font-size:11px;
  color:var(--text-muted);
  line-height:1.4;
  max-width:200px;
  display:none;
}
.report-btn-wrap:hover .report-sub{display:block}
/* The clickable report name inside the sub-line */
.report-sub-link{
  color:var(--primary);
  cursor:pointer;
  font-weight:600;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:2px;
}
.report-sub-link:hover{color:#0a58ca;text-decoration-style:solid}
@media(max-width:768px){
  .report-sub{max-width:160px}
}

/* ── FOOTER ABOUT (SEO text) ─────────────────────────────────────────────── */
.footer-about{
  font-size:11px;
  color:var(--text-muted);
  line-height:1.5;
  margin-top:4px;
  opacity:.8;
}

/* ── REPORT TITLE HELP LINK ──────────────────────────────────────────────── */
.report-title-link{
  color:var(--primary);
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
}
.report-title-link:hover{
  text-decoration:underline;
}


/* ── ABOUT / E-E-A-T ────────────────────────────────────────────────────── */
.about-eeat{
  background:var(--primary-light);
  border-left:3px solid var(--primary);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:16px 20px;
  margin-bottom:24px;
}
.about-eeat h3{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text)}
.about-eeat p{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:8px}
.about-eeat p:last-child{margin-bottom:0}

/* ── TICKER SEARCH ───────────────────────────────────────────────────────── */
.ticker-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}

/* ── TICKER SELECTOR ─────────────────────────────────────────────────────── */
.ticker-selector{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.ticker-selector label{font-weight:500;white-space:nowrap}
#ticker-select{
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:14px;min-width:130px;background:var(--surface);cursor:pointer;
}
.ticker-search-sep{
  font-size:13px;color:var(--text-muted);white-space:nowrap;
}
.ticker-name-search{
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:14px;width:200px;background:var(--surface);
  outline:none;transition:border-color .15s;
}
.ticker-name-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.ticker-name-search::placeholder{color:var(--text-muted)}
@media(max-width:600px){
  .ticker-selector{gap:8px}
  .ticker-name-search{width:160px}
}

/* ── clickable ticker cell in market reports ── */
.tlc{cursor:pointer;color:var(--primary);font-weight:600;white-space:nowrap;user-select:none}
.tlc:hover{text-decoration:underline;background:var(--primary-light)}

/* ── FILTER BAR (search + sector) ───────────────────────────────────────── */
.filter-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:8px 0 10px;
}
.filter-bar .table-search{
  flex:1;min-width:160px;max-width:300px;margin-bottom:0;
}
.sector-filter{
  padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:13px;background:var(--surface);color:var(--text);cursor:pointer;
  min-width:160px;height:36px;vertical-align:middle;
}
.sector-filter:focus{outline:none;border-color:var(--primary)}

/* ── STICKY TABLE HEADER ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;position:relative}
.table-wrap thead th{
  position:sticky;top:0;z-index:2;
  background:#f1f3f5;
}

/* ── MOBILE SCROLL HINT ──────────────────────────────────────────────────── */
.scroll-hint{
  display:none;
  text-align:center;font-size:11px;color:var(--text-muted);
  padding:4px 0 2px;letter-spacing:.04em;
  background:var(--surface);border-top:1px solid var(--border);
}
@media(max-width:700px){
  .scroll-hint{display:block}
}

/* ── WATCHLIST ───────────────────────────────────────────────────────────── */
.wl-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.wl-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wl-btn-add{padding:7px 14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500}
.wl-btn-add:hover{opacity:.88}
.wl-btn-clear{padding:7px 14px;background:none;color:#dc3545;border:1px solid #dc3545;border-radius:var(--radius);cursor:pointer;font-size:13px}
.wl-btn-clear:hover{background:#fff0f0}
.wl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.wl-chip{display:inline-flex;align-items:center;gap:3px;background:var(--primary-light);color:var(--primary);border:1px solid var(--primary);border-radius:20px;padding:3px 8px 3px 12px;font-size:13px;font-weight:600}
.wl-chip button{background:none;border:none;cursor:pointer;color:var(--primary);font-size:15px;line-height:1;padding:0;opacity:.7}
.wl-chip button:hover{opacity:1}
#wl-content{border-top-left-radius:0;border-top-right-radius:0;margin-top:0!important}
#wl-content table{width:100%;border-collapse:collapse;font-size:13px}
#wl-content thead th{background:#f1f3f5;padding:10px 12px;text-align:left;font-weight:500;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1}
#wl-content tbody td{padding:9px 12px;border-bottom:1px solid var(--border)}
#wl-content tbody tr:hover td{background:var(--primary-light)}

/* ── COMPARE ─────────────────────────────────────────────────────────────── */
.compare-selectors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:4px}
@media(max-width:640px){.compare-selectors{grid-template-columns:1fr}}
.compare-label{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--text)}
.cmp-header{display:grid;grid-template-columns:200px 1fr 1fr;background:var(--primary);color:#fff;border-radius:var(--radius) var(--radius) 0 0}
.cmp-ticker-col{padding:14px 16px;font-weight:700;text-align:center}
.cmp-ticker-label{display:block;font-size:20px}
.cmp-metric-col{padding:12px 16px;font-size:13px}
.cmp-section{border:1px solid var(--border);border-top:none;background:var(--surface)}
.cmp-section:last-child{border-radius:0 0 var(--radius) var(--radius)}
.cmp-section-title{padding:8px 16px;font-weight:600;font-size:12px;color:var(--text-muted);background:#f8f9fa;border-bottom:1px solid var(--border);letter-spacing:.05em;text-transform:uppercase}
.cmp-row{display:grid;grid-template-columns:200px 1fr 1fr;border-bottom:1px solid var(--border)}
.cmp-row:last-child{border-bottom:none}
.cmp-row .cmp-metric-col{padding:10px 16px;font-size:13px;color:var(--text-muted);font-weight:500}
.cmp-row .cmp-ticker-col{padding:10px 16px;font-size:13px;font-weight:600;text-align:center;color:var(--text)}
.cmp-better{color:#198754!important;background:#f0faf4}
.cmp-worse{color:#6c757d!important}
@media(max-width:640px){.cmp-header,.cmp-row{grid-template-columns:120px 1fr 1fr}}

/* ── DOWNLOAD BUTTONS ────────────────────────────────────────────────────── */
.dl-group{display:flex;gap:6px;align-items:center;margin-left:auto}
.dl-btn{
  padding:6px 12px;font-size:12px;font-weight:600;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text);cursor:pointer;
  white-space:nowrap;transition:all .15s;
}
.dl-btn:hover{background:#f1f3f5;border-color:#adb5bd}
.dl-btn-xlsx{background:var(--primary);color:#fff;border-color:var(--primary)}
.dl-btn-xlsx:hover{opacity:.88;background:var(--primary)}
