:root{color-scheme:dark;--text:#f1efff;--muted:#9291af;--line:rgba(182,173,255,.16);--accent:#baa5ff}*{box-sizing:border-box}body{margin:0;background:#060713;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14px;min-height:100svh}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d0c2ff;outline-offset:4px}#space,.nebula{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2}.nebula{z-index:-1;background:radial-gradient(ellipse at 18% 46%,#38205b38,transparent 45%),radial-gradient(ellipse at 87% 60%,#13387c38,transparent 40%)}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff09}.brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:2px}.brand-icon{font-size:35px;color:#c3b1ff}.brand-sub{font-size:12px;color:var(--muted);font-weight:400;letter-spacing:1px}.online{font-size:10px;letter-spacing:2px;color:#9999b5;display:flex;align-items:center;gap:10px}.online i{width:5px;height:5px;background:#96efc4;border-radius:50%;box-shadow:0 0 10px #69e5b3}.soundless{background:#ffffff04;border:1px solid var(--line);border-radius:30px;padding:10px 17px;color:#c5bfdc;font-size:11px}main{max-width:620px;margin:58px auto 44px;text-align:center;padding:0 22px}.eyebrow{font-size:10px;letter-spacing:3px;color:#bbb1df;display:flex;gap:9px;align-items:center;justify-content:center}.eyebrow span{width:18px;height:1px;background:#baa5ff}h1{font-size:clamp(40px,5vw,62px);line-height:1.1;letter-spacing:-3px;margin:22px 0 16px;font-weight:500}h1 span{color:#b1a5df}.intro{color:#9997b2;font-size:13px;margin-bottom:32px}.card{position:relative;max-width:460px;margin:auto;text-align:left;padding:27px;border:1px solid #ada0ff35;border-radius:22px;background:linear-gradient(135deg,#16152ad9,#0d1020ed);box-shadow:0 24px 80px #0005,0 0 70px #8f65e30b;backdrop-filter:blur(18px)}.card-top{display:flex;align-items:center;justify-content:space-between}.tiny,label{font-size:9px;letter-spacing:1.8px;color:#9e98bb}.tag{padding:5px 9px;border:1px solid #b4a0ff33;border-radius:5px;color:#bdaaff;font-size:9px;letter-spacing:1px}h2{font-size:22px;font-weight:500;letter-spacing:-.5px;margin:22px 0 7px}.muted{color:var(--muted);font-size:12px;margin:0 0 25px}label{display:block;margin-bottom:10px}.input-wrap{display:flex;gap:12px;align-items:center;border:1px solid #b7a3ff33;background:#080b18a6;border-radius:9px;padding:0 13px}.input-wrap:focus-within{border-color:#b69dfc}.input-wrap>span{font-size:23px;color:var(--accent)}input{width:100%;min-width:0;background:transparent;border:0;color:#fff;padding:15px 0;outline:none;font-size:12px}input::placeholder{color:#74728b}.input-wrap button{background:none;border:0;color:#a9a0c5;font-size:10px;padding:10px 0}.primary{display:flex;width:100%;align-items:center;justify-content:space-between;padding:15px 17px;border:1px solid #d4c5ff66;border-radius:9px;background:linear-gradient(110deg,#b6a0f1,#8b8de6);color:#111025;font-size:12px;font-weight:700;margin:13px 0 25px;box-shadow:0 4px 28px #a08ae020}.primary:hover{filter:brightness(1.1)}.primary span{font-size:19px;line-height:12px}.result{padding:20px 17px 15px;background:#070a1699;border:1px solid #ffffff09;border-radius:11px}.result-top,.result-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}#timer{font-size:9px;letter-spacing:1px;color:#a99bd0}.code{display:block;background:none;border:0;color:#e9e0ff;font-family:ui-monospace,monospace;font-size:39px;letter-spacing:6px;margin:15px 0;width:100%;padding:0;white-space:nowrap;font-weight:500}.code:disabled{color:#68627d;font-size:24px;letter-spacing:3px;cursor:default;min-height:46px}progress{display:block;width:100%;height:3px;border:0;border-radius:6px;overflow:hidden;background:#27243c}progress::-webkit-progress-bar{background:#27243c}progress::-webkit-progress-value{background:linear-gradient(90deg,#7f82dc,#c4a6ff)}progress::-moz-progress-bar{background:#c4a6ff}.result-bottom{margin-top:14px;color:#938da9;font-size:10px}#clear{border:0;background:none;color:#b3a2d5;font-size:10px;padding:4px 0}.privacy{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;color:#89869e;margin-top:21px}.privacy span{color:#b09bdf}.coordinates{display:flex;justify-content:center;gap:19px;font-size:8px;letter-spacing:1.3px;color:#6e6987;margin-top:27px}footer{display:flex;align-items:center;justify-content:space-between;padding:23px 5vw;border-top:1px solid #ffffff09;font-size:9px;letter-spacing:1.5px;color:#77718f}footer a{color:#a299be}.owner-main{max-width:860px}.owner-main .card{max-width:580px}.owner-main h1{font-size:40px}#login label,#password-form label{margin:16px 0 6px}#login input,#password-form input{border:1px solid var(--line);border-radius:8px;padding:13px}#message{min-height:24px;color:#d1b4ff;font-size:12px}#dashboard[hidden],#login[hidden],#records[hidden]{display:none}#history{list-style:none;padding:0;max-height:350px;overflow:auto}#history li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:11px}#history time{color:var(--muted)}.owner-actions{display:flex;gap:12px}.owner-actions button{background:#ffffff08;border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px 16px}.owner-note{font-size:12px;line-height:1.7;color:var(--muted)}@media(min-width:1500px){main{margin-top:80px}}@media(max-width:600px){header{height:76px;padding:0 22px}.online{display:none}.brand{font-size:12px;gap:7px}.brand-sub{font-size:10px}main{margin-top:35px;margin-bottom:30px}h1{letter-spacing:-2px}.card{padding:22px}.coordinates{font-size:7px;gap:10px}footer{padding:20px 22px;font-size:8px;gap:16px;letter-spacing:1px}footer>span:nth-child(2){display:none}.code{font-size:34px;letter-spacing:4px}#history li{flex-direction:column;gap:5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Gentle transitions with a stable input/result layout. */
.card{transition:border-color .3s ease,box-shadow .3s ease;animation:station-arrive .65s ease-out both}.input-wrap{transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.input-wrap:focus-within{box-shadow:0 0 0 3px #b69dfc0c;background:#0b0e20}.auto-hint{display:flex;align-items:center;gap:8px;font-size:10px;color:#9f97bb;margin:14px 0 24px;min-height:18px}.auto-dot{height:5px;width:5px;border-radius:50%;background:#a88be3;box-shadow:0 0 9px #bda0ff66}.result{transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}.result.active{border-color:#b6a0f137;background:#101022b3;box-shadow:inset 0 0 32px #a88be307}.code,.code:disabled{height:50px;min-height:50px;margin:15px 0;line-height:50px;font-variant-numeric:tabular-nums;transition:color .2s ease,filter .2s ease}.code:not(:disabled):hover{color:#fff;filter:drop-shadow(0 0 9px #b7a3ff55)}.result-bottom{min-height:22px}#status{line-height:1.5;min-height:15px}#timer{font-variant-numeric:tabular-nums;min-width:24px;text-align:right}progress::-webkit-progress-value{transition:width .1s linear}progress::-moz-progress-bar{transition:width .1s linear}#clear,#reveal,.soundless{transition:color .2s ease,background .2s ease}#clear:hover,#reveal:hover{color:#e7d9ff}@keyframes station-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Locally hosted OTP numerals: bold, even-width digits and compact spacing. */
@font-face{font-family:"Maxinter OTP";src:url("/fonts/otp-digits.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
.code{font-family:"Maxinter OTP",ui-sans-serif,system-ui,sans-serif;font-size:clamp(28px,7.5vw,44px);font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;font-kerning:none;-webkit-font-smoothing:antialiased;text-shadow:0 0 24px #b69dfc20;color:#eee7ff}
.code:disabled{font-family:ui-sans-serif,system-ui,sans-serif;font-weight:400;font-size:24px;letter-spacing:3px;text-shadow:none}
@media(max-width:370px){.code{font-size:28px;letter-spacing:.05em}}
