/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  --bg: #0f1117;
  --surface: #1a1d26;
  --surface2: #22263a;
  --border: #2e3347;
  --border2: #3d4460;
  --text: #f0f2ff;
  --text2: #b0b8d8;
  --text3: #8892b0;
  --text4: #5a6480;
  --accent: #6c8aff;
  --radius:   6px;
  --pad:      clamp(16px, 4vw, 40px);
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-body:    Georgia, 'Times New Roman', serif;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--text); min-height: 100vh;
       -webkit-text-size-adjust: 100%; overflow-x: clip; max-width: 100%; }
a { color: var(--text3); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text2); }

/* ── Layout ───────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media(min-width: 900px) {
  .shell { grid-template-columns: 300px 1fr; }
}
@media(min-width: 1200px) {
  .shell { grid-template-columns: 340px 1fr; }
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 24px;
}
@media(min-width: 900px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}
@media(max-width: 899px) {
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); }
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.logo-block { border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em;
           color: var(--text3); text-transform: uppercase; margin-bottom: 10px; }
.logo { font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 21px);
        line-height: 1.2; color: var(--text); font-weight: 400; margin-bottom: 2px; }
.logo em { color: var(--text3); font-style: italic; }
.tagline { font-size: 10px; color: var(--text3); line-height: 1.65; margin-top: 8px;
           font-family: var(--font-mono); }

/* ── Hero extras ─────────────────────────────────────────────────────── */
.hero-divider { height: 1px; background: var(--border); margin: 14px 0 12px; }
.hero-stats-row { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.hero-stat { display: flex; flex-direction: column; align-items: center; }
.hero-stat-num { font-family: var(--font-mono); font-size: 14px; font-weight: 500;
                 color: var(--accent); line-height: 1.1; }
.hero-stat-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.15em;
                 color: var(--text3); text-transform: uppercase; margin-top: 1px; }
.hero-stat-sep { font-family: var(--font-mono); font-size: 10px; color: var(--border2);
                 margin-bottom: 8px; }
.hero-links { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-link { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
             text-transform: uppercase; color: var(--text3); text-decoration: none;
             padding: 3px 7px; border: 1px solid var(--border2); border-radius: 2px;
             transition: color 0.15s, border-color 0.15s; }
.hero-link:hover { color: var(--accent); border-color: var(--accent); }
.hero-link-home { color: var(--text2); }

/* ── Search ───────────────────────────────────────────────────────────── */
.field-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
               color: var(--text3); text-transform: uppercase; margin-bottom: 8px; }
.search-block { display: flex; flex-direction: column; gap: 8px; }
.search-row { display: flex; gap: 6px; }
.search-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text); font-family: var(--font-body);
  font-size: 13px; padding: 10px 12px; outline: none; min-width: 0;
  -webkit-appearance: none; transition: border-color 0.15s;
}
.search-input::placeholder { color: var(--text3); }
.search-input:focus { border-color: var(--text2); }

.btn-analyze {
  background: var(--text); color: var(--bg); border: none;
  border-radius: var(--radius); padding: 10px 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity 0.15s;
}
.btn-analyze:disabled { opacity: 0.25; cursor: default; }
.btn-analyze:not(:disabled):hover { opacity: 0.85; }

