/* ============================================================
   THEME TOKENS
   Dark is default. .theme-light flips the surface tokens.
   --accent-1 / --accent-2 are always live variables so the
   "custom" theme just repoints them — everything else reads
   from these two.
   ============================================================ */
:root{
  --bg-0:#0a0e17; --bg-1:#0d1424; --bg-2:#121a2e;
  --surface:#131b2e; --surface-2:#182238; --border:#232f4a;
  --text-0:#eef1f8; --text-1:#aab4cc; --text-2:#6c7896;
  --accent-1:#3b82f6; --accent-2:#8b5cf6;
  --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --radius:14px; --radius-sm:9px;
  --mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
.theme-light{
  --bg-0:#f4f6fb; --bg-1:#eef1f8; --bg-2:#e7ebf5;
  --surface:#ffffff; --surface-2:#f4f6fb; --border:#dde3f0;
  --text-0:#131b2e; --text-1:#4a5470; --text-2:#8791ac;
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-0);
  color:var(--text-0);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-0.01em;}
p{margin:0;}
.muted{color:var(--text-1); font-size:14px; line-height:1.5;}
button{font-family:inherit; cursor:pointer;}
select,input{font-family:inherit;}
::selection{background:var(--accent-1); color:#fff;}

/* ============================================================ LAYOUT */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh;}

.sidebar{
  background:var(--bg-1); border-right:1px solid var(--border);
  padding:20px 16px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:4px 6px;}
.brand-mark{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#fff; font-size:15px;
}
.brand-name{font-weight:700; font-size:15px;}
.brand-tag{font-size:11px; color:var(--text-2);}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav-btn{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:none; border:none; color:var(--text-1); font-size:14px; font-weight:500;
  padding:10px 12px; border-radius:var(--radius-sm); transition:background .15s, color .15s;
}
.nav-btn:hover{background:var(--surface-2); color:var(--text-0);}
.nav-btn.active{background:var(--surface-2); color:var(--text-0);}
.nav-btn.active .nav-icon{color:var(--accent-1);}
.nav-icon{width:18px; text-align:center; color:var(--text-2); font-size:14px;}

.sidebar-foot{margin-top:auto; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);}
.foot-label{font-size:11px; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.foot-build{font-size:13px; font-weight:600;}

.main{padding:28px 34px 60px; max-width:1180px;}

.view{display:none;}
.view.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.view-head h1{font-size:26px; margin-bottom:4px;}

/* ============================================================ HERO (onboarding) */
.hero{
  background:linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:52px 40px; margin-bottom:24px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent-1) 22%, transparent), transparent 60%);
}
.hero-copy{position:relative; max-width:520px;}
.hero-copy h1{font-size:40px; line-height:1.1; margin-bottom:14px;}
.hero-copy p{color:var(--text-1); font-size:15px; line-height:1.6; margin-bottom:22px;}

/* ============================================================ CARDS */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px;
}
.card-title{font-size:13px; font-weight:650; color:var(--text-1); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px;}
.card-title-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.card-title-row .card-title{margin-bottom:8px;}

.dash-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:16px; margin-bottom:18px;}
@media (max-width:980px){.dash-grid{grid-template-columns:1fr 1fr;}}

.spec-list{display:flex; flex-direction:column; gap:10px;}
.spec-row{display:flex; justify-content:space-between; gap:10px; font-size:13px;}
.spec-row .k{color:var(--text-2);}
.spec-row .v{font-weight:600; text-align:right; font-family:var(--mono); font-size:12.5px;}

.score-card{display:flex; flex-direction:column; align-items:center; text-align:center;}
.score-ring-wrap{position:relative; width:120px; height:120px; margin:4px 0 8px;}
.score-ring{width:120px; height:120px; transform:rotate(-90deg);}
.score-ring-bg{fill:none; stroke:var(--border); stroke-width:9;}
.score-ring-fg{fill:none; stroke:var(--accent-1); stroke-width:9; stroke-linecap:round; stroke-dasharray:327; transition:stroke-dashoffset .5s ease;}
.score-ring-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:750; font-family:var(--mono);}
.score-verdict{font-size:13px; font-weight:600; padding:3px 10px; border-radius:100px; background:var(--surface-2);}

