:root{
  /* ── color tokens (light) — saffron · cream · pastel green ── */
  --bg:#FAF3E2; --surface:#FFFDF6; --surface-2:#F4ECD8; --border:#EADFC6; --border-strong:#DBCBAA;
  --text:#2C2A1E; --text-2:#6B6450; --text-3:#9A9176;
  --accent:#2E8B57; --accent-hover:#267348; --accent-soft:#E6F1EA; --accent-ink:#1F5E3C;
  --saffron:#E8A21C; --saffron-hover:#D38F0E; --saffron-soft:#FBEFCF; --saffron-ink:#6A4A06; --on-saffron:#3A2A08;
  --amber:#C0821A; --amber-soft:#FBEFCF; --blue:#4E7BA6; --blue-soft:#E6ECF4;
  --red:#C0533A; --red-soft:#F6E3DA; --grey-soft:#EFE9DA;
  /* space (4pt grid) */ --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  /* radius */ --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  /* elevation */ --e1:0 1px 2px rgba(16,32,24,.05);--e2:0 6px 20px rgba(16,32,24,.08);--e3:0 12px 32px rgba(16,32,24,.12);
  /* motion */ --t-fast:140ms cubic-bezier(.2,.6,.2,1); --t-base:240ms cubic-bezier(.2,.6,.2,1);
  --sidebar:248px; --topbar:56px;
}
html[data-theme="dark"]{
  --bg:#16130D; --surface:#201C14; --surface-2:#1A1610; --border:#332E20; --border-strong:#403925;
  --text:#F1E8D4; --text-2:#B8AD90; --text-3:#867B5C;
  --accent:#6FC79A; --accent-hover:#5DB98A; --accent-soft:#1B2A22; --accent-ink:#A8E8C4;
  --saffron:#F2B53E; --saffron-hover:#E5A52C; --saffron-soft:#322611; --saffron-ink:#F7CE78; --on-saffron:#2A1E07;
  --amber:#E3B15A; --amber-soft:#2A2114; --blue:#7CA6CE; --blue-soft:#19232E;
  --red:#E5836A; --red-soft:#2E1A14; --grey-soft:#211C14;
  --e1:0 1px 2px rgba(0,0,0,.4);--e2:0 6px 20px rgba(0,0,0,.5);--e3:0 12px 32px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;grid-template-rows:var(--topbar) 1fr;
  grid-template-areas:"side top" "side main";height:100vh}

/* ── sidebar ── */
.side{grid-area:side;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s5)}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--saffron),var(--accent));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;box-shadow:var(--e1)}
.brand h1{font-size:15px;font-weight:650;letter-spacing:-.2px}
.brand span{font-size:11px;color:var(--text-3);font-weight:500}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:var(--s2)}
.nav .label{font-size:10.5px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);
  padding:var(--s4) var(--s3) var(--s2)}
.nav a{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border-radius:var(--r-sm);
  color:var(--text-2);font-weight:550;font-size:13.5px;transition:background var(--t-fast),color var(--t-fast)}
.nav a .ic{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
html[data-theme="dark"] .nav a.active{color:var(--accent)}
.nav a .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;border-radius:var(--r-pill);display:grid;place-items:center;padding:0 5px}
.side .foot{margin-top:auto;display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  border-radius:var(--r-sm);background:var(--surface-2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:650;flex:none}
.side .foot .who{font-size:12.5px;font-weight:600;line-height:1.2}
.side .foot .who small{color:var(--text-3);font-weight:500;font-size:11px}

/* ── topbar ── */
.top{grid-area:top;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s6)}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:var(--s2);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:7px var(--s4);color:var(--text-3)}
.search input{border:none;background:none;outline:none;color:var(--text);font-size:13.5px;width:100%}
.top .spacer{flex:1}
.rolepick{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px}
.rolepick button{padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--text-2)}
.rolepick button.on{background:var(--surface);color:var(--text);box-shadow:var(--e1)}
.iconbtn{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-2);
  border:1px solid var(--border);background:var(--surface)}