.analyzing { display: none; align-items: center; gap: 8px; }
.analyzing.show { display: flex; }
.dot { width: 3px; height: 3px; background: var(--text3); border-radius: 50%;
       animation: blink 1.2s infinite; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%,80%,100% { opacity:.15; transform:scale(.7); }
  40%         { opacity:1;   transform:scale(1);  }
}
.analyzing-text { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.status-msg { font-family: var(--font-mono); font-size: 10px; min-height: 14px; line-height: 1.4; }
.status-msg.err { color: #f87171; }
.status-msg.ok  { color: #4ade80; }

/* ── Controls ─────────────────────────────────────────────────────────── */
.controls-block { display: flex; flex-direction: column; gap: 10px;
                  border-top: 1px solid var(--border); padding-top: 20px; }
.ctrl-group { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-ctrl {
  padding: 5px 10px; background: transparent; border: 1px solid var(--border);
  color: var(--text3); border-radius: 3px; cursor: pointer; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: all 0.1s;
}
.btn-ctrl.active { background: var(--surface2); border-color: var(--border2); color: var(--text); }

/* ── Stats ────────────────────────────────────────────────────────────── */
.stats-block { display: flex; gap: 16px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-num { font-family: var(--font-mono); font-size: 20px; color: var(--text); }
.stat-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.15em;
              color: var(--text3); text-transform: uppercase; }

.sidebar-nav { display: flex; flex-direction: column; gap: 8px;
               border-top: 1px solid var(--border); padding-top: 16px; margin-top: auto; }
.sidebar-nav a { font-family: var(--font-mono); font-size: 10px; color: var(--text3);
                 letter-spacing: 0.08em; }

/* ── Main ─────────────────────────────────────────────────────────────── */
.main { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; max-width: 900px; margin: 0 auto; width: 100%; }

/* Refresh banner */
.refresh-banner {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px;
}
.refresh-inner { display: flex; flex-direction: column; gap: 6px; }
.refresh-label { font-family: var(--font-mono); font-size: 10px; color: var(--text3); }
.refresh-track { height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; }
.refresh-fill { height: 100%; background: #4ade80; border-radius: 2px;
                transition: width 0.4s ease; width: 0%; }

/* ── Company rows ─────────────────────────────────────────────────────── */
.co-row {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: visible; transition: border-color 0.15s;
  scroll-margin-top: 20px;
}
.co-row + .co-row { margin-top: 4px; }
.co-row:hover { border-color: var(--border2); }
.co-row.highlighted { border-color: #333; }

.co-header {
  overflow: visible;
  display: grid;
  grid-template-columns: 28px minmax(160px, 240px) 1fr 64px 52px 68px 90px 28px;
  align-items: center;
  gap: 12px; padding: 14px 20px;
  cursor: pointer; background: var(--surface);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.1s;
  user-select: none; -webkit-user-select: none;
}
@media (hover: hover) { .co-header:hover { background: var(--surface2); } }
.co-header.open   { background: var(--surface2); }
@media(max-width: 899px) {
  /* Switch to flex so order is guaranteed: rank | info | trend | score */
  .co-header {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  }
  .co-rank        { order: 1; flex-shrink: 0; width: 22px; font-size: 10px; }
  .co-info        { order: 2; flex: 1; min-width: 0; }
  .co-note        { display: none !important; }
  .co-spark-wrap  { display: none !important; }
  .co-badge       { display: none !important; }
  .co-compare-btn { display: none !important; }
  .trend          { order: 3; flex-shrink: 0; min-width: 40px; text-align: center; }
  .co-score-wrap  { order: 4; flex-shrink: 0; width: 52px; }
  /* Slightly smaller circle on mobile */
  .co-score-wrap .co-pie-wrap     { width: 44px; height: 44px; }
  .co-score-wrap .co-pie-wrap svg { width: 44px; height: 44px; }
  .co-score-wrap .co-pie-num      { font-size: 12px; }
}

.co-rank { font-family: var(--font-mono); font-size: 11px; color: var(--text4); text-align: right; width: 28px; }
.co-info { min-width: 0; }
.co-name { font-family: var(--font-display); font-size: clamp(14px, 2vw, 18px);
           color: var(--text); display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.co-name-text { line-height: 1.2; }
.co-link-btn { font-size: 11px; opacity: 0; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s; line-height: 1;
               padding: 1px 3px; border-radius: 3px; }
.co-header:hover .co-link-btn { opacity: 0.6; }
.co-link-btn:hover { opacity: 1 !important; background: var(--surface2); }
.co-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-top: 3px; letter-spacing: 0.02em; }
.co-new  { font-size: 8px; color: #4ade80; margin-left: 8px; }

.co-score-wrap  { display: flex; align-items: center; justify-content: center; width: 68px; }
.co-pie-wrap    { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.co-pie-wrap svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.co-pie-num     { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                  font-family: var(--font-mono); font-size: 15px; font-weight: 800; line-height: 1; filter: brightness(1.6); }

.co-badge {
  padding: 3px 7px; border-radius: 2px; font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid; white-space: nowrap;
  width: 90px; box-sizing: border-box; text-align: center; justify-self: center; display: block;
}



/* ── Panel ────────────────────────────────────────────────────────────── */
.co-panel { display: none; background: var(--bg); border-top: 1px solid var(--border); }
.co-panel.open { display: block; }
.co-panel-inner {
  padding: 20px; display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media(min-width: 600px)  { .co-panel-inner { grid-template-columns: 1fr 1fr; } }
@media(min-width: 1000px) { .co-panel-inner { grid-template-columns: 2fr 1.2fr 1.2fr; } }
@media(max-width: 480px)  { .co-panel-inner { padding: 14px; gap: 14px; } }

.panel-section { display: flex; flex-direction: column; gap: 10px; }
.panel-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em;
               text-transform: uppercase; color: var(--text3); }
.panel-summary { font-size: 12px; color: var(--text2); line-height: 1.7; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.panel-tag { padding: 3px 7px; background: var(--surface); border: 1px solid var(--border);
             border-radius: 2px; font-family: var(--font-mono); font-size: 9px; color: var(--text3); }
.panel-meta { font-family: var(--font-mono); font-size: 9px; color: var(--text4); }

.threat-card { padding: 12px 14px; border-radius: 4px; border: 1px solid; text-align: center;
               display: flex; align-items: center; justify-content: center; min-height: 60px; }
.threat-card-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.15em;
                     text-transform: uppercase; font-weight: 700; }
.threat-card-note { font-size: 12px; color: var(--text2); }

.dim-list { display: flex; flex-direction: column; gap: 10px; }
.dim-row  { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dim-name { font-family: var(--font-mono); font-size: 9px; color: var(--text2);
            text-transform: uppercase; letter-spacing: 0.05em; }
.dim-val  { font-family: var(--font-mono); font-size: 9px; color: var(--text); }
.dim-track { height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; }
.dim-fill  { height: 100%; border-radius: 2px; }

.overall-card {
  padding: 14px; background: var(--surface); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; min-height: 80px;
}
.overall-num { font-family: var(--font-mono); font-size: 36px; }
.overall-sub { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em;
               color: var(--text3); text-transform: uppercase; }

/* ── Legends ──────────────────────────────────────────────────────────── */
.legend-wrap {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border);
  display: grid; gap: 24px;
}
@media(min-width: 700px) { .legend-wrap { grid-template-columns: 1fr 1fr; } }
.leg-title { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em;
             color: var(--text3); text-transform: uppercase; margin-bottom: 10px; }
.threat-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.threat-chip { padding: 3px 7px; border-radius: 2px; border: 1px solid;
               font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; }
.band-list { display: flex; flex-direction: column; gap: 2px; }
.band-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; }
.band-range { font-family: var(--font-mono); font-size: 10px; width: 40px; flex-shrink: 0; }
.band-lbl { font-family: var(--font-mono); font-size: 9px; width: 72px; flex-shrink: 0; }
.band-desc { font-size: 10px; color: var(--text3); }
.footnote { margin-top: 16px; font-family: var(--font-mono); font-size: 9px; color: var(--text4); line-height: 1.6; }
.footnote a { color: var(--text3); }

/* ── Animations ───────────────────────────────────────────────────────── */
.co-row.new-flash { animation: flashIn 0.8s ease; }
@keyframes flashIn {
  0%   { border-color: #555; box-shadow: 0 0 0 1px #333; }
  60%  { border-color: #333; }
  100% { border-color: var(--border); box-shadow: none; }
}
.fade-in { animation: fadeUp 0.3s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.loading-skeleton { opacity: 0.4; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.2} }

/* ── Page (about/contact) ────────────────────────────────────────────── */
.page-wrap { max-width: 680px; margin: 0 auto; padding: clamp(24px,5vw,60px) var(--pad); }
.page-nav { margin-bottom: 32px; }
.back-link { font-family: var(--font-mono); font-size: 10px; color: var(--text3);
             letter-spacing: 0.1em; text-transform: uppercase; }
.back-link:hover { color: var(--text2); }
.page-article { display: flex; flex-direction: column; gap: 32px; }
.page-title { font-family: var(--font-display); font-size: clamp(28px,5vw,42px);
              font-weight: 400; color: var(--text); }
.page-intro { font-size: 14px; color: var(--text2); line-height: 1.7; margin-top: -12px; }
.page-section { display: flex; flex-direction: column; gap: 12px; }
.page-section h2 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
                   text-transform: uppercase; color: var(--text3); }
.page-section p { font-size: 13px; color: var(--text2); line-height: 1.75; }
.page-section p + p { margin-top: 8px; }
.page-section strong { color: var(--text); }
.disclaimer { background: #150800; border: 1px solid #3a1a00; border-radius: var(--radius); padding: 20px; }
.disclaimer h2 { color: #c27a00 !important; }

.dim-explain { display: flex; flex-direction: column; gap: 16px; }
.dim-explain-item { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dim-explain-name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.dim-explain-item p { font-size: 12px; color: var(--text2); line-height: 1.6; }

.threat-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.threat-list li { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 10px; }
.badge-low  { padding:2px 7px; border-radius:2px; font-family:var(--font-mono); font-size:8px; background:#0d2d17; color:#4ade80; border:1px solid #166534; }
.badge-med  { padding:2px 7px; border-radius:2px; font-family:var(--font-mono); font-size:8px; background:#2d2200; color:#fbbf24; border:1px solid #92400e; }
.badge-high { padding:2px 7px; border-radius:2px; font-family:var(--font-mono); font-size:8px; background:#2d0d0d; color:#f87171; border:1px solid #991b1b; }
.badge-vh   { padding:2px 7px; border-radius:2px; font-family:var(--font-mono); font-size:8px; background:#1a0000; color:#ff4040; border:1px solid #7f1d1d; }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
              text-transform: uppercase; color: var(--text3); }
.form-input {
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: 13px;
  padding: 10px 12px; outline: none; -webkit-appearance: none; transition: border-color 0.15s; width: 100%;
}
.form-input:focus { border-color: var(--text3); }
.form-input::placeholder { color: var(--text3); }
.form-textarea { resize: vertical; min-height: 120px; }
.btn-submit {
  background: var(--text); color: var(--bg); border: none; border-radius: var(--radius);
  padding: 12px 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; cursor: pointer; transition: opacity 0.15s; align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.btn-submit:disabled { opacity: 0.3; cursor: default; }
.btn-submit:not(:disabled):hover { opacity: 0.85; }
.form-status { font-family: var(--font-mono); font-size: 11px; }
.form-status.ok  { color: #4ade80; }
.form-status.err { color: #f87171; }

/* Catchphrase */
.catchphrase { font-size: 13px; color: var(--accent, #6c8aff); letter-spacing: 0.08em; margin-top: 6px; font-style: italic; }
.footer-brand { display: block; font-size: 10px; color: var(--text3); letter-spacing: 0.08em; margin-top: 12px; padding-top: 4px; }

/* Trend arrows */
.trend { font-size: 18px; font-family: var(--font-mono); font-weight: 900; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; justify-self: center; }
.trend.up { color: #4ade80; }
.trend.dn { color: #f87171; }
.trend-pts { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 1; }

/* Live search suggestions */
.search-wrap { position: relative; }
#suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; z-index: 100; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.suggestion { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; cursor: pointer; transition: background 0.1s; outline: none; }
.suggestion:hover, .suggestion:focus { background: var(--surface2); }
.sug-name { font-size: 12px; color: var(--text); }
.sug-meta { font-size: 10px; color: var(--text3); font-family: monospace; }

/* ── Compare button on card ── */
.co-compare-btn { background: transparent; border: 1px solid var(--border2); color: var(--text3); width: 24px; height: 24px; justify-self: center; margin: 0 auto; border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; flex-shrink: 0; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.co-compare-btn:hover { color: var(--text); border-color: var(--text3); }
.co-compare-btn.active { background: #6c8aff22; border-color: #6c8aff; color: #6c8aff; }

/* ── Compare tray (bottom bar) ── */
#compare-tray { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border2); padding: 10px 16px; z-index: 200; align-items: center; gap: 8px; flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(0,0,0,0.4); }
@media(max-width: 899px) {
  /* Sit above the mobile footer bar */
  #compare-tray { bottom: 44px; padding: 8px 12px; gap: 6px; flex-wrap: nowrap; z-index: 9999 !important; }
  .ct-label { display: none; }
  .ct-chip  { font-size: 10px; padding: 3px 7px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-remove { margin-left: 3px; }
  .ct-go    { font-size: 10px; padding: 5px 12px; flex-shrink: 0; }
  .ct-clear { font-size: 10px; padding: 4px 8px; flex-shrink: 0; }
  .ct-hint  { font-size: 10px; }
}
.ct-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); flex-shrink: 0; }
.ct-chip { display: flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 4px 8px; font-size: 11px; color: var(--text); }
.ct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ct-remove { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; margin-left: 2px; }
.ct-remove:hover { color: var(--red); }
.ct-go { background: #6c8aff; color: #fff; border: none; border-radius: 4px; padding: 6px 14px; font-size: 11px; font-family: inherit; cursor: pointer; letter-spacing: 0.05em; flex-shrink: 0; }
.ct-go:hover { background: #5a78ff; }
.ct-clear { background: transparent; border: 1px solid var(--border2); color: var(--text3); border-radius: 4px; padding: 5px 10px; font-size: 10px; font-family: inherit; cursor: pointer; }
.ct-clear:hover { color: var(--red); border-color: var(--red); }
.ct-hint { font-size: 10px; color: var(--text3); font-style: italic; }

/* ── Compare overlay ── */
/* ── Compare Modal ─────────────────────────────────────────────────── */
#compare-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 300; align-items: center; justify-content: center; padding: 16px; touch-action: none; overscroll-behavior: contain; overflow-y: auto; }
.cmp-modal { background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; width: 100%; max-width: 860px; max-height: 92vh; overflow-y: auto; }
.cmp-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.cmp-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text3); font-family: var(--font-mono); }
.cmp-close { background: transparent; border: 1px solid var(--border2); color: var(--text3); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.cmp-close:hover { color: var(--text); border-color: var(--text3); }
.cmp-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }

/* Company header cards */
.cmp-co-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-co-card { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 12px 14px; }
.cmp-co-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cmp-co-name { font-size: 13px; font-weight: bold; font-family: var(--font-mono); margin-bottom: 2px; }
.cmp-co-meta { font-size: 9px; color: var(--text3); font-family: var(--font-mono); letter-spacing: 0.04em; }
.cmp-co-score { font-size: 22px; font-family: var(--font-mono); font-weight: 800; margin-left: auto; }
.cmp-denom { font-size: 10px; color: var(--text3); margin-left: 1px; }
.cmp-badge { font-size: 8px; padding: 3px 7px; border-radius: 3px; border: 1px solid; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); white-space: nowrap; }

/* Radar + table */
.cmp-main { display: flex; gap: 24px; align-items: flex-start; }
.cmp-radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.cmp-radar-legend { display: flex; flex-direction: column; gap: 6px; }
.cmp-legend-row { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9px; color: var(--text2); letter-spacing: 0.04em; }
.cmp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmp-legend-name { }

/* Dimension table */
.cmp-table { flex: 1; }
.cmp-table-head { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--text3); text-transform: uppercase; margin-bottom: 10px; }
.cmp-dim-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cmp-dim-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--text3); text-transform: uppercase; margin-bottom: 6px; }
.cmp-dim-bars { display: flex; flex-direction: column; gap: 5px; }
.cmp-dim-entry { display: flex; align-items: center; gap: 8px; }
.cmp-bar-track { flex: 1; height: 5px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
.cmp-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.cmp-bar-val { font-size: 10px; font-family: var(--font-mono); min-width: 24px; text-align: right; font-weight: 700; }

/* Summaries */
.cmp-summaries { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.cmp-summary-block { flex: 1; min-width: 180px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.cmp-summary-name { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.cmp-summary-text { font-size: 11px; color: var(--text2); line-height: 1.65; overflow: visible; height: auto; }

/* Card middle note column */
.co-note { font-size: 11px; color: var(--text3); font-style: italic; font-family: var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding: 0 8px; }
@media(max-width: 899px) { .co-note { display: none; } }

/* ── Panel trend line ── */
.panel-trend { margin-top: 10px; font-size: 11px; color: var(--text3); font-family: var(--font-mono); line-height: 1.5; }
.panel-trend.no-change { opacity: 0.5; }
.pt-arrow { font-size: 12px; }
.pt-arrow.up { color: #4ade80; }
.pt-arrow.dn { color: #f87171; }
.pt-val { font-weight: 600; color: var(--text2); }

/* ── Custom tooltip on [data-tip] ── */
[data-tip] { position: relative; cursor: default; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1e2235; border: 1px solid var(--border2); color: var(--text);
  font-size: 10px; font-family: var(--font-mono); white-space: nowrap;
  padding: 6px 10px; border-radius: 4px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7);
  letter-spacing: 0.04em;
}
[data-tip]:hover::after { opacity: 1; }

/* Scroll highlight flash */
@keyframes scrollFlash {
  0%   { border-color: #6c8aff; box-shadow: 0 0 0 2px #6c8aff44; }
  60%  { border-color: #6c8aff; box-shadow: 0 0 0 2px #6c8aff22; }
  100% { border-color: var(--border); box-shadow: none; }
}
.scroll-highlight { animation: scrollFlash 1.2s ease forwards; }

/* ── Sector select ───────────────────────────────────────────────────── */
.sector-select {
  appearance: none; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text2); font-family: var(--font-mono); font-size: 9px;
  padding: 5px 10px; border-radius: 3px; cursor: pointer; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sector-select:focus { outline: none; border-color: var(--accent); }
.sector-select option { background: var(--surface2); }

/* ── Band count badge ────────────────────────────────────────────────── */
.band-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; opacity: 0.8; padding-right: 4px;
}

/* ── Keyboard shortcuts overlay ──────────────────────────────────────── */
#shortcuts-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 10000;
}
.shortcuts-box {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 8px; padding: 24px; min-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.shortcuts-title {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  color: var(--text3); margin-bottom: 14px; text-transform: uppercase;
}
.shortcut-row {
  display: flex; align-items: center; gap: 16px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
}
.shortcut-row:last-of-type { border-bottom: none; }
kbd {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 3px; padding: 2px 8px; font-family: var(--font-mono);
  font-size: 9px; color: var(--text); min-width: 60px; text-align: center;
  display: inline-block;
}

/* ── Co-name permalink hover ─────────────────────────────────────────── */
.co-name:hover { opacity: 0.8; }


/* ── Tooltip upward variant (for bottom-of-page elements) ─────────────── */
[data-tip-up]::after {
  top: auto;
  bottom: calc(100% + 6px);
}

/* ── Legend active filter state ──────────────────────────────────────── */
.band-row.legend-active  { outline: 2px solid; outline-offset: -2px; filter: brightness(1.15); }
.threat-chip.legend-active { outline: 2px solid red; outline-offset: 2px; }
.band-row { transition: opacity 0.15s; }
.band-row:hover { opacity: 0.85; }
.threat-chip { transition: opacity 0.15s; }
.threat-chip:hover { opacity: 0.85; }

/* Sidebar legends */
.sidebar-legends { padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sidebar-legend-section { margin-bottom: 12px; }
.sidebar-legend-section:last-child { margin-bottom: 0; }
.sidebar-legends .leg-title { margin-bottom: 6px; }
.sidebar-legends .band-row { padding: 5px 8px; font-size: 10px; }
.sidebar-legends .band-range { font-size: 9px; min-width: 32px; }
.sidebar-legends .band-lbl { font-size: 10px; min-width: 60px; }
.sidebar-legends .band-desc { font-size: 9px; flex: 1; }
.sidebar-legends .band-count { font-size: 9px; font-weight: 700; }
.sidebar-legends .threat-chip { font-size: 9px; padding: 2px 6px; }
@media(max-width: 899px) { .sidebar-legends { display: none; } }

/* ── Sparkline in dedicated column ───────────────────────────────────── */
.co-spark-wrap { display: flex; align-items: center; justify-content: center; width: 64px; visibility: hidden; }
.co-spark-wrap > div { position: relative; }

/* ── Compare modal redesign (radar) ─────────────────────────────────── */
.cmp-modal  { background:var(--surface); border:1px solid var(--border2); border-radius:8px;
              width:min(820px,96vw); max-height:90vh; overflow-y:auto; display:flex; flex-direction:column;
              touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cmp-header { display:flex; align-items:center; justify-content:space-between;
              padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cmp-title  { font-family:var(--font-mono); font-size:11px; letter-spacing:0.15em;
              text-transform:uppercase; color:var(--text2); }
.cmp-close  { background:none; border:1px solid var(--border2); color:var(--text2);
              font-size:14px; width:28px; height:28px; border-radius:4px; cursor:pointer;
              display:flex; align-items:center; justify-content:center; }
.cmp-close:hover { color:var(--text); border-color:var(--text2); }
.cmp-body   { padding:20px; display:flex; flex-direction:column; gap:20px; }

/* top section: radar + cards */
.cmp-top    { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
.cmp-radar  { flex-shrink:0; background:var(--bg); border:1px solid var(--border);
              border-radius:6px; padding:8px; line-height:0; overflow:visible; }
.cmp-cards  { flex:1; display:flex; flex-direction:column; gap:10px; min-width:180px; }
.cmp-card   { border:1px solid; border-radius:6px; padding:12px 14px; background:var(--bg); }
.cmp-card-name { font-family:var(--font-mono); font-size:13px; font-weight:700; margin-bottom:2px; }
.cmp-card-meta { font-family:var(--font-mono); font-size:9px; color:var(--text3);
                 letter-spacing:0.05em; margin-bottom:8px; }
.cmp-card-score { font-family:var(--font-mono); font-size:32px; font-weight:800;
                  line-height:1; margin-bottom:8px; }
.cmp-denom  { font-size:13px; font-weight:400; color:var(--text3); }

/* dimension table */
.cmp-dim-table { border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.cmp-dim-header { display:flex; background:var(--surface2); padding:8px 12px;
                  font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; gap:8px; }
.cmp-dh-label   { flex:1; color:var(--text3); text-transform:uppercase; }
.cmp-dh-co      { width:130px; text-align:right; font-weight:700; font-size:9px; white-space:nowrap;
                  overflow:hidden; text-overflow:ellipsis; }
.cmp-dim-row    { display:flex; align-items:center; padding:8px 12px; gap:8px;
                  border-top:1px solid var(--border); }
.cmp-dim-row:first-child { border-top:none; }
.cmp-dim-label  { flex:1; font-family:var(--font-mono); font-size:9px; color:var(--text2);
                  letter-spacing:0.04em; }
.cmp-dim-cell   { width:130px; display:flex; align-items:center; gap:6px; }
.cmp-bar-track  { flex:1; height:5px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.cmp-bar-fill   { height:100%; border-radius:2px; transition:width 0.3s; }
.cmp-bar-val    { font-family:var(--font-mono); font-size:9px; color:var(--text2); min-width:20px; text-align:right; }

/* summaries */
.cmp-summaries     { display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; }
.cmp-summary-card  { flex:1; min-width:200px; background:var(--bg); border:1px solid var(--border);
                     border-radius:6px; padding:12px; }
.cmp-summary-name  { font-family:var(--font-mono); font-size:9px; font-weight:700;
                     letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.cmp-summary-text  { font-family:var(--font-mono); font-size:9px; color:var(--text2);
                     line-height:1.6; }

/* ── Light terminal-green theme ──────────────────────────────────────── */
html[data-theme="light"] {
  --bg:       #f2f7f2;
  --surface:  #e4ede4;
  --surface2: #d4e6d4;
  --border:   #b0ccb0;
  --border2:  #80aa80;
  --text:     #0a1f0a;
  --text2:    #1e4a1e;
  --text3:    #3d7a3d;
  --text4:    #6b9b6b;
  --accent:   #1a7a1a;
}
html[data-theme="light"] body { background: var(--bg); }

/* Tooltip in light mode */
html[data-theme="light"] [data-tip]::after {
  background: #d4e6d4;
  border-color: var(--border2);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Compare overlay backdrop in light mode */
html[data-theme="light"] #compare-overlay { background: rgba(10,31,10,0.55); }

/* Compare modal radar bg in light mode */
html[data-theme="light"] .cmp-radar { background: var(--surface); }

/* Theme toggle button */
.theme-toggle {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 20px; padding: 5px 10px 5px 7px;
  cursor: pointer; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3);
  transition: all 0.2s; align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--text3); color: var(--text); }
.theme-toggle-track {
  width: 28px; height: 15px; background: var(--border2);
  border-radius: 8px; position: relative; flex-shrink: 0;
  transition: background 0.2s;
}
html[data-theme="light"] .theme-toggle-track { background: var(--accent); }
.theme-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); transition: transform 0.2s;
}
html[data-theme="light"] .theme-toggle-thumb { transform: translateX(13px); background: #fff; }
html[data-theme="light"] .theme-toggle {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
html[data-theme="light"] .theme-toggle:hover {
  background: var(--surface);
  border-color: var(--text2);
  color: var(--text2);
}
html[data-theme="light"] .theme-toggle-track {
  background: var(--accent);
  border: 1px solid var(--accent);
}
.theme-toggle-label { line-height: 1; }

/* Light mode: score number — remove brightness boost, darken instead */
html[data-theme="light"] .co-pie-num { filter: brightness(0.55); font-weight: 900; }

/* Light mode: badge/card colors handled by JS TC_LIGHT */

/* Band scale description text — same as dark mode */
html[data-theme="light"] .band-desc  { color: #556070; }
html[data-theme="light"] .band-row   { color: #556070; }

/* Light mode: note text visible */
html[data-theme="light"] .co-note { color: var(--text2); }

/* Light mode: trend arrows readable */
html[data-theme="light"] .trend.up { color: #1a7a1a; }
html[data-theme="light"] .trend.dn { color: #c0392b; }
html[data-theme="light"] .trend-pts { opacity: 1; }

/* Light mode: panel text */
html[data-theme="light"] .co-summary { color: var(--text); }
html[data-theme="light"] .dim-label  { color: var(--text2); }
html[data-theme="light"] .dim-val    { color: var(--text); }

/* ── Data source badge ───────────────────────────────────────────────── */
.data-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 8px; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.3px; cursor: default; }
.data-badge.sec { background: #0d2d17; color: #4ade80; border: 1px solid #1a4d2a; }
.data-badge.gen { background: #1a1a2e; color: #8b949e; border: 1px solid #30363d; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (<900px)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide mobile UI on desktop */
.mob-header, .mob-footer { display: none; }

@media(max-width: 899px) {

  /* Hide the full sidebar on mobile */
  .sidebar { display: none; }

  /* Show mobile header + footer */
  .mob-header { display: block; }
  .mob-footer  { display: flex; }

  /* Shell becomes single column */
  .shell { display: block; }

  /* Main gets padding-bottom so footer (44px) + tray (48px) don't cover content */
  .main { padding-bottom: 56px; }
  .main.has-tray { padding-bottom: 110px; }

  /* ── Mobile header ─────────────────────────────────── */
  .mob-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg);
    padding: 8px 12px 0;
    width: 100%; max-width: 100%; box-sizing: border-box;
  }
  .mob-header-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px 10px;
    margin-bottom: 8px;
  }

  /* Brand row */
  .mob-brand {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px;
  }
  .mob-eyebrow {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em;
    color: var(--text3); text-transform: uppercase; margin-bottom: 3px;
  }
  .mob-logo {
    font-family: var(--font-display); font-size: 16px; line-height: 1.2;
    color: var(--text);
  }
  .mob-logo em { color: var(--text3); font-style: italic; }

  .mob-stats { display: flex; gap: 14px; flex-shrink: 0; padding-top: 0; align-items: flex-end; padding-bottom: 2px; }
  .mob-stat  { display: flex; flex-direction: column; align-items: center; }
  .mob-stat-num {
    font-family: var(--font-mono); font-size: 17px; font-weight: 600;
    color: var(--accent); line-height: 1.15;
  }
  .mob-stat-lbl {
    font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em;
    color: var(--text3); text-transform: uppercase; margin-top: 2px; line-height: 1.2;
  }

  /* Search row */
  .mob-search-row {
    display: flex; gap: 6px; margin-bottom: 6px; position: relative;
  }
  .mob-search-input {
    flex: 1; background: var(--bg); border: 1px solid var(--border2);
    border-radius: var(--radius); color: var(--text); font-family: var(--font-body);
    font-size: 16px; padding: 9px 11px; outline: none; min-width: 0; min-height: 44px;
    -webkit-appearance: none;
  }
  .mob-search-input::placeholder { color: var(--text3); }
  .mob-search-input:focus { border-color: var(--text2); }
  .mob-btn-analyze {
    background: var(--text); color: var(--bg); border: none;
    border-radius: var(--radius); padding: 9px 14px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; cursor: pointer; white-space: nowrap; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    min-height: 44px; transition: background 0.1s;
    position: relative; z-index: 999;
  }
  .mob-btn-analyze:active { background: #4ade80 !important; color: #000 !important; }

  /* Analyzing indicator for mobile */
  .mob-analyzing { display: none; align-items: center; gap: 8px; margin-bottom: 4px; }
  .mob-analyzing.show { display: flex; }

  /* Pill controls — horizontal scroll */
  .mob-controls {
    display: flex; gap: 5px; overflow-x: auto;
    padding: 6px 12px 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mob-controls::-webkit-scrollbar { display: none; }

  .mob-pill {
    padding: 5px 10px; background: transparent; border: 1px solid var(--border);
    color: var(--text3); border-radius: 3px; cursor: pointer;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: all 0.1s;
  }
  .mob-pill.active {
    background: var(--surface2); border-color: var(--border2); color: var(--text);
  }
  .mob-divider {
    width: 1px; background: var(--border2); flex-shrink: 0; margin: 4px 2px;
  }

  /* ── Mobile footer ─────────────────────────────────── */
  /* Compare modal on mobile: needs gap at bottom for tray */
  #compare-overlay { align-items: flex-start; }
  .cmp-modal { margin-bottom: 100px; }

  .mob-footer {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 10px 16px;
    align-items: center; justify-content: space-between;
    height: 44px;
  }
  .mob-footer-copy {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em;
    color: var(--text4);
  }
  .mob-footer-links { display: flex; gap: 12px; }
  .mob-footer-link {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text3); text-decoration: none;
  }
  .mob-footer-link:hover { color: var(--accent); }
  .mob-theme-btn {
    background: none; border: 1px solid var(--border2); color: var(--text3);
    border-radius: 4px; width: 26px; height: 26px; cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-theme-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Light mode mobile */
  html[data-theme="light"] .mob-theme-btn { color: var(--accent); border-color: var(--accent); }
}

/* ── Mobile compare dot ────────────────────────────────────────────────── */
.mob-cmp-dot {
  display: none; /* hidden on desktop */
}
@media(max-width: 899px) {
  .mob-cmp-dot {
    display: flex; order: 0; /* before rank */
    font-size: 13px; width: 18px; flex-shrink: 0;
    color: var(--border2); transition: color 0.15s, transform 0.15s;
    user-select: none; pointer-events: none;
  }
  .mob-cmp-dot.active {
    color: var(--accent);
    transform: scale(1.2);
  }
  /* Row glow when selected for compare */
  .co-row.co-row-compare {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
  }
  /* Long-press hint toast */
  .mob-cmp-toast {
    position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
    background: var(--surface2); border: 1px solid var(--border2);
    border-radius: 20px; padding: 7px 16px;
    font-family: var(--font-mono); font-size: 10px; color: var(--text2);
    letter-spacing: 0.08em; white-space: nowrap;
    opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 200;
  }
  .mob-cmp-toast.show { opacity: 1; }
}

/* ── Floating compare button (mobile only) ─────────────────────────────── */
.mob-cmp-fab {
  display: none;
}
@media(max-width: 899px) {
  .mob-cmp-fab {
    position: fixed; bottom: 54px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 24px;
    padding: 10px 22px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; cursor: pointer;
    box-shadow: 0 4px 20px rgba(108,138,255,0.45);
    z-index: 150;
    animation: fabIn 0.2s ease;
  }
  .mob-cmp-fab-icon { font-size: 15px; line-height: 1; }
  @keyframes fabIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
}

/* ── GDPR Banner ─────────────────────────────────────────────────────── */
#gdpr-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
  background: var(--surface); border-top: 1px solid var(--border2);
  padding: 14px 20px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
}
.gdpr-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap;
}
.gdpr-text {
  font-size: 11px; color: var(--text2); line-height: 1.6; flex: 1; min-width: 200px;
}
.gdpr-link { color: var(--accent); text-decoration: none; margin-left: 6px; }
.gdpr-link:hover { text-decoration: underline; }
.gdpr-btns { display: flex; gap: 8px; flex-shrink: 0; }
.gdpr-btn {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 8px 16px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid var(--border2); transition: all 0.15s;
}
.gdpr-accept {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.gdpr-accept:hover { opacity: 0.85; }
.gdpr-decline {
  background: transparent; color: var(--text3); border-color: var(--border);
}
.gdpr-decline:hover { color: var(--text); border-color: var(--text3); }
@media(max-width: 899px) {
  #gdpr-banner { padding: 12px 14px; bottom: 44px; }
  .gdpr-inner { gap: 10px; }
  .gdpr-text { font-size: 10px; }
}