/* ============================================================
   NoInstallMark — app.css
   Tokens & motion theo MOTION-DESIGN.md ("TELEMETRY")
   Chỉ animate transform/opacity/clip-path/stroke-dashoffset (nguyên tắc #5)
   ============================================================ */
:root{
  --bg:#070b10; --panel:#0d141c; --panel2:#111b26; --line:#1d2a38; --line2:#2c4050;
  --text:#dfe9f2; --dim:#7d8fa1; --accent:#3df0c2; --accent-dim:#1e8f77; --amber:#ffd166; --danger:#ff5d73;
  --t-instant:100ms; --t-fast:150ms; --t-base:220ms; --t-slow:350ms; --t-cinema:600ms; --t-epic:900ms;
  --stagger:40ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-quick:cubic-bezier(.55,0,1,.45);
  --ease-snap:cubic-bezier(.2,.9,.3,1.06);
  --ease-sweep:cubic-bezier(.65,.05,.35,1);
  --decor:running;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
body.measuring{ --decor:paused; }
:root.reduced{ --t-instant:1ms; --t-fast:1ms; --t-base:80ms; --t-slow:120ms; --t-cinema:150ms; --t-epic:150ms; --decor:paused; }
@media (prefers-reduced-motion: reduce){
  :root{ --t-instant:1ms; --t-fast:1ms; --t-base:80ms; --t-slow:120ms; --t-cinema:150ms; --t-epic:150ms; --decor:paused; }
}
*{ box-sizing:border-box; margin:0; }
/* QUAN TRỌNG: mọi rule [hidden] phải thắng mọi class display —
   bug "modal overlay block" xảy ra vì .modal{display:grid} đè UA [hidden] */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); min-height:100vh; }
body.measuring{ overflow:hidden; }
.num,#fps,.score-num,.gv,.val{ font-variant-numeric:tabular-nums; }
a{ color:var(--accent); }
code{ color:var(--accent); font-size:.92em; background:#0a1118; padding:1px 5px; border-radius:4px; }

::selection{ background:var(--accent); color:#04211a; }

/* ---------- header / footer ---------- */
.top{ display:flex; align-items:center; gap:14px; padding:18px clamp(16px,5vw,72px); flex-wrap:wrap; }
.logo{ font-weight:800; letter-spacing:.14em; font-size:15px; }
.logo b{ color:var(--accent); }
.top-tag{ color:var(--dim); font-size:12.5px; }
.spacer{ flex:1; }
footer{ padding:26px clamp(16px,5vw,72px) 60px; color:var(--dim); font-size:12px; line-height:1.7; border-top:1px solid var(--line); margin-top:60px; }
footer .fine{ opacity:.8; max-width:900px; }

/* ---------- buttons ---------- */
.btn{ font:inherit; background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:10px 18px; cursor:pointer;
  transition:filter var(--t-instant), border-color var(--t-base); } /* transform do Motion (press/hover) quản */
.btn:hover{ filter:brightness(1.15); border-color:var(--line2); }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn.primary{ background:var(--accent); color:#04211a; border-color:transparent; font-weight:700; }
.btn.big{ padding:14px 28px; font-size:15px; letter-spacing:.05em; }
.btn.ghost{ background:transparent; }
.btn.small{ padding:7px 13px; font-size:12.5px; }

/* ---------- screens & transitions (vào out-expo, ra in-quick — nguyên tắc #2) ---------- */
main{ padding:0 clamp(16px,5vw,72px); max-width:1180px; margin:0 auto; }
.screen{ min-height:58vh; } /* chuyển màn do Motion (screenIn) quản — không dùng CSS keyframes */

/* ---------- landing ---------- */
.landing{ padding:clamp(28px,6vh,64px) 0 30px; max-width:860px; }
.badge{ color:var(--accent); font-size:12px; letter-spacing:.28em; font-weight:700; margin-bottom:18px; }
.landing h1{ font-size:clamp(30px,5vw,54px); line-height:1.07; font-weight:800; }
.landing h1.acc{ color:var(--accent); }
.sweep-line{ height:2px; width:230px; background:linear-gradient(90deg,var(--accent),transparent); margin:20px 0 22px; transform-origin:left; }
.sub{ color:var(--dim); font-size:15.5px; line-height:1.65; max-width:640px; margin-bottom:26px; }
.sub b{ color:var(--text); }
.cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:30px; }
.cta-note{ color:var(--dim); font-size:13px; }
.cta-note.ok{ color:var(--accent); }
.cta-note.bad{ color:var(--danger); }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:34px; }
.feat{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  display:grid; gap:4px; font-size:13px; color:var(--dim); }
.feat b{ color:var(--text); font-size:13.5px; }

/* ---------- search (GameMatch) ---------- */
.search-wrap{ max-width:640px; position:relative; }
.search-box{ position:relative; }
.search-box input{ width:100%; font:inherit; font-size:15px; color:var(--text); background:#050a0e;
  border:1px solid var(--line); border-radius:11px; padding:14px 16px; outline:none;
  transition:border-color var(--t-base), box-shadow var(--t-base); }
.search-box input:focus{ border-color:var(--accent-dim); box-shadow:0 0 0 3px rgba(61,240,194,.12); }
.search-box.inline{ flex:1; max-width:420px; }
.search-box.inline input{ padding:10px 14px; font-size:14px; }
.search-hint{ color:var(--dim); font-size:11.5px; margin-top:7px; }
.search-results{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; background:#0a1118;
  border:1px solid var(--line2); border-radius:12px; overflow:hidden; max-height:420px; overflow-y:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.55); }
