:root{--bg: #0f141b;--panel: #1a212b;--panel-2: #232c38;--border: #2b3542;--text: #e6edf3;--muted: #93a1b2;--brand: #3b82f6;--brand-dark: #2563eb;--ok: #22c55e;--warn: #f59e0b;--bad: #ef4444;--shadow: 0 1px 3px rgba(0, 0, 0, .4);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:var(--brand)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:700;font-size:18px}.topbar nav a{margin-right:16px;text-decoration:none;color:var(--muted);font-weight:500}.topbar nav a.active{color:var(--brand)}.container{max-width:1200px;margin:0 auto;padding:20px}.center-card{max-width:380px;margin:8vh auto}.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:20px}.card h2{margin-top:0}label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}input,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;background:var(--bg);color:var(--text)}input::placeholder{color:var(--muted)}select option{background:var(--panel);color:var(--text)}button{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer}button:hover{background:var(--brand-dark)}button.secondary{background:var(--panel-2);color:var(--text)}button.secondary:hover{background:#2b3542}button:disabled{opacity:.5;cursor:not-allowed}.error{color:var(--bad);font-size:13px;margin-top:10px}.muted{color:var(--muted)}.row{display:flex;gap:16px;flex-wrap:wrap}.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.agent-card{cursor:pointer}.agent-card.selected{outline:2px solid var(--brand)}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.status-ONLINE{background:var(--ok)}.status-CONNECTING,.status-CAMERA_BLOCKED{background:var(--warn)}.status-OFFLINE,.status-DISABLED,.status-DISCONNECTED{background:#9aa5b1}.monitor{display:grid;grid-template-columns:1fr 300px;gap:16px}.video-wrap{position:relative;background:#0b1220;border-radius:10px;overflow:hidden;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center}.video-wrap video{width:100%;height:100%;object-fit:contain;background:#000}.video-placeholder{color:#93a1b5;font-size:14px}.state-panel .state-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}.badge.good{background:#dcfce7;color:#166534}.badge.warn{background:#fef3c7;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}.badge.neutral{background:var(--panel-2);color:var(--muted)}code{background:var(--panel-2);padding:1px 6px;border-radius:5px;font-size:13px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-size:14px}th{color:var(--muted);font-weight:600}.pill{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted)}.landing{max-width:760px;margin:8vh auto 0;text-align:center}.landing-title{font-size:34px;margin-bottom:6px}.landing-sub{margin-bottom:32px}.landing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 560px){.landing-grid{grid-template-columns:1fr}}.landing-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:36px 24px;cursor:pointer;text-align:center;color:var(--text);transition:transform .08s ease,border-color .08s ease}.landing-card:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--panel)}.landing-emoji{font-size:46px;line-height:1;margin-bottom:12px}.landing-card-title{font-size:22px;font-weight:700}.landing-card-sub{font-size:13px;color:var(--muted);margin-top:6px}.linkbtn{background:none;border:none;color:var(--brand);padding:0;font-size:13px;font-weight:500;cursor:pointer}.linkbtn:hover{text-decoration:underline;background:none}.link-row{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.notice{background:#dcfce7;color:#166534;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px}.mode-banner{text-align:center;font-weight:700;font-size:12px;letter-spacing:.5px;padding:6px 12px}.mode-banner.mode-simulation{background:#fef3c7;color:#92400e}.mode-banner.mode-shadow{background:#dbeafe;color:#1e40af}.mode-banner.mode-live{background:#fee2e2;color:#991b1b}.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}.dash-head h1{font-size:24px;margin:0}.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}@media (max-width: 720px){.summary-cards{grid-template-columns:repeat(2,1fr)}}.stat-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}.stat-card .stat-label{color:var(--muted);font-size:13px}.stat-card .stat-num{font-size:40px;font-weight:800;line-height:1.1;margin-top:6px}.stat-card.ok .stat-num{color:var(--ok)}.stat-card.warn .stat-num{color:var(--warn)}.stat-card.bad .stat-num{color:var(--bad)}.section-title{font-size:15px;font-weight:700;margin:4px 0 12px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}.paused-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}.paused-strip .stat-card{border-color:var(--bad)}.paused-strip .p-reason{font-size:13px;color:var(--text);margin:6px 0}.paused-strip .p-time{font-size:12px;color:var(--muted)}.agent-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.wall-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}.wall-video{position:relative;background:#05070b;aspect-ratio:16 / 10;display:flex;align-items:center;justify-content:center}.wall-video video{width:100%;height:100%;object-fit:cover}.wall-video .placeholder{color:#64748b;font-size:13px}.wall-video .state-chip{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}.chip-ON_CALL{background:#f59e0be6;color:#1a1200}.chip-READY{background:#22c55ee6;color:#04140a}.chip-PAUSED{background:#ef4444eb;color:#fff}.chip-OFFLINE{background:#64748bd9;color:#fff}.wall-video .timer{position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;background:#0000008c;color:#fff;padding:3px 8px;border-radius:6px;font-variant-numeric:tabular-nums}.wall-body{padding:14px 16px}.wall-name{font-weight:700;font-size:17px}.wall-status{font-size:13px;color:var(--muted);margin-top:3px}.wall-actions{display:flex;gap:10px;margin-top:14px}.wall-actions button{flex:1}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:40}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,96vw);background:var(--bg);border-left:1px solid var(--border);z-index:41;overflow-y:auto;box-shadow:-8px 0 30px #0006}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}.drawer-head h2{margin:0;font-size:18px}.drawer-body{padding:20px}.drawer-body .card{background:var(--panel)}.timeline-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}.paused-card{border-color:var(--bad)}.paused-title{font-size:26px;font-weight:800;color:var(--bad);letter-spacing:1px}.paused-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.paused-grid .wide{grid-column:1 / -1}.paused-grid>div>span{font-size:12px}.paused-grid>div>div{font-weight:600;margin-top:2px}@media (max-width: 520px){.paused-grid{grid-template-columns:1fr}}.connbar{font-size:12px;padding:6px 10px;border-radius:8px;display:inline-block;margin-bottom:10px}.connbar.up{background:#dcfce7;color:#166534}.connbar.down{background:#fee2e2;color:#991b1b}.wall-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.mini-chip{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}.mini-chip.ok{background:#22c55e26;color:var(--ok);border-color:#22c55e66}.mini-chip.warn{background:#f59e0b26;color:var(--warn);border-color:#f59e0b66}.mini-chip.bad{background:#ef444426;color:var(--bad);border-color:#ef444466}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.transcript{max-height:260px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px;font-size:13px;line-height:1.5}.t-seg{padding:3px 4px;border-radius:4px}.t-seg.low{background:#f59e0b1f}.t-time{font-size:11px;margin-right:4px}.mic-status{display:inline-flex;align-items:center;gap:8px;font-size:14px;padding:8px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--border)}.mic-status.on{color:var(--ok);border-color:#22c55e66}.mic-status.off{color:var(--muted)}.mic-status.denied{color:var(--bad);border-color:#ef444466}.mic-dot{width:10px;height:10px;border-radius:50%;background:currentColor}.mic-status.on .mic-dot{animation:micpulse 1.4s ease-in-out infinite}@keyframes micpulse{0%,to{opacity:1}50%{opacity:.35}}.scripts-layout{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}@media (max-width: 820px){.scripts-layout{grid-template-columns:1fr}}.btn-like{cursor:pointer;display:inline-flex;align-items:center;padding:8px 14px;border-radius:8px;font-size:14px}.script-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px;border-radius:8px;border:1px solid var(--border);margin-bottom:8px;cursor:pointer}.script-row:hover{background:var(--panel-2)}.script-row.active{border-color:var(--brand);background:var(--panel-2)}.section-edit{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--bg)}.phrase-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 620px){.phrase-grid{grid-template-columns:1fr}}.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px}.chk input{width:auto}.script-body{font-size:12px;margin-top:8px;max-height:60px;overflow-y:auto;padding:6px;background:var(--panel-2);border-radius:6px}
