:root, [data-theme="light"]{
  --bg:#f5f7fb; --panel:#ffffff; --panel-2:#eef1f7; --panel-3:#e7ebf3; --border:#e3e8f0; --ink:#121829; --dim:#5b6678; --faint:#97a1b3;
  --accent:#5159f0; --accent-soft:#ecedff; --teal:#0ea5a0; --amber:#e08a1e; --rose:#e0413a; --green:#16a34a; --violet:#7c5cf0; --sky:#0ea5e9;
  --shadow:0 12px 36px rgba(30,40,80,.13); --shadow-sm:0 2px 8px rgba(30,40,80,.07); --topbar:rgba(245,247,251,.86); --r:14px;
  --glow:0 0 0 1px rgba(81,89,240,.35), 0 0 30px rgba(81,89,240,.18);
}
[data-theme="dark"]{
  --bg:#0a0d15; --panel:#121726; --panel-2:#1a2032; --panel-3:#222a40; --border:#262e44; --ink:#eef1f8; --dim:#9aa4b8; --faint:#5e6a80;
  --accent:#7b82ff; --accent-soft:#1e2147; --teal:#2dd4bf; --amber:#f0a93e; --rose:#f06b63; --green:#3fcc6a; --violet:#a78bfa; --sky:#38bdf8;
  --shadow:0 12px 36px rgba(0,0,0,.5); --shadow-sm:0 2px 8px rgba(0,0,0,.4); --topbar:rgba(10,13,21,.86);
  --glow:0 0 0 1px rgba(123,130,255,.4), 0 0 34px rgba(123,130,255,.25);
}
*{box-sizing:border-box;} html,body{margin:0;height:100%;}
body{ background:var(--bg); color:var(--ink); font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif; font-size:13.5px;
  -webkit-font-smoothing:antialiased; display:grid; grid-template-columns:230px 1fr; height:100vh; overflow:hidden; transition:grid-template-columns .2s;}
body.collapsed{ grid-template-columns:66px 1fr;}
a{color:inherit;}

/* ---------- sidebar ---------- */
.side{ background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:visible; z-index:35;}
.brand{ display:flex; align-items:center; gap:11px; padding:16px 16px 13px; white-space:nowrap;}
.brand .mk{ width:32px;height:32px;border-radius:9px; flex:none; background:linear-gradient(135deg,var(--accent),var(--teal)); position:relative; box-shadow:0 6px 16px rgba(81,89,240,.45);}
.brand .mk::after{content:"";position:absolute;inset:8px;border:2.5px solid var(--panel);border-radius:50%;border-bottom-color:transparent;border-left-color:transparent;transform:rotate(35deg);}
.brand b{ font-size:17px; letter-spacing:-.4px; font-weight:750;} .brand small{ display:block; font-size:8px; letter-spacing:1.8px; color:var(--faint); font-weight:800; margin-top:1px;}
.brand .collapse{ margin-left:auto; width:24px;height:24px; border:1px solid var(--border); border-radius:7px; background:var(--panel-2); color:var(--dim); cursor:pointer; font-size:12px; flex:none;}

.askaria{ margin:6px 12px 10px; display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px; cursor:pointer; white-space:nowrap;
  background:linear-gradient(135deg,var(--accent),var(--violet)); color:#fff; font-weight:650; font-size:12.5px; box-shadow:0 8px 20px rgba(81,89,240,.35);}
.askaria .orb{ width:20px;height:20px;border-radius:50%; flex:none; background:conic-gradient(from 120deg,#fff,rgba(255,255,255,.4),#fff);}
.askaria kbd{ margin-left:auto; background:rgba(255,255,255,.22); border-radius:5px; padding:1px 6px; font-size:10px; font-family:ui-monospace,monospace;}

/* ---------- nav (flyout categories) ---------- */
.nav{ padding:4px 10px; flex:1; overflow-y:auto;}
.nav .cat{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; color:var(--dim); padding:11px 11px; border-radius:11px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.1px; text-align:left; white-space:nowrap; position:relative;}
.nav .cat:hover{ background:var(--panel-2); color:var(--ink);}
.nav .cat.active{ color:var(--accent);} .nav .cat.active::before{ content:""; position:absolute; left:-10px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent);}
.nav .cat .ci{ width:22px; height:22px; flex:none; display:grid; place-items:center;}
.nav .cat .ci svg{ display:block;}
.nav .cat.solo.active{ color:var(--accent);}
.navdiv{ height:1px; background:var(--border); margin:7px 11px 5px;}
.nav .cat .chev{ margin-left:auto; color:var(--faint); font-size:9px; transition:.15s;}
.nav .cat.open .chev{ transform:rotate(90deg);}

.flyout{ position:fixed; min-width:212px; background:var(--panel); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); padding:7px; z-index:90; display:none;}
.flyout.on{ display:block;}
.flyout .ft{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); font-weight:800; padding:6px 11px 7px;}
.flyout button{ display:flex; align-items:center; gap:11px; width:100%; border:0; background:transparent; color:var(--dim); padding:9px 11px; border-radius:9px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:550; text-align:left; white-space:nowrap;}
.flyout button:hover{ background:var(--panel-2); color:var(--ink);}
.flyout button.on{ background:var(--accent-soft); color:var(--accent); font-weight:700;}
.flyout button .ic{ width:18px; flex:none; display:grid; place-items:center;} .flyout button .ic svg{ display:block;} .flyout button .ct{ margin-left:auto; font-size:11px; color:var(--faint); font-family:ui-monospace,monospace;} .flyout button.on .ct{ color:var(--accent);}

