/* ===== BLASTER Main Styles ===== */
        :root {
            --bg-primary: #06080d;
            --bg-secondary: #0d1117;
            --bg-tertiary: #161b22;
            --bg-hover: #1c2333;
            --accent-primary: #00f0ff;
            --accent-success: #00e676;
            --accent-warning: #ff9100;
            --accent-danger: #ff1744;
            --accent-info: #00f0ff;
            --accent-purple: #b388ff;
            --text-primary: #e6edf3;
            --text-secondary: #7d8590;
            --text-muted: #484f58;
            --bg-elevated: #1a2030;
            --border: rgba(0,240,255,0.08);
            --shadow: rgba(0,0,0,0.5);
            --glow: 0 0 15px rgba(0,240,255,0.15);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; background: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; }
        .navbar { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px var(--shadow); }
        .navbar-brand { font-size: 19px; font-weight: 900; letter-spacing: 3px; overflow:visible; }
        .navbar-status { display: flex; align-items: center; gap: 24px; }
        .status-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(0, 212, 170, 0.1); border-radius: 20px; border: 1px solid rgba(0, 212, 170, 0.3); }
        .credit-badge { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(0, 212, 170, 0.08); border-radius: 20px; border: 1px solid rgba(0, 212, 170, 0.25); font-size: 13px; font-weight: 700; color: var(--accent-success); transition: all 300ms ease; }
        .credit-badge.low { background: rgba(255, 165, 0, 0.1); border-color: rgba(255, 165, 0, 0.4); color: var(--accent-warning); }
        .credit-badge.critical { background: rgba(255, 51, 102, 0.1); border-color: rgba(255, 51, 102, 0.4); color: var(--accent-danger); }
        .credit-badge .credit-icon { font-size: 14px; }
        @keyframes credit-flash { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
        .credit-flash { animation: credit-flash 0.4s ease; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-success); box-shadow: 0 0 10px var(--accent-success); animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } }
        .btn { padding: 8px 16px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 200ms ease; display: inline-flex; align-items: center; gap: 8px; }
        .btn-primary { background: linear-gradient(135deg, var(--accent-info) 0%, var(--accent-purple) 100%); color: white; }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3); }
        .btn-success { background: linear-gradient(135deg, var(--accent-success) 0%, #00a676 100%); color: white; }
        .btn-warning { background: linear-gradient(135deg, var(--accent-warning) 0%, #ff8800 100%); color: white; }
        .btn-danger { background: linear-gradient(135deg, var(--accent-danger) 0%, #cc0044 100%); color: white; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-sm { padding: 4px 10px; font-size: 11px; }
        .container { max-width: 1600px; margin: 0 auto; padding: 32px; }
        .back-btn { background: var(--bg-tertiary); color: var(--text-secondary); margin-bottom: 20px; }
        .back-btn:hover { background: var(--bg-hover); color: white; }
        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 24px; }
        .kpi-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: all 200ms ease; }
        .kpi-card:hover { border-color: var(--accent-info); transform: translateY(-2px); box-shadow: 0 8px 20px var(--shadow); }
        .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 8px; }
        .kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -1px; }
        .kpi-value.success { color: var(--accent-success); }
        .kpi-value.warning { color: var(--accent-warning); }
        .kpi-value.danger { color: var(--accent-danger); }
        .kpi-value.info { color: var(--accent-info); }
        .section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
        .section-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
        .section-title { font-size: 16px; font-weight: 700; }
        .tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); }
        .tab { padding: 14px 20px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all 200ms; }
        .tab:hover { color: var(--text-primary); }
        .tab.active { color: var(--accent-info); border-bottom-color: var(--accent-info); }
        .tab-content { display: none; padding: 24px; }
        .tab-content.active { display: block; }
        .progress-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; margin: 8px 0; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-info), var(--accent-purple)); transition: width 400ms ease; }
        .table-container { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; }
        thead { background: var(--bg-tertiary); }
        th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
        tbody tr { border-bottom: 1px solid var(--border); transition: all 200ms; cursor: pointer; }
        tbody tr:hover { background: var(--bg-hover); }
        tbody tr.new-call { animation: slideIn 400ms ease-out; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        td { padding: 14px 16px; font-size: 13px; }
        .phone-number { font-family: 'Monaco', monospace; font-weight: 600; }
        .state-badge { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
        .state-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
        .state-queued { background: rgba(90, 100, 128, 0.2); color: var(--text-secondary); }
        .state-originating { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); }
        .state-dialing { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(168, 85, 247, 0.3)); color: var(--accent-purple); animation: pulse 2s infinite; }
        .state-ringing { background: linear-gradient(135deg, rgba(0, 168, 255, 0.3), rgba(0, 180, 255, 0.3)); color: var(--accent-info); }
        .state-answered, .state-completed { background: linear-gradient(135deg, rgba(0, 212, 170, 0.3), rgba(0, 166, 118, 0.3)); color: var(--accent-success); }
        .state-ivr_playing { background: linear-gradient(135deg, rgba(0, 168, 255, 0.3), rgba(139, 92, 246, 0.3)); color: #7dd3fc; }
        .state-dtmf_wait { background: rgba(255, 165, 0, 0.2); color: var(--accent-warning); animation: pulse 1.5s infinite; }
        .state-dtmf_received { background: rgba(0, 212, 170, 0.3); color: var(--accent-success); }
        .state-transferring { background: rgba(139, 92, 246, 0.3); color: var(--accent-purple); }
        .state-agent_ringing { background: rgba(255, 165, 0, 0.3); color: var(--accent-warning); }
        .state-agent_connected { background: linear-gradient(135deg, rgba(0, 212, 170, 0.4), rgba(0, 166, 118, 0.4)); color: var(--accent-success); }
        .state-no_dtmf { background: rgba(255, 165, 0, 0.15); color: var(--accent-warning); }
        .state-failed { background: rgba(255, 51, 102, 0.2); color: var(--accent-danger); }
        .state-timeout { background: rgba(90, 100, 128, 0.2); color: var(--text-secondary); }
        .state-no_answer, .state-busy { background: rgba(255, 165, 0, 0.2); color: var(--accent-warning); }
        .state-voicemail { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); }
        .status-created { background: rgba(90, 100, 128, 0.2); color: var(--text-secondary); }
        .status-running { background: rgba(0, 212, 170, 0.2); color: var(--accent-success); }
        .status-paused { background: rgba(255, 165, 0, 0.2); color: var(--accent-warning); }
        .status-stopped { background: rgba(90, 100, 128, 0.2); color: var(--text-muted); }
        .status-finished { background: rgba(0, 212, 170, 0.2); color: var(--accent-success); }
        .duration { font-family: 'Monaco', monospace; font-weight: 600; color: var(--text-secondary); }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(10, 14, 39, 0.95); backdrop-filter: blur(10px); animation: fadeIn 200ms ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .modal-content { background: var(--bg-secondary); margin: 3% auto; padding: 0; border: 1px solid var(--border); border-radius: 16px; max-width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px var(--shadow); animation: slideUp 300ms ease-out; }
        @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-header { padding: 24px 32px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
        .close-btn { background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
        .close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .modal-body { padding: 24px 32px; }
        .status-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 24px; padding: 20px; background: var(--bg-tertiary); border-radius: 12px; }
        .status-item .label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
        .status-item .value { font-size: 16px; font-weight: 600; }
        .timeline-section { margin-bottom: 24px; }
        .timeline-section h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; color: var(--text-secondary); }
        .timeline { position: relative; padding-left: 40px; }
        .timeline::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--border); }
        .timeline-item { position: relative; padding: 12px 0; display: grid; grid-template-columns: 80px 140px 40px 1fr; gap: 12px; align-items: center; }
        .timeline-item::before { content: ''; position: absolute; left: -34px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-primary); border: 2px solid var(--border); }
        .timeline-item.success::before { border-color: var(--accent-success); background: var(--accent-success); }
        .timeline-item.warning::before { border-color: var(--accent-warning); background: var(--accent-warning); }
        .timeline-item.error::before { border-color: var(--accent-danger); background: var(--accent-danger); }
        .time { font-family: 'Monaco', monospace; font-size: 12px; color: var(--text-secondary); }
        .tech-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px; background: var(--bg-tertiary); border-radius: 8px; margin-bottom: 12px; }
        .tech-header:hover { background: var(--bg-hover); }
        .tech-content { display: none; padding: 16px; background: var(--bg-primary); border-radius: 8px; }
        .tech-table { width: 100%; border-collapse: collapse; }
        .tech-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
        .tech-table td:first-child { color: var(--text-secondary); width: 160px; }
        .recommendation-card { display: flex; gap: 16px; padding: 16px; border-radius: 8px; background: rgba(0, 212, 170, 0.1); border-left: 4px solid var(--accent-success); }
        .recommendation-card.warning { background: rgba(255, 165, 0, 0.1); border-left-color: var(--accent-warning); }
        .recommendation-card.error { background: rgba(255, 51, 102, 0.1); border-left-color: var(--accent-danger); }
        .empty-state { text-align: center; padding: 48px 20px; color: var(--text-secondary); }
        .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
        .campaign-row { cursor: pointer; }
        .campaign-row:hover { background: var(--bg-hover); }
        .paste-textarea { width: 100%; min-height: 120px; padding: 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: white; font-family: inherit; font-size: 13px; resize: vertical; }
        .paste-textarea::placeholder { color: var(--text-muted); }
        .drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all 200ms; }
        .drop-zone:hover { border-color: var(--accent-info); background: rgba(0, 168, 255, 0.05); }
        .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
        .results-item { background: var(--bg-tertiary); padding: 16px; border-radius: 8px; text-align: center; }
        .results-item .label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
        .results-item .value { font-size: 20px; font-weight: 700; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-primary); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* Callbacks Page */
        .cb-page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
        .cb-page-title { font-size:22px; font-weight:800; }
        .cb-search { width:100%; padding:12px 16px 12px 42px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; color:white; font-size:14px; outline:none; transition:border-color 200ms; }
        .cb-search:focus { border-color:var(--accent-info); }
        .cb-search-wrap { position:relative; margin-bottom:24px; }
        .cb-search-wrap::before { content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
        .cb-section { background:var(--bg-secondary); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:20px; }
        .cb-section-header { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
        .cb-section-title { font-size:15px; font-weight:700; display:flex; align-items:center; gap:10px; }
        .cb-count { background:rgba(255,255,255,0.12); border-radius:12px; padding:2px 10px; font-size:13px; font-weight:700; }
        .cb-card { display:flex; align-items:center; gap:16px; padding:14px 20px; border-bottom:1px solid var(--border); transition:background 150ms; }
        .cb-card:last-child { border-bottom:none; }
        .cb-card:hover { background:var(--bg-hover); }
        .cb-number { font-family:'Monaco',monospace; font-size:17px; font-weight:700; letter-spacing:0.5px; flex:1; }
        .cb-time { font-size:12px; color:var(--text-secondary); min-width:54px; }
        .cb-state { font-size:12px; min-width:100px; }
        .cb-copy-btn { padding:6px 14px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; transition:all 150ms; background:var(--bg-tertiary); color:var(--text-primary); white-space:nowrap; }
        .cb-copy-btn:hover { background:var(--accent-info); color:white; transform:scale(1.05); }
        .cb-copy-btn.copied { background:var(--accent-success); color:white; }
        .cb-copy-all { padding:7px 14px; border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; background:rgba(255,107,53,0.15); color:#ff6b35; border:1px solid rgba(255,107,53,0.3); transition:all 150ms; }
        .cb-copy-all:hover { background:#ff6b35; color:white; }
        .cb-copy-all.copied { background:var(--accent-success); color:white; border-color:var(--accent-success); }
        .cb-empty { padding:32px 20px; text-align:center; color:var(--text-muted); font-size:13px; }

        /* Callback Hub - Clean Office AI */
        .cbh-page { max-width:1100px; margin:0 auto; padding:20px; }
        .cbh-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
        .cbh-header-left { display:flex; align-items:center; gap:12px; }
        .cbh-header-title { font-size:15px; font-weight:700; color:var(--text-primary); }
        .cbh-header-actions { display:flex; gap:8px; }
        .cbh-header-btn { padding:5px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-secondary); color:var(--text-secondary); font-size:11px; cursor:pointer; transition:all 150ms; }
        .cbh-header-btn:hover { border-color:var(--text-muted); color:var(--text-primary); }
        .cbh-header-btn.danger:hover { border-color:#ff5252; color:#ff5252; }
        .cbh-grid { display:grid; grid-template-columns:300px 1fr; gap:20px; }
        @media(max-width:860px) { .cbh-grid { grid-template-columns:1fr; } }

        .cbh-dialer { background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; padding:18px; height:fit-content; position:sticky; top:20px; }
        .cbh-dialer-title { font-size:11px; font-weight:600; color:var(--text-muted); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.5px; }
        .cbh-input-label { font-size:10px; font-weight:600; color:var(--text-muted); margin-bottom:4px; }
        .cbh-input { width:100%; padding:9px 10px; background:var(--bg-primary); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-family:'JetBrains Mono',monospace; font-size:13px; box-sizing:border-box; outline:none; transition:border-color 150ms; margin-bottom:10px; }
        .cbh-input:focus { border-color:var(--accent-info); }
        .cbh-input.big { font-size:15px; font-weight:600; }
        .cbh-select { width:100%; padding:9px 10px; background:var(--bg-primary); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:12px; box-sizing:border-box; margin-bottom:12px; }
        .cbh-call-btn { width:100%; padding:10px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-weight:600; font-size:12px; cursor:pointer; transition:all 150ms; }
        .cbh-call-btn:hover { border-color:var(--accent-info); color:var(--accent-info); }
        .cbh-call-btn:disabled { opacity:0.4; cursor:not-allowed; }
        .cbh-status-msg { margin-top:8px; font-size:11px; text-align:center; min-height:16px; }

        .cbh-feed { display:flex; flex-direction:column; gap:14px; }
        .cbh-section-title { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
        .cbh-section-title .dot { width:5px; height:5px; border-radius:50%; }
        .cbh-section-title .dot.live { background:#00e676; animation:cbhPulse 2s infinite; }
        .cbh-section-title .dot.hist { background:var(--text-muted); opacity:0.4; }
        .cbh-section-title .count { color:var(--text-muted); font-size:10px; }

        .cbh-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:12px 14px; transition:border-color 150ms; }
        .cbh-card:hover { border-color:rgba(255,255,255,0.12); }
        .cbh-card.active { border-left:2px solid #00e676; }
        .cbh-card-row { display:flex; align-items:center; justify-content:space-between; }
        .cbh-card-row + .cbh-card-row { margin-top:6px; }
        .cbh-card-number { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--text-primary); }
        .cbh-card-meta { font-size:10px; color:var(--text-muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
        .cbh-card-meta .sep { color:rgba(255,255,255,0.1); }
        .cbh-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
        .cbh-badge.initiating { background:rgba(255,255,255,0.05); color:var(--text-muted); }
        .cbh-badge.calling_agent { background:rgba(255,171,0,0.1); color:#ffab00; }
        .cbh-badge.agent_ringing { background:rgba(255,171,0,0.1); color:#ffab00; animation:cbhPulse 1.5s infinite; }
        .cbh-badge.agent_answered { background:rgba(0,230,118,0.1); color:#00e676; }
        .cbh-badge.in_call { background:rgba(0,230,118,0.12); color:#00e676; }
        .cbh-badge.completed { background:rgba(0,176,255,0.08); color:#4fc3f7; }
        .cbh-badge.failed, .cbh-badge.error { background:rgba(255,82,82,0.08); color:#ef5350; }
        .cbh-badge.no_answer { background:rgba(255,171,0,0.08); color:#ffab00; }
        .cbh-badge.busy { background:rgba(255,82,82,0.08); color:#ef5350; }
        @keyframes cbhPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        .cbh-timer { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:#00e676; }
        .cbh-duration { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted); }
        .cbh-retry-btn { padding:3px 10px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--text-secondary); font-size:10px; font-weight:600; cursor:pointer; transition:all 150ms; }
        .cbh-retry-btn:hover { border-color:var(--text-secondary); color:var(--text-primary); }
        .cbh-hangup-btn { padding:2px 8px; border:1px solid rgba(255,50,50,0.3); border-radius:4px; background:rgba(255,50,50,0.1); color:#ff5252; font-size:11px; font-weight:700; cursor:pointer; margin-left:8px; transition:all 150ms; }
        .cbh-hangup-btn:hover { background:rgba(255,50,50,0.25); border-color:#ff5252; }
        .cbh-empty { padding:24px; text-align:center; color:var(--text-muted); font-size:12px; }
        .cbh-cause { font-size:10px; color:var(--text-muted); }
        .cbh-actions { display:flex; align-items:center; gap:6px; }

        /* Live Sliders */
        .live-sliders { display: flex; gap: 20px; padding: 16px 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
        .slider-group { flex: 1; min-width: 200px; }
        .slider-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .slider-label span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
        .slider-value { font-size: 20px; font-weight: 800; color: var(--accent-info); min-width: 40px; text-align: right; transition: color 150ms ease; }
        .slider-value.changed { color: var(--accent-success); }
        input[type=range].live-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--bg-tertiary);
            outline: none;
            cursor: pointer;
            transition: background 150ms ease;
        }
        input[type=range].live-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-info), var(--accent-purple));
            cursor: pointer;
            box-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
            transition: transform 150ms ease, box-shadow 150ms ease;
        }
        input[type=range].live-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            box-shadow: 0 0 16px rgba(0, 168, 255, 0.8);
        }
        input[type=range].live-slider::-moz-range-thumb {
            width: 20px; height: 20px; border-radius: 50%; border: none;
            background: linear-gradient(135deg, var(--accent-info), var(--accent-purple));
            cursor: pointer;
        }
        .slider-track-fill {
            height: 6px; border-radius: 3px;
            background: linear-gradient(90deg, var(--accent-info), var(--accent-purple));
            pointer-events: none;
        }
        .slider-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
        .slider-saved-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-success); margin-left: 6px; opacity: 0; transition: opacity 300ms ease; }
        .slider-saved-dot.show { opacity: 1; }

        /* Notes row (geel balkje onder agent_connected calls) */

        /* Filter pills */
        .filter-pill { padding: 5px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); transition: all 150ms; background: var(--bg-tertiary); color: var(--text-secondary); }
        .filter-pill:hover { color: white; border-color: var(--accent-info); }
        .filter-pill.active { background: var(--accent-info); color: white; border-color: var(--accent-info); }

        /* KPI stats grid */
        .detail-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 16px 20px; }
        .detail-kpi-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
        .detail-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
        .detail-kpi-val { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
        .detail-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

        /* ========== POWER EDITION OVERRIDES ========== */

        /* Base font override */
        body { font-family: 'Space Grotesk', -apple-system, sans-serif; }

        /* Navbar - Command Bar */
        .navbar { background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(13,17,23,0.95) 100%); border-bottom: none; padding: 12px 32px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); position: relative; }
        .navbar::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-info), var(--accent-purple), var(--accent-info), transparent); }
        .navbar::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.3), transparent); filter: blur(2px); }
        .navbar-brand { font-size: 19px; font-weight: 900; letter-spacing: 3px; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: rgba(0,240,255,0.7); background-clip: unset; color: rgba(0,240,255,0.7); text-shadow: 0 0 12px rgba(0,240,255,0.3); font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; position:relative; overflow:visible; padding:4px 0; }
        .navbar-brand .brand-char { display:inline-block; animation:brandLive 16s ease-in-out infinite; position:relative; }
        .navbar-brand .brand-char:nth-child(1) { animation-delay:0s; }
        .navbar-brand .brand-char:nth-child(2) { animation-delay:0.6s; }
        .navbar-brand .brand-char:nth-child(3) { animation-delay:1.2s; }
        @keyframes brandLive {
            0%,70%   { transform:translate(0,0) skewX(0) scale(1); opacity:1; filter:blur(0); text-shadow:0 0 12px rgba(0,240,255,0.3); }
            72%      { transform:translate(0.5px,0) skewX(0) scale(1); opacity:1; filter:blur(0); }
            73%      { transform:translate(-1px,0.5px) skewX(-2deg) scale(1.01); opacity:0.95; filter:blur(0); }
            74%      { transform:translate(1.5px,-0.5px) skewX(3deg) scale(0.99); opacity:0.85; filter:blur(0.3px); }
            75%      { transform:translate(-0.5px,1px) skewX(-5deg) scale(1.02); opacity:0.7; filter:blur(0.5px); text-shadow:0 0 20px rgba(0,240,255,0.8); }
            76%      { transform:translate(2px,-1px) skewX(8deg) scaleY(1.1) scaleX(0.9); opacity:0.5; filter:blur(0.8px); }
            77%      { transform:translate(-1px,2px) skewX(-12deg) scaleY(0.85) scaleX(1.15); opacity:0.3; filter:blur(1.2px); }
            78%      { transform:translate(0,0) skewX(15deg) scaleY(0.3) scaleX(1.4); opacity:0.1; filter:blur(2px); }
            79%      { transform:translate(0,0) skewX(0) scale(0); opacity:0; filter:blur(0); }
            86%      { transform:translate(0,0) skewX(0) scale(0); opacity:0; filter:blur(0); }
            87%      { transform:translate(0,0) skewX(0) scaleY(0.05) scaleX(1.3); opacity:0.05; filter:blur(1.5px); text-shadow:0 0 25px rgba(0,240,255,1); }
            88%      { transform:translate(0,0) skewX(-3deg) scaleY(0.5) scaleX(1.1); opacity:0.25; filter:blur(1px); }
            89%      { transform:translate(0.5px,-0.5px) skewX(2deg) scaleY(0.85) scaleX(1.03); opacity:0.55; filter:blur(0.5px); }
            90%      { transform:translate(-0.5px,0) skewX(-1deg) scale(1.02); opacity:0.8; filter:blur(0.2px); }
            91%      { transform:translate(0,0) skewX(0) scale(0.99); opacity:0.95; filter:blur(0); }
            93%,100% { transform:translate(0,0) skewX(0) scale(1); opacity:1; filter:blur(0); text-shadow:0 0 12px rgba(0,240,255,0.3); }
        }

        /* SMS nav button */
        .sms-nav-btn { font-size:16px; background:var(--bg-elevated)!important; border:1px solid var(--border)!important; color:rgba(0,240,255,0.6)!important; padding:4px 10px!important; line-height:1!important; transition:all 0.2s; }
        .sms-nav-btn:hover { color:rgba(0,240,255,1)!important; border-color:rgba(0,240,255,0.3)!important; text-shadow:0 0 8px rgba(0,240,255,0.4); }
        /* SMS tabs */
        .sms-tab { background:var(--bg-elevated)!important; border:1px solid var(--border)!important; color:var(--text-secondary)!important; padding:6px 14px!important; font-size:12px!important; }
        .sms-tab.active { border-color:rgba(0,240,255,0.4)!important; color:rgba(0,240,255,0.9)!important; background:rgba(0,240,255,0.05)!important; }
        .sms-tab:hover { color:var(--text-primary)!important; }
        .sms-route-card { padding:6px 12px; font-size:11px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; color:var(--text-secondary); cursor:pointer; transition:all 0.15s; user-select:none; }
        .sms-route-card:hover { border-color:rgba(0,240,255,0.3); color:var(--text-primary); }
        .sms-route-card.selected { background:rgba(0,240,255,0.08); border-color:rgba(0,240,255,0.4); color:rgba(0,240,255,0.9); box-shadow:0 0 8px rgba(0,240,255,0.1); }

        /* Arc Reactor Orb */
        .orb-wrap { width:36px; height:36px; position:relative; cursor:pointer; transition:transform 0.2s; }
        .orb-wrap:hover { transform:scale(1.15); }
        .orb-core { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background:radial-gradient(circle,#fff 0%,#00f0ff 40%,rgba(0,240,255,0.3) 100%); border-radius:50%; box-shadow:0 0 6px 2px rgba(0,240,255,0.6),0 0 14px 4px rgba(0,240,255,0.2); animation:orbCorePulse 3s ease-in-out infinite; }
        @keyframes orbCorePulse { 0%,100%{box-shadow:0 0 6px 2px rgba(0,240,255,0.6),0 0 14px 4px rgba(0,240,255,0.2);} 50%{box-shadow:0 0 8px 3px rgba(0,240,255,0.8),0 0 20px 6px rgba(0,240,255,0.3);} }

        .orb-ring { position:absolute; top:50%; left:50%; border:1px solid rgba(0,240,255,0.25); border-radius:50%; }
        .orb-ring.r1 { width:20px; height:20px; margin:-10px 0 0 -10px; animation:orbSpin1 6s linear infinite; border-color:rgba(0,240,255,0.3) transparent rgba(0,240,255,0.1) transparent; }
        .orb-ring.r2 { width:28px; height:28px; margin:-14px 0 0 -14px; animation:orbSpin2 8s linear infinite; border-color:transparent rgba(0,240,255,0.2) transparent rgba(0,240,255,0.15); }
        .orb-ring.r3 { width:34px; height:34px; margin:-17px 0 0 -17px; animation:orbSpin3 12s linear infinite; border-color:rgba(0,240,255,0.1) transparent rgba(0,240,255,0.08) transparent; }
        @keyframes orbSpin1 { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
        @keyframes orbSpin2 { 0%{transform:rotate(60deg)} 100%{transform:rotate(-300deg)} }
        @keyframes orbSpin3 { 0%{transform:rotate(30deg)} 100%{transform:rotate(390deg)} }

        .orb-wire { position:absolute; top:50%; left:50%; background:rgba(0,240,255,0.15); border-radius:1px; transform-origin:0 0; }
        .orb-wire.w1 { width:14px; height:1px; animation:orbWire1 4s ease-in-out infinite; }
        .orb-wire.w2 { width:11px; height:1px; animation:orbWire2 5s ease-in-out infinite; }
        .orb-wire.w3 { width:16px; height:1px; animation:orbWire3 6s ease-in-out infinite; }
        .orb-wire.w4 { width:10px; height:1px; animation:orbWire4 4.5s ease-in-out infinite; }
        @keyframes orbWire1 { 0%{transform:rotate(0deg) scaleX(1);opacity:0.4} 25%{transform:rotate(90deg) scaleX(0.7);opacity:0.2} 50%{transform:rotate(180deg) scaleX(1.1);opacity:0.5} 75%{transform:rotate(270deg) scaleX(0.8);opacity:0.3} 100%{transform:rotate(360deg) scaleX(1);opacity:0.4} }
        @keyframes orbWire2 { 0%{transform:rotate(45deg) scaleX(1);opacity:0.3} 33%{transform:rotate(165deg) scaleX(0.6);opacity:0.15} 66%{transform:rotate(285deg) scaleX(1.2);opacity:0.4} 100%{transform:rotate(405deg) scaleX(1);opacity:0.3} }
        @keyframes orbWire3 { 0%{transform:rotate(120deg) scaleX(0.8);opacity:0.25} 50%{transform:rotate(300deg) scaleX(1.1);opacity:0.5} 100%{transform:rotate(480deg) scaleX(0.8);opacity:0.25} }
        @keyframes orbWire4 { 0%{transform:rotate(200deg) scaleX(1);opacity:0.35} 40%{transform:rotate(344deg) scaleX(0.5);opacity:0.15} 80%{transform:rotate(488deg) scaleX(1.3);opacity:0.4} 100%{transform:rotate(560deg) scaleX(1);opacity:0.35} }

        /* Mini orb for table rows */
        .orb-mini { width:22px; height:22px; position:relative; cursor:pointer; transition:transform 0.2s; flex-shrink:0; }
        .orb-mini:hover { transform:scale(1.3); }
        .orb-mini .orb-core { width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }
        .orb-mini .orb-ring.r1 { width:13px; height:13px; margin:-6.5px 0 0 -6.5px; }
        .orb-mini .orb-ring.r2 { width:19px; height:19px; margin:-9.5px 0 0 -9.5px; }

        /* Home page cards */
        .home-card-active:hover { transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,240,255,0.12),0 0 60px rgba(0,240,255,0.04);border-color:rgba(0,240,255,0.35) !important; }

        /* Dialer icon - futuristic phone with hex ring */
        .home-icon-dialer { position:relative;width:100px;height:100px; }
        .home-icon-dialer::before { content:'';position:absolute;top:50%;left:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border:1.5px solid rgba(0,230,118,0.2);border-radius:50%;animation:dialRingSpin 12s linear infinite; }
        .home-icon-dialer::after { content:'';position:absolute;top:50%;left:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:1px solid rgba(0,230,118,0.12);border-radius:50%;border-top-color:rgba(0,230,118,0.5);animation:dialRingSpin 4s linear infinite; }
        .home-icon-dialer .inner { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
        @keyframes dialRingSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

        .home-icon-sms { position:relative;width:100px;height:100px; }
        .home-icon-sms::before { content:'';position:absolute;top:50%;left:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border:1.5px solid rgba(100,140,255,0.2);border-radius:50%;animation:smsRingPulse 3s ease-in-out infinite; }
        .home-icon-sms::after { content:'';position:absolute;top:50%;left:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border:1px solid rgba(100,140,255,0.12);border-radius:50%;border-bottom-color:rgba(179,136,255,0.5);animation:dialRingSpin 6s linear infinite reverse; }
        @keyframes smsRingPulse { 0%,100%{border-color:rgba(100,140,255,0.2);} 50%{border-color:rgba(100,140,255,0.4);} }

        /* ORB icon - large animated orb */
        .home-orb-wrap { position:relative;width:100px;height:100px; }
        .home-orb-core { position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:radial-gradient(circle,#fff 0%,#00f0ff 40%,rgba(0,240,255,0.3) 100%);border-radius:50%;box-shadow:0 0 12px 4px rgba(0,240,255,0.6),0 0 30px 8px rgba(0,240,255,0.2);animation:homeOrbCore 3s ease-in-out infinite; }
        .home-orb-ring { position:absolute;top:50%;left:50%;border-radius:50%;border:1.5px solid rgba(0,240,255,0.25);animation:homeOrbSpin 8s linear infinite; }
        .home-orb-ring.r1 { width:44px;height:44px;margin:-22px 0 0 -22px;border-color:rgba(0,240,255,0.35);animation-duration:6s; }
        .home-orb-ring.r2 { width:68px;height:68px;margin:-34px 0 0 -34px;border-color:rgba(0,240,255,0.2);animation-duration:10s;animation-direction:reverse; }
        .home-orb-ring.r3 { width:92px;height:92px;margin:-46px 0 0 -46px;border-color:rgba(0,240,255,0.1);animation-duration:14s; }
        @keyframes homeOrbCore { 0%,100%{box-shadow:0 0 12px 4px rgba(0,240,255,0.6),0 0 30px 8px rgba(0,240,255,0.2);} 50%{box-shadow:0 0 20px 6px rgba(0,240,255,0.8),0 0 50px 12px rgba(0,240,255,0.3);} }
        @keyframes homeOrbSpin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

        /* Status indicator - scanning effect */
        .status-indicator { background: rgba(0,230,118,0.05); border-radius: 3px; border: 1px solid rgba(0,230,118,0.15); position: relative; overflow: hidden; }
        .status-indicator::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,230,118,0.1), transparent); animation: scanline 3s infinite; }
        @keyframes scanline { 0% { left: -100%; } 100% { left: 100%; } }
        .status-dot { box-shadow: 0 0 8px var(--accent-success), 0 0 20px rgba(0,230,118,0.3); }

        /* Credit badge - neon */
        .credit-badge { font-family: 'JetBrains Mono', monospace; border-radius: 3px; background: rgba(0,240,255,0.04); border-color: rgba(0,240,255,0.2); color: var(--accent-info); box-shadow: 0 0 10px rgba(0,240,255,0.06), inset 0 0 10px rgba(0,240,255,0.02); }
        .credit-badge.low { background: rgba(255,145,0,0.06); border-color: rgba(255,145,0,0.3); color: var(--accent-warning); box-shadow: 0 0 10px rgba(255,145,0,0.08); }
        .credit-badge.critical { background: rgba(255,23,68,0.06); border-color: rgba(255,23,68,0.3); color: var(--accent-danger); box-shadow: 0 0 10px rgba(255,23,68,0.1); }
        .credit-badge .credit-icon { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

        /* Buttons - premium with glow borders */
        .btn { border-radius: 3px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: 0.5px; transition: all 150ms ease; position: relative; overflow: hidden; text-transform: uppercase; font-size: 12px; }
        .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transition: left 400ms ease; }
        .btn:hover::after { left: 100%; }
        .btn-primary { background: rgba(0,240,255,0.1); color: var(--accent-info); border: 1px solid rgba(0,240,255,0.25); }
        .btn-primary:hover { background: rgba(0,240,255,0.18); box-shadow: 0 0 15px rgba(0,240,255,0.2); transform: translateY(-1px) scale(1.02); }
        .btn-success { background: rgba(0,230,118,0.1); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.25); }
        .btn-success:hover { background: rgba(0,230,118,0.18); box-shadow: 0 0 15px rgba(0,230,118,0.2); transform: translateY(-1px) scale(1.02); }
        .btn-warning { background: rgba(255,145,0,0.1); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.25); }
        .btn-warning:hover { background: rgba(255,145,0,0.18); box-shadow: 0 0 15px rgba(255,145,0,0.2); transform: translateY(-1px) scale(1.02); }
        .btn-danger { background: rgba(255,23,68,0.1); color: var(--accent-danger); border: 1px solid rgba(255,23,68,0.25); }
        .btn-danger:hover { background: rgba(255,23,68,0.18); box-shadow: 0 0 15px rgba(255,23,68,0.2); transform: translateY(-1px) scale(1.02); }
        .btn-sm { font-size: 10px; letter-spacing: 0.5px; }

        /* KPI Cards - accent left border + shimmer on hover */
        .kpi-card { border-radius: 3px; border: 1px solid var(--border); border-left: 3px solid var(--accent-info); background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0,240,255,0.015) 100%); position: relative; overflow: hidden; }
        .kpi-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.03), transparent); transition: left 600ms ease; }
        .kpi-card:hover::before { left: 100%; }
        .kpi-card:hover { border-color: rgba(0,240,255,0.15); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
        .kpi-card:nth-child(2) { border-left-color: var(--accent-purple); }
        .kpi-card:nth-child(3) { border-left-color: var(--accent-success); }
        .kpi-card:nth-child(4) { border-left-color: var(--accent-danger); }
        .kpi-value { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: -0.5px; }
        .kpi-label { font-family: 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }

        /* Sections */
        .section { border-radius: 3px; border: 1px solid var(--border); transition: border-color 200ms; }
        .section:hover { border-color: rgba(0,240,255,0.1); }
        .section-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; font-size: 13px; }

        /* Tabs */
        .tab { font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; }
        .tab.active { color: var(--accent-info); border-bottom-color: var(--accent-info); text-shadow: 0 0 10px rgba(0,240,255,0.3); }

        /* Progress bar - animated shimmer */
        .progress-fill { background: linear-gradient(90deg, var(--accent-info), var(--accent-purple), var(--accent-info)); background-size: 200% 100%; animation: shimmer 2s infinite linear; border-radius: 2px; }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .progress-bar { border-radius: 2px; height: 6px; }

        /* Table - premium data grid */
        table { font-family: 'Space Grotesk', sans-serif; }
        thead { background: linear-gradient(180deg, var(--bg-tertiary), rgba(22,27,34,0.8)); }
        th { font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; border-bottom: 2px solid rgba(0,240,255,0.08); color: var(--text-muted); }
        tbody tr { transition: all 150ms ease; border-left: 2px solid transparent; }
        tbody tr:hover { background: rgba(0,240,255,0.025); border-left-color: var(--accent-info); }
        tbody tr:nth-child(even) { background: rgba(255,255,255,0.008); }
        .phone-number { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); text-shadow: 0 0 8px rgba(0,240,255,0.08); }

        /* State badges - sharp & bold */
        .state-badge { border-radius: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Space Grotesk', sans-serif; padding: 3px 8px; }
        .state-dialing::before, .state-ringing::before, .state-dtmf_wait::before, .state-agent_ringing::before, .state-agent_connected::before, .state-transferring::before, .state-ivr_playing::before { animation: pulseDot 1.5s infinite; }
        @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        .state-dialing { background: rgba(179,136,255,0.12); color: var(--accent-purple); border: 1px solid rgba(179,136,255,0.2); }
        .state-ringing { background: rgba(0,240,255,0.08); color: var(--accent-info); border: 1px solid rgba(0,240,255,0.15); }
        .state-answered, .state-completed { background: rgba(0,230,118,0.08); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.15); }
        .state-ivr_playing { background: rgba(0,240,255,0.06); color: #7dd3fc; border: 1px solid rgba(0,240,255,0.12); }
        .state-dtmf_wait { background: rgba(255,145,0,0.08); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.15); }
        .state-dtmf_received { background: rgba(0,230,118,0.08); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.15); }
        .state-transferring { background: rgba(179,136,255,0.08); color: var(--accent-purple); border: 1px solid rgba(179,136,255,0.15); }
        .state-agent_ringing { background: rgba(255,145,0,0.08); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.15); }
        .state-agent_connected { background: rgba(0,230,118,0.12); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.2); }
        .state-no_dtmf { background: rgba(255,145,0,0.08); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.15); }
        .state-failed { background: rgba(255,23,68,0.08); color: var(--accent-danger); border: 1px solid rgba(255,23,68,0.15); }
        .state-no_answer, .state-busy { background: rgba(255,145,0,0.08); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.15); }
        .state-originating { background: rgba(179,136,255,0.08); color: var(--accent-purple); border: 1px solid rgba(179,136,255,0.12); }
        .state-queued { background: rgba(125,133,144,0.1); color: var(--text-secondary); border: 1px solid rgba(125,133,144,0.1); }
        .status-running { background: rgba(0,230,118,0.08); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.15); }
        .status-paused { background: rgba(255,145,0,0.08); color: var(--accent-warning); border: 1px solid rgba(255,145,0,0.15); }
        .status-created { background: rgba(125,133,144,0.1); color: var(--text-secondary); border: 1px solid rgba(125,133,144,0.1); }
        .status-stopped { background: rgba(72,79,88,0.15); color: var(--text-muted); border: 1px solid rgba(72,79,88,0.15); }
        .status-finished { background: rgba(0,230,118,0.08); color: var(--accent-success); border: 1px solid rgba(0,230,118,0.15); }

        /* Duration */
        .duration { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); }

        /* Modal - premium panel */
        .modal { backdrop-filter: blur(12px); background: rgba(6,8,13,0.92); }
        .modal-content { border-radius: 4px; border: 1px solid rgba(0,240,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(0,240,255,0.05); animation: modalIn 250ms ease-out; }
        @keyframes modalIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .modal-header { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--accent-info), var(--accent-purple), transparent) 1; }
        .modal-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; }

        /* Timeline */
        .timeline::before { width: 1px; background: rgba(0,240,255,0.12); }
        .timeline-item .time { font-family: 'JetBrains Mono', monospace; }

        /* Filter pills */
        .filter-pill { border-radius: 2px; font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
        .filter-pill.active { background: rgba(0,240,255,0.12); color: var(--accent-info); border-color: rgba(0,240,255,0.25); box-shadow: 0 0 10px rgba(0,240,255,0.08); }
        .filter-pill:hover { color: var(--accent-info); border-color: rgba(0,240,255,0.15); }

        /* Detail KPI */
        .detail-kpi-card { border-radius: 3px; border: 1px solid var(--border); position: relative; overflow: hidden; }
        .detail-kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-info), transparent); }
        .detail-kpi-label { font-family: 'Space Grotesk', sans-serif; letter-spacing: 1.5px; }
        .detail-kpi-val { font-family: 'JetBrains Mono', monospace; }

        /* Sliders - tech controls */
        input[type=range].live-slider::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 3px; background: var(--accent-info); box-shadow: 0 0 10px rgba(0,240,255,0.4); }
        input[type=range].live-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 20px rgba(0,240,255,0.6); transform: scale(1.1); }
        input[type=range].live-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 3px; background: var(--accent-info); border: none; }
        .slider-value { font-family: 'JetBrains Mono', monospace; color: var(--accent-info); font-size: 22px; }
        .slider-label span { font-family: 'Space Grotesk', sans-serif; letter-spacing: 1px; }

        /* Callbacks */
        .cb-page-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.5px; }
        .cb-number { font-family: 'JetBrains Mono', monospace; }
        .cb-search { border-radius: 3px; font-family: 'Space Grotesk', sans-serif; background: var(--bg-tertiary); }
        .cb-search:focus { border-color: var(--accent-info); box-shadow: 0 0 10px rgba(0,240,255,0.1); }
        .cb-section { border-radius: 3px; }
        .cb-copy-btn { border-radius: 3px; font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
        .cb-copy-btn:hover { background: var(--accent-info); color: #000; box-shadow: 0 0 10px rgba(0,240,255,0.2); }
        .cb-copy-all { border-radius: 3px; font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
        .cb-search-wrap::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--text-muted); border-radius: 50%; position: absolute; left: 14px; top: 44%; transform: translateY(-50%); font-size: 0; box-sizing: border-box; }
        .cb-search-wrap::after { content: ''; position: absolute; left: 25px; top: 60%; width: 5px; height: 2px; background: var(--text-muted); transform: rotate(45deg); pointer-events: none; }

        /* Custom scrollbar - thin accent */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.15); border-radius: 2px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.3); }

        /* Activity log - terminal */
        #activityLog { font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; position: relative; }

        /* Scanline overlay - low z-index so it never blocks inputs */
        body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,240,255,0.006) 2px, rgba(0,240,255,0.006) 4px); pointer-events: none; z-index: 1; }

        /* Focus glow */
        input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(0,240,255,0.3) !important; box-shadow: 0 0 10px rgba(0,240,255,0.08) !important; }

        /* Force-enable typing in all form elements */
        input, textarea, select, [contenteditable] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; position: relative; z-index: 2; }

        .note-save-btn { color: rgba(0,212,170,0.5); transition: all 0.2s; }
        .note-save-btn:hover { color: rgba(0,212,170,1); text-shadow: 0 0 8px rgba(0,212,170,0.6); }
        .note-save-btn.saved { color: rgba(0,212,170,1); text-shadow: 0 0 12px rgba(0,212,170,0.8); }
        /* Notes & paste textarea */
        .paste-textarea { border-radius: 3px; font-family: 'JetBrains Mono', monospace; }

        /* Drop zone */
        .drop-zone { border-radius: 3px; }
        .drop-zone:hover { border-color: var(--accent-info); background: rgba(0,240,255,0.02); }

        /* Results */
        .results-item { border-radius: 3px; }
        .results-item .value { font-family: 'JetBrains Mono', monospace; }

        /* Form inputs global */
        #campaignForm input, #settingsModal input, #settingsModal select { border-radius: 3px !important; font-family: 'Space Grotesk', sans-serif; }

        /* Actions dropdown */
        .actions-dropdown { position: relative; display: inline-block; }
        .actions-dropdown-toggle { padding: 4px 12px; font-size: 11px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 1px; transition: all 150ms; text-transform: uppercase; }
        .actions-dropdown-toggle:hover { color: var(--accent-info); border-color: rgba(0,240,255,0.2); }
        .actions-dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: rgba(13,17,23,0.97); backdrop-filter: blur(16px); border: 1px solid rgba(0,240,255,0.1); border-radius: 3px; min-width: 180px; box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 15px rgba(0,240,255,0.04); z-index: 100; padding: 4px 0; animation: dropIn 150ms ease-out; }
        @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
        .actions-dropdown-menu.show { display: block; }
        .actions-dropdown-item { display: block; width: 100%; padding: 8px 16px; font-size: 12px; font-family: 'Space Grotesk', sans-serif; color: var(--text-secondary); background: none; border: none; text-align: left; cursor: pointer; transition: all 100ms; letter-spacing: 0.3px; }
        .actions-dropdown-item:hover { background: rgba(0,240,255,0.05); color: var(--text-primary); }
        .actions-dropdown-item.danger { color: var(--accent-danger); }
        .actions-dropdown-item.danger:hover { background: rgba(255,23,68,0.06); }

        /* Container accent */
        .container { position: relative; }
        .container::before { content: ''; position: absolute; top: -1px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.1), transparent); }

        /* Back button */
        .back-btn { background: var(--bg-tertiary); border: 1px solid var(--border); }
        .back-btn:hover { border-color: rgba(0,240,255,0.15); color: var(--text-primary); }

        .block-toggle { display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none; }
        .block-toggle .switch { position:relative;width:36px;height:20px;background:rgba(0,212,170,0.3);border-radius:10px;transition:all 0.3s; }
        .block-toggle .switch.blocked { background:rgba(255,51,102,0.4); }
        .block-toggle .switch::after { content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:rgba(0,212,170,0.9);border-radius:50%;transition:all 0.3s; }
        .block-toggle .switch.blocked::after { left:18px;background:rgba(255,51,102,0.9); }
        .block-toggle .block-label { font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace; }
        .block-toggle .block-label.active { color:rgba(0,212,170,0.8); }
        .block-toggle .block-label.blocked { color:rgba(255,51,102,0.9); }
    @keyframes spin { to { transform: rotate(360deg); } }


