@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--navy:#07122a;--red:#e8002a;--green:#12a867;--ink:#eaf0fa;--mut:#8ea3c3;--card:#0f2144cc;--line:#2a4270}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:Inter,system-ui,"Segoe UI",Roboto,sans-serif;background:radial-gradient(900px 560px at 12% -8%,#1c4d9455,transparent 60%),radial-gradient(800px 520px at 100% 110%,#e8002a38,transparent 60%),linear-gradient(170deg,#0b1d3e,var(--navy) 60%,#050c1c);color:var(--ink);display:flex;flex-direction:column;user-select:none;overflow:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(115deg,#ffffff04 0 2px,transparent 2px 30px);pointer-events:none}
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 36px;border-bottom:1px solid #ffffff14;position:relative}
.logos{display:flex;align-items:center;gap:18px}
.logos .hc{height:38px}.logos .sr{height:46px}
.logos .x{width:1px;height:34px;background:#ffffff30}
.clock{text-align:center}
#time{font-size:46px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
#date{color:var(--mut);margin-top:6px;font-size:14px;text-transform:capitalize}
.devname{color:var(--mut);font-size:12px;text-align:right}
.devname::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 10px var(--green)}
.devname:empty::before{display:none}
main{flex:1;position:relative}
.view{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:20px}
.view.show{display:flex;animation:in .28s ease}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:30px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
p{color:var(--mut);line-height:1.5}
.lead{margin-top:-6px}
.card{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:24px;padding:34px 38px;width:min(520px,94vw);display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 90px #0009,inset 0 1px 0 #ffffff12}
.card.wide{width:min(780px,96vw)}
.card.center{align-items:center;text-align:center}
.big-ico{font-size:52px}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut);font-weight:500}
input{background:#091a38;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;font-size:18px;color:#fff;outline:none;user-select:text}
select{background:#091a38;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;font-size:17px;color:#fff;outline:none}
input:focus{border-color:#4f8cff;box-shadow:0 0 0 3px #4f8cff33}
.btn{border:0;border-radius:14px;padding:16px 22px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;color:#fff;background:#2a4a7d;transition:transform .08s,filter .15s}
.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.1)}
.btn.primary{background:var(--red)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--mut);font-size:15px;font-weight:600}
.btn.huge{font-size:30px;padding:28px;flex:1;border-radius:20px;letter-spacing:.04em}
.btn.in{background:linear-gradient(180deg,#16bd76,#0e9a5c);box-shadow:0 14px 34px #12a86766}.btn.out{background:linear-gradient(180deg,#f0213f,#c8001f);box-shadow:0 14px 34px #e8002a66}
.err{color:#ff8c9b;min-height:20px;font-size:15px;text-align:center}
.adminlink{color:var(--mut);font-size:13px;text-align:center;text-decoration:none}
.pad-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.dots{display:flex;gap:14px;height:34px;align-items:center}
.dots i{width:20px;height:20px;border-radius:50%;background:#fff;animation:pop .12s}
@keyframes pop{from{transform:scale(.3)}to{transform:scale(1)}}
.dots i.ph{width:12px;height:12px;background:#2a4a7d;animation:none}
.numpad{display:grid;grid-template-columns:repeat(3,108px);gap:12px}
.numpad button{height:84px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#183563,#122a52);color:#fff;font:inherit;font-size:34px;font-weight:600;cursor:pointer;transition:background .1s,transform .06s}
.numpad button:hover{background:#1f4380}.numpad button:active{transform:scale(.94);background:#2a4a7d}
.numpad .clr,.numpad .del{font-size:24px;color:var(--mut)}
.who{display:flex;gap:18px;align-items:center}
.avatar{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#f0213f,#8b0018);display:grid;place-items:center;font-size:26px;font-weight:700;box-shadow:0 8px 24px #e8002a55}
.statebox{border-radius:14px;padding:14px 18px;background:#091a38;border:1px solid var(--line);font-size:16px}
.statebox.warn{border-color:#d9a400;background:#3a2f05;color:#ffe08a}
.lbl{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;font-weight:600}
.chips{display:flex;gap:10px}
.chip{flex:1;border:2px solid var(--line);border-radius:14px;padding:12px;text-align:center;cursor:pointer;background:#091a38;transition:border-color .15s,background .15s}
.chip b{display:block;font-size:17px}.chip small{color:var(--mut)}
.chip.sel{border-color:#4f8cff;background:#14397a}
.chip.off{opacity:.35;cursor:not-allowed;border-style:dashed}
.actions{display:flex;gap:12px;align-items:stretch}
.stats{display:flex;gap:12px}
.stat{flex:1;background:#091a38;border-radius:12px;padding:12px 14px}
.stat b{display:block;font-size:22px;font-variant-numeric:tabular-nums}.stat small{color:var(--mut)}
.recent{font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
.recent div{display:flex;justify-content:space-between;border-bottom:1px solid #1c3560;padding:4px 0}
.done .tick{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:64px;background:var(--green);animation:pop .3s;box-shadow:0 0 60px #12a86788}
.done.out .tick{background:var(--red);box-shadow:0 0 60px #e8002a88}.done.warn .tick{background:#d9a400;box-shadow:0 0 60px #d9a40088}
.donetime{font-size:46px;font-weight:700;font-variant-numeric:tabular-nums}
.spin{width:48px;height:48px;border:4px solid #2a4a7d;border-top-color:#fff;border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.cam{position:fixed;left:-9999px;top:0;width:320px;height:240px;pointer-events:none}
.photonote{color:var(--mut);font-size:13px;text-align:center;max-width:440px;min-height:18px}
.foot{text-align:center;color:#5f7391;font-size:12px;padding:10px;letter-spacing:.06em}
@media(max-height:780px){.numpad button{height:64px;font-size:28px}.numpad{grid-template-columns:repeat(3,92px)}#time{font-size:34px}.top{padding:12px 24px}}
@media(max-width:720px){.top{grid-template-columns:1fr;gap:8px;justify-items:center}.devname{text-align:center}.logos .hc{height:30px}.logos .sr{height:36px}}