.iconbtn:hover{background:var(--surface-2)}

/* ── main ── */
.main{grid-area:main;overflow-y:auto;padding:var(--s6) var(--s8)}
.view{display:none;animation:fade var(--t-base)}
.view.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--s5)}
.page-h h2{font-size:22px;font-weight:680;letter-spacing:-.4px}
.page-h p{color:var(--text-2);font-size:13.5px;margin-top:2px}

/* generic bits */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e1)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill)}
.chip.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-pending{color:var(--amber);background:var(--amber-soft)}
.c-done{color:var(--accent);background:var(--accent-soft)}
.c-call{color:var(--blue);background:var(--blue-soft)}
.c-alert{color:var(--red);background:var(--red-soft)}
.c-grey{color:var(--text-2);background:var(--grey-soft)}
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;font-size:13.5px;padding:9px var(--s4);
  border-radius:var(--r-sm);transition:all var(--t-fast)}
.btn-primary{background:var(--saffron);color:var(--on-saffron);box-shadow:var(--e1)}
.btn-primary:hover{background:var(--saffron-hover);transform:translateY(-1px);box-shadow:var(--e2)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.filters{display:flex;gap:var(--s2);margin-bottom:var(--s4)}
.filters button{padding:6px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--text-2);
  border:1px solid var(--border);background:var(--surface)}
.filters button.on{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
html[data-theme="dark"] .filters button.on{color:var(--accent)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s6)}
.stat{padding:var(--s5)}
.stat .k{font-size:12px;color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:6px}
.stat .v{font-size:28px;font-weight:720;letter-spacing:-.5px;margin-top:6px}
.stat .sub{font-size:12px;color:var(--text-3);margin-top:2px}