/* ===== Anti-inspect ===== */
        html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
        body { -webkit-touch-callout: none; }
        * { -webkit-user-drag: none; user-drag: none; }

                /* Touch support for long-press */
        .campaign-row { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
        .block-toggle { display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none; }
        .block-toggle .switch { position:relative;width:36px;height:20px;background:rgba(0,212,170,0.3);border-radius:10px;transition:all 0.3s; }
        .block-toggle .switch.blocked { background:rgba(255,51,102,0.4); }
        .block-toggle .switch::after { content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:rgba(0,212,170,0.9);border-radius:50%;transition:all 0.3s; }
        .block-toggle .switch.blocked::after { left:18px;background:rgba(255,51,102,0.9); }
        .block-toggle .block-label { font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace; }
        .block-toggle .block-label.active { color:rgba(0,212,170,0.8); }
        .block-toggle .block-label.blocked { color:rgba(255,51,102,0.9); }
/* ===== Walkthrough ===== */
        @keyframes wt-fade-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes wt-fade-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(0.98); } }
        @keyframes wt-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.7), 0 0 0 0 rgba(59,130,246,0.4); } 70% { box-shadow: 0 0 0 14px rgba(59,130,246,0), 0 0 0 28px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0), 0 0 0 0 rgba(59,130,246,0); } }
        @keyframes wt-spotlight-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes wt-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
        @keyframes wt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        @keyframes wt-confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
        @keyframes wt-arrow-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
        .wt-spotlight-target {
            position: relative !important;
            z-index: 99997 !important;
            animation: wt-pulse-ring 2s infinite;
            border-radius: 10px !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #walkthroughBox {
            animation: wt-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #walkthroughBox.wt-leaving { animation: wt-fade-out 0.3s ease-in forwards; }
        .wt-progress-bar {
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 14px;
        }
        .wt-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
            background-size: 200% 100%;
            animation: wt-shimmer 2s linear infinite;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 2px;
        }
        .wt-arrow {
            display: inline-block;
            animation: wt-arrow-bounce 1.2s infinite;
        }
        .wt-icon {
            display: inline-block;
            animation: wt-bounce 1.5s infinite;
            font-size: 22px;
        }
        .wt-confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            top: -20px;
            z-index: 100000;
            pointer-events: none;
            animation: wt-confetti-fall 3s linear forwards;
        }
        #helpModal .help-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 10px;
            transition: all 0.25s ease;
            cursor: pointer;
        }
        #helpModal .help-card:hover {
            border-color: #3b82f6;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(59,130,246,0.15);
        }
        #helpModal details summary { list-style: none; outline: none; }
        #helpModal details summary::-webkit-details-marker { display: none; }
        #helpModal details summary::after { content: '+'; float: right; font-size: 20px; color: #3b82f6; transition: transform 0.3s; }
        #helpModal details[open] summary::after { content: '-'; transform: rotate(180deg); }
        #helpModal .quick-action {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.05));
            border: 1px solid rgba(59,130,246,0.25);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.25s;
            margin-bottom: 10px;
        }
        #helpModal .quick-action:hover {
            border-color: #3b82f6;
            background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.1));
            transform: translateX(4px);
        }
        #helpModal .quick-action-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #fff;
            flex-shrink: 0;
        }

