@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap";:root{--bg: #0c0f14;--card: #151a22;--text: #e8eaef;--muted: #8b939c;--accent: #3d8bfd;--accent-dim: #1a4fa8;--ok: #3dd68c;--radius: 20px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:IBM Plex Sans Arabic,system-ui,sans-serif;line-height:1.5;color:var(--text);background:var(--bg);min-height:100vh;background-image:radial-gradient(ellipse 140% 70% at 50% -10%,#0f2040 0%,transparent 60%),radial-gradient(ellipse 80% 50% at 80% 100%,#0a1a30 0%,transparent 55%)}.page{position:relative;max-width:400px;margin:0 auto;padding:3.5rem 1.25rem 2rem;display:flex;flex-direction:column;align-items:center;gap:2rem}.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.hero-brand{display:flex;flex-direction:column;align-items:center;gap:.85rem}.hero-logo{width:120px;height:auto;max-height:72px;object-fit:contain;display:block}.hero h1{font-size:1.65rem;font-weight:600;line-height:1.25;margin:0;color:var(--text)}.hero-sub{font-size:.95rem;color:var(--muted);margin:0;max-width:22rem;line-height:1.5}.call-card{width:100%;background:var(--card);border-radius:var(--radius);border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 60px #00000073;padding:2.5rem 1.5rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.call-status{font-size:1.1rem;font-weight:500;color:var(--muted);letter-spacing:.01em;font-variant-numeric:tabular-nums}.call-status.status-on{color:var(--ok)}.call-error{font-size:.85rem;color:#f5a8a8;background:#e85d5d1a;border-radius:10px;padding:.5rem .75rem;text-align:center;width:100%}.controls{display:flex;gap:1rem;align-items:center}.controls-mobile{width:100%;flex-direction:column}.controls-mobile .btn-mute,.controls-mobile .btn-hangup{width:100%;max-width:320px}.btn-call{min-width:140px;padding:.85rem 1.35rem;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#3d8bfd 0%,var(--accent-dim) 100%);box-shadow:0 6px 24px #3d8bfd73}.btn-call:hover:not(:disabled){filter:brightness(1.06)}.btn-call:disabled{opacity:.45;cursor:not-allowed}.btn-call.loading{background:#ffffff14;box-shadow:none;color:var(--muted)}.btn-call-mobile{width:100%;max-width:320px;padding:1rem 1.5rem;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:1.05rem;font-weight:600;color:#fff}.btn-call-mobile.ready{background:linear-gradient(135deg,#3d8bfd 0%,var(--accent-dim) 100%);box-shadow:0 6px 24px #3d8bfd73}.btn-call-mobile.loading{background:#ffffff14;color:var(--muted);cursor:default}.btn-call-mobile:disabled{opacity:.55;cursor:not-allowed}.btn-hangup{min-width:120px;padding:.75rem 1.1rem;border-radius:14px;border:none;cursor:pointer;font-family:inherit;font-size:.88rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#e85d5d,#b83030);box-shadow:0 6px 24px #e85d5d66}.btn-hangup:hover{filter:brightness(1.08)}.btn-mute{padding:.65rem .95rem;min-height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;background:#ffffff0f;color:var(--text)}.btn-mute:hover{background:#ffffff1c}.btn-mute.muted{background:#e85d5d33;border-color:#e85d5d80}.output-row{display:flex;gap:.5rem;width:100%;max-width:320px;margin-top:.25rem}.btn-output{flex:1;padding:.65rem .5rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:var(--muted);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer}.btn-output.active{border-color:#3d8bfd8c;background:#3d8bfd2e;color:var(--text)}.output-hint{font-size:.75rem;color:var(--muted);text-align:center;max-width:280px;line-height:1.45}.btn-retry{background:none;border:none;cursor:pointer;font-family:inherit;font-size:.82rem;color:var(--accent);padding:.2rem 0}.btn-retry:hover{text-decoration:underline}.primer{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:.5rem 0}.primer-text{font-size:.9rem;color:var(--muted);line-height:1.5}.btn-primer{padding:.75rem 1.5rem;border-radius:12px;border:none;cursor:pointer;font-family:inherit;font-size:.95rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dim) 100%);box-shadow:0 4px 16px #3d8bfd59}.btn-primer:hover{filter:brightness(1.06)}.remote-audio{position:absolute;width:1px;height:1px;opacity:.02;pointer-events:none;left:0;top:0}