/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  font-weight:650;padding:0 var(--s4) var(--s3)}
.tbl tbody tr{background:var(--surface);transition:background var(--t-fast);cursor:pointer}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody td{padding:var(--s4);border-top:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.tbl tbody tr:first-child td{border-top:none}
.cust{display:flex;align-items:center;gap:var(--s3)}
.cust .av{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:650;font-size:13px;flex:none}
html[data-theme="dark"] .cust .av{color:var(--accent)}
.cust .nm{font-weight:600}.cust .ph{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.muted{color:var(--text-3);font-size:12.5px}

/* ── call detail ── */
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-weight:600;font-size:13px;margin-bottom:var(--s4)}
.backlink:hover{color:var(--text)}
.detail{display:grid;grid-template-columns:340px 1fr;gap:var(--s6);align-items:start}
.profile h3{font-size:18px;font-weight:680;letter-spacing:-.3px}
.profile .meta{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.profile .row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.profile .row .lab{color:var(--text-3)}
.phone-line{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:10px var(--s3);margin-top:var(--s2)}
.phone-line .num{font-weight:650;font-variant-numeric:tabular-nums}
.callbtn{width:34px;height:34px;border-radius:50%;background:var(--saffron);color:var(--on-saffron);display:grid;place-items:center;box-shadow:var(--e1)}
.callbtn:hover{background:var(--saffron-hover)}
.history{margin-top:var(--s5)}
.history .ev{display:flex;gap:var(--s3);padding:var(--s2) 0}
.history .ev .tk{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none}
.history .ev .tx{font-size:12.5px}.history .ev .tx small{color:var(--text-3);display:block;font-size:11px}

.outcomes{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.oc{padding:10px var(--s4);border-radius:var(--r-sm);font-weight:600;font-size:13.5px;border:1px solid var(--border);
  background:var(--surface);transition:all var(--t-fast)}
.oc:hover{border-color:var(--border-strong)}
.oc.sel{border-color:transparent}
.oc[data-o="connected"].sel{background:var(--accent);color:#0F2619}
.oc[data-o="noanswer"].sel{background:var(--amber);color:#2A1E07}
.oc[data-o="busy"].sel{background:var(--blue);color:#0E1B29}
.oc[data-o="refused"].sel{background:var(--red);color:#2E120C}

.feedback{margin-top:var(--s2)}
.q{padding:var(--s5) 0;border-top:1px solid var(--border)}
.q:first-child{border-top:none}
.q .qt{font-weight:600;font-size:14px;margin-bottom:var(--s3)}
.q .qt .tagp{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:var(--r-pill);margin-left:8px}
html[data-theme="dark"] .q .qt .tagp{color:var(--accent)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opt{padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-pill);font-size:13px;font-weight:550;
  transition:all var(--t-fast);user-select:none}
.opt:hover{border-color:var(--border-strong)}
.opt.on{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-weight:650}
html[data-theme="dark"] .opt.on{color:var(--accent)}
.opt.issue.on{background:var(--red-soft);color:var(--red)}
.rating{display:flex;gap:var(--s2)}
.rating .face{width:46px;height:46px;border-radius:var(--r-md);border:1px solid var(--border);font-size:22px;
  display:grid;place-items:center;transition:all var(--t-fast)}
.rating .face:hover{transform:translateY(-2px)}
.rating .face.on{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s3);font-family:inherit;
  font-size:13.5px;color:var(--text);background:var(--surface-2);resize:vertical;min-height:74px;outline:none}
textarea:focus{border-color:var(--accent)}
.saverow{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
.hint{font-size:12.5px;color:var(--text-3)}
.followbox{display:none;align-items:center;gap:var(--s3);background:var(--amber-soft);color:var(--amber);
  border-radius:var(--r-md);padding:var(--s4);font-weight:600;font-size:13px;margin-top:var(--s2)}
.followbox.show{display:flex}

/* import funnel */
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin:var(--s5) 0}
.fn{padding:var(--s5) var(--s4);text-align:center}
.fn .n{font-size:26px;font-weight:720;letter-spacing:-.5px}
.fn .l{font-size:12px;color:var(--text-2);font-weight:600;margin-top:4px}
.fn.good .n{color:var(--accent)} .fn.bad .n{color:var(--red)} .fn.warn .n{color:var(--amber)}

/* charts */
.charts{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s4)}
.bars{display:flex;align-items:flex-end;gap:var(--s4);height:200px;padding:var(--s4) var(--s2) 0}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);height:100%;justify-content:flex-end}
.bar .col{width:60%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-hover));transition:height var(--t-base)}
.bar .bl{font-size:11.5px;color:var(--text-2);font-weight:600}
.donut{width:170px;height:170px;border-radius:50%;margin:var(--s4) auto;
  background:conic-gradient(var(--accent) 0 62%,var(--amber) 62% 82%,var(--red) 82% 100%);
  display:grid;place-items:center;position:relative}
.donut::after{content:"";width:104px;height:104px;border-radius:50%;background:var(--surface)}
.donut .mid{position:absolute;text-align:center}.donut .mid b{font-size:22px;font-weight:720}.donut .mid small{font-size:11px;color:var(--text-3)}
.legend{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.legend div{display:flex;align-items:center;gap:var(--s2);font-size:12.5px;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.queue .qrow{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-top:1px solid var(--border)}
.queue .qrow:first-child{border-top:none}
.queue .qrow .gr{flex:1}.queue .qrow .gr b{font-weight:600;font-size:13.5px}.queue .qrow .gr small{color:var(--text-3);display:block;font-size:12px}
.sla{font-size:11.5px;font-weight:700;color:var(--red)}
.p-title{font-size:13px;font-weight:680;margin-bottom:var(--s4);display:flex;align-items:center;justify-content:space-between}
.hide{display:none!important}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

/* ── form controls ── */
select,input[type=text],input[type=number],input[type=month]{font-family:inherit;font-size:13px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;outline:none}
select:focus,input:focus{border-color:var(--accent)}
.req{font-size:10px;font-weight:700;color:var(--red);background:var(--red-soft);padding:2px 8px;border-radius:var(--r-pill);margin-left:8px;letter-spacing:.3px}
/* segmented control */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{padding:6px 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:650;color:var(--text-2)}
.seg button.on{box-shadow:var(--e1);color:#fff}
.seg button[data-t=interested].on{background:var(--blue)}
.seg button[data-t=booking].on{background:var(--saffron);color:var(--on-saffron)}
.seg button[data-t=order].on{background:var(--accent);color:#0F2619}
/* cross-sell builder */
.xsell{background:var(--saffron-soft);border:1px solid var(--saffron);border-radius:var(--r-md);padding:var(--s4)}
html[data-theme=dark] .xsell{border-color:var(--border-strong)}
.builder{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.builder .qty{width:80px}
.items{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.item{display:flex;align-items:center;gap:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px var(--s3);font-size:13px}
.item .x{margin-left:auto;color:var(--text-3);cursor:pointer;font-weight:700}
.typechip{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill)}
.t-order{background:var(--accent-soft);color:var(--accent-ink)}
.t-booking{background:var(--saffron-soft);color:var(--saffron-ink)}
.t-interested{background:var(--blue-soft);color:var(--blue)}
/* report toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;margin-bottom:var(--s5);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.toolbar .fl{display:flex;flex-direction:column;gap:5px}
.toolbar .fl label{font-size:10.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--accent)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* question builder */
.qb{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s4);align-items:start}
.qrow2{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-top:1px solid var(--border)}
.qrow2:first-child{border-top:none}.qrow2 .gr{flex:1}.qrow2 .gr b{font-size:13.5px;font-weight:600}.qrow2 .gr small{color:var(--text-3);display:block;font-size:12px}
.qtype{font-size:10px;font-weight:700;padding:2px 9px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.qtype.lt{background:var(--saffron-soft);color:var(--saffron-ink)}
.qtype.mc{background:var(--blue-soft);color:var(--blue)}
/* previous feedback */
.prev{background:var(--accent-soft);border-radius:var(--r-md);padding:var(--s4);margin-top:var(--s4)}
.prev .pt{font-size:10.5px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.prev .pl{font-size:12.5px;color:var(--text-2);display:flex;justify-content:space-between;padding:2px 0}
/* call screen — new layout */
.callstack{display:flex;flex-direction:column;gap:var(--s4)}
.callcard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6);padding:var(--s5)}
.callcard .idz{display:flex;align-items:center;gap:var(--s3)}
.callcard .phones{display:flex;flex-direction:column;gap:var(--s2);min-width:230px}
.callcard .metaz{display:flex;gap:var(--s6);margin-left:auto;flex-wrap:wrap}
.callcard .metaz .row{display:flex;flex-direction:column;gap:3px}
.callcard .metaz .lab{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;font-weight:650}
.callmid{display:grid;grid-template-columns:1fr 344px;gap:var(--s4);align-items:start}
@media(max-width:1080px){.callmid{grid-template-columns:1fr}}
/* searchable city dropdown */
.combo{position:relative}
.combo input{width:100%}
.combo-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--e2);max-height:240px;overflow-y:auto;display:none}
.combo-list.open{display:block}
.combo-item{padding:8px var(--s3);font-size:13px;cursor:pointer}
.combo-item:hover{background:var(--accent-soft);color:var(--accent-ink)}
.combo-empty{padding:10px var(--s3);font-size:12.5px;color:var(--text-3)}
/* collapsible sidebar */
.app.collapsed{grid-template-columns:68px 1fr}
.app.collapsed .nav a{font-size:0;justify-content:center;padding:10px 0}
.app.collapsed .nav a .badge{display:none}
.app.collapsed .nav .label{display:none}
.app.collapsed .brand h1,.app.collapsed .brand span{display:none}
.app.collapsed .brand{justify-content:center;padding:var(--s2) 0 var(--s4)}
.app.collapsed .side{padding:var(--s3) var(--s2)}
.app.collapsed .side .foot{justify-content:center}
.app.collapsed .side .foot .who{display:none}
/* tighter customer card — two rows */
.callcard{flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s4) var(--s5)!important}
.ccrow1{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ccrow1 h3{font-size:15px;font-weight:680;margin:0;line-height:1.1}
.citytag{font-size:12px}
.phgroup{display:flex;align-items:center;gap:var(--s5);margin-left:auto;flex-wrap:wrap}
.phchip{display:flex;align-items:center;gap:8px}
.phchip .num{font-weight:650;font-size:13.5px;font-variant-numeric:tabular-nums}
.phchip .num.bk{font-weight:550;font-size:12.5px;color:var(--text-2)}
.phchip .num.bk small{color:var(--text-3)}
.callbtn.sm{width:28px;height:28px}
.callbtn.ghost{background:var(--surface-2);color:var(--accent);border:1px solid var(--border);box-shadow:none}
.callbtn.ghost:hover{background:var(--accent-soft)}
.callcard .ccrow2{display:flex;gap:var(--s6);flex-wrap:wrap;margin-left:0;padding-top:var(--s3);border-top:1px solid var(--border)}
.ccrow2 .row{display:flex;flex-direction:column;gap:2px}
.ccrow2 .lab{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;font-weight:650}
.ccrow2 .row span:not(.lab):not(.chip){font-size:13px;font-weight:600}
.callmid .card{padding:var(--s4)!important}
/* task ageing */
.age{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}
.age.ok{color:var(--accent);background:var(--accent-soft)}
.age.warn{color:var(--amber);background:var(--amber-soft)}
.age.late{color:var(--red);background:var(--red-soft)}
/* busy scheduler */
.sched{display:none;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);background:var(--blue-soft);border-radius:var(--r-md);padding:var(--s4);margin-top:var(--s2)}
.sched.show{display:flex}
.sched .fl{display:flex;flex-direction:column;gap:5px}
.sched .fl label{font-size:10.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
/* distribution */
.alloc{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.alloc .arow{display:flex;align-items:center;gap:var(--s3);padding:8px var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.alloc .arow .nm{font-weight:600;font-size:13.5px;min-width:120px}
.alloc .arow input{width:82px;text-align:center}
.alloc .arow .bar{flex:1;height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;max-width:220px}
.alloc .arow .bar i{display:block;height:100%;background:var(--accent)}
.av.mini{width:30px;height:30px;border-radius:9px;font-size:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:650;flex:none}
/* agent performance */
.perf .prow{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-top:1px solid var(--border)}
.perf .prow:first-child{border-top:none}
.perf .nm{font-weight:600;font-size:13.5px;min-width:130px}
.perf .track{flex:1;height:9px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;min-width:100px}
.perf .track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover))}
.perf .pct{font-weight:700;font-size:13px;min-width:44px;text-align:right}
.perf .cnt{font-size:12px;color:var(--text-2);min-width:92px;text-align:right}
/* per-question report breakdown */
.qbrk{display:flex;flex-direction:column;gap:var(--s5)}
.qb-h{display:flex;align-items:center;font-weight:600;font-size:13.5px;margin-bottom:var(--s3)}
.qb-rows{display:flex;flex-direction:column;gap:8px}
.qb-row{display:flex;align-items:center;gap:var(--s3);font-size:13px}
.qb-row>span:first-child{min-width:200px}
.qb-track{flex:1;height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;max-width:300px}
.qb-track i{display:block;height:100%;background:var(--accent)}
.qb-track i.bad{background:var(--red)}
.qb-track i.grey{background:var(--text-3)}
.qb-row b{min-width:42px;text-align:right}
.qb-row .pc{min-width:46px;text-align:right;color:var(--text-3);font-size:12px}
/* activity id + compile + per-customer close */
.actid{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);letter-spacing:.3px}
.pillcheck{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);cursor:pointer}
.pillcheck input{width:auto}
.scrolllist{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:var(--s3)}
.closerow{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border-top:1px solid var(--border)}
.closerow:first-child{border-top:none}
.closerow .gr{flex:1}
.closerow .gr b{font-size:13px;font-weight:600}
.closerow .gr small{color:var(--text-3);display:block;font-size:11.5px}
.closerow select{min-width:210px}
/* row actions, question picker, phone pairing */
.rowacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.minibtn{padding:5px 10px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.minibtn:hover{background:var(--surface-2)}
.minibtn.danger{color:var(--red)}
.qpick{display:flex;align-items:center;gap:9px;padding:9px var(--s3);border:1px solid var(--border);border-radius:var(--r-sm);font-size:13px;background:var(--surface)}
.qpick input{width:auto}
.qpick .qtype{margin-left:2px}
.qpick .muted{margin-left:auto}
.pair{display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:center}
@media(max-width:820px){.pair{grid-template-columns:1fr}}
.qrwrap{display:grid;place-items:center;padding:var(--s3);background:#fff;border:1px solid var(--border);border-radius:var(--r-md)}
/* agent connect banner + performance */
.banner{display:flex;align-items:center;gap:var(--s3);background:var(--saffron-soft);border:1px solid var(--saffron);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-bottom:var(--s5);font-size:13.5px;font-weight:600;color:var(--saffron-ink)}
.rankb{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;font-weight:800;font-size:12px;background:var(--surface-2);color:var(--text-2)}
.rankb.top{background:var(--saffron-soft);color:var(--saffron-ink)}
.scorein{width:60px;text-align:center}
.minibar{height:7px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;width:78px;display:inline-block;vertical-align:middle;margin-right:8px}
.minibar i{display:block;height:100%;background:var(--accent)}
.flag{font-size:10px;font-weight:700;color:var(--red);background:var(--red-soft);padding:2px 8px;border-radius:var(--r-pill);margin-left:6px}
/* modal dialog */
.modal-ov{position:fixed;inset:0;background:rgba(16,20,14,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:var(--s5)}
.modal-ov.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e3);max-width:520px;width:100%;padding:var(--s6)}
.modal h3{font-size:17px;font-weight:680;margin-bottom:var(--s1)}
.modal .mrow{display:flex;justify-content:space-between;gap:var(--s4);font-size:13px;padding:6px 0;border-bottom:1px solid var(--border)}
.modal .mrow .lab{color:var(--text-3)}
.modal .fld{display:block;font-size:10.5px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin:var(--s4) 0 6px}
.modal .macts{display:flex;gap:var(--s3);margin-top:var(--s5);justify-content:flex-end}
/* login page */
.login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--s5);overflow:hidden;
  background:radial-gradient(1100px 560px at 18% 8%, var(--saffron-soft) 0%, transparent 58%),radial-gradient(1000px 680px at 88% 92%, var(--accent-soft) 0%, transparent 55%),var(--bg)}