.side .me{ border-top:1px solid var(--border); padding:11px 14px; display:flex; align-items:center; gap:10px; white-space:nowrap;}
.av{ width:30px;height:30px;border-radius:9px; flex:none; background:linear-gradient(135deg,var(--accent),var(--violet)); color:#fff; display:grid;place-items:center; font-weight:800; font-size:11px;}
/* collapsed mode */
body.collapsed .brand b, body.collapsed .brand small, body.collapsed .brand .collapse,
body.collapsed .nav .cat .label, body.collapsed .nav .cat .chev, body.collapsed .askaria .label, body.collapsed .askaria kbd, body.collapsed .me .who{ display:none;}
body.collapsed .nav .cat{ justify-content:center; padding:11px 0;}
body.collapsed .askaria{ justify-content:center; padding:10px;}
body.collapsed .brand{ justify-content:center; padding:16px 0 13px;}
body.collapsed .me{ justify-content:center;}

/* ---------- main / topbar ---------- */
.main{ overflow-y:auto; height:100vh; position:relative;}
.top{ position:sticky; top:0; z-index:30; background:var(--topbar); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:11px; padding:11px 22px;}
.top h1{ margin:0; font-size:16px; font-weight:650;} .top .crumb{ color:var(--faint); font-size:12px;}
.cmd{ margin-left:auto; display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:8px 12px; color:var(--faint); width:260px; font-size:12.5px; cursor:pointer;}
.cmd kbd{ margin-left:auto; background:var(--panel-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:10px; font-family:ui-monospace,monospace;}
.ibtn{ position:relative; width:36px;height:36px;border-radius:9px; border:1px solid var(--border); background:var(--panel); cursor:pointer; font-size:14px; color:var(--ink); flex:none;}
.ibtn .badge{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px; border-radius:9px; background:var(--rose); color:#fff; font-size:9.5px; font-weight:800; display:grid; place-items:center; border:2px solid var(--bg);}
.btn{ border:0; border-radius:9px; padding:9px 15px; font-weight:650; font-size:12.5px; cursor:pointer; font-family:inherit; background:var(--accent); color:#fff;}
.btn.ghost{ background:var(--panel); color:var(--ink); border:1px solid var(--border);}
.btn.sm{ padding:6px 11px; font-size:11.5px;}

/* topbar popovers */
.pop{ position:relative;}
.menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:300px; background:var(--panel); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); z-index:40; overflow:hidden; display:none;}
.menu.on{ display:block;}
.menu .mh{ padding:12px 15px; border-bottom:1px solid var(--border); font-weight:700; font-size:13px; display:flex; align-items:center;} .menu .mh .lnk{ margin-left:auto; color:var(--accent); font-size:11.5px; font-weight:600; cursor:pointer;}
.menu .mi{ display:flex; gap:11px; padding:11px 15px; cursor:pointer; align-items:flex-start;} .menu .mi:hover{ background:var(--panel-2);}
.menu .mi .mic{ width:30px;height:30px;border-radius:9px; flex:none; display:grid; place-items:center; font-size:14px; background:var(--panel-2);}
.menu .mi .mt{ font-weight:600; font-size:12.5px;} .menu .mi .ms{ color:var(--dim); font-size:11.5px; margin-top:2px; line-height:1.4;} .menu .mi .mw{ flex:1;}
.menu.simple .mi{ padding:9px 13px; align-items:center;} .menu.simple{ min-width:215px;}
.unread{ width:7px;height:7px;border-radius:50%; background:var(--accent); flex:none; margin-top:6px;}

/* timers tray */
.trow{ display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--border);} .trow:last-child{border:0;}
.trow .tinfo{ flex:1; min-width:0;} .trow .tn{ font-weight:650; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .trow .tsub{ color:var(--dim); font-size:11px;}
.trow .tclock{ font-family:ui-monospace,monospace; font-weight:800; font-size:14px;} .trow .tclock.run{ color:var(--green);}
.tbtn{ width:26px;height:26px;border-radius:7px;border:1px solid var(--border);background:var(--panel-2);color:var(--ink);cursor:pointer;font-size:11px;}

/* ---------- pages ---------- */
#view .page{ padding:20px 24px 56px; max-width:1240px;}
.pghd{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.pghd h2{ margin:0; font-size:19px; letter-spacing:-.3px;} .pghd .sub{ color:var(--dim); font-size:12.5px;}
.spacer{ margin-left:auto;}

/* bento dashboard */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(112px,auto); gap:13px;}
.b{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:15px; box-shadow:var(--shadow-sm);}
.b.w2{ grid-column:span 2;} .b.h2{ grid-row:span 2;} .b.w4{ grid-column:span 4;}
.b .k{ font-size:11.5px; color:var(--dim); font-weight:600; display:flex; align-items:center; gap:7px;}
.b .v{ font-size:27px; font-weight:800; letter-spacing:-1px; margin:7px 0 2px;} .b .d{ font-size:11.5px; font-weight:600;}
.up{color:var(--green);} .dn{color:var(--rose);} .am{color:var(--amber);}
.dot{ width:7px;height:7px;border-radius:50%; display:inline-block;}
.track{ height:9px; background:var(--panel-2); border-radius:20px; overflow:hidden;} .track span{ display:block;height:100%;border-radius:20px;}
.mr{ display:flex; align-items:center; gap:10px; font-size:12.5px; margin-top:11px;}
.mr .nm{ width:150px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mr .t{ flex:1; height:7px; background:var(--panel-2); border-radius:20px; overflow:hidden;} .mr .t span{ display:block;height:100%;border-radius:20px;}
.mr .pct{ width:60px; text-align:right; color:var(--dim); font-family:ui-monospace,monospace;}

/* drag handles + smooth drag */
.grip{ color:var(--faint); cursor:grab; font-size:14px; user-select:none; touch-action:none; padding:0 1px; border-radius:5px;}
.grip:hover{ color:var(--accent); background:var(--panel-2);}
.b.floating{ position:fixed; z-index:80; margin:0; pointer-events:none; box-shadow:0 22px 50px rgba(20,30,60,.28); transform:scale(1.025) rotate(-.4deg); opacity:.97; cursor:grabbing; transition:none;}
.b-ph{ border:2px dashed var(--accent); border-radius:var(--r); background:var(--accent-soft); opacity:.45;}
.bento.dragging .b:not(.floating){ transition:transform .18s cubic-bezier(.2,.7,.3,1);}

/* dispatch strip */
.strip{ display:flex; gap:10px; overflow-x:auto; padding-top:4px;}
.visit{ min-width:172px; background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:11px; padding:11px;}
.visit .tm{ font-size:11px; font-weight:800; color:var(--accent); font-family:ui-monospace,monospace;} .visit .nm{ font-weight:700; font-size:12.5px; margin:4px 0 2px;} .visit .sub{ color:var(--dim); font-size:11px;}

/* table */
.b.list{ padding:0; overflow:hidden;}
.lhd{ display:flex; align-items:center; gap:10px; padding:13px 16px 11px; border-bottom:1px solid var(--border);}
table{ width:100%; border-collapse:collapse; font-size:13px;}
thead th{ text-align:left; color:var(--faint); font-weight:600; font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; padding:9px 16px; border-bottom:1px solid var(--border); white-space:nowrap;}
tbody td{ padding:11px 16px; border-bottom:1px solid var(--border);} tbody tr{ cursor:pointer;} tbody tr:hover{ background:var(--panel-2);} tbody tr:last-child td{ border:0;}
.id{ font-family:ui-monospace,monospace; font-size:12px; color:var(--accent); font-weight:600;}
.pill{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; white-space:nowrap;}
.pill.new{ background:rgba(81,89,240,.13); color:var(--accent);} .pill.prog{ background:rgba(14,165,160,.15); color:var(--teal);} .pill.wait{ background:rgba(224,138,30,.15); color:var(--amber);} .pill.done{ background:rgba(22,163,74,.14); color:var(--green);}
.pill.pp{ background:rgba(124,92,240,.14); color:var(--violet);} .pill.pr{ background:rgba(14,165,160,.15); color:var(--teal);} .pill.bs{ background:rgba(90,100,120,.15); color:var(--dim);}
.pill.paid{ background:rgba(22,163,74,.14); color:var(--green);} .pill.sent{ background:rgba(14,165,233,.15); color:var(--sky);} .pill.draft{ background:rgba(90,100,120,.15); color:var(--dim);} .pill.over{ background:rgba(224,65,58,.14); color:var(--rose);}
.pill.hi{ background:rgba(224,65,58,.14); color:var(--rose);} .pill.med{ background:rgba(224,138,30,.15); color:var(--amber);} .pill.lo{ background:rgba(90,100,120,.15); color:var(--dim);}
.pill.biz{ background:rgba(81,89,240,.13); color:var(--accent);} .pill.res{ background:rgba(90,100,120,.13); color:var(--dim);}
.cdba{ color:var(--faint); font-size:11px; margin-top:2px;}
.sla{ font-family:ui-monospace,monospace; font-size:12px;} .sla.bad{color:var(--rose);} .sla.warn{color:var(--amber);} .sla.ok{color:var(--dim);}
.ava{ width:23px;height:23px;border-radius:6px; display:inline-grid;place-items:center; color:#fff; font-size:10px; font-weight:800; vertical-align:middle;}
.seg{ display:inline-flex; background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:3px;}
.seg button{ border:0; background:transparent; color:var(--dim); font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:6px; cursor:pointer;} .seg button.on{ background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm);}
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:6px 11px; font-size:12px; color:var(--dim); cursor:pointer; font-weight:600;}
.chip.on{ background:var(--accent-soft); color:var(--accent); border-color:transparent;}
.search{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:8px 12px; color:var(--faint); font-size:12.5px; min-width:240px;}
.search input{ border:0; background:transparent; color:var(--ink); font-family:inherit; font-size:12.5px; outline:none; width:100%;}

/* household 360 / profiles */
.htop{ display:flex; align-items:center; gap:14px; margin-bottom:15px;}
.htop .a{ width:50px;height:50px;border-radius:14px; flex:none; background:linear-gradient(135deg,var(--accent),var(--amber)); color:#fff; display:grid;place-items:center; font-weight:800; font-size:17px;}
.htop h2{ margin:0; font-size:20px; letter-spacing:-.3px;} .htop .s{ color:var(--dim); font-size:12.5px;}
.switch{ display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:5px 12px; font-size:12px; color:var(--dim); cursor:pointer; margin-left:8px;}
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:15px;}
.tabs span{ padding:9px 13px; font-size:12.5px; font-weight:600; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs span.on{ color:var(--accent); border-bottom-color:var(--accent);}
.grid360{ display:grid; grid-template-columns:1fr 1fr; gap:13px;}
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm);}
.card .h{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center;} .card .h h3{ margin:0; font-size:13.5px; font-weight:650;} .card .h .lnk{ margin-left:auto; color:var(--accent); font-size:12px; font-weight:600; cursor:pointer;}
.card .bd{ padding:14px 16px;}
.wal{ background:linear-gradient(135deg,var(--accent),var(--teal)); color:#fff; border-radius:var(--r); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.wal::after{ content:""; position:absolute; right:-30px; top:-30px; width:140px;height:140px;border-radius:50%; background:rgba(255,255,255,.12);}
.wal .l{ font-size:11.5px; opacity:.9;} .wal .b{ font-size:30px; font-weight:800; letter-spacing:-1px; margin:4px 0 2px;} .wal .of{ opacity:.9; font-size:12.5px;}
.wal .wb{ height:7px; background:rgba(255,255,255,.3); border-radius:20px; overflow:hidden; margin:13px 0 7px;} .wal .wb span{ display:block;height:100%;background:#fff;border-radius:20px;}
.wtag{ display:inline-block; background:rgba(255,255,255,.22); padding:3px 11px; border-radius:20px; font-size:11px; font-weight:700; margin-top:10px;}
.li{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px;} .li:last-child{ border:0;}
.li .ic{ width:32px;height:32px;border-radius:9px; flex:none; background:var(--panel-2); display:grid;place-items:center; font-size:14px; color:#fff;}
.li .sub{ color:var(--dim); font-size:11.5px; font-family:ui-monospace,monospace;} .li .rt{ margin-left:auto; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px;}
.ok2{ background:rgba(22,163,74,.15); color:var(--green);} .wa2{ background:rgba(224,138,30,.16); color:var(--amber);} .ba2{ background:rgba(224,65,58,.14); color:var(--rose);}
.serial{ font-family:ui-monospace,monospace; font-size:11.5px; color:var(--dim); background:var(--panel-2); padding:1px 7px; border-radius:6px;}
.kv{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px;} .kv:last-child{border:0;} .kv .kk{ color:var(--faint);} .kv b{ font-weight:600;}

/* omnichannel ticket */
.tk{ display:grid; grid-template-columns:1fr 290px; gap:14px;}
.tkhead{ display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.tkhead .a{ width:40px;height:40px;border-radius:11px; flex:none; display:grid;place-items:center; color:#fff; font-weight:700; font-size:13px;}
.tkhead h2{ margin:0; font-size:17px;} .tkhead .s{ color:var(--dim); font-size:12px;}
.timer{ display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--accent),var(--violet)); color:#fff; border-radius:10px; padding:8px 13px; box-shadow:0 6px 16px rgba(81,89,240,.35);}
.timer b{ font-family:ui-monospace,monospace; font-size:15px;} .timer .pp{ width:28px;height:28px;border-radius:50%;border:0;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;}
.stream{ padding:8px 18px 16px;}
.chl{ text-align:center; margin:14px 0; color:var(--faint); font-size:11px; position:relative;} .chl span{ background:var(--panel); padding:0 12px; position:relative; z-index:1;} .chl::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border);}
.msg{ margin-bottom:14px; max-width:78%;} .msg .m{ font-size:11.5px; color:var(--faint); margin-bottom:4px;}
.msg .bub{ background:var(--panel-2); border:1px solid var(--border); border-radius:4px 13px 13px 13px; padding:11px 13px; line-height:1.5;}
.msg.out{ margin-left:auto;} .msg.out .m{ text-align:right;} .msg.out .bub{ background:var(--accent); color:#fff; border-color:transparent; border-radius:13px 4px 13px 13px;}
.msg.note .bub{ background:rgba(224,138,30,.1); border-color:rgba(224,138,30,.3); border-radius:11px;}
.composer{ border-top:1px solid var(--border); padding:11px 16px;}
.ctabs{ display:flex; gap:6px; margin-bottom:8px;} .ctabs span{ font-size:12px; color:var(--dim); padding:4px 10px; border-radius:7px; cursor:pointer; font-weight:600;} .ctabs span.on{ background:var(--accent-soft); color:var(--accent);}
.composer textarea{ width:100%; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--ink); padding:10px; font-family:inherit; font-size:13px; min-height:50px; resize:none;}
.sf{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px;} .sf .kk{ color:var(--faint);}

/* dispatch mini */
.lanes{ display:grid; grid-template-columns:50px repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--panel);}
.lh{ padding:10px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:8px;}
.la{ width:24px;height:24px;border-radius:7px; flex:none; display:grid;place-items:center; color:#fff; font-size:10px; font-weight:800;}
.lane{ position:relative; border-right:1px solid var(--border); height:420px; background:repeating-linear-gradient(var(--panel) 0 59px, var(--panel-2) 59px 60px);}
.tcol{ border-right:1px solid var(--border);} .tcell{ height:60px; font-size:10.5px; color:var(--faint); text-align:right; padding:2px 6px 0;}
.job{ position:absolute; left:5px; right:5px; border-radius:9px; padding:7px 9px; color:#fff; font-size:11px; box-shadow:var(--shadow-sm);}
.job .jt{ font-weight:800; opacity:.9; font-size:10px;} .job .jn{ font-weight:700; margin-top:1px;}

/* timesheet */
.ts{ width:100%; border-collapse:collapse; font-size:12.5px;}
.ts th{ text-align:center; color:var(--faint); font-weight:600; font-size:10.5px; text-transform:uppercase; padding:9px 8px; border-bottom:1px solid var(--border);}
.ts th:first-child, .ts td:first-child{ text-align:left; width:38%;}
.ts td{ text-align:center; padding:9px 8px; border-bottom:1px solid var(--border);}
.ts input{ width:46px; text-align:center; border:1px solid var(--border); border-radius:7px; background:var(--panel-2); color:var(--ink); padding:5px; font-family:ui-monospace,monospace; font-size:12px;}
.ts tfoot td{ font-weight:800; border:0; padding-top:11px;}

/* invoice doc */
.doc{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:30px 34px; max-width:760px;}
.doc .dtop{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px;}
.doc .dtop h2{ margin:0; font-size:24px;} .doc .from{ text-align:right; color:var(--dim); font-size:12.5px; line-height:1.7;}
.doc .parties{ display:flex; justify-content:space-between; margin-bottom:22px; font-size:12.5px;}
.doc .parties .lab{ color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;}
.doc table{ margin-bottom:18px;} .doc tfoot td{ border:0; padding:6px 16px;} .doc .tot{ font-size:17px; font-weight:800;}
.num{ font-family:ui-monospace,monospace; text-align:right;}

/* settings */
.setwrap{ display:grid; grid-template-columns:208px 1fr; gap:20px;}
.setnav{ display:flex; flex-direction:column; gap:3px; position:sticky; top:74px; align-self:start;}
.setnav button{ display:flex; align-items:center; gap:10px; border:0; background:transparent; color:var(--dim); padding:9px 12px; border-radius:9px; cursor:pointer; font-family:inherit; font-size:13px; text-align:left; font-weight:500;}
.setnav button:hover{ background:var(--panel-2); color:var(--ink);} .setnav button.on{ background:var(--accent-soft); color:var(--accent); font-weight:650;}
.setpane{ display:none;} .setpane.on{ display:block;}
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} .frow.one{ grid-template-columns:1fr;}
.fld label{ display:block; font-size:11.5px; font-weight:600; color:var(--dim); margin-bottom:5px;}
.fld input, .fld select, .fld textarea{ width:100%; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--ink); padding:9px 11px; font-family:inherit; font-size:13px;}
.fld textarea{ min-height:74px; resize:vertical;}
.setrow{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border);} .setrow:last-child{ border:0;}
.setrow .sw{ flex:1;} .setrow .st{ font-weight:600; font-size:13px;} .setrow .ss{ color:var(--dim); font-size:12px; margin-top:2px;}
.tgl{ width:40px;height:23px;border-radius:20px;background:var(--panel-3);position:relative;cursor:pointer;border:1px solid var(--border);flex:none;transition:.15s;}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.tgl.on{background:var(--accent);border-color:transparent;} .tgl.on::after{left:19px;}

/* slide-over sheet */
.sheet{ position:fixed; top:0; right:0; bottom:0; width:460px; max-width:94vw; background:var(--panel); border-left:1px solid var(--border); z-index:65; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);}
/* shadow only while open — otherwise the off-screen sheet's leftward shadow bleeds back into the viewport as a gray band */
.sheet.on{ transform:none; box-shadow:-20px 0 60px rgba(0,0,0,.28);}
.sheet .sh{ display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--border);} .sheet .sh h3{ margin:0; font-size:16px;}
.sheet .sb{ flex:1; overflow-y:auto; padding:18px 20px;}
.sheet .sfoot{ padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px;}

