:root {color-scheme:dark;--bg:#0b1118;--card:#151f29;--line:#293743;--white:#eef4f8;--muted:#92a5b4;--blue:#58b5db;--green:#4ac7a3;--red:#f07b80}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
.shell{max-width:530px;min-height:100svh;margin:auto;padding:26px 18px 168px;background:radial-gradient(ellipse 450px 290px at 105% -45px,#17324377,transparent 77%)}
.heading{display:flex;align-items:center;gap:12px;margin-bottom:36px;min-height:47px}
.mark{width:42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;background:#203441;color:#9cd9ef}.mark svg{height:29px}
h1{font-weight:770;font-size:18px;line-height:1.15;letter-spacing:0.055em;margin:0;white-space:nowrap}h1 span{color:var(--blue)}.heading p{color:var(--muted);font-size:11px;margin:4px 0 0;white-space:nowrap}
.online{margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:5px;color:#b2c3cd;font-size:12px}.online i{width:7px;height:7px;border-radius:50%;background:#7e93a3}.online.good i{background:var(--green)}
.hero,.panel,.setup{background:linear-gradient(155deg,#192631,#131c26 90%);border:1px solid var(--line);border-radius:23px;box-shadow:0 14px 32px #00000014}
.hero{padding:25px 22px 17px;margin-bottom:17px}.eyebrow{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em}
.hero-row{display:flex;align-items:center;gap:14px;margin:17px 0 2px}.lock-icon{background:#293a47;color:var(--muted);width:51px;height:51px;display:grid;place-items:center;border-radius:15px;font-size:30px}.hero-row strong{font-size:30px;letter-spacing:-.04em;font-weight:720}.hero.open-state .lock-icon{color:var(--green);background:#17382e}.hero.open-state .hero-row strong{color:#c6f2e5}
.sub{color:var(--muted);font-size:13px;margin:12px 0 20px;line-height:1.5}.rule{height:1px;background:var(--line);margin:0 -2px 13px}.fact{display:flex;justify-content:space-between;gap:12px;padding:9px 0;align-items:center;font-size:13px}.fact span{color:var(--muted)}.fact strong{font-weight:630;white-space:nowrap}
.panel{padding:17px 18px 9px;margin:0 0 15px}.section-title{font-size:15px;font-weight:700;margin-bottom:13px}.item{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);height:57px}.item-icon{display:grid;place-items:center;color:var(--blue);width:24px}.item-icon svg{width:20px;height:20px}.item span{flex:1;font-size:13px;color:#c9d7e0}.item b{font-size:12px;font-weight:650;color:var(--muted)}.item b.ok{color:var(--green)}
.events{border-top:1px solid var(--line);min-height:47px}.event{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #25333e;padding:12px 0;font-size:13px}.event:last-child{border:0}.event span{color:#dbe4ec}.event time{color:var(--muted);font-size:12px;white-space:nowrap}.empty{color:var(--muted);font-size:13px;margin:15px 0}
.setup{padding:18px;margin:19px 0}.setup strong{font-size:15px}.setup p{color:var(--muted);font-size:13px;line-height:1.6}.setup label{display:block;color:#a7b9c7;margin-bottom:9px}.setup input{border:1px solid #506476;background:#0d1720;color:var(--white);border-radius:12px;width:100%;font-size:16px;padding:14px;outline:none}.setup input:focus{border-color:var(--blue)}.setupButton{margin-top:12px;width:100%;padding:14px;background:#306f89;border:0;color:white;border-radius:13px;font-weight:700}
.notice{font-size:13px;color:#d6b87f;line-height:1.5;min-height:18px;margin:16px 4px}
.actions{position:fixed;z-index:2;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:530px;display:flex;gap:10px;padding:15px 18px calc(env(safe-area-inset-bottom,0px) + 19px);background:linear-gradient(180deg,#0b111800 0%,#0b1118ee 24%,#0b1118 57%);backdrop-filter:blur(12px)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:not-allowed}.action{min-width:0;flex:1;display:flex;gap:8px;justify-content:center;align-items:center;min-height:65px;padding:9px 10px;border-radius:16px;font-weight:750;font-size:14px;border:1px solid #536a79;box-shadow:0 5px 12px #0004}.action svg{width:23px;height:23px;flex-shrink:0}.action.open{background:linear-gradient(155deg,#378b91,#25657d);color:#f3ffff;border-color:#5494a2}.action.close{background:#293540;color:#ecf4f8;border-color:#475b6a}
@media(max-width:390px){.shell{padding:20px 14px 145px}.heading{gap:9px;margin-bottom:25px}.heading p{font-size:10px}h1{font-size:16px}.online{font-size:11px}.hero{padding:22px 18px 15px}.hero-row strong{font-size:26px}.actions{padding-left:14px;padding-right:14px}.action{font-size:13px;gap:6px}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .15s,transform .1s}button:not(:disabled):active{transform:scale(.98);filter:brightness(1.1)}}