.login.hide{display:none}
.login .blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:0}
.login .blob.a{width:340px;height:340px;background:var(--saffron);top:-90px;left:-70px;opacity:.30}
.login .blob.b{width:440px;height:440px;background:var(--accent);bottom:-140px;right:-90px;opacity:.22}
.login-card{position:relative;z-index:1;width:100%;max-width:398px;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;box-shadow:var(--e3);padding:var(--s8) var(--s6) var(--s6)}
.login-card .lmark{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--saffron),var(--accent));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;letter-spacing:.5px;box-shadow:var(--e2);margin-bottom:var(--s4)}
.login-card h2{font-size:22px;font-weight:720;letter-spacing:-.4px}
.login-card .sub{color:var(--text-2);font-size:13.5px;margin:2px 0 var(--s5)}
.login-card .lfield{margin-bottom:var(--s3)}
.login-card .lfield label{display:block;font-size:11px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.login-card input{width:100%;padding:11px 12px}
.login-card .lbtn{width:100%;justify-content:center;margin-top:var(--s4);padding:12px;font-size:14px}
.login-foot{text-align:center;color:var(--text-2);font-size:12.5px;font-style:italic;line-height:1.55;margin:var(--s5) auto 0;max-width:300px;min-height:38px;transition:opacity .35s ease}
.logoutbtn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--text-3);flex:none}
.logoutbtn:hover{background:var(--surface-2);color:var(--red)}
.app.collapsed .foot .logoutbtn{display:none}
.qstrip{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--saffron-soft),var(--accent-soft));border:1px solid var(--border);border-radius:var(--r-md);padding:10px var(--s4);margin-bottom:var(--s5);font-size:13px;font-style:italic;font-weight:550;color:var(--text);transition:opacity .35s ease}
.qstrip svg{flex:none;color:var(--saffron)}
.va-banner{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-md);padding:9px var(--s4);margin-bottom:var(--s4);font-size:13px;font-weight:600;color:var(--accent-ink)}
.va-banner svg{flex:none}
.login-theme{position:absolute;top:var(--s5);right:var(--s5);z-index:2}
/* compact outcome panel */
.outcomes{display:flex;flex-direction:column;gap:var(--s2)}
.oc-primary{width:100%;text-align:center;background:var(--accent-soft);border:1px solid transparent;color:var(--accent-ink);font-weight:650;padding:10px}
.oc-primary.sel{background:var(--accent);color:#0F2619}
.oc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.oc-grid .oc{padding:7px 6px;font-size:12.5px;text-align:center}
/* question number · required star · admin note */
.qt{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.qnum{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-2);margin-right:9px;flex:none}
.star{color:var(--red);font-weight:800;margin-left:4px}
.qnote{display:flex;gap:7px;align-items:flex-start;background:var(--saffron-soft);border-left:3px solid var(--saffron);
  border-radius:6px;padding:7px 10px;margin:6px 0 10px;font-size:12.5px;color:var(--saffron-ink)}
.qnote svg{flex:none;margin-top:1px}

/* === glassmorphism + logo === */
body{background:
  radial-gradient(900px 520px at 8% -6%, var(--saffron-soft) 0%, transparent 55%),
  radial-gradient(960px 640px at 106% 108%, var(--accent-soft) 0%, transparent 55%),
  var(--bg);background-attachment:fixed}
:root{--glass:rgba(255,253,246,.60);--glass-brd:rgba(255,255,255,.55)}
html[data-theme="dark"]{--glass:rgba(28,24,17,.52);--glass-brd:rgba(255,255,255,.09)}
.side{background:var(--glass)!important;-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);border-right:1px solid var(--glass-brd)}
.top{background:var(--glass)!important;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--glass-brd)}
.card{background:var(--glass)!important;-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--glass-brd)}
.logo-full{max-width:176px;width:100%;height:auto;display:block}
.logo-mini{display:none;width:38px;height:38px;object-fit:contain}
.app.collapsed .logo-full{display:none}
.app.collapsed .logo-mini{display:block}
.login-logo{width:220px;max-width:78%;height:auto;margin:0 auto var(--s5);display:block}

