@font-face { font-family: "Rajdhani"; font-weight: 500; src: url(fonts/Rajdhani-500.woff2) format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; src: url(fonts/Rajdhani-600.woff2) format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; src: url(fonts/Rajdhani-700.woff2) format("woff2"); }
@font-face { font-family: "Kaushan Script"; font-weight: 400; src: url(fonts/KaushanScript-400.woff2) format("woff2"); }

:root {
  --bg: #0c141c;
  --bg-main: #0f1821;
  --side: #101b25;
  --panel: #131e29;
  --panel-2: #172431;
  --line: #1d2b38;
  --line-2: #263746;
  --text: #e6edf3;
  --text-2: #b8c5d1;
  --muted: #7d8d9d;
  --dim: #56677a;
  --acc: #36a9f7;
  --acc-rgb: 54,169,247;
  --acc-hi: #3aaefa;
  --acc-2: #2186dc;
  --acc-light: #9be0ff;
  --acc-text: #7cc8fb;
  --acc-border: #2f80cb;
  --acc-line: #22405c;
  --acc-deep: #1b4e7e;
  --acc-deep-2: #163d61;
  --acc-soft: #173552;
  --acc-ink: #fff;
  --blue: var(--acc);
  --blue-2: var(--acc-2);
  --blue-deep: var(--acc-deep);
  --green: #43d17a;
  --amber: #efb03a;
  --amber-2: #d8941c;
  --red: #ff5f6d;
  --purple: #a78bfa;
  --teal: #2dd4bf;
  --radius: 8px;
  --font: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; font-size: 15px; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; user-select: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.ic svg { width: 100%; height: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #223142; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #2c4157; }
::-webkit-scrollbar-track { background: transparent; }

.app { display: grid; grid-template-columns: 272px 1fr; height: 100vh; }

/* ── sidebar ─────────────────────────────────────────────────────────── */
.sidebar { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 22px 14px 14px; background: linear-gradient(180deg, #111d28 0%, #0f1922 100%); border-right: 1px solid var(--line); }
.hatch { position: absolute; top: 0; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(-55deg, rgba(var(--acc-rgb),.42) 0 7px, transparent 7px 15px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%); opacity: .8; }
.brand { position: relative; display: flex; align-items: flex-end; height: 58px; padding-left: 8px; margin-top: 6px; }
.brand-word { font-weight: 700; font-size: 46px; line-height: .9; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.brand-script { font-family: "Kaushan Script", cursive; font-size: 40px; line-height: 1; margin-left: -18px; transform: rotate(-9deg) translateY(-14px); background: linear-gradient(180deg, var(--acc-light) 0%, var(--acc-hi) 45%, var(--acc-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(var(--acc-rgb),.45)); }
.tagline { display: flex; align-items: center; gap: 8px; margin: 14px 0 14px 4px; padding-left: 8px; border-left: 2px solid var(--line-2); color: var(--muted); font-size: 14px; }
.tagline-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #223142; color: var(--text-2); font-size: 10px; }

.search { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; margin-bottom: 14px; border-radius: 8px; background: #15212c; border: 1px solid #213140; color: var(--blue); font-size: 16px; transition: border-color .15s; }
.search:focus-within { border-color: var(--acc-border); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { filter: invert(.6); }

.nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 8px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; height: 36px; padding: 0 10px 0 8px; margin-bottom: 5px; border-radius: 6px; background: #14202b; border: 1px solid #1a2834; color: var(--text-2); font-size: 16px; font-weight: 600; text-align: left; transition: background .15s, border-color .15s, color .15s; }
.nav-item:hover { background: #182634; border-color: #22344a; color: var(--text); }
.nav-item .nav-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #213041; color: #c3cfda; font-size: 13px; flex: none; }
.nav-item .nav-label { flex: 1; font-size: 15.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .count { min-width: 20px; padding: 1px 6px; border-radius: 4px; background: #1d2b39; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.nav-item .dot { width: 7px; height: 7px; border-radius: 50%; background: #3b5168; flex: none; }
.nav-item .dot.on { background: var(--green); box-shadow: 0 0 8px rgba(67,209,122,.6); }
.nav-item.active { background: linear-gradient(90deg, var(--acc-deep) 0%, var(--acc-deep-2) 100%); border-color: var(--acc-border); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb),.15), 0 0 16px rgba(var(--acc-rgb),.22); }
.nav-item.active::before { content: ""; position: absolute; left: -7px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.nav-item.active .nav-ic { background: var(--acc-2); color: #fff; }
.nav-sec { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 16px 0 8px; padding: 0 4px 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
.nav-sec .ic { font-size: 14px; transition: transform .2s; }
.nav-sec.closed .ic { transform: rotate(-90deg); }
.nav-group.closed { display: none; }

.side-bottom { padding-top: 12px; border-top: 1px solid var(--line); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 9px; border-radius: 8px; background: #15212c; border: 1px solid #213140; }
.seg button { height: 32px; border-radius: 6px; color: var(--text-2); font-size: 15px; font-weight: 600; transition: background .15s, color .15s; }
.seg button:hover { color: #fff; }
.seg button.on { background: linear-gradient(180deg, var(--acc-hi) 0%, var(--acc-2) 100%); color: var(--acc-ink); box-shadow: 0 0 14px rgba(var(--acc-rgb),.35); }
.btn-exit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; border-radius: 7px; background: rgba(255,95,109,.07); border: 1px solid #5c2630; color: #ffd8dc; font-size: 15px; font-weight: 600; transition: background .15s; }
.btn-exit .ic { color: var(--red); }
.btn-exit:hover { background: rgba(255,95,109,.15); }

/* ── main ────────────────────────────────────────────────────────────── */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background:
  repeating-linear-gradient(125deg, rgba(255,255,255,.011) 0 1px, transparent 1px 34px),
  radial-gradient(1200px 500px at 70% -10%, rgba(var(--acc-rgb),.07), transparent 60%),
  var(--bg-main); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 22px 26px 0; }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .2px; }
.page-head p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.accent { width: 52px; height: 3px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), rgba(var(--acc-rgb),0)); }

.lang { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: 8px; background: #15212c; border: 1px solid #22323f; box-shadow: 0 2px 8px rgba(0,0,0,.25); color: var(--text-2); }
.lang-btn:hover { border-color: #2f4a63; }
.flag { display: inline-flex; width: 26px; height: 17px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.flag svg { width: 100%; height: 100%; }
.lang-menu { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 160px; padding: 5px; border-radius: 8px; background: #15212c; border: 1px solid #263848; box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 6px; color: var(--text-2); font-weight: 600; }
.lang-menu button:hover, .lang-menu button.on { background: #1d2c3a; color: #fff; }

.view { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 26px 22px; }
.view.fade { animation: fadeIn .22s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* stat cards */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { padding: 14px 16px 15px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.stat-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; font-size: 17px; }
.stat-ic svg { stroke-width: 2.4; }
.stat b { display: block; margin-top: 10px; font-size: 32px; line-height: 1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.tone-green { background: #1c3a2a; color: var(--green); }
.tone-blue { background: var(--acc-soft); color: var(--blue); }
.tone-amber { background: #3a2e16; color: var(--amber); }
.tone-red { background: #3c1c23; color: var(--red); }
.tone-purple { background: #2a2147; color: var(--purple); }
.tone-teal { background: #133632; color: var(--teal); }

.sec-label { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #fff; }
.sec-label .ic { color: var(--blue); }
.sec-label .sub { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }

.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 6px; font-size: 16px; font-weight: 600; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; }
.btn-primary { background: linear-gradient(180deg, var(--acc-hi) 0%, var(--acc-2) 100%); color: var(--acc-ink); box-shadow: 0 0 18px rgba(var(--acc-rgb),.3), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-dark { background: #1a2733; border: 1px solid #263644; color: var(--text-2); }
.btn-dark:hover:not(:disabled) { background: #1f2f3e; color: #fff; }
.btn-amber { background: linear-gradient(180deg, #f3b544 0%, #d9951d 100%); color: #fff; box-shadow: 0 0 18px rgba(239,176,58,.3), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-amber:hover:not(:disabled) { filter: brightness(1.06); }
.btn-danger { background: rgba(255,95,109,.1); border: 1px solid #5c2630; color: #ffd0d5; }
.btn-danger:hover:not(:disabled) { background: rgba(255,95,109,.18); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn .ic { font-size: 15px; }

/* activity */
.acts { display: flex; flex-direction: column; gap: 6px; }
.act { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 7px 14px 7px 10px; border-radius: 6px; background: rgba(21,32,43,.85); border: 1px solid var(--line); }
.act-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; font-size: 13px; flex: none; }
.act-text { flex: 1; min-width: 0; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-text b { color: #fff; font-weight: 700; }
.act time { color: var(--dim); font-size: 13px; white-space: nowrap; }
.empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--radius); }

/* footer */
.footer { display: flex; align-items: center; gap: 16px; padding: 12px 26px 14px; border-top: 1px solid rgba(29,43,56,.6); background: linear-gradient(180deg, rgba(15,24,33,0), rgba(12,20,28,.75)); }
.safe { display: flex; align-items: center; gap: 12px; cursor: pointer; max-width: 380px; }
.safe-text strong { display: block; font-size: 15px; color: #fff; }
.safe-text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.25; }
.footer-actions { display: flex; gap: 9px; margin-left: auto; }
.corner { position: absolute; right: 8px; bottom: 4px; display: flex; align-items: center; gap: 6px; }
.corner-btn { display: grid; place-items: center; width: 18px; height: 18px; color: var(--dim); font-size: 11px; border-radius: 4px; }
.corner-btn:hover { color: var(--text-2); }
.ver { color: var(--dim); font-size: 11px; }

/* switch */
.switch { position: relative; display: inline-flex; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 12px; background: #24323f; border: 1px solid #2e4152; transition: background .18s, border-color .18s, box-shadow .18s; pointer-events: none; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9fb0c0; transition: transform .18s cubic-bezier(.3,.7,.4,1), background .18s; }
.switch input:checked + .knob { background: linear-gradient(180deg, var(--acc-hi), var(--acc-2)); border-color: var(--acc-hi); box-shadow: 0 0 12px rgba(var(--acc-rgb),.4); }
.switch input:checked + .knob::after { transform: translateX(20px); background: #fff; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .knob { opacity: .4; }
.switch.busy .knob::after { animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* checkbox */
.check { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.check .box { width: 20px; height: 20px; border-radius: 5px; background: #192633; border: 1px solid #2c3e50; display: grid; place-items: center; color: transparent; font-size: 13px; transition: background .12s, border-color .12s; pointer-events: none; }
.check input:checked + .box { background: var(--blue-2); border-color: var(--blue); color: var(--acc-ink); }
.check input:disabled + .box { opacity: .35; }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.chips { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: #141f2a; border: 1px solid var(--line); }
.chips button { height: 28px; padding: 0 12px; border-radius: 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.chips button.on { background: var(--acc-soft); color: #fff; }
.muted { color: var(--muted); }

/* tweak cards */
.tweaks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tweak { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px 13px 12px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.tweak:hover { border-color: #283b4d; }
.tweak.on { border-color: #1f4d39; background: linear-gradient(90deg, rgba(67,209,122,.06), rgba(21,32,43,.92) 40%); }
.tweak.on::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--green); }
.tweak.na { opacity: .55; }
.tweak-body { flex: 1; min-width: 0; }
.tweak-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; }
.tweak-desc { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .2px; background: #1c2a37; color: var(--text-2); }
.tag .ic { font-size: 11px; }
.tag.t-fps { background: var(--acc-soft); color: var(--acc-text); }
.tag.t-latency { background: #261f45; color: #b9a5ff; }
.tag.t-privacy { background: #183428; color: #6fdc98; }
.tag.t-qol { background: #1f2b38; color: #a9b8c7; }
.tag.t-storage { background: #12332f; color: #5fe0cc; }
.tag.t-stability { background: #352a14; color: #f2c46b; }
.tag.t-rec { background: rgba(239,176,58,.12); color: var(--amber); }
.tag.t-adv { background: rgba(167,139,250,.12); color: var(--purple); }
.tag.t-restart { background: rgba(255,95,109,.1); color: #ff9aa4; }
.tag.t-shield { background: rgba(var(--acc-rgb),.12); color: var(--acc-text); }
.tag.t-active { background: rgba(67,209,122,.14); color: var(--green); }
.tweak-note { margin-top: 7px; font-size: 13px; color: #f2c46b; display: flex; align-items: center; gap: 6px; }
.tweak-side { display: flex; align-items: center; height: 24px; }

/* info cards */
.card { padding: 16px 18px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.card + .card { margin-top: 12px; }
.card h3 { margin: 0 0 4px; font-size: 17px; color: #fff; }
.card p { margin: 0; color: var(--muted); line-height: 1.45; }
.status { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.status .stat-ic { width: 40px; height: 40px; font-size: 19px; border-radius: 8px; }
.status .grow { flex: 1; min-width: 0; }
.status h3 { margin: 0; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; color: var(--text-2); word-break: break-all; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kv div { padding: 12px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); min-width: 0; }
.kv span { display: block; color: var(--muted); font-size: 13px; }
.kv b { display: block; margin-top: 3px; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warnbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius); background: rgba(239,176,58,.08); border: 1px solid rgba(239,176,58,.3); color: #f6d38f; font-size: 14px; }
.warnbar .ic { font-size: 17px; color: var(--amber); }
.infobar { background: rgba(var(--acc-rgb),.07); border-color: rgba(var(--acc-rgb),.28); color: var(--acc-text); }
.infobar .ic { color: var(--blue); }

/* presets */
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preset { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.preset.on { border-color: var(--acc-border); box-shadow: 0 0 0 1px rgba(var(--acc-rgb),.2) inset, 0 0 18px rgba(var(--acc-rgb),.12); }
.preset-head { display: flex; align-items: center; gap: 12px; }
.preset-head h3 { margin: 0; font-size: 18px; }
.preset p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.4; flex: 1; }
.pv { display: flex; flex-wrap: wrap; gap: 5px; }
.pv span { padding: 2px 7px; border-radius: 4px; background: #1a2836; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.pv span i { font-style: normal; color: var(--muted); }

/* cleaner */
.clean-list { display: flex; flex-direction: column; gap: 7px; }
.clean-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.clean-row.na { opacity: .5; }
.clean-row .grow { flex: 1; min-width: 0; }
.clean-row .title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 15.5px; }
.clean-row .desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.clean-row .warn { color: #f2c46b; font-size: 13px; margin-top: 3px; }
.size { min-width: 92px; text-align: right; font-weight: 700; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.size small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.sumbar { position: sticky; bottom: -22px; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: #13202c; border: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(12,20,28,.8); }
.sumbar b { font-size: 20px; color: #fff; }

/* booster */
.boost { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.gauge-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 18px; }
.gauge { position: relative; width: 190px; height: 190px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 12; }
.gauge .track { stroke: #1b2a38; }
.gauge .val { stroke: url(#gaugeGrad); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(var(--acc-rgb),.5)); }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-center b { font-size: 42px; line-height: 1; color: #fff; }
.gauge-center span { color: var(--muted); font-size: 14px; }
.opts { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.opt { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; cursor: pointer; }
.btn-boost { width: 100%; height: 48px; font-size: 18px; letter-spacing: .5px; }
.proc-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.proc-row + .proc-row { margin-top: 6px; }
.proc-row .grow { flex: 1; min-width: 0; }
.proc-row b { color: #fff; }
.proc-row small { color: var(--muted); margin-left: 6px; }

/* modal */
.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(5,10,15,.62); backdrop-filter: blur(3px); animation: fadeIn .15s ease-out; }
.modal { width: min(500px, calc(100vw - 40px)); padding: 22px; border-radius: 10px; background: #131f2a; border: 1px solid #27394a; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.modal h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 21px; }
.modal h2 .ic { color: var(--blue); }
.modal p { margin: 0 0 12px; color: var(--text-2); line-height: 1.45; }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); max-height: 180px; overflow: auto; }

/* toasts */
.toasts { position: fixed; right: 18px; bottom: 76px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 420px; padding: 11px 14px; border-radius: 8px; background: #152230; border: 1px solid #2a3d50; box-shadow: 0 12px 30px rgba(0,0,0,.45); color: var(--text); animation: toastIn .22s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
.toast .ic { margin-top: 2px; font-size: 16px; }
.toast.ok .ic { color: var(--green); }
.toast.err { border-color: #5c2630; }
.toast.err .ic { color: var(--red); }
.toast.warn .ic { color: var(--amber); }
.toast small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; word-break: break-word; }
.toast.out { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* info page */
.hero { display: flex; align-items: center; gap: 20px; padding: 22px; margin-bottom: 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(var(--acc-rgb),.16), rgba(21,32,43,.92) 55%); border: 1px solid var(--acc-line); }
.hero .brand { height: auto; margin: 0; }
.hero p { margin: 4px 0 0; color: var(--text-2); max-width: 560px; line-height: 1.45; }
.legal { margin-top: 14px; color: var(--dim); font-size: 13px; line-height: 1.5; }

/* tetris */
.tetris { display: flex; gap: 18px; }
.tetris canvas { border-radius: 6px; background: #0b131b; border: 1px solid #22344a; box-shadow: inset 0 0 30px rgba(0,0,0,.5); }
.tetris-side { display: flex; flex-direction: column; gap: 12px; min-width: 130px; }
.tetris-side .kv div { padding: 8px 10px; }
.tetris-side .kv { grid-template-columns: 1fr; gap: 8px; }
.keys { color: var(--muted); font-size: 13px; line-height: 1.6; }
.keys kbd { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 4px; background: #1d2b39; border: 1px solid #2c3e50; color: var(--text-2); font-family: inherit; font-size: 12px; text-align: center; }

@media (max-width: 1150px) {
  .tweaks, .presets { grid-template-columns: 1fr; }
  .boost { grid-template-columns: 1fr; }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* boost packs */
.btn-lg { height: 46px; padding: 0 22px; font-size: 17px; }
.pack-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.pack-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); text-align: left; transition: border-color .15s, background .15s; }
.pack-card:hover { border-color: var(--acc-border); background: #172636; }
.pack-card.on { border-color: #1f4d39; }
.pack-card .grow { flex: 1; min-width: 0; }
.pack-card b { display: block; font-size: 16.5px; color: #fff; }
.pack-card small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.pack-card > .ic { color: var(--dim); }
.pack-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 9px; font-size: 20px; color: var(--acc-text); background: linear-gradient(160deg, rgba(var(--acc-rgb),.22), rgba(23,69,111,.35)); border: 1px solid rgba(var(--acc-rgb),.3); }
.pack-card.on .pack-ic { color: var(--green); background: rgba(67,209,122,.12); border-color: rgba(67,209,122,.35); }
.pack-bar { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: #1b2a38; overflow: hidden; }
.pack-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc-2), #43d17a); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.pack-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin-bottom: 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(var(--acc-rgb),.16), rgba(21,32,43,.92) 60%); border: 1px solid var(--acc-line); }
.pack-hero .pack-ic { width: 56px; height: 56px; font-size: 28px; border-radius: 12px; }
.pack-hero .grow { flex: 1; min-width: 0; }
.pack-hero h2 { margin: 0; font-size: 24px; color: #fff; }
.pack-hero p { margin: 3px 0 0; color: var(--text-2); line-height: 1.4; max-width: 620px; }
.pack-hero .pack-bar { max-width: 420px; margin-top: 12px; }
.pack-hero small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.pack-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: none; }
.warnbar span { line-height: 1.4; }

/* connection test */
.ping-card { margin-bottom: 18px; }
.ping-form { display: flex; gap: 8px; align-items: center; }
.ping-form .input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 7px; background: #15212c; border: 1px solid #22323f; color: var(--text); font-size: 15px; outline: 0; user-select: text; }
.ping-form .input:focus { border-color: var(--acc-border); }
.ping-res { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.ping-meta { margin-top: 8px; font-size: 13px; }

/* license */
.lic-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.lic-row .grow { flex: 1; }
.lock { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--acc-rgb),.18), transparent 60%), var(--bg); animation: fadeIn .2s ease-out; }
.lock-card { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(460px, 100%); padding: 28px; border-radius: 12px; background: #131f2a; border: 1px solid #27394a; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.lock-card .brand { height: auto; margin: 0 0 4px; padding: 0; }
.lock-card h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 22px; color: #fff; }
.lock-card h2 .ic { color: var(--blue); }
.lock-card p { margin: 0; color: var(--text-2); line-height: 1.45; }
.lock-err { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: rgba(255,95,109,.08); border: 1px solid #5c2630; color: #ffd0d5; font-size: 14.5px; line-height: 1.4; }
.lock-err .ic { margin-top: 2px; color: var(--red); }
.lic-input { height: 46px; padding: 0 14px; border-radius: 8px; background: #15212c; border: 1px solid #22323f; color: #fff; font-family: Consolas, "Cascadia Mono", monospace; font-size: 17px; letter-spacing: .5px; text-align: center; outline: 0; user-select: text; }
.lic-input:focus { border-color: var(--acc-border); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.12); }
.lic-go { height: 46px; font-size: 17px; }
.lic-retry { justify-content: center; }
.lock-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--dim); font-size: 13px; }
.lock-foot .grow { flex: 1; }
.lock-foot button { color: var(--muted); font-size: 13px; font-weight: 600; }
.lock-foot button:hover { color: #fff; }
@media (max-width: 1150px) {
  .pack-cards { grid-template-columns: 1fr; }
  .ping-res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── appearance settings ─────────────────────────────────────────────── */
:root[data-accent="purple"] { --acc: #a78bfa; --acc-rgb: 167,139,250; }
:root[data-accent="pink"] { --acc: #f472b6; --acc-rgb: 244,114,182; }
:root[data-accent="teal"] { --acc: #2dd4bf; --acc-rgb: 45,212,191; }
:root[data-accent="orange"] { --acc: #fb923c; --acc-rgb: 251,146,60; }
:root[data-accent="silver"] { --acc: #cbd5e1; --acc-rgb: 203,213,225; --acc-ink: #0b141d; }
:root[data-accent]:not([data-accent="blue"]) {
  --acc-hi: color-mix(in srgb, var(--acc) 88%, white);
  --acc-2: color-mix(in srgb, var(--acc) 76%, black);
  --acc-light: color-mix(in srgb, var(--acc) 55%, white);
  --acc-text: color-mix(in srgb, var(--acc) 70%, white);
  --acc-border: color-mix(in srgb, var(--acc) 60%, #0f1821);
  --acc-line: color-mix(in srgb, var(--acc) 34%, #0f1821);
  --acc-deep: color-mix(in srgb, var(--acc) 44%, #0f1821);
  --acc-deep-2: color-mix(in srgb, var(--acc) 30%, #0f1821);
  --acc-soft: color-mix(in srgb, var(--acc) 22%, #131e29);
}
:root[data-bg="black"] { --bg: #030507; --bg-main: #05080b; }
:root[data-bg="black"] .main { background: var(--bg-main); }
:root[data-bg="black"] .sidebar { background: #06090d; }
:root[data-bg="glow"] .main { background: radial-gradient(1100px 520px at 62% -12%, rgba(var(--acc-rgb),.2), transparent 62%), radial-gradient(900px 420px at -5% 112%, rgba(var(--acc-rgb),.08), transparent 60%), var(--bg-main); }
:root[data-compact] .view { padding: 14px 20px 18px; }
:root[data-compact] .tweaks { gap: 7px; }
:root[data-compact] .tweak { padding: 9px 12px 9px 10px; }
:root[data-compact] .tweak-desc { font-size: 13px; margin-top: 2px; }
:root[data-compact] .tags { margin-top: 5px; }
:root[data-compact] .stat { padding: 10px 13px 11px; }
:root[data-compact] .stat b { font-size: 26px; margin-top: 7px; }
:root[data-compact] .nav-item { height: 32px; margin-bottom: 3px; }
:root[data-compact] .card { padding: 12px 14px; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
.app { zoom: var(--zoom, 1); height: calc(100vh / var(--zoom, 1)); }
#modalRoot, .toasts, .lock { zoom: var(--zoom, 1); }

/* settings page */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.set-sec { padding: 6px 18px 8px; }
.set-sec + .set-sec { margin-top: 0; }
.set-sec h3 { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 17px; }
.set-sec h3 .ic { color: var(--acc); }
.set-row { display: flex; align-items: center; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.set-sec h3 + .set-row { border-top: 0; }
.set-row > div:first-child { flex: 1; min-width: 0; }
.set-row b { display: block; color: #fff; font-size: 15.5px; }
.set-row small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 1px; }
.set-row .seg { margin: 0; display: inline-flex; gap: 3px; padding: 3px; }
.set-row .seg button { height: 28px; padding: 0 11px; font-size: 14px; }
.set-col { flex-direction: column; align-items: stretch; }
.swatches { display: flex; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 2px #0f1821, 0 0 0 4px var(--sw), 0 0 14px var(--sw); }
.pos-pick { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; }
.pos-pick button { height: 22px; border-radius: 4px; background: #1a2733; border: 1px solid #263644; }
.pos-pick button.on { background: var(--acc); border-color: var(--acc); }
.range { display: flex; align-items: center; gap: 10px; }
.range input { width: 150px; accent-color: var(--acc); }
.range span { min-width: 42px; text-align: right; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.set-input { width: 230px; height: 32px; padding: 0 10px; border-radius: 6px; background: #15212c; border: 1px solid #22323f; color: var(--text); font-size: 14px; outline: 0; user-select: text; }
.set-input:focus { border-color: var(--acc-border); }
.ov-preview { position: relative; height: 150px; margin: 4px 0 12px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #2a3b2f 0%, #1d2a33 45%, #3a3326 100%); border: 1px solid var(--line-2); }
.ov-preview::after { content: attr(data-label); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.18); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ov-pill { position: absolute; display: flex; align-items: center; gap: 1em; padding: .45em .75em .45em calc(.75em + 3px); border-radius: 999px; background: #0b141d; color: #fff; font-weight: 600; white-space: nowrap; font-family: "Segoe UI", var(--font); box-shadow: inset 3px 0 0 var(--acc); }
.ov-pill i { font-style: normal; color: var(--acc); margin-right: .33em; }
.ov-pill.p-tl { left: 8px; top: 8px; } .ov-pill.p-tr { right: 8px; top: 8px; }
.ov-pill.p-bl { left: 8px; bottom: 8px; } .ov-pill.p-br { right: 8px; bottom: 8px; }
.ov-pill.s-s { font-size: 9px; } .ov-pill.s-m { font-size: 11px; } .ov-pill.s-l { font-size: 13.5px; }
.ov-g { color: var(--green); } .ov-a { color: var(--amber); } .ov-r { color: var(--red); } .ov-d { color: var(--muted); }
@media (max-width: 1150px) { .settings { grid-template-columns: 1fr; } }

/* ── header chips, Snap Tap, hitreg check, line test (same look) ─────── */
.head-right { display: flex; align-items: center; gap: 8px; }
.head-chips { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; background: #15212c; border: 1px solid #22323f; box-shadow: 0 2px 8px rgba(0,0,0,.25); color: var(--text-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #3b5168; }
.chip.ok i { background: var(--green); box-shadow: 0 0 8px rgba(67,209,122,.6); }
.chip.warn { color: #f6d38f; }
.chip.warn i { background: var(--amber); box-shadow: 0 0 8px rgba(239,176,58,.5); }
.tag.t-new { background: rgba(var(--acc-rgb),.16); color: var(--acc-text); }

.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card-head .grow { flex: 1; min-width: 0; }
.card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.card-head p { margin: 2px 0 0; font-size: 14px; }
.card-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 7px; font-size: 18px; background: var(--acc-soft); color: var(--blue); }
.input { min-width: 0; height: 36px; padding: 0 12px; border-radius: 7px; background: #15212c; border: 1px solid #22323f; color: var(--text); font-size: 15px; outline: 0; user-select: text; }
.input:focus { border-color: var(--acc-border); }

.snap { margin-bottom: 14px; }
.snap.on { border-color: var(--acc-border); box-shadow: 0 0 0 1px rgba(var(--acc-rgb),.15) inset, 0 0 18px rgba(var(--acc-rgb),.1); }
.snap-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.keyviz { display: flex; align-items: center; gap: 14px; }
.keypair { display: flex; align-items: center; gap: 7px; }
.keypair .ic { color: var(--dim); font-size: 16px; }
.keypair.off { opacity: .35; }
.keycap { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: #1a2733; border: 1px solid #2c3e50; border-bottom-width: 3px; font-size: 19px; font-weight: 700; color: var(--text-2); }
.snap.on .keycap { color: #fff; border-color: var(--acc-border); box-shadow: 0 0 12px rgba(var(--acc-rgb),.25); }
.snap.on .keypair .ic { color: var(--blue); }
.snap-ctl { display: flex; flex-direction: column; gap: 6px; }
.snap-ctl small { color: var(--muted); font-size: 13px; }
.snap-ctl .seg { display: inline-flex; margin: 0; }
.snap-ctl .seg button { height: 28px; padding: 0 12px; font-size: 14px; }
.live { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 6px; background: #15212c; border: 1px solid #22323f; color: var(--text-2); font-size: 14px; font-weight: 600; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #3b5168; }
.live.ready i { background: var(--blue); box-shadow: 0 0 8px rgba(var(--acc-rgb),.7); }
.live.active i { background: var(--green); box-shadow: 0 0 8px rgba(67,209,122,.7); animation: pulse 1.4s ease-in-out infinite; }
.live.err { color: #ffd0d5; border-color: #5c2630; }
.live.err i { background: var(--red); }
.snap-note { display: flex; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.45; }
.snap-note .ic { flex: none; margin-top: 2px; color: var(--blue); }

.grade { display: grid; place-items: center; min-width: 62px; padding: 0 8px; border-radius: var(--radius); font-size: 32px; font-weight: 700; line-height: 1; flex: none; }
.grade.g-good { background: #1c3a2a; color: var(--green); }
.grade.g-mid { background: #3a2e16; color: var(--amber); }
.grade.g-bad { background: #3c1c23; color: var(--red); }
.line-res { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.line-res .kv { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv b em { font-style: normal; font-size: 13px; margin-left: 4px; }
.up-g { color: var(--green); } .up-a { color: var(--amber); } .up-r { color: var(--red); }
.progress-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text-2); font-size: 14px; }
.progress-line .ic { color: var(--blue); }
.bar-run { flex: 1; height: 5px; border-radius: 3px; background: #1b2a38; overflow: hidden; }
.bar-run i { display: block; height: 100%; width: 30%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--acc), transparent); animation: run 1.3s ease-in-out infinite; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.hcheck { margin-bottom: 14px; }
.findings { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.verdict { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius); font-size: 15px; font-weight: 600; line-height: 1.4; }
.verdict .ic { font-size: 18px; flex: none; }
.verdict.ok { background: rgba(67,209,122,.08); border: 1px solid #1f4d39; color: #a6ecc3; }
.verdict.ok .ic { color: var(--green); }
.verdict.warn { background: rgba(239,176,58,.08); border: 1px solid rgba(239,176,58,.3); color: #f6d38f; }
.verdict.warn .ic { color: var(--amber); }
.verdict.bad { background: rgba(255,95,109,.08); border: 1px solid #5c2630; color: #ffd0d5; }
.verdict.bad .ic { color: var(--red); }
.finding { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 6px; background: rgba(21,32,43,.85); border: 1px solid var(--line); }
.finding > .ic { margin-top: 2px; font-size: 16px; }
.finding.ok > .ic { color: var(--green); }
.finding.warn > .ic { color: var(--amber); }
.finding.bad > .ic { color: var(--red); }
.finding .grow { flex: 1; min-width: 0; }
.finding b { display: block; color: #fff; font-size: 15px; }
.finding span { display: block; margin-top: 1px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.finding .val { flex: none; font-size: 16px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1150px) {
  .line-res .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-chips { display: none; }
}

/* ── colour picker ───────────────────────────────────────────────────── */
.cp-card { margin-bottom: 14px; }
.cp { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; }
.cp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cp-sv { position: relative; height: 200px; border-radius: 6px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue) 100% 50%)); cursor: crosshair; touch-action: none; }
.cp-hue { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); cursor: pointer; touch-action: none; }
.cp-knob { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5); pointer-events: none; }
.cp-hue .cp-knob { top: 50%; width: 12px; height: 22px; margin: -11px 0 0 -6px; border-radius: 4px; background: #fff; }
.cp-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cp-swatch { height: 46px; border-radius: 6px; border: 1px solid var(--line-2); }
.cp-lab { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.cp-hex { width: 100%; font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .5px; }
.cp-rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-rgb label { display: flex; flex-direction: column; gap: 4px; }
.cp-rgb .input { width: 100%; padding: 0 4px; text-align: center; }
.cp-reset { margin-top: auto; }
.cp-pre-lab { margin: 14px 0 8px; }
.cp-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-pre { width: 34px; height: 34px; border-radius: 6px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .12s; }
.cp-pre:hover { transform: scale(1.08); }
.cp-pre.on { box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px #fff; }
.set-sec .cp { grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; margin-top: 6px; }
.set-sec .cp-sv { height: 160px; }
.set-sec .cp-presets { margin-bottom: 10px; }
.set-sec .cp-pre { width: 28px; height: 28px; }

/* ── crosshair ───────────────────────────────────────────────────────── */
.xh-preview { position: relative; display: grid; place-items: center; height: 220px; border-radius: 6px; border: 1px solid var(--line); background-color: #0d151d; background-image: conic-gradient(#131d27 25%, transparent 0 50%, #131d27 0 75%, transparent 0); background-size: 24px 24px; }
.xh-preview svg { display: block; }
.xh-zoom { position: absolute; right: 10px; bottom: 8px; color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.xh-shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.xh-shapes .btn.on { background: var(--acc-soft); border-color: var(--acc-border); color: #fff; }
@media (max-width: 1150px) { .cp { grid-template-columns: 1fr; } }

/* ── restore & repairs ───────────────────────────────────────────────── */
.restore-hero { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin-bottom: 18px; border-radius: 10px; background: linear-gradient(120deg, rgba(255,95,109,.14), rgba(21,32,43,.92) 60%); border: 1px solid #5c2630; }
.restore-ic { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 12px; font-size: 26px; color: var(--red); background: rgba(255,95,109,.12); border: 1px solid rgba(255,95,109,.35); }
.restore-hero .grow { flex: 1; min-width: 0; }
.restore-hero h2 { margin: 0; font-size: 24px; color: #fff; }
.restore-hero p { margin: 3px 0 0; color: var(--text-2); line-height: 1.4; max-width: 620px; }
.restore-hero small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.btn-red { background: linear-gradient(180deg, #ff6b78 0%, #e0414f 100%); color: #fff; box-shadow: 0 0 18px rgba(255,95,109,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-red:hover:not(:disabled) { filter: brightness(1.06); }
.fix-list { display: flex; flex-direction: column; gap: 8px; }
.fix-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); transition: border-color .15s; }
.fix-row:hover { border-color: #283b4d; }
.fix-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 7px; font-size: 17px; background: var(--acc-soft); color: var(--blue); }
.fix-row .grow { flex: 1; min-width: 0; }
.fix-row b { display: block; color: #fff; font-size: 16px; }
.fix-row .grow > span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.fix-row .grow > span.warn { color: #f2c46b; font-size: 13px; }

/* ── system info ─────────────────────────────────────────────────────── */
.lts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.lt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); min-width: 0; }
.lt.warn { border-color: rgba(239,176,58,.45); }
.lt > div { flex: 1; min-width: 0; }
.lt-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 7px; font-size: 18px; background: var(--acc-soft); color: var(--blue); }
.lt.warn .lt-ic { background: #3a2e16; color: var(--amber); }
.lt > div > span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt b { display: block; margin-top: 1px; font-size: 22px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt b small { font-size: 13px; color: var(--muted); }
.lt em { display: block; margin-top: 3px; font-style: normal; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt .lt-bar { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: #1b2a38; overflow: hidden; }
.lt-bar i { display: block; height: 100%; border-radius: 2px; transition: width .5s; }
.lt-bar i.g { background: var(--green); } .lt-bar i.a { background: var(--amber); } .lt-bar i.r { background: var(--red); }
.sis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.sik { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); min-width: 0; }
.sik > div { flex: 1; min-width: 0; }
.sik-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 7px; font-size: 17px; background: var(--acc-soft); color: var(--blue); }
.sik > div > span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sik b { display: block; margin-top: 2px; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sik em { display: block; margin-top: 1px; font-style: normal; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1150px) { .lts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── auto-boost ──────────────────────────────────────────────────────── */
.ab-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.ab-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s; }
.ab-card:hover { border-color: #283b4d; }
.ab-card.on { border-color: rgba(45,212,191,.5); background: linear-gradient(90deg, rgba(45,212,191,.07), rgba(21,32,43,.92) 50%); }
.ab-card.aggr.on { border-color: rgba(239,176,58,.5); background: linear-gradient(90deg, rgba(239,176,58,.07), rgba(21,32,43,.92) 50%); }
.ab-card .grow { flex: 1; min-width: 0; }
.ab-card b { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 16.5px; }
.ab-card b .ic { color: var(--blue); }
.ab-card.aggr b .ic { color: var(--amber); }
.ab-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.ab-games { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 14px 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ab-games .ic { flex: none; margin-top: 3px; }
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.task-row.on { border-color: var(--acc-border); }
.task-row .grow { flex: 1; min-width: 0; }
.task-row b { display: block; color: #fff; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-row small { display: block; color: var(--muted); font-size: 12.5px; }
.task-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 6px; font-size: 15px; background: #1d2b39; color: var(--text-2); }
.task-row.on .task-ic { background: var(--acc-soft); color: var(--blue); }
.task-on { border-color: var(--acc-border); color: #fff; }
@media (max-width: 1150px) { .ab-row { grid-template-columns: 1fr; } }

/* ── FiveM mods ──────────────────────────────────────────────────────── */
.mod-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); }
.mod-row.off { opacity: .6; }
.mod-row .grow { flex: 1; min-width: 0; }
.mod-row b { display: block; color: #fff; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-row small { display: block; color: var(--muted); font-size: 12.5px; }
.bar-run.det i { width: 0; animation: none; background: linear-gradient(90deg, var(--acc-2), var(--acc)); transition: width .3s; }
label.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── resolution ──────────────────────────────────────────────────────── */
.select { width: 100%; height: 40px; padding: 0 38px 0 12px; border-radius: 6px; border: 1px solid #22323f; background: #15212c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8d9d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center / 16px; color: var(--text); font: inherit; font-size: 15px; outline: 0; appearance: none; cursor: pointer; }
.select:focus { border-color: var(--acc-border); }
.select option { background: #15212c; color: var(--text); }
.disp-head { margin-bottom: 12px; }
.disp-head h3 { display: flex; align-items: center; gap: 9px; font-size: 20px; color: var(--acc-text); }
.disp-head h3 .ic { color: var(--blue); }
.disp-card { margin-top: 0 !important; margin-bottom: 12px; }
.disp-card h3 { margin-bottom: 10px; font-size: 16px; }
.disp-sub { margin: 8px 0 0 !important; font-size: 13.5px; }
.disp-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; }
.disp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }
.disp-chips .muted { margin-right: 4px; }
.chip-btn { height: 28px; padding: 0 10px; border-radius: 6px; background: #1a2733; border: 1px solid #263644; color: var(--text-2); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-btn:hover { color: #fff; border-color: #2f4a63; }
.chip-btn.on { background: var(--acc-soft); border-color: var(--acc-border); color: #fff; }
.chip-btn.off { opacity: .55; border-style: dashed; }
.disp-custom { display: flex; align-items: center; gap: 8px; }
.disp-custom .input { width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.disp-custom span { color: var(--dim); font-weight: 700; }
.disp-add { border-color: var(--acc-border); color: var(--acc-text); }
.disp-actions { display: flex; gap: 10px; margin-top: 4px; }
.disp-foot { margin-top: 10px; font-size: 13px; }
.search-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.search-pages .muted { margin-right: 4px; font-size: 14px; }

/* ── Snap Tap live + test ────────────────────────────────────────────── */
.snap-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.snap-stat small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.snap-test { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: rgba(12,20,28,.55); border: 1px solid var(--line); }
.st-head { display: flex; align-items: center; gap: 12px; }
.st-head .grow { flex: 1; min-width: 0; }
.st-head b { display: block; color: #fff; font-size: 15px; }
.st-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.st-area { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.st-keys { display: flex; gap: 8px; }
.st-keys .keycap { width: 52px; height: 52px; font-size: 22px; transition: background .06s, box-shadow .06s, color .06s; }
.st-keys .keycap.down { background: linear-gradient(180deg, var(--acc-hi), var(--acc-2)); border-color: var(--acc-hi); color: #fff; box-shadow: 0 0 18px rgba(var(--acc-rgb),.55); }
.st-log { flex: 1; min-width: 0; color: var(--text-2); font-family: Consolas, "Cascadia Mono", monospace; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* quick check */
.qc { margin-bottom: 22px; }
.qc .finding .btn { flex: none; align-self: center; }

/* ── mod library ─────────────────────────────────────────────────────── */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lib-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: rgba(21,32,43,.92); border: 1px solid var(--line); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lib-card:hover { border-color: var(--acc-border); box-shadow: 0 0 16px rgba(var(--acc-rgb),.12); }
.lib-card.inst { border-color: #1f4d39; }
.lib-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--acc-deep) 0%, #0f1821 75%); }
.lib-thumb::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.05) 0 7px, transparent 7px 15px); -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.lib-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.lib-thumb.has-img img { display: block; }
.lib-thumb.has-img::before, .lib-thumb.has-img .lib-art { display: none; }
.lib-art { position: relative; font-size: 46px; color: rgba(255,255,255,.88); filter: drop-shadow(0 0 14px rgba(var(--acc-rgb),.55)); }
.lib-thumb.c-tracer { background: linear-gradient(135deg, #6b4410 0%, #3c1c23 55%, #0f1821 100%); }
.lib-thumb.c-sound { background: linear-gradient(135deg, #3b2a6e 0%, #1d1838 55%, #0f1821 100%); }
.lib-thumb.c-graphics { background: linear-gradient(135deg, #0f5148 0%, #12302c 55%, #0f1821 100%); }
.lib-thumb.c-vehicle { background: linear-gradient(135deg, #26415e 0%, #172431 55%, #0f1821 100%); }
.lib-thumb.c-tracer .lib-art { filter: drop-shadow(0 0 14px rgba(239,176,58,.6)); }
.lib-thumb.c-sound .lib-art { filter: drop-shadow(0 0 14px rgba(167,139,250,.6)); }
.lib-thumb.c-graphics .lib-art { filter: drop-shadow(0 0 14px rgba(45,212,191,.6)); }
.lib-cat { position: absolute; left: 10px; top: 10px; background: rgba(12,20,28,.82); color: var(--text-2); }
.lib-state { position: absolute; right: 10px; top: 10px; background: rgba(12,20,28,.82); }
.lib-body { flex: 1; padding: 12px 14px 2px; min-width: 0; }
.lib-body b { display: block; color: #fff; font-size: 16.5px; line-height: 1.2; }
.lib-body > small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.lib-body p { margin: 7px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.4; }
.lib-actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px 14px; }
.lib-actions .muted { font-size: 14px; }
.mod-assets { display: block; margin-top: 4px; color: var(--dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 13px; line-height: 1.35; }
.mod-note > .ic { flex: none; margin-top: 2px; }
.mod-note > span { flex: 1; min-width: 0; }
.mod-note .btn { flex: none; margin-top: -3px; }
.mod-note.warn { color: #f2c46b; }
.mod-note.bad { color: #ff9aa4; }
.mod-note .btn { height: 26px; padding: 0 10px; font-size: 13px; }

/* tweak rows: icon tile + AKTIV badge (AQUA style) */
.tweak-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin-top: -3px; border-radius: 6px; background: #1d2b39; color: var(--text-2); font-size: 16px; transition: background .15s, color .15s, box-shadow .15s; }
.tweak.on .tweak-ic { background: linear-gradient(180deg, var(--acc-hi), var(--acc-2)); color: var(--acc-ink); box-shadow: 0 0 12px rgba(var(--acc-rgb),.35); }
.tweak.na .tweak-ic { opacity: .6; }
.tag.t-on { height: 19px; margin-left: 2px; background: rgba(67,209,122,.14); color: var(--green); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
:root[data-compact] .tweak-ic { width: 26px; height: 26px; font-size: 14px; margin-top: -1px; }