/* =============================================================
   Laptop Battle Royale — Razer-inspired UI
   Pure black canvas · neon green (#44d62c) accents · sharp angular
   geometry · subtle animated grid · corner-bracket card accents ·
   chroma RGB pulse on selected/winner items.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Razer-derived palette */
  --bg:#000;
  --bg-2:#070708;
  --panel:#0c0c0e;
  --panel-2:#121215;
  --line:#1a1a1e;
  --line-2:#26262c;

  --accent:#44d62c;       /* Razer Snake green */
  --accent-glow:#7bff52;
  --accent-dim:#1f6c12;
  --accent2:#00e1ff;      /* Cool cyan secondary */

  --win:#44d62c;
  --lose:#ff2a4d;

  --text:#f5f7f5;
  --muted:#7a7d80;

  /* Tier colors: clean cool-bright → warm-dim spectrum so visual rank
     always matches the letter rank (S best → D worst). */
  --tier-s-a:#44d62c; --tier-s-b:#7bff52;   /* S: neon green gradient   */
  --tier-a:#00e1ff;                          /* A: bright cyan           */
  --tier-b:#5fd6a8;                          /* B: dim seafoam (cool)    */
  --tier-c:#ffb020;                          /* C: warm amber            */
  --tier-d:#ff3a5c;                          /* D: hot red (worst)       */
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 1200px 700px at 80% -10%, rgba(68,214,44,.08), transparent 60%),
    radial-gradient(ellipse 900px 600px at -10% 30%, rgba(0,225,255,.05), transparent 70%),
    linear-gradient(180deg,#000 0%,#050507 100%);
}
/* Animated grid + scanlines layer (pure CSS, GPU-friendly) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(68,214,44,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,214,44,.025) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 85%);
  animation:gridDrift 30s linear infinite;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.012) 0 1px,
    transparent 1px 3px);
}
@keyframes gridDrift{
  from{background-position:0 0,0 0}
  to{background-position:48px 48px,48px 48px}
}


a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-glow)}
button{font-family:'Rajdhani','Inter',sans-serif;cursor:pointer;letter-spacing:.5px}

/* Custom scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-dim),var(--accent));border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--accent-glow)}

/* Selection */
::selection{background:var(--accent);color:#000}

/* =============================================================
   NAV
   ============================================================= */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  padding:14px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
nav::after{ /* glowing scanline under nav */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.6;
  animation:scanline 6s linear infinite;
}
@keyframes scanline{
  0%{transform:translateX(-100%);opacity:0}
  10%,90%{opacity:.7}
  100%{transform:translateX(100%);opacity:0}
}

nav .brand{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:1.25rem;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--text);
  position:relative;padding-left:14px;
}
nav .brand::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:18px;background:var(--accent);
  box-shadow:0 0 10px var(--accent),0 0 20px var(--accent);
  animation:brandPulse 2.4s ease-in-out infinite;
}
@keyframes brandPulse{
  0%,100%{opacity:1;box-shadow:0 0 10px var(--accent),0 0 20px var(--accent)}
  50%{opacity:.55;box-shadow:0 0 4px var(--accent)}
}
nav .links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav button{
  background:transparent;border:1px solid transparent;color:var(--muted);
  padding:9px 16px;border-radius:0;font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:1.4px;
  position:relative;transition:color .18s, background .18s;
  display:inline-flex;align-items:center;gap:6px;
}
nav button::before{
  content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:var(--accent);transition:width .25s, left .25s;
  box-shadow:0 0 8px var(--accent);
}
nav button:hover{color:var(--text)}
nav button:hover::before{width:100%;left:0}
nav button.active{color:var(--accent);background:rgba(68,214,44,.06)}
nav button.active::before{width:100%;left:0}

.badge{
  background:var(--accent);color:#000;border-radius:0;
  padding:1px 7px;font-size:.7rem;font-weight:800;min-width:18px;text-align:center;
  font-family:'Rajdhani',sans-serif;letter-spacing:1px;
}

/* =============================================================
   PAGE / TYPE
   ============================================================= */
.page{padding:32px 28px 80px;max-width:1440px;margin:0 auto;display:none;position:relative;z-index:1}
.page.active{display:block;animation:pageIn .35s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

h1{
  font-family:'Rajdhani',sans-serif;
  font-size:2.6rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  margin:0 0 4px;
  background:linear-gradient(90deg,#fff 0%,var(--accent) 60%,#fff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}
.subtitle{color:var(--muted);margin-bottom:22px;font-size:.92rem;letter-spacing:.4px}

/* =============================================================
   MODE BANNER + BUTTONS
   ============================================================= */
.mode-banner{
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--line);
  padding:14px 18px;margin-bottom:22px;flex-wrap:wrap;
  position:relative;
}
.mode-banner::before,.mode-banner::after{
  content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);
}
.mode-banner::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.mode-banner::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.mode-banner .grow{flex:1}
.selected-counter{color:var(--muted);font-size:.85rem;letter-spacing:.5px;text-transform:uppercase}
.selected-counter b{color:var(--accent);font-family:'Rajdhani',sans-serif;font-size:1.1rem}

.btn{
  background:var(--accent);color:#000;border:none;
  padding:10px 18px;border-radius:0;
  font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.86rem;letter-spacing:1.6px;
  text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:transform .15s, box-shadow .15s, background .15s;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 20px rgba(68,214,44,.55);background:var(--accent-glow)}
.btn:active{transform:translateY(0)}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-25deg);transition:left .55s;
}
.btn:hover::after{left:130%}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--line-2);
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.btn.ghost:hover{background:rgba(68,214,44,.08);border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn.cyan{background:var(--accent2);color:#001418}
.btn.cyan:hover{background:#33ebff;box-shadow:0 0 20px rgba(0,225,255,.55)}
.btn:disabled{opacity:.32;cursor:not-allowed;filter:grayscale(.5)}
.btn:disabled:hover{transform:none;box-shadow:none;background:var(--accent)}

/* =============================================================
   TOOLBAR / INPUTS
   ============================================================= */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.toolbar input[type=text],.toolbar select,
.field input,.field select,.field textarea{
  background:var(--panel);border:1px solid var(--line-2);color:var(--text);
  padding:10px 14px;border-radius:0;font-size:.88rem;font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.toolbar input[type=text]{min-width:240px;flex:1}
.toolbar input[type=text]:focus,.toolbar select:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(68,214,44,.25);
}

/* =============================================================
   CARD GRID
   ============================================================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:0;padding:18px 16px 16px;
  transition:transform .18s, border-color .18s, box-shadow .18s, background .18s;
  cursor:pointer;overflow:hidden;
  animation:cardIn .35s ease-out backwards;
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.grid > .card:nth-child(n) { animation-delay: calc((var(--i,0)) * 22ms); }

/* corner brackets that grow on hover */
.card::before,.card::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border:1.5px solid var(--accent);opacity:0;transition:opacity .2s, width .25s, height .25s;
}
.card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,225,255,.55);
  background:var(--panel-2);
  box-shadow:
    0 10px 36px rgba(0,0,0,.7),
    0 0 0 1px rgba(0,225,255,.25),
    0 0 28px rgba(0,225,255,.18),
    inset 0 1px 0 rgba(0,225,255,.08);
}
.card:hover::before,.card:hover::after{opacity:1;width:18px;height:18px;border-color:var(--accent2)}

