:root{--blue:#087fff;--text:#17171a;--muted:#909097;--edge:#e5e4ec;--surface:rgba(255,255,255,.76);--bg:#f3f2f7;--shadow:0 12px 32px #25213b0b;--soft:#f0f0f6}*{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text);background:radial-gradient(ellipse 420px 290px at 84% 53%,#ece1ff9c,transparent),radial-gradient(ellipse 400px 280px at 43% 94%,#9ae7d88c,transparent),var(--bg);min-height:100dvh}body.dark{--text:#ececf1;--muted:#a2a0ae;--edge:#3d3b48;--surface:#242331e8;--bg:#191921;--soft:#32313f;background:radial-gradient(ellipse at 84% 53%,#28213a,transparent),var(--bg)}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0}button:disabled{opacity:.38;cursor:not-allowed}a{color:var(--blue);text-decoration:none}.wrap{max-width:1264px;margin:auto;padding:12px 40px 30px}.topbar{display:flex;align-items:center;gap:18px;border:1px solid var(--edge);border-radius:20px;background:var(--surface);padding:12px 16px;box-shadow:0 2px 8px #25213b05;height:58px}.shop{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;border-left:1px solid var(--edge);padding-left:16px}.shield{color:#fff;background:linear-gradient(135deg,#3897ff,#5055ff);width:30px;height:30px;border-radius:9px;box-shadow:0 0 12px #3087ff33;display:grid;place-items:center}.tools{display:flex;align-items:center;gap:14px;margin-left:auto}.visitor{font-size:12px;color:var(--muted);background:var(--soft);padding:6px 10px;border-radius:20px;white-space:nowrap}.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:26px;height:28px;padding:0;background:transparent;color:var(--text)}.icon{width:19px;height:19px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.intro{margin:33px 6px 27px}.intro h1{font-size:48px;line-height:1.25;letter-spacing:-1px;margin:0 0 10px;font-weight:800}.intro p{color:var(--muted);font-size:16px;margin:0;line-height:1.6}.grid{display:grid;grid-template-columns:minmax(0,.39fr) minmax(0,.61fr);gap:22px}.card{border:1px solid var(--edge);border-radius:28px;background:var(--surface);padding:24px;box-shadow:var(--shadow);min-width:0}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.card h2{font-size:20px;margin:0;font-weight:750}.head-actions{display:flex;gap:6px}.pill{border-radius:20px;background:var(--soft);color:var(--muted);padding:7px 10px;font-size:12px;display:inline-flex;align-items:center;gap:5px}.pill.blue{background:#dfedff;color:var(--blue)}.secretbox{position:relative;margin-top:20px}.secretbox input{width:100%;height:56px;border-radius:18px;border:1px solid var(--edge);background:transparent;box-shadow:0 0 0 1px #00000002;padding:0 48px 0 16px;color:var(--text);outline:none;min-width:0}.secretbox input::placeholder{color:#aaaab1}.secretbox button{position:absolute;right:14px;top:14px}.hint{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 6px 18px;display:flex;align-items:center;gap:5px}.codebox{border:1px solid var(--edge);background:#ffffff44;border-radius:24px;min-height:178px;text-align:center;padding:20px 10px 16px}.code-label{font-size:13px;color:var(--muted)}.digits{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:43px;letter-spacing:5px;font-weight:700;background:transparent;color:var(--text);padding:26px 0 18px;display:block;margin:0 auto;max-width:100%;white-space:nowrap}.digits:disabled{opacity:1;color:#d7d7db}.code-status{font-size:12px;color:var(--muted);line-height:1.6;min-height:19px}.countbar{height:3px;border-radius:3px;background:#dddde633;margin:14px 12px 0;overflow:hidden;display:none}.countbar i{display:block;height:100%;width:100%;background:var(--blue);transition:width .25s}.action-row{display:flex;gap:10px;margin-top:17px}.btn{border-radius:999px;padding:12px 18px;background:var(--soft);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.4;font-size:14px;font-weight:600}.btn.primary{background:linear-gradient(#2198ff,#057aff);color:white;box-shadow:0 4px 12px #0a81ff27}.action-row .primary{flex:1}.btn.pale{background:#dcf3fc;color:#6db0df}.time-hint{color:var(--muted);font-size:12px;text-align:center;margin:18px 0 4px}.time-hint span{color:#62ad84}.vault-sub{font-size:12px;color:var(--muted);margin:4px 0 0}.vault-head-actions{display:flex;gap:5px}.empty{min-height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.key-art{width:84px;height:84px;border-radius:25px;background:#d3e3ff;color:var(--blue);display:grid;place-items:center;outline:1px solid #e6e3f2;outline-offset:14px;margin:42px 0 24px}.key-art .icon{width:35px;height:35px;stroke-width:2}.empty h3{font-size:20px;margin:0 0 9px}.empty p{white-space:pre-line;max-width:440px;font-size:14px;color:var(--muted);line-height:1.75;margin:0 0 20px}.vault-notice{border-top:1px solid var(--edge);padding-top:18px;font-size:12px;line-height:1.7;color:var(--muted);max-width:420px;text-align:center;margin:10px auto 0}.entries{margin-top:20px}.entry{border:1px solid var(--edge);border-radius:18px;background:#fff4;padding:14px 16px;margin-bottom:10px;display:flex;gap:12px;align-items:center;min-width:0}.entry-main{flex:1;min-width:0}.entry-name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-meta{font-size:11px;color:var(--muted);margin:5px 0}.entry-code{font-family:monospace;font-size:25px;color:var(--blue);font-weight:750;letter-spacing:2px;background:transparent;display:block;padding:2px 0}.entry-actions{display:flex;gap:8px;flex-wrap:wrap;max-width:72px}.empty[hidden],.entries[hidden],.vault-head-actions[hidden]{display:none!important}footer{text-align:center;color:var(--muted);font-size:12px;margin:48px 0 0}.modal-layer{position:fixed;inset:0;z-index:2147481000;background:#17142655;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px}.modal{background:var(--bg);border:1px solid var(--edge);box-shadow:0 25px 100px #0003;border-radius:24px;padding:24px;width:440px;max-width:100%;max-height:90dvh;overflow-y:auto}.modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.modal h2{font-size:20px;margin:0}.modal label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}.modal input,.modal select,.modal textarea{border-radius:12px;border:1px solid var(--edge);background:var(--surface);color:var(--text);padding:12px;width:100%;outline:none}.modal textarea{min-height:155px;resize:vertical}.modal .note{font-size:12px;color:var(--muted);line-height:1.8}.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.modal .error{color:#db5873;font-size:12px;line-height:1.6;margin:10px 0}.modal .qr{background:white;padding:15px;width:max-content;max-width:100%;margin:auto;border-radius:15px}.qr canvas{max-width:100%;height:auto!important}.settings-actions{display:grid;gap:10px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:2147482000;padding:12px 20px;background:#252430;color:#fff;border-radius:14px;font-size:13px;max-width:90vw;box-shadow:0 6px 30px #0002}.kbd{font-size:11px;color:var(--muted);margin-left:4px}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}input:focus,textarea:focus,select:focus{border-color:var(--blue)!important}body.dark .key-art{background:#293e63}body.dark .pill.blue{background:#263c57}body.dark .btn.pale{background:#243743}@media(max-width:850px){.wrap{padding:12px 20px 26px}.grid{grid-template-columns:1fr}.intro h1{font-size:38px}.intro{margin-top:28px}.card{padding:22px}.empty{min-height:290px}.key-art{margin-top:30px}}@media(max-width:480px){.wrap{padding:10px 12px 24px}.topbar{padding:10px;gap:9px;height:auto;min-height:55px}.shop{max-width:84px;font-size:11px}.bar-brand{padding-left:9px;font-size:14px;gap:6px}.tools{gap:8px}.visitor{display:none}.card{padding:18px;border-radius:23px}.intro{margin:26px 4px 22px}.intro h1{font-size:34px}.intro p{font-size:13px}.card h2{font-size:18px}.pill{padding:6px 8px}.digits{font-size:35px;letter-spacing:3px}.modal{padding:20px}.entry-actions{max-width:60px}.vault-notice{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}