:root{--bg:#F2F2F7;--surface:#FFFFFF;--text:#1C1C1E;--text2:#5F5F66;--sep:#D1D1D6;--fill:#E5E5EA;--accent:#0A5FD8;--on-accent:#FFFFFF;--accent-soft:rgba(10,95,216,.12);--good:#1B7A3E;--good-soft:rgba(27,122,62,.10);--warn:#8A5A00;--warn-soft:rgba(138,90,0,.10);--crit:#C4161C;--crit-soft:rgba(196,22,28,.10);--badge-text:#FFFFFF;--dim:rgba(0,0,0,.4);--chip:#F2F2F7;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000;--surface:#1C1C1E;--text:#FFFFFF;--text2:#AEAEB2;--sep:#38383A;--fill:#2C2C2E;--accent:#5AA2FF;--on-accent:#04101F;--accent-soft:rgba(90,162,255,.18);--good:#4CD07D;--good-soft:rgba(76,208,125,.14);--warn:#FFB840;--warn-soft:rgba(255,184,64,.14);--crit:#FF6B63;--crit-soft:rgba(255,107,99,.16);--badge-text:#000;--dim:rgba(0,0,0,.6);--chip:#2C2C2E;color-scheme:dark}}
:root[data-theme=dark]{--bg:#000;--surface:#1C1C1E;--text:#FFFFFF;--text2:#AEAEB2;--sep:#38383A;--fill:#2C2C2E;--accent:#5AA2FF;--on-accent:#04101F;--accent-soft:rgba(90,162,255,.18);--good:#4CD07D;--good-soft:rgba(76,208,125,.14);--warn:#FFB840;--warn-soft:rgba(255,184,64,.14);--crit:#FF6B63;--crit-soft:rgba(255,107,99,.16);--badge-text:#000;--dim:rgba(0,0,0,.6);--chip:#2C2C2E;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-size:17px;line-height:22px;overscroll-behavior:none}
body{display:flex;justify-content:center}
#app{position:relative;width:100%;max-width:480px;height:100dvh;overflow:hidden;background:var(--bg)}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(var(--bottom,175px) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.screen.nofab{--bottom:105px}
.screen.noNav{--bottom:40px}
h1{margin:0;font-size:34px;line-height:41px;font-weight:700}
h2{margin:0;font-size:20px;line-height:26px;font-weight:600}
a{color:var(--accent);text-decoration:none}
button{font-family:inherit;color:inherit}
.t2{color:var(--text2)}.tiny{font-size:13px;line-height:18px}.small{font-size:15px;line-height:20px}
.num{font-variant-numeric:tabular-nums}
.big{font-size:44px;line-height:48px;font-weight:700;font-variant-numeric:tabular-nums}
.hint{padding:0 16px;font-size:13px;line-height:18px;color:var(--text2)}
.stack{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between}
.card{background:var(--surface);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:8px}
.list{background:var(--surface);border-radius:20px;overflow:hidden}
.item{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;width:100%;border:0;background:none;text-align:left;color:var(--text);font-size:17px;cursor:pointer;text-decoration:none}
.item .grow{flex:1;min-width:0}
.item .sub{font-size:13px;line-height:18px;color:var(--text2)}
.ico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:18px;background:var(--chip);flex:none}
.ico.tint{background:var(--accent-soft);color:var(--accent)}
.ico.big40{width:40px;height:40px;border-radius:20px}
.amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.good{color:var(--good)}.warn{color:var(--warn)}.crit{color:var(--crit)}
.press{transition:transform 120ms ease-out,opacity 120ms ease-out;cursor:pointer}
.press:active{transform:scale(.97)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:0;border-radius:25px;background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:600;text-decoration:none}
.btn:disabled{opacity:.4}
.btn.soft{background:var(--accent-soft);color:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent);font-weight:400}
.btn.danger{background:var(--crit-soft);color:var(--crit)}
.btn.sm{min-height:44px;font-size:15px}
.fab{position:absolute;left:16px;right:16px;bottom:calc(95px + env(safe-area-inset-bottom));z-index:5}
.fab.noNavBtn{bottom:calc(24px + env(safe-area-inset-bottom))}
.ctaZone{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:5}
.nav{position:absolute;left:0;right:0;bottom:0;min-height:83px;padding:8px 0 env(safe-area-inset-bottom);background:var(--surface);border-top:.5px solid var(--sep);display:flex;z-index:10}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:49px;font-size:11px;font-weight:500;color:var(--text2)}
.nav a.on{color:var(--accent);font-weight:600}
.nav .badge{position:absolute;top:-4px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--crit);color:var(--badge-text);font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bw{position:relative;display:flex}
.back{display:flex;align-items:center;gap:2px;height:44px;margin-left:-6px;color:var(--accent);font-size:17px;border:0;background:none;padding:0}
.bar{height:12px;border-radius:6px;background:var(--fill);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:var(--accent);transform-origin:left;animation:fill 300ms ease-out both}
.bar.thin{height:8px;border-radius:4px}.bar.thin>i{border-radius:4px}
.stackbar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.stackbar i{display:block}
.dot{width:8px;height:8px;border-radius:4px;flex:none}
.legend{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:18px}
.legend>div{display:flex;align-items:center;gap:8px}
.ring{transform:rotate(-90deg);transform-origin:50% 50%}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .v{stroke:var(--accent);animation:ringin 400ms ease-out both}
.in{animation:fin 240ms ease-out both}
.in:nth-child(2){animation-delay:30ms}.in:nth-child(3){animation-delay:60ms}.in:nth-child(4){animation-delay:90ms}.in:nth-child(5){animation-delay:120ms}.in:nth-child(n+6){animation-delay:150ms}
.still .in,.still .bar>i,.still .ring .v,.still .sheet,.still .dots i,.still .toast{animation:none}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ringin{from{stroke-dasharray:0 var(--circ)}}
@keyframes sheetin{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.sheetwrap{position:absolute;inset:0;z-index:30;background:var(--dim)}
.sheet{position:absolute;left:0;right:0;bottom:0;top:36px;background:var(--bg);border-radius:28px 28px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;overflow-y:auto;animation:sheetin 300ms cubic-bezier(.2,.8,.2,1) both}
.grab{align-self:center;width:36px;height:5px;border-radius:3px;background:var(--sep);flex:none}
.sheethead{display:flex;align-items:center;justify-content:space-between;height:44px;flex:none}
.sheethead b{font-size:17px;font-weight:600}
.sheethead a,.sheethead button{min-width:72px;height:44px;display:flex;align-items:center;border:0;background:none;color:var(--accent);font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--surface);color:var(--text);font-size:15px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.seg{display:flex;gap:8px}.seg .chip{flex:1;justify-content:center;border-radius:12px;padding:0}
.pick{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;background:var(--surface);width:100%;font-size:17px}
.pick .v{color:var(--accent);display:flex;align-items:center;gap:4px;max-width:65%;text-align:right}
.pick select,.pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.keys button{height:56px;border:0;border-radius:14px;background:var(--surface);color:var(--text);font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;color:var(--text2)}
.input{width:100%;height:50px;border:0;border-radius:12px;background:var(--surface);color:var(--text);padding:0 16px;font-size:17px;font-family:inherit;outline:0}
.input:focus{box-shadow:0 0 0 2px var(--accent)}
.input.bigin{font-size:34px;font-weight:700;height:64px;font-variant-numeric:tabular-nums}
textarea.input{height:110px;padding:12px 16px;resize:none}
.callout{display:flex;gap:10px;align-items:flex-start;border-radius:16px;padding:14px;font-size:15px;line-height:20px}
.callout.warn{background:var(--warn-soft)}.callout.good{background:var(--good-soft)}.callout.crit{background:var(--crit-soft)}.callout.info{background:var(--accent-soft)}
.callout b.w{color:var(--warn)}
.steps{display:flex;gap:6px}.steps i{flex:1;height:4px;border-radius:2px;background:var(--sep)}.steps i.on{background:var(--accent)}
.toast{position:absolute;left:16px;right:16px;bottom:calc(110px + env(safe-area-inset-bottom));z-index:50;background:var(--text);color:var(--bg);border-radius:14px;padding:12px 16px;font-size:15px;animation:fin 200ms ease-out both}
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:var(--fill);color:var(--text2)}
.search input{flex:1;border:0;background:none;color:var(--text);font-size:17px;outline:0;font-family:inherit;min-width:0}
.dots{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;justify-items:center}
.dots i{width:12px;height:12px;border-radius:6px;border:1.5px solid var(--accent);animation:dotin 200ms ease-out both}
.dots i.f{background:var(--accent)}
@keyframes dotin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.check{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:13px;border:1.75px solid #8E8E93;flex:none;color:var(--on-accent)}
.check.on{background:var(--accent);border-color:var(--accent)}
.lock{position:absolute;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
.pindots{display:flex;gap:14px}.pindots i{width:14px;height:14px;border-radius:7px;border:1.75px solid var(--accent)}.pindots i.f{background:var(--accent)}
.lock .keys{width:100%;max-width:300px}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center;color:var(--text2)}
.pinned{position:sticky;top:-20px}
@media (prefers-reduced-motion:reduce){.in,.bar>i,.ring .v,.sheet,.dots i,.toast{animation:none}.press{transition:none}.press:active{transform:none;opacity:.8}}
.swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.swipe>.main{flex:0 0 100%;scroll-snap-align:start}
.swipe>.acts{flex:none;display:flex;scroll-snap-align:end}
.swipe .acts button{width:84px;border:0;color:#fff;font-size:15px;font-weight:600}
.swipe .acts .e{background:var(--accent);color:var(--on-accent)}.swipe .acts .d{background:var(--crit);color:var(--badge-text)}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}.hscroll::-webkit-scrollbar{display:none}.hscroll .chip{flex:none}
.sheet .list .pick{border-radius:0}
.divtop{border-top:.5px solid var(--sep)}
.toast{display:flex;align-items:center;justify-content:space-between;gap:12px}.toast button{border:0;background:none;color:var(--bg);font-weight:700;text-decoration:underline;font-size:15px;min-height:44px}
.callout.good b.good,.callout b.good{color:var(--good)}.callout b.warn{color:var(--warn)}
.list>*+*{border-top:.5px solid var(--sep)}