:root{--bg: #10151c;--panel: #1b232e;--text: #f2f5f8;--muted: #9fb0c0;--accent: #2f7de1;--danger: #c8372d;--ok: #2e9e5b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:grid;place-items:center;user-select:none;-webkit-user-select:none}#app{width:min(560px,92vw)}.screen{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1.5rem;background:var(--panel);border-radius:1rem}.screen.hidden{display:none}h1{margin:0;font-size:1.5rem;font-weight:600;text-align:center}.big-input{width:100%;padding:1rem;font-size:2rem;text-align:center;letter-spacing:.25em;border:2px solid #33405020;border-radius:.75rem;background:#0d1218;color:var(--text)}.big-input:focus{outline:3px solid var(--accent)}button{font:inherit;cursor:pointer;border:0;border-radius:.75rem;color:var(--text)}.primary,.secondary,.danger{width:100%;padding:1rem;font-size:1.25rem;font-weight:600}.primary{background:var(--accent)}.secondary{background:#33404f}.danger{background:var(--danger)}button:disabled{opacity:.4;cursor:default}.link{background:none;color:var(--muted);text-decoration:underline;padding:.5rem}.error{margin:0;min-height:1.4em;color:#ff9b8f;text-align:center}.mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%}.mode{background:#33404f;padding:2rem 1rem;font-size:1.1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.mode .icon{display:grid;place-items:center}.mode .icon svg{width:2.5rem;height:2.5rem}.dial-display{width:100%;min-height:3.5rem;padding:.75rem;font-size:2rem;text-align:center;letter-spacing:.15em;background:#0d1218;border-radius:.75rem}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;width:100%}.key{background:#33404f;padding:1.25rem;font-size:1.75rem;font-weight:600}.key:active{background:var(--accent)}.key.wide{grid-column:span 3}.dial-actions{display:grid;grid-template-columns:1fr 2fr;gap:.75rem;width:100%}.callee{margin:0;font-size:1.5rem;color:var(--muted)}.video-wrap{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;border-radius:.75rem;overflow:hidden}.video-wrap.hidden{display:none}#remoteVideo{width:100%;height:100%;object-fit:cover}#localVideo{position:absolute;width:28%;border-radius:.5rem;border:2px solid #ffffff40;cursor:grab;touch-action:none;transition:top .18s ease,left .18s ease,right .18s ease,bottom .18s ease}#localVideo[data-corner=tl]{top:.75rem;left:.75rem}#localVideo[data-corner=tr]{top:.75rem;right:.75rem}#localVideo[data-corner=bl]{bottom:.75rem;left:.75rem}#localVideo[data-corner=br]{bottom:.75rem;right:.75rem}#localVideo.dragging{transition:none;cursor:grabbing;border-color:#ffffff90}body.in-call{display:block}body.in-call #app{width:100vw;height:100dvh}body.in-call #screen-call{position:fixed;top:0;right:0;bottom:0;left:0;padding:0;gap:.5rem;border-radius:0;background:#000;justify-content:flex-start}body.in-call .video-wrap{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}body.in-call #remoteVideo{object-fit:contain}body.in-call #localVideo{width:min(28%,220px)}body.in-call #callStatus,body.in-call .callee{position:relative;z-index:2;text-shadow:0 1px 4px #000000cc}body.in-call #callStatus{margin-top:2rem}body.in-call .call-controls{position:absolute;bottom:max(2rem,env(safe-area-inset-bottom));left:0;right:0;z-index:2;pointer-events:none}body.in-call .call-controls .round-control{pointer-events:auto}body.in-call .audio-warning{position:absolute;bottom:8rem;left:50%;transform:translate(-50%);width:auto;z-index:3}.call-controls{display:flex;gap:2rem;justify-content:center;width:100%}.round-control{width:4.5rem;height:4.5rem;border-radius:50%;background:#33404f;display:grid;place-items:center;padding:0}.round-control svg{width:2rem;height:2rem}.round-control.active{background:var(--text);color:#10151c}.round-control.hangup{background:var(--danger)}.round-control:active{filter:brightness(1.2)}.audio-warning{margin:0;padding:.75rem;width:100%;text-align:center;background:#4a3a12;border-radius:.5rem;color:#ffd98a}.audio-warning.hidden{display:none}