/* generic modal */
.modal{ position:fixed; top:14vh; left:50%; transform:translateX(-50%); width:480px; max-width:94vw; background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); z-index:66; overflow:hidden; display:none;}
.modal.on{ display:block;}
.modal .mh2{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center;} .modal .mh2 h3{ margin:0; font-size:15px;}
.modal .mb2{ padding:18px 20px;} .modal .mf2{ padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px;}
.modal .mf2 .btn:disabled{ opacity:.45; pointer-events:none;}

/* configuration parent/child relationships */
.rellabel{ font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); margin-bottom:4px;}
.emptyrel{ color:var(--dim); font-size:12.5px; padding:8px 0;} .emptyrel .lnk{ color:var(--accent); font-weight:600; cursor:pointer; margin-left:5px;}
.ac-list{ max-height:288px; overflow:auto; border:1px solid var(--border); border-radius:11px; margin-top:12px;}
.acrow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--border); cursor:pointer; font-size:13px;}
.acrow:last-child{ border-bottom:0;} .acrow:hover{ background:var(--panel-2);}
.acrow .ic{ width:32px; height:32px; border-radius:9px; flex:none; background:var(--panel-3); display:grid; place-items:center; font-size:14px;}
.acrow .sub{ color:var(--dim); font-size:11.5px;}
.acrow .acradio{ margin-left:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex:none; position:relative;}
.acrow.on{ background:var(--accent-soft);} .acrow.on .acradio{ border-color:var(--accent);}
.acrow.on .acradio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);}

