:root{--bg-0: #061016;--bg-1: #0b1c24;--ink: #e8fff8;--muted: #8fb3a8;--cyan: #00f5d4;--lime: #b8ff3c;--amber: #ffd60a;--coral: #ff4d6d;--panel: rgba(8, 28, 36, .72);--stroke: rgba(0, 245, 212, .28);--glow: 0 0 28px rgba(0, 245, 212, .35);--font-display: "Orbitron", sans-serif;--font-body: "Space Grotesk", sans-serif;--radius: 22px}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font-body);color:var(--ink);background:radial-gradient(1200px 700px at 15% -10%,#123447 0%,transparent 55%),radial-gradient(900px 600px at 90% 10%,#1a3a20 0%,transparent 45%),linear-gradient(160deg,var(--bg-0),var(--bg-1) 55%,#040a0e);overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 3px);mix-blend-mode:soft-light;animation:scan 8s linear infinite;z-index:1}@keyframes scan{0%{transform:translateY(0)}to{transform:translateY(12px)}}.aurora,.grid-floor,.orb,#signal-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.aurora{background:conic-gradient(from 180deg at 50% 40%,#00f5d41f,#b8ff3c14,#ffd60a1a,#00f5d41f);filter:blur(40px);animation:aurora-spin 18s linear infinite;opacity:.75}@keyframes aurora-spin{to{transform:rotate(360deg) scale(1.15)}}.grid-floor{background-image:linear-gradient(rgba(0,245,212,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,212,.08) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(to bottom,transparent 35%,black 85%);mask-image:linear-gradient(to bottom,transparent 35%,black 85%);transform:perspective(500px) rotateX(60deg) translateY(35%) scale(2);animation:grid-drift 10s linear infinite}@keyframes grid-drift{to{background-position:0 48px,48px 0}}.orb{width:280px;height:280px;border-radius:50%;filter:blur(40px);opacity:.45}.orb-a{top:12%;left:-60px;background:var(--cyan);animation:float-a 7s ease-in-out infinite}.orb-b{right:-40px;bottom:18%;background:var(--amber);animation:float-b 9s ease-in-out infinite}@keyframes float-a{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,30px) scale(1.15)}}@keyframes float-b{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-50px,-20px) scale(1.2)}}.shell{position:relative;z-index:2;width:min(480px,calc(100% - 28px));margin:28px auto 64px;display:grid;gap:18px}.brand{text-align:center;animation:brand-in .9s cubic-bezier(.2,1.4,.3,1) both}@keyframes brand-in{0%{opacity:0;transform:translateY(-24px) scale(.96)}}.brand-mark{margin:0;font-family:var(--font-display);font-weight:900;letter-spacing:.35em;font-size:clamp(1.8rem,7vw,2.6rem);color:var(--cyan);text-shadow:0 0 24px rgba(0,245,212,.65),0 0 60px rgba(0,245,212,.25);animation:neon-flicker 4.5s infinite}@keyframes neon-flicker{0%,19%,21%,23%,25%,54%,56%,to{opacity:1}20%,24%,55%{opacity:.72}}.brand h1{margin:6px 0 0;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}.tagline{margin:8px 0 0;color:var(--muted);font-size:.92rem}.panel,.phone{background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--glow),inset 0 1px #ffffff0d}.panel{padding:16px 16px 18px;transition:max-height .45s ease,opacity .3s ease,padding .3s ease,border-color .3s}.panel.collapsed .sip-form{display:none}.panel.collapsed .panel-head h2{opacity:.55}.panel.collapsed{padding-bottom:12px}.config-summary{display:none;width:100%;align-items:center;gap:10px;margin:0 0 2px;padding:10px 12px;border-radius:14px;border:1px solid rgba(184,255,60,.28);background:#b8ff3c0f;color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s ease,border-color .2s,box-shadow .2s}.panel.collapsed .config-summary:not([hidden]){display:flex}.config-summary:hover{transform:translateY(-1px);border-color:#b8ff3c8c;box-shadow:0 0 18px #b8ff3c2e}.config-summary-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--lime);box-shadow:0 0 10px #b8ff3cd9;animation:ping 1.6s infinite}.config-summary-text{flex:1;min-width:0;font-family:var(--font-display);font-size:.78rem;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.config-summary-edit{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.panel-head,.transfer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head h2,.transfer-head h2,.log-panel h2{margin:0;font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}.sip-form{display:grid;gap:10px}.sip-form label{display:grid;gap:5px;font-size:.82rem;color:var(--muted)}.sip-form label.checkbox{grid-template-columns:auto 1fr;align-items:center;gap:8px}input[type=text],input[type=password],input:not([type]){width:100%;border:1px solid rgba(0,245,212,.22);background:#00000059;color:var(--ink);border-radius:12px;padding:11px 12px;font:inherit;outline:none;transition:border-color .2s,box-shadow .2s,transform .15s}input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #00f5d426;transform:translateY(-1px)}.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}button{font:inherit;cursor:pointer;border:none}.primary-btn,.danger-btn,.ghost-btn,.ctrl,.transfer-btn,.key{border-radius:14px;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,opacity .2s}.primary-btn{background:linear-gradient(135deg,var(--cyan),#00b894);color:#031410;font-weight:700;padding:12px;box-shadow:0 0 20px #00f5d459}.danger-btn{background:#ff4d6d2e;color:#ffb3c1;border:1px solid rgba(255,77,109,.45);padding:12px}.ghost-btn{background:transparent;color:var(--muted);border:1px solid rgba(143,179,168,.35);padding:6px 10px;font-size:.78rem}.primary-btn:hover:not(:disabled),.danger-btn:hover:not(:disabled),.ctrl:hover:not(:disabled),.transfer-btn:hover:not(:disabled),.key:hover{transform:translateY(-2px) scale(1.02)}.primary-btn:disabled,.danger-btn:disabled,.ctrl:disabled,.transfer-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.primary-btn.pulse{animation:btn-pulse .55s ease}@keyframes btn-pulse{50%{transform:scale(1.06);box-shadow:0 0 36px #00f5d4b3}}.phone{padding:16px;display:grid;gap:14px;animation:phone-in .8s .1s cubic-bezier(.2,1.3,.3,1) both}@keyframes phone-in{0%{opacity:0;transform:translateY(40px) rotateX(8deg)}}.status-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}.status-dot{width:10px;height:10px;border-radius:50%;background:#667;box-shadow:0 0 #66667780}.status-dot[data-state=connecting],.status-dot[data-state=connected]{background:var(--amber);animation:blink 1s infinite}.status-dot[data-state=registered]{background:var(--lime);box-shadow:0 0 12px #b8ff3ccc}.status-dot[data-state=ringing],.status-dot[data-state=calling]{background:var(--cyan);animation:ping .9s infinite}.status-dot[data-state=in-call]{background:var(--lime);animation:ping 1.4s infinite}.status-dot[data-state=transferring]{background:var(--amber);animation:ping .5s infinite}.status-dot[data-state=error]{background:var(--coral);animation:blink .5s infinite}@keyframes blink{50%{opacity:.35}}@keyframes ping{0%{box-shadow:0 0 0 0 currentColor;transform:scale(1)}70%{box-shadow:0 0 0 12px transparent}to{transform:scale(1)}}.call-timer{font-family:var(--font-display);font-size:.78rem;color:var(--cyan);letter-spacing:.08em}.display{position:relative;overflow:hidden;border-radius:18px;min-height:118px;padding:16px;background:linear-gradient(160deg,#00282af2,#000c10f2);border:1px solid rgba(0,245,212,.35);box-shadow:inset 0 0 40px #00f5d414}.display-glow{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 0deg,transparent,rgba(0,245,212,.18),transparent 40%);animation:glow-spin 6s linear infinite}@keyframes glow-spin{to{transform:rotate(360deg)}}.display-label,.display-number,.display-hint{position:relative;z-index:1;margin:0}.display-label{font-family:var(--font-display);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}.display-number{margin-top:8px;font-family:var(--font-display);font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:.08em;min-height:1.25em;word-break:break-all;text-shadow:0 0 18px rgba(0,245,212,.45)}.display-hint{margin-top:8px;font-size:.82rem;color:var(--muted)}.display.ringing{animation:ring-shake .35s infinite;border-color:var(--amber)}.display.calling .display-number{animation:dial-pulse .8s ease-in-out infinite}.display.live{border-color:var(--lime);box-shadow:inset 0 0 50px #b8ff3c1f,0 0 30px #b8ff3c33}@keyframes ring-shake{0%,to{transform:rotate(0)}25%{transform:rotate(-1.2deg) translate(-2px)}75%{transform:rotate(1.2deg) translate(2px)}}@keyframes dial-pulse{50%{letter-spacing:.18em;opacity:.75}}.shake{animation:hard-shake .4s ease!important}@keyframes hard-shake{10%,90%{transform:translate(-3px)}20%,80%{transform:translate(5px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;isolation:isolate}.keypad.keypad-live .key{animation:key-enter .55s cubic-bezier(.2,1.4,.3,1) both;animation-delay:calc(var(--i, 0) * 40ms)}@keyframes key-enter{0%{opacity:0;transform:translateY(18px) scale(.7) rotateX(25deg);filter:blur(4px)}}.key{position:relative;overflow:hidden;min-height:64px;background:linear-gradient(180deg,#103038f2,#06141af2);border:1px solid rgba(0,245,212,.2);color:var(--ink);display:grid;place-items:center;gap:2px;padding:8px;transform-style:preserve-3d}.key-halo{position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background:conic-gradient(from calc(var(--i, 0) * 30deg),transparent,rgba(0,245,212,.22),transparent 40%,rgba(184,255,60,.18),transparent 70%);opacity:0;animation:key-orbit 7s linear infinite;animation-delay:calc(var(--i, 0) * -.4s);pointer-events:none}.keypad.keypad-live .key-halo{opacity:.35}.key:hover .key-halo,.key.key-hot .key-halo{opacity:.85;animation-duration:2.2s}@keyframes key-orbit{to{transform:rotate(360deg)}}.key-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%);transform:translate(-120%);pointer-events:none}.key:hover .key-shine,.key.key-hot .key-shine{animation:key-shine-sweep .7s ease}@keyframes key-shine-sweep{to{transform:translate(120%)}}.key .digit{position:relative;z-index:1;font-family:var(--font-display);font-size:1.35rem;line-height:1;transition:text-shadow .2s,transform .2s,color .2s}.key .letters{position:relative;z-index:1;font-size:.62rem;letter-spacing:.16em;color:var(--muted)}.key:hover .digit,.key.key-hot .digit{color:var(--cyan);text-shadow:0 0 16px rgba(0,245,212,.75);transform:scale(1.08)}.key-wide{grid-column:1 / -1}.key.tap{animation:key-bounce .35s ease;border-color:var(--cyan);box-shadow:0 0 22px #00f5d473}.key.tap-spin{animation:key-spin-pop .45s cubic-bezier(.2,1.4,.3,1);border-color:var(--lime);box-shadow:0 0 28px #b8ff3c8c}.key.tap-glitch{animation:key-glitch .4s steps(2,end);border-color:var(--amber);box-shadow:0 0 24px #ffd60a80}.key.tap-boom{animation:key-boom .5s ease;border-color:#7ef9ff;box-shadow:0 0 36px #00f5d4b3,inset 0 0 24px #00f5d440}.key.wave-hit{border-color:#00f5d48c;box-shadow:0 0 16px #00f5d447}.key.wave-hit .digit{color:var(--cyan)}@keyframes key-bounce{0%{transform:scale(1)}40%{transform:scale(.88)}to{transform:scale(1)}}@keyframes key-spin-pop{0%{transform:scale(1) rotate(0)}45%{transform:scale(.86) rotate(-8deg)}to{transform:scale(1) rotate(0)}}@keyframes key-glitch{0%{transform:translate(0);filter:hue-rotate(0deg)}20%{transform:translate(-3px,1px) skew(-4deg);filter:hue-rotate(40deg)}40%{transform:translate(3px,-2px) skew(4deg);filter:hue-rotate(-30deg)}60%{transform:translate(-2px) scale(1.04);filter:hue-rotate(70deg)}to{transform:none;filter:none}}@keyframes key-boom{0%{transform:scale(1)}30%{transform:scale(.82)}55%{transform:scale(1.08)}to{transform:scale(1)}}.ripple{position:absolute;inset:50% auto auto 50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#00f5d473;animation:ripple .55s ease-out forwards;pointer-events:none;z-index:2}@keyframes ripple{to{transform:scale(14);opacity:0}}.key-spark{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:hsl(var(--hue, 170) 100% 65%);box-shadow:0 0 10px hsl(var(--hue, 170) 100% 60%);animation:spark-fly .65s ease-out forwards;pointer-events:none;z-index:5}@keyframes spark-fly{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--sx),var(--sy)) scale(.15);opacity:0}}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ctrl{display:grid;gap:4px;place-items:center;padding:12px 6px;background:#00000059;border:1px solid rgba(255,255,255,.08);color:var(--ink);font-size:.72rem}.ctrl .icon{width:18px;height:18px;display:block;border-radius:50%;position:relative}.ctrl .icon-call,.ctrl .icon-answer{background:currentColor;clip-path:polygon(30% 10%,70% 10%,85% 35%,85% 70%,55% 100%,45% 100%,15% 70%,15% 35%);border-radius:0}.ctrl .icon-hangup{background:currentColor;transform:rotate(135deg);clip-path:polygon(30% 10%,70% 10%,85% 35%,85% 70%,55% 100%,45% 100%,15% 70%,15% 35%);border-radius:0}.ctrl .icon-mute:before,.ctrl .icon-mute:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border:2px solid currentColor;border-radius:40% 40% 45% 45%}.ctrl .icon-mute:after{inset:auto 3px 0;height:5px;border:none;border-bottom:2px solid currentColor;border-radius:0}.ctrl.call{border-color:#b8ff3c73;color:var(--lime)}.ctrl.hangup{border-color:#ff4d6d73;color:#ffb3c1}.ctrl.answer{border-color:#00f5d473;color:var(--cyan)}.ctrl.mute.active{background:#ffd60a26;border-color:var(--amber);color:var(--amber)}.ctrl.pulse-hot{animation:answer-pulse .7s ease-in-out infinite}@keyframes answer-pulse{50%{transform:scale(1.06);box-shadow:0 0 24px #00f5d48c}}.transfer-panel{position:relative;overflow:hidden;border-radius:16px;padding:14px;border:1px dashed rgba(255,214,10,.35);background:#ffd60a0a;transition:border-color .25s,box-shadow .25s,background .25s}.transfer-panel.armed{border-style:solid;border-color:#ffd60aa6;box-shadow:0 0 28px #ffd60a2e;animation:armed-glow 1.8s ease-in-out infinite}@keyframes armed-glow{50%{box-shadow:0 0 40px #ffd60a59}}.transfer-badge{font-family:var(--font-display);font-size:.65rem;letter-spacing:.14em;padding:4px 8px;border-radius:999px;color:#201800;background:var(--amber);box-shadow:0 0 16px #ffd60a73}.transfer-row{display:grid;grid-template-columns:1fr auto;gap:8px}.transfer-btn{position:relative;overflow:hidden;min-width:118px;padding:0 16px;font-weight:700;color:#201800;background:linear-gradient(135deg,var(--amber),#ff9f1c);box-shadow:0 0 20px #ffd60a59}.transfer-btn-label{position:relative;z-index:1}.transfer-vortex{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.55),transparent 35%);opacity:0}.transfer-btn.firing .transfer-vortex,.transfer-panel.vortex .transfer-vortex{opacity:1;animation:vortex .7s linear infinite}.transfer-panel.vortex{animation:panel-vortex .9s ease}@keyframes vortex{to{transform:rotate(360deg)}}@keyframes panel-vortex{0%{filter:hue-rotate(0deg) saturate(1)}40%{filter:hue-rotate(80deg) saturate(1.8);transform:scale(1.02)}to{filter:hue-rotate(0deg) saturate(1)}}.transfer-note{margin:10px 0 0;font-size:.78rem;color:var(--muted)}.shard{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;background:var(--amber);border-radius:2px;box-shadow:0 0 10px var(--amber);animation:shard-fly var(--d, .5s) ease-out forwards;transform:rotate(var(--a)) translateY(0);pointer-events:none}@keyframes shard-fly{to{transform:rotate(var(--a)) translateY(-90px) scale(.2);opacity:0}}.log-panel{border-top:1px solid rgba(0,245,212,.12);padding-top:10px}.event-log{list-style:none;margin:0;padding:0;max-height:160px;overflow:auto;display:grid;gap:6px}.event-log li{display:grid;grid-template-columns:auto 1fr;gap:8px;font-size:.78rem;padding:6px 8px;border-radius:8px;background:#00000047;animation:log-in .35s ease}@keyframes log-in{0%{opacity:0;transform:translate(-8px)}}.event-log time{color:var(--muted);font-variant-numeric:tabular-nums}.event-log li[data-level=error]{border-left:3px solid var(--coral)}.event-log li[data-level=warn]{border-left:3px solid var(--amber)}.event-log li[data-level=ok]{border-left:3px solid var(--lime)}.event-log li[data-level=info]{border-left:3px solid var(--cyan)}body[data-call-state=ringing] .orb-a,body[data-call-state=calling] .orb-a{animation-duration:2.2s}body[data-call-state=in-call] .brand-mark{color:var(--lime);text-shadow:0 0 24px rgba(184,255,60,.65),0 0 60px rgba(184,255,60,.25)}body[data-call-state=transferring] .aurora{animation-duration:4s;opacity:1}@media(max-width:420px){.controls{grid-template-columns:repeat(2,1fr)}.transfer-row{grid-template-columns:1fr}}