.main{padding:0}
/* ═══ Compatibility layer: existing template classes → prototype design system ═══ */
:root{--muted:var(--text-2)}
a{color:var(--accent-ink);text-decoration:none}
html[data-theme="dark"] a{color:var(--accent)}
h1{font-size:22px;font-weight:680;letter-spacing:-.4px;margin:0 0 14px}
h2{font-size:17px;font-weight:650;margin:0 0 10px}

/* glass card (app templates use .glass everywhere) */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);box-shadow:var(--e1);padding:18px;margin-bottom:18px}

/* quote strip */
.quote{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--saffron-soft),var(--accent-soft));
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px var(--s4);margin-bottom:var(--s5);
  font-size:13px;font-style:italic;font-weight:550;color:var(--text);transition:opacity .35s ease}
.quote::before{content:"★";color:var(--saffron);font-style:normal}

/* buttons (app default .btn = primary; prototype brand = saffron primary) */
.btn{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;font-size:13.5px;padding:9px var(--s4);
  border-radius:var(--r-sm);transition:all var(--t-fast);background:var(--saffron);color:var(--on-saffron);
  box-shadow:var(--e1);border:none;cursor:pointer}
.btn:hover{background:var(--saffron-hover);transform:translateY(-1px);box-shadow:var(--e2)}
.btn.ghost{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);transform:none}
.btn.saffron{background:var(--saffron);color:var(--on-saffron)}
.btn.green{background:var(--accent);color:#fff}
.btn.green:hover{background:var(--accent-hover)}
.btn.danger{background:var(--red);color:#fff}

/* badges → chips */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill)}
.badge.green{color:var(--accent-ink);background:var(--accent-soft)}
html[data-theme="dark"] .badge.green{color:var(--accent)}
.badge.saffron{color:var(--saffron-ink);background:var(--saffron-soft)}
.badge.red{color:var(--red);background:var(--red-soft)}
.badge.grey{color:var(--text-2);background:var(--grey-soft)}