/* activity timeline */
.tl{ position:relative; padding-left:24px;}
.tl::before{ content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:var(--border);}
.tl .ev{ position:relative; padding:0 0 17px;} .tl .ev:last-child{ padding-bottom:0;}
.tl .ev::before{ content:""; position:absolute; left:-20px; top:3px; width:9px;height:9px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--panel);}
.tl .ev .et{ font-size:13px; line-height:1.5;} .tl .ev .em{ color:var(--faint); font-size:11.5px; margin-top:2px;}

/* knowledge base 2-pane */
.kbwrap{ display:grid; grid-template-columns:288px 1fr; gap:14px; align-items:start;}
.kblist .ft{ font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--faint); font-weight:800; padding:11px 12px 5px;}
.kblist .kbi{ padding:9px 12px; border-radius:9px; cursor:pointer; font-size:12.5px; color:var(--dim); line-height:1.35;}
.kblist .kbi:hover{ background:var(--panel-2); color:var(--ink);}
.kblist .kbi.on{ background:var(--accent-soft); color:var(--accent); font-weight:650;}
.kbdoc{ line-height:1.6;} .kbdoc h2{ font-size:18px; letter-spacing:-.2px;} .kbdoc h3{ color:var(--ink);} .kbdoc p,.kbdoc li{ color:var(--dim);}

/* automation rule builder */
.rule{ display:flex; flex-direction:column;}
.rblock{ border:1px solid var(--border); border-radius:12px; padding:12px 15px; background:var(--panel-2); display:flex; gap:13px; align-items:center;}
.rblock .rk{ font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; width:42px; flex:none;}
.rk.when{ color:var(--accent);} .rk.if{ color:var(--amber);} .rk.then{ color:var(--green);}
.rconn{ width:2px; height:15px; background:var(--border); margin-left:32px;}

/* customer portal preview */
.portal-frame{ max-width:432px; margin:4px auto 0; border:1px solid var(--border); border-radius:30px; background:var(--panel-3); padding:12px; box-shadow:var(--shadow);}
.portal-screen{ background:var(--bg); border-radius:20px; overflow:hidden;}
.pp-top{ display:flex; align-items:center; padding:14px 16px; background:var(--panel); border-bottom:1px solid var(--border);}
.pp-logo{ font-weight:750; font-size:14px;} .pp-av{ margin-left:auto; width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;}
.pp-body{ padding:16px;} .pp-hi{ font-size:19px; font-weight:750; margin-bottom:12px;}
.pp-actions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:14px 0 4px;}
.pp-actions button{ border:1px solid var(--border); background:var(--panel); border-radius:12px; padding:13px 6px; font-family:inherit; font-size:11px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px;}
.pp-actions span{ font-size:17px;}
.pp-sec{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); margin:16px 0 6px;}
.pp-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:2px 14px;}
.pp-card .li{ padding:9px 0;}

.ph2{ display:grid; place-items:center; min-height:50vh; text-align:center; color:var(--faint);} .ph2 .e{ font-size:42px; margin-bottom:10px;} .ph2 h2{ color:var(--ink); margin:0 0 6px;}
.foot{ text-align:center; color:var(--faint); font-size:11.5px; margin-top:24px; padding-top:14px; border-top:1px solid var(--border);}
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:16px;}

/* command palette */
.scrim{ position:fixed; inset:0; background:rgba(8,10,18,.5); display:none; z-index:60; backdrop-filter:blur(3px);}
.scrim.on{ display:block;}
.palette{ position:fixed; top:13vh; left:50%; transform:translateX(-50%); width:560px; max-width:92vw; background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; z-index:61; display:none;}
.palette.on{ display:block;}
.palette input{ width:100%; border:0; background:transparent; color:var(--ink); padding:17px 20px; font-size:16px; font-family:inherit; outline:none; border-bottom:1px solid var(--border);}
.palette .res{ padding:8px; max-height:340px; overflow-y:auto;}
.palette .pr{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; cursor:pointer; font-size:13.5px;}
.palette .pr:hover, .palette .pr.sel{ background:var(--panel-2);}
.palette .pr .pic{ width:26px;height:26px;border-radius:7px; background:var(--panel-2); display:grid;place-items:center; font-size:13px;} .palette .pr.sel .pic{ background:var(--accent-soft);}
.palette .pr .sc{ margin-left:auto; color:var(--faint); font-size:11px;}
.palette .hint{ padding:9px 14px; border-top:1px solid var(--border); color:var(--faint); font-size:11px; display:flex; gap:14px;}

