:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--bg-primary: #0f172a;--bg-surface: #1e293b;--bg-surface-elevated: #334155;--bg-glass: rgba(30, 41, 59, .85);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #3b82f6;--accent-hover: #2563eb;--accent-glow: rgba(59, 130, 246, .35);--success: #10b981;--success-glow: rgba(16, 185, 129, .35);--warning: #f59e0b;--warning-glow: rgba(245, 158, 11, .35);--danger: #ef4444;--danger-hover: #dc2626;--danger-glow: rgba(239, 68, 68, .35);--border-subtle: rgba(255, 255, 255, .08);--border-focus: #3b82f6;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 36px rgba(0, 0, 0, .5);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px) 16px;overflow-x:hidden}#app{width:100%;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.portal-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden}.portal-header{display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--border-subtle);padding-bottom:16px}.portal-brand{display:flex;align-items:center;justify-content:space-between}.portal-logo{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);display:flex;align-items:center;gap:8px}.portal-logo .logo-badge{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;font-size:.7rem;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;font-weight:800}.center-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);line-height:1.3}.access-point-badge{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-secondary)}.access-point-badge .dot{width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--success);box-shadow:0 0 8px var(--success-glow)}.countdown-container{display:flex;flex-direction:column;gap:6px;background:#0f172a99;padding:10px 14px;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.countdown-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-secondary)}.countdown-seconds{font-family:var(--font-mono);font-weight:700;color:var(--accent-primary)}.countdown-bar-bg{width:100%;height:6px;background:var(--bg-surface-elevated);border-radius:var(--radius-full);overflow:hidden}.countdown-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),#60a5fa);transition:width 1s linear,background-color .3s ease;border-radius:var(--radius-full)}.countdown-bar-fill.warning{background:linear-gradient(90deg,var(--warning),#fbbf24)}.countdown-bar-fill.danger{background:linear-gradient(90deg,var(--danger),#f87171)}.dial-prompt-box{background:#3b82f614;border-left:3px solid var(--accent-primary);padding:10px 14px;border-radius:var(--radius-sm);font-size:.9rem;color:var(--text-primary);line-height:1.4}.dial-display{background:#090d16;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;min-height:64px}.dial-display-text{font-family:var(--font-mono);font-size:2rem;font-weight:700;letter-spacing:.1em;color:var(--text-primary)}.dial-display-placeholder{color:var(--text-muted);font-family:var(--font-sans);font-size:1.1rem;letter-spacing:normal}.dial-display-cursor{display:inline-block;width:2px;height:1.8rem;background-color:var(--accent-primary);margin-left:4px;animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.keypad-btn{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:1.6rem;font-weight:600;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.keypad-btn:active{background:#475569;transform:scale(.96);border-color:var(--accent-primary)}.keypad-btn.action-btn{font-family:var(--font-sans);font-size:.95rem;font-weight:500;color:var(--text-secondary)}.keypad-btn.action-btn:hover{color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 4px 14px var(--accent-glow);transition:all .2s ease}.btn-primary:active{transform:scale(.98);box-shadow:0 2px 8px var(--accent-glow)}.btn-primary:disabled{background:var(--bg-surface-elevated);color:var(--text-muted);box-shadow:none;cursor:not-allowed;transform:none}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 4px 14px var(--danger-glow);transition:all .2s ease}.btn-danger:active{transform:scale(.98)}.btn-secondary{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-md);font-size:1rem;font-weight:500;padding:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .15s ease}.btn-secondary:hover{background:#475569}.calling-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0;gap:16px}.pulse-ring-container{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}.pulse-circle{width:72px;height:72px;border-radius:var(--radius-full);background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;z-index:2;box-shadow:0 0 20px var(--accent-glow)}.pulse-circle.accepted{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 0 20px var(--success-glow)}.pulse-ring{position:absolute;top:0;left:0;width:96px;height:96px;border-radius:var(--radius-full);border:2px solid var(--accent-primary);animation:pulseRipple 1.8s cubic-bezier(.24,0,.38,1) infinite;z-index:1}@keyframes pulseRipple{0%{transform:scale(.6);opacity:.8}to{transform:scale(1.4);opacity:0}}.calling-status-title{font-size:1.35rem;font-weight:600;text-align:center;color:var(--text-primary)}.calling-status-subtitle{font-size:.95rem;color:var(--text-secondary);text-align:center}.notice-box{background:#0f172a80;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px 16px;font-size:.85rem;color:var(--text-secondary);text-align:center;line-height:1.4}.warning-box{background:#f59e0b1f;border:1px solid var(--warning);border-radius:var(--radius-md);padding:10px 14px;font-size:.85rem;color:#fde68a;text-align:center;line-height:1.4}.error-icon-box{width:64px;height:64px;border-radius:var(--radius-full);background:#ef444426;border:1px solid var(--danger);color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto}.error-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);text-align:center}.error-description{font-size:.95rem;color:var(--text-secondary);text-align:center;line-height:1.5}.spinner{width:48px;height:48px;border:4px solid var(--bg-surface-elevated);border-top-color:var(--accent-primary);border-radius:var(--radius-full);animation:spin .9s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.portal-footer{text-align:center;font-size:.75rem;color:var(--text-muted);padding:8px}