:root{
--ink:#1a1a1a;--mute:#6b6b6b;--line:#e4e4e1;--soft:#f5f5f3;--press:#efefec;
--acc:#0f766e;--acc-ink:#0b5a54;--red:#b42318;--amb:#a15c00;--blue:#2a63c4;--gray:#a0a09c;
--bg:#fff;--card:#fff;--hi:#e8f3f1;--hi-line:#bfdcd7;--hi-press:#d5ebe7;--mark:#fdf0c4;--warnline:#ecd2cf;
--f:"Public Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--f);font-variant-numeric:tabular-nums;padding-bottom:calc(72px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
button,select,textarea,input{font-family:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.wrap{max-width:520px;margin:0 auto;padding:0 16px}
.bar-top{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 0 10px;border-bottom:1.5px solid var(--ink)}
.brand{font-size:16px;font-weight:700;letter-spacing:-.01em}
.brand span{font-weight:400;color:var(--mute)}
.demo{font-size:12px;color:var(--mute);padding:8px 0 0}
h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:16px 0 4px}
.hint{font-size:14px;color:var(--mute);margin-bottom:8px}
.sec{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:24px 0 0;padding-bottom:6px;border-bottom:1px solid var(--line)}
.item{display:flex;align-items:center;gap:12px;padding:14px 4px;margin:0 -4px;border-bottom:1px solid var(--line);cursor:pointer;min-height:56px;text-decoration:none}
.item:active,tr.click:active{background:var(--press)}
.item .main{flex:1;min-width:0}
.item .t{font-weight:600;line-height:1.3}
.item .s{font-size:14px;color:var(--mute);margin-top:2px}
.item .r{font-size:14px;text-align:right;white-space:nowrap}
.chev{color:var(--gray);font-size:18px;margin-left:2px}
.red{color:var(--red)}.amb{color:var(--amb)}.ok{color:var(--acc)}
.back{border:0;background:none;font-size:15px;font-weight:500;color:var(--acc);padding:14px 0 0;cursor:pointer}
.status{display:flex;align-items:center;gap:8px;font-weight:600;margin:10px 0 4px}
.facts{margin:12px 0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.facts span{color:var(--mute)}
.btn{display:block;width:100%;min-height:50px;border:0;border-radius:8px;padding:14px;font-size:16px;font-weight:600;cursor:pointer;margin-top:10px;text-align:center;text-decoration:none}
.btn.pri{background:var(--acc);color:#fff}.btn.pri:active{background:var(--acc-ink)}
.btn.sec2{background:var(--card);border:1px solid var(--line);color:var(--ink)}.btn.sec2:active{background:var(--press)}
.btn.warn{background:var(--card);border:1px solid var(--warnline);color:var(--red)}
.btn:disabled{background:var(--soft);color:var(--gray);cursor:not-allowed}
.msg{background:var(--soft);border-left:3px solid var(--amb);padding:10px 12px;font-size:14px;margin:10px 0}
.msg.r{border-color:var(--red)}
.ck label{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;cursor:pointer}
.ck label.d{color:var(--mute);text-decoration:line-through}
.ck input{width:20px;height:20px;accent-color:var(--acc);flex:none}
textarea{background:var(--card);color:var(--ink);width:100%;border:1px solid var(--line);border-radius:8px;padding:12px;font-size:16px;margin-top:8px;resize:vertical}
textarea:focus{outline:none;border-color:var(--acc)}
.prog{height:6px;background:var(--soft);border-radius:3px;overflow:hidden;margin:8px 0 4px}.prog i{display:block;height:100%;background:var(--acc)}
table{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
th{text-align:left;font-size:12px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 4px;border-bottom:1.5px solid var(--ink)}
td{padding:12px 4px;vertical-align:middle;border-bottom:1px solid var(--line)}
th:not(:first-child),td:not(:first-child){text-align:center;white-space:nowrap}
tr.click{cursor:pointer}
.search{display:flex;align-items:center;gap:8px;margin-top:12px;padding:0 12px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--mute)}.search:focus-within{border-color:var(--acc);background:var(--card)}.search input{flex:1;min-width:0;border:0;background:none;font-size:16px;color:var(--ink);outline:none;height:100%}.search input::-webkit-search-cancel-button{display:none}.search button{border:0;background:none;color:var(--acc);font-size:14px;font-weight:600;cursor:pointer}mark{background:var(--mark);color:inherit;padding:0 1px}
nav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
nav div{display:flex;width:100%;max-width:520px}
nav button{flex:1;position:relative;border:0;background:none;padding:9px 0 11px;font-size:12px;font-weight:500;color:var(--mute);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
nav button.on{color:var(--ink);font-weight:700}
nav button.on::before{content:"";position:absolute;top:-1px;left:30%;right:30%;height:2px;background:var(--ink)}
nav svg{width:22px;height:22px}
.who{border:1px solid var(--line);border-radius:6px;background:var(--card);font-size:13px;font-weight:500;color:var(--ink);padding:6px 10px;cursor:pointer}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.add{border:0;background:var(--acc);color:#fff;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:6px;white-space:nowrap}
.add:active{background:var(--acc-ink)}
.empty{color:var(--mute);font-size:14px;padding:18px 0}
.tools{display:flex;gap:18px;justify-content:center;margin:22px 0 8px}
.tools button{border:0;background:none;font-size:14px;font-weight:500;color:var(--mute);text-decoration:underline;cursor:pointer}
.tools .del{color:var(--red)}
.proof{text-align:right;color:var(--ink)!important;word-break:break-word}
.proof a{color:var(--acc)}
.sub{font-size:13px;color:var(--mute)}
textarea.bad{border-color:var(--red)}
.form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.form small{font-weight:400;color:var(--mute);font-size:13px}
.form input,.form select{height:46px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:16px;background:var(--card);color:var(--ink);font-family:inherit;width:100%}
.form textarea{margin-top:0}
.form input:focus,.form select:focus{outline:none;border-color:var(--acc)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.log div{font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.log span{color:var(--mute);font-size:13px;margin-left:4px}
.flash{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;padding:9px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9;max-width:90%;text-align:center}
.flash.on{opacity:1}.flash.err{background:var(--red)}
#login{max-width:420px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 16px 40px}
.lhead{margin:8px 0 12px}.lhead .brand{margin-bottom:24px}
.namebtn{width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;color:inherit}
.dots{display:flex;justify-content:center;gap:16px;margin:26px 0 6px}
.dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink)}
.dots i.on{background:var(--ink)}
.perr{text-align:center;color:var(--red);font-size:14px;min-height:22px;margin-bottom:6px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.keys button{height:62px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:24px;font-weight:500;color:var(--ink);cursor:pointer}
.keys button:active{background:var(--press)}
.hi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 6px}
.hi a{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border-radius:12px;background:var(--hi);color:var(--acc);text-decoration:none;border:1.5px solid var(--hi-line)}
.hi a:active{background:var(--hi-press)}
.hi b{font-size:20px;color:var(--ink)}
.hi span{font-size:13px;font-weight:600}
.hdr{display:flex;gap:8px;align-items:center}
.theme{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font-size:13px;font-weight:500;padding:5px 9px;cursor:pointer}
.theme.fl{position:fixed;top:calc(14px + env(safe-area-inset-top));right:16px;z-index:6}
body:has(#app:not([hidden])) .theme.fl{display:none}
.emo{width:22px;text-align:center;font-size:18px;line-height:1;flex:none}
.mini{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:600;cursor:pointer;flex:none}
.mini.red{color:var(--red)}
:root[data-theme="dark"]{--bg:#141414;--card:#1e1e1e;--ink:#ececea;--mute:#a3a39f;--line:#2e2e2c;--soft:#222220;--press:#2a2a28;
--acc:#2bb3a3;--acc-ink:#1f8f82;--red:#ff7a6e;--amb:#f0a640;--blue:#6e9ef0;--gray:#7a7a76;
--hi:#14302c;--hi-line:#1f4a44;--hi-press:#1a3a35;--mark:#5a4a12;--warnline:#5a2a26;color-scheme:dark}
:root[data-theme="dark"] .btn.pri,:root[data-theme="dark"] .add{color:#0b1f1c}
.icob{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);padding:5px 7px;cursor:pointer}
.set{flex-wrap:wrap;cursor:default}
.set .main{min-width:55%}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;color:var(--acc);border:1px solid var(--hi-line);background:var(--hi);border-radius:4px;padding:1px 5px;vertical-align:2px}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:16px;background:var(--card);color:var(--ink)}
.addrow input:focus{outline:none;border-color:var(--acc)}
.addrow .add{margin:0;height:44px}
.seg{display:flex;background:var(--soft);border-radius:8px;padding:3px;margin-top:10px}
.seg button{flex:1;border:0;background:none;padding:10px;border-radius:6px;font-size:15px;font-weight:600;color:var(--mute);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}