/* Aria copilot drawer */
.drawer{ position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:var(--panel); border-left:1px solid var(--border); z-index:55; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);}
.drawer.on{ transform:none; box-shadow:-20px 0 60px rgba(0,0,0,.25);}
.dh{ display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--border);}
.dh .orb{ width:30px;height:30px;border-radius:50%; background:conic-gradient(from 120deg,var(--accent),var(--teal),var(--accent)); box-shadow:var(--glow);}
.dh b{ font-size:15px;} .dh .st{ font-size:11px; color:var(--green);}
.dstream{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px;}
.turn{ display:flex; gap:10px;} .turn.user{ flex-direction:row-reverse;}
.turn .tav{ width:28px;height:28px;border-radius:8px; flex:none; display:grid;place-items:center; font-size:11px; font-weight:800; color:#fff;}
.turn.ai .tav{ background:conic-gradient(from 120deg,var(--accent),var(--teal),var(--accent));} .turn.user .tav{ background:linear-gradient(135deg,var(--accent),var(--violet));}
.tb{ background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:11px 13px; line-height:1.5; font-size:13px; max-width:88%;} .turn.user .tb{ background:var(--accent-soft); border-color:transparent;}
.tb ul{ margin:7px 0 2px; padding-left:17px;} .tb .cite{ font-size:10.5px; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 6px; font-weight:600;}
.aact{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px;} .aact button{ font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:18px; border:1px solid var(--border); background:var(--panel); color:var(--ink); cursor:pointer;} .aact button.p{ background:linear-gradient(135deg,var(--accent),var(--teal)); color:#fff; border-color:transparent;}
.dcompose{ padding:13px 16px; border-top:1px solid var(--border);}
.dwrap{ display:flex; align-items:flex-end; gap:9px; background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:9px 11px; box-shadow:var(--glow);}
.dwrap textarea{ flex:1; border:0; background:transparent; color:var(--ink); font-family:inherit; font-size:13.5px; resize:none; min-height:22px; outline:none;}
.dsend{ width:32px;height:32px;border-radius:9px; border:0; background:linear-gradient(135deg,var(--accent),var(--teal)); color:#fff; cursor:pointer; font-size:14px;}

/* ===================== ticket-action pods ===================== */
/* The three ConnectWise pods — Scheduling, Approvals, Service-Terms
   Signatures — brought into Helm as native ticket actions, restyled onto the
   app's design tokens. Opened as slide-over sheets from the ticket (Inbox)
   rail and the "+ New" menu. Wireframe/mock — no backend wired. */
.sheet .sh .pava{ width:34px;height:34px;border-radius:10px; flex:none; display:grid;place-items:center; font-size:16px; color:#fff;}
.sheet .sh .shsub{ color:var(--dim); font-size:12px; margin-top:1px;}
.psec{ margin-bottom:19px;}
.psec .psechd{ font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:11px; display:flex; align-items:center; gap:8px;}
.phint{ color:var(--dim); font-size:11.5px; line-height:1.5; margin:9px 0 0;}
.lnk2{ color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; background:0; border:0; font-family:inherit; padding:0;}
.vtag{ margin-left:auto; font-family:ui-monospace,monospace; font-size:10.5px; color:var(--dim); background:var(--panel-2); padding:1px 8px; border-radius:6px; letter-spacing:0; text-transform:none; font-weight:600;}

/* full-width segmented mode tabs */
.seg.wide{ display:flex; width:100%; margin-bottom:16px;}
.seg.wide button{ flex:1;}

/* duration chips */
.chiprow{ display:flex; gap:6px; margin-top:7px; flex-wrap:wrap;}
.chiprow .chip{ padding:5px 11px; font-size:11.5px;}

/* email preview */
.mailprev{ border:1px dashed var(--border); border-radius:11px; background:var(--panel-2); padding:13px 14px; font-size:12px; line-height:1.6; color:var(--dim); margin-top:10px;}
.mailprev .mpt{ font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:8px;}
.mailprev .mpa{ color:var(--accent); font-weight:600;}
.mailprev .mptot{ margin-top:10px; padding-top:9px; border-top:1px solid var(--border); color:var(--ink); font-weight:700;}
/* marketing — SMS campaign preview bubble (email reuses .mailprev above) */
.smsprev{ border:1px dashed var(--border); border-radius:11px; background:var(--panel-2); padding:13px 14px; margin-top:10px;}
.smsprev .sph{ font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:9px;}
.smsbubble{ display:inline-block; background:var(--accent); color:#fff; border-radius:14px 14px 14px 4px; padding:9px 13px; font-size:12.5px; line-height:1.5; max-width:82%; box-shadow:var(--shadow-sm); word-break:break-word; white-space:pre-wrap;}
.smsprev .smsmeta{ font-size:10.5px; color:var(--faint); margin-top:9px;}
/* code-defined company/household status alert banner (statusAlert in app.js) */
.statalert{ display:flex; gap:10px; align-items:flex-start; border:1px solid; border-radius:11px; padding:11px 14px; font-size:12.5px; line-height:1.5; margin-bottom:14px; color:var(--dim);}
.statalert .sa-i{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none;}
.statalert b{ font-weight:800;}
.statalert.info{ background:rgba(14,165,233,.09); border-color:rgba(14,165,233,.28);} .statalert.info b{ color:var(--sky);} .statalert.info .sa-i{ background:var(--sky);}
.statalert.warn{ background:rgba(224,138,30,.1); border-color:rgba(224,138,30,.3);} .statalert.warn b{ color:var(--amber);} .statalert.warn .sa-i{ background:var(--amber);}
.statalert.bad{ background:rgba(224,65,58,.09); border-color:rgba(224,65,58,.28);} .statalert.bad b{ color:var(--rose);} .statalert.bad .sa-i{ background:var(--rose);}

/* approvals: pick list + line items + totals */
.pick{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; cursor:pointer;}
.pick:last-child{ border:0;}
.pick input{ width:16px;height:16px; accent-color:var(--accent); flex:none;}
.pick .pickn{ flex:1;}
.pick .picka{ font-family:ui-monospace,monospace; color:var(--dim);}
.lineitem{ display:grid; grid-template-columns:1fr 44px 72px 28px; gap:7px; margin-bottom:7px; align-items:center;}
.lineitem input{ border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:var(--ink); padding:7px 8px; font-family:inherit; font-size:12px; width:100%;}
.lineitem .rm{ border:0; background:var(--panel-2); color:var(--dim); border-radius:7px; cursor:pointer; height:30px; font-size:11px;}
.prow{ display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--border); font-size:13px; font-weight:600; cursor:pointer;}
.totbox{ display:flex; align-items:center; justify-content:space-between; background:var(--accent-soft); border-radius:11px; padding:13px 15px; margin-bottom:19px;}
.totbox b{ font-size:18px; font-weight:800; color:var(--accent); font-family:ui-monospace,monospace;}

/* scheduling: slot grid + address card + warranty */
.slotcap{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--dim); margin:4px 0 9px;}
.slotgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px;}
.slot{ border:1px solid var(--border); background:var(--panel-2); border-radius:9px; padding:9px 4px; text-align:center; font-size:12px; font-weight:600; font-family:ui-monospace,monospace; cursor:pointer; color:var(--ink);}
.slot:hover{ border-color:var(--accent); color:var(--accent);}
.slot.on{ background:var(--accent); color:#fff; border-color:transparent;}
.slot.empty{ grid-column:1/-1; text-align:center; color:var(--faint); font-family:inherit; font-weight:500; border:0; background:0; padding:14px; cursor:default;}
.addrcard{ border:1px solid var(--border); border-radius:12px; padding:13px 14px; background:var(--panel); margin-bottom:6px;}
.addrhd{ font-size:12px; font-weight:700; margin-bottom:11px; display:flex; align-items:center; gap:8px;}
.zoneres{ margin-top:11px; font-size:12px; padding:9px 11px; border-radius:9px; display:none; line-height:1.45;}
.zoneres.on{ display:block;}
.zoneres.z-ok{ background:rgba(22,163,74,.12); color:var(--green);}
.warr{ display:flex; flex-direction:column; gap:8px;}
.warr label{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:12.5px;}
.warr label input{ width:16px; height:16px; margin-top:2px; accent-color:var(--accent); flex:none;}
.warr small{ display:block; color:var(--dim); font-size:11px; margin-top:1px;}

/* signatures: action grid + signed-doc list */
.sigactions{ display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.doclist{ list-style:none; margin:0; padding:0;}
.doclist .li .ic{ font-size:13px;}
.sf small{ color:var(--faint); font-weight:400; font-size:11px;}

/* sign overlay (terms review + signature pad) */
.signov{ position:fixed; inset:0; background:rgba(8,10,18,.6); backdrop-filter:blur(4px); z-index:75; display:none; place-items:center; padding:18px;}
.signov.on{ display:grid;}
.signbox{ width:620px; max-width:96vw; max-height:92vh; background:var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); display:flex; flex-direction:column; overflow:hidden;}
.signhd{ display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);} .signhd h3{ margin:0; font-size:16px;} .signhd .ibtn{ margin-left:auto;}
.signstep{ padding:18px 20px; overflow-y:auto;}
.termsbox{ border:1px solid var(--border); border-radius:11px; background:var(--panel-2); padding:15px 16px; max-height:44vh; overflow-y:auto; font-size:12.5px; line-height:1.65; color:var(--dim);}
.termsbox h4{ color:var(--ink); margin:14px 0 5px; font-size:13px;} .termsbox h4:first-child{ margin-top:0;}
.signer{ display:flex; align-items:center; justify-content:space-between; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:13px;} .signer .kk{ color:var(--faint);}
.sigpad{ position:relative; border:1px solid var(--border); border-radius:12px; background:var(--panel); height:200px; overflow:hidden;}
.sigpad canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair;}
.sigx{ position:absolute; left:18px; bottom:44px; font-size:20px; font-weight:800; color:var(--faint); pointer-events:none;}
.sigline{ position:absolute; left:18px; right:18px; bottom:40px; border-bottom:2px solid var(--border); pointer-events:none;}
.consent{ display:flex; gap:11px; align-items:flex-start; margin-top:15px; font-size:12.5px; line-height:1.5; color:var(--dim); cursor:pointer;}
.consent input{ margin-top:1px; width:18px;height:18px; accent-color:var(--accent); flex:none;}
.signfoot{ padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px;}

/* mock action toast */
.podtoast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:12px; font-size:13px; font-weight:600; box-shadow:0 14px 40px rgba(0,0,0,.4); z-index:90; opacity:0; transition:.25s; pointer-events:none; max-width:88vw; text-align:center;}
.podtoast.on{ opacity:1; transform:translateX(-50%) translateY(0);}

