:root { color-scheme: dark; font-family: Inter, "Segoe UI", sans-serif; background:#050b13; color:#f6f8fb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 50% 5%,#183454 0,#081321 43%,#03070d 100%); }
button,textarea { font:inherit; }
.phone { width:min(100%,460px); min-height:100dvh; margin:auto; padding:max(20px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:20px; }
header { display:flex; justify-content:center; align-items:center; gap:8px; color:#b9c7d8; font-size:.9rem; }
.presence { width:9px; height:9px; border-radius:50%; background:#687587; box-shadow:0 0 0 4px #68758722; }
.presence.online { background:#56e39f; box-shadow:0 0 0 4px #56e39f22; }
.identity { text-align:center; margin-top:4vh; }
.avatar { width:132px; height:132px; margin:auto; border-radius:50%; display:grid; place-items:center; font:600 3.5rem Georgia,serif; background:linear-gradient(145deg,#365f8d,#14233a); border:1px solid #ffffff2b; box-shadow:0 22px 70px #0009; }
.eyebrow { margin:20px 0 4px; color:#8fa4bb; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-weight:520; font-size:2rem; letter-spacing:-.03em; }
.status { color:#b9c7d8; min-height:1.5em; }
.card { background:#0e1c2ddd; border:1px solid #ffffff16; border-radius:20px; padding:18px; box-shadow:0 18px 50px #0005; }
.card h2 { margin:0 0 10px; font-size:1rem; }
textarea { width:100%; min-height:80px; margin:10px 0; resize:vertical; background:#07111f; color:#fff; border:1px solid #ffffff24; border-radius:12px; padding:12px; }
.controls { margin-top:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.round { width:72px; min-height:72px; border:0; border-radius:36px; background:#ffffff14; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; }
.round span { font-size:1.4rem; }.round small{font-size:.7rem}.round:focus-visible,.secondary:focus-visible,.quiet:focus-visible{outline:3px solid #8cc8ff;outline-offset:3px}
.round.call { background:#38b878; }.round.end,.round.danger { background:#d94b55; }.round[aria-pressed="true"] { background:#e8eef7; color:#07111f; }
.secondary,.quiet { min-height:44px; border-radius:12px; border:0; padding:10px 15px; color:#fff; }.secondary{background:#2869a8}.quiet{background:transparent;color:#aac0d7}
.task { text-align:center; color:#a9b9ca; }.pairing{color:#8497ac;font-size:.85rem}.hidden{display:none!important}
@media (prefers-reduced-motion:no-preference){.avatar{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-5px)}}}