/* layout helpers */
.grid{display:grid;gap:16px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.kpi{font-size:28px;font-weight:720;letter-spacing:-.5px;color:var(--accent-ink)}
html[data-theme="dark"] .kpi{color:var(--accent)}
.muted{color:var(--text-3);font-size:12.5px}
.right{text-align:right}.mt0{margin-top:0}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.input{width:100%;font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;outline:none}
.input:focus{border-color:var(--accent)}

/* bare tables in templates → prototype .tbl look */
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
  font-weight:650;padding:0 var(--s3) var(--s3)}
tbody td{padding:var(--s3);border-top:1px solid var(--border);font-size:13.5px;vertical-align:middle}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}

/* import funnel (app markup: .funnel > div rows) */
.funnel div{padding:8px 4px;border-bottom:1px dashed var(--border);font-size:13.5px}
.funnel div:last-child{border-bottom:none}

/* content wrapper + messages */
.content{padding:var(--s6) var(--s8);max-width:1240px;width:100%}
@media(max-width:900px){.content{padding:var(--s4)}.grid.c3,.grid.c4,.stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid.c3,.grid.c4,.stats{grid-template-columns:1fr}}

/* login page (server-rendered variant) */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5);position:relative;overflow:hidden;
  background:radial-gradient(1100px 560px at 18% 8%, var(--saffron-soft) 0%, transparent 58%),
             radial-gradient(1000px 680px at 88% 92%, var(--accent-soft) 0%, transparent 55%),var(--bg)}
