:root{--ink:#18091e;--paper:#fff7eb;--pink:#ff3b91;--lime:#c7ff32;--yellow:#ffd43b;--muted:#b9aabc;--line:#4a3150;--red:#ff4f55;--green:#7dff73}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}
body{min-height:100dvh;overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(#fff 0.7px,transparent .8px);background-size:7px 7px;mix-blend-mode:overlay}
.screen{position:relative;z-index:1;min-height:100dvh;padding:max(28px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));max-width:760px;margin:auto}
.hidden{display:none!important}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;display:flex;align-items:center;gap:10px}
.eyebrow i{width:26px;height:6px;background:var(--lime);display:block}
.login-screen h1{font-size:clamp(43px,12vw,78px);line-height:.86;letter-spacing:-.06em;margin:36px 0 24px}
.login-screen h1 em{font-style:normal;color:var(--pink);text-shadow:4px 4px 0 var(--paper)}
.intro{max-width:500px;color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 28px}
.room-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:26px}
.room-picker button{aspect-ratio:1;border:2px solid var(--line);background:#25102c;color:var(--paper);font-size:26px;font-weight:900;border-radius:8px;box-shadow:inset 0 0 0 1px #0000;transition:.15s}
.room-picker button:last-child{grid-column:auto;aspect-ratio:1}
.room-picker button.selected{background:var(--lime);border-color:var(--lime);color:var(--ink);box-shadow:5px 5px 0 var(--pink);transform:translate(-2px,-2px)}
.code-field{display:block;margin-bottom:8px}
.code-field span{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--yellow);display:block;margin-bottom:8px}
.code-field input{width:100%;height:72px;border:2px solid var(--paper);border-radius:8px;background:#100515;color:var(--paper);font-size:32px;font-weight:900;letter-spacing:.42em;text-align:center;padding-left:.42em;outline:none}
.code-field input:focus{border-color:var(--pink);box-shadow:0 0 0 4px #ff3b9133}
.error{min-height:22px;color:#ff9fab;font-weight:700;font-size:13px}
.main-button{width:100%;border:0;border-radius:8px;background:var(--pink);color:#16081b;min-height:64px;font-weight:1000;font-size:14px;letter-spacing:.08em;padding:0 22px;display:flex;justify-content:space-between;align-items:center;box-shadow:6px 6px 0 var(--yellow)}
.main-button:disabled{opacity:.35;box-shadow:none}
.main-button b{font-size:24px}
.privacy{display:block;color:#7f6e83;line-height:1.45;margin:22px auto 0;text-align:center;max-width:360px}
.phone-screen{padding-left:16px;padding-right:16px}
.phone-screen header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}
.phone-screen header div{display:flex;flex-direction:column;gap:4px}
.phone-screen header span{font-size:9px;letter-spacing:.18em;color:var(--muted);font-weight:900}
.phone-screen header b{font-size:20px}
.phone-screen header strong{color:var(--lime);font-size:26px}
.text-button{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em;border-radius:6px;padding:11px 13px}
.line-state{display:flex;align-items:center;gap:8px;margin:18px 2px;color:var(--muted);font-size:10px;letter-spacing:.14em;font-weight:900}
.line-state i{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px var(--yellow)}
.line-state i.online{background:var(--green);box-shadow:0 0 12px var(--green)}
.phone-title p{font-size:10px;letter-spacing:.22em;font-weight:900;margin:36px 0 4px;color:var(--pink)}
.phone-title h2{font-size:45px;line-height:1;margin:0 0 24px;letter-spacing:-.05em}
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.room-card{border:2px solid var(--line);border-radius:10px;background:#25102c;color:var(--paper);text-align:left;padding:15px;min-height:146px;display:flex;flex-direction:column;justify-content:space-between;transition:.15s}
.room-card:not(:disabled):active{transform:scale(.97)}
.room-card .top{display:flex;justify-content:space-between;align-items:flex-start}
.room-card .number{font-size:43px;font-weight:1000;line-height:.9}
.room-card .status{font-size:8px;letter-spacing:.1em;font-weight:900;color:var(--muted);padding:5px 7px;border:1px solid var(--line);border-radius:99px}
.room-card .call{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:1000;letter-spacing:.1em;color:var(--pink)}
.room-card .call b{font-size:22px}
.room-card.online{border-color:var(--lime);box-shadow:inset 0 -4px 0 var(--lime)}
.room-card.online .status{color:var(--lime);border-color:#6c8d2a}
.room-card.busy{opacity:.55}
.room-card:disabled .call{color:#796b7c}
.phone-screen footer{display:flex;gap:13px;align-items:center;border-top:1px solid var(--line);margin-top:24px;padding-top:18px;color:var(--muted)}
.phone-screen footer>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2d1734;color:var(--lime)}
.phone-screen footer p{display:flex;flex-direction:column;margin:0;gap:3px}
.phone-screen footer b{font-size:11px;color:var(--paper)}
.phone-screen footer small{font-size:10px}
.call-layer{position:fixed;z-index:20;inset:0;background:#0e0412f2;display:grid;place-items:center;padding:22px;overflow:hidden}
.pulse{position:absolute;border:2px solid #ff3b9155;border-radius:50%;width:340px;height:340px;animation:pulse 2.2s infinite}
.pulse-two{animation-delay:1.1s}
@keyframes pulse{0%{transform:scale(.65);opacity:1}
100%{transform:scale(1.5);opacity:0}
}
.call-card{position:relative;z-index:1;text-align:center;width:min(100%,420px)}
.call-card>span{font-size:10px;letter-spacing:.22em;color:var(--pink);font-weight:900}
.call-number{width:190px;height:190px;border-radius:50%;margin:25px auto 20px;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 0 12px #ff3b9130,0 0 0 25px #ff3b9118}
.call-number small{font-size:10px;letter-spacing:.2em;font-weight:900}
.call-number b{font-size:90px;line-height:.85}
.call-card>p{color:var(--muted);font-size:11px;letter-spacing:.18em;font-weight:900;min-height:16px}
.call-actions{display:flex;justify-content:center;gap:45px;margin-top:34px}
.round{width:72px;height:72px;border:0;border-radius:50%;font-size:30px;font-weight:900}
.reject{background:var(--red);color:white}
.accept{background:var(--lime);color:var(--ink);animation:nudge .8s infinite alternate}
@keyframes nudge{to{transform:translateY(-4px)}
}
.hangup{margin:36px auto 0;width:100%;max-width:310px;min-height:58px;border:0;border-radius:8px;background:var(--red);color:white;font-weight:1000;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.hangup b{font-size:25px}
.toast{position:fixed;z-index:40;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));max-width:480px;margin:auto;padding:15px 18px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:800;border-left:7px solid var(--pink);box-shadow:7px 7px 0 #0007}
@media(min-width:620px){.room-picker{grid-template-columns:repeat(7,1fr)}
.room-picker button:last-child{grid-column:auto;aspect-ratio:1}
.rooms{grid-template-columns:repeat(3,1fr)}
.screen{padding-left:32px;padding-right:32px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
}