:root{--ac:#2ecc71;--ac2:#a8ff78;--bg:#07110c;--card:#0d1c14;--tx:#eafff1;--mut:#86a595;--line:#1c3a2a;--bad:#ff6b6b;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html[data-c="o"]{--ac:#ff8a3d;--ac2:#ffd166}
html[data-c="p"]{--ac:#a66bff;--ac2:#e0b3ff}
html[data-c="r"]{--ac:#ff4d5e;--ac2:#ffa3ab}
html[data-c="b"]{--ac:#3d9bff;--ac2:#9fd3ff}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--ac) 22%,transparent),transparent),var(--bg);color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;overflow-x:hidden}
.pt{position:fixed;inset:0;pointer-events:none;z-index:0}
.pt i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--ac);opacity:.5;animation:up linear infinite}
@keyframes up{to{transform:translateY(-110vh);opacity:0}}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{width:38px;height:38px;filter:drop-shadow(0 0 8px var(--ac));animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 16px var(--ac2))}}
.brand{font-weight:800;letter-spacing:.14em;font-size:18px}
.brand small{display:block;font-weight:500;letter-spacing:.05em;font-size:11px;color:var(--mut)}
nav{margin-left:auto;display:flex;gap:6px}
nav a{padding:8px 12px;border-radius:10px;color:var(--mut);text-decoration:none;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer}
nav a.on{color:var(--tx);border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
main{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:16px 14px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px;animation:in .5s both}
@keyframes in{from{opacity:0;transform:translateY(12px)}}
.card h2{font-size:13px;margin:0 0 10px;color:var(--ac);font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.big{font-size:32px;font-weight:800;line-height:1.1}
.pct{font-size:14px;color:var(--mut)}
.bar{height:18px;background:#102418;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:12px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac));background-size:200% 100%;animation:sh 3s linear infinite;border-radius:99px;transition:width .8s}
@keyframes sh{to{background-position:-200% 0}}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#0a1610;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat b{display:block;font-size:16px;word-break:break-word}
.stat span{font-size:12px;color:var(--mut)}
label{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
input,select,button{font:inherit;color:var(--tx)}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);background:#0a1610;border-radius:10px}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:0}
.row{display:flex;gap:8px}.row>*{flex:1}
button{border:0;border-radius:10px;padding:12px;font-weight:700;cursor:pointer;background:var(--ac);color:#04120a}
button.ghost{background:#143023;color:var(--tx)}
button.minus{background:var(--bad)}
button:active{transform:scale(.97)}
.hint{font-size:12px;color:var(--mut);margin-top:6px}
ul{list-style:none;margin:0;padding:0}
li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
li:first-child{border-top:0}
li .d{font-weight:800;white-space:nowrap}
li .d.p{color:var(--ac2)}li .d.m{color:var(--bad)}
li small{display:block;color:var(--mut);font-size:12px}
li .r{text-align:right;font-size:12px;color:var(--mut);white-space:nowrap}
.msg{font-size:13px;margin-top:8px;min-height:18px;color:var(--bad)}
.empty{color:var(--mut);font-size:14px}
.lock{text-align:center;padding:26px 16px}
.lock svg{width:56px;height:56px;margin-bottom:8px}
.sw{display:flex;gap:8px;margin-top:6px}
.sw b{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid var(--line)}