/* ===== MOBILE APP UI ===== */

/* Bottom navigation bar for mobile */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    z-index: 9990;
    padding: 4px 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav .nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    font-size: 10px;
    font-weight: 600;
    min-width: 52px;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav .nav-item.active {
    color: var(--accent-primary);
}
.mobile-bottom-nav .nav-item .nav-icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}
.mobile-bottom-nav .nav-item .nav-label {
    font-size: 10px;
    white-space: nowrap;
}

/* Mobile campaign cards (replace table) */
.mobile-campaign-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.mobile-campaign-card:active {
    background: var(--bg-elevated);
}
.mobile-campaign-card .mc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.mobile-campaign-card .mc-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
}
.mobile-campaign-card .mc-owner {
    font-size: 11px;
    color: var(--accent-cyan);
}
.mobile-campaign-card .mc-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.mobile-campaign-card .mc-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mobile-campaign-card .mc-progress {
    margin-top: 8px;
}
.mobile-campaign-card .mc-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Mobile user cards */
.mobile-user-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-user-card:active {
    background: var(--bg-elevated);
}
.mobile-user-card .mu-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mobile-user-card .mu-info {
    flex: 1;
    min-width: 0;
}
.mobile-user-card .mu-name {
    font-weight: 700;
    font-size: 14px;
}
.mobile-user-card .mu-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.mobile-user-card .mu-right {
    text-align: right;
    flex-shrink: 0;
}