.bottleneck-tag{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:650; padding:5px 10px; border-radius:100px; margin-bottom:10px;}
.bottleneck-tag.gpu{background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn);}
.bottleneck-tag.cpu{background:color-mix(in srgb, var(--accent-2) 18%, transparent); color:var(--accent-2);}
.bottleneck-tag.balanced{background:color-mix(in srgb, var(--good) 18%, transparent); color:var(--good);}
.bottleneck-bars{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.bl-row{display:flex; align-items:center; gap:8px; font-size:12px;}
.bl-label{width:34px; color:var(--text-2);}
.bl-track{flex:1; height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.bl-fill{height:100%; border-radius:4px;}
.bl-pct{width:36px; text-align:right; font-family:var(--mono); color:var(--text-1);}

.power-total{font-size:24px; font-weight:750; font-family:var(--mono); margin-bottom:10px;}
.power-row{display:flex; justify-content:space-between; font-size:12.5px; padding:4px 0; color:var(--text-1);}
.power-row .dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px;}
.psu-note{margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:12px; color:var(--text-2);}

/* ============================================================ GAME ROWS */
.game-rows{display:flex; flex-direction:column;}
.game-row{
  display:grid; grid-template-columns:1fr 90px 190px 92px; align-items:center; gap:14px;
  padding:11px 4px; border-bottom:1px solid var(--border);
}
.game-row:last-child{border-bottom:none;}
.game-name{font-size:14px; font-weight:600;}
.game-fps{font-family:var(--mono); font-size:14px; text-align:right; font-weight:650;}
.game-bar-track{height:8px; background:var(--surface-2); border-radius:5px; overflow:hidden;}
.game-bar-fill{height:100%; border-radius:5px;}
.game-rating{font-size:12px; font-weight:650; text-align:right; padding:3px 9px; border-radius:100px; justify-self:end;}
.rating-Excellent{color:var(--good); background:color-mix(in srgb, var(--good) 16%, transparent);}
.rating-Great{color:#7dd3fc; background:color-mix(in srgb,#7dd3fc 16%, transparent);}
.rating-Good{color:var(--accent-1); background:color-mix(in srgb, var(--accent-1) 16%, transparent);}
.rating-Playable{color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent);}
.rating-Poor{color:#fb923c; background:color-mix(in srgb,#fb923c 16%, transparent);}
.rating-Unplayable{color:var(--bad); background:color-mix(in srgb, var(--bad) 16%, transparent);}
@media (max-width:700px){
  .game-row{grid-template-columns:1fr 70px 90px; }
  .game-row .game-bar-track{display:none;}
}

/* ============================================================ FILTERS */
.filters{display:flex; flex-wrap:wrap; gap:10px;}
.input{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-0);
  padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; min-width:130px;
}
.input:focus{outline:2px solid var(--accent-1); outline-offset:1px;}
#gameSearch{flex:1; min-width:200px;}

/* ============================================================ BUTTONS */
.btn{
  border:1px solid transparent; padding:9px 16px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; transition:transform .1s, opacity .15s, background .15s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#fff;}
.btn-primary:hover{opacity:.92;}
.btn-ghost{background:var(--surface-2); color:var(--text-0); border-color:var(--border);}
.btn-ghost:hover{background:var(--border);}
.btn-danger{background:color-mix(in srgb, var(--bad) 14%, transparent); color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, transparent);}
.btn-lg{padding:13px 24px; font-size:14.5px;}
.btn-sm{padding:6px 11px; font-size:12px;}

/* ============================================================ BUILDS */
.builds-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.build-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px;
  display:flex; flex-direction:column; gap:10px; position:relative;
}
.build-card.is-active{border-color:var(--accent-1); box-shadow:0 0 0 1px var(--accent-1);}
.build-card-title{display:flex; align-items:center; justify-content:space-between;}
.build-card-title h3{font-size:15px;}
.active-pill{font-size:10.5px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); padding:2px 8px; border-radius:100px;}
.build-card-specs{font-size:12.5px; color:var(--text-1); line-height:1.6; font-family:var(--mono);}
.build-card-actions{display:flex; gap:8px; margin-top:4px;}

/* ============================================================ COMPARE */
.compare-picker{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.compare-picker select{flex:1;}
.vs{font-weight:700; color:var(--text-2); font-size:13px;}
.compare-table{width:100%; border-collapse:collapse; font-size:13px;}
.compare-table th{text-align:left; color:var(--text-2); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:8px 10px; border-bottom:1px solid var(--border);}
.compare-table td{padding:9px 10px; border-bottom:1px solid var(--border); font-family:var(--mono);}
.compare-table td.win{color:var(--good); font-weight:700;}
.compare-summary{display:flex; gap:18px; margin-bottom:16px;}
.compare-summary .card{flex:1; margin-bottom:0; text-align:center;}
.compare-summary .num{font-size:22px; font-weight:750; font-family:var(--mono);}

/* ============================================================ SETTINGS */
.theme-options{display:flex; gap:10px; margin-bottom:4px;}
.theme-swatch{
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-1); font-size:13px; font-weight:600;
}
.theme-swatch.active{border-color:var(--accent-1); color:var(--text-0); box-shadow:0 0 0 1px var(--accent-1);}
.accent-row{display:none; gap:20px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border);}
.accent-row.show{display:flex;}
.accent-row label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-2);}
.accent-row input[type=color]{width:60px; height:32px; border:none; border-radius:7px; background:none; padding:0;}
.settings-row{display:flex; gap:20px; flex-wrap:wrap;}
.settings-row label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-2);}
.settings-actions{display:flex; gap:10px; margin-top:10px;}

/* ============================================================ MODAL */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(4,7,14,.6); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border);}
.modal-close{background:none; border:none; color:var(--text-2); font-size:16px;}
.modal-body{padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:14px;}
.modal-body label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-2); font-weight:600;}
.modal-body .input{width:100%;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border);}

/* ============================================================ RESPONSIVE */
@media (max-width:840px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:12px;}
  .sidebar-foot{display:none;}
  .nav{flex-direction:row;}
  .nav-btn{white-space:nowrap;}
  .main{padding:20px;}
  .dash-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .view.active{animation:none;}
}