.login-wrap .blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:0}
.login-wrap .blob.a{width:340px;height:340px;background:var(--saffron);top:-90px;left:-70px;opacity:.30}
.login-wrap .blob.b{width:440px;height:440px;background:var(--accent);bottom:-140px;right:-90px;opacity:.22}
.login-card{position:relative;z-index:1;width:100%;max-width:398px;border-radius:22px;box-shadow:var(--e3);
  padding:var(--s8) var(--s6) var(--s6)}
.login-logo{width:220px;max-width:78%;height:auto;margin:0 auto var(--s5);display:block}
.login-foot{text-align:center;color:var(--text-2);font-size:12.5px;font-style:italic;line-height:1.55;
  margin:var(--s5) auto 0;max-width:300px;min-height:38px;transition:opacity .35s ease}
.login-theme{position:absolute;top:var(--s5);right:var(--s5);z-index:2}

/* auto-collapse sidebar on small screens */
@media(max-width:900px){
  .app{grid-template-columns:68px 1fr}
  .app .nav a{font-size:0;justify-content:center;padding:10px 0}
  .app .nav a .badge{display:none}
  .app .nav .label{display:none}
  .app .brand{justify-content:center;padding:var(--s2) 0 var(--s4)}
  .app .side{padding:var(--s3) var(--s2)}
  .app .side .foot{justify-content:center}
  .app .side .foot .who{display:none}
  .app .logo-full{display:none}
  .app .logo-mini{display:block}
  .search{display:none}
}