/* Base: hide mobile-only on desktop */
.mobile-only { display: none; }

@media (max-width: 768px) {
    /* ===== CORE LAYOUT ===== */
    html, body {
        overflow-x: hidden;
        overflow-x: clip;
        -webkit-text-size-adjust: 100%;
    }
    body {
        /* 70px reserves space for the bottom nav; env() adds the Android
           gesture-bar / iOS home-indicator inset on top of that so the nav
           never sits under the system UI. */
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        min-height: 100vh;
        min-height: 100dvh;
    }
    #mainContent {
        padding: 12px !important;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* ===== TOP NAVBAR: minimal + breathable on mobile ===== */
    .navbar {
        padding: 10px 12px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: center;
        /* No more horizontal scroll — everything that doesn't fit goes
           to the bottom nav or the user dropdown. */
        overflow-x: visible !important;
    }
    .nav-left { gap: 6px !important; min-width: 0; flex: 0 1 auto !important; }
    .nav-right { gap: 6px !important; flex: 1 1 auto !important; justify-content: flex-end; min-width: 0; }
    .nav-left, .nav-right { padding: 0 !important; }

    /* Hide everything redundant with the bottom nav or that bloats the bar.
       The bottom nav already covers Home, Campaigns, Callbacks, SMS, More. */
    .nav-primary,
    .nav-search,
    .navbar-status > .btn,
    .navbar-status > button:not(#navUserBtn):not([onclick="doLogout()"]),
    #navSms, #navCallbacks, #navColdCall, #navLive, #navCampaigns,
    #navUsers, #navVerslagen, #navNotities,
    #helpBtn, #navSettings, #navNewCampaign, #btnToggleHidden,
    #paymentsBtn, #notifBell, #sipupBadge,
    .navbar-status > .orb-wrap,
    .status-indicator {
        display: none !important;
    }

    /* Brand: keep but compact — hidden under 480px (existing rule). */
    .navbar-brand {
        font-size: 18px !important;
        letter-spacing: 2px !important;
        margin-right: 4px !important;
        flex-shrink: 0;
    }

    /* Minutes badge: clear, monospaced, doesn't shrink. */
    .credit-badge#minutesBadge {
        display: flex !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
        flex-shrink: 0;
    }

    /* BUY button: prominent, gradient, won't get cut off, big touch target. */
    .nav-pill.nav-pill-buy {
        display: inline-flex !important;
        align-items: center;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 10px rgba(245,158,11,0.35);
        flex-shrink: 0;
        min-height: 36px;
    }
    .nav-pill.nav-pill-buy:active { transform: scale(0.96); }

    /* User dropdown trigger: avatar-only on mobile (saves space). */
    .nav-user-trigger { padding: 4px 8px !important; min-height: 36px; }
    .nav-user-name,
    .nav-user-trigger > span:last-child { display: none !important; }
    .nav-user-avatar {
        width: 30px !important; height: 30px !important;
        font-size: 13px !important;
    }

    /* Show bottom nav */
    .mobile-bottom-nav {
        display: block !important;
    }

    /* ===== KPI GRID ===== */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .kpi-card {
        padding: 12px !important;
    }
    .kpi-value {
        font-size: 22px !important;
    }

    /* ===== TABLES: hide on mobile, show cards ===== */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide desktop table, show mobile cards */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    /* ===== SECTIONS ===== */
    .section {
        margin: 0 !important;
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .section-header {
        padding: 0 0 10px 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .section-title {
        font-size: 16px !important;
    }

    /* ===== CAMPAIGN FILTERS ===== */
    .campaign-filters {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .campaign-filters input,
    .campaign-filters select {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* ===== SETTINGS: single column ===== */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== BUTTONS ===== */
    .btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }
    .btn-sm {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* ===== MODALS: fullscreen on mobile ===== */
    .modal-content,
    div[style*="max-width:400px"],
    div[style*="max-width:500px"],
    div[style*="max-width: 400px"],
    div[style*="max-width: 500px"],
    div[style*="width: 700px"] {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* ===== DETAIL KPI ===== */
    .detail-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ===== SLIDERS ===== */
    .live-sliders {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    /* ===== PROGRESS BAR ===== */
    .progress-bar {
        height: 8px !important;
        border-radius: 4px !important;
    }

    /* ===== CALLBACKS ===== */
    .cb-card {
        flex-direction: column !important;
        padding: 12px !important;
    }

    /* ===== STATE BADGES ===== */
    .state-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* ===== HOME PAGE: fit cards on small screen ===== */
    .home-card {
        padding: 16px !important;
        border-radius: 12px !important;
        aspect-ratio: auto !important;
    }
    .home-card svg,
    .home-card .home-icon-dialer svg,
    .home-card .home-icon-sms svg {
        width: 60px !important;
        height: 60px !important;
    }
    .home-card > div {
        width: 60px !important;
        height: 60px !important;
    }
    .home-orb-wrap {
        transform: scale(0.6) !important;
    }

    /* ===== PROFILE PAGE ===== */
    div[style*="max-width:600px"][style*="margin:40px auto"] {
        margin: 12px auto !important;
        padding: 0 !important;
    }
    div[style*="grid-template-columns:140px"] {
        grid-template-columns: 1fr !important;
        gap: 4px 0 !important;
    }

    /* ===== ALL INLINE GRIDS: collapse to 1 col ===== */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== HOME GRID: 3 cols -> 1 col ===== */
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    /* Home container: don't force full viewport, just center comfortably */
    div[style*="max-width:700px"][style*="min-height:calc"] {
        min-height: auto !important;
        padding: 24px 12px !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    /* Home cards: keep all 3 visible above the fold instead of stacking
       3 full-screen-height tiles. 3-up row, taller-than-wide is fine. */
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    .home-card {
        padding: 16px !important;
        aspect-ratio: 0.85 / 1 !important;
        border-radius: 14px !important;
    }
    .home-card svg { width: 64px !important; height: 64px !important; }
    .home-card .home-orb-wrap,
    .home-card .home-icon-dialer,
    .home-card .home-icon-sms { width: 64px !important; height: 64px !important; }
    .home-card .home-orb-wrap > * { transform: scale(0.64); transform-origin: center; }

    /* ===== SETTINGS: all cards single column ===== */
    div[style*="display:grid"][style*="gap:20px"][style*="margin-bottom:20px"] {
        grid-template-columns: 1fr !important;
    }

    /* Settings inner grids (ESL host/port etc) */
    div[style*="display:grid"][style*="gap:12px"][style*="margin-bottom:12px"],
    div[style*="display:grid"][style*="gap:12px"][style*="margin-bottom:16px"] {
        grid-template-columns: 1fr !important;
    }

    /* ===== CAMPAIGN DETAIL ===== */
    /* Back button + callbacks row */
    div[style*="display:flex"][style*="gap:12px"][style*="margin-bottom:20px"] {
        flex-wrap: wrap !important;
    }

    /* Campaign detail header controls */
    div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] {
        gap: 6px !important;
    }

    /* Tabs: scrollable */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
    }

    /* Calls table: compact */
    #callsTableBody td {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }
    .phone-number {
        font-size: 12px !important;
    }

    /* ===== USERS PAGE ===== */
    /* User modal: full width */
    div[style*="max-width:900px"] {
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* ===== ADMIN TOOLS SECTION ===== */
    #adminToolsSection {
        padding: 12px !important;
    }
    #adminToolsSection .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ===== FILTER/SEARCH BARS ===== */
    div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    /* ===== PAGINATION ===== */
    #callsPagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        font-size: 11px !important;
    }

    /* ===== ACTIVITY LOG ===== */
    .activity-container {
        max-height: 200px !important;
    }

    /* ===== INTERESTED LIST ===== */
    #interestedList table th,
    #interestedList table td {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    /* ===== DELETE SELECTED BAR ===== */
    #deleteSelectedBar {
        flex-wrap: wrap !important;
        padding: 8px !important;
    }

    /* ===== VERSLAGEN TABLE ===== */
    .table-container table {
        font-size: 11px !important;
    }
    .table-container table th,
    .table-container table td {
        padding: 8px 4px !important;
    }

    /* ===== NOTITIES ===== */
    div[style*="max-width:800px"] {
        max-width: 100% !important;
    }

    /* ===== IVR SECTION ===== */
    div[style*="max-width:900px"][style*="margin:0 auto"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ===== ACCOUNT / PROFILE PAGE (redesigned .acct-* layout) =====
       The profile view injects its own <style> with a desktop "220px 1fr"
       sidebar grid. That grid had no mobile override, so on a phone the
       content column collapsed to ~120px — unreadable, and its controls were
       too cramped to tap (you could only use it in landscape, where the
       desktop layout kicks in). Collapse to a single column; the side nav
       becomes a full-width vertical menu (see below). */
    .acct-wrap { margin: 12px auto !important; padding: 0 !important; max-width: 100% !important; }
    .acct-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    /* Keep the injected vertical menu (left-border active marker, divider rows)
       but stop it sticking to the top on mobile, where it's a full-width row. */
    .acct-nav { position: static !important; }

    /* ===== MOBILE "MORE" SHEET: keep its own 2-column grid =====
       The broad `grid-template-columns:1fr 1fr -> 1fr` rule above also hit the
       More sheet, stacking its 7 items into one very tall column. Restore 2-up
       (higher specificity than the attribute selector, so order-independent). */
    #mobileMoreMenu > div { grid-template-columns: 1fr 1fr !important; }

    /* ===== CAMPAIGNS: drop the orphaned bulk-delete button on mobile =====
       Bulk select uses table checkboxes that only render on desktop, so the
       disabled "Delete (0)" pill just dangles in the filter column on phones.
       Each mobile card already has its own delete action. */
    #btnDeleteSelected { display: none !important; }

    /* ===== ADMIN CAMPAIGN OVERVIEW (admin landing) ===== */
    /* KPI strip is an inline repeat(4,1fr) grid — the broad collapse rule only
       catches repeat(2/3), so on a phone the 4th card ("Calls") got clipped.
       Make it a 2x2 grid. */
    div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

    /* Per-user summary row: [avatar | name | status badges | calls | chevron]
       is too wide for a phone, so the badges overlapped the name/count. Wrap it
       to two rows: line 1 = avatar + name + calls + chevron, line 2 = badges. */
    .admin-uc > div:first-child { flex-wrap: wrap !important; row-gap: 8px !important; }
    .admin-uc > div:first-child > :nth-child(1) { order: 1 !important; }
    .admin-uc > div:first-child > :nth-child(2) { order: 2 !important; }
    .admin-uc > div:first-child > :nth-child(4) { order: 3 !important; margin-left: auto !important; }
    .admin-uc > div:first-child > :nth-child(5) { order: 4 !important; }
    .admin-uc > div:first-child > :nth-child(3) { order: 5 !important; flex-basis: 100% !important; margin-left: 0 !important; }
    /* Expanded per-user campaign table: 5 columns overflow the phone, so the
       Open/Start/Stop button column ran off the right edge (invisible). Drop the
       low-value "%" progress column on mobile and tighten padding so the action
       buttons are always reachable. */
    .admin-uc table th:nth-child(4), .admin-uc table td:nth-child(4) { display: none !important; }
    .admin-uc table th, .admin-uc table td { padding-left: 5px !important; padding-right: 5px !important; }
    .admin-uc table .btn-sm { padding: 4px 8px !important; }

    /* ===== ADMIN USER DETAIL ===== */
    /* #upContent is a fixed "380px 1fr" two-pane grid; on a phone the 380px pane
       ate the width and the 1fr pane overflowed off-screen (clipped). Stack into
       one column. minmax(0,1fr) caps the track at the container (a plain 1fr
       blows out to the widest child's min-content); the child cap stops any
       fixed-width inner panel from poking past the viewport. */
    #upContent { grid-template-columns: minmax(0, 1fr) !important; }
    #upContent > * { max-width: 100% !important; }
    /* flex/grid children default to min-width:auto and refuse to shrink below
       their content, blowing the column out; let them shrink + wrap. */
    #upContent * { min-width: 0 !important; }
    #upContent [style*="monospace"] { overflow-wrap: anywhere !important; word-break: break-all !important; }
    /* purchases/history table won't shrink below its columns — let it scroll
       horizontally inside its column instead of poking past the viewport. */
    #upContent table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* ===== TAB BAR: hide desktop-only "speedkey" hint + new-tab (+) on mobile =====
       Keyboard shortcuts (Ctrl+K search, Cmd-click new tab) aren't reachable by
       touch; they just clutter the bar. Keep the active tab pill for context. */
    .cc-tab-hint, .cc-tab-plus { display: none !important; }

}

@media (max-width: 480px) {
    .navbar-brand { display: none !important; }
    .kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .kpi-value { font-size: 18px !important; }

    /* Full-width inputs */
    input, select, textarea {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Campaign cards even more compact */
    .mobile-campaign-card {
        padding: 12px;
    }
    .mobile-campaign-card .mc-name {
        font-size: 14px;
    }
    /* On really small screens hide brand entirely so Buy can shine */
    .nav-pill.nav-pill-buy { padding: 8px 12px !important; font-size: 12px !important; }
    .credit-badge#minutesBadge { font-size: 11px !important; padding: 5px 8px !important; }
}

/* Safe area for notch/island phones */
@supports (padding-top: env(safe-area-inset-top)) {
    .navbar {
        padding-top: calc(8px + env(safe-area-inset-top)) !important;
    }
    .mobile-bottom-nav {
        padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
    }
}

/* Touch improvements */
@media (pointer: coarse) {
    button, .btn, a, .campaign-row, .mobile-campaign-card, .mobile-user-card {
        min-height: 40px;
    }
    input, select {
        min-height: 42px;
    }
}

/* ===== PIN Lock Screen ===== */
.pin-lock-icon {
    font-size: 48px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px rgba(100,140,255,0.3));
}

.pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(100,140,255,0.4);
    background: transparent;
    transition: all 0.2s ease;
}

.pin-dot.filled {
    background: var(--accent-info, #648cff);
    border-color: var(--accent-info, #648cff);
    box-shadow: 0 0 12px rgba(100,140,255,0.4);
    transform: scale(1.1);
}

.pin-dot.error {
    border-color: var(--accent-danger, #ff3366);
    background: var(--accent-danger, #ff3366);
    box-shadow: 0 0 12px rgba(255,51,102,0.4);
}

.pin-dot.success {
    border-color: var(--accent-success, #00d4aa);
    background: var(--accent-success, #00d4aa);
    box-shadow: 0 0 12px rgba(0,212,170,0.4);
}

.pin-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-key {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(100,140,255,0.15);
    background: rgba(100,140,255,0.05);
    color: var(--text-primary, #fff);
    font-size: 28px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    margin: 0 auto;
}

.pin-key:active {
    background: rgba(100,140,255,0.2);
    border-color: rgba(100,140,255,0.4);
    transform: scale(0.93);
}

.pin-key:hover {
    background: rgba(100,140,255,0.1);
    border-color: rgba(100,140,255,0.25);
}

.pin-key-letters {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted, #8895a7);
    letter-spacing: 2px;
    margin-top: 2px;
}

.pin-key-empty {
    border: none;
    background: transparent;
    cursor: default;
    pointer-events: none;
}

.pin-key-action {
    font-size: 24px;
    color: var(--text-muted, #8895a7);
    border-color: rgba(100,140,255,0.08);
    background: rgba(100,140,255,0.02);
}

.pin-key-action:hover {
    color: var(--text-primary, #fff);
}

@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.pin-shake {
    animation: pinShake 0.5s ease-in-out;
}

/* Mobile adjustments for PIN pad */
@media (max-width: 480px) {
    .pin-key {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }
    .pin-numpad {
        gap: 10px;
        max-width: 250px;
    }
}

@media (max-height: 600px) {
    .pin-key {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }
    .pin-numpad {
        gap: 8px;
    }
    .pin-lock-icon {
        font-size: 32px;
        margin-bottom: 6px;
    }
}

/* PIN toggle switch styles */
#pinToggle:checked + span {
    background: var(--accent-info, #648cff) !important;
    border-color: var(--accent-info, #648cff) !important;
}
#pinToggle:checked + span + span {
    transform: translateX(20px) !important;
    background: #fff !important;
}

/* ===== Redesigned navbar ===== */
.navbar { padding: 10px 24px !important; gap: 16px; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 10px; }
.nav-left { flex: 1; min-width: 0; }
.nav-primary { display: flex; align-items: center; gap: 4px; margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--border); }
.nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    background: transparent; border: 1px solid transparent;
    color: var(--text-secondary); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all 0.15s ease;
    white-space: nowrap;
}
.nav-btn:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.nav-btn .nav-ico { font-size: 14px; }
.nav-btn .nav-lbl { font-size: 12px; letter-spacing: 0.3px; }
.nav-btn.active { background: var(--bg-elevated); color: var(--accent-info); border-color: rgba(0,240,255,0.25); }
.nav-coldcall { color: #c4b5fd; }
.nav-coldcall:hover { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.10)); border-color: rgba(139,92,246,0.3); }
.nav-live { color: #34d399; }
.nav-live .nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; animation: pulse 2s infinite; display: inline-block; }
.nav-callbacks { padding-left: 8px; }
.nav-callbacks .orb-wrap { transform: scale(0.45); transform-origin: left center; margin-right: -16px; }

.nav-search {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin-left: 8px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 10px; color: var(--text-muted); cursor: pointer;
    font-size: 12px; font-family: inherit; min-width: 200px;
    transition: all 0.15s;
}
.nav-search:hover { border-color: rgba(0,240,255,0.3); color: var(--text-secondary); }
.nav-search-lbl { flex: 1; text-align: left; }
.nav-search-kbd {
    background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-family: ui-monospace, monospace;
    border: 1px solid var(--border); color: var(--text-muted);
}

.credit-badge { padding: 6px 12px !important; font-size: 12px !important; }
.credit-badge .credit-icon { font-size: 10px !important; opacity: 0.7; letter-spacing: 1px; }

.nav-pill {
    padding: 8px 14px; border: none; border-radius: 10px;
    font-weight: 700; font-size: 12px; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.nav-pill-buy { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
.nav-pill-buy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
.nav-pill-new {
    background: linear-gradient(135deg, var(--accent-success), #00a676);
    color: #fff; display: inline-flex; align-items: center; gap: 4px;
}
.nav-pill-new:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,230,118,0.4); }

.nav-icon-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; transition: all 0.15s;
}
.nav-icon-btn:hover { color: var(--text-primary); border-color: rgba(0,240,255,0.3); }
.nav-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff; border-radius: 8px;
    font-size: 10px; font-weight: 700; line-height: 16px;
    border: 2px solid var(--bg-secondary);
}

/* User dropdown */
.nav-usermenu { position: relative; }
.nav-user-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 6px; border-radius: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.15s;
}
.nav-user-trigger:hover { border-color: rgba(0,240,255,0.3); color: var(--text-primary); }
.nav-user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff; font-weight: 800; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}
.nav-user-name { font-size: 12px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 220px; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 6px; z-index: 1000;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.nav-user-item {
    display: block; padding: 9px 12px; border-radius: 8px;
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.1s; user-select: none;
    text-decoration: none;
}
.nav-user-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.nav-user-item-danger { color: var(--accent-danger); }
.nav-user-item-danger:hover { background: rgba(255,51,102,0.1); color: var(--accent-danger); }
.nav-user-divider { height: 1px; background: var(--border); margin: 6px 4px; }

/* ===== Section icon nav: quick-jump bar under the header (desktop + mobile) ===== */
.nav-primary { display: none !important; } /* replaced by the icon bar below */
#sectionNav {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(180deg, var(--bg-secondary), rgba(13,17,23,0.85));
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#sectionNav::-webkit-scrollbar { display: none; }
.secnav-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; flex: 0 0 auto;
    min-width: 58px; padding: 7px 10px;
    background: transparent; border: 1px solid transparent; border-radius: 12px;
    color: var(--text-secondary); cursor: pointer; font-family: inherit;
    transition: all 0.15s ease; -webkit-tap-highlight-color: transparent;
}
.secnav-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.secnav-btn.active { background: var(--bg-elevated); color: var(--accent-info); border-color: rgba(0,240,255,0.25); }
.secnav-btn:active { transform: scale(0.94); }
.secnav-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.secnav-ico svg { width: 21px; height: 21px; }
.secnav-lbl { font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: 0.2px; }

@media (max-width: 1280px) {
    .nav-search { min-width: 0; }
    .nav-search-lbl { display: none; }
    .nav-btn .nav-lbl { display: none; }
    .nav-pill-new span:not(:first-child) { display: none; }
}
@media (max-width: 900px) {
    .nav-primary { padding-left: 8px; margin-left: 8px; }
    .nav-search-kbd { display: none; }
    .credit-badge .credit-icon { display: none; }
}


/* ===== Navbar hover/interactive polish ===== */
.nav-btn { position: relative; overflow: hidden; }
.nav-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.12), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}
.nav-btn:hover::before { left: 100%; }
.nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,240,255,0.12), 0 0 0 1px rgba(0,240,255,0.15) inset;
}
.nav-btn:active { transform: translateY(0); }
.nav-btn .nav-ico { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.nav-btn:hover .nav-ico { transform: scale(1.18) rotate(-3deg); }

.nav-coldcall:hover {
    box-shadow: 0 4px 18px rgba(139,92,246,0.28), 0 0 0 1px rgba(139,92,246,0.4) inset !important;
}
.nav-coldcall:hover .nav-ico { transform: scale(1.18) rotate(8deg); }

.nav-live:hover {
    box-shadow: 0 4px 18px rgba(16,185,129,0.28), 0 0 0 1px rgba(16,185,129,0.4) inset !important;
}
.nav-live:hover .nav-dot { box-shadow: 0 0 14px #10b981, 0 0 24px #10b981; transform: scale(1.3); transition: all 0.2s; }

.nav-search { position: relative; overflow: hidden; }
.nav-search::after {
    content: ''; position: absolute; inset: -1px;
    border-radius: 10px; padding: 1px;
    background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(0,240,255,0.5) 50%, transparent 60%, transparent 100%);
    background-size: 200% 100%; background-position: -100% 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.nav-search:hover::after { opacity: 1; animation: navSearchSweep 1.4s ease infinite; }
@keyframes navSearchSweep {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.nav-search:hover .nav-search-kbd { background: rgba(0,240,255,0.15); border-color: rgba(0,240,255,0.4); color: var(--accent-info); }

.nav-pill { position: relative; overflow: hidden; }
.nav-pill::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: translateX(-100%); transition: transform 0.5s ease;
    pointer-events: none;
}
.nav-pill:hover::before { transform: translateX(100%); }
.nav-pill:hover { transform: translateY(-2px) scale(1.03); }
.nav-pill-buy:hover { box-shadow: 0 6px 20px rgba(245,158,11,0.5), 0 0 0 1px rgba(245,158,11,0.6) inset; }
.nav-pill-new:hover { box-shadow: 0 6px 20px rgba(0,230,118,0.5), 0 0 0 1px rgba(0,230,118,0.6) inset; }
.nav-pill:active { transform: translateY(0) scale(1); }

.nav-icon-btn { transition: all 0.2s ease; }
.nav-icon-btn:hover {
    transform: translateY(-2px) rotate(-8deg);
    box-shadow: 0 4px 14px rgba(0,240,255,0.2);
    background: var(--bg-hover);
}
.nav-icon-btn:active { transform: translateY(0) rotate(0); }

.credit-badge { transition: all 0.2s ease; cursor: default; }
.credit-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,212,170,0.25);
    background: rgba(0,212,170,0.12);
}

.nav-user-trigger { transition: all 0.2s ease; }
.nav-user-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139,92,246,0.2);
}
.nav-user-avatar { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-user-trigger:hover .nav-user-avatar { transform: rotate(360deg) scale(1.05); }

.nav-user-item { transition: all 0.12s ease; position: relative; }
.nav-user-item:hover { transform: translateX(2px); }
.nav-user-item::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; background: var(--accent-info);
    border-radius: 0 2px 2px 0; transition: height 0.15s ease;
}
.nav-user-item:hover::before { height: 60%; }
.nav-user-item-danger:hover::before { background: var(--accent-danger); }

