/* tdialer screens - shared look (matches the approved templates) */
:root{--ink:#0F172A;--muted:#556274;--line:#DCE2E8;--field:#C5CED8;--bg:#F4F6F8;--card:#FFFFFF;--nav:#0F1B2D;--nav2:#16263D;--navline:#33465E;--navtext:#E6EDF5;--navmuted:#A9B8CA;
  --accent:#0E6E8C;--accentd:#0A5068;--ok:#15803D;--okbg:#DCFCE7;--okfg:#14532D;--warn:#B45309;--warnbg:#FEF3C7;--warnfg:#78350F;--bad:#B91C1C;--badbg:#FEE2E2;--readybg:#DBEAFE;--readyfg:#1E3A8A;--wrapbg:#EDE9FE;--wrapfg:#4C1D95}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Inter,system-ui,"Segoe UI",Arial,sans-serif}
a{color:var(--accent)}a:hover{color:var(--accentd)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.top{background:var(--nav);color:var(--navtext);padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.top .brand{font-size:18px;font-weight:700}
.top .who{font-size:14px;color:var(--navmuted)}
.top .sp{flex:1 1 auto}
.top select{height:40px;border-radius:8px;border:1px solid var(--navline);background:var(--nav2);color:var(--navtext);padding:0 8px;font-size:14px}
.top label{font-size:13px;color:var(--navmuted)}
.tbtn{height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--navline);background:transparent;color:var(--navtext);font-size:14px}
.tbtn.amber{border-color:#F59E0B;color:#FCD34D;font-weight:600}
.tbtn.go{border:0;background:#16A34A;color:#fff;font-weight:600}
.top a.tbtn{display:inline-flex;align-items:center;text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;background:#334155;color:#E2E8F0}
.pill .dot{width:10px;height:10px;border-radius:50%;background:currentColor}
.s-READY{background:var(--readybg);color:var(--readyfg)}
.s-INCALL{background:var(--okbg);color:var(--okfg)}
.s-WRAPUP{background:var(--wrapbg);color:var(--wrapfg)}
.s-PAUSED{background:var(--warnbg);color:var(--warnfg)}
.s-CONNECTING{background:#E0F2FE;color:#075985}
.s-LOGGEDOUT{background:#E2E8F0;color:#334155}
main{padding:18px 20px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px}
.card h2{margin:0;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;font-size:14px}
.kv .k{color:var(--muted);font-size:12px}
.big{font-size:24px;font-weight:700}
.phone{font-size:18px;color:#334155}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600}
.field input,.field select,.field textarea{min-height:44px;border:1px solid var(--field);border-radius:8px;padding:8px 12px;font-size:15px;background:#fff;color:var(--ink)}
.btn{min-height:46px;padding:0 16px;border-radius:8px;border:1px solid var(--field);background:#fff;color:var(--ink);font-size:14px;font-weight:600}
.btn.primary{border:0;background:var(--accent);color:#fff}
.btn.green{border:0;background:var(--ok);color:#fff}
.btn.red{border:0;background:var(--bad);color:#fff}
.btn.redline{border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:34px;padding:0 10px;font-size:12px;font-weight:500;border-radius:6px}
.btns2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.btns3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.note{margin:0;font-size:13px;color:var(--muted)}
.hint{font-size:13px;display:flex;align-items:center;gap:8px}
.hint .dot{width:10px;height:10px;border-radius:50%;background:#94A3B8}
.hint.ok{color:#166534}.hint.ok .dot{background:#16A34A}
.hint.bad{color:var(--bad)}.hint.bad .dot{background:var(--bad)}
.foot{padding:0 20px 20px;display:flex;flex-wrap:wrap;gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-size:13px;color:var(--muted)}
.stat b{color:var(--ink);font-size:16px;margin-left:6px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}
.tile .l{font-size:13px;color:var(--muted)}.tile .v{font-size:32px;font-weight:700;letter-spacing:-.02em}.tile .s{font-size:12px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.wide{flex:999 1 640px;min-width:0}.narrow{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;font-weight:600;padding:8px}
td{padding:9px 8px;border-top:1px solid #E5E9EE;vertical-align:middle}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.line{display:flex;justify-content:space-between;font-size:14px;gap:12px}
.bar{height:10px;background:#E5E9EE;border-radius:999px;overflow:hidden}.bar div{height:10px;background:var(--ok);border-radius:999px}
.err{color:var(--bad);font-size:14px;min-height:20px}
.okmsg{color:var(--ok);font-size:14px;min-height:20px}
.script{font-size:16px;line-height:1.7;color:#1E293B}
.hist{font-size:13px;color:#334155;display:flex;flex-direction:column;gap:4px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{min-height:40px;padding:0 16px;border-radius:8px;border:1px solid var(--field);background:#fff;font-weight:600}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px}
.chk input{width:20px;height:20px}
.hidden{display:none!important}
.pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pad button{min-height:40px;border-radius:6px;border:1px solid var(--field);background:#fff;font-weight:600}
.login{min-height:100vh;display:flex;flex-wrap:wrap}
.login .side{flex:1 1 420px;background:var(--nav);color:var(--navtext);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.login .side h1{margin:0;font-size:34px;line-height:1.15}
.login .side p{margin:0;color:var(--navmuted)}
.login .formside{flex:1 1 420px;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.login form{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;display:flex;flex-direction:column;gap:18px}
@media (max-width:600px){.login .side{padding:28px}.login .side h1{font-size:26px}main{padding:14px}}