@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0a0d11; --panel:#11161c; --panel2:#0d1217; --line:#1d262f;
  --ink:#c9d4df; --dim:#6b7a89; --dim2:#475563;
  --green:#54e6a0; --greenlo:#2f7d5e; --amber:#ffb454; --red:#ff6b6b;
  --accent:#54e6a0; --baseline:#1a2b2f;
  --barbg:#161d24;
  --intel:#4fa3ff; --intel-lo:#1e3a5f;
  --amd:#ff5c5c; --amd-lo:#5f1e1e;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px}
body{
  background-image:
    linear-gradient(transparent 95%, rgba(84,230,160,.025) 100%),
    linear-gradient(90deg, transparent 95%, rgba(84,230,160,.025) 100%);
  background-size:34px 34px;
  padding:28px 20px 80px;
}
.wrap{max-width:1280px;margin:0 auto}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
header{margin-bottom:22px;border-bottom:1px solid var(--line);padding-bottom:18px}
h1{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:26px;
  letter-spacing:.5px;margin:0 0 6px;color:#eef4f8}
h1 .acc{color:var(--accent)}
.sub{color:var(--dim);font-size:12px;line-height:1.7;max-width:820px}
.sub b{color:var(--ink);font-weight:500}
.tag{display:inline-block;border:1px solid var(--line);border-radius:3px;
  padding:1px 7px;color:var(--accent);font-size:11px;margin-right:4px}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font-size:11.5px;color:var(--dim);margin-bottom:14px}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--dim2)}
.crumb .here{color:var(--ink)}

/* ---------- vendor toggle (hub) ---------- */
.vendors{display:flex;gap:12px;margin:6px 0 26px}
.vendor-btn{flex:1;display:flex;flex-direction:column;gap:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;cursor:pointer;transition:.15s;text-align:left;
  font-family:inherit;color:var(--dim)}
