:root { --green:#3dcd58; --dark:#1b1e22; --mid:#5f6b6d; --bg:#f4f6f5; --card:#fff; --amber:#ffb340; --red:#e5484d; --blue:#3b82f6; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--dark); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:var(--dark); color:#fff; border-bottom:4px solid var(--green); flex-wrap:wrap; gap:8px; }
.brand { display:flex; gap:10px; align-items:center; } .brand small { display:block; color:#b9c2c4; font-size:12px; }
.dot { width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.badges { display:flex; gap:6px; flex-wrap:wrap; } .badge { padding:3px 8px; border-radius:20px; background:#2d3338; font-size:12px; } .badge.warn { background:#5a4a1d; color:#ffd88a; } .badge.ok { background:#1f5130; color:#b8f5c6; }
.tabs { display:flex; gap:4px; padding:8px 20px 0; } .tabs button { border:0; background:transparent; padding:8px 14px; border-radius:8px 8px 0 0; cursor:pointer; font-weight:600; color:var(--mid); } .tabs button.active { background:#fff; color:var(--dark); }
.flow { display:flex; gap:6px; padding:10px 20px; background:#fff; overflow-x:auto; }
.flow div { flex:1; min-width:120px; padding:8px 10px; border-radius:6px; background:#e9eded; color:var(--mid); font-weight:600; font-size:13px; transition:.3s; } .flow b { opacity:.6; margin-right:4px; }
.flow div.on { background:var(--green); color:#fff; } .flow div.done { background:#cdeed4; color:#1f5130; } .flow div.bad { background:#ffe0b3; color:#7a4b00; }
.tab { display:flex; gap:16px; padding:16px 20px; align-items:flex-start; } .tab[hidden] { display:none; }
.col-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; } .col-phone { width:300px; position:sticky; top:10px; }
.card { background:var(--card); border-radius:10px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.07); } .card h2 { margin:0 0 10px; font-size:16px; } .card h3 { margin:14px 0 6px; font-size:14px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row.between { justify-content:space-between; }
select, input, textarea { font:inherit; padding:7px 9px; border:1px solid #cfd6d7; border-radius:6px; background:#fff; } textarea { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
label { display:block; margin:8px 0; font-weight:600; font-size:12.5px; } label input, label textarea { display:block; width:100%; margin-top:3px; font-weight:400; }
#sampleSelect { flex:1; min-width:240px; }
button, .btn { font:inherit; padding:7px 12px; border-radius:6px; border:1px solid #cfd6d7; background:#fff; cursor:pointer; text-decoration:none; color:var(--dark); }
button.primary { background:var(--green); border-color:var(--green); color:#fff; font-weight:700; } button:disabled { opacity:.5; cursor:default; }
details { margin-top:10px; } summary { cursor:pointer; color:var(--mid); font-weight:600; }
.muted { color:var(--mid); } .small { font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } .stat { background:#fff; border-radius:10px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.07); } .stat b { display:block; font-size:22px; } .stat span { color:var(--mid); font-size:12px; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:7px 6px; border-bottom:1px solid #edf0f0; vertical-align:top; } th { font-size:12px; color:var(--mid); }
tbody.clickable tr, .alarms tbody tr { cursor:pointer; } .alarms tbody tr:hover { background:#f6faf7; } .alarms tr.sel { background:#eaf8ed; }
.pill { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap; }
.s-acknowledged { background:#d5f5dc; color:#17652b; } .s-calling, .s-ringing, .s-answered, .s-queued { background:#dbe9ff; color:#1d4ed8; } .s-waiting { background:#fff1d6; color:#8a5a00; }
.s-unacknowledged, .s-failed, .s-busy, .s-no-answer, .s-no-ack, .s-declined, .s-voicemail { background:#ffe1e1; color:#a01c1c; } .s-not_called, .s-duplicate, .s-skipped, .s-stopped, .s-canceled { background:#eceff0; color:#4a5355; } .s-needs_review { background:#f3e3ff; color:#6b21a8; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:3px 10px; font-size:13px; } .kv div:nth-child(odd) { color:var(--mid); }
.timeline { list-style:none; padding:0; margin:0; font-size:13px; } .timeline li { padding:5px 0 5px 14px; border-left:2px solid #dfe5e6; position:relative; } .timeline li::before { content:''; position:absolute; left:-5px; top:10px; width:8px; height:8px; border-radius:50%; background:#b7c2c4; }
.timeline li.t-acknowledged::before { background:var(--green); } .timeline li.t-no-ack::before, .timeline li.t-exhausted::before { background:var(--red); } .timeline li.t-call::before, .timeline li.t-answered::before { background:var(--blue); }
.timeline time { color:var(--mid); font-family:ui-monospace,monospace; font-size:12px; margin-right:6px; }
.script { background:#f1f8f3; border-left:4px solid var(--green); padding:8px 12px; font-style:italic; border-radius:4px; }
.ackbox { background:#d5f5dc; border-radius:8px; padding:10px 12px; font-weight:600; color:#17652b; }
/* phone */
.phone { background:#111; border-radius:34px; padding:14px 14px 18px; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.phone-top { display:flex; justify-content:space-between; font-size:12px; padding:0 10px 6px; color:#bbb; }
.phone-who { font-size:12px; padding:0 6px; } .phone-who label { color:#bbb; font-weight:400; margin:0 0 6px; } .phone-who select { width:100%; background:#222; color:#fff; border-color:#333; padding:4px; }
.phone-screen { background:linear-gradient(#1d2a22,#0f1512); border-radius:18px; min-height:230px; padding:14px; text-align:center; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.idle-msg { color:#8a9; } .caller { font-size:20px; font-weight:700; } .callee { color:#9cb; font-size:12px; }
.ring { animation:ring 1s infinite; } @keyframes ring { 0%,100% { transform:rotate(0) } 10%,30% { transform:rotate(-8deg) } 20%,40% { transform:rotate(8deg) } 50% { transform:rotate(0) } }
.call-btns { display:flex; justify-content:space-around; margin-top:8px; } .call-btns button { width:64px; height:64px; border-radius:50%; border:0; font-size:22px; color:#fff; }
.answer { background:#22c55e; } .decline, .hangup { background:#ef4444; color:#fff; border:0; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 8px 8px; } .keypad button { background:#2a2a2a; color:#fff; border:0; height:46px; border-radius:23px; font-size:20px; } .keypad button:disabled { opacity:.35; } .keypad button.k1:not(:disabled) { background:var(--green); }
.phone-actions { text-align:center; } .hangup { width:120px; border-radius:20px; padding:8px; } .phone label.small { color:#999; margin-top:8px; text-align:center; }
.transcript { font-size:12px; color:#cde; text-align:left; max-height:110px; overflow:auto; background:rgba(255,255,255,.05); padding:6px 8px; border-radius:8px; }
.queue { font-size:11px; color:#9cb; }
.prose h3 { margin-top:18px; } .prose code { background:#eef2f2; padding:1px 4px; border-radius:4px; } .prose pre { background:#1b1e22; color:#e6e6e6; padding:10px; border-radius:8px; overflow:auto; }
@media (max-width:900px) { .tab { flex-direction:column; } .col-phone { width:100%; position:static; } .stats { grid-template-columns:repeat(2,1fr); } .kv { grid-template-columns:1fr; } }
body.phone-only header, body.phone-only nav, body.phone-only .flow, body.phone-only .col-main { display:none; } body.phone-only .col-phone { width:100%; max-width:360px; margin:auto; }