@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Variable.woff2) format("woff2 supports variations"),url(/fonts/Vazirmatn-Variable.woff2) format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}:root{--bg: #ffffff;--bg-2: #f4f5f7;--text: #14161a;--text-2: #5b6270;--border: #e2e5ea;--accent: #2f6feb;--success: #1a8a45;--danger: #cf3222;--radius: 16px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0f1115;--bg-2: #171a21;--text: #eef1f5;--text-2: #98a1b0;--border: #262b34;--accent: #5a8cf5;--success: #35b56a;--danger: #e5584a}}:root[data-theme=dark]{--bg: #0f1115;--bg-2: #171a21;--text: #eef1f5;--text-2: #98a1b0;--border: #262b34;--accent: #5a8cf5;--success: #35b56a;--danger: #e5584a}*{box-sizing:border-box}html,body,#root{block-size:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,Arial,sans-serif;font-size:max(16px,1rem);-webkit-tap-highlight-color:transparent}.ltr{direction:ltr;unicode-bidi:isolate}.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}.screen{display:flex;flex-direction:column;min-block-size:100dvh;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));gap:1rem;max-inline-size:30rem;margin-inline:auto}.logo{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--accent);margin-block:2rem 1rem}.logo-text{font-size:1.5rem;font-weight:700;color:var(--text)}.login{justify-content:center}.login-form{display:flex;flex-direction:column;gap:1rem}.login-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;color:var(--text-2)}input{inline-size:100%;min-block-size:48px;padding:0 .9rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-2);color:var(--text);font:inherit}input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.link{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:.5rem}.hint{color:var(--text-2);font-size:.85rem;text-align:center;line-height:1.7}.btn{min-block-size:56px;border:0;border-radius:var(--radius);font:inherit;font-weight:600;cursor:pointer;background:var(--bg-2);color:var(--text)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary,.btn.call{background:var(--accent);color:#fff}.btn.answer{background:var(--success);color:#fff}.btn.hangup{background:var(--danger);color:#fff}.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text-2)}.status-bar{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-2)}.dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--text-2);flex:none}.dot.on{background:var(--success)}.dot.bad{background:var(--danger)}.status-text{flex:1}.ext{color:var(--text);font-weight:600}.number-display{display:flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:3.5rem;font-size:2rem;font-weight:600;overflow-x:auto;white-space:nowrap}.backspace{background:none;border:0;color:var(--text-2);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.key{min-block-size:68px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-2);color:var(--text);font:inherit;font-size:1.6rem;cursor:pointer}.key:active{background:var(--border)}.quick-row{display:flex;gap:.75rem}.quick-row .btn{flex:1;min-block-size:48px;font-weight:500}.call{justify-content:space-between;text-align:center}.peer{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-block-start:3rem}.avatar{inline-size:88px;block-size:88px;border-radius:50%;background:var(--bg-2);color:var(--accent);display:grid;place-items:center;font-size:2.4rem;font-weight:700}.peer-name{margin:.5rem 0 0;font-size:1.5rem}.peer-number{margin:0;color:var(--text-2)}.call-state{margin:.25rem 0 0;color:var(--text-2);font-variant-numeric:tabular-nums}.call.ringing .avatar{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@media(prefers-reduced-motion:reduce){.call.ringing .avatar{animation:none}}.call-tools{display:flex;gap:.75rem}.tool{flex:1;min-block-size:48px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-2);font:inherit;cursor:pointer}.tool.active{background:var(--bg-2);color:var(--text);border-color:var(--accent)}.keypad.in-call .key{min-block-size:54px;font-size:1.3rem}.call-actions{display:flex;gap:.75rem}.call-actions .btn{flex:1}