.vendor-btn .vn{font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:22px;letter-spacing:1px}
.vendor-btn .vd{font-size:11px;color:var(--dim2)}
.vendor-btn:hover{border-color:var(--dim);color:var(--ink)}
.vendor-btn.on{color:#eef4f8}
.vendor-btn[data-v="intel"].on{border-color:var(--intel);
  box-shadow:inset 0 0 0 1px var(--intel),0 0 22px -8px var(--intel)}
.vendor-btn[data-v="intel"].on .vn{color:var(--intel)}
.vendor-btn[data-v="amd"].on{border-color:var(--amd);
  box-shadow:inset 0 0 0 1px var(--amd),0 0 22px -8px var(--amd)}
.vendor-btn[data-v="amd"].on .vn{color:var(--amd)}

/* ---------- nav sections / cards ---------- */
.navsection{margin-bottom:26px;display:none}
.navsection.show{display:block}
.sectitle{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15px;
  color:#eef4f8;margin:0 0 4px;letter-spacing:.4px}
.sectitle .c{color:var(--dim);font-weight:400;font-size:11px;margin-left:8px;
  font-family:'JetBrains Mono',monospace}
.secline{height:1px;background:var(--line);margin:8px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;padding:14px 15px;
  transition:.13s;position:relative;min-height:92px}
.card:hover{border-color:var(--accent);transform:translateY(-1px);
  background:#0e151b}
.card.pending{opacity:.62}
.card.pending:hover{border-color:var(--dim);transform:none}
.card .ct{font-weight:700;color:#eef4f8;font-size:13.5px;line-height:1.35}
.card .cc{font-size:11px;color:var(--dim);line-height:1.5}
.card .cmeta{margin-top:auto;display:flex;align-items:center;gap:8px;
  font-size:10.5px;color:var(--dim2)}
.chip{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;font-weight:700}
.chip.live{color:var(--green);border-color:var(--greenlo)}
.chip.soon{color:var(--amber);border-color:#3a3322}
.card .arrow{position:absolute;top:13px;right:14px;color:var(--dim2);
  font-size:13px;transition:.13s}
.card:hover .arrow{color:var(--accent);transform:translateX(2px)}

/* ---------- controls (filters) ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin:18px 0 14px;padding:14px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim2)}
.seg{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;flex-wrap:wrap}
.seg button{background:var(--panel2);color:var(--dim);border:0;
  font-family:inherit;font-size:12px;padding:6px 12px;cursor:pointer;
  border-right:1px solid var(--line);transition:.12s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--accent);color:#06120c;font-weight:700}
input[type=search]{background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:12px;padding:7px 10px;
  border-radius:5px;width:150px;outline:none}
input[type=search]:focus{border-color:var(--accent)}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink);
  font-size:12px;user-select:none;margin-top:14px}
.chk input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.count{margin-left:auto;color:var(--dim);font-size:11px;margin-top:14px}
.count b{color:var(--accent)}

/* ---------- table ---------- */
.tablewrap{border:1px solid var(--line);border-radius:6px;overflow-x:auto}
table{border-collapse:collapse;width:100%}
thead th{position:sticky;top:0;background:var(--panel);color:var(--dim);
  font-weight:500;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  text-align:right;padding:11px 12px;border-bottom:1px solid var(--line);
  cursor:pointer;white-space:nowrap;user-select:none;z-index:2}
thead th:first-child,thead th.l{text-align:left}
thead th:hover{color:var(--ink)}
thead th .ar{color:var(--accent);font-size:9px;margin-left:3px;opacity:0}
thead th.sort .ar{opacity:1}
tbody td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--panel2);
  white-space:nowrap}
tbody tr:hover{background:#0e151b}
tbody td.l{text-align:left}
.mdl{font-weight:700;color:#eef4f8;font-size:13px}
.sfx{font-size:9.5px;font-weight:700;margin-left:6px;padding:1px 5px;
  border-radius:3px;border:1px solid var(--line);color:var(--amber);
  vertical-align:middle}
.gen{font-size:10px;color:var(--dim);border:1px solid var(--line);
  border-radius:3px;padding:1px 6px}
.sock{font-size:10.5px;padding:1px 7px;border-radius:3px;border:1px solid var(--line)}
.sock.s1{color:var(--red);border-color:#3a2222}
.sock.s2{color:var(--amber);border-color:#3a3322}
.sock.s4{color:var(--green);border-color:#22332a}
.num{color:var(--ink)}
.dim{color:var(--dim)}

/* perf cell with bar */
.perf{position:relative;min-width:148px}
.bar{position:relative;height:20px;background:var(--barbg);border-radius:3px;
  overflow:hidden;display:flex;align-items:center}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;opacity:.32}
.bar span{position:relative;z-index:1;padding:0 8px;width:100%;
  display:flex;justify-content:space-between;font-size:11.5px}
.bar .v{color:#eef4f8;font-weight:500}
.pct{font-weight:700}
.p-hi{color:var(--green)} .i-hi{background:var(--green)}
.p-mid{color:#bfe9a6} .i-mid{background:var(--greenlo)}
.p-lo{color:var(--amber)} .i-lo{background:var(--amber)}
.p-vlo{color:var(--red)} .i-vlo{background:var(--red)}

tr.base{background:var(--baseline)!important;
  box-shadow:inset 3px 0 0 var(--accent)}
tr.base .mdl{color:var(--accent)}
tr.base:hover{background:#1d3236!important}

/* ---------- legend / note / pending ---------- */
.legend{margin-top:14px;color:var(--dim);font-size:11px;line-height:1.9}
.legend .k{display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.legend .sw{width:11px;height:11px;border-radius:2px;display:inline-block}
.note{margin-top:18px;padding:14px 16px;background:var(--panel2);
  border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:5px;color:var(--dim);font-size:11.5px;line-height:1.85;max-width:880px}
.note b{color:var(--ink);font-weight:500}
.note code{color:var(--accent);background:#0a0d11;padding:1px 5px;border-radius:3px}

.pending{margin-top:24px;padding:40px 28px;background:var(--panel);
  border:1px dashed var(--line);border-radius:8px;text-align:center;max-width:680px}
.pending h2{font-family:'Chakra Petch',sans-serif;color:var(--amber);
  font-size:18px;margin:0 0 10px}
.pending p{color:var(--dim);font-size:12.5px;line-height:1.8;margin:0 auto;max-width:520px}
.pending code{color:var(--accent);background:#0a0d11;padding:2px 6px;border-radius:3px}
.btn{display:inline-block;margin-top:18px;border:1px solid var(--accent);
  color:var(--accent);border-radius:5px;padding:8px 16px;font-size:12px;
  cursor:pointer;transition:.13s}
.btn:hover{background:var(--accent);color:#06120c;font-weight:700}

footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--dim2);font-size:11px;line-height:1.7}

@media(max-width:720px){
  body{padding:18px 10px}
  .bar{min-width:120px}
  thead th,tbody td{padding:8px 7px;font-size:11px}
  .vendors{flex-direction:column}
}