.navbar-brand { transition: all 0.3s ease; cursor: pointer; }
.navbar-brand:hover { transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(0,240,255,0.6)); }

/* Active state ring (set by JS when route matches) */
.nav-btn.is-active {
    background: rgba(0,240,255,0.08);
    color: var(--accent-info) !important;
    border-color: rgba(0,240,255,0.3) !important;
    box-shadow: 0 0 0 1px rgba(0,240,255,0.15) inset;
}
.nav-btn.is-active .nav-ico { animation: navBtnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes navBtnPop {
    0% { transform: scale(1); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}


/* ===== PWA mobile UX additions (campaigns list / detail / live page) ===== */
.live-call-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}
.live-call-card .lcc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.live-call-card .lcc-phone {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}
.live-call-card .lcc-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.live-call-card .lcc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.live-call-card .lcc-actions .btn,
.live-call-card .lcc-actions .live-act {
    flex: 1 1 calc(50% - 6px);
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 768px) {
    /* Mobile campaign card: 2-row action layout, full-width primary, wrapping secondary */
    .mobile-campaign-card .mc-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .mobile-campaign-card .mc-actions-row1 {
        margin-top: 10px;
    }
    .mobile-campaign-card .mc-actions-row1 .mc-open {
        flex: 1 1 100%;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        min-height: 44px;
    }
    .mobile-campaign-card .mc-actions-row2 {
        margin-top: 6px;
    }
    .mobile-campaign-card .mc-actions-row2 .btn {
        flex: 1 1 calc(50% - 3px);
        min-height: 38px;
        padding: 7px 8px !important;
        font-size: 12px !important;
    }
    .mobile-campaign-card .mc-secondary {
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border) !important;
        color: var(--text-secondary) !important;
    }
    .mobile-campaign-card .mc-clear {
        color: var(--accent-warning) !important;
        border-color: rgba(245,158,11,0.3) !important;
    }
    .mobile-campaign-card .mc-danger {
        background: rgba(255,51,102,0.08) !important;
        border: 1px solid rgba(255,51,102,0.25) !important;
        color: var(--accent-danger) !important;
    }

    /* Campaign detail: action buttons wrap & touch-friendly */
    .live-sliders { padding: 10px !important; }
    .section-header + div[style*="padding:16px 24px"][style*="display:flex"][style*="flex-wrap:wrap"] {
        padding: 12px !important;
        gap: 6px !important;
    }
    /* ensure all primary action buttons in detail header reach 40px */
    #btnStart, #btnPause, #btnResume, #btnStop {
        min-height: 40px !important;
        flex: 1 1 calc(50% - 4px);
    }
    /* dropdown menu inside detail: align to viewport, not parent */
    .actions-dropdown { flex: 1 1 100%; }
    .actions-dropdown-toggle {
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    .actions-dropdown-menu {
        right: 0 !important;
        left: 0 !important;
        min-width: 0 !important;
    }

    /* Live Agents page: header layout */
    #liveTable { background: transparent !important; border: none !important; }
    .live-call-card {
        padding: 12px;
    }
    .live-call-card .lcc-actions .btn,
    .live-call-card .lcc-actions .live-act {
        flex: 1 1 calc(50% - 4px);
    }
    /* The live page hides the desktop-only block via global rule; cards already mobile-only */
}