/* ===================== concept screens ===================== */
/* Referrals · Payment Plans · Notifications · Onboarding · Projects ·
   Capacity & Payroll — design-only Helm screens (static mock, not wired). */

/* program banner (referrals) */
.pbanner{ display:flex; gap:15px; align-items:center; background:linear-gradient(135deg,var(--accent),var(--violet)); color:#fff; border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow); margin-bottom:16px; flex-wrap:wrap;}
.pbanner .pb-i{ width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.18); display:grid;place-items:center; font-size:20px; flex:none;}
.pbanner .pb-t{ font-weight:750; font-size:15px;} .pbanner .pb-s{ font-size:12.5px; opacity:.92; margin-top:2px; max-width:560px; line-height:1.45;}
.pbanner .pb-stat{ margin-left:auto; display:flex; gap:24px;}
.pbanner .pb-stat .n{ font-size:21px; font-weight:800; letter-spacing:-.5px;} .pbanner .pb-stat .l{ font-size:11px; opacity:.9;}

/* membership / plan choice cards (onboarding) */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.plan{ border:1px solid var(--border); border-radius:var(--r); padding:16px; background:var(--panel); cursor:pointer; position:relative; transition:.12s;}
.plan:hover{ border-color:var(--accent);}
.plan.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-sm);}
.plan .pn{ font-weight:750; font-size:14px;}
.plan .pp{ font-size:23px; font-weight:800; letter-spacing:-.6px; margin:6px 0 2px;} .plan .pp small{ font-size:12px; color:var(--dim); font-weight:600; letter-spacing:0;}
.plan .pf{ font-size:11.5px; color:var(--dim); margin-top:10px; line-height:1.75;}
.plan .pick-dot{ position:absolute; top:14px; right:14px; width:18px;height:18px;border-radius:50%; border:2px solid var(--border);}
.plan.sel .pick-dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px var(--panel);}

/* onboarding wizard stepper */
.wiz{ display:grid; grid-template-columns:228px 1fr; gap:18px; align-items:start;}
.wizsteps{ display:flex; flex-direction:column; gap:2px; position:sticky; top:74px;}
.wizstep{ display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:10px; color:var(--dim);}
.wizstep .wn{ width:24px;height:24px;border-radius:50%; flex:none; display:grid;place-items:center; font-size:11px; font-weight:800; background:var(--panel-2); color:var(--dim); border:1px solid var(--border);}
.wizstep.on{ background:var(--accent-soft);} .wizstep.on .wt{ color:var(--accent);} .wizstep.on .wn{ background:var(--accent); color:#fff; border-color:transparent;}
.wizstep.done .wn{ background:var(--green); color:#fff; border-color:transparent;}
.wizstep .wt{ font-weight:650; font-size:13px;} .wizstep .wd{ font-size:11px; color:var(--faint); margin-top:1px;}

/* inline duplicate-email warning (contact detail) */
.warnline{ display:flex; align-items:center; gap:8px; background:rgba(224,138,30,.12); color:var(--amber); border-radius:8px; padding:7px 10px; font-size:11.5px; font-weight:600; margin-top:8px;}
.warnline .lnk{ margin-left:auto; cursor:pointer; text-decoration:underline; white-space:nowrap;}

/* deceased / lifecycle (contact detail) */
.dz-banner{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border); border-left:3px solid var(--faint); border-radius:10px; padding:11px 13px; font-size:12.5px; color:var(--dim); margin-bottom:13px;}
.subcard{ border:1px dashed var(--border); border-radius:11px; padding:13px 14px; margin-top:12px; background:var(--panel-2);}
.subcard .sct{ font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:7px;}
.tag-tech{ font-size:9px; letter-spacing:.5px; font-weight:800; color:var(--rose); background:rgba(224,65,58,.13); padding:2px 7px; border-radius:5px; text-transform:uppercase;}

/* ===================== tech login (Azure / Entra SSO) ===================== */
body.login{ display:block; height:auto; overflow:auto;}
.loginwrap{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;}
.login-hero{ position:relative; overflow:hidden; background:linear-gradient(150deg,var(--accent),var(--violet)); color:#fff; padding:50px 54px; display:flex; flex-direction:column;}
.login-hero::after{ content:""; position:absolute; right:-130px; bottom:-130px; width:380px;height:380px;border-radius:50%; background:rgba(255,255,255,.08);}
.login-hero .lbrand{ display:flex; align-items:center; gap:12px; font-weight:750; font-size:20px; position:relative;}
.login-mk{ width:38px;height:38px;border-radius:11px; background:rgba(255,255,255,.18); position:relative; flex:none;}
.login-mk::after{ content:""; position:absolute; inset:9px; border:2.5px solid #fff; border-radius:50%; border-bottom-color:transparent; border-left-color:transparent; transform:rotate(35deg);}
.login-hero .lh-mid{ margin:auto 0; position:relative;}
.login-hero h1{ font-size:34px; line-height:1.15; letter-spacing:-.7px; margin:0 0 12px; max-width:460px;}
.login-hero .lh-sub{ font-size:14.5px; opacity:.92; max-width:430px; line-height:1.5; margin:0;}
.login-hero .lh-feats{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:12px;}
.login-hero .lh-feats li{ display:flex; align-items:center; gap:11px; font-size:13.5px; opacity:.96;}
.login-hero .lh-feats li::before{ content:"✓"; width:22px;height:22px;border-radius:50%; background:rgba(255,255,255,.2); display:grid;place-items:center; font-size:12px; font-weight:800; flex:none;}
.login-hero .lh-foot{ font-size:12px; opacity:.85; position:relative;}
.login-panel{ display:grid; place-items:center; padding:40px 24px; background:var(--bg);}
.login-card{ width:372px; max-width:100%; text-align:center;}
.lc-mk{ width:48px;height:48px;border-radius:13px; margin:0 auto 18px; background:linear-gradient(135deg,var(--accent),var(--teal)); position:relative; box-shadow:0 8px 22px rgba(81,89,240,.4);}
.lc-mk::after{ content:""; position:absolute; inset:12px; border:2.5px solid var(--panel); border-radius:50%; border-bottom-color:transparent; border-left-color:transparent; transform:rotate(35deg);}
.login-card h2{ margin:0 0 5px; font-size:22px; letter-spacing:-.3px;}
.login-card .sub{ color:var(--dim); font-size:13px; margin:0 0 22px;}
.ms-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--panel); color:var(--ink); font-weight:650; font-size:14px; cursor:pointer; box-shadow:var(--shadow-sm); transition:.12s;}
.ms-btn:hover{ border-color:var(--accent); box-shadow:var(--glow);}
.ms-logo{ width:18px;height:18px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; flex:none;}
.ms-logo i{ display:block;} .ms-logo i:nth-child(1){background:#f25022;} .ms-logo i:nth-child(2){background:#7fba00;} .ms-logo i:nth-child(3){background:#00a4ef;} .ms-logo i:nth-child(4){background:#ffb900;}
.login-or{ margin:14px 0; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); font-weight:800;}
.login-note{ font-size:12px; color:var(--dim); line-height:1.6; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; text-align:left;}
.login-help{ margin-top:18px; font-size:12.5px; color:var(--faint);} .login-help a{ color:var(--accent); font-weight:600; text-decoration:none;}
@media(max-width:820px){ .loginwrap{ grid-template-columns:1fr;} .login-hero{ display:none;} }

/* ===================== expanded ticket ===================== */
.tkmeta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; font-size:12px; color:var(--dim);}
.tkmeta .lnk{ color:var(--accent); font-weight:600; cursor:pointer;}
.tktoolbar{ display:flex; gap:8px; align-items:center; margin:0 0 14px; flex-wrap:wrap;}
.cfilterbar{ padding:12px 14px 0;}
.tklayout{ display:grid; grid-template-columns:1fr 304px; gap:14px; align-items:start;}
.tkmain{ min-width:0;}
.tkrail{ display:flex; flex-direction:column; gap:13px;}
/* fix: the credit-wallet big number (.wal .b) collided with the generic bento
   .b card style (white panel + white text = invisible). Reset the box here. */
