:root {--bg:#080d1b;--surface:#121a2c;--surface2:#172138;--border:#27324b;--text:#f4f7ff;--muted:#8896b2;--blue:#65aaff;--blue-bright:#397ded;--coral:#ff8a88;--green:#48d5aa;--shadow:0 25px 70px rgba(0,0,0,.21);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color-scheme:dark;font-synthesis:none}
* {box-sizing:border-box} html{min-height:100%;background:var(--bg)} body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(ellipse 52% 40% at 11% 17%,rgba(28,52,95,.16),transparent 82%),radial-gradient(ellipse 45% 36% at 93% 80%,rgba(33,41,75,.19),transparent 85%),var(--bg);-webkit-font-smoothing:antialiased}
button,input{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed} button:focus-visible,input:focus-visible{outline:3px solid #aacfff;outline-offset:3px} button, input{-webkit-tap-highlight-color:transparent}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.app-shell{max-width:1510px;margin:auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 5.2%}.view[hidden],.modal:not([open]),[hidden]{display:none!important}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:101px;border-bottom:1px solid rgba(138,162,204,.1);gap:15px}.brand{display:flex;gap:13px;align-items:center;font-weight:700;letter-spacing:.15em;font-size:15px}.brand-strong{color:var(--blue)}.brand-mark{width:41px;height:41px;display:grid;place-items:center;background:rgba(98,169,255,.12);border:1px solid rgba(99,168,255,.22);border-radius:12px;color:var(--blue)}.brand-mark svg{width:24px;height:24px}.topbar-right{display:flex;align-items:center;gap:14px}.topbar-kicker{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--muted)}.topbar-dot,.dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--blue);box-shadow:0 0 18px rgba(93,163,255,.75)}.dot-green{background:var(--green);box-shadow:0 0 16px rgba(72,213,170,.7)}.dot-blue{background:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:12px;font-weight:680;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap;user-select:none;min-height:44px;padding:0 17px;color:var(--text);background:transparent}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn-primary{background:#4b90f5;color:#fff;box-shadow:0 9px 24px rgba(56,121,234,.2)}.btn-primary:hover{background:#62a2fb}.btn-primary:disabled{opacity:.5}.btn-large{height:60px;padding:0 24px;font-size:14px;border-radius:13px}.btn-large .ic-right{margin-left:11px}.btn-ghost{border-color:var(--border);background:rgba(255,255,255,.025);font-size:12px}.btn-ghost:hover,.btn-outline:hover{background:#202d46}.btn-small{font-size:11px;height:38px;min-height:38px;padding:0 12px;border-radius:9px}.btn-small .ic{width:15px;height:15px}.btn-outline{border-color:var(--border)}.btn-qr{background:#27354d;border-color:#354561}.btn-reset{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);font-size:12px;padding:0 14px;min-height:36px}.btn-reset .ic{width:16px;height:16px}.btn-text{font-size:12px;color:var(--muted);padding:0}.btn-text:hover{color:white}.icon-btn{width:31px;height:31px;border:0;border-radius:8px;color:#8394b4;display:grid;place-items:center;background:transparent}.icon-btn:hover{color:white;background:rgba(255,255,255,.065)}.icon-btn svg{width:16px;height:16px}
.eyebrow{display:flex;align-items:center;gap:11px;color:#a0b3d0;font-size:10px;font-weight:800;letter-spacing:.2em}.welcome{display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:65px;flex:1;padding:85px 0 110px;min-height:690px}.welcome h1{font-size:clamp(48px,5vw,77px);letter-spacing:-.07em;line-height:1.1;margin:28px 0 23px;font-weight:820}.welcome h1 span{color:var(--blue)}.welcome-description{font-size:16px;line-height:1.8;color:#9eacc5;max-width:490px;margin:0 0 33px}.welcome-features{display:flex;gap:21px;flex-wrap:wrap;margin-top:30px;color:#acbad2;font-size:11px}.welcome-features span{display:flex;align-items:center;gap:6px}.welcome-features .ic{width:14px;height:14px;color:var(--green)}.welcome-preview{background:linear-gradient(140deg,#172237,#0e1629);border:1px solid #2d3955;box-shadow:0 30px 90px rgba(0,0,0,.32);border-radius:22px;min-height:349px;transform:perspective(1000px) rotateY(-5deg) rotateX(1deg);overflow:hidden}.preview-top,.preview-bottom{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;color:#8797b4;letter-spacing:.14em;font-size:9px;font-weight:700}.preview-lights{display:flex;gap:6px}.preview-lights b{width:7px;height:7px;border-radius:100%;background:#ff6969}.preview-lights b:nth-child(2){background:#ffcb58}.preview-lights b:nth-child(3){background:#59d59d}.preview-content{display:grid;grid-template-columns:1fr 1fr;padding:21px;gap:12px}.preview-timer{border-radius:15px;background:rgba(72,116,181,.08);border:1px solid rgba(95,155,238,.15);padding:20px 14px;min-width:0}.preview-timer.coral{background:rgba(217,116,124,.06);border-color:rgba(248,126,138,.14)}.preview-timer div{font-size:9px;letter-spacing:.14em;color:#9aa9c3}.preview-timer strong{display:block;margin:34px 0;font-size:clamp(26px,2.5vw,37px);font-weight:720;white-space:nowrap;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.preview-timer strong span{color:var(--blue)}.preview-timer.coral strong span{color:var(--coral)}.preview-timer small{font-size:9px;letter-spacing:.08em;color:var(--green)}.preview-timer.coral small{color:var(--coral)}.preview-bottom{border-top:1px solid rgba(255,255,255,.06);height:55px}.preview-bottom span:last-child{color:var(--green)}
.dashboard{flex:1;padding:42px 0 70px}.dashboard-head{display:flex;justify-content:space-between;align-items:center;gap:25px}.dashboard-head h1{font-size:clamp(29px,3.3vw,44px);font-weight:760;letter-spacing:-.055em;margin:16px 0 8px}.dashboard-head h1 span{color:var(--blue)}.dashboard-head p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.room-chip{display:flex;align-items:center;gap:14px;padding:13px 14px 13px 20px;border:1px solid #2a3750;background:#131e31;border-radius:12px}.room-chip span{color:var(--muted);font-size:10px;letter-spacing:.18em;font-weight:750}.room-chip strong{letter-spacing:.13em;font-variant-numeric:tabular-nums;font-size:15px}.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:40px 0 16px}.network-status{display:flex;align-items:center;gap:9px;color:#9daac3;font-weight:560;font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:#d8a04a;box-shadow:0 0 14px #d8a04a55}.status-dot.online{background:var(--green);box-shadow:0 0 16px #48d5aa88}.status-dot.offline{background:#fc7777;box-shadow:0 0 16px #fc777766}.toolbar-actions{display:flex;gap:9px}.timer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}.timer-card{--accent:var(--blue);--accent-bg:rgba(89,162,255,.085);border:1px solid #29354e;border-radius:18px;background:linear-gradient(148deg,rgba(27,39,61,.92),rgba(17,25,42,.96) 62%);padding:26px 28px;min-width:0;box-shadow:0 15px 44px rgba(0,0,0,.13);position:relative;overflow:hidden}.timer-card::before{content:"";position:absolute;height:3px;top:0;left:12%;width:76%;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}.timer-card--coral{--accent:var(--coral);--accent-bg:rgba(255,129,132,.08)}.timer-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.timer-index{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--accent)}.presence{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.presence-dot{height:7px;width:7px;flex-shrink:0;border-radius:100%;background:#63728c}.presence.active .presence-dot{background:var(--green);box-shadow:0 0 12px #48d5aa77}.presence.active{color:#c1f5e3}.timer-person{display:flex;align-items:center;gap:13px;margin-top:32px}.avatar{width:48px;height:48px;display:grid;place-items:center;font-size:14px;font-weight:760;border-radius:14px;flex-shrink:0}.avatar-blue{background:rgba(94,167,250,.13);color:#8dc6ff}.avatar-coral{background:rgba(255,137,144,.13);color:#ffa6a2}.timer-person-name{display:flex;align-items:center;gap:4px}.timer-person-name h2{font-size:20px;letter-spacing:-.035em;margin:0;font-weight:760}.timer-person-sub{font-size:11px;color:var(--muted);display:block;margin-top:3px}.timer-digits{display:flex;justify-content:center;align-items:baseline;padding:49px 0 37px;color:#f7faff;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.07em;font-weight:720}.time-major{font-size:clamp(42px,5.2vw,77px)}.time-ms{font-size:clamp(27px,3.6vw,48px);color:var(--accent)}.timer-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:7px}.timer-state,.controller-state{display:inline-flex;align-items:center;gap:9px;color:#9baaca;font-size:12px}.state-indicator{width:7px;height:7px;border-radius:100%;background:#7e8ca4}.is-running .timer-state .state-indicator,.controller-state.is-running .state-indicator{background:var(--green);box-shadow:0 0 14px #48d5aa88}.is-running .timer-state,.controller-state.is-running{color:#94e6cb}.is-paused .timer-state .state-indicator,.controller-state.is-paused .state-indicator{background:#ffa864}.is-paused .timer-state,.controller-state.is-paused{color:#ffc9a0}.timer-card-divider{height:1px;background:rgba(255,255,255,.075);margin:25px 0 18px}.pair-row{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.pair-title{display:flex;gap:9px;align-items:center;color:#c6d3e8;font-size:11px;font-weight:600}.pair-title .ic{width:17px;height:17px;color:var(--accent)}.pair-actions{display:flex;gap:7px}.dashboard-foot{margin-top:25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.foot-hint{display:flex;gap:11px;align-items:center}.foot-hint>svg{color:#74aef2;width:20px;height:20px}.foot-hint p{margin:0}.foot-hint strong{display:block;font-size:12px;margin-bottom:4px}.foot-hint span{display:block;color:var(--muted);font-size:11px}.global-footer{display:flex;align-items:center;justify-content:space-between;min-height:67px;margin-top:auto;border-top:1px solid rgba(149,176,223,.08);font-size:9px;letter-spacing:.19em;color:#65738d;font-weight:700}
.controller{flex:1;display:flex;flex-direction:column;padding:26px 0 32px;--player:var(--blue);--player-bg:#3d91ed}.controller.player-two{--player:var(--coral);--player-bg:#e47076}.controller-top{display:flex;justify-content:space-between;align-items:center;gap:9px}.controller-tag{color:var(--player);border:1px solid color-mix(in srgb,var(--player) 26%,transparent);background:color-mix(in srgb,var(--player) 9%,transparent);border-radius:50px;display:inline-flex;padding:9px 13px;letter-spacing:.11em;font-size:10px;font-weight:750}.controller-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:535px;padding:18px 0}.controller-heading{text-align:center}.controller-room{font-size:10px;color:var(--muted);letter-spacing:.17em;font-weight:700}.controller-room strong{color:#d3dff1}.controller-heading h1{font-size:clamp(27px,6vw,37px);letter-spacing:-.055em;margin:12px 0 8px}.controller-heading p{color:var(--muted);font-size:12px;margin:0}.controller-clock{font-variant-numeric:tabular-nums;letter-spacing:-.07em;font-weight:770;margin:33px 0 20px;line-height:1;color:#fff;white-space:nowrap}.controller-clock span:first-child{font-size:clamp(49px,11vw,84px)}.controller-clock span:last-child{font-size:clamp(29px,7vw,48px);color:var(--player)}.touch-zone{width:min(76vw,310px);height:min(76vw,310px);min-height:230px;min-width:230px;position:relative;display:flex;align-items:center;justify-content:center;margin:13px 0 20px}.touch-halo{position:absolute;inset:-18px;border-radius:50%;border:1px solid color-mix(in srgb,var(--player) 15%,transparent);box-shadow:0 0 55px color-mix(in srgb,var(--player) 10%,transparent);pointer-events:none}.touch-zone::after{content:"";position:absolute;inset:-6px;border:1px solid color-mix(in srgb,var(--player) 26%,transparent);border-radius:50%;pointer-events:none}.touch-button{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;position:relative;background:linear-gradient(140deg,color-mix(in srgb,var(--player-bg) 87%,white),var(--player-bg) 65%,color-mix(in srgb,var(--player-bg) 70%,black));border:3px solid color-mix(in srgb,var(--player) 70%,white);color:white;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 20px 60px color-mix(in srgb,var(--player) 22%,transparent),inset 0 2px 12px rgba(255,255,255,.2),inset 0 -15px 35px rgba(0,0,0,.12);transition:transform .07s,filter .07s,box-shadow .07s;outline-offset:10px}.touch-button:active,.touch-button.pressed{transform:scale(.966);filter:brightness(1.11);box-shadow:0 10px 35px color-mix(in srgb,var(--player) 22%,transparent),inset 0 4px 22px rgba(0,0,0,.17)}.touch-button:disabled{filter:grayscale(.7);opacity:.6}.button-icon{width:64px;height:64px;background:rgba(255,255,255,.16);display:grid;place-items:center;border-radius:50%}.button-icon .ic{width:32px;height:32px;stroke-width:2.3}.touch-button strong{font-size:25px;letter-spacing:.065em;font-weight:850}.touch-button small{font-size:10px;letter-spacing:.1em;font-weight:740;opacity:.8}.controller-state{margin:0;justify-content:center}.btn-controller-reset{min-height:42px;margin-top:25px;color:#a7b6d1;border:1px solid #2c3a53;background:#141e30;font-size:12px}.btn-controller-reset:hover{color:white;background:#1e2b43}.controller-footer{display:flex;align-items:center;justify-content:center;gap:8px;color:#70809e;text-align:center;font-size:10px;line-height:1.5}.controller-footer .ic{width:16px;height:16px}.controller.is-running .touch-halo{animation:halo 2.2s infinite ease-in-out}@keyframes halo{50%{box-shadow:0 0 85px color-mix(in srgb,var(--player) 25%,transparent);border-color:color-mix(in srgb,var(--player) 50%,transparent)}}
.error-page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:470px;width:100%;margin:0 auto;padding:75px 0}.error-art{width:92px;height:92px;border:1px solid #503c45;border-radius:27px;display:grid;place-items:center;background:#301e2d;color:#fa8e91}.error-art .ic{width:43px;height:43px}.error-page h1{font-size:30px;letter-spacing:-.05em;margin:27px 0 4px}.error-page p{color:var(--muted);line-height:1.7;font-size:14px;margin-bottom:29px}
.modal{border:1px solid #36445f;border-radius:21px;background:#141d31;color:white;padding:0;width:min(calc(100vw - 32px),415px);box-shadow:0 35px 120px #000a}.modal::backdrop{background:rgba(1,5,14,.78);backdrop-filter:blur(6px)}.modal-inner{position:relative;padding:33px 32px 32px;display:flex;flex-direction:column;align-items:center;margin:0}.modal-close{position:absolute;top:16px;right:16px}.modal-eyebrow{font-size:10px;letter-spacing:.18em;color:var(--blue);font-weight:800}.modal h2{font-size:25px;letter-spacing:-.045em;margin:12px 0 5px}.modal p{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.qr-target{background:white;border-radius:12px;padding:13px;margin:5px 0 24px;line-height:0;max-width:100%;overflow:hidden}.qr-target svg{max-width:100%;height:auto;width:240px}.btn-full{width:100%;min-height:48px}.input-label{width:100%;color:#d4e0f7;font-size:12px;font-weight:700;margin:12px 0 8px}.text-input{width:100%;border:1px solid #394962;background:#0d1526;color:white;padding:13px;border-radius:10px;outline:none;margin-bottom:22px}.text-input:focus{border-color:var(--blue)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);border:1px solid #456448;background:#182d28;color:#d4ffec;border-radius:12px;padding:13px 20px;font-size:13px;font-weight:600;z-index:100;text-align:center;box-shadow:0 10px 30px #0008}
body.phone-mode .topbar{min-height:74px}body.phone-mode .topbar-right{display:none}body.phone-mode .brand{font-size:12px}body.phone-mode .brand-mark{width:34px;height:34px;border-radius:10px}body.phone-mode .brand-mark .ic{width:20px;height:20px}body.phone-mode .global-footer{display:none}
body.fullscreen-mode .topbar,body.fullscreen-mode .global-footer,body.fullscreen-mode .dashboard-head,body.fullscreen-mode .dashboard-foot{display:none}body.fullscreen-mode .dashboard{display:flex;flex-direction:column;justify-content:center;padding:20px 0}body.fullscreen-mode .timer-card{padding:34px}body.fullscreen-mode .timer-digits{padding:9vh 0}body.fullscreen-mode .time-major{font-size:clamp(50px,7.3vw,115px)}body.fullscreen-mode .time-ms{font-size:clamp(36px,4.5vw,65px)}
@media(max-width:1130px){.app-shell{padding:0 4%}.welcome{gap:25px}.welcome-preview{transform:none}.timer-card{padding:22px 19px}.timer-digits{padding:40px 0}.time-major{font-size:clamp(41px,5.1vw,69px)}.time-ms{font-size:clamp(25px,3.1vw,39px)}.pair-row{gap:14px}.pair-actions{width:100%}.pair-actions .btn{flex:1}}
@media(max-width:760px){.app-shell{padding:0 18px}.topbar{min-height:75px}.topbar-kicker{display:none}.welcome{grid-template-columns:1fr;gap:40px;min-height:auto;padding:63px 0}.welcome h1{font-size:clamp(45px,10vw,68px)}.welcome-description{font-size:14px}.welcome-preview{max-width:535px;width:100%;margin:auto}.dashboard{padding:27px 0 40px}.dashboard-head{align-items:flex-start}.dashboard-head h1{font-size:34px}.dashboard-head .eyebrow{font-size:9px}.room-chip{padding:9px 7px 9px 12px;gap:8px}.room-chip strong{font-size:11px}.room-chip span{font-size:8px}.dashboard-toolbar{margin:25px 0 14px}.timer-grid{grid-template-columns:1fr;gap:15px}.timer-card{padding:21px}.time-major{font-size:clamp(47px,11vw,80px)}.time-ms{font-size:clamp(29px,7vw,52px)}.timer-digits{padding:39px 0}.pair-actions{width:auto}.dashboard-foot{align-items:flex-start}.foot-hint span{max-width:260px}}
@media(max-width:460px){.topbar-right{display:none}.dashboard-head{flex-direction:column;gap:15px}.dashboard-head h1{font-size:33px}.dashboard-head p{font-size:12px}.room-chip{align-self:flex-start}.dashboard-toolbar{gap:8px;flex-wrap:wrap}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1;font-size:11px;padding:0 9px}.timer-card-head{gap:6px}.presence{font-size:10px}.pair-row{align-items:flex-start;gap:12px}.pair-actions{width:100%}.pair-actions .btn{flex:1}.dashboard-foot{flex-direction:column}.foot-hint p{font-size:11px}.preview-timer strong{font-size:25px}.preview-content{padding:13px}.preview-timer{padding:14px 10px}.preview-bottom,.preview-top{padding:0 14px}.welcome-preview{min-height:290px}.welcome-features{gap:11px}.welcome-features span{font-size:10px}.controller-main{min-height:460px}.controller-clock{margin:25px 0 12px}.touch-zone{width:min(70vw,300px);height:min(70vw,300px);min-width:225px;min-height:225px}.touch-button .button-icon{height:56px;width:56px}.touch-button .button-icon .ic{width:28px;height:28px}.touch-button strong{font-size:22px}.controller-heading h1{font-size:29px}.controller-footer{max-width:300px;margin:auto}}
@media(max-height:700px) and (max-width:650px){.controller-main{min-height:0;padding-top:12px}.controller-heading h1{margin:6px 0}.controller-clock{margin:18px 0 10px}.touch-zone{height:min(55vw,240px);width:min(55vw,240px);min-height:190px;min-width:190px;margin:8px 0}.touch-button strong{font-size:19px}.button-icon{width:46px;height:46px}.controller-state{margin:3px 0}.btn-controller-reset{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}