:root{color-scheme:dark;--bg:#0d1017;--panel:#151a24;--line:#2a3242;
--text:#f2f5fa;--muted:#9ba8ba;--accent:#7ee787;--bad:#ff7b72}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(
circle at 50% 0,#182131 0,var(--bg) 42%);color:var(--text);font:16px/1.5
ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
main{width:min(680px,calc(100% - 32px));margin:0 auto;padding:64px 0}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.mark{display:grid;
place-items:center;width:40px;height:40px;border:1px solid #3b4b60;border-radius:12px;
background:#1d2635;color:var(--accent);font:700 20px ui-monospace,monospace}
h1{font-size:24px;line-height:1.2;margin:0}.sub{color:var(--muted);margin:4px 0 0}
.card{background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid
var(--line);border-radius:18px;padding:24px;box-shadow:0 18px 60px #0005}
label{display:block;margin:0 0 7px;font-weight:650}.field{margin-bottom:17px}
input{width:100%;border:1px solid #394559;border-radius:10px;background:#0e131c;
color:var(--text);padding:12px 13px;font:inherit;outline:none}
input:focus{border-color:#70a4e8;box-shadow:0 0 0 3px #70a4e822}
button{width:100%;border:0;border-radius:10px;background:var(--accent);color:#08110a;
padding:12px 16px;font:750 16px inherit;cursor:pointer}button:hover{filter:brightness(1.06)}
.privacy{font-size:13px;color:var(--muted);margin:16px 0 0}.error{border:1px solid
#7f3838;background:#321b1d;color:#ffc5c1;border-radius:10px;padding:11px 13px;
margin-bottom:17px}.result-head{display:flex;justify-content:space-between;gap:12px;
align-items:baseline;margin:26px 0 12px}.result-head h2{font-size:17px;margin:0}
.result-head span{font-size:13px;color:var(--muted)}.codes{display:grid;gap:10px}
.code{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:center;
border:1px solid var(--line);border-radius:13px;padding:14px 16px;background:#101620}
.digits{grid-row:1/3;font:750 28px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
letter-spacing:.11em;color:var(--accent);user-select:all}.subject{overflow:hidden;
white-space:nowrap;text-overflow:ellipsis}.date{font-size:13px;color:var(--muted)}
.empty{color:var(--muted);border:1px dashed #394559;border-radius:12px;padding:18px}
footer{text-align:center;color:#758196;font-size:12px;margin-top:18px}
@media(max-width:520px){main{padding:32px 0}.card{padding:19px}.code{display:block}
.digits{display:block;margin-bottom:10px}.subject{white-space:normal}}