.wal .b{ background:transparent; border:0; padding:0; box-shadow:none;}
.tabs.scroll{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;} .tabs.scroll::-webkit-scrollbar{ display:none;}
.tabs.scroll span{ white-space:nowrap;}

/* note types in thread */
.msg .mtype{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:1px 6px; border-radius:5px; margin-left:7px;}
.mtype.disc{ background:var(--accent-soft); color:var(--accent);} .mtype.intl{ background:rgba(224,138,30,.16); color:var(--amber);} .mtype.reso{ background:rgba(22,163,74,.15); color:var(--green);}
.msg.reso .bub{ background:rgba(22,163,74,.09); border-color:rgba(22,163,74,.3); border-radius:11px;}

/* redesigned conversation feed (replaces the chat-bubble jumble) */
.thread{ padding:10px 14px 6px;}
.tmsg{ display:flex; gap:11px; padding:12px; border-radius:11px;}
.tmsg + .tmsg{ margin-top:3px;}
.tmsg .tav{ width:30px;height:30px;border-radius:9px; flex:none; display:grid;place-items:center; color:#fff; font-size:11px; font-weight:800;}
.tmsg .tbody{ flex:1; min-width:0;}
.thdr{ display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap;}
.thdr b{ font-size:12.5px;}
.thdr .ttime{ margin-left:auto; color:var(--faint); font-size:11px;}
.ttext{ font-size:13px; line-height:1.55; color:var(--ink);}
.tch{ font-size:9.5px; font-weight:700; color:var(--dim); background:var(--panel-2); border:1px solid var(--border); padding:1px 7px; border-radius:5px; white-space:nowrap;}
.ttype{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:1px 6px; border-radius:5px; white-space:nowrap;}
.ttype.disc{ background:var(--accent-soft); color:var(--accent);}
.ttype.intl{ background:rgba(224,138,30,.16); color:var(--amber);}
.ttype.reso{ background:rgba(22,163,74,.15); color:var(--green);}
.ttype.staff{ background:var(--panel-2); color:var(--dim);}
.tmsg.staff{ background:var(--panel-2);}
.tmsg.internal{ background:rgba(224,138,30,.08); border-left:3px solid var(--amber);}
.tmsg.resolution{ background:rgba(22,163,74,.08); border-left:3px solid var(--green);}

/* shared inbox — two-pane thread list ↔ conversation */
.inboxwrap{ display:grid; grid-template-columns:344px 1fr; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--panel); height:calc(100vh - 158px); min-height:460px;}
.threadlist{ border-right:1px solid var(--border); overflow-y:auto;}
.trow{ display:flex; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer;}
.trow:hover{ background:var(--panel-2);}
.trow.on{ background:var(--accent-soft);}
.trow .tav{ width:34px;height:34px;border-radius:10px; flex:none; display:grid;place-items:center; color:#fff; font-size:12px; font-weight:800;}
.trow .tw{ flex:1; min-width:0;}
.trow .tl1{ display:flex; align-items:center; gap:7px;} .trow .tl1 b{ font-size:12.5px;}
.trow .tl1 .tt{ margin-left:auto; color:var(--faint); font-size:10.5px; white-space:nowrap;}
.trow .tsub{ font-size:12px; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.trow .tsnip{ font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
.trow .tbadges{ display:flex; gap:6px; align-items:center; margin-top:5px;}
.unreaddot{ width:8px;height:8px;border-radius:50%; background:var(--accent); flex:none;}
.threadview{ display:flex; flex-direction:column; overflow:hidden;}
.tvhead{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--border);}
.tvhead .tav{ width:34px;height:34px;border-radius:10px; flex:none; display:grid;place-items:center; color:#fff; font-size:12px; font-weight:800;}
.tvbody{ flex:1; overflow-y:auto;}
.tvreply{ border-top:1px solid var(--border); padding:12px 16px;}
.ibreply{ flex:1; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--ink); padding:10px 12px; font-family:inherit; font-size:13px; outline:none;}

/* sidebar profile menu (edit profile / log out) */
.side{ position:relative;}
.me{ position:relative; cursor:pointer;}
.me .mechev{ margin-left:auto; color:var(--faint); font-size:10px;}
.profmenu{ position:absolute; left:10px; right:10px; bottom:62px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:96;}
.profmenu.on{ display:block;}
.profmenu .mi{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; cursor:pointer;}
.profmenu .mi:hover{ background:var(--panel-2);}
.profmenu .mic{ width:26px;height:26px;border-radius:8px; background:var(--panel-2); display:grid;place-items:center; font-size:13px; flex:none;}
.profmenu .mt{ font-size:13px; font-weight:600;}
body.collapsed .me .mechev{ display:none;}
body.collapsed .profmenu{ left:8px; right:auto; min-width:184px;}

/* composer */
.tkcomposer{ border-top:1px solid var(--border); padding:13px 16px;}
.tkcomposer textarea{ width:100%; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--ink); padding:10px; font-family:inherit; font-size:13px; min-height:62px; resize:vertical; margin-top:10px;}
.cdetail{ display:flex; flex-direction:column; gap:9px; margin-top:11px;}
.cline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.cline .clab{ font-size:10px; font-weight:800; color:var(--faint); width:58px; flex:none; text-transform:uppercase; letter-spacing:.4px;}
.rcpts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.rcpt{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); border-radius:20px; padding:3px 10px; font-size:11.5px; font-weight:600;}
.rcpt .x{ cursor:pointer; opacity:.6; font-size:10px;}
.cinternal{ margin-top:11px; font-size:11.5px; color:var(--amber); background:rgba(224,138,30,.1); border:1px solid rgba(224,138,30,.28); border-radius:9px; padding:9px 11px;}
.crow{ display:flex; gap:9px; align-items:center; margin-top:11px;}
.seg.sm button{ padding:5px 10px; font-size:11px;}
.techrow{ display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;} .techrow:last-child{ border:0;}
.techrow .role{ margin-left:auto; font-size:11px; color:var(--faint);}
.stars{ color:var(--amber); font-size:15px; letter-spacing:1px;}

/* ===================== integrations hub ===================== */
.intcat{ font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); font-weight:800; margin:22px 0 11px;}
.intgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(254px,1fr)); gap:13px;}
.intcard{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:15px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:11px;}
.intcard .ih{ display:flex; align-items:center; gap:11px;}
.intcard .ilogo{ width:40px;height:40px;border-radius:11px; display:grid;place-items:center; font-size:18px; color:#fff; flex:none;}
.intcard .iname{ font-weight:700; font-size:13.5px;} .intcard .icat{ font-size:11px; color:var(--faint); margin-top:1px;}
.intcard .idesc{ font-size:12px; color:var(--dim); line-height:1.55; flex:1; min-height:34px;}
.intcard .ifoot{ display:flex; align-items:center; gap:8px; padding-top:11px; border-top:1px solid var(--border);}
.intcard .ifoot .sub{ color:var(--faint); font-size:11px;}
.istat{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;}
.istat .d{ width:7px;height:7px;border-radius:50%; background:currentColor;}
.istat.on{ color:var(--green);} .istat.off{ color:var(--faint);} .istat.warn{ color:var(--amber);}
.intcard .ifoot .lnk2{ margin-left:auto;}

/* ===================== ticket refinements ===================== */
/* note composer checkboxes */
.ck{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; cursor:pointer;}
.ck input{ width:16px;height:16px; accent-color:var(--accent); flex:none;}
.csmall{ font-size:11px; color:var(--faint);}

/* pre-service timer gate */
.tkgate{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-radius:11px; padding:11px 14px; font-size:12.5px; margin-bottom:14px; line-height:1.5;}
.tkgate.warn{ background:rgba(224,138,30,.1); border:1px solid rgba(224,138,30,.3); color:var(--amber);}
.tkgate.ok{ background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3); color:var(--green);}

