/* =============================================================
   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}