:root{--bg:#f4f1ea;--card:#fffdf8;--ink:#1d2321;--mute:#5d6662;--line:#d9d3c6;--brand:#1f5c4a;--brand-ink:#fff;--soft:#e6efe9;--warn:#fff3cd;--warn-ink:#7a5a00;--bad:#fbe3e1;--bad-ink:#8c1d18;--ok:#e3f3e8;--ok-ink:#1b5e33;--orange:#ffe5cc;--r:14px;--sh:0 1px 2px rgba(0,0,0,.06),0 6px 24px rgba(0,0,0,.06);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#151a18;--card:#1e2522;--ink:#e9eee9;--mute:#9aa6a0;--line:#33403a;--brand:#5fbf9b;--brand-ink:#0d1a15;--soft:#24322c;--warn:#3a3214;--warn-ink:#f2d58a;--bad:#3d1d1b;--bad-ink:#ffb4ab;--ok:#1b3326;--ok-ink:#9be2b3;--orange:#3e2c19}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
.wrap{max-width:680px;margin:0 auto;padding:12px 14px 90px}
h1{font-size:1.35rem;margin:.2em 0 .3em}h2{font-size:1.12rem;margin:.2em 0 .5em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh);margin:12px 0}
.test{background:#b3261e;color:#fff;text-align:center;font-size:.82rem;padding:5px 8px;font-weight:600;letter-spacing:.02em}
.top{display:flex;align-items:center;gap:8px;padding:10px 0}.top .t{font-weight:700;font-size:1.1rem;flex:1}
.timer{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--mute);background:var(--soft);padding:3px 8px;border-radius:99px}
label{display:block;font-weight:600;font-size:.92rem;margin:12px 0 4px}
.hint{color:var(--mute);font-size:.86rem;margin:4px 0}
input[type=text],input[type=password],input[type=email],input:not([type]),textarea,select{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
textarea{min-height:90px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px}
.code{font-size:1.6rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
button,.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none}
button:disabled{opacity:.5;cursor:default}
.pri{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.dang{color:var(--bad-ink);border-color:var(--bad-ink)}
.full{width:100%;margin-top:14px;padding:13px}
.sm{padding:6px 10px;font-size:.88rem}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row>.grow{flex:1;min-width:0}
.steps{display:flex;gap:6px;margin:4px 0 10px}.steps i{flex:1;height:5px;border-radius:9px;background:var(--line)}.steps i.on{background:var(--brand)}
.msg{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:.92rem}
.msg.err{background:var(--bad);color:var(--bad-ink)}.msg.ok{background:var(--ok);color:var(--ok-ink)}.msg.warn{background:var(--warn);color:var(--warn-ink)}
.search{position:sticky;top:0;background:var(--bg);padding:6px 0 8px;z-index:5}
.search input{font-size:1.15rem;padding:14px 14px 14px 42px;border-radius:14px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='M13 13l5 5'/%3E%3C/svg%3E") 13px center no-repeat}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.item{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.item:last-child{border-bottom:0}.item:active,.item:hover{background:var(--soft)}
.av{width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-weight:700;flex:none}
.item .s{font-weight:600}.item .u{color:var(--mute);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--warn);color:var(--warn-ink);white-space:nowrap}
.field{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:8px 0;display:flex;align-items:center;gap:8px;background:var(--bg)}
.field .k{font-size:.78rem;color:var(--mute);font-weight:600}.field .v{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;white-space:pre-wrap}
.field .v.masked{letter-spacing:.1em}
.ic{padding:8px 10px;min-width:42px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
@media(min-width:700px){.overlay{align-items:center}}
.sheet{background:var(--card);width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px 28px}
@media(min-width:700px){.sheet{border-radius:18px}}
.sheet .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}.sheet .hd h2{flex:1;margin:0}
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;z-index:20;box-shadow:var(--sh);border-radius:14px}
.fab button{padding:13px 18px;border-radius:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:.92rem;z-index:99;max-width:90vw;text-align:center}
.menu button{width:100%;justify-content:flex-start;margin:5px 0;padding:13px}
.pending{background:var(--warn);color:var(--warn-ink);border-radius:12px;padding:12px;margin:10px 0}
.pending .field{background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.85rem}th,td{border-bottom:1px solid var(--line);padding:6px 5px;text-align:left;vertical-align:top}
td.w{background:var(--warn)}tr.dup td{background:var(--orange)}tr.skip td{opacity:.55}
.tbl{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.qr{background:#fff;padding:12px;border-radius:12px;width:max-content;margin:10px auto}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;text-align:center}.codes div{background:var(--bg);border:1px dashed var(--line);border-radius:8px;padding:8px}
.meter{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:6px}.meter i{display:block;height:100%}
.mail{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer;background:var(--bg)}.mail .sub{font-weight:600}.mail .dt{color:var(--mute);font-size:.8rem}
.mailbody{white-space:pre-wrap;background:var(--bg);border-radius:10px;padding:12px;border:1px solid var(--line);font-size:.92rem}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.center{text-align:center}.mute{color:var(--mute)}.small{font-size:.85rem}
.hist{border-top:1px solid var(--line);padding:8px 0}

.field>.grow{flex:1}
.tbl td:last-child,.tbl th:last-child{min-width:150px}
.top .t{white-space:nowrap}