.search-results.floating{ position:relative; margin-top:10px; max-height:300px; }
.sr-item{ display:flex; gap:12px; align-items:center; padding:10px 14px; cursor:pointer;
  border-bottom:1px solid #101a24; transition:background var(--t-fast); }
.sr-item:hover, .sr-item.sel{ background:#0f1b26; }
.sr-item img{ width:92px; height:43px; object-fit:cover; border-radius:5px; background:#0d141c; flex:none; }
.sr-name{ font-size:13.5px; font-weight:600; line-height:1.3; }
.sr-meta{ color:var(--dim); font-size:11.5px; margin-top:3px; }
.sr-score{ margin-left:auto; font-size:11px; color:var(--amber); flex:none; }
.sr-empty{ padding:16px; color:var(--dim); font-size:13px; }

/* ---------- survey ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; }
.panel.narrow{ max-width:760px; margin:30px auto; }
.panel.wide{ max-width:980px; margin:26px auto; }
.step-tag{ font-size:11px; letter-spacing:.24em; color:var(--dim); margin-bottom:16px; }
.term{ background:#050a0e; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  font:13px/2 Consolas,"Cascadia Mono",monospace; min-height:300px; }
.term .row{ display:flex; gap:10px; white-space:pre-wrap; }
.term .k{ color:var(--dim); flex:none; }
.term .dots{ color:#24333f; flex:none; }
.term .v{ color:var(--accent); }
.term .v.warn{ color:var(--amber); }
.term .cursor{ display:inline-block; width:8px; height:15px; background:var(--accent); vertical-align:-2px;
  animation:blink 530ms steps(1) infinite var(--decor); }
@keyframes blink{ 50%{ opacity:0; } }
.survey-actions{ margin-top:18px; display:flex; justify-content:flex-end; }

/* ---------- bench HUD ---------- */
.bench-canvas-wrap{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#050a0e; margin-bottom:16px; }
#benchCanvas{ width:100%; display:block; aspect-ratio:16/9; }
.bench-grid{ display:grid; grid-template-columns:210px 1fr 130px; gap:24px; align-items:center; margin:14px 0 6px; }
.fps-label{ font-size:11px; letter-spacing:.2em; color:var(--dim); }
#fps{ font-size:66px; font-weight:800; line-height:1; color:var(--accent); }
.fps-unit{ color:var(--dim); font-size:13px; }
.phase-note{ color:var(--amber); font-size:12px; margin-top:10px; min-height:16px; }
#spark{ width:100%; height:130px; background:#050a0e; border:1px solid var(--line); border-radius:8px; }
.ring-wrap{ display:grid; place-items:center; position:relative; }
.ring-wrap svg{ transform:rotate(-90deg); }
.ring-bg{ stroke:var(--line); } .ring-fg{ stroke:var(--accent); }
#ringPct{ position:absolute; font-size:19px; font-weight:700; }
.scene-list{ display:grid; gap:8px; margin-top:18px; }
.scene-row{ display:grid; grid-template-columns:200px 1fr 120px; gap:12px; align-items:center; font-size:12.5px; }
.scene-row .name{ color:var(--dim); }
.scene-row .name.on{ color:var(--text); font-weight:600; }
.scene-row .name.done{ color:var(--accent); }
.scene-row .track{ height:7px; background:#050a0e; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.scene-row .fill{ height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); transform-origin:left; transform:scaleX(0); border-radius:4px; }
.scene-row .st{ color:var(--dim); text-align:right; }
.measure-bar{ display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--amber); font-size:12px; letter-spacing:.12em; }
.measure-dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); }

/* ---------- report ---------- */
.report-wrap{ max-width:1040px; margin:26px auto; display:grid; gap:26px; }
.report-grid{ display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; }
.gauge{ width:100%; display:block; }
.gauge-track{ stroke:var(--line); stroke-width:10; fill:none; }
.gauge-fill{ stroke:var(--accent); stroke-width:10; fill:none; stroke-linecap:round; }
.needle{ stroke:var(--amber); stroke-width:3; stroke-linecap:round; }
.gauge-center{ fill:var(--line2); }
.score-card{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px;
  background:var(--panel2); padding:18px 20px; text-align:center; margin-top:-26px; }
.score-label{ font-size:11px; letter-spacing:.24em; color:var(--dim); }
.score-num{ font-size:54px; font-weight:800; line-height:1.1; color:var(--accent); }
.score-class{ font-size:12.5px; letter-spacing:.18em; color:var(--amber); font-weight:700; }
.score-sub{ font-size:11.5px; color:var(--dim); margin-top:8px; line-height:1.5; }
.score-card.shimmer::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(61,240,194,.2) 50%,transparent 60%);
  transform:translateX(-130%); animation:shimmer .45s ease-out 1 var(--decor) forwards; }
