*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#050607;--card:#121417;--line:#23272d;--txt:#f4f5f6;--mut:#8b9199;--acc:#3ee6c4;--acc2:#ffd23f;--red:#ff4d5e}
html,body{background:var(--bg);color:var(--txt);font:16px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;min-height:100%}
body{background:radial-gradient(120% 50% at 20% -10%,#2a1748 0,transparent 60%),radial-gradient(90% 40% at 100% 0,#0d3b3a 0,transparent 60%),var(--bg);background-attachment:fixed}
#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:12px 20px 0;position:relative}
.top{display:flex;align-items:center;height:40px;gap:12px}
.back{background:none;border:0;color:var(--txt);font-size:24px;width:32px;cursor:pointer}
.sec{flex:1;text-align:center;font-size:11px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase;margin-right:32px}
.bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:4px 0 10px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#8af);transition:width .4s}
.body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0 120px;animation:in .35s ease}
.body.topal{justify-content:flex-start;padding-top:18px}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h1{font-size:28px;font-weight:400;line-height:1.15;margin-bottom:10px;letter-spacing:-.01em}h1 b{font-weight:800;display:block}
.sub{color:var(--mut);font-size:15px;margin-bottom:20px}
.cta{position:fixed;left:0;right:0;bottom:0;padding:14px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%);max-width:480px;margin:0 auto;z-index:5}
.btn{width:100%;padding:17px;border-radius:40px;border:1.5px solid var(--acc);background:linear-gradient(90deg,#0f2a27,#141a2e);color:#fff;font-weight:800;letter-spacing:.12em;font-size:14px;text-transform:uppercase;cursor:pointer;box-shadow:0 0 24px #3ee6c433}
.btn.solid{background:var(--acc);color:#04120f;border-color:var(--acc)}.btn.gold{background:var(--acc2);color:#1a1400;border-color:var(--acc2);box-shadow:0 0 30px #ffd23f55}
.btn:disabled{opacity:.35;box-shadow:none}
.link{display:block;text-align:center;color:var(--mut);font-size:13px;margin-top:12px;background:none;border:0;width:100%}
.opt{display:flex;align-items:center;gap:14px;width:100%;padding:17px 16px;margin-bottom:10px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;color:var(--txt);font-size:16px;text-align:left;cursor:pointer;transition:.15s}
.opt .e{font-size:24px;width:30px;text-align:center}.opt small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.opt.on{border-color:var(--acc);background:#0f2622}.opt .ck{margin-left:auto;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line)}.opt.on .ck{background:var(--acc);border-color:var(--acc)}
input.txt{width:100%;padding:18px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);color:#fff;font-size:18px;text-align:center;outline:0}input.txt:focus{border-color:var(--acc)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shape{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--line);aspect-ratio:3/4;background:#111 center/cover;cursor:pointer}.shape.on{border-color:var(--acc)}.shape span{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(transparent,#000c);font-weight:800}
.big{font-size:64px;font-weight:800;text-align:center;letter-spacing:-.02em}.big small{font-size:20px;color:var(--mut);font-weight:500;margin-left:6px}
input[type=range]{width:100%;margin:26px 0 8px;accent-color:var(--acc);height:36px}
.ticks{display:flex;justify-content:space-between;color:var(--mut);font-size:12px}
.seg{display:flex;background:var(--card);border-radius:30px;padding:4px;margin:0 auto 18px;width:max-content}.seg button{border:0;background:none;color:var(--mut);padding:8px 18px;border-radius:30px;font-weight:700}.seg .on{background:#fff;color:#000}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#cfd3d8;margin-bottom:16px;text-align:left}.chk input{width:22px;height:22px;accent-color:var(--acc);flex:none}
.chk a{color:#fff}
.road .s{display:flex;gap:14px;margin-bottom:18px}.road .n{width:34px;height:34px;border-radius:50%;background:#0f2622;border:1.5px solid var(--acc);display:grid;place-items:center;font-weight:800;flex:none}
.testi{font-size:14px}.testi b{display:block;margin-bottom:4px}.stars{color:var(--acc2);letter-spacing:2px}
.hl{color:var(--acc)}.gold{color:var(--acc2)}
.plate{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1}.plate img{width:100%;height:100%;object-fit:cover}
.scan{position:absolute;inset:0;background:linear-gradient(transparent 45%,#3ee6c477 50%,transparent 55%);background-size:100% 200%;animation:scan 1.4s linear infinite}@keyframes scan{from{background-position:0 -100%}to{background-position:0 100%}}
.tapme{position:absolute;inset:auto 0 16px;margin:auto;width:max-content;padding:10px 18px;border-radius:30px;background:#000a;border:1px solid var(--acc);font-weight:700;animation:pulse 1.2s infinite}@keyframes pulse{50%{transform:scale(1.06)}}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.macros div{background:#0b0d10;border-radius:12px;padding:10px;text-align:center}.macros b{display:block;font-size:18px}
.hold{width:150px;height:150px;border-radius:50%;margin:30px auto;display:grid;place-items:center;font-size:56px;border:3px solid var(--line);position:relative;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer}
.hold svg{position:absolute;inset:-3px;transform:rotate(-90deg)}
.load .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);color:var(--mut)}.load .row.ok{color:#fff}.load .row.ok:after{content:"✓";color:var(--acc)}
.pct{font-size:72px;font-weight:800;text-align:center}
.sum .kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.sum .kv span{color:var(--mut)}
.plan{display:block;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;color:#fff;position:relative;cursor:pointer}.plan.on{border-color:var(--acc);background:#0f2622}
.plan .tag{position:absolute;top:-10px;right:14px;background:var(--acc);color:#000;font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px}
.plan .pr{float:right;text-align:right;font-weight:800}.plan .pr small{display:block;color:var(--mut);font-weight:500;font-size:12px}
s{color:var(--mut)}
.x{position:absolute;top:14px;left:16px;font-size:22px;color:var(--mut);background:none;border:0;z-index:6;opacity:0;transition:opacity .4s}.x.show{opacity:1}
.feat li{list-style:none;padding:6px 0}.feat li:before{content:"✓ ";color:var(--acc);font-weight:800}
.wheelwrap{position:relative;width:280px;height:280px;margin:16px auto}.wheel{width:100%;height:100%;border-radius:50%;border:6px solid var(--acc2);transition:transform 4s cubic-bezier(.17,.67,.12,.99)}
.pin{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border:14px solid transparent;border-top:24px solid #fff;z-index:2}
.badge{display:inline-block;background:var(--red);color:#fff;font-weight:800;padding:4px 10px;border-radius:8px;font-size:13px;margin-bottom:10px}
.mock{width:230px;margin:6px auto 18px;border-radius:36px;border:6px solid #2a2d33;background:#0b0c0f;padding:16px 14px;box-shadow:0 30px 60px #000,0 0 60px #3ee6c422;font-size:12px}
.mock .w{background:#16191d;border-radius:14px;padding:10px;margin-top:8px}.mock .wk{background:linear-gradient(135deg,#3b0d12,#141a2e);border-radius:14px;padding:12px;margin-top:8px}
.fine{color:var(--mut);font-size:11px;text-align:center;margin-top:10px}
.chart{width:100%;height:auto}