/* details: read-only until "Edit" */
[data-tkpane="details"]:not(.editing) .fld select,
[data-tkpane="details"]:not(.editing) .fld input,
[data-tkpane="details"]:not(.editing) .fld textarea{ background:transparent; border-color:transparent; padding-left:2px; color:var(--ink); -webkit-text-fill-color:var(--ink); appearance:none; -webkit-appearance:none; cursor:default; font-weight:600; resize:none;}

/* pod status block (schedule / approval / signature) */
.podstatus{ background:var(--panel-2); border:1px solid var(--border); border-radius:11px; padding:12px 14px; margin-bottom:16px;}
.podstatus .pstop{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:7px;}
.podstatus .psrow{ display:flex; justify-content:space-between; font-size:12px; color:var(--dim); padding:3px 0;}
.podstatus .psrow b{ color:var(--ink);}

/* filter label */
.flabel{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--faint); align-self:center; margin-right:2px;}

/* credential reveal box (timed exposure) */
.revealbox{ border:1px solid var(--border); border-radius:11px; background:var(--panel-2); padding:14px 16px;}
.rv-secret{ font-family:ui-monospace,monospace; font-size:19px; font-weight:700; letter-spacing:.5px; word-break:break-all; color:var(--ink);}
.rv-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:11.5px; color:var(--dim);}

/* ===================== batch 2026-06-30: ticket + invoice additions ===================== */

/* warranty pill + "covered by membership" pill */
.pill.warr{ background:rgba(14,165,160,.15); color:var(--teal);}
.pill.covered{ background:rgba(124,92,240,.15); color:var(--violet);}

/* clickable status pill + change popover (ticket header, invoice status) */
.statuswrap{ position:relative; display:inline-block;}
.statusctl{ cursor:pointer; user-select:none;}
.statusmenu{ position:absolute; top:calc(100% + 6px); left:0; z-index:60; display:none; min-width:150px;
  background:var(--panel); border:1px solid var(--border); border-radius:11px; box-shadow:var(--shadow); padding:5px;}
.statusmenu.on{ display:block;}
.statusmenu button{ display:block; width:100%; text-align:left; background:0; border:0; font-family:inherit; font-size:12.5px; color:var(--ink);
  padding:8px 10px; border-radius:8px; cursor:pointer;}
.statusmenu button:hover{ background:var(--panel-2);}

/* support-credit wallet: clickable + no-membership state */
.wal.clickable{ cursor:pointer; transition:transform .12s, box-shadow .12s;}
.wal.clickable:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(81,89,240,.4);}
.wal.none{ background:linear-gradient(135deg,#6b7280,#4b5563);}

/* signature-sheet "covered by membership" banner (mirrors cw-pod-signatures) */
.covered{ background:rgba(124,92,240,.1); border:1px solid rgba(124,92,240,.3); color:var(--violet);
  border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.5; margin-bottom:12px;}

/* ---- in-person terminal (card reader) ---- */
.reader{ background:var(--panel-2); border:1px solid var(--border); border-radius:13px; padding:13px; margin:14px 0;}
.reader .rdr-top{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dim); margin-bottom:11px;}
.reader .rdr-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.reader .rdr-batt{ font-size:11px; color:var(--faint);}
.reader .rdr-screen{ background:var(--ink); color:#fff; border-radius:10px; min-height:132px; display:grid; place-items:center; text-align:center; padding:18px;}
.reader .rdr-amt{ font-size:30px; font-weight:800; letter-spacing:-1px; font-family:ui-monospace,monospace;}
.reader .rdr-msg{ font-size:12.5px; opacity:.85; margin-top:8px;}
.reader .rdr-msg.pulse{ animation:tpulse 1.1s ease-in-out infinite;}
.reader .cardprompt{ display:flex; gap:10px; justify-content:center;}
.reader .cp{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:10px 14px; font-size:11px; line-height:1.4; opacity:.5;}
.reader .cp.on{ opacity:1; border-color:var(--sky); box-shadow:0 0 0 2px rgba(14,165,233,.4);}
.reader .rdr-check{ width:46px; height:46px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:26px; font-weight:800; margin:0 auto;}
.reader .spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:tspin .8s linear infinite; margin:0 auto;}
@keyframes tspin{ to{ transform:rotate(360deg);} }
@keyframes tpulse{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

/* ---- create-invoice source chooser ---- */
.pickcards{ display:flex; flex-direction:column; gap:10px;}
.pickcard{ display:flex; align-items:center; gap:13px; text-align:left; width:100%; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:14px; font-family:inherit;}
.pickcard:hover{ border-color:var(--accent); background:var(--accent-soft);}
.pickcard .pc-ic{ width:38px; height:38px; border-radius:10px; background:var(--panel); border:1px solid var(--border); display:grid; place-items:center; font-size:18px; flex:none;}
.pickcard .pc-tx{ flex:1;}
.pickcard .pc-tx b{ font-size:13.5px; color:var(--ink);}
.pickcard .pc-sub{ font-size:11.5px; color:var(--dim); margin-top:2px; line-height:1.45;}
.pickcard .pc-go{ color:var(--accent); font-weight:800; font-size:16px;}

/* ---- from-ticket billables ---- */
.ftgroup{ margin-top:14px;}
.ftg-hd{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--faint); margin-bottom:4px;}
.ftg-note{ font-size:11px; color:var(--dim); background:var(--panel-2); border-radius:8px; padding:6px 9px; margin-bottom:6px; line-height:1.45;}
.ftg-tag{ font-size:9.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--teal); background:rgba(14,165,160,.14); padding:2px 6px; border-radius:5px; margin-left:6px;}

/* new-invoice line inputs */
.ni-inp{ border:1px solid var(--border); border-radius:7px; background:var(--panel-2); color:var(--ink); padding:6px 8px; font-family:inherit; font-size:12.5px;}
.ni-desc{ width:100%;} .ni-qty{ width:46px; text-align:center;} .ni-rate{ width:74px; text-align:right;}

/* ============================================================
   Responsive / mobile — the shell is a fixed 230px sidebar + main;
   below these breakpoints multi-column grids stack and the sidebar
   becomes an off-canvas drawer opened by the topbar ☰ (toggleSide).
   ============================================================ */
.navscrim{ display:none; }

@media(max-width:960px){
  .kpis{ grid-template-columns:1fr 1fr; }
  .grid360{ grid-template-columns:1fr; }
  .tk,.tklayout,.kbwrap,.setwrap,.wiz,.plans{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .inboxwrap{ grid-template-columns:1fr; height:auto; }
  .lanes{ grid-template-columns:1fr; }
}

@media(max-width:720px){
  /* single column; sidebar lifts out of the grid into an off-canvas drawer */
  body, body.collapsed{ grid-template-columns:1fr; }
  .side{ position:fixed; top:0; left:0; bottom:0; width:252px; z-index:60;
    transform:translateX(-100%); transition:transform .22s ease; }
  body.navopen .side{ transform:none; box-shadow:24px 0 60px rgba(0,0,0,.32); }
  /* the drawer always shows full labels even if 'collapsed' persisted from desktop */
  body.collapsed .side{ width:252px; }
  body.collapsed .nav .cat .label, body.collapsed .brand b, body.collapsed .brand small,
  body.collapsed .askaria .label, body.collapsed .askaria kbd, body.collapsed .me .who,
  body.collapsed .nav .cat .chev{ display:revert; }
  body.collapsed .brand, body.collapsed .askaria, body.collapsed .me, body.collapsed .nav .cat{ justify-content:flex-start; }

  .navscrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:55; opacity:0; pointer-events:none; transition:opacity .2s; }
  body.navopen .navscrim{ opacity:1; pointer-events:auto; }

  .top{ padding:10px 13px; gap:9px; }
  .top h1{ font-size:15px; }
  .cmd{ display:none; }            /* hide the wide "jump to…" search on phones */
  .page{ padding:16px 14px; }
  .kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .bento, .plans, .pp-actions, .frow, .intgrid{ grid-template-columns:1fr; }
  .sheet{ width:100%; max-width:100%; }
  /* wide data tables scroll horizontally instead of crushing columns */
  .b.list{ overflow-x:auto; } .b.list table{ min-width:560px; }
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}