@media (max-width: 480px) {
    .mobile-campaign-card .mc-actions-row2 .btn {
        flex: 1 1 calc(50% - 3px);
        font-size: 11px !important;
    }
    .live-call-card .lcc-actions .btn,
    .live-call-card .lcc-actions .live-act {
        flex: 1 1 100%;
    }
}


/* ===== MOBILE: tighter campaign card + bigger primary CTA ===== */
@media (max-width: 768px) {
    .mobile-campaign-card { margin-bottom: 10px; border-radius: 14px; }
    .mobile-campaign-card .mc-actions-row1 .mc-open {
        width: 100%;
        padding: 12px 14px !important;
        font-size: 14px !important;
        font-weight: 700;
        border-radius: 10px;
    }
    .mobile-campaign-card .mc-actions-row2 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 8px;
    }
    .mobile-campaign-card .mc-actions-row2 .btn {
        padding: 8px 6px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    /* Bottom-nav: tighter labels + slightly larger icons for thumb-reach */
    .mobile-bottom-nav .nav-item { padding: 6px 4px; min-height: 56px; }
    .mobile-bottom-nav .nav-item .nav-icon { width: 22px; height: 22px; }
    .mobile-bottom-nav .nav-item .nav-label { font-size: 10px; margin-top: 2px; }
}

