/* Nova — «приложение злодея». OLED-чёрный, стекло, неон. Все темы тёмные. */
:root{
  --bg:#050507;--bg2:#0a0a0e;--card:rgba(255,255,255,.035);--card2:rgba(255,255,255,.07);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.14);
  --text:#f3f3f7;--muted:#8b8b9c;--accent:#ff3b5c;--accent2:#ff8a3d;--on-accent:#0a0a0f;
  --glow:rgba(255,59,92,.38);--grad:linear-gradient(135deg,#ff3b5c 0%,#8a2bff 100%);
  --danger:#ff5c7a;--ok:#5cffb1;--r:20px;--r2:14px;
}
[data-theme="phantom"]{--bg:#05070b;--bg2:#0a0d14;--accent:#4ff2ff;--accent2:#9aa7ff;--glow:rgba(79,242,255,.32);--grad:linear-gradient(135deg,#4ff2ff 0%,#5b6cff 100%)}
[data-theme="toxic"]{--bg:#050705;--bg2:#0a0e0a;--accent:#b6ff3b;--accent2:#34e0a1;--glow:rgba(182,255,59,.32);--grad:linear-gradient(135deg,#b6ff3b 0%,#1ad19a 100%)}
[data-theme="obsidian"]{--bg:#060504;--bg2:#0d0a08;--text:#f6f1e8;--muted:#9a8f80;--accent:#f5c451;--accent2:#ff9f43;--glow:rgba(245,196,81,.32);--grad:linear-gradient(135deg,#f5c451 0%,#ff7a59 100%)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
svg{width:1.2em;height:1.2em;flex:none;vertical-align:-.2em}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20% -20% auto -20%;height:60vh;background:radial-gradient(60% 60% at 30% 0%,var(--glow),transparent 70%);opacity:.55;pointer-events:none;z-index:0}
#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,.display{font-family:Unbounded,Manrope,sans-serif;letter-spacing:-.01em}
.num{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;background:linear-gradient(var(--bg) 70%,transparent);backdrop-filter:blur(14px)}
.title{font-family:Unbounded,Manrope,sans-serif;font-weight:700;font-size:17px;flex:1;letter-spacing:.01em}
.iconbtn{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s,background .16s}
.iconbtn:active{transform:scale(.94);background:var(--card2)}
.iconbtn[hidden]{display:none}
.iconbtn svg{width:20px;height:20px}
.view{padding:6px 16px calc(env(safe-area-inset-bottom) + 28px);flex:1;display:flex;flex-direction:column;gap:12px;animation:in .22s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;backdrop-filter:blur(10px)}
.card.hero{position:relative;overflow:hidden;background:var(--bg2);border-color:var(--line2)}
.card.hero::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;background:radial-gradient(circle,var(--glow),transparent 65%);pointer-events:none}
.hero h1{margin:0 0 6px;font-size:22px;font-weight:800}
.hero p{margin:0;color:var(--muted);font-weight:600;font-size:14px}
.hero .chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px}
.chip svg{width:14px;height:14px;color:var(--accent)}
.brand{display:flex;align-items:center;gap:8px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}

.section{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:10px 4px 0}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:15px 16px;min-height:56px;border-bottom:1px solid var(--line);cursor:pointer;background:transparent;border-left:0;border-right:0;border-top:0;width:100%;color:var(--text);font:inherit;text-align:start;transition:background .16s}
.row:last-child{border-bottom:none}
.row:active{background:var(--card2)}
.row .ic{width:38px;height:38px;border-radius:12px;background:var(--card2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.row .ic svg{width:19px;height:19px}
.row .lbl{flex:1;font-weight:700;font-size:15px}
.row .sub{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}
.row .chev{color:var(--muted);display:flex}
.row .chev svg{width:18px;height:18px}
.row .check{color:var(--accent);display:flex}
.row .check svg{width:20px;height:20px}
.tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:6px;background:var(--card2);border:1px solid var(--line);color:var(--accent);margin-inline-start:8px;vertical-align:middle;text-transform:uppercase}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border:1px solid var(--line);border-radius:var(--r2);padding:13px 16px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;background:var(--card2);color:var(--text);transition:transform .16s,filter .16s}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px}
.btn.primary{background:var(--grad);color:var(--on-accent);border:none;box-shadow:0 8px 28px -8px var(--glow)}
.btn.gold{background:linear-gradient(135deg,#f5c451,#ff7a59);color:#1a0f05;border:none;box-shadow:0 8px 28px -8px rgba(245,196,81,.45)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5}
.btn.sm{min-height:42px;padding:9px 14px;font-size:14px;width:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .v{font-size:30px;font-weight:800;line-height:1.1}
.stat .k{color:var(--muted);font-size:12px;font-weight:700;margin-top:4px;letter-spacing:.02em}
.stat .i{color:var(--accent);margin-bottom:10px;display:flex}
.stat .i svg{width:22px;height:22px}

.step{display:flex;gap:14px;align-items:flex-start}
.step .n{width:36px;height:36px;border-radius:12px;background:var(--grad);color:var(--on-accent);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 18px -6px var(--glow)}
.step h4{margin:0 0 3px;font-size:15px;font-weight:800}
.step p{margin:0;color:var(--muted);font-size:13.5px}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;word-break:break-all}
.linkbox code{flex:1;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;color:var(--accent)}
.feat{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-top:8px;font-weight:700;font-size:14.5px;background:var(--card)}
.feat .ic{color:var(--accent);display:flex}
.feat .ic svg{width:18px;height:18px}
.plan{position:relative;background:var(--bg2);border:1px solid transparent;background-clip:padding-box}
.plan::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.plan .price{font-size:28px;font-weight:800;color:var(--accent);white-space:nowrap}
.plan .name{font-weight:800;font-size:18px}
.plan .per{color:var(--muted);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.plan .per svg{width:14px;height:14px}
.pack{display:flex;align-items:center;gap:14px;position:relative}
.pack .badge{position:absolute;top:-9px;inset-inline-end:14px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:.1em}
.pack .star{width:46px;height:46px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none;color:var(--on-accent);box-shadow:0 6px 18px -6px var(--glow)}
.pack .star svg{width:22px;height:22px}
.pack .lbl{flex:1;font-weight:800;font-size:18px}
.pack .lbl small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--card2);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad);border-radius:3px;transition:width .4s}

.msgs{display:flex;flex-direction:column;gap:10px;padding-bottom:84px}
.msg{max-width:88%;padding:11px 14px;border-radius:18px;white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.45}
.msg.user{align-self:flex-end;background:var(--grad);color:var(--on-accent);border-bottom-right-radius:6px;font-weight:600}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;backdrop-filter:blur(10px)}
.msg.bot pre{background:var(--bg2);border:1px solid var(--line);padding:10px;border-radius:10px;overflow-x:auto;font-size:13px}
.msg.bot code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:13px}
.msg .think{font-size:12px;color:var(--muted);margin-top:6px}
.msg details{margin-bottom:6px;color:var(--muted);font-size:13px}
.msg details summary{cursor:pointer;color:var(--accent);font-weight:700}
.composer{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(transparent,var(--bg) 30%);z-index:4}
.composer textarea{flex:1;resize:none;border:1px solid var(--line2);background:var(--bg2);color:var(--text);border-radius:16px;padding:13px 14px;font:inherit;font-size:15px;max-height:120px;outline:none}
.composer textarea:focus{border-color:var(--accent)}
.composer button{width:50px;height:50px;border:none;border-radius:16px;background:var(--grad);color:var(--on-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -8px var(--glow)}
.composer button svg{width:20px;height:20px}
.empty{text-align:center;color:var(--muted);padding:40px 10px;font-weight:600}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--bg2);color:var(--text);border:1px solid var(--line2);padding:10px 16px;border-radius:12px;font-weight:700;z-index:20;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.toast[hidden]{display:none}
.center{text-align:center}.muted{color:var(--muted)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:s .8s linear infinite;vertical-align:middle}
@keyframes s{to{transform:rotate(360deg)}}
.skel{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--card),var(--card2),var(--card));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

.themebox{border-radius:16px;padding:14px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;gap:12px;margin-bottom:10px;cursor:pointer;min-height:64px;transition:border-color .16s}
.themebox .sw{width:40px;height:40px;border-radius:12px;flex:none;border:1px solid var(--line2);position:relative;overflow:hidden}
.themebox .sw::after{content:"";position:absolute;inset:auto 6px 6px auto;width:12px;height:12px;border-radius:50%}
.themebox .lbl{flex:1;font-weight:800}
.themebox .lock{font-size:12px;color:var(--muted);text-align:end;max-width:45%;display:flex;align-items:center;gap:4px;justify-content:flex-end}
.themebox .lock svg{width:14px;height:14px;flex:none}
.themebox.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.themebox .check{color:var(--accent);display:flex}
.sw.void{background:#08080c}.sw.void::after{background:#ff3b5c;box-shadow:0 0 10px #ff3b5c}
.sw.phantom{background:#080b12}.sw.phantom::after{background:#4ff2ff;box-shadow:0 0 10px #4ff2ff}
.sw.toxic{background:#080b08}.sw.toxic::after{background:#b6ff3b;box-shadow:0 0 10px #b6ff3b}
.sw.obsidian{background:#0c0907}.sw.obsidian::after{background:#f5c451;box-shadow:0 0 10px #f5c451}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;min-height:56px;border-bottom:1px solid var(--line);font-weight:700}
.toggle:last-child{border-bottom:none}
.sw2{width:48px;height:30px;border-radius:15px;background:var(--card2);position:relative;transition:.2s;border:1px solid var(--line2);cursor:pointer;flex:none}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:.2s}
.sw2.on{background:var(--accent);border-color:var(--accent)}.sw2.on::after{left:21px;background:var(--on-accent)}
[dir="rtl"] .sw2::after{left:auto;right:3px}[dir="rtl"] .sw2.on::after{right:21px;left:auto}
a{color:var(--accent)}