@font-face { font-family:Inter; src:url(inter.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
:root { --bg:#09090a; --panel:#121214; --soft:#1a1a1d; --line:#232326; --line2:#34343a; --ink:#f4f3f0; --muted:#918f89; --gold:#c9a876; --gold2:#ecd6ae; --logo:#e07b3f; --good:#5cb79f; --bad:#e0736d; --warn:#e0a54f; --ease:cubic-bezier(.16,1,.3,1); color-scheme:dark; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:radial-gradient(900px 500px at 85% -10%,rgba(201,168,118,.12),transparent 70%) fixed,var(--bg); font:15px/1.55 Inter,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--gold2); text-decoration:none; } :focus-visible { outline:2px solid var(--gold); outline-offset:2px; border-radius:8px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1080px; margin:0 auto; padding:18px 22px; }
.logo { font-size:24px; font-weight:700; letter-spacing:-.05em; color:var(--logo); } .logo span { margin-left:8px; font-size:13px; font-weight:500; letter-spacing:0; color:var(--muted); }
.top nav { display:flex; gap:20px; font-size:14px; } .top nav a { color:var(--muted); } .top nav a:hover { color:#fff; }
main { max-width:1080px; margin:0 auto; padding:14px 22px 90px; display:grid; gap:16px; animation:in .5s var(--ease); } @keyframes in { from { opacity:0; transform:translateY(8px); } }
h1 { margin:0; font-size:32px; letter-spacing:-.03em; font-weight:650; } h2 { margin:0 0 14px; font-size:15px; font-weight:600; } p { margin:0; } .muted { color:var(--muted); } .small { font-size:13px; }
.card { padding:22px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#161618,#121214 100px); min-width:0; }
.grid { display:grid; gap:16px; } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.stat b { display:block; font-size:32px; font-weight:640; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:2px 0; } .stat span { color:var(--muted); font-size:13px; }
.bar { height:6px; border-radius:6px; background:var(--soft); overflow:hidden; margin-top:10px; } .bar i { display:block; height:100%; background:var(--gold); border-radius:6px; transition:width .6s var(--ease); } .bar i.warn { background:var(--warn); } .bar i.bad { background:var(--bad); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:9px 16px; border:1px solid var(--line2); border-radius:11px; background:rgba(255,255,255,.04); color:var(--ink); font:550 14px Inter,sans-serif; cursor:pointer; transition:transform .2s var(--ease),filter .15s,border-color .15s; } .btn:hover { border-color:#55555c; } .btn:active { transform:scale(.98); } .btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:linear-gradient(180deg,#dcc192,#c4a06a); border-color:transparent; color:#17120a; } .btn.primary:hover { filter:brightness(1.06); } .row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .between { justify-content:space-between; }
input,textarea,select { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:#0b0b0c; color:var(--ink); font:inherit; transition:border-color .15s,box-shadow .15s; } input:focus,textarea:focus,select:focus { outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,118,.18); } textarea { resize:vertical; min-height:76px; }
label.f { display:grid; gap:5px; font-size:13px; color:var(--muted); margin-bottom:12px; }
.code { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0c0c0d; margin:10px 0; } .code header { display:flex; justify-content:space-between; align-items:center; height:34px; padding:0 8px 0 12px; background:#17171a; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); } .code header button { background:none; border:0; color:var(--muted); font:500 12px Inter,sans-serif; cursor:pointer; padding:3px 8px; border-radius:6px; } .code header button:hover { color:#fff; background:var(--soft); } .code pre { margin:0; padding:12px 14px; overflow-x:auto; font:13px/1.6 ui-monospace,Menlo,Consolas,monospace; }
.opt { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); align-items:start; } .opt:first-of-type { border-top:0; } .opt input[type=checkbox] { width:18px; height:18px; margin-top:2px; accent-color:var(--gold); } .opt b { font-weight:550; } .opt small { display:block; color:var(--muted); } .opt .val { grid-column:2; display:none; } .opt.on .val { display:block; }
table { width:100%; border-collapse:collapse; font-size:14px; } th { text-align:left; color:var(--muted); font-weight:500; font-size:12.5px; padding:0 10px 8px 0; border-bottom:1px solid var(--line); } td { padding:10px 10px 10px 0; border-bottom:1px solid var(--line); } tr:last-child td { border-bottom:0; } .tw { overflow-x:auto; }
.pill { display:inline-block; padding:1px 9px; border-radius:20px; background:var(--soft); font-size:12.5px; white-space:nowrap; } .pill.good { color:var(--good); } .pill.bad { color:var(--bad); } .pill.warn { color:var(--warn); }
.seg { display:inline-grid; grid-auto-flow:column; padding:3px; border:1px solid var(--line); border-radius:12px; background:#0b0b0c; gap:2px; } .seg button { padding:6px 11px; border:0; border-radius:9px; background:none; color:var(--muted); font:550 13px Inter,sans-serif; cursor:pointer; } .seg button.on { background:var(--soft); color:#fff; }
input[type=range] { padding:0; border:0; background:none; accent-color:var(--gold); box-shadow:none !important; } .price { font-size:38px; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#toasts { position:fixed; right:18px; bottom:18px; display:grid; gap:8px; z-index:9; } .toast { padding:10px 14px; border:1px solid var(--line2); border-radius:12px; background:var(--soft); animation:in .3s var(--ease); max-width:360px; } .toast.bad { border-color:var(--bad); }
.skeleton { height:200px; border-radius:20px; background:var(--panel); animation:p 1.2s infinite; } @keyframes p { 50% { opacity:.5; } } .empty { padding:40px 20px; text-align:center; }
@media (max-width:800px) { .g3,.g2 { grid-template-columns:minmax(0,1fr); } .top nav a:not(:last-child) { display:none; } h1 { font-size:26px; } }
@media (prefers-reduced-motion:reduce) { *,*::before { animation:none !important; transition:none !important; } }