/* ===== 2026-06-07 mobile nav + section-nav polish ===== */
@media (min-width: 769px) {
  /* center the quick-jump icon bar on browser/desktop */
  #sectionNav { justify-content: center; }
}
@media (max-width: 768px) {
  /* icon bar stays left-aligned + horizontally slideable on phone */
  #sectionNav { justify-content: flex-start; }
  /* keep the top bar above any page content so its buttons always receive taps */
  .navbar { position: relative; z-index: 50; }
  .nav-right { gap: 5px !important; }
  /* notification bell, compose + profile: never shrink, always on top, big tap targets */
  #annBell, #annMega, .nav-user-trigger {
    flex: 0 0 auto !important;
    position: relative; z-index: 6;
  }
  #annBell, #annMega {
    width: 40px !important; height: 40px !important; min-width: 40px;
    font-size: 17px !important;
  }
  .nav-user-trigger {
    min-width: 46px; min-height: 44px !important;
    padding: 4px 7px !important; justify-content: center;
  }
  .nav-user-avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  /* make the notifications bell impossible to miss */
  #annBell {
    border-color: rgba(0,240,255,0.38) !important;
    background: rgba(0,240,255,0.10) !important;
  }
}

/* ===== 2026-06-07 settings page responsive ===== */
@media (max-width: 900px) { .set-grid-2col { grid-template-columns: 1fr !important; } }
@media (max-width: 768px) { #systemHealthGrid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 480px) { #systemHealthGrid { grid-template-columns: repeat(2,1fr) !important; } }

/* ===== 2026-06-07 users table scannability ===== */
#usersTableBody tr { transition: background 0.12s; }
#usersTableBody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
#usersTableBody tr:hover { background: var(--bg-elevated) !important; }

/* ===== 2026-06-07 mobile sticky top bars ===== */
@media (max-width: 768px) {
  .navbar { position: -webkit-sticky !important; position: sticky !important; top: 0; z-index: 60; }
  #sectionNav { position: -webkit-sticky; position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 59; }
}