@keyframes shimmer{ to{ transform:translateX(130%); } }

.bars{ display:grid; gap:9px; }
.bar{ display:grid; grid-template-columns:190px 1fr 64px; gap:12px; align-items:center; font-size:12.5px; }
.bar .track{ height:9px; background:#050a0e; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.bar .fill{ height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); transform-origin:left; transform:scaleX(0); border-radius:5px; }
.bar .fill.cpu{ background:linear-gradient(90deg,#8f7a2e,var(--amber)); }
.bar .val{ color:var(--dim); text-align:right; }
.graph-wrap{ margin-top:18px; }
.graph-wrap svg{ width:100%; display:block; background:#050a0e; border:1px solid var(--line); border-radius:8px; }
.trace{ stroke:var(--accent); stroke-width:1.5; fill:none; }
.trace-base{ stroke:#14202b; stroke-width:1; }
.graph-cap{ color:var(--dim); font-size:11px; margin-top:6px; }
.report-btns{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- gamematch panel ---------- */
.gm-panel{ margin-top:0; }
.panel-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:12px; }
.panel-head h2{ font-size:16px; letter-spacing:.02em; }
.gm-note{ color:var(--dim); font-size:12.5px; line-height:1.6; margin-bottom:16px; max-width:780px; }
.games{ display:grid; gap:8px; }
.game{ display:grid; grid-template-columns:1fr 130px 110px; gap:12px; align-items:center;
  background:#050a0e; border:1px solid var(--line); border-radius:9px; padding:10px 14px; font-size:13px;
  cursor:pointer; transition:border-color var(--t-base), transform var(--t-fast) var(--ease-out-expo); }
.game:hover{ border-color:var(--line2); transform:translateY(-1px); }
.game .g-name{ font-weight:600; }
.game .g-preset{ color:var(--dim); font-size:11.5px; margin-top:2px; }
.game .g-est{ text-align:right; }
.game .gv{ font-weight:700; color:var(--accent); font-size:15px; }
.game .gv small{ color:var(--dim); font-weight:400; font-size:11px; }
.verdict{ text-align:right; font-size:10.5px; font-weight:700; letter-spacing:.08em; }
.verdict.ok{ color:var(--accent); } .verdict.mid{ color:var(--amber); } .verdict.bad{ color:var(--danger); }

/* ---------- modal (tech card) ---------- */
.modal{ position:fixed; inset:0; z-index:90; background:rgba(3,7,11,.72); display:grid; place-items:center; padding:20px;
  animation:fadeIn var(--t-base) ease both; }
@keyframes fadeIn{ from{opacity:0} }
.modal-card{ background:var(--panel); border:1px solid var(--line2); border-radius:16px; max-width:720px; width:100%;
  max-height:88vh; overflow-y:auto; padding:26px 28px; position:relative;
  animation:cardUp var(--t-slow) var(--ease-out-expo) both; }
@keyframes cardUp{ from{ opacity:0; transform:translateY(22px);} }
.modal-close{ position:absolute; top:14px; right:14px; }
.mc-head{ display:flex; gap:16px; align-items:center; margin-bottom:16px; padding-right:40px; }
.mc-head img{ width:120px; height:56px; object-fit:cover; border-radius:7px; background:#0d141c; }
.mc-title{ font-size:19px; font-weight:800; line-height:1.2; }
.mc-meta{ color:var(--dim); font-size:12px; margin-top:5px; }
.mc-verdicts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:16px 0; }
.vcard{ border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:#050a0e; }
.vcard .vl{ font-size:10.5px; letter-spacing:.14em; color:var(--dim); }
.vcard .vv{ font-size:21px; font-weight:800; margin:6px 0 3px; }
.vcard.ok .vv{ color:var(--accent); } .vcard.mid .vv{ color:var(--amber); } .vcard.bad .vv{ color:var(--danger); }
.vcard .vs{ font-size:11px; color:var(--dim); line-height:1.5; }
.req-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.req-col{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#050a0e; }
.req-col h4{ font-size:11px; letter-spacing:.2em; color:var(--dim); margin-bottom:10px; }
.req-row{ display:grid; grid-template-columns:74px 1fr; gap:8px; font-size:12.5px; padding:4px 0; border-bottom:1px solid #101a24; }
.req-row:last-child{ border-bottom:none; }
.req-row .rk{ color:var(--dim); }
.mc-foot{ margin-top:18px; color:var(--dim); font-size:11.5px; line-height:1.7; }
.mc-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:640px){ .req-grid{ grid-template-columns:1fr; } }

/* ---------- history ---------- */
.history{ display:grid; gap:8px; }
.hist-row{ display:grid; grid-template-columns:150px 90px 1fr 90px; gap:12px; font-size:12.5px; color:var(--dim);
  background:#050a0e; border:1px solid var(--line); border-radius:8px; padding:9px 14px; align-items:center; }
.hist-row .hs{ color:var(--accent); font-weight:700; font-size:14px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .report-grid{ grid-template-columns:1fr; }
  .bench-grid{ grid-template-columns:1fr 110px; }
  .bench-grid #spark{ grid-column:1 / -1; order:3; }
  .game{ grid-template-columns:1fr 90px; }
  .game .g-est{ grid-column:2; }
  .verdict{ grid-column:2; }
  .hist-row{ grid-template-columns:110px 70px 1fr; }
  .hist-row>:last-child{ display:none; }
}