:root{--bg:#0f0b1f;--fg:#f4eeff;--card:#1b1538;--line:#ffffff22;--acc:#ff5fa8;--acc2:#7a5cff;--acc3:#27e1ff;--ok:#2ee59d;--bad:#ff4d6d;--mut:#a89fcb}
[data-theme=light]{--bg:#f7f3ff;--fg:#1b1535;--card:#fff;--line:#00000022;--mut:#6a6490}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:16px/1.55 "Trebuchet MS","Segoe UI",sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 15% 20%,#7a5cff33,transparent 45%),radial-gradient(circle at 85% 75%,#ff5fa833,transparent 45%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.2) rotate(4deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes flow{to{background-position:300% 0}}
@keyframes pulse{50%{box-shadow:0 0 0 12px #ff5fa800,0 0 28px #ff5fa877}}
a{color:var(--acc3)}
.top{position:sticky;top:0;z-index:30;display:flex;gap:.8rem;align-items:center;padding:.6rem 1rem;background:var(--card);border-bottom:1px solid var(--line)}
#burger{background:none;border:1px solid var(--line);color:var(--fg);border-radius:10px;font-size:1.3rem;padding:.2rem .6rem;cursor:pointer;transition:.3s}
#burger:hover{transform:rotate(90deg);border-color:var(--acc)}
.logo{font-weight:900;text-decoration:none;background:linear-gradient(90deg,var(--acc),var(--acc3),var(--acc));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite;white-space:nowrap}
.search{position:relative;flex:1;max-width:520px;margin-left:auto}
input,select{width:100%;padding:.6rem .8rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}
input:focus,select:focus{outline:2px solid var(--acc2)}
input[readonly]{opacity:.6}
.results{position:absolute;left:0;right:0;top:112%;background:var(--card);border:1px solid var(--line);border-radius:12px;display:none;overflow:hidden}
.results.open{display:block}
.results a{display:block;padding:.55rem .9rem;color:var(--fg);text-decoration:none}
.results a:hover{background:var(--line)}
#drawer{position:fixed;inset:0 auto 0 0;width:270px;z-index:50;background:var(--card);padding:4.5rem 1rem 1rem;transform:translateX(-105%);transition:transform .4s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;gap:.35rem;border-right:1px solid var(--line)}
#drawer.open{transform:none}
#drawer a{color:var(--fg);text-decoration:none;padding:.7rem .9rem;border-radius:12px;transition:.25s}
#drawer a:hover,#drawer a.on{background:linear-gradient(90deg,#ff5fa833,#27e1ff22);padding-left:1.3rem}
#ov{position:fixed;inset:0;background:#000a;opacity:0;pointer-events:none;transition:.3s;z-index:40}
#ov.open{opacity:1;pointer-events:auto}
.page{flex:1;width:min(1000px,100%);margin:0 auto;padding:1.5rem 1rem;animation:rise .6s both}
.hero{text-align:center;padding:3.5rem 0 2rem}
.title{font-size:clamp(2.2rem,7vw,4.4rem);margin:.2rem 0;font-weight:900;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc3),var(--acc));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}
.sub{font-size:1.3rem}.lead{max-width:640px;margin:1rem auto 2rem;color:var(--mut)}
.btn{display:inline-block;border:0;border-radius:999px;padding:.6rem 1.3rem;color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc3));background-size:200% 100%;transition:.4s}
.btn:hover{background-position:100% 0;transform:translateY(-2px)}
.btn.big{padding:.9rem 2.6rem;font-size:1.15rem;animation:pulse 2.4s infinite}
.btn.sm{padding:.35rem .9rem}.btn.ghost{background:none;border:1px solid var(--line);color:var(--fg)}.btn.danger{background:var(--bad)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.2rem;margin:1rem 0}
.row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.4rem .8rem;background:var(--card);border:1px solid var(--line);border-radius:18px;color:var(--fg);text-decoration:none;font-size:2rem;transition:.3s;overflow:hidden}
.tile span{font-size:.9rem;word-break:break-all;text-align:center}
.tile:hover{transform:translateY(-5px) rotate(-1deg);border-color:var(--acc)}
.tile.off{opacity:.45;pointer-events:none}
.muted{color:var(--mut)}
.form label{display:block;margin:.8rem 0}.form label>span{display:block;font-size:.9rem;color:var(--mut);margin-bottom:.25rem}
.cost{padding:.8rem;border-radius:12px;background:var(--line);margin:1rem 0}
.err{color:var(--bad);min-height:1.4rem}.ok{color:var(--ok)}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem}.tab.on{outline:2px solid var(--acc3)}
.hide{display:none}
.wrap{position:relative}.act{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem}
.ic{background:#8884;border:0;border-radius:10px;padding:.3rem .5rem;cursor:pointer;text-decoration:none;font-size:1rem}
.item{border-radius:18px;padding:1.3rem;text-align:center;border:1px solid var(--line);animation:rise .5s both}
.item h3{margin:0 0 .6rem;word-break:break-all}.meta{font-size:.85rem;opacity:.75;margin:.5rem 0 0}
.th-light{background:#fff;color:#14112b}.th-dark{background:#090914;color:#fff;box-shadow:0 0 26px #7a5cff44}
.face span{display:inline-block;margin:.25rem;min-width:62px;padding:.5rem;border-radius:12px;background:#80808022;font-size:.75rem}
.face b{display:block;font-size:1.6rem}.done{font-size:1.5rem}
.dial{width:180px}.dial circle{fill:none;stroke:currentColor;stroke-width:2}.dial line{stroke:currentColor;stroke-linecap:round;stroke-width:2}.dial .s{stroke:var(--acc);stroke-width:1}
.digi{font:700 2.2rem monospace}.date{font-size:.9rem;margin-top:.4rem}
.list{list-style:none;padding:0}.list li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.8rem 1rem;margin:.5rem 0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.q{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:center}.q .bar{grid-column:1/-1}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;width:0;background:#3b82f6;transition:width .8s}
.bar.yellow i{background:#facc15}.bar.red i{background:var(--bad)}
.banner{position:sticky;top:0;z-index:60;display:flex;justify-content:center;gap:1rem;align-items:center;padding:.6rem 1rem;font-weight:700;background:#facc15;color:#222}
.banner.red{background:var(--bad);color:#fff}.banner button{background:none;border:0;font-size:1.2rem;cursor:pointer;color:inherit}
.disk{font-size:1.1rem;margin-bottom:.5rem}.warn{color:var(--bad)}
.who{margin:.2rem 0 0}.zone{border-color:var(--bad)}
.foot{text-align:center;padding:1.5rem;color:var(--mut);font-size:.9rem}
.cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.2rem;animation:rise .6s both}
.cookies p{margin:0}
@media(prefers-reduced-motion:reduce){*,body::before{animation:none!important;transition:none!important}}
.auth{max-width:440px;margin:2rem auto}