*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--brand:#14b8a6;--brand-dark:#0d9488;--bg:#0f172a;--surface:#1e293b;--surface2:#263347;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--phone-w:320px;--phone-radius:40px;--screen-h:240px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html,body{background:var(--bg);color:var(--text);min-height:100dvh}.app-shell{flex-direction:column;align-items:center;gap:.75rem;min-height:100dvh;padding:1rem .75rem 3rem;display:flex}.top-bar{width:100%;max-width:var(--phone-w);justify-content:space-between;align-items:center;padding:0 .25rem;display:flex}.app-title{color:var(--text);letter-spacing:-.02em;font-size:1.1rem;font-weight:800}.app-title span{color:var(--brand)}.top-actions{gap:.5rem;display:flex}.icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:10px;align-items:center;padding:.45rem;transition:background .15s,color .15s;display:flex}.icon-btn:hover,.icon-btn[aria-pressed=true]{background:var(--surface2);color:var(--brand)}.config-drawer{width:100%;max-width:var(--phone-w);background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:.65rem;padding:1rem;animation:.18s slideDown;display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.config-row{flex-direction:column;gap:.3rem;display:flex}.config-row label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.68rem;font-weight:700}.config-row input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:8px;width:100%;padding:.45rem .65rem;font-family:ui-monospace,monospace;font-size:.9rem}.config-row input:focus{border-color:var(--brand);outline:none}.config-meta{color:var(--text-muted);font-size:.7rem}.config-meta code{color:var(--brand);word-break:break-all;font-family:ui-monospace,monospace;font-size:.68rem}.phone-frame{width:var(--phone-w);border-radius:var(--phone-radius);background:linear-gradient(160deg,#1c1c2e 0%,#0d0d1a 100%);border:1.5px solid #2d2d45;flex-direction:column;transition:box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0a0a14,0 24px 60px #000000b3,inset 0 1px #ffffff0d}.phone-frame.phone-active{box-shadow:0 0 0 1px #0a0a14,0 24px 60px #000000b3,0 0 30px #14b8a61f,inset 0 1px #ffffff0d}.phone-frame.phone-ended{box-shadow:0 0 0 1px #0a0a14,0 24px 60px #000000b3,0 0 30px #ef44441a,inset 0 1px #ffffff0d}.phone-frame:before{content:"";background:#2a2a40;border-radius:2px 0 0 2px;width:3px;height:32px;position:absolute;top:80px;left:-3px;box-shadow:0 44px #2a2a40}.phone-frame:after{content:"";background:#2a2a40;border-radius:0 2px 2px 0;width:3px;height:56px;position:absolute;top:100px;right:-3px}.phone-notch{justify-content:center;align-items:center;gap:8px;height:28px;padding-top:4px;display:flex}.notch-speaker{background:#0d0d1a;border-radius:3px;width:52px;height:5px;box-shadow:inset 0 1px 2px #000c}.notch-camera{background:#1a1a2e;border:1px solid #2d2d45;border-radius:50%;width:8px;height:8px}.status-bar{color:#fff9;justify-content:space-between;align-items:center;padding:0 14px 4px;font-size:.65rem;font-weight:600;display:flex}.status-signal{align-items:center;gap:3px;display:flex}.status-time{color:#fffc;font-size:.72rem;font-weight:700}.status-battery{align-items:center;display:flex}.ussd-screen{min-height:var(--screen-h);max-height:calc(var(--screen-h) + 60px);scroll-behavior:smooth;background:#020912;border:1px solid #1a2535;border-radius:14px;flex-direction:column;gap:8px;margin:0 10px;padding:12px 14px;display:flex;position:relative;overflow-y:auto;box-shadow:inset 0 2px 8px #00000080}.ussd-screen::-webkit-scrollbar{width:3px}.ussd-screen::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.idle-state{color:#fff3;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;padding:1rem 0;display:flex}.idle-icon{opacity:.5}.idle-code{color:#ffffff59;letter-spacing:.06em;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:700}.idle-hint{color:#fff3;font-size:.72rem}.screen-badge{text-transform:uppercase;letter-spacing:.08em;border-radius:4px;align-self:flex-start;align-items:center;gap:4px;padding:2px 7px;font-size:.6rem;font-weight:700;display:inline-flex}.badge-con{color:#4ade80;background:#22c55e26;border:1px solid #22c55e40}.badge-end{color:#f87171;background:#ef444426;border:1px solid #ef444440}.screen-text{color:#a8f3c8;white-space:pre-wrap;word-break:break-word;text-shadow:0 0 8px #4ade8040;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;line-height:1.55}.screen-error{color:#f87171;background:#ef44441a;border:1px solid #ef444433;border-radius:6px;padding:6px 10px;font-size:.75rem}.screen-loading{color:var(--brand);align-self:center;gap:4px;margin-top:4px;font-size:1.8rem;line-height:1;display:flex}.dot-1,.dot-2,.dot-3{opacity:0;animation:1.2s infinite blink}.dot-2{animation-delay:.2s}.dot-3{animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:0}40%{opacity:1}}.reply-zone{align-items:center;gap:6px;margin:8px 10px 0;display:flex}.phone-text-input{background:var(--surface);border:1px solid var(--border);color:var(--text);letter-spacing:.04em;border-radius:10px;flex:1;min-width:0;padding:.5rem .7rem;font-family:ui-monospace,monospace;font-size:.9rem}.phone-text-input:focus{border-color:var(--brand);background:var(--surface2);outline:none}.phone-text-input::placeholder{color:var(--text-muted);letter-spacing:0}.phone-text-input:disabled{opacity:.4}.send-btn{background:var(--brand);color:#fff;cursor:pointer;font:inherit;letter-spacing:.02em;border:none;border-radius:10px;align-items:center;padding:.5rem .95rem;font-size:.8rem;font-weight:700;transition:background .15s,opacity .15s;display:flex}.send-btn:hover:not(:disabled){background:var(--brand-dark)}.send-btn:disabled{opacity:.3;cursor:not-allowed}.keypad-toolbar{justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 0;display:flex}.kp-tool{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;min-width:52px;height:34px;font:inherit;letter-spacing:.04em;border-radius:10px;justify-content:center;align-items:center;font-size:.8rem;font-weight:800;transition:background .12s,color .12s,opacity .12s;display:flex}.kp-tool:hover:not(:disabled){background:var(--surface2)}.kp-tool:active:not(:disabled){transform:translateY(1px)}.kp-tool:disabled{opacity:.3;cursor:not-allowed}.mode-toggle{color:var(--brand)}.backspace-key{color:var(--text-muted)}.kp-mode-label{text-align:center;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);flex:1;font-size:.62rem;font-weight:700}.phone-keypad{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px 6px;display:grid}.phone-key{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:10px 4px 8px;transition:background .1s,transform .1s,box-shadow .1s;display:flex;box-shadow:0 2px #0006}.phone-key:hover:not(:disabled){background:var(--surface2)}.phone-key:active:not(:disabled){background:#2e4060;transform:translateY(1px);box-shadow:0 1px #0006}.phone-key:disabled{opacity:.3;cursor:not-allowed}.key-special{background:#141e30}.key-zero{grid-column:2}.key-main{color:var(--text);font-size:1.15rem;font-weight:700;line-height:1}.key-sub{letter-spacing:.08em;color:var(--text-muted);font-size:.5rem;font-weight:600;line-height:1}.keypad-abc .key-main{color:var(--text-muted);font-size:.78rem}.keypad-abc .key-sub{letter-spacing:.06em;color:var(--text);order:-1;font-size:.82rem;font-weight:800}.keypad-abc .key-special .key-main{color:var(--text);font-size:1.15rem}.call-row{justify-content:center;align-items:center;gap:10px;padding:6px 14px 10px;display:flex}.call-btn{font:inherit;cursor:pointer;border:none;border-radius:50px;flex:1;justify-content:center;align-items:center;gap:6px;padding:.6rem 1rem;font-size:.8rem;font-weight:700;transition:opacity .15s,transform .1s,filter .15s;display:flex;box-shadow:0 3px 8px #0006}.call-btn:active:not(:disabled){transform:scale(.96)}.call-btn:disabled{opacity:.35;cursor:not-allowed}.call-btn--start{color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);flex:2}.call-btn--start:hover:not(:disabled){filter:brightness(1.1)}.call-btn--new{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:50%;flex:0 0 44px;padding:.6rem}.call-btn--new:hover{background:var(--surface2);color:var(--text)}.call-btn--end{color:#fff;background:linear-gradient(135deg,#ef4444,#b91c1c);flex:2}.call-btn--end:hover:not(:disabled){filter:brightness(1.1)}.phone-home-bar{justify-content:center;width:100%;padding:8px 0 10px;display:flex}.phone-home-bar:after{content:"";background:#ffffff1f;border-radius:2px;width:100px;height:4px;display:block}.session-meta{color:var(--text-muted);text-align:center;font-size:.68rem}.session-meta code{color:var(--brand);font-family:ui-monospace,monospace;font-size:.65rem}.log-drawer{width:100%;max-width:var(--phone-w);background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;gap:2px;max-height:160px;padding:.75rem;font-family:ui-monospace,monospace;font-size:.68rem;animation:.18s slideDown;display:flex;overflow-y:auto}.log-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px;font-size:.65rem;font-weight:700}.log-empty{color:var(--text-muted)}.log-line{word-break:break-all;padding:1px 0}.log-out{color:#94a3b8}.log-in{color:#4ade80}.log-err{color:#f87171}