.card.selected{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(68,214,44,.10), rgba(68,214,44,.02));
  box-shadow:0 0 0 1px var(--accent), 0 0 30px rgba(68,214,44,.35);
  animation:cardIn .35s ease-out backwards, chromaPulse 4s ease-in-out infinite 1s;
}
.card.selected::before,.card.selected::after{opacity:1;width:20px;height:20px;border-color:var(--accent-glow)}
.card.selected .top-row{visibility:hidden}
.card.selected .tier-badge{display:none}
/* RGB chroma pulse — subtle hue cycling, never garish */
@keyframes chromaPulse{
  0%,100%{box-shadow:0 0 0 1px var(--accent),0 0 30px rgba(68,214,44,.35)}
  33%   {box-shadow:0 0 0 1px var(--accent2),0 0 30px rgba(0,225,255,.30)}
  66%   {box-shadow:0 0 0 1px #ff2adf,0 0 30px rgba(255,42,223,.25)}
}
/* "PICKED" ribbon when selected */
.card.selected::before{ /* override bracket -> badge */
  content:"PICKED";
  width:auto;height:auto;border:none;
  top:10px;left:auto;right:10px;
  padding:3px 10px;
  background:var(--accent);color:#000;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:2px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  opacity:1;
}
.card.selected::after{opacity:1;width:24px;height:24px;border-color:var(--accent-glow)}

.card .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.card .brand-tag{
  font-family:'Rajdhani',sans-serif;
  font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:2.5px;font-weight:600;
}
.card .tier-badge{
  font-family:'Rajdhani',sans-serif;
  font-weight:800;font-size:.78rem;padding:3px 9px;border-radius:0;color:#000;letter-spacing:1px;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.card .name{font-weight:700;font-size:1.02rem;margin-bottom:4px;line-height:1.25;color:var(--text)}
.card .desc{color:var(--muted);font-size:.78rem;margin-bottom:10px;line-height:1.4;min-height:34px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:.78rem;margin-bottom:10px}
.specs .k{color:var(--muted);text-transform:uppercase;font-size:.7rem;letter-spacing:.6px}
.specs .v{color:var(--text);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stat-strip{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0;font-size:.72rem;color:var(--muted);font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.5px}
.stat-strip span{
  background:#000;border:1px solid var(--line-2);padding:3px 7px;border-radius:0;
  transition:border-color .15s, color .15s;
}
.card:hover .stat-strip span{border-color:rgba(68,214,44,.3)}
.stat-strip span.total{
  background:rgba(68,214,44,.08);border-color:var(--accent);color:var(--accent);
  margin-left:auto;text-shadow:0 0 8px rgba(68,214,44,.6);
}

.price-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:11px;margin-top:8px;gap:8px}
.price{color:var(--accent);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.5px}
.links{display:flex;gap:6px;flex-wrap:wrap}
.links a{
  font-size:.7rem;background:transparent;border:1px solid var(--line-2);
  padding:4px 9px;border-radius:0;color:var(--muted);
  font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  transition:.15s;
}
.links a:hover{border-color:var(--accent);color:var(--accent);background:rgba(68,214,44,.08)}
.actions{display:flex;gap:6px;margin-top:10px;align-items:center}
.heart{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  padding:6px 9px;border-radius:0;font-size:.85rem;line-height:1;transition:.15s;
}
.heart:hover{border-color:#ff2a4d;color:#ff2a4d;box-shadow:0 0 10px rgba(255,42,77,.3)}
.heart.on{background:rgba(255,42,77,.08);border-color:#ff2a4d;color:#ff2a4d}
.icon-btn{background:transparent;border:1px solid var(--line-2);color:var(--muted);padding:6px 9px;border-radius:0;font-size:.7rem;line-height:1}
.icon-btn:hover{color:var(--lose);border-color:#5a1620}
.custom-tag{
  background:transparent;border:1px solid var(--accent);color:var(--accent);
  padding:1px 7px;border-radius:0;font-size:.65rem;font-weight:700;letter-spacing:1px;margin-left:6px;
  font-family:'Rajdhani',sans-serif;text-transform:uppercase;
}
.wl-mark{color:var(--lose);font-size:.85em;margin-left:6px;text-shadow:0 0 6px rgba(255,42,77,.45)}

/* === Find-Similar / Beat-It action buttons on shop cards === */
.icon-btn.act{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  padding:5px 8px;border-radius:0;font-size:.62rem;line-height:1;
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;transition:all .15s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.icon-btn.act:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px rgba(68,214,44,.25)}

/* === LLM model-fit chips (AI Rank page) === */
.model-fits{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.fit{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.5px;
  padding:2px 7px;border-radius:0;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.fit.ok{background:rgba(68,214,44,.10);border:1px solid rgba(68,214,44,.55);color:var(--accent-glow)}
.fit.no{background:rgba(255,58,92,.06); border:1px solid rgba(255,58,92,.40); color:var(--lose);opacity:.7}

/* === Radar chart on comparison page === */
#compare-radar:empty{display:none}
.radar-wrap{
  margin:18px 0;padding:18px;
  background:linear-gradient(180deg,#06080a 0%,#02060a 100%);
  border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.radar-svg{display:block;max-width:520px;width:100%;height:auto}
.radar-ring{fill:none;stroke:rgba(68,214,44,.10);stroke-width:1}
.radar-ring:nth-child(4){stroke:rgba(68,214,44,.22)}   /* outer ring brighter */
.radar-spoke{stroke:rgba(255,255,255,.06);stroke-width:1}
.radar-label{
  fill:var(--muted);font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
}
.radar-poly{fill-opacity:.18;stroke-width:2;filter:drop-shadow(0 0 6px currentColor)}
.radar-legend{display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.rl-item{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.rl-sw{
  width:14px;height:14px;display:inline-block;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  box-shadow:0 0 8px currentColor;
}
@media (max-width:760px){
  .radar-wrap{grid-template-columns:1fr}
}

/* Tier badge colors */
.tier-S{background:linear-gradient(135deg,var(--tier-s-a),var(--tier-s-b));color:#000}
.tier-A{background:var(--tier-a);color:#001418}
.tier-B{background:var(--tier-b);color:#0f0028}
.tier-C{background:var(--tier-c);color:#221400}
.tier-D{background:var(--tier-d);color:#280008}
.tier-F{background:var(--tier-d);color:#280008}

.empty{
  text-align:center;padding:70px 20px;color:var(--muted);
  background:var(--panel);border:1px dashed var(--line-2);
  grid-column:1/-1;
}
.empty h3{color:var(--text);margin:0 0 6px;font-family:'Rajdhani',sans-serif;letter-spacing:2px;text-transform:uppercase}

/* =============================================================
   COMPARISON VIEW
   ============================================================= */
.compare-podium{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.compare-podium .pod{
  background:var(--panel);border:1px solid var(--line);padding:14px 16px;
  position:relative;overflow:hidden;
  animation:cardIn .4s ease-out backwards;
}
.compare-podium .pod:nth-child(2){animation-delay:.05s}
.compare-podium .pod:nth-child(3){animation-delay:.1s}
.compare-podium .pod:nth-child(n+4){animation-delay:.15s}
.compare-podium .pod::before,.compare-podium .pod::after{
  content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--line-2);
}
.compare-podium .pod::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.compare-podium .pod::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.compare-podium .pod.win{border-color:var(--accent);box-shadow:0 0 24px rgba(68,214,44,.3)}
.compare-podium .pod.win::before,.compare-podium .pod.win::after{border-color:var(--accent)}
.compare-podium .pod.win{animation:cardIn .4s ease-out backwards, chromaPulse 5s ease-in-out infinite 1s}
.compare-podium .pod.last{border-color:var(--lose);opacity:.85}
.compare-podium .pod.last::before,.compare-podium .pod.last::after{border-color:var(--lose)}
.compare-podium .pod .rk{
  position:absolute;top:10px;right:12px;font-family:'Rajdhani',sans-serif;
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:1.5px;
}
.compare-podium .pod .pname{font-weight:700;font-size:.95rem;margin:2px 0 4px;line-height:1.25;padding-right:36px}
.compare-podium .pod .pmeta{color:var(--muted);font-size:.74rem;margin-bottom:8px;letter-spacing:.4px}
.compare-podium .pod .pscore{font-family:'Rajdhani',sans-serif;font-size:1.7rem;font-weight:700;color:var(--accent);text-shadow:0 0 14px rgba(68,214,44,.4)}
.compare-podium .pod .ptier{display:inline-block;padding:2px 8px;border-radius:0;color:#000;font-weight:800;font-size:.72rem;margin-left:8px;letter-spacing:1px;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}

.compare-table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
.compare-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:600px}
.compare-table th,.compare-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.compare-table th{
  background:#000;color:var(--muted);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:1.5px;
  position:sticky;top:0;z-index:1;border-bottom:1px solid var(--accent);
}
.compare-table th:first-child,.compare-table td:first-child{
  position:sticky;left:0;background:var(--panel);border-right:1px solid var(--line);
  font-weight:700;color:var(--text);min-width:140px;
}
.compare-table th:first-child{background:#000}
.compare-table tr.section td{
  background:#000;color:var(--accent);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;padding:8px 12px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--accent);
}
.compare-table td.best{background:rgba(68,214,44,.10);color:var(--accent);font-weight:700}
.compare-table td.worst{background:rgba(255,42,77,.10);color:var(--lose)}
.compare-table td.score-cell{font-weight:700;font-family:'Rajdhani',sans-serif}
.compare-table tr.totals td{
  border-top:2px solid var(--accent);background:#000;
  font-family:'Rajdhani',sans-serif;font-size:1.05rem;padding:12px;letter-spacing:.5px;
}
.compare-table tr.totals td.best{background:rgba(68,214,44,.18);color:var(--accent);text-shadow:0 0 12px rgba(68,214,44,.4)}
.compare-table tr.totals td.worst{background:rgba(255,42,77,.15);color:var(--lose)}

/* =============================================================
   TIER LIST / RECOMMEND / AI RANK ROWS
   ============================================================= */
.tier-row{
  display:grid;grid-template-columns:50px 70px 1fr 140px;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);padding:14px 18px;margin-bottom:8px;
  transition:.15s;position:relative;overflow:hidden;
  animation:cardIn .25s ease-out backwards;
  animation-delay:calc(var(--row-i,0) * 20ms);
}
.tier-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .25s;
}
.tier-row:hover{
  border-color:rgba(68,214,44,.4);transform:translateX(6px);
  background:var(--panel-2);
}
.tier-row:hover::before{transform:scaleY(1)}
.tier-row .rank{
  color:var(--muted);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:1px;
}
.tier-row .grade{
  font-family:'Rajdhani',sans-serif;
  font-weight:800;text-align:center;padding:7px 0;border-radius:0;color:#000;font-size:1rem;letter-spacing:1.5px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.tier-row .info .nm{font-weight:700;font-size:.96rem}
.tier-row .info .why{color:var(--muted);font-size:.78rem;margin-top:3px;letter-spacing:.3px}
.tier-row .score{
  text-align:right;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:1.4rem;color:var(--accent);text-shadow:0 0 10px rgba(68,214,44,.35);
  line-height:1;
}
.tier-row .score-cell{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.tier-row .score-bar{
  height:5px;background:#000;border:1px solid var(--line-2);position:relative;overflow:hidden;
}
.tier-row .sb-fill{
  position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  box-shadow:0 0 8px rgba(68,214,44,.35);
  animation:fillIn .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--row-i,0) * 20ms + 120ms);
}

/* =============================================================
   FORM
   ============================================================= */
.form-card{background:var(--panel);border:1px solid var(--line);padding:28px;max-width:780px;position:relative}
.form-card::before,.form-card::after{
  content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--accent);
}
.form-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.form-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{
  font-family:'Rajdhani',sans-serif;
  font-size:.74rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1.5px;
}
.form-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.rec-formula{color:var(--muted);font-size:.78rem;margin-left:8px;align-self:center;flex:1;min-width:200px;letter-spacing:.3px}

/* =============================================================
   VALUE CALCULATOR
   ============================================================= */
.value-card{
  background:var(--panel);border:1px solid var(--line);
  padding:24px 24px 22px;margin-top:6px;position:relative;
  animation:cardIn .35s ease-out backwards;
}
.value-card::before,.value-card::after{
  content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--accent);
}
.value-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.value-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.value-card.steal{border-color:var(--accent);box-shadow:0 0 28px rgba(68,214,44,.22)}
.value-card.steal::before,.value-card.steal::after{border-color:var(--accent-glow)}
.value-card.ripoff{border-color:var(--lose)}
.value-card.ripoff::before,.value-card.ripoff::after{border-color:var(--lose)}

.value-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.value-head .vname{font-weight:700;font-size:1.15rem}
.value-head .vmeta{color:var(--muted);font-size:.82rem}

.verdict{
  display:inline-block;padding:8px 16px;
  font-family:'Rajdhani',sans-serif;font-weight:800;
  font-size:1.05rem;letter-spacing:2px;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  background:var(--accent);color:#000;
}
.verdict.steal{background:var(--accent);color:#000;text-shadow:none}
.verdict.fair{background:var(--accent2);color:#001418}
.verdict.over{background:#ffb020;color:#221400}
.verdict.ripoff{background:var(--lose);color:#280008}

.value-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;margin:16px 0 18px;
}
.value-stat{
  background:#000;border:1px solid var(--line-2);padding:12px 14px;
  position:relative;
}
.value-stat .k{
  font-family:'Rajdhani',sans-serif;font-size:.7rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;
}
.value-stat .v{
  font-family:'Rajdhani',sans-serif;font-size:1.45rem;font-weight:700;color:var(--text);
}
.value-stat.good .v{color:var(--accent);text-shadow:0 0 10px rgba(68,214,44,.35)}
.value-stat.bad .v{color:var(--lose)}

.value-bar-wrap{margin:18px 0 10px}
.value-bar-label{
  display:flex;justify-content:space-between;
  font-family:'Rajdhani',sans-serif;font-size:.78rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;
}
.value-bar{
  position:relative;height:18px;background:#000;border:1px solid var(--line-2);
  overflow:hidden;
}
.value-bar .fill{
  position:absolute;top:0;bottom:0;left:0;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  width:var(--w,0%);
  animation:fillIn 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fillIn{from{width:0}to{width:var(--w,0%)}}
.value-bar .marker{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);
  box-shadow:0 0 6px var(--text);
}
.value-bar.bad .fill{background:linear-gradient(90deg,#5a1620,var(--lose))}

.value-reasons{margin-top:14px}
.value-reasons h4{
  font-family:'Rajdhani',sans-serif;font-size:.82rem;
  color:var(--accent);text-transform:uppercase;letter-spacing:2px;
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line-2);
}
.value-reasons ul{list-style:none;padding:0;margin:0}
.value-reasons li{
  padding:7px 0 7px 22px;font-size:.88rem;color:var(--text);
  border-bottom:1px solid var(--line);position:relative;
}
.value-reasons li:last-child{border-bottom:none}
.value-reasons li::before{
  content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;
  background:var(--accent);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.value-reasons li.neg::before{background:var(--lose)}
.value-reasons li b{color:var(--accent);font-weight:700}
.value-reasons li.neg b{color:var(--lose)}

.value-peer-table{
  width:100%;border-collapse:collapse;font-size:.84rem;margin-top:10px;
  border:1px solid var(--line);
}
.value-peer-table th,.value-peer-table td{
  padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;
}
.value-peer-table th{
  background:#000;color:var(--muted);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;
}
.value-peer-table tr.me td{background:rgba(68,214,44,.08);color:var(--accent);font-weight:700}

.val-lowconf{
  background:rgba(255,176,32,.07);
  border:1px solid rgba(255,176,32,.45);
  color:#ffb020;
  padding:9px 14px;margin:6px 0 14px;
  font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}

/* =============================================================
   CHARTS PAGE — scatter plot + histograms
   ============================================================= */
.charts-section{
  background:var(--panel);border:1px solid var(--line);
  padding:18px 22px 22px;margin-bottom:22px;position:relative;
}
.charts-section::before,.charts-section::after{
  content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);opacity:.7;
}
.charts-section::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.charts-section::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.charts-section h3{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.charts-toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.charts-toolbar select{
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  padding:7px 12px;border-radius:0;font-size:.84rem;font-family:inherit;
}
.charts-hint{color:var(--muted);font-size:.78rem;letter-spacing:.4px}

.scatter-svg{display:block;width:100%;height:auto;max-height:520px;background:#000;border:1px solid var(--line)}
.sc-dot{transition:r .15s, fill-opacity .15s}
.sc-dot:hover{r:7;filter:drop-shadow(0 0 6px currentColor)}
.scatter-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:.82rem;color:var(--text)}
.scatter-legend .sc-lg{display:inline-flex;align-items:center;gap:6px;font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:.4px}
.scatter-legend .sw{
  width:12px;height:12px;display:inline-block;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  box-shadow:0 0 6px currentColor;
}

.hist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:10px}
.hist-cell{
  background:#000;border:1px solid var(--line);padding:12px 14px 10px;
  transition:border-color .15s;
}
.hist-cell:hover{border-color:rgba(68,214,44,.4)}
.hist-cell h4{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);
  margin:0 0 8px;
}
.hist-svg{display:block;width:100%;height:auto}
.hist-bar{cursor:pointer;transition:fill-opacity .15s, fill .15s}
.hist-bar:hover{fill:var(--accent-glow);fill-opacity:1 !important}

/* =============================================================
   COMPACT BATTLE-MODE TOGGLE (replaces the old large tabs)
   ============================================================= */
.bm-toggle{
  display:inline-flex;
  border:1px solid var(--line-2);
  background:#000;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  margin-right:6px;
  height:32px;
}
.bm-toggle .bm-tab{
  background:transparent;
  border:none;
  color:var(--muted);
  padding:0 14px;
  font-family:'Rajdhani',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.15s;
  display:inline-flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  /* Hide the big-tab inner spans (icon / label / sub) that no longer exist */
}
.bm-toggle .bm-tab:last-child{border-right:none}
.bm-toggle .bm-tab:hover{color:var(--text);background:rgba(68,214,44,.05)}
.bm-toggle .bm-tab.active{
  background:var(--accent);
  color:#000;
  text-shadow:none;
  box-shadow:inset 0 0 0 1px var(--accent),0 0 10px rgba(68,214,44,.35);
}
.bm-toggle .bm-tab.active .icon,
.bm-toggle .bm-tab.active .sub{color:#000}
/* Defensive: if old big-tab innards still render anywhere, hide them */
.bm-toggle .bm-tab .icon,
.bm-toggle .bm-tab .sub{display:none}

/* =============================================================
   POLISH PASS 2 — declutter + visual rhythm
   ============================================================= */

/* --- Spacing scale tokens --- */
:root{
  --space-xs:4px; --space-sm:8px; --space-md:14px;
  --space-lg:20px; --space-xl:32px;
}


/* --- Tighter typography hierarchy --- */
h1{
  font-size:1.85rem !important;
  margin-bottom:2px !important;
  letter-spacing:1.5px !important;
}
.subtitle{
  font-size:.82rem;
  margin-bottom:16px;
  max-width:760px;
  letter-spacing:.3px;
}
.page{padding:22px 24px 70px}

/* --- Remove chroma RGB pulse on selected cards; steady green glow only --- */
.card.selected{
  animation:cardIn .35s ease-out backwards !important;
}
.card.selected::after{
  box-shadow:0 0 0 1px var(--accent),0 0 24px rgba(68,214,44,.32);
}

/* --- Trimmed specs grid (4 rows instead of 6) is handled in JS --- */
.card .specs{margin-bottom:8px}


/* --- Pick Mode toggle button --- */
.pick-mode-btn{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  padding:0 14px;height:32px;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;
  transition:.15s;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  display:inline-flex;align-items:center;gap:6px;
}
.pick-mode-btn:hover{color:var(--text);border-color:var(--accent2)}
.pick-mode-btn.on{
  background:var(--accent);color:#000;border-color:var(--accent);
  box-shadow:0 0 12px rgba(68,214,44,.4);
}
.pick-mode-btn .pm-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--muted);transition:.15s;
}
.pick-mode-btn.on .pm-dot{background:#000;box-shadow:0 0 6px #000}

/* When pick mode is OFF, cards no longer carry "click to select" cursor hint */
body:not(.pick-mode-on) .card{cursor:zoom-in}
body.pick-mode-on .card{cursor:crosshair}

/* --- Active filter chips (Shop) --- */
.filter-chips{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:0 0 var(--space-sm);
}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(68,214,44,.10);border:1px solid rgba(68,214,44,.45);
  color:var(--accent);font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.filter-chip button{
  background:transparent;border:none;color:var(--accent);cursor:pointer;
  font-size:1rem;line-height:1;padding:0 0 0 4px;font-weight:700;
}
.filter-chip button:hover{color:var(--lose)}
.filter-chip.cleared{display:none}

/* --- Collapsible modal sections via <details> --- */
.md-section{
  background:transparent;border:none;padding:0;margin-bottom:14px;
}
details.md-section{
  border:1px solid var(--line);
  background:rgba(8,8,10,.4);
  padding:0;
}
details.md-section[open]{background:rgba(8,8,10,.6)}
details.md-section > summary{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  padding:11px 16px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid transparent;transition:.15s;
}
details.md-section > summary::-webkit-details-marker{display:none}
details.md-section > summary::after{
  content:"▾";font-size:.85rem;color:var(--muted);transition:transform .2s;
}
details.md-section[open] > summary{border-bottom-color:var(--line)}
details.md-section[open] > summary::after{transform:rotate(180deg);color:var(--accent)}
details.md-section > summary:hover{color:var(--accent-glow);background:rgba(68,214,44,.04)}
details.md-section > *:not(summary){padding:14px 16px}

/* --- GPU tier badge simplified to 3 colors (handled in JS) — no CSS needed --- */

/* --- Page header micro-rhythm so each page feels consistent --- */
.page > h1 + .subtitle + *{margin-top:6px}

/* =============================================================
   UI POLISH PASS — nav groups, sticky toolbars, hover reveals,
   refined transitions, modal entrance, row stagger.
   ============================================================= */

/* --- Nav group dropdowns --- */
.nav-group{position:relative;display:inline-flex}
.nav-group-btn{display:inline-flex !important;align-items:center;gap:6px}
.nav-group-btn .caret{
  font-size:.62rem;line-height:1;transform:translateY(1px);
  transition:transform .2s;color:inherit;opacity:.7;
}
.nav-group:hover .nav-group-btn .caret,
.nav-group.open .nav-group-btn .caret{transform:rotate(180deg) translateY(-1px);opacity:1}
.nav-group-btn.has-active{color:var(--accent);background:rgba(68,214,44,.06)}
.nav-group-btn.has-active::before{
  content:"";position:absolute;left:50%;bottom:0;height:2px;width:100%;
  background:var(--accent);left:0;
  box-shadow:0 0 8px var(--accent);
}
/* Invisible hover-bridge — fills the gap between the group button and the
   dropdown menu so the user's mouse can travel from one to the other without
   leaving the .nav-group:hover state and collapsing the menu. */
.nav-group::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:16px;
  pointer-events:auto;display:none;
}
.nav-group:hover::after,
.nav-group.open::after{display:block}
.nav-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  background:rgba(8,8,10,.96);
  border:1px solid var(--accent);
  min-width:170px;
  display:none;flex-direction:column;
  z-index:200;padding:6px 0;
  backdrop-filter:blur(12px) saturate(140%);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  box-shadow:0 12px 32px rgba(0,0,0,.8),0 0 22px rgba(68,214,44,.2);
  animation:navMenuIn .18s cubic-bezier(.2,.8,.2,1);
}
.nav-group:hover .nav-menu,
.nav-group.open .nav-menu{display:flex}
@keyframes navMenuIn{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
.nav-menu .nav-btn{
  background:transparent !important;border:none !important;color:var(--text);
  padding:10px 18px;font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:1.4px;text-transform:uppercase;
  text-align:left;cursor:pointer;transition:.15s;
  width:100%;
}
.nav-menu .nav-btn::before{display:none !important}
.nav-menu .nav-btn:hover{background:rgba(68,214,44,.1) !important;color:var(--accent)}
.nav-menu .nav-btn.active{color:var(--accent) !important;background:rgba(68,214,44,.08) !important}

/* --- Hover-reveal mini radar inside card name row --- */
.card .mini-radar{
  opacity:.45;transition:opacity .2s, transform .2s, filter .2s;
}
.card:hover .mini-radar{opacity:1;filter:drop-shadow(0 0 6px rgba(68,214,44,.35))}
.card.selected .mini-radar{opacity:1}

/* --- Hover-reveal card action buttons (keep heart always visible) --- */
.card .actions{transition:opacity .15s, transform .15s;flex-wrap:wrap}
.card .actions .icon-btn.act{opacity:.7;transition:opacity .15s, color .15s, border-color .15s, background .15s, box-shadow .15s}
.card:hover .actions .icon-btn.act{opacity:1}
.card.selected .actions .icon-btn.act{opacity:.85}
@media (hover: none){
  /* On touch devices, always show actions */
  .card .actions .icon-btn.act{opacity:1}
}

/* --- Sticky toolbars on long-list pages --- */
#page-tierlist > .toolbar,
#page-ai-rank > .toolbar,
#page-recommend > .toolbar,
#page-value-lead > .toolbar,
#page-value > .toolbar,
#page-shop > .toolbar{
  position:sticky;top:60px;z-index:30;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px) saturate(140%);
  padding:12px 14px;margin-left:-14px;margin-right:-14px;
  border-bottom:1px solid var(--line);
}

/* --- Smoother page transitions with stagger fade --- */
.page.active{display:block;animation:pageIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pageIn{
  from{opacity:0;transform:translateY(14px);filter:blur(3px)}
  to  {opacity:1;transform:translateY(0);filter:blur(0)}
}

/* --- Tier row stagger fade-in (loading-skeleton-lite) --- */
/* min() caps total stagger at 600ms so 686-row Tier List doesn't crawl in for 5 seconds */
.tier-row{
  animation:rowIn .25s ease-out backwards;
  animation-delay:min(calc(var(--row-i, 0) * 6ms), 600ms);
}
@keyframes rowIn{
  from{opacity:0;transform:translateX(-8px)}
  to  {opacity:1;transform:translateX(0)}
}

/* --- Modal entrance polish — scale + glow pulse --- */
.modal-card{animation:modalIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{
  0%  {opacity:0;transform:translateY(20px) scale(.92);box-shadow:0 0 0 rgba(68,214,44,0)}
  60% {opacity:1;transform:translateY(-2px) scale(1.01);box-shadow:0 0 80px rgba(68,214,44,.45),0 20px 60px rgba(0,0,0,.7)}
  100%{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 40px rgba(68,214,44,.25),0 20px 60px rgba(0,0,0,.7)}
}

/* --- Compact mode — tighter, more cards per row --- */
.grid.compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.grid.compact .card{padding:10px 10px 8px}
.grid.compact .card .name{font-size:.88rem;letter-spacing:.2px}
.grid.compact .card .specs{gap:2px 8px;font-size:.72rem}
.grid.compact .card .price{font-size:.95rem}
.grid.compact .mini-radar{display:none}

.price-compare{
  display:flex;align-items:stretch;gap:10px;margin:14px 0 10px;
  flex-wrap:wrap;
}
.price-compare .pc-cell{
  flex:1;min-width:140px;
  background:#000;border:1px solid var(--line);padding:12px 16px;
  display:flex;flex-direction:column;gap:4px;
}
.price-compare .pc-cell.actual{border-color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(0,225,255,.15)}
.price-compare .pc-cell.expected{border-color:var(--muted)}
.price-compare .pc-cell.expected.good,.price-compare .pc-cell.delta.good{border-color:var(--accent);box-shadow:inset 0 0 0 1px rgba(68,214,44,.2)}
.price-compare .pc-cell.expected.bad,.price-compare .pc-cell.delta.bad{border-color:var(--lose);box-shadow:inset 0 0 0 1px rgba(255,60,80,.2)}
.price-compare .pc-k{
  font-family:'Rajdhani',sans-serif;font-size:.7rem;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--muted);font-weight:700;
}
.price-compare .pc-v{
  font-family:'Rajdhani',sans-serif;font-size:1.7rem;font-weight:700;
  color:var(--text);letter-spacing:.5px;
}
.price-compare .pc-cell.actual .pc-v{color:var(--accent2)}
.price-compare .pc-cell.expected.good .pc-v,.price-compare .pc-cell.delta.good .pc-v{color:var(--accent)}
.price-compare .pc-cell.expected.bad .pc-v,.price-compare .pc-cell.delta.bad .pc-v{color:var(--lose)}
.price-compare .pc-vs{
  align-self:center;font-family:'Rajdhani',sans-serif;font-weight:700;
  color:var(--muted);font-size:.9rem;letter-spacing:2px;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:780px){
  h1{font-size:1.5rem}
  .form-grid{grid-template-columns:1fr}
  nav{padding:12px 16px}
  .page{padding:24px 16px 60px}
}

/* =============================================================
   SPEC ICONS — inline SVG inside .specs .k cell
   ============================================================= */
.specs .k{
  display:flex;align-items:center;gap:6px;
}
.specs .k .spec-ico{
  width:13px;height:13px;color:var(--accent);flex-shrink:0;
  opacity:.85;transition:opacity .15s,color .15s;
}
.card:hover .specs .k .spec-ico{opacity:1;color:var(--accent2)}
.specs .k span{line-height:1}

/* =============================================================
   NAME ROW + MINI RADAR
   ============================================================= */
.card .name-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;
}
.card .name-row > div:first-child{min-width:0;flex:1}
.mini-radar{
  width:54px;height:54px;flex-shrink:0;opacity:.85;
  transition:opacity .2s, transform .25s;
}
.card:hover .mini-radar{opacity:1;transform:rotate(2deg) scale(1.05)}
.mini-radar .mr-ring{
  fill:rgba(0,225,255,.04);stroke:rgba(0,225,255,.25);stroke-width:1;
}
.mini-radar .mr-poly{
  fill:rgba(68,214,44,.28);stroke:var(--accent);stroke-width:1.2;
  filter:drop-shadow(0 0 3px rgba(68,214,44,.45));
}
.card.selected .mini-radar .mr-poly{fill:rgba(68,214,44,.45)}

/* =============================================================
   STICKY TOOLBAR — shop / wishlist / ai / tier / value
   ============================================================= */
.page > .toolbar,
.page > .mode-banner{
  position:sticky;z-index:20;
  background:var(--bg);
  backdrop-filter:blur(8px);
}
.page > .mode-banner{top:64px;padding:10px 14px;border-bottom:1px solid var(--line)}
.page > .toolbar{top:118px;padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
/* When there is no mode-banner above, snap toolbar right under the nav */
.page > .toolbar:first-of-type:not(.mode-banner + .toolbar){top:64px}

/* =============================================================
   COMPACT CARD VIEW — denser grid layout
   ============================================================= */
.grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.grid.compact .card{padding:12px 12px 10px}
.grid.compact .card .name-row{margin-bottom:6px}
.grid.compact .card .name{font-size:.92rem}
.grid.compact .card .desc{display:none}
.grid.compact .card .specs{
  grid-template-columns:auto 1fr;gap:2px 6px;margin-bottom:6px;font-size:.72rem;
}
.grid.compact .card .specs > div:nth-child(n+7){display:none}
.grid.compact .card .specs .k span{display:none}
.grid.compact .card .specs .v{text-align:left;font-size:.74rem}
.grid.compact .card .stat-strip{display:none}
.grid.compact .card .mini-radar{width:42px;height:42px}
.grid.compact .card .actions .icon-btn:not(.heart){display:none}
.grid.compact .card .price-row{padding-top:7px;margin-top:4px}
.grid.compact .card .price{font-size:1rem}

/* =============================================================
   QUICK-COMPARE DRAWER (pinned to bottom of viewport, all pages)
   ============================================================= */
.quick-drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(8,10,8,.92);
  backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--accent);
  box-shadow:0 -10px 40px rgba(0,0,0,.7), 0 -1px 0 0 rgba(68,214,44,.4);
  animation:qdSlideUp .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes qdSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.quick-drawer .qd-head{
  display:flex;align-items:center;gap:12px;padding:8px 18px;
  border-bottom:1px solid var(--line);
}
.quick-drawer .qd-title{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  letter-spacing:2px;font-size:.82rem;color:var(--muted);
  text-transform:uppercase;
}
.quick-drawer .qd-title b{color:var(--accent);font-size:1.1rem;margin-left:6px}
.quick-drawer .qd-max{color:var(--muted);font-size:.78rem;margin-left:2px}
.quick-drawer .qd-spacer{flex:1}
.quick-drawer .qd-close{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  width:28px;height:28px;cursor:pointer;font-size:1.1rem;line-height:1;
  font-family:'Rajdhani',sans-serif;
  transition:.15s;
}
.quick-drawer .qd-close:hover{border-color:var(--lose);color:var(--lose)}
.quick-drawer .qd-list{
  display:flex;gap:10px;padding:12px 18px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
}
.quick-drawer .qd-list::-webkit-scrollbar{height:6px}
.quick-drawer .qd-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:0}
.quick-drawer .qd-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line-2);
  padding:8px 12px;min-width:240px;cursor:pointer;
  transition:.15s;position:relative;
}
.quick-drawer .qd-chip:hover{
  border-color:var(--accent2);background:var(--panel-2);
  box-shadow:0 0 14px rgba(0,225,255,.18);
}
.quick-drawer .qd-tier{
  font-family:'Rajdhani',sans-serif;font-weight:800;
  padding:4px 8px;font-size:.82rem;color:#000;letter-spacing:1px;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);
  flex-shrink:0;
}
.quick-drawer .qd-info{min-width:0;flex:1}
.quick-drawer .qd-name{
  font-size:.85rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quick-drawer .qd-meta{
  font-size:.7rem;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.quick-drawer .qd-rm{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  width:22px;height:22px;cursor:pointer;font-size:1rem;line-height:1;
  font-family:'Rajdhani',sans-serif;flex-shrink:0;
  transition:.12s;
}
.quick-drawer .qd-rm:hover{border-color:var(--lose);color:var(--lose);background:rgba(255,60,80,.1)}
@media (max-width:680px){
  .quick-drawer .qd-chip{min-width:200px}
}

/* =============================================================
   PRICE SPARKLINE
   ============================================================= */
.price-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.sparkline{
  display:flex;align-items:center;gap:6px;color:var(--accent2);
  opacity:.85;transition:opacity .15s,color .15s;
}
.sparkline.down{color:var(--accent)}
.sparkline.up{color:#ffb020}
.sparkline svg{width:72px;height:20px;display:block;filter:drop-shadow(0 0 3px currentColor)}
.sparkline .sp-low{
  font-family:'Rajdhani',sans-serif;font-size:.66rem;
  letter-spacing:.5px;color:var(--muted);text-transform:uppercase;
  white-space:nowrap;
}
.card:hover .sparkline{opacity:1}
.grid.compact .sparkline .sp-low{display:none}
.grid.compact .sparkline svg{width:54px;height:16px}

/* =============================================================
   FILTER PANEL — collapsible range sliders
   ============================================================= */
.filter-panel{
  background:var(--panel);border:1px solid var(--line);
  padding:16px 20px;margin:-6px 0 18px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 24px;
  animation:pageIn .25s ease-out;
}
.filter-panel .fp-row{display:flex;flex-direction:column;gap:6px}
.filter-panel label{
  font-family:'Rajdhani',sans-serif;font-size:.78rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);font-weight:700;
  display:flex;justify-content:space-between;gap:8px;
}
.filter-panel label b{color:var(--accent);font-weight:700}
.filter-panel input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:#000;border:1px solid var(--line-2);outline:none;
}
.filter-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;background:var(--accent);
  border:1px solid var(--accent);cursor:pointer;
  box-shadow:0 0 8px rgba(68,214,44,.45);
  transition:transform .12s;
}
.filter-panel input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
.filter-panel input[type=range]::-moz-range-thumb{
  width:14px;height:14px;background:var(--accent);
  border:1px solid var(--accent);cursor:pointer;border-radius:0;
}
.filter-panel .fp-actions{
  grid-column:1/-1;display:flex;justify-content:flex-end;
  border-top:1px solid var(--line);padding-top:10px;margin-top:4px;
}

/* =============================================================
   SHOP PAGER
   ============================================================= */
.pager{
  display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;
  margin:28px 0 16px;padding:14px 18px;
  background:var(--panel);border:1px solid var(--line);
}
.pager .pg-btn{
  background:transparent;border:1px solid var(--line-2);color:var(--text);
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:2px;
  padding:8px 16px;cursor:pointer;font-size:.82rem;
  transition:.15s;
}
.pager .pg-btn:hover:not(:disabled){
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 14px rgba(68,214,44,.25);
}
.pager .pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pager .pg-info{
  color:var(--muted);font-size:.82rem;font-family:'Rajdhani',sans-serif;
  letter-spacing:.5px;
}
.pager .pg-info b{color:var(--accent);font-weight:700}
.pager .pg-nums{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pager .pg-num{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  width:34px;height:34px;cursor:pointer;font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.85rem;transition:.15s;
}
.pager .pg-num:hover{border-color:var(--accent2);color:var(--accent2)}
.pager .pg-num.active{
  background:var(--accent);border-color:var(--accent);color:#000;
  box-shadow:0 0 12px rgba(68,214,44,.45);
}
.pager .pg-gap{color:var(--muted);padding:0 4px;font-family:'Rajdhani',sans-serif}

/* =============================================================
   LAPTOP DETAILS MODAL
   ============================================================= */
.modal-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px) saturate(130%);
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 20px;overflow-y:auto;
}
.modal-backdrop.open{display:flex;animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  background:var(--panel);border:1px solid var(--accent);
  max-width:840px;width:100%;position:relative;
  box-shadow:0 0 40px rgba(68,214,44,.25),0 20px 60px rgba(0,0,0,.7);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  animation:modalIn .25s ease-out;
}
@keyframes modalIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  width:36px;height:36px;font-size:1.4rem;line-height:1;border-radius:0;
  cursor:pointer;font-family:'Rajdhani',sans-serif;font-weight:700;
  transition:.15s;
}
.modal-close:hover{border-color:var(--lose);color:var(--lose);box-shadow:0 0 10px rgba(255,42,77,.3)}
#modal-content{padding:24px 28px}

.md-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-right:48px}
.md-head .md-brand{
  font-family:'Rajdhani',sans-serif;color:var(--accent);
  font-size:.78rem;letter-spacing:3px;text-transform:uppercase;font-weight:600;
}
.md-head .md-name{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:1.55rem;letter-spacing:1.5px;text-transform:uppercase;
  margin:4px 0 8px;line-height:1.1;color:var(--text);
}
.md-head .md-cat{color:var(--muted);font-size:.85rem;letter-spacing:.4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md-head .md-tier-pill{
  font-family:'Rajdhani',sans-serif;font-weight:800;padding:5px 12px;border-radius:0;
  color:#000;font-size:.9rem;letter-spacing:1.5px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.md-head .md-price{
  font-family:'Rajdhani',sans-serif;font-weight:700;
  color:var(--accent);font-size:1.5rem;text-shadow:0 0 12px rgba(68,214,44,.4);
  margin-left:auto;letter-spacing:.5px;
}

.md-section{margin-bottom:22px}
.md-section h3{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.md-summary{color:var(--text);font-size:.93rem;line-height:1.65;letter-spacing:.2px}

.md-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 18px;font-size:.86rem}
.md-specs .md-sk{color:var(--muted);text-transform:uppercase;font-size:.72rem;letter-spacing:1px;font-family:'Rajdhani',sans-serif;font-weight:600}
.md-specs .md-sv{color:var(--text);font-weight:600;margin-bottom:8px}

.md-stat-rows{display:flex;flex-direction:column;gap:7px}
.md-stat-row{display:grid;grid-template-columns:120px 1fr 44px;gap:12px;align-items:center;font-size:.84rem}
.md-stat-row .lbl{color:var(--muted);text-transform:uppercase;font-size:.72rem;letter-spacing:1px;font-family:'Rajdhani',sans-serif;font-weight:600}
.md-stat-row .bar-track{height:8px;background:#000;border:1px solid var(--line);position:relative;overflow:hidden}
.md-stat-row .bar-fill{
  height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  box-shadow:0 0 6px rgba(68,214,44,.3);
}
.md-stat-row .num{font-family:'Rajdhani',sans-serif;font-weight:700;text-align:right;color:var(--accent);font-size:.95rem}

.md-fps-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#000;border:1px solid var(--line)}
.md-fps-table th,.md-fps-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
.md-fps-table th{
  background:#000;color:var(--muted);font-family:'Rajdhani',sans-serif;
  font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:1.5px;
  border-bottom:1px solid var(--accent);
}
.md-fps-table th:first-child,.md-fps-table td:first-child{text-align:left;font-weight:600;color:var(--text);min-width:160px}
.md-fps-table tr:last-child td{border-bottom:none}
.md-fps-table td.fps{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.5px}
.md-fps-table td.fps.t1{color:var(--accent);text-shadow:0 0 6px rgba(68,214,44,.4)}
.md-fps-table td.fps.t2{color:var(--accent2)}
.md-fps-table td.fps.t3{color:#ffb020}
.md-fps-table td.fps.t4{color:var(--lose)}
.md-fps-note{color:var(--muted);font-size:.74rem;margin-top:8px;letter-spacing:.3px;line-height:1.5}

.md-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.md-link{
  background:transparent;border:1px solid var(--line-2);color:var(--muted);
  padding:8px 14px;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  transition:.15s;text-decoration:none;
}
.md-link:hover{border-color:var(--accent);color:var(--accent);background:rgba(68,214,44,.08)}

.card .name{cursor:pointer;transition:color .15s}
.card .name:hover{color:var(--accent);text-shadow:0 0 8px rgba(68,214,44,.4)}

.tier-row[data-detail-id]{cursor:pointer}

.val-results{margin-bottom:22px}
.val-results-head{
  color:var(--muted);font-family:'Rajdhani',sans-serif;font-weight:600;
  font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.val-pick-row{
  display:grid;grid-template-columns:70px 1fr 100px;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);padding:11px 16px;margin-bottom:6px;
  cursor:pointer;transition:.15s;position:relative;overflow:hidden;
}
.val-pick-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .2s;
}
.val-pick-row:hover{
  border-color:rgba(68,214,44,.45);transform:translateX(6px);
  background:var(--panel-2);box-shadow:0 0 18px rgba(68,214,44,.12);
}
.val-pick-row:hover::before{transform:scaleY(1)}
.val-pick-row .info .nm{font-weight:700;font-size:.92rem;color:var(--text)}
.val-pick-row .info .why{color:var(--muted);font-size:.76rem;margin-top:2px;letter-spacing:.3px}
.val-pick-row .score{font-family:'Rajdhani',sans-serif;font-weight:700;color:var(--accent);font-size:1.1rem;letter-spacing:.5px}

@media (max-width:660px){
  #modal-content{padding:24px 18px 18px}
  .md-head .md-price{width:100%;margin-left:0}
  .md-stat-row{grid-template-columns:90px 1fr 40px}
}

/* =============================================================
   KEYFRAMES (kept minimal: cardIn, gridDrift, scanline, brandPulse,
   shimmer, pageIn, chromaPulse — declared above)
   ============================================================= */

/* =============================================================
   "APPLE RESEARCH" THEME — refined, professional, calm
   Overrides the gaming aesthetic with: clean typography (Inter only),
   muted color palette, no clip-path angles, no background animation,
   generous whitespace, narrower content width, light mode default,
   dark mode toggleable. Everything below is intentionally heavy-handed
   with !important to win the cascade against earlier styles.
   ============================================================= */

/* --- Theme tokens (light default) --- */
:root{
  --bg:           #fafaf9;
  --bg-2:         #f5f5f4;
  --panel:        #ffffff;
  --panel-2:      #f5f5f4;
  --line:         #e7e5e4;
  --line-2:       #d6d3d1;
  --text:         #1c1917;
  --muted:        #78716c;
  --accent:       #059669;
  --accent-glow:  #10b981;
  --accent-dim:   #047857;
  --accent2:      #2563eb;
  --win:          #059669;
  --lose:         #dc2626;
  --tier-s-a:     #059669;
  --tier-s-b:     #10b981;
  --tier-a:       #2563eb;
  --tier-b:       #64748b;
  --tier-c:       #d97706;
  --tier-d:       #dc2626;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:    0 10px 32px rgba(0,0,0,.10);
  --r-sm:4px; --r-md:8px; --r-lg:12px;
}
body.theme-dark{
  --bg:           #0a0a0b;
  --bg-2:         #131316;
  --panel:        #18181b;
  --panel-2:      #27272a;
  --line:         #27272a;
  --line-2:       #3f3f46;
  --text:         #fafafa;
  --muted:        #a1a1aa;
  --accent:       #10b981;
  --accent-glow:  #34d399;
  --accent-dim:   #059669;
  --accent2:      #60a5fa;
  --win:          #10b981;
  --lose:         #ef4444;
  --tier-s-a:     #10b981;
  --tier-s-b:     #34d399;
  --tier-a:       #60a5fa;
  --tier-b:       #94a3b8;
  --tier-c:       #fbbf24;
  --tier-d:       #f87171;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.30);
  --shadow-md:    0 4px 12px rgba(0,0,0,.40);
  --shadow-lg:    0 10px 32px rgba(0,0,0,.55);
}

/* --- Base — calm canvas, no animation --- */
html,body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
body::before,body::after{display:none !important}

/* --- Typography overhaul: Inter everywhere, no condensed-gamer Rajdhani --- */
body,html,button,input,select,textarea,
nav button,.btn,.tier-row,.tier-row .nm,
.card .name,.card .price,.card .brand-tag,.card .tier-badge,
.md-name,.md-brand,.md-price,.md-cat,.md-tier-pill,
.verdict,.value-stat,.value-card,
.fit,.filter-chip,.bm-toggle .bm-tab,.pick-mode-btn,
.grade,.score,.rank,.charts-section h3,.charts-section h4,
.val-results-head,.val-pick-row .score,.val-pick-row .nm,
.md-section h3,details.md-section > summary,
h1,h2,h3,h4,.subtitle{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  letter-spacing:0 !important;
}

/* --- Headings --- */
h1{
  font-weight:700 !important;
  font-size:1.65rem !important;
  letter-spacing:-0.02em !important;
  text-transform:none !important;
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  animation:none !important;
  margin-bottom:6px !important;
}
.subtitle{
  color:var(--muted) !important;
  font-size:.92rem !important;
  letter-spacing:0 !important;
  line-height:1.55;
  margin-bottom:24px !important;
  max-width:720px;
}

/* --- Layout — narrower content --- */
.page{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:32px 28px 80px !important;
}
.grid{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;
  gap:20px !important;
}

/* --- Nav refined --- */
nav{
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
  border-bottom:1px solid var(--line) !important;
  padding:12px 24px !important;
}
body.theme-dark nav{background:rgba(20,20,22,.85) !important}
nav::after{display:none !important}
nav .brand{
  color:var(--text) !important;
  font-weight:700 !important;
  font-size:.95rem !important;
  letter-spacing:.5px !important;
  padding-left:0 !important;
}
nav .brand::before{display:none !important}
nav button,nav .nav-btn{
  background:transparent !important;
  color:var(--muted) !important;
  border:none !important;
  border-radius:var(--r-sm) !important;
  padding:8px 12px !important;
  font-weight:500 !important;
  font-size:.85rem !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
nav button::before,nav .nav-btn::before{display:none !important}
nav button:hover,nav .nav-btn:hover{
  background:var(--panel-2) !important;
  color:var(--text) !important;
}
nav button.active,nav .nav-btn.active{
  background:var(--panel-2) !important;
  color:var(--accent) !important;
}

/* Nav group dropdowns refined */
.nav-menu{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-lg) !important;
  padding:6px !important;
}
.nav-menu .nav-btn{
  border-radius:var(--r-sm) !important;
  padding:8px 12px !important;
}

/* --- Theme toggle button --- */
.theme-toggle{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  width:36px !important;height:36px !important;
  padding:0 !important;
}
.theme-toggle .th-sun{display:none}
.theme-toggle .th-moon{display:block}
body.theme-dark .theme-toggle .th-sun{display:block}
body.theme-dark .theme-toggle .th-moon{display:none}

/* --- Cards — clean, breathing room --- */
.card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:20px !important;
  clip-path:none !important;
  box-shadow:var(--shadow-sm) !important;
  transition:border-color .15s, box-shadow .15s, transform .15s !important;
  animation:none !important;
  cursor:pointer;
}
.card::before,.card::after{display:none !important}
.card:hover{
  border-color:var(--line-2) !important;
  box-shadow:var(--shadow-md) !important;
  transform:translateY(-2px) !important;
  background:var(--panel) !important;
}
.card.selected{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--accent), var(--shadow-md) !important;
  background:var(--panel) !important;
  animation:none !important;
}
.card.selected::before,.card.selected::after{display:none !important}

/* Card header — TWO anchors: tier badge (left) + price location hint */
.card .top-row{
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.card .brand-tag{
  font-size:.7rem !important;
  color:var(--muted) !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  font-weight:600;
}
.card .tier-badge{
  font-weight:700 !important;
  font-size:.72rem !important;
  padding:4px 8px !important;
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  letter-spacing:.02em;
}
.card .name-row{margin-bottom:12px}
.card .name{
  font-size:1.05rem !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
  color:var(--text) !important;
  line-height:1.35;
  text-shadow:none !important;
}
.card .name:hover{color:var(--accent) !important;text-shadow:none !important}
.card .desc{
  font-size:.78rem !important;
  color:var(--muted) !important;
  margin-bottom:14px !important;
}

/* Specs */
.card .specs{
  font-size:.82rem !important;
  gap:6px 16px !important;
  margin-bottom:14px;
}
.card .specs .k{
  color:var(--muted) !important;
  font-size:.7rem !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
  font-weight:600 !important;
}
.card .specs .v{
  color:var(--text) !important;
  font-weight:500 !important;
}

/* Stat strip — quiet */
.card .stat-strip span{
  background:var(--panel-2) !important;
  border-color:var(--line) !important;
  color:var(--muted) !important;
  border-radius:var(--r-sm) !important;
  font-weight:500 !important;
  font-size:.7rem !important;
  padding:3px 7px !important;
}
.card .stat-strip span.total{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  text-shadow:none !important;
}

/* Price — BIG visual anchor */
.card .price-row{
  border-top:1px solid var(--line) !important;
  padding-top:14px !important;
  margin-top:14px !important;
}
.card .price{
  font-weight:700 !important;
  font-size:1.4rem !important;
  color:var(--text) !important;
  letter-spacing:-0.02em !important;
  text-shadow:none !important;
}
.card .links a{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  font-size:.72rem !important;
  text-transform:none !important;
  padding:4px 9px !important;
}
.card .links a:hover{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
  background:transparent !important;
}

/* --- Buttons --- */
.btn{
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:var(--r-md) !important;
  padding:9px 18px !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  clip-path:none !important;
  transition:background .15s, transform .1s, box-shadow .15s !important;
}
.btn::after{display:none !important}
.btn:hover{
  background:var(--accent-dim) !important;
  transform:none !important;
  box-shadow:var(--shadow-md) !important;
}
.btn.ghost{
  background:transparent !important;
  border:1px solid var(--line-2) !important;
  color:var(--text) !important;
}
.btn.ghost:hover{
  background:var(--panel-2) !important;
  border-color:var(--line-2) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}
.btn.cyan{
  background:var(--accent2) !important;
  color:#fff !important;
}
.btn.cyan:hover{
  background:#1d4ed8 !important;
  box-shadow:var(--shadow-md) !important;
}
body.theme-dark .btn.cyan:hover{background:#3b82f6 !important}
.btn:disabled{opacity:.4 !important;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent) !important;box-shadow:none !important;transform:none !important}

/* Icon buttons + heart */
.icon-btn,.heart{
  background:transparent !important;
  border:1px solid var(--line-2) !important;
  border-radius:var(--r-sm) !important;
  color:var(--muted) !important;
  font-weight:500 !important;
  font-size:.7rem !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  clip-path:none !important;
  padding:6px 10px !important;
}
.icon-btn:hover,.heart:hover{
  border-color:var(--text) !important;
  color:var(--text) !important;
  background:var(--panel-2) !important;
  box-shadow:none !important;
}
.heart.on{
  background:rgba(220,38,38,.08) !important;
  border-color:var(--lose) !important;
  color:var(--lose) !important;
}
.icon-btn.act{opacity:1 !important}

/* --- Inputs --- */
input[type=text],.toolbar input,.field input,
select,.toolbar select,.field select,
.field textarea{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-md) !important;
  padding:9px 12px !important;
  font-size:.88rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(5,150,105,.15) !important;
}

/* --- Modal --- */
.modal-backdrop{
  background:rgba(0,0,0,.4) !important;
  backdrop-filter:blur(6px) !important;
}
body.theme-dark .modal-backdrop{background:rgba(0,0,0,.65) !important}
.modal-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-lg) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-lg) !important;
}
.modal-close{
  background:transparent !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  color:var(--muted) !important;
}
.modal-close:hover{
  background:var(--panel-2) !important;
  border-color:var(--lose) !important;
  color:var(--lose) !important;
  box-shadow:none !important;
}

.md-head{padding-right:48px !important}
.md-brand{
  color:var(--muted) !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  font-size:.72rem !important;
  font-weight:600 !important;
}
.md-name{
  font-weight:700 !important;
  font-size:1.6rem !important;
  letter-spacing:-0.02em !important;
  text-transform:none !important;
  color:var(--text) !important;
}
.md-cat{color:var(--muted) !important;font-size:.85rem !important}
.md-tier-pill{
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}
.md-price{
  color:var(--text) !important;
  font-weight:700 !important;
  text-shadow:none !important;
  letter-spacing:-0.02em !important;
}

/* Modal collapsible */
details.md-section{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
details.md-section[open]{background:var(--panel) !important}
details.md-section > summary{
  color:var(--text) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.92rem !important;
  padding:12px 16px !important;
}
details.md-section[open] > summary{border-bottom-color:var(--line) !important}
details.md-section > summary:hover{
  color:var(--accent) !important;
  background:var(--panel-2) !important;
}
.md-summary{color:var(--text) !important;font-size:.92rem !important;line-height:1.65}

/* Modal stat bars */
.md-stat-row .bar-fill{
  background:linear-gradient(90deg,var(--accent-dim),var(--accent)) !important;
  box-shadow:none !important;
}
.md-stat-row .num{color:var(--accent) !important}
.md-stat-row .lbl,.md-specs .md-sk{
  color:var(--muted) !important;
  font-weight:600 !important;
  letter-spacing:.05em !important;
}
.md-specs .md-sv{color:var(--text) !important;font-weight:500 !important}

/* Modal FPS table */
.md-fps-table{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.md-fps-table th{
  color:var(--muted) !important;
  background:var(--panel-2) !important;
  border-bottom:1px solid var(--line) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
}
.md-fps-table td.fps{
  font-weight:700 !important;
  letter-spacing:0 !important;
}
.md-fps-table td.fps.t1{color:var(--accent) !important;text-shadow:none !important}
.md-fps-table td.fps.t2{color:var(--accent2) !important}
.md-fps-table td.fps.t3{color:#d97706 !important}
.md-fps-table td.fps.t4{color:var(--lose) !important}

.md-link{
  background:transparent !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
  color:var(--muted) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.md-link:hover{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
  background:transparent !important;
}

/* --- Tier rows --- */
.tier-row{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-sm) !important;
  animation:none !important;
}
.tier-row::before{display:none !important}
.tier-row:hover{
  border-color:var(--line-2) !important;
  background:var(--panel-2) !important;
  transform:none !important;
}
.tier-row .grade{
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}
.tier-row .rank{color:var(--muted) !important;font-weight:600 !important}
.tier-row .info .nm{
  font-weight:600 !important;
  color:var(--text) !important;
}
.tier-row .info .why{color:var(--muted) !important;letter-spacing:0 !important}
.tier-row .score,.tier-row .score-cell .score{
  color:var(--text) !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
.score-bar .sb-fill{background:var(--accent) !important}

/* --- Compare podium --- */
.compare-podium .pod{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-sm) !important;
  animation:none !important;
}
.compare-podium .pod::before,.compare-podium .pod::after{display:none !important}
.compare-podium .pod.win{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--accent), var(--shadow-md) !important;
}
.compare-podium .pod.last{
  border-color:var(--lose) !important;
  opacity:1 !important;
}
.compare-podium .pod .pscore{
  color:var(--text) !important;
  text-shadow:none !important;
  font-weight:700 !important;
}
.compare-podium .pod .ptier{
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
}

/* Compare table */
.compare-table{font-size:.86rem !important}
.compare-table th{
  background:var(--panel-2) !important;
  color:var(--muted) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  border-bottom:1px solid var(--line) !important;
}
.compare-table th:first-child,.compare-table td:first-child{
  background:var(--panel) !important;
  color:var(--text) !important;
}
.compare-table td.best{background:rgba(5,150,105,.08) !important;color:var(--accent) !important}
.compare-table td.worst{background:rgba(220,38,38,.08) !important;color:var(--lose) !important}
.compare-table tr.section td{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  letter-spacing:.04em !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}
.compare-table tr.totals td{
  border-top:2px solid var(--accent) !important;
  background:var(--panel) !important;
  font-weight:700 !important;
}
.compare-table-wrap{
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  background:var(--panel) !important;
}

/* --- Mode banner / battle toggle --- */
.mode-banner{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:14px 18px !important;
}
.mode-banner::before,.mode-banner::after{display:none !important}
.selected-counter{color:var(--muted) !important;letter-spacing:0 !important;text-transform:none !important}
.selected-counter b{color:var(--text) !important;font-weight:700 !important}

.bm-toggle{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  padding:2px !important;
  height:auto !important;
}
.bm-toggle .bm-tab{
  background:transparent !important;
  color:var(--muted) !important;
  border:none !important;
  border-right:none !important;
  border-radius:var(--r-sm) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.82rem !important;
  padding:6px 14px !important;
}
.bm-toggle .bm-tab:hover{background:transparent !important;color:var(--text) !important}
.bm-toggle .bm-tab.active{
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:var(--shadow-sm) !important;
  text-shadow:none !important;
}

.pick-mode-btn{
  background:transparent !important;
  border:1px solid var(--line-2) !important;
  color:var(--muted) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.82rem !important;
}
.pick-mode-btn:hover{border-color:var(--text) !important;color:var(--text) !important}
.pick-mode-btn.on{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:none !important;
}
.pick-mode-btn .pm-dot{background:var(--line-2) !important}
.pick-mode-btn.on .pm-dot{background:#fff !important;box-shadow:none !important}

/* --- Toolbar / filter chips --- */
.toolbar{gap:8px !important}
.filter-chip{
  background:rgba(5,150,105,.08) !important;
  border:1px solid rgba(5,150,105,.30) !important;
  color:var(--accent) !important;
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.74rem !important;
  padding:4px 10px !important;
}

/* --- Value calculator --- */
.value-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-sm) !important;
}
.value-card::before,.value-card::after{display:none !important}
.value-card.steal{border-color:var(--accent) !important;box-shadow:0 0 0 2px var(--accent),var(--shadow-md) !important}
.value-card.ripoff{border-color:var(--lose) !important;box-shadow:0 0 0 2px var(--lose),var(--shadow-md) !important}
.verdict{
  border-radius:var(--r-sm) !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  text-shadow:none !important;
}
.value-stat{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.value-stat .k{color:var(--muted) !important}
.value-stat .v{color:var(--text) !important;font-weight:700 !important}
.value-stat.good .v{color:var(--accent) !important;text-shadow:none !important}
.value-stat.bad .v{color:var(--lose) !important}
.value-bar{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important;
}
.value-bar .fill{background:linear-gradient(90deg,var(--accent-dim),var(--accent)) !important}
.value-bar.bad .fill{background:linear-gradient(90deg,#fca5a5,var(--lose)) !important}
.value-reasons h4{color:var(--text) !important;font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important}
.value-reasons li b{color:var(--accent) !important}
.value-reasons li.neg b{color:var(--lose) !important}
.value-peer-table th{
  background:var(--panel-2) !important;
  color:var(--muted) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
}
.val-lowconf{
  background:rgba(217,119,6,.08) !important;
  border-color:rgba(217,119,6,.30) !important;
  color:#92400e !important;
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body.theme-dark .val-lowconf{color:#fbbf24 !important}

/* Value picker rows */
.val-pick-row{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.val-pick-row::before{display:none !important}
.val-pick-row:hover{
  background:var(--panel-2) !important;
  border-color:var(--line-2) !important;
  transform:none !important;
  box-shadow:var(--shadow-sm) !important;
}
.val-pick-row .score{color:var(--text) !important;font-weight:700 !important}

/* Verdict card (newer) */
.val-verdict-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
}
.val-verdict-card::before,.val-verdict-card::after{display:none !important}
.val-verdict-card.good{border-color:var(--accent) !important;box-shadow:0 0 0 2px var(--accent) !important}
.val-verdict-card.bad{border-color:var(--lose) !important;box-shadow:0 0 0 2px var(--lose) !important}
.val-verdict-card.neutral{border-color:var(--accent2) !important}
.val-verdict-label{font-weight:700 !important;letter-spacing:-0.01em !important;text-shadow:none !important}
.val-price-cell{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.val-breakdown,.val-reasons,.val-comparable{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}
.val-breakdown h3,.val-reasons h3,.val-comparable h3{
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.95rem !important;
}

/* --- Charts / form card --- */
.charts-section,.form-card,.radar-wrap{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  clip-path:none !important;
  box-shadow:var(--shadow-sm) !important;
}
.charts-section::before,.charts-section::after,
.form-card::before,.form-card::after{display:none !important}
.charts-section h3,.charts-section h4{
  color:var(--text) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.scatter-svg{background:var(--panel-2) !important;border:1px solid var(--line) !important;border-radius:var(--r-md) !important}
.hist-cell{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
}

/* --- Search results --- */
.val-results-head{
  color:var(--muted) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  border-color:var(--line) !important;
}

/* Pager */
.pager{padding:12px 0 !important}
.pager .pg-btn,.pager .pg-num{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:var(--r-sm) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.pager .pg-btn:hover,.pager .pg-num:hover{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
  background:var(--panel-2) !important;
  box-shadow:none !important;
}
.pager .pg-num.active{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:none !important;
}
.pager .pg-info{color:var(--muted) !important;font-weight:400 !important}
.pager .pg-info b{color:var(--text) !important}

/* --- Form fields --- */
.field label,.form-grid label{
  color:var(--muted) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  font-size:.72rem !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar-track{background:var(--bg-2) !important}
::-webkit-scrollbar-thumb{
  background:var(--line-2) !important;
  border-radius:var(--r-sm) !important;
}
::-webkit-scrollbar-thumb:hover{background:var(--muted) !important}

::selection{background:var(--accent) !important;color:#fff !important}

/* --- Animation slowdown / removal --- */
@keyframes chromaPulse{0%,100%{box-shadow:0 0 0 2px var(--accent)}}
nav .brand::before,
.brand-pulse{animation:none !important}

/* --- Mini radar refinement --- */
.mini-radar .mr-poly{fill:var(--accent) !important;fill-opacity:.25 !important;stroke:var(--accent) !important}
.mini-radar .mr-ring{stroke:var(--line) !important}

/* --- Sticky toolbar background match --- */
#page-tierlist > .toolbar,
#page-ai-rank > .toolbar,
#page-recommend > .toolbar,
#page-value-lead > .toolbar,
#page-value > .toolbar,
#page-shop > .toolbar{
  background:rgba(250,250,249,.92) !important;
  backdrop-filter:blur(10px) !important;
}
body.theme-dark #page-tierlist > .toolbar,
body.theme-dark #page-ai-rank > .toolbar,
body.theme-dark #page-recommend > .toolbar,
body.theme-dark #page-value-lead > .toolbar,
body.theme-dark #page-value > .toolbar,
body.theme-dark #page-shop > .toolbar{
  background:rgba(10,10,11,.92) !important;
}

/* --- Filter panel --- */
.filter-panel{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  padding:18px 22px !important;
}

/* --- Misc --- */
.custom-tag{
  background:transparent !important;
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
  border-radius:var(--r-sm) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:.68rem !important;
}
.wl-mark{color:var(--lose) !important;text-shadow:none !important}
.fit{
  border-radius:var(--r-sm) !important;
  clip-path:none !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.fit.ok{background:rgba(5,150,105,.10) !important;border-color:rgba(5,150,105,.40) !important;color:var(--accent) !important}
.fit.no{background:rgba(220,38,38,.05) !important;border-color:rgba(220,38,38,.25) !important;color:var(--lose) !important}

/* --- Tier badge colors (use refined palette but keep semantic) --- */
.tier-S{background:linear-gradient(135deg,var(--tier-s-a),var(--tier-s-b)) !important;color:#fff !important}
.tier-A{background:var(--tier-a) !important;color:#fff !important}
.tier-B{background:var(--tier-b) !important;color:#fff !important}
.tier-C{background:var(--tier-c) !important;color:#fff !important}
.tier-D{background:var(--tier-d) !important;color:#fff !important}
.tier-F{background:var(--tier-d) !important;color:#fff !important}

/* Quick drawer */
.quick-drawer{
  background:var(--panel) !important;
  border-top:1px solid var(--line) !important;
  box-shadow:0 -4px 20px rgba(0,0,0,.08) !important;
}
body.theme-dark .quick-drawer{box-shadow:0 -4px 20px rgba(0,0,0,.5) !important}

/* =============================================================
   CURRENCY SWITCHER  +  QUICK-PEEK  +  USE CASE QUIZ
   ============================================================= */

/* Currency dropdown in nav */
.currency-select{
  background:transparent !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
  border-radius:var(--r-sm) !important;
  padding:6px 8px !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  font-family:'Inter',sans-serif !important;
  cursor:pointer;
  letter-spacing:0 !important;
}
.currency-select:hover{border-color:var(--accent) !important;color:var(--text) !important}
.currency-select:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(5,150,105,.15) !important}

/* Quick-peek hover popover — floats next to the card after 900ms */
#quick-peek{
  position:fixed;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  box-shadow:var(--shadow-lg);
  z-index:250;
  max-width:280px;
  min-width:240px;
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .15s, transform .15s;
}
#quick-peek.open{opacity:1;transform:translateY(0)}
#quick-peek .qp-name{
  font-weight:700;font-size:.95rem;color:var(--text);
  letter-spacing:-0.01em;line-height:1.3;margin-bottom:2px;
}
#quick-peek .qp-meta{
  color:var(--muted);font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
#quick-peek .qp-rows{display:flex;flex-direction:column;gap:5px}
#quick-peek .qp-row{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.78rem;
}
#quick-peek .qp-k{
  color:var(--muted);
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
#quick-peek .qp-v{color:var(--text);font-weight:500;text-align:right;flex:1}

/* Quiz styling */
.quiz-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 36px;
  box-shadow:var(--shadow-sm);
  max-width:720px;
  margin:0 auto;
}
.quiz-progress{
  color:var(--muted);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:10px;
}
.quiz-bar{
  height:4px;background:var(--panel-2);border-radius:2px;
  overflow:hidden;margin-bottom:24px;
}
.quiz-bar-fill{
  height:100%;background:var(--accent);transition:width .3s ease;
}
.quiz-q{
  font-size:1.4rem;font-weight:700;color:var(--text);
  letter-spacing:-0.02em;margin:0 0 20px;line-height:1.3;
}
.quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.quiz-opt{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  color:var(--text);
  padding:14px 18px;
  text-align:left;
  font-size:.92rem;
  font-weight:500;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:.15s;
}
.quiz-opt:hover{
  border-color:var(--accent);
  background:rgba(5,150,105,.06);
  color:var(--accent);
  transform:translateX(2px);
}
.quiz-foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:18px;border-top:1px solid var(--line);
}
.quiz-results{max-width:920px}
.quiz-w-row{
  display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px;
}
.quiz-w-chip{
  background:rgba(5,150,105,.10);
  border:1px solid rgba(5,150,105,.30);
  color:var(--accent);
  padding:4px 10px;
  border-radius:var(--r-sm);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
}
.quiz-answers{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 18px;
  margin-bottom:22px;
}
.quiz-answers ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.quiz-answers li{
  display:flex;justify-content:space-between;gap:14px;
  font-size:.84rem;color:var(--text);
}
.quiz-answers .qa-q{color:var(--muted);flex:1}
.quiz-answers .qa-a{font-weight:600;text-align:right}

@media (max-width:660px){
  .quiz-card{padding:24px 18px}
  .quiz-q{font-size:1.15rem}
  .quiz-answers li{flex-direction:column;gap:2px}
  .quiz-answers .qa-a{text-align:left}
}

/* =============================================================
   ACHIEVEMENT BADGES — auto-attached pills on standout laptops
   ============================================================= */
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 4px}
.badge-pill{
  font-family:'Inter',sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:3px 8px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:default;
}
.badge-pareto{background:rgba(5,150,105,.10);color:var(--accent);border-color:rgba(5,150,105,.40)}
.badge-value {background:rgba(37,99,235,.10);color:var(--accent2);border-color:rgba(37,99,235,.35)}
.badge-ai    {background:rgba(124,58,237,.10);color:#7c3aed;border-color:rgba(124,58,237,.35)}
.badge-light {background:rgba(100,116,139,.10);color:var(--muted);border-color:var(--line-2)}
.badge-price {background:rgba(217,119,6,.10);color:#d97706;border-color:rgba(217,119,6,.35)}
body.theme-dark .badge-ai{color:#a78bfa}
body.theme-dark .badge-light{color:#cbd5e1}
body.theme-dark .badge-price{color:#fbbf24}
.md-head .badges{margin-top:10px}

/* ============================================================
   FEATURE ADDITIONS — recently viewed, alerts, score popover,
   keyboard help, timeline chart, custom recommend sliders,
   about page, empty-state suggestions, quiet/cool tag, tok/s.
   ============================================================ */

/* Recently Viewed strip */
.recently-viewed{
  margin:14px 0 16px;border:1px solid var(--line);background:var(--bg-2);
  border-radius:6px;padding:10px 12px;
}
.rv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rv-title{font-size:.7rem;letter-spacing:2px;color:var(--muted);font-weight:700}
.rv-clear{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.7rem;letter-spacing:1.5px}
.rv-clear:hover{color:var(--lose)}
.rv-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.rv-strip::-webkit-scrollbar{height:4px}
.rv-chip{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--bg);border:1px solid var(--line);border-radius:4px;
  padding:6px 10px;cursor:pointer;font-family:inherit;color:var(--text);
  transition:border-color .15s,transform .15s;max-width:240px;
}
.rv-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.rv-tier{font-size:.7rem;font-weight:800;padding:2px 6px;border-radius:3px;letter-spacing:.5px}
.rv-name{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.rv-price{font-size:.7rem;color:var(--muted);font-weight:600}

/* Card status row (price-alert + thermal pills) — inline, sits between
   the badges row and the stat-strip so it never overlaps the brand tag. */
.card-status{
  display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px;align-items:center;
}
.ov-pill{
  font-size:.62rem;font-weight:800;letter-spacing:1px;padding:3px 7px;
  border-radius:3px;border:1px solid;line-height:1.2;white-space:nowrap;
}
.ov-pill.alert    {color:#ffb020;border-color:rgba(255,176,32,.6);background:rgba(255,176,32,.12)}
.ov-pill.alert-set{color:#ffb020;border-color:rgba(255,176,32,.4);background:transparent}
.ov-pill.quiet    {color:#5fd6a8;border-color:rgba(95,214,168,.5);background:rgba(95,214,168,.10)}
.ov-pill.loud     {color:#ff5470;border-color:rgba(255,84,112,.55);background:rgba(255,84,112,.12)}

/* Quiet/cool filter row */
.fp-row-check{display:flex;align-items:center;gap:8px}
.fp-row-check label{cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fp-row-check input{accent-color:var(--accent)}
.fp-hint{color:var(--muted);font-size:.72rem;font-weight:500;margin-left:6px}

/* Score-breakdown popover (feature #4) */
.score-pop{
  position:absolute;width:340px;z-index:100;background:var(--bg-2);
  border:1px solid var(--accent);border-radius:6px;padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(68,214,44,.15);
  font-size:.82rem;
}
.sp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.sp-name{font-weight:700;letter-spacing:.5px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-total{font-size:.95rem;color:var(--accent)}
.sp-rows{display:flex;flex-direction:column;gap:5px}
.sp-row{display:grid;grid-template-columns:90px 1fr 28px 44px;gap:8px;align-items:center;font-size:.74rem}
.sp-k{font-weight:600;color:var(--text)}
.sp-w{color:var(--muted);font-weight:500;font-size:.68rem;margin-left:4px}
.sp-bar{height:6px;background:var(--bg);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));border-radius:3px}
.sp-v{font-weight:700;text-align:right;color:var(--muted);font-size:.72rem}
.sp-c{font-weight:700;text-align:right;color:var(--accent);font-size:.72rem}
.sp-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:.7rem;line-height:1.4}
.tier-badge,.grade{cursor:pointer}

/* Alert modal — reuses .modal-backdrop / .modal-card; thin alert-card override */
.alert-card{max-width:480px;padding:24px}

/* Modal additions — power/cooling/LLM block */
.md-pcl{display:flex;flex-direction:column;gap:8px}
.md-pcl > div{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;padding:4px 0}
.md-pcl .k{color:var(--muted);font-weight:600}
.md-pcl .v{color:var(--text);font-weight:700;text-align:right}
.md-pcl-note{color:var(--muted);font-size:.72rem;margin-top:6px;line-height:1.4}
.qc-tag{
  display:inline-block;margin-left:6px;background:rgba(95,214,168,.12);
  color:#5fd6a8;border:1px solid rgba(95,214,168,.5);
  padding:1px 6px;border-radius:3px;font-size:.65rem;letter-spacing:1px;font-weight:800;
}

/* Tokens/sec pill on AI Rank */
.tps-pill{
  display:inline-block;padding:2px 7px;border-radius:3px;font-size:.7rem;
  font-weight:800;letter-spacing:.5px;margin-left:6px;border:1px solid;
}
.tps-pill.fast{color:#5fd6a8;border-color:rgba(95,214,168,.5);background:rgba(95,214,168,.10)}
.tps-pill.ok{color:#ffb020;border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.10)}
.tps-pill.slow{color:var(--lose);border-color:rgba(255,42,77,.4);background:rgba(255,42,77,.08)}

/* Spec inflation timeline chart */
.timeline-svg{width:100%;height:auto;max-width:900px;display:block;margin:8px auto 0}

/* Custom recommend weights panel (#11) */
.rec-custom-panel{
  margin:12px 0 16px;border:1px solid var(--line);background:var(--bg-2);
  border-radius:6px;padding:14px;
}
.rcp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rcp-title{font-size:.78rem;letter-spacing:2.5px;font-weight:800;color:var(--accent)}
.rcp-hint{color:var(--muted);font-size:.75rem;flex:1;min-width:200px}
.rcp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 18px}
.rcp-row{display:grid;grid-template-columns:90px 1fr 44px;gap:10px;align-items:center}
.rcp-lbl{font-size:.78rem;font-weight:600;color:var(--text)}
.rcp-slider{width:100%;accent-color:var(--accent)}
.rcp-val{font-size:.75rem;font-weight:700;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}

/* Empty-state suggestions */
.empty-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.empty-suggestions .btn{font-size:.78rem}

/* Sidebar-nav layout used by About + Help pages */
.sidebar-layout{
  display:grid;grid-template-columns:240px 1fr;gap:0;
  margin-top:16px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg-2);overflow:hidden;min-height:560px;
}
.sb-nav{
  display:flex;flex-direction:column;gap:2px;padding:10px 8px;
  border-right:1px solid var(--line);background:rgba(0,0,0,.18);
}
.sb-link{
  text-align:left;padding:10px 14px;background:transparent;border:none;
  color:var(--text);font-family:inherit;font-size:.85rem;font-weight:600;
  letter-spacing:.5px;cursor:pointer;border-radius:4px;
  border-left:3px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.sb-link:hover{background:rgba(255,255,255,.04);color:var(--accent)}
.sb-link.active{
  background:rgba(68,214,44,.10);border-left-color:var(--accent);
  color:var(--accent);
}
.sb-content{padding:26px 30px;overflow-y:auto;max-height:78vh}
.sb-section{display:none}
.sb-section.active{display:block;animation:sbFadeIn .18s ease-out}
@keyframes sbFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sb-section h2{
  margin:0 0 16px 0;color:var(--accent);font-size:1.1rem;letter-spacing:2px;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.sb-section p{margin:10px 0;line-height:1.6;font-size:.92rem;color:var(--text)}
.sb-section ul{margin:10px 0;padding-left:22px}
.sb-section li{margin:8px 0;line-height:1.55;font-size:.9rem}
.sb-section code{
  background:var(--bg);padding:1px 6px;border-radius:3px;font-size:.85em;
  color:var(--accent);border:1px solid var(--line);
}
.sb-section kbd{
  display:inline-block;background:var(--bg);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:4px;padding:2px 8px;
  font-family:inherit;font-size:.85em;font-weight:700;color:var(--accent);
}
.about-table{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:.88rem}
.about-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.about-table .about-w{text-align:right;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.about-note{color:var(--muted);font-size:.82rem;margin-top:10px;font-style:italic}

@media (max-width: 720px){
  .sidebar-layout{grid-template-columns:1fr;min-height:0}
  .sb-nav{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line)}
  .sb-link{flex:1 0 auto;border-left:none;border-bottom:3px solid transparent;text-align:center;padding:8px 10px;font-size:.78rem}
  .sb-link.active{border-left:none;border-bottom-color:var(--accent)}
  .sb-content{padding:18px;max-height:none}
}

/* Light theme tweaks for new components */
body:not(.theme-dark) .ov-pill.alert{background:rgba(255,176,32,.20)}
body:not(.theme-dark) .ov-pill.quiet{background:rgba(95,214,168,.18)}
body:not(.theme-dark) .ov-pill.loud {background:rgba(255,84,112,.18)}
body:not(.theme-dark) .score-pop{box-shadow:0 10px 30px rgba(0,0,0,.15)}
body:not(.theme-dark) .recently-viewed,
body:not(.theme-dark) .rec-custom-panel,
body:not(.theme-dark) .sidebar-layout{background:#fff}
body:not(.theme-dark) .sb-nav{background:rgba(0,0,0,.03)}
body:not(.theme-dark) .sb-link:hover{background:rgba(0,0,0,.04)}

/* ============================================================
   FEEDBACK page
   ============================================================ */
.fb-chooser{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;margin-top:20px;
}
.fb-choice{
  text-align:left;background:var(--bg-2);border:1px solid var(--line);
  border-radius:8px;padding:28px 26px 22px;cursor:pointer;color:var(--text);
  font-family:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;gap:8px;
}
.fb-choice:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(68,214,44,.10);
}
.fb-choice-ico{font-size:2.2rem;color:var(--accent);line-height:1;margin-bottom:4px}
.fb-choice-title{font-size:1.2rem;font-weight:700;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase}
.fb-choice-desc{color:var(--text);font-size:.92rem;line-height:1.55;margin:4px 0 10px}
.fb-choice-cta{color:var(--accent);font-weight:700;letter-spacing:1px;font-size:.78rem;margin-top:auto}

.fb-back{margin:18px 0 12px}

.fb-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:26px 28px;max-width:680px;
}
.fb-h{margin:0 0 8px;color:var(--accent);font-size:1.15rem;letter-spacing:2px}
.fb-sub{color:var(--muted);font-size:.88rem;margin:0 0 18px;line-height:1.5}
.fb-form{display:flex;flex-direction:column;gap:6px}
.fb-label{font-size:.78rem;letter-spacing:1.5px;font-weight:700;color:var(--muted);margin-top:10px}
.fb-opt{color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none;font-size:.72rem;margin-left:4px;font-style:italic}
.fb-input{
  width:100%;padding:10px 12px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);border-radius:5px;
  font-family:inherit;font-size:.9rem;
  transition:border-color .15s,box-shadow .15s;
}
.fb-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(68,214,44,.18)}
.fb-textarea{resize:vertical;min-height:140px;font-family:inherit;line-height:1.5}
.fb-actions{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.fb-status{font-size:.85rem;font-weight:600}
.fb-status.ok{color:var(--accent)}
.fb-status.err{color:var(--lose)}
.fb-status a{color:var(--accent);text-decoration:underline}
.fb-note{
  margin-top:18px;padding:12px 14px;border:1px dashed var(--line-2);
  border-radius:5px;color:var(--muted);font-size:.78rem;line-height:1.55;
}

.fb-email-box{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;margin:6px 0 18px;
}
.fb-email-label{font-size:.72rem;letter-spacing:2px;color:var(--muted);font-weight:700}
.fb-email-addr{flex:1;font-size:1.05rem;font-weight:700;color:var(--accent);font-family:inherit;word-break:break-all}
.fb-link-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.fb-link-grid .btn{flex:0 1 auto}

body:not(.theme-dark) .fb-choice,
body:not(.theme-dark) .fb-card,
body:not(.theme-dark) .fb-email-box{background:#fff}
body:not(.theme-dark) .fb-input{background:#fafafa}

/* ============================================================
   BRAND SHOWDOWN (idea #5)
   ============================================================ */
.bs-vs{
  font-weight:800;letter-spacing:2px;color:var(--muted);font-size:.85rem;
  align-self:center;padding:0 4px;
}
.bs-podium{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  margin:18px 0;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:18px 22px;
}
.bs-pod{text-align:center}
.bs-pod-name{font-size:1.6rem;font-weight:800;letter-spacing:1.5px;color:var(--accent)}
.bs-pod-count{font-size:.78rem;color:var(--muted);letter-spacing:1px;margin-top:4px}
.bs-pod-vs{font-weight:800;letter-spacing:2px;color:var(--muted);font-size:.95rem}
.bs-table{
  width:100%;border-collapse:collapse;margin:14px 0;
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.bs-table th,.bs-table td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:.9rem}
.bs-table th{
  background:rgba(0,0,0,.20);color:var(--accent);font-weight:700;
  letter-spacing:1.5px;font-size:.78rem;text-align:left;
}
.bs-table th:not(:first-child),.bs-table td:not(:first-child){text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.bs-lbl{color:var(--text);font-weight:600}
.bs-table td.win {background:rgba(68,214,44,.18);color:var(--win);font-weight:800}
.bs-table td.lose{color:#ff5470;opacity:.72}
.bs-highlights{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.bs-highlight{
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
}
.bs-h-lbl{font-size:.72rem;letter-spacing:2px;color:var(--muted);font-weight:700}
.bs-h-name{font-size:1.05rem;font-weight:700;color:var(--accent);margin-top:4px}
.bs-h-meta{font-size:.82rem;color:var(--text);margin-top:2px}
.bs-h-sub{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.5}
.bs-note{color:var(--muted);font-size:.78rem;font-style:italic;margin-top:8px;line-height:1.5}
@media (max-width:640px){
  .bs-podium{grid-template-columns:1fr}
  .bs-pod-vs{padding:6px 0}
  .bs-highlights{grid-template-columns:1fr}
}

/* ============================================================
   ONBOARDING TOUR (idea #9)
   ============================================================ */
.tour-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:300;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  animation:tourFade .25s ease-out;
}
.tour-overlay[hidden]{display:none}
@keyframes tourFade{from{opacity:0}to{opacity:1}}
.tour-card{
  background:var(--bg-2);border:1px solid var(--accent);border-radius:10px;
  padding:28px 30px 22px;max-width:560px;width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(68,214,44,.18);
}
.tour-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tour-step-num{
  font-size:.72rem;letter-spacing:2px;font-weight:700;color:var(--muted);
}
.tour-skip{
  background:transparent;border:none;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:.78rem;letter-spacing:1.5px;padding:4px 8px;
  border-radius:3px;text-transform:uppercase;
}
.tour-skip:hover{color:var(--lose);background:rgba(255,84,112,.08)}
.tour-bar{
  height:4px;background:var(--bg);border-radius:2px;overflow:hidden;
  margin-bottom:18px;
}
.tour-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width .3s ease-out;
}
.tour-card h2{
  margin:0 0 12px 0;color:var(--accent);font-size:1.2rem;letter-spacing:1px;
}
.tour-body{color:var(--text);font-size:.92rem;line-height:1.6;min-height:140px}
.tour-body p{margin:8px 0}
.tour-body ul{margin:8px 0;padding-left:22px}
.tour-body li{margin:5px 0}
.tour-body kbd{
  display:inline-block;background:var(--bg);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:4px;padding:2px 7px;
  font-family:inherit;font-size:.82em;font-weight:700;color:var(--accent);
}
.tour-tip{
  margin-top:12px !important;padding:8px 12px;background:rgba(68,214,44,.08);
  border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  font-size:.85rem;color:var(--muted);
}
.tour-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
}
.tour-foot .btn:disabled{opacity:.4;cursor:not-allowed}

body:not(.theme-dark) .bs-podium,
body:not(.theme-dark) .bs-table,
body:not(.theme-dark) .bs-highlight,
body:not(.theme-dark) .tour-card{background:#fff}

/* ============================================================
   SETTINGS page (card-layout customization)
   ============================================================ */
.settings-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:18px;margin-top:16px;
}
.settings-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:22px 24px;
}
.settings-card h3{
  margin:0 0 8px;color:var(--accent);font-size:1rem;letter-spacing:1.5px;
  border-bottom:1px solid var(--line);padding-bottom:8px;
}
.settings-desc{color:var(--muted);font-size:.85rem;line-height:1.55;margin:8px 0 14px}
.cl-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.cl-slot{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:6px 10px}
.cl-slot-num{font-size:.7rem;color:var(--muted);font-weight:800;letter-spacing:1px;min-width:14px}
.cl-pick{
  flex:1;background:transparent;border:none;color:var(--text);
  font-family:inherit;font-size:.85rem;font-weight:600;padding:4px 0;cursor:pointer;
}
.cl-pick:focus{outline:none;color:var(--accent)}
.cl-preview-wrap{margin:18px 0 8px;padding:14px;background:var(--bg);border:1px dashed var(--line-2);border-radius:6px}
.cl-preview-label{font-size:.7rem;letter-spacing:2px;color:var(--muted);font-weight:700;margin-bottom:10px}
.cl-preview{max-width:340px}
.settings-card ul{margin:8px 0;padding-left:22px}
.settings-card li{margin:6px 0;line-height:1.55;font-size:.88rem}
.settings-card kbd{
  display:inline-block;background:var(--bg);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:4px;padding:2px 7px;
  font-family:inherit;font-size:.82em;font-weight:700;color:var(--accent);
}
.settings-actions{margin-top:14px;display:flex;justify-content:flex-end}
body:not(.theme-dark) .settings-card{background:#fff}

/* ============================================================
   CPU/GPU BOTTLENECK pills + modal block
   ============================================================ */
.bn-pill{
  display:inline-block;padding:3px 9px;border-radius:3px;font-size:.7rem;
  font-weight:800;letter-spacing:1px;border:1px solid;line-height:1.2;
}
.bn-pill.good{color:#5fd6a8;border-color:rgba(95,214,168,.5);background:rgba(95,214,168,.10)}
.bn-pill.warn{color:#ffb020;border-color:rgba(255,176,32,.55);background:rgba(255,176,32,.12)}
.ov-pill.cpubot{color:#ffb020;border-color:rgba(255,176,32,.55);background:rgba(255,176,32,.12)}
.ov-pill.gpubot{color:#9b6bff;border-color:rgba(155,107,255,.55);background:rgba(155,107,255,.12)}

/* ============================================================
   ACHIEVEMENTS (#11) — toast + Help section grid
   ============================================================ */
.ach-toast{
  position:fixed;bottom:24px;right:24px;z-index:500;
  display:flex;align-items:flex-start;gap:14px;
  background:var(--bg-2);border:1px solid var(--accent);
  border-radius:8px;padding:14px 18px;min-width:280px;max-width:380px;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 2px rgba(68,214,44,.18);
  transform:translateX(120%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1.2),opacity .25s;
}
.ach-toast.in{transform:translateX(0);opacity:1}
.ach-toast-ico{font-size:2rem;line-height:1;margin-top:2px}
.ach-toast-title{font-size:.7rem;letter-spacing:2px;color:var(--accent);font-weight:800;text-transform:uppercase}
.ach-toast-name{font-size:1.02rem;font-weight:700;margin-top:2px;color:var(--text)}
.ach-toast-desc{font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.45}

.ach-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;margin-top:14px;
}
.ach-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;
  transition:border-color .15s;
}
.ach-item.got{border-color:rgba(68,214,44,.4);background:rgba(68,214,44,.06)}
.ach-item.locked{opacity:.55}
.ach-ico{font-size:1.5rem;line-height:1;width:32px;text-align:center;filter:grayscale(0)}
.ach-item.locked .ach-ico{filter:grayscale(1) opacity(.55)}
.ach-name{font-size:.82rem;font-weight:700;color:var(--text)}
.ach-item.got .ach-name{color:var(--accent)}
.ach-desc{font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:2px}

/* ============================================================
   KO-FI DONATION UI
   ============================================================ */
.nav-kofi{
  background:rgba(255,93,93,.12);border:1px solid rgba(255,93,93,.5);
  color:#ff7a7a;font-weight:700;letter-spacing:.5px;
  transition:background .15s,transform .12s;
}
.nav-kofi:hover{
  background:rgba(255,93,93,.22);color:#ff9a9a;transform:translateY(-1px);
}
body:not(.theme-dark) .nav-kofi{
  background:rgba(255,93,93,.10);color:#d94040;border-color:rgba(217,64,64,.5);
}
body:not(.theme-dark) .nav-kofi:hover{
  background:rgba(255,93,93,.18);color:#b73030;
}

/* Ko-fi variant of the Feedback chooser cards */
.fb-choice-kofi{
  text-decoration:none;
  background:linear-gradient(135deg, rgba(255,93,93,.06), var(--bg-2));
  border-color:rgba(255,93,93,.4) !important;
}
.fb-choice-kofi:hover{
  border-color:#ff7a7a !important;
  box-shadow:0 8px 24px rgba(255,93,93,.18) !important;
}
.fb-choice-kofi .fb-choice-ico,
.fb-choice-kofi .fb-choice-title,
.fb-choice-kofi .fb-choice-cta{color:#ff7a7a}
body:not(.theme-dark) .fb-choice-kofi .fb-choice-ico,
body:not(.theme-dark) .fb-choice-kofi .fb-choice-title,
body:not(.theme-dark) .fb-choice-kofi .fb-choice-cta{color:#d94040}

/* ============================================================
   FLOATING KO-FI PILL — bottom-left, always visible, low-pressure.
   Default state: small coffee icon + faded "Support" label.
   Hover: gently brightens + lifts. No pop-up, no auto-expand.
   ============================================================ */
.kofi-float{
  position:fixed;left:18px;bottom:18px;z-index:120;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:rgba(20,20,24,0.92);
  border:1px solid rgba(255,93,93,.45);
  color:#ff9a9a;text-decoration:none;
  font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:.72;
  transition:opacity .18s,transform .18s,background .18s,border-color .18s,box-shadow .18s;
  backdrop-filter:blur(6px);
}
.kofi-float:hover{
  opacity:1;
  transform:translateY(-2px);
  background:rgba(40,20,20,0.96);
  border-color:#ff7a7a;
  color:#ffb3b3;
  box-shadow:0 8px 22px rgba(255,93,93,.28);
}
.kofi-float-ico{font-size:1rem;line-height:1}
.kofi-float-label{font-size:.74rem}

/* Slightly smaller on narrow screens, no label below 480px */
@media (max-width: 600px){
  .kofi-float{padding:8px 12px;left:12px;bottom:12px}
  .kofi-float-label{font-size:.7rem}
}
@media (max-width: 420px){
  .kofi-float-label{display:none}
  .kofi-float{padding:9px 11px;border-radius:50%;width:38px;height:38px;justify-content:center}
  .kofi-float-ico{font-size:1.15rem}
}

/* Light theme: lighter background, darker red text */
body:not(.theme-dark) .kofi-float{
  background:rgba(255,255,255,.92);
  border-color:rgba(217,64,64,.45);
  color:#d94040;
}
body:not(.theme-dark) .kofi-float:hover{
  background:#fff;border-color:#d94040;color:#a82020;
  box-shadow:0 8px 22px rgba(217,64,64,.22);
}

/* ============================================================
   LIVE "MEMBERS ONLINE" BADGE — bottom-left, sits just above
   the donation pill. Hidden until WAU populates the count.
   ============================================================ */
.online-badge{
  position:fixed;left:18px;bottom:64px;z-index:119;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(20,20,24,0.92);
  border:1px solid rgba(95,214,168,.5);
  color:#5fd6a8;
  font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.ob-dot{
  width:7px;height:7px;border-radius:50%;background:#5fd6a8;
  box-shadow:0 0 8px rgba(95,214,168,.8);
  animation:obPulse 1.6s ease-in-out infinite;
}
@keyframes obPulse{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%    {opacity:1;   transform:scale(1.15)}
}
.ob-num{color:#fff;font-size:.85rem;font-variant-numeric:tabular-nums}
.ob-label{color:rgba(255,255,255,.7);font-size:.65rem}

/* On very narrow screens, hide the label */
@media (max-width: 480px){
  .ob-label{display:none}
  .online-badge{padding:5px 10px}
}

body:not(.theme-dark) .online-badge{
  background:rgba(255,255,255,.95);
  border-color:rgba(34,140,98,.4);
  color:#1f7a52;
}
body:not(.theme-dark) .ob-dot{
  background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5);
}
body:not(.theme-dark) .ob-num{color:#111}
body:not(.theme-dark) .ob-label{color:#666}

/* ============================================================
   MOBILE UX FIXES (≤ 720 px)
   Targeted polish for the worst offenders on small screens:
   compare table overflow, drawer/donate collision, tap targets,
   filter panel cramping, nav crowding.
   ============================================================ */
@media (max-width: 720px){

  /* --- Tap targets: ensure 44px minimum for buttons + nav items --- */
  .nav-btn,
  .btn,
  .icon-btn,
  .heart,
  .qd-rm,
  .modal-close,
  .pg-btn,
  .pg-num,
  .bm-tab {
    min-height: 38px;
    min-width: 38px;
  }
  .nav-btn { padding: 8px 12px; font-size: .82rem; }

  /* --- Nav: stop the bar from getting cramped, wrap into a tidy column --- */
  nav { padding: 10px 12px; }
  nav .links { gap: 6px 8px; }
  .currency-select { padding: 6px 8px; font-size: .8rem; }

  /* --- Shop toolbar: stack vertically instead of squeezing --- */
  .toolbar {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  }
  .toolbar > * { width: 100%; }
  #search, #brand-filter, #cat-filter, #sort { font-size: 16px; }   /* 16px = no iOS auto-zoom on focus */

  /* --- Compare table: wrap the table in a scrolling container so it doesn't burst the page --- */
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;            /* bleed to screen edges so swipe area is bigger */
    padding: 0 12px;
  }
  .compare-table { min-width: 560px; font-size: .82rem; }
  .compare-table th, .compare-table td { padding: 8px 10px; }
  /* Sticky first column so the user always sees what each row is */
  .compare-table th:first-child,
  .compare-table td:first-child {
    position: sticky; left: 0; background: var(--bg-2); z-index: 2;
    border-right: 1px solid var(--line);
  }

  /* Compare podium: stack instead of overlapping */
  .compare-podium { grid-template-columns: 1fr; gap: 10px; }

  /* Radar chart needs breathing room */
  .radar-wrap { flex-direction: column; align-items: center; }
  .radar-svg { max-width: 100%; height: auto; }

  /* --- Quick-compare drawer at the bottom collides with the donate pill + online badge.
         Move drawer up and reduce body padding so user can still scroll. --- */
  .quick-drawer { padding: 8px 10px; }
  .qd-head { flex-wrap: wrap; gap: 6px; }
  .qd-list { gap: 6px; }
  .qd-chip { padding: 5px 8px; max-width: 100%; }
  .qd-name { font-size: .78rem; max-width: 140px; }
  .qd-meta { font-size: .68rem; }

  /* When the drawer is visible (not [hidden]), push the donate pill + online badge
     above it so they don't get covered. */
  .quick-drawer:not([hidden]) ~ .kofi-float       { bottom: 142px; }
  .quick-drawer:not([hidden]) ~ .online-badge     { bottom: 188px; }

  /* --- Filter panel: stop the 2-column grid from cramping --- */
  .filter-panel { padding: 12px; }
  .fp-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .fp-row label { font-size: .82rem; }
  .fp-row input[type="range"] { width: 100%; }

  /* --- Cards: smaller, denser, sharper --- */
  .card { padding: 12px 14px; }
  .card .name { font-size: 1rem; line-height: 1.25; }
  .card .specs { grid-template-columns: 60px 1fr; gap: 4px 8px; font-size: .82rem; }
  .card .stat-strip { font-size: .68rem; }
  .card .actions .icon-btn { font-size: .7rem; padding: 6px 8px; }

  /* --- Modal: max-height + scroll instead of pushing the close button offscreen --- */
  .modal-card {
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
  }
  .md-fps-table { font-size: .82rem; }
  .md-fps-table th, .md-fps-table td { padding: 6px 8px; }

  /* --- Sidebar layout (About / Help / Settings): label list collapses to top tabs (already in place),
         tighten content padding --- */
  .sb-content { padding: 16px 14px; max-height: none; }

  /* --- Donate + online pill: smaller on phones --- */
  .kofi-float    { left: 12px; bottom: 12px; padding: 7px 11px; font-size: .72rem; }
  .online-badge  { left: 12px; bottom: 56px; padding: 5px 10px; }

  /* --- Headings: tighter on mobile to not eat all the screen --- */
  h1 { font-size: 1.4rem; margin: 8px 0 4px; }
  .subtitle { font-size: .82rem; margin-bottom: 12px; }
}

/* ---- Very narrow phones (≤ 380 px) — extra-tight ---- */
@media (max-width: 380px){
  .card { padding: 10px 12px; }
  .card .stat-strip span { font-size: .62rem; }
  .compare-table { font-size: .76rem; }
  .quick-drawer { font-size: .8rem; }
}

/* ============================================================
   UI MODE — Normal vs Advanced
   Normal mode hides the most "power-user" elements to give first-
   time visitors a cleaner experience. Toggle via the nav dropdown
   or Settings → View mode.
   ============================================================ */

/* Style the nav mode dropdown to stand out slightly from currency */
.ui-mode-select{
  border-color: rgba(68,214,44,.4);
  color: var(--accent);
  font-weight: 700;
}
.ui-mode-select:hover{
  border-color: var(--accent);
}

/* Settings: mode-toggle big buttons */
.mode-toggle-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 600px){
  .mode-toggle-row{ grid-template-columns: 1fr; }
}
.mode-toggle-btn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .15s, transform .12s;
}
.mode-toggle-btn:hover{ border-color: var(--accent); transform: translateY(-1px); }
.mode-toggle-btn.active{
  border-color: var(--accent);
  background: rgba(68,214,44,.08);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.mtb-title{ font-size: 1.1rem; font-weight: 800; letter-spacing: 1px; color: var(--accent); }
.mtb-desc{ font-size: .85rem; color: var(--muted); line-height: 1.4; }
.mode-detail{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .85rem;
  color: var(--text);
  line-height: 1.55;
}
.mode-detail b{ color: var(--accent); }

/* ============================================================
   NORMAL MODE — what gets hidden
   ============================================================ */
/* Cards: hide the dense 9-number stat strip + mini radar */
body.mode-normal .stat-strip,
body.mode-normal .mini-radar { display: none !important; }

/* Cards: hide "Similar" / "Beat It" / "Value" buttons, keep only the heart + Details */
body.mode-normal .card .actions .icon-btn[onclick*="findSimilar"],
body.mode-normal .card .actions .icon-btn[onclick*="beatThis"],
body.mode-normal .card .actions .icon-btn[onclick*="checkValueFor"] { display: none !important; }

/* Nav: hide advanced tools that overwhelm first-time users */
body.mode-normal [data-page="ai-picker"],
body.mode-normal [data-page="brand-showdown"],
body.mode-normal [data-page="game-finder"],
body.mode-normal [data-page="charts"],
body.mode-normal [data-page="value-lead"] { display: none !important; }

/* Nav groups: hide entire Rankings dropdown except Tier List (move that out conceptually) */
body.mode-normal .nav-group:has(.nav-group-btn:first-child) [data-page="ai-rank"],
body.mode-normal .nav-group:has(.nav-group-btn:first-child) [data-page="value-lead"] { display: none !important; }

/* Recommend page: hide the "Customize" button (custom weights are advanced) */
body.mode-normal #rec-customize-btn { display: none !important; }

/* Achievement toasts: still allowed (they're fun), but the section in Help is hidden */
body.mode-normal .sb-link[data-sec="achievements"] { display: none !important; }
body.mode-normal .sb-section[data-sec="achievements"] { display: none !important; }

/* AI Rank page: simpler view (still accessible, just less dense) */
body.mode-normal .tps-pill { display: none !important; }
body.mode-normal .model-fits { display: none !important; }

/* On-card pills (CPU/GPU bottleneck, quiet/loud thermals) — advanced info */
body.mode-normal .ov-pill.cpubot,
body.mode-normal .ov-pill.gpubot,
body.mode-normal .ov-pill.loud { display: none !important; }
/* Keep the alert + quiet/cool pills — those are user-set or universally useful */

/* ============================================================
   ADVANCED MODE — currently no special styling, just default behavior
   ============================================================ */

/* ============================================================
   MOBILE: HAMBURGER NAV + DRAWER (≤ 720 px)
   ============================================================ */
/* Hamburger button: hidden on desktop, shown on mobile via @media below.
   Uses hard-coded colors (NOT CSS variables) so it's always visible no
   matter what theme/cascade weirdness is happening. */
.nav-hamburger{ display: none; }
.hamb-line{
  display: block;
  width: 22px;
  height: 3px;
  background: #1c1917;       /* dark — visible on light nav (default) */
  margin: 4px 0;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
body.theme-dark .hamb-line{
  background: #fafafa;       /* light — visible on dark nav */
}

@media (max-width: 720px){
  /* Show hamburger, hide the bar — !important defends against any
     conflicting older rules in styles.css. Uses hard-coded colors so
     it's guaranteed visible in any theme. */
  nav .nav-hamburger,
  .nav-hamburger{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;          /* solid white pill in light mode */
    border: 1.5px solid #1c1917 !important;  /* dark border for clear edge */
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: auto !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.08) !important;
  }
  body.theme-dark nav .nav-hamburger,
  body.theme-dark .nav-hamburger{
    background: #1c1917 !important;           /* dark in dark mode */
    border-color: #fafafa !important;
  }
  .nav-hamburger[aria-expanded="true"] .hamb-line:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  .nav-hamburger[aria-expanded="true"] .hamb-line:nth-child(2){
    opacity: 0;
  }
  .nav-hamburger[aria-expanded="true"] .hamb-line:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }

  nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    flex-wrap: nowrap;
  }
  nav .brand{ font-size: .95rem; }

  /* Drawer — hidden via display:none by default. Use BOTH `nav .links`
     and `.links` to win the cascade against the original line-126 rule. */
  nav > .links:not(.open),
  nav .links:not(.open){
    display: none !important;
  }
  /* The drawer when open — every property !important to defeat conflicts. */
  nav > .links.open,
  nav .links.open,
  .links.open{
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    height: 100vh !important;                 /* explicit height instead of top:0+bottom:0
                                                  — more reliable across mobile browsers */
    width: 86% !important;
    max-width: 340px !important;
    background: #ffffff !important;           /* solid white in light mode */
    border-left: 1px solid #d6d3d1 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 70px 16px 24px !important;
    margin: 0 !important;
    z-index: 9999 !important;                 /* well above everything else */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -10px 0 30px rgba(0,0,0,.35) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;          /* defensive — ensure clicks actually land */
    animation: drawerSlideIn .25s ease-out;
  }
  /* All children of the drawer must accept clicks */
  nav .links.open *,
  .links.open *{
    pointer-events: auto !important;
  }
  body.theme-dark nav .links.open,
  body.theme-dark .links.open{
    background: #0a0a0b !important;
    border-left-color: #27272a !important;
  }
  @keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
  }
  /* Backdrop also needs higher z-index to actually appear above content */
  .nav-backdrop{ z-index: 9998 !important; }
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);     /* much lighter — page underneath stays visible */
    z-index: 249;
    animation: navBackdropFade .2s ease-out;
  }
  .nav-backdrop[hidden]{ display: none; }
  @keyframes navBackdropFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* All links in the drawer fill the width and become left-aligned */
  .links .nav-btn,
  .links .nav-group,
  .links .nav-group-btn{
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 6px;
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    background: transparent;
    color: var(--text);
  }
  .links .nav-btn.active{
    background: rgba(68,214,44,.10);
    color: var(--accent);
    border-left: 3px solid var(--accent);
    padding-left: 11px;
  }

  /* Nav-group dropdowns become inline expandable sections */
  .links .nav-group{
    padding: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
  }
  .links .nav-group-btn{ border-bottom: none; }
  .links .nav-menu{
    position: static !important;
    display: none !important;
    background: rgba(0,0,0,.04);
    padding: 4px 0 4px 14px;
    box-shadow: none !important;
    border: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .links .nav-group.open .nav-menu{ display: flex !important; }
  .links .nav-menu .nav-btn{
    border-bottom: 1px solid rgba(255,255,255,.03);
    padding: 10px 14px;
    font-size: .9rem;
  }

  /* Bottom-of-drawer controls: mode/currency/theme/support */
  .links .currency-select,
  .links .ui-mode-select{
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;        /* prevents iOS zoom on focus */
    margin-top: 6px;
    text-align: left;
  }
  .links .theme-toggle{
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

/* ============================================================
   MOBILE: BOTTOM-SHEET MODAL (≤ 720 px)
   Slides up from the bottom of the screen instead of being centered.
   Adds a pull-bar indicator for visual cue that it's a sheet.
   ============================================================ */
@media (max-width: 720px){
  .modal-backdrop{
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-card{
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    padding: 14px 18px 24px !important;
    animation: sheetSlideUp .25s ease-out;
  }
  /* Pull-handle bar at the very top */
  .modal-card::before{
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    margin: 4px auto 12px;
    opacity: .55;
  }
  @keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }
  /* Alert modal: same treatment */
  #alert-modal .alert-card{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ============================================================
   MOBILE: RESPONSIVE SVG CHARTS
   Keep charts inside the viewport instead of overflowing.
   ============================================================ */
.scatter-svg,
.timeline-svg,
.hist-svg,
.radar-svg{
  max-width: 100%;
  height: auto;
}
@media (max-width: 720px){
  .hist-grid{ grid-template-columns: 1fr; }
  .charts-toolbar{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .charts-toolbar select,
  .charts-toolbar .charts-hint{
    width: 100%;
    font-size: .85rem;
  }
}

/* ============================================================
   FLOATING "SCROLL TO TOP" BUTTON
   ============================================================ */
.scroll-top{
  position: fixed;
  right: 18px;
  bottom: 80px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  opacity: .85;
  transition: opacity .2s, transform .15s;
  padding: 0;
  line-height: 1;
}
.scroll-top:hover{ opacity: 1; transform: translateY(-2px); }
.scroll-top[hidden]{ display: none; }
@media (max-width: 720px){
  .scroll-top{
    right: 14px;
    bottom: 70px;
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   MOBILE: LARGER SLIDER THUMBS
   The default browser slider thumb is hard to grab with a finger.
   ============================================================ */
@media (max-width: 720px){
  .fp-row input[type="range"],
  .rcp-slider{
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }
  .fp-row input[type="range"]::-webkit-slider-runnable-track,
  .rcp-slider::-webkit-slider-runnable-track{
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    border: none;
  }
  .fp-row input[type="range"]::-webkit-slider-thumb,
  .rcp-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: -10px;
    cursor: pointer;
    border: 2px solid var(--bg);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
  }
  .fp-row input[type="range"]::-moz-range-thumb,
  .rcp-slider::-moz-range-thumb{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg);
  }
  .fp-row input[type="range"]::-moz-range-track,
  .rcp-slider::-moz-range-track{
    height: 6px;
    background: var(--line);
    border-radius: 3px;
  }
}

/* ============================================================
   MOBILE: MISC POLISH
   ============================================================ */
@media (max-width: 720px){
  /* Achievement toasts: don't cover the whole screen */
  .ach-toast{
    right: 12px;
    left: 12px;
    max-width: none;
    bottom: 80px;             /* avoid collision with donate pill */
  }

  /* Score-breakdown popover: wider on mobile, less margin */
  .score-pop{
    width: calc(100vw - 32px) !important;
    max-width: 360px;
    left: 16px !important;
  }

  /* Quick-peek hover preview: just disable on mobile (no hover) */
  #quick-peek{ display: none !important; }

  /* Modal close button: larger tap target */
  .modal-close{
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
    top: 8px;
    right: 8px;
  }

  /* Sticky search bar on Shop — keeps search reachable when scrolling cards */
  #page-shop.active .toolbar{
    position: sticky;
    top: 0;
    z-index: 80;
    background: var(--bg);
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Make tap-target rule for cards apply to entire card area */
  .card{ cursor: pointer; }
}