/* NestQueue app UI v7: themes via CSS variables, density, views */
:root{--brand:#4f46e5}
body{--bg:#f5f6fb;--panel:#fff;--panel2:#f8fafc;--text:#0f172a;--text2:#334155;--muted:#64748b;--line:#e5e7eb;--line2:#f0f2f6;--hover:#f1f5f9;--side:#fff;--sidetext:#334155;--input:#fff;--inputline:#d6dae3;--shadow:0 1px 2px rgba(15,23,42,.05);--col:#eef0f6;--on:color-mix(in srgb,var(--brand) 12%,var(--panel));--code:#0f172a;--codetext:#e2e8f0;--pad:18px;--cell:10px 12px;--fs:14.5px}
body[data-theme=dark],body[data-theme=midnight]{--bg:#0b1120;--panel:#111827;--panel2:#0f172a;--text:#e5e7eb;--text2:#cbd5e1;--muted:#94a3b8;--line:#1f2937;--line2:#1e293b;--hover:#1e293b;--side:#0f172a;--sidetext:#cbd5e1;--input:#0f172a;--inputline:#334155;--shadow:none;--col:#0f172a;--on:color-mix(in srgb,var(--brand) 28%,#111827);--code:#020617}
body[data-theme=midnight]{--bg:#070b1a;--panel:#0e1430;--panel2:#0a1028;--line:#1c2550;--line2:#161e44;--hover:#18214a;--side:#060a1c;--input:#0a1028;--inputline:#2a356b;--col:#0a1028;--brand:#8b5cf6;--on:#25205a}
@media (prefers-color-scheme:dark){body[data-theme=system]{--bg:#0b1120;--panel:#111827;--panel2:#0f172a;--text:#e5e7eb;--text2:#cbd5e1;--muted:#94a3b8;--line:#1f2937;--line2:#1e293b;--hover:#1e293b;--side:#0f172a;--sidetext:#cbd5e1;--input:#0f172a;--inputline:#334155;--shadow:none;--col:#0f172a;--on:color-mix(in srgb,var(--brand) 28%,#111827);--code:#020617}}
body[data-theme=ocean]{--bg:#eef6fb;--panel:#fff;--panel2:#f3f9fc;--line:#d6e7f1;--line2:#e7f1f7;--hover:#e3f1f8;--side:#0c4a6e;--sidetext:#e0f2fe;--col:#e0eef6;--brand:#0284c7;--on:rgba(255,255,255,.16)}
body[data-theme=forest]{--bg:#f1f6f1;--panel:#fff;--panel2:#f5faf5;--line:#d9e7da;--line2:#e8f1e8;--hover:#e6f2e7;--side:#14532d;--sidetext:#dcfce7;--col:#e3efe4;--brand:#15803d;--on:rgba(255,255,255,.16)}
body[data-theme=sunset]{--bg:#fff7ef;--panel:#fff;--panel2:#fffaf5;--line:#f6dfcb;--line2:#fbeee2;--hover:#fdeedf;--side:linear-gradient(180deg,#9a3412,#be185d);--sidetext:#ffedd5;--col:#fcebdc;--brand:#ea580c;--on:rgba(255,255,255,.18)}
body[data-theme=contrast]{--bg:#fff;--panel:#fff;--panel2:#fff;--text:#000;--text2:#000;--muted:#1f2937;--line:#000;--line2:#000;--hover:#ffff00;--side:#000;--sidetext:#fff;--input:#fff;--inputline:#000;--col:#f3f3f3;--brand:#0000cc;--on:#ffff00;--shadow:none}
body[data-theme=contrast] a{text-decoration:underline}body[data-theme=contrast] *:focus-visible{outline:3px solid #ff0 !important;outline-offset:2px}body[data-theme=contrast] nav a.on{color:#000 !important}body[data-theme=contrast] .card,body[data-theme=contrast] .stat{border-width:2px}
body[data-density=compact]{--pad:12px;--cell:6px 10px;--fs:13.5px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:var(--fs)}
a{color:var(--brand);text-decoration:none}h1{font-size:24px;margin:4px 0 16px}h2{margin:4px 0 12px}h3{margin:0 0 10px;font-size:15px}code{background:var(--hover);padding:1px 5px;border-radius:5px;font-size:.92em}
pre.code{background:var(--code);color:var(--codetext);padding:12px 14px;border-radius:10px;overflow:auto;white-space:pre-wrap;word-break:break-all;font-size:12.5px}
.demo-banner{background:linear-gradient(90deg,#4338ca,#0891b2);color:#fff;padding:8px 16px;font-size:13.5px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.demo-banner .lnk{color:#e0e7ff;text-decoration:underline;font-size:13.5px}.demo-banner.trial{background:linear-gradient(90deg,#0f766e,#0891b2)}.demo-banner.locked{background:linear-gradient(90deg,#b91c1c,#c2410c)}
.shell{display:flex;min-height:calc(100vh - 40px)}aside{width:236px;flex:none;background:var(--side);color:var(--sidetext);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{padding:4px 8px 6px;display:block}.logo img{max-width:184px}.lg-d{display:none}
body:is([data-theme=ocean],[data-theme=forest],[data-theme=sunset],[data-theme=contrast],[data-theme=dark],[data-theme=midnight]) aside .lg-l{display:none}body:is([data-theme=ocean],[data-theme=forest],[data-theme=sunset],[data-theme=contrast],[data-theme=dark],[data-theme=midnight]) aside .lg-d{display:inline}body:is([data-theme=dark],[data-theme=midnight]) .lg-l{display:none}body:is([data-theme=dark],[data-theme=midnight]) .lg-d{display:inline}
@media (prefers-color-scheme:dark){body[data-theme=system] .lg-l{display:none}body[data-theme=system] .lg-d{display:inline}}
.tenant{font-size:11.5px;opacity:.75;padding:0 8px 14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
nav{flex:1;overflow:auto}nav a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;color:var(--sidetext);font-weight:500;margin-bottom:1px}nav a:hover{background:var(--hover);color:var(--text)}body[data-theme=ocean] nav a:hover,body[data-theme=forest] nav a:hover,body[data-theme=sunset] nav a:hover,body[data-theme=contrast] nav a:hover{background:rgba(255,255,255,.12);color:#fff}
nav a.on{background:var(--on);color:var(--brand);font-weight:600}body[data-theme=ocean] nav a.on,body[data-theme=forest] nav a.on,body[data-theme=sunset] nav a.on{color:#fff}nav span{width:20px;text-align:center}.navh{font-size:10.5px;text-transform:uppercase;opacity:.6;margin:14px 10px 6px;font-weight:700;letter-spacing:.05em}
.me{display:flex;gap:10px;align-items:center;border-top:1px solid color-mix(in srgb,var(--sidetext) 18%,transparent);padding-top:12px}.me small{display:block;opacity:.7}.me form{margin-left:auto}.me .lnk{color:inherit}.av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}
.themepick{margin-top:10px;font-size:12.5px}.themepick summary{cursor:pointer;padding:6px 8px;border-radius:8px;opacity:.85;list-style:none}.themepick summary:hover{background:rgba(127,127,127,.15)}.themepick form{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px}.sw{margin:0;font-weight:500;font-size:12px;color:var(--text)}.sw input{display:none}.sw span{display:flex;gap:6px;align-items:center;padding:5px 6px;border-radius:7px;border:1px solid var(--line);cursor:pointer}.sw input:checked+span{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
.sw i{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.15)}.sw[data-theme=light] i{background:linear-gradient(135deg,#fff 50%,#4f46e5 50%)}.sw[data-theme=dark] i{background:linear-gradient(135deg,#111827 50%,#6366f1 50%)}.sw[data-theme=system] i{background:linear-gradient(135deg,#fff 50%,#111827 50%)}.sw[data-theme=ocean] i{background:linear-gradient(135deg,#0c4a6e 50%,#38bdf8 50%)}.sw[data-theme=forest] i{background:linear-gradient(135deg,#14532d 50%,#4ade80 50%)}.sw[data-theme=sunset] i{background:linear-gradient(135deg,#9a3412 50%,#fb923c 50%)}.sw[data-theme=midnight] i{background:linear-gradient(135deg,#060a1c 50%,#8b5cf6 50%)}.sw[data-theme=contrast] i{background:linear-gradient(135deg,#000 50%,#ff0 50%)}
.themepick .row label{font-size:12px}
main{flex:1;padding:24px 32px;max-width:1240px;min-width:0}.center{max-width:440px;margin:8vh auto;padding:0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:var(--pad);margin-bottom:16px;box-shadow:var(--shadow)}.card.flush{padding:0;overflow:auto}.card.narrow{max-width:640px}.card.scroll{overflow:auto}.auth{text-align:center}.auth form{text-align:left}.card.ok{border-color:#86efac}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:14px;font-family:inherit;text-align:center;text-decoration:none !important}.btn:hover{filter:brightness(1.08)}.btn:disabled{opacity:.6}.btn.full{width:100%;margin-top:6px}.btn.sm{padding:6px 12px;font-size:13px}.btn.xs{padding:4px 8px;font-size:12px}.btn.ghost{background:var(--hover);color:var(--text2)}.btn.white{background:#fff;color:#4338ca;padding:4px 12px;font-size:13px}.btn.lg{padding:13px 20px;font-size:16px}.lnk{background:none;border:0;cursor:pointer;font-size:18px;color:var(--muted)}
.gbtn{background:#fff;color:#1f2937;border:1px solid #d1d5db;display:flex;gap:10px;justify-content:center;align-items:center}.or{text-align:center;color:var(--muted);margin:12px 0;font-size:12px}
label{display:block;font-weight:600;font-size:13px;margin-bottom:12px;color:var(--text2)}label.inline{display:inline-flex;gap:6px;align-items:center;margin:0 10px 0 0;font-weight:500}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--inputline);border-radius:8px;font:inherit;margin-top:5px;background:var(--input);color:var(--text)}input[type=checkbox],input[type=radio]{width:auto;margin:0;accent-color:var(--brand)}input[type=color]{height:40px;padding:3px}input[type=file]{padding:6px}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);border-color:var(--brand)}
fieldset{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 12px}legend{font-weight:700;font-size:13px;padding:0 6px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row.end{justify-content:flex-end}.row.end>*{flex:none}.row.wrap{flex-wrap:wrap}.row.wrap>*{flex:1 1 140px;margin:0}.row.between{justify-content:space-between}.row.between>*{flex:none}.row input,.row select{margin-top:0}
table{width:100%;border-collapse:collapse}td,th{padding:var(--cell);border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}th{font-size:11.5px;text-transform:uppercase;color:var(--muted);background:var(--panel2);letter-spacing:.03em;white-space:nowrap}table.list tr:hover td{background:var(--hover)}td.r,th.r,.r{text-align:right}tr.dim td{opacity:.55}tr.tot td{border-top:2px solid var(--line);font-size:15px}
th.asc:after{content:" ▲"}th.desc:after{content:" ▼"}
.muted{color:var(--muted)}.small{font-size:12px}.hide{display:none !important}.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.ok{color:#15803d}.bad{color:#dc2626}
.b{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;background:#eef2f7;color:#475569;white-space:nowrap}.b-open{background:#dbeafe;color:#1d4ed8}.b-pending{background:#fef3c7;color:#92400e}.b-resolved,.b-done{background:#dcfce7;color:#166534}.b-closed{background:#e2e8f0;color:#475569}.b-urgent{background:#fee2e2;color:#b91c1c}.b-high{background:#ffedd5;color:#c2410c}.b-normal{background:#eef2ff;color:#4338ca}.b-low{background:#f1f5f9;color:#64748b}.b-note{background:#fef9c3;color:#854d0e}.b-admin{background:#ede9fe;color:#6d28d9}.b-agent{background:#e0f2fe;color:#0369a1}.b-customer{background:#f1f5f9;color:#475569}.b-todo{background:#f1f5f9;color:#475569}.b-doing{background:#dbeafe;color:#1d4ed8}
.b-requested{background:#fef3c7;color:#92400e}.b-approved{background:#dbeafe;color:#1d4ed8}.b-in_transit{background:#e0e7ff;color:#4338ca}.b-received{background:#cffafe;color:#0e7490}.b-refunded,.b-replaced{background:#dcfce7;color:#166534}.b-rejected{background:#fee2e2;color:#b91c1c}.b-paid,.b-processing{background:#fef3c7;color:#92400e}.b-shipped{background:#dbeafe;color:#1d4ed8}.b-delivered{background:#dcfce7;color:#166534}.b-cancelled{background:#e2e8f0;color:#475569}
.b-tier1{background:#e0f2fe;color:#0369a1}.b-tier2{background:#fef3c7;color:#92400e}.b-tier3{background:#fee2e2;color:#b91c1c}
.sla{font-size:12px;font-weight:600;white-space:nowrap}.sla.ok{color:#15803d}.sla.warn{color:#b45309}.sla.bad{color:#dc2626}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;flex-wrap:wrap}.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}.filters form{margin-left:auto}.filters input,.filters select{margin:0;padding:6px 10px;width:auto}
.chip{display:inline-block;padding:5px 12px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--text2);font-size:13px;cursor:pointer;list-style:none}.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}summary.chip::-webkit-details-marker{display:none}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.views{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}.views a{padding:6px 11px;border-radius:7px;color:var(--text2);font-size:13px;font-weight:500;white-space:nowrap}.views a.on{background:var(--brand);color:#fff}.views a:hover:not(.on){background:var(--hover)}
@media(max-width:700px){.views a span{display:none}}
.saved{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.chip.sv{display:inline-flex;gap:4px;align-items:center;padding:3px 4px 3px 10px}.chip.sv form{display:inline}.chip.sv .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}.savebox,.colpick{position:relative;display:inline-block}.savebox form,.colpick form{position:absolute;z-index:20;top:34px;left:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);width:280px}.colpick form{width:440px;max-width:90vw;gap:6px}.colpick{margin-bottom:10px}.colpick label{flex:0 0 auto !important;font-size:12.5px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}.stats.mini{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.stat,.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}.stat small,.kpi small{color:var(--muted);font-weight:600;font-size:12px}.stat b,.kpi b{display:block;font-size:26px;margin-top:4px}.stat em{font-style:normal;font-size:12px;color:var(--muted)}.stat.good b{color:#15803d}.stat.warn b{color:#b45309}.stat.bad b{color:#dc2626}.stats.mini .stat b{font-size:19px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cols.wide{grid-template-columns:1fr 300px}.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:16px}.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.msg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}.msg.staff{border-left:4px solid var(--brand)}.msg.internal{background:#fffbeb;border-color:#fde68a;color:#1f2937}.mh{display:flex;gap:8px;align-items:center;margin-bottom:6px}.mh .muted{margin-left:auto;font-size:12px}.mb{line-height:1.55;overflow-wrap:anywhere}
.meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.ev:has(.ei){display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px dashed var(--line2);font-size:13px}.ev:has(.ei)>div{flex:1}.ei{width:26px;height:26px;border-radius:50%;background:var(--hover);display:grid;place-items:center;flex:none;font-size:13px}.evn{color:var(--muted);font-style:italic;margin-top:2px}.ev-escalate .ei{background:#fee2e2}.ev-transfer .ei{background:#e0e7ff}.ev-automation .ei{background:#fef3c7}
.atts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.att{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12.5px}.att img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.stars{display:flex;gap:6px}.stars button{font-size:26px;background:none;border:0;cursor:pointer;filter:grayscale(1);opacity:.6}.stars button:hover{filter:none;opacity:1}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.board.kanban{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.col{background:var(--col);border-radius:12px;padding:10px;min-height:220px;transition:.15s}.col.drop{outline:2px dashed var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--col))}.col h3{display:flex;gap:8px;align-items:center;margin:2px 4px 10px}
.task{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.05)}.task p{margin:6px 0;color:var(--muted);font-size:13px}.tm{font-size:12px;margin:6px 0;display:flex;gap:4px;flex-wrap:wrap;align-items:center}.over{color:#dc2626;font-weight:600}.ta{display:flex;gap:4px;flex-wrap:wrap}.ta form{display:inline}
.kcard{cursor:grab}.kcard.dragging{opacity:.4}.kcard a{color:var(--text)}.kmove select{padding:3px 6px;font-size:12px;margin-top:4px;width:auto}
.split{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:start}.slist{max-height:calc(100vh - 230px);overflow:auto}.si{display:block;padding:11px 14px;border-bottom:1px solid var(--line2);color:var(--text)}.si:hover{background:var(--hover)}.si.on{background:var(--on);border-left:3px solid var(--brand)}.spane{position:sticky;top:12px}
.cal{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}.calh{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}.calh b{font-size:16px;min-width:150px;text-align:center}.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cwd{padding:6px 8px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;background:var(--panel2);border-bottom:1px solid var(--line)}
.cd{min-height:104px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:4px 5px;display:flex;flex-direction:column;gap:2px;min-width:0}.cd:nth-child(7n){border-right:0}.cd.out{background:var(--panel2);opacity:.6}.cd.today{background:color-mix(in srgb,var(--brand) 7%,var(--panel))}.cd.today .cn{background:var(--brand);color:#fff;border-radius:99px;padding:0 6px}.cn{font-size:12px;font-weight:600;color:var(--muted);align-self:flex-start}
.ce{display:block;font-size:11.5px;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--brand) 13%,var(--panel));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--brand)}.ce.p-urgent{border-left-color:#dc2626}.ce.p-high{border-left-color:#f97316}.ce.p-low{border-left-color:#94a3b8}.ce.late{background:#fee2e2;color:#991b1b}.ce.s-resolved,.ce.s-closed,.ce.s-done{opacity:.6;text-decoration:line-through}.ce.ev{border-left-color:#db2777;background:#fce7f3;color:#831843}
.gantt{overflow:auto}.gh,.grow{display:grid;grid-template-columns:220px 1fr;gap:10px;align-items:center;min-width:760px}.gh{border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px}.gscale,.gtrack{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}.gscale span{font-size:11px;color:var(--muted);border-left:1px solid var(--line);padding-left:4px}
.grow{padding:4px 0;border-bottom:1px dashed var(--line2)}.gl{display:flex;flex-direction:column;min-width:0}.gl b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gl small{font-size:11.5px}.gtrack{height:26px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/6 - 1px),var(--line2) calc(100%/6 - 1px) calc(100%/6))}
.gbar{grid-row:1;height:20px;margin-top:3px;border-radius:6px;background:var(--brand);color:#fff;font-size:11px;padding:2px 8px;white-space:nowrap;overflow:hidden}.gbar.s-todo{background:#94a3b8}.gbar.s-done{background:#16a34a}.gbar.late{background:#dc2626}.gtrack .today{grid-row:1;width:2px;background:#ef4444;height:26px;z-index:2}
.bar{height:8px;background:var(--col);border-radius:9px;overflow:hidden;margin:10px 0}.bar i{display:block;height:100%;background:var(--brand)}.minibar{height:6px;background:var(--col);border-radius:9px;overflow:hidden;width:80px;display:inline-block;margin-right:6px;vertical-align:middle}.minibar i{display:block;height:100%;background:var(--brand)}
.heat{display:grid;grid-template-columns:38px repeat(24,minmax(0,1fr));gap:2px;font-size:10.5px}.hh{color:var(--muted);text-align:center}.hd{color:var(--muted);font-weight:600;font-size:11px;align-self:center}.hc{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--brand) calc(var(--a) * 100%),var(--col))}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--text);display:flex;flex-direction:column;gap:4px}.tile span{font-size:26px}.tile small{color:var(--muted)}.tile:hover{border-color:var(--brand)}
.search{display:flex;gap:8px;margin-bottom:18px;max-width:640px}.search input{margin:0}
.kb{color:var(--text);display:block}.kb:hover{border-color:var(--brand)}.article{line-height:1.65;max-width:760px}
.ticket{display:flex;justify-content:space-between;gap:20px;background:var(--panel);border-radius:16px;border:2px dashed #c7d2fe;padding:24px;max-width:640px;margin:12px 0}.ticket h2{margin:4px 0}#qr{padding:8px;background:#fff;border-radius:8px;align-self:center}
.result{margin-top:14px;padding:16px;border-radius:10px;background:var(--hover);font-size:15px}.result.ok{background:#dcfce7;color:#14532d}.result.bad{background:#fee2e2;color:#7f1d1d}.result.warn{background:#fef3c7;color:#78350f}.result form{margin-top:10px}
.mod{display:flex;gap:14px;align-items:center}.mod .ic{font-size:28px}.mod div{flex:1}.mod.soon{opacity:.85}.mod.pick{cursor:pointer;align-items:flex-start;margin:0}.mod.pick input{margin-top:6px;width:18px;height:18px}.mod.pick:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 25%,transparent)}.mod .price{font-size:13px;color:var(--brand)}
.toggle{width:46px;height:26px;border-radius:99px;background:#cbd5e1;border:0;position:relative;cursor:pointer}.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.toggle.on{background:#16a34a}.toggle.on i{left:23px}
.store{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}.store .gh{grid-column:1/-1;margin:10px 0 0;font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}.sum{position:sticky;top:12px}
.qt td{padding:6px 0;font-size:13px;border-bottom:1px dashed var(--line2)}.qt small{display:block;color:var(--muted);font-size:11.5px}.qline{display:flex;justify-content:space-between;font-size:13px;margin:6px 0}.qline.save{color:#15803d;font-weight:600}.qtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--line);padding-top:8px;margin-top:6px}.qtotal b{font-size:26px}.qnote{font-size:12px;color:var(--muted);margin-top:4px}.qnote.hint{color:var(--brand);font-weight:600}
.steps{display:flex;gap:4px;margin:10px 0}.steps div{flex:1;text-align:center;font-size:11.5px;padding:6px 2px;border-radius:6px;background:var(--col);color:var(--muted)}.steps div.done{background:var(--brand);color:#fff}
.upsell{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.dns td,.dns th{font-size:12.5px}.warn{color:#b45309}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}.tabs a{padding:8px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}.tabs a.on{color:var(--brand);border-color:var(--brand)}
.flash{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 14px;border-radius:10px;margin-bottom:16px}.flash.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.ws{display:flex;align-items:center;border:1px solid var(--inputline);border-radius:8px;margin-top:5px;background:var(--input);overflow:hidden}.ws span{padding:0 4px 0 10px;color:var(--muted);font-weight:500;white-space:nowrap}.ws input{border:0;margin:0;padding-left:0}
/* Customer portal */
body.portal{background:var(--bg)}.phead{background:var(--panel);border-bottom:1px solid var(--line)}.pwrap{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.pbrand{display:flex;gap:10px;align-items:center;color:var(--text);font-size:17px}.plogo{max-height:36px;max-width:180px}.pmark{width:34px;height:34px;border-radius:9px;color:#fff;display:grid;place-items:center;font-weight:800}
.pnav{display:flex;gap:16px;align-items:center;margin-left:auto;flex-wrap:wrap}.pnav a{color:var(--text2);font-weight:500}.pnav a.btn{color:#fff}
.pmain{max-width:1080px;margin:0 auto;padding:24px 20px 40px}.pmain.embedded{padding:12px;max-width:none}body.embed{background:transparent}body.embed .card.narrow{max-width:none;margin:0}
.phero{text-align:center;padding:44px 16px 36px;margin:-24px -20px 24px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 85%,#000),var(--brand));color:#fff;border-radius:0 0 22px 22px}.phero h1{font-size:34px;margin:0 0 16px}.psearch{display:flex;gap:8px;max-width:560px;margin:0 auto 18px}.psearch input{margin:0;padding:12px 14px;font-size:15px}.phero .btn{background:#0f172a}
.pcards .card{color:var(--text);transition:.15s}.pcards .card:hover{border-color:var(--brand);transform:translateY(-2px)}.big{font-size:30px}.plinks{padding-left:18px;line-height:1.9}.art{line-height:1.7}.pfoot{text-align:center;color:var(--muted);font-size:12.5px;padding:24px}
.types{display:flex;flex-direction:column;gap:8px}.tt{padding:10px;border:1px solid var(--line);border-radius:8px}.tt:has(input:checked){border-color:var(--brand)}.total{font-size:16px}
/* chat iframe */
.chatapp{display:flex;flex-direction:column;height:calc(100vh - 24px);background:var(--panel);border-radius:14px;overflow:hidden;border:1px solid var(--line)}.chead{background:var(--brand);color:#fff;padding:14px 16px;display:flex;flex-direction:column}.chead small{opacity:.9}
.cbody{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--panel2)}.cm{max-width:82%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.cm.them{background:var(--panel);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}.cm.me{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}.cm small{display:block;font-size:11px;opacity:.65;margin-top:3px}.cm.sys{align-self:center;background:none;color:var(--muted);font-size:12px}
.cstart,.csend{padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.cstart input,.cstart textarea,.csend input{margin:0}.csend{flex-direction:row}.csend .btn{flex:none}.cfoot{text-align:center;font-size:11px;color:var(--muted);padding:4px 0 8px}
.fakeshop .fs-hero{color:#fff;border-radius:16px;padding:40px;margin-bottom:16px}.fakeshop .fs-hero h1{font-size:32px}
@media(max-width:980px){.store{grid-template-columns:1fr}.split{grid-template-columns:1fr}.slist{max-height:300px}}
@media(max-width:860px){.shell{flex-direction:column}aside{width:100%;height:auto;position:static}nav{display:flex;flex-wrap:wrap;gap:4px}.navh{display:none}aside .me{display:none}main{padding:16px}.cols,.cols.wide,.board{grid-template-columns:1fr}.ticket{flex-direction:column}.cd{min-height:70px}.ce{font-size:10px}}
/* v8: Channels → Email (mailboxes) */
.card.warnbox{border-color:#fcd34d;background:color-mix(in srgb,#fef3c7 55%,var(--panel))}
.card.ok{border-color:#86efac;background:color-mix(in srgb,#dcfce7 50%,var(--panel))}
.small{font-size:13px}.muted.small{margin:4px 0 10px}
form.inline{display:inline;margin:0}.nowrap form.inline .btn,.nowrap>.btn{margin:2px 3px 2px 0}
.btn.danger{color:#dc2626}.btn.danger:hover{background:#fee2e2}
.card.empty{text-align:center;padding:36px}
.tbl td,.tbl th{vertical-align:top}
.row.gap{justify-content:flex-start;flex-wrap:wrap}.row.gap>*{flex:none}
.mb-form{grid-template-columns:minmax(0,1fr) 300px}.mb-form h3{margin:18px 0 6px}.mb-form h3:first-of-type{margin-top:0}
.row>label.w6{flex:0 0 96px}.row>label.w8{flex:0 0 150px}
.mb-form .row{align-items:flex-end;flex-wrap:wrap}.mb-form .row>label{min-width:140px}
.mailnote{margin:6px 0}
[hidden]{display:none!important}
@media(max-width:900px){.mb-form{grid-template-columns:1fr}}
.row.between.mbhead>div{flex:1 1 auto;min-width:0}.mbhead .btn{white-space:nowrap}
.sechead{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

.nqby{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:inherit;text-decoration:none;vertical-align:middle}.nqby img{display:block}.nqby:hover{color:var(--text)}
.mailwrap{border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden;background:var(--panel)}.mailhead{padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}.mailwrap .mail{margin:0;border:0;border-radius:0}.mailfoot{padding:8px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
/* ---- multi-member departments, presence, bell, transfer dialog (v13) ---- */
.mailwrap .mail{padding:12px 16px}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;background:#94a3b8;box-shadow:0 0 0 2px color-mix(in srgb,#94a3b8 25%,transparent)}
.pdot.p-online{background:#22c55e;box-shadow:0 0 0 2px #22c55e33}.pdot.p-away{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b33}
.pl{font-size:12.5px}.pl.p-online{color:#16a34a}.pl.p-away{color:#d97706}.pl.p-offline{color:var(--muted)}
.presence{margin:2px 0 0!important}.presence .lnk{padding:0;font-size:12px;color:inherit;opacity:.9}
.me .presence .pl{color:inherit}
.b-lead{background:#7c3aed1f;color:#7c3aed;font-weight:700}.b-prim{background:#2f6fe41f;color:#2f6fe4}
.navcnt{margin-left:auto;font-style:normal;background:#ef4444;color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;font-weight:700}
.bell{position:relative;margin:4px 0 8px}.bell summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;font-size:14px}
.bell summary::-webkit-details-marker{display:none}.bell summary:hover{background:color-mix(in srgb,var(--sidetext) 10%,transparent)}
.bell .cnt{margin-left:auto;background:#ef4444;color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;font-weight:700}
.bellpop{position:absolute;left:0;top:100%;z-index:50;width:330px;max-width:86vw;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0003;padding:10px;display:flex;flex-direction:column;gap:4px}
.bellpop form{margin:0}.ni{display:flex;gap:10px;padding:8px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13px;line-height:1.35}
.ni:hover{background:var(--hover)}.ni small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}.ni.unread{background:color-mix(in srgb,var(--brand) 8%,transparent)}.ni.unread>div{font-weight:600}
.notiflist .ni{border-bottom:1px solid var(--line);border-radius:0;padding:12px 16px}.pad{padding:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.chip{text-decoration:none}.chip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.chip em{font-style:normal;opacity:.75;margin-left:4px;font-weight:700}
.who{display:flex;gap:10px;align-items:center}.av.sm{width:28px;height:28px;font-size:13px}.av.q{background:var(--panel2);color:var(--text)}
.loadbar{display:inline-block;width:90px;height:7px;border-radius:9px;background:var(--line);overflow:hidden;vertical-align:middle;margin-right:6px}.loadbar i{display:block;height:100%;background:#22c55e}.loadbar.warm i{background:#f59e0b}.loadbar.full i{background:#ef4444}
.asgline{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:13.5px}
.teamline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:4px 0;font-size:13px}.tm{background:var(--panel2);border-radius:99px;padding:2px 9px}.tm small{color:var(--muted)}
.tin{color:#16a34a}.tout{color:#dc2626}.matrix td,.matrix th{text-align:center}.matrix td.hot{font-weight:700;background:color-mix(in srgb,var(--brand) 10%,transparent)}
.ev .who .b{margin-left:2px}.xfrom,.xto{white-space:nowrap}
dialog.xfer{border:0;border-radius:16px;padding:20px 22px;width:560px;max-width:94vw;background:var(--panel);color:var(--text);box-shadow:0 24px 60px #0005}
dialog.xfer::backdrop{background:#0f172a8c}dialog.xfer h3{margin:0}.xclose{font-size:18px}
.step{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700;margin-right:6px}
.xl{font-weight:600;margin:12px 0 6px;font-size:14px}.xl.sub{font-weight:500;color:var(--muted);font-size:12.5px;margin-top:10px}
.xtargets{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto;padding:2px}
.xt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;cursor:pointer;margin:0;font-weight:400}
.xt:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line))}.xt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}
.xt input{width:auto;margin:0}.xt .xi{font-size:18px;width:28px;text-align:center}.xt .xb{display:flex;flex-direction:column}.xt .xb small{color:var(--muted);font-size:12px}
.xt.dim{opacity:.75}.xt .warn{font-style:normal;color:#d97706;font-weight:600}
/* ===== v14 redesign: gradient sidebar, top bar, breadcrumbs, KPI cards, dense tables, split detail ===== */
body{--sb:linear-gradient(180deg,#0B1F4D 0%,#0C3163 42%,#0D5470 78%,#0E6B72 100%);--sbt:#c9d8ef;--sbh:rgba(255,255,255,.08);--sbon:rgba(255,255,255,.14);--tb:linear-gradient(90deg,#0B1F4D 0%,#0F3270 60%,#124487 100%);--tbt:#e6eefc;--tbpill:rgba(255,255,255,.1);--tbline:rgba(255,255,255,.16);--thead:color-mix(in srgb,var(--brand) 86%,#0B1F4D);--theadt:#fff;--chipbg:var(--panel2);--r:12px}
body[data-theme=dark]{--sb:linear-gradient(180deg,#060d22 0%,#0a1e3d 50%,#0b3340 100%);--tb:linear-gradient(90deg,#060d22,#0b1a3a);--thead:color-mix(in srgb,var(--brand) 45%,#111827)}
body[data-theme=midnight]{--sb:linear-gradient(180deg,#050817 0%,#120f3d 60%,#1d1457 100%);--tb:linear-gradient(90deg,#050817,#16124a);--thead:color-mix(in srgb,var(--brand) 50%,#0e1430)}
@media (prefers-color-scheme:dark){body[data-theme=system]{--sb:linear-gradient(180deg,#060d22 0%,#0a1e3d 50%,#0b3340 100%);--tb:linear-gradient(90deg,#060d22,#0b1a3a);--thead:color-mix(in srgb,var(--brand) 45%,#111827)}}
body[data-theme=ocean]{--sb:linear-gradient(180deg,#0c4a6e,#0e7490);--tb:linear-gradient(90deg,#0c4a6e,#0369a1)}
body[data-theme=forest]{--sb:linear-gradient(180deg,#14532d,#0f766e);--tb:linear-gradient(90deg,#14532d,#166534)}
body[data-theme=sunset]{--sb:linear-gradient(180deg,#9a3412,#be185d);--tb:linear-gradient(90deg,#9a3412,#c2410c)}
body[data-theme=contrast]{--sb:#000;--sbt:#fff;--tb:#000;--thead:#000;--sbon:#ff0}
body[data-theme=contrast] .sb a.on{color:#000 !important}
.i{width:18px;height:18px;flex:none;vertical-align:-4px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html{--z:1}
.app2{display:flex;min-height:100vh}
aside.sb{width:236px;flex:none;background:var(--sb);color:var(--sbt);border:0;padding:12px 10px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .18s;z-index:30}
.sb .logo{display:flex;align-items:center;height:44px;padding:0 10px 4px;margin-bottom:6px}.sb .logo img{max-width:170px}.sb .lgicon{display:none}.sb .tlogo{max-height:34px;max-width:170px;background:#fff;border-radius:8px;padding:3px 6px}
.snav{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.snav a,.ng>summary{display:flex;gap:11px;align-items:center;padding:8px 11px;border-radius:9px;color:var(--sbt);font-weight:500;font-size:13.5px;margin-bottom:2px;white-space:nowrap;cursor:pointer;list-style:none;position:relative}
.ng>summary::-webkit-details-marker{display:none}.snav a:hover,.ng>summary:hover{background:var(--sbh);color:#fff}
.snav a.on{background:var(--sbon);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #6CB8FF}
.snav .i{opacity:.9}.ng .chev{margin-left:auto;width:15px;height:15px;transition:transform .15s;opacity:.7}.ng[open]>summary .chev{transform:rotate(180deg)}
.ngi{padding-left:10px;margin:2px 0 6px;border-left:1px solid rgba(255,255,255,.12);margin-left:19px}.ngi a{padding:7px 10px;font-size:13px}
.ngp{margin-bottom:6px}.ngp+.ngp{border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
.snav .navcnt{margin-left:auto;background:#6CB8FF;color:#0B1F4D}
.sbcol{display:flex;gap:10px;align-items:center;justify-content:center;width:100%;margin-top:8px;padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.sbcol:hover{background:rgba(255,255,255,.16)}
html.sbc aside.sb{width:68px}html.sbc .sb .nl,html.sbc .sb .chev,html.sbc .sb .lgfull{display:none}html.sbc .sb .lgicon{display:inline}html.sbc .sbcol .i{transform:rotate(180deg)}
html.sbc .snav a,html.sbc .ng>summary{justify-content:center;padding:9px 0}html.sbc .ngi{display:block !important;border:0;margin:0;padding:0}html.sbc .ng>summary{display:none}html.sbc .snav .navcnt{position:absolute;top:2px;right:4px;margin:0;font-size:10px;padding:0 5px}
html.sbc .ng:not([open])>.ngi{display:block}html.sbc .ng>.ngi{border-top:1px solid rgba(255,255,255,.08);padding-top:4px}
.mainc{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:56px;background:var(--tb);color:var(--tbt);display:flex;align-items:center;gap:8px;padding:0 16px;position:sticky;top:0;z-index:25}
.tbsp{flex:1}.tbtn{display:inline-grid;place-items:center;grid-auto-flow:column;gap:6px;height:36px;min-width:36px;padding:0 9px;border-radius:10px;border:1px solid var(--tbline);background:var(--tbpill);color:var(--tbt);cursor:pointer;font:inherit;font-size:13px;list-style:none;position:relative}.tbtn:hover{background:rgba(255,255,255,.18);color:#fff}summary.tbtn::-webkit-details-marker,.tsw summary::-webkit-details-marker,.dd summary::-webkit-details-marker{display:none}
.burger{display:none}
.tsw>summary{display:flex;gap:8px;align-items:center;height:36px;padding:0 10px 0 5px;border-radius:10px;border:1px solid var(--tbline);background:var(--tbpill);cursor:pointer;list-style:none;font-weight:600;font-size:13.5px;color:#fff}.tsw .tenant{all:unset;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsq{width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;display:inline-grid;place-items:center;font-weight:800;font-size:12.5px;flex:none}
.fsz{display:flex;height:36px;border:1px solid var(--tbline);background:var(--tbpill);border-radius:10px;overflow:hidden}.fsz button{border:0;background:none;color:var(--tbt);padding:0 9px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}.fsz button+button{border-left:1px solid var(--tbline)}.fsz button:hover{background:rgba(255,255,255,.15)}
.pop-r,.dd{position:relative}.pop-r>.menu,.pop-r>form,.pop-r>.bellpop,.dd>.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.22);min-width:230px;padding:6px}
.menu a,.menu button{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--text);font-size:13.5px;white-space:nowrap;width:100%;background:none;border:0;font:inherit;cursor:pointer;text-align:left}.menu a:hover,.menu button:hover{background:var(--hover)}.menu a.on{font-weight:600}.menu a .i:last-child:not(:first-child){margin-left:auto;color:var(--brand)}.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.tsw>.menu{left:0;right:auto}
.topbar .bell{margin:0}.topbar .bell .cnt{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:99px;font-size:10.5px;font-weight:700;padding:1px 5px;min-width:18px;text-align:center;border:2px solid #0B1F4D}
.topbar .bellpop{width:360px;padding:12px;max-height:70vh;overflow:auto}
.topbar .themepick{margin:0;font-size:13px}.topbar .themepick>summary{padding:0 9px;opacity:1}.topbar .themepick>form{width:280px;padding:10px;margin:0}
.topbar .me{display:flex;gap:9px;align-items:center;border:1px solid var(--tbline);background:var(--tbpill);border-radius:12px;padding:3px 12px 3px 4px;height:42px;color:#fff;border-top:1px solid var(--tbline)}
.mei{display:flex;flex-direction:column;line-height:1.15}.mei b{font-size:13px;color:#fff}.mei>span{display:flex;gap:6px;align-items:center;font-size:11px}
.role{font-style:normal;font-weight:700;font-size:10.5px;padding:1px 7px;border-radius:99px;background:#6CB8FF;color:#0B1F4D}.role.r-admin{background:#fde68a;color:#78350f}.role.r-customer{background:#bbf7d0;color:#14532d}
.topbar .presence{display:inline}.topbar .presence .lnk{color:#cfe0ff;font-size:11px;padding:0}.topbar .presence .pl{color:#cfe0ff}
.tbtn.out{gap:6px;font-weight:600;padding:0 12px}.so{margin:0}
.avi{width:28px;height:28px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:var(--ab,#e2e8f0);color:var(--af,#475569);letter-spacing:.02em;line-height:1}.avi.lg{width:34px;height:34px;font-size:12.5px}.avi.none{background:transparent;border:1.5px dashed var(--inputline)}
.person{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}.person.muted span{color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bc{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);min-width:0}.bc b{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bc a{color:var(--muted)}.bc a:hover{color:var(--brand)}.bc .sep{opacity:.5}
.bca{display:flex;gap:8px;align-items:center}.bca .btn{display:inline-flex;gap:6px;align-items:center}
.btn.ghost{background:var(--panel);color:var(--text2);border:1px solid var(--line)}.btn.ghost:hover{background:var(--hover);filter:none}
main.content{flex:1;padding:18px 22px 28px;max-width:none;min-width:0;zoom:var(--z)}
.flash{border-radius:12px}
/* cards, chips, tables: shared visual language */
.card{border-radius:var(--r);border-color:var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04)}
table.list th,.tbl th{background:var(--thead);color:var(--theadt);font-size:11.5px;font-weight:700;letter-spacing:.05em;border-bottom:0;padding:11px 12px}
table.list th a,.tbl th a{color:var(--theadt)}.card.flush>table.list:first-child tr:first-child th:first-child,.card.flush>table.list:first-child thead tr th:first-child{border-top-left-radius:calc(var(--r) - 1px)}.card.flush>table.list:first-child tr:first-child th:last-child,.card.flush>table.list:first-child thead tr th:last-child{border-top-right-radius:calc(var(--r) - 1px)}
table.list td{border-bottom:1px solid var(--line2);vertical-align:middle}
.chip{border-radius:99px;font-weight:500}.chip.on{box-shadow:0 1px 3px color-mix(in srgb,var(--brand) 35%,transparent)}
.stat{border-radius:var(--r);position:relative}
/* KPI cards */
.kcs{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(260px,1.6fr);gap:12px;margin-bottom:14px}
.kc{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;color:var(--text);min-width:0}a.kc:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.kc small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.kc b{display:block;font-size:24px;line-height:1.2;margin:2px 0}.kc em{font-style:normal;font-size:12px;color:var(--muted)}
.kic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}.kic .i{width:19px;height:19px}
.k-blue{background:#e0ecff;color:#2F6FE4}.k-amber{background:#fef3c7;color:#b45309}.k-teal{background:#ccfbf1;color:#0f766e}.k-rose{background:#ffe4e6;color:#e11d48}.k-violet{background:#ede9fe;color:#7c3aed}.k-green{background:#dcfce7;color:#15803d}
body:is([data-theme=dark],[data-theme=midnight]) .kic{background:color-mix(in srgb,currentColor 18%,transparent)}
@media (prefers-color-scheme:dark){body[data-theme=system] .kic{background:color-mix(in srgb,currentColor 18%,transparent)}}
.kstat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}.kstat small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--col);margin:12px 0 10px;gap:2px}.sbar i{display:block;height:100%}
.slegend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text2)}.slegend span{display:inline-flex;gap:5px;align-items:center}.slegend i{width:8px;height:8px;border-radius:50%}.slegend b{font-weight:700}
/* status chips + dots */
.schip{display:inline-flex;gap:6px;align-items:center;padding:3px 10px 3px 8px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--sc-bg);color:var(--sc-fg);border:1px solid color-mix(in srgb,var(--sc-fg) 22%,transparent)}.schip i{width:7px;height:7px;border-radius:50%;background:var(--sc-dot)}
.s-new{--sc-bg:#e0f2fe;--sc-fg:#0369a1;--sc-dot:#0ea5e9}.s-open{--sc-bg:#e0ecff;--sc-fg:#1d4ed8;--sc-dot:#2F6FE4}.s-pending{--sc-bg:#fff4e0;--sc-fg:#b45309;--sc-dot:#f59e0b}.s-resolved{--sc-bg:#dcfce7;--sc-fg:#15803d;--sc-dot:#22c55e}.s-closed{--sc-bg:#eef2f7;--sc-fg:#475569;--sc-dot:#94a3b8}.s-active{--sc-dot:#2F6FE4}.s-all{--sc-dot:transparent}
body:is([data-theme=dark],[data-theme=midnight]) .schip{background:color-mix(in srgb,var(--sc-dot) 16%,transparent);color:color-mix(in srgb,var(--sc-dot) 70%,#fff)}
@media (prefers-color-scheme:dark){body[data-theme=system] .schip{background:color-mix(in srgb,var(--sc-dot) 16%,transparent);color:color-mix(in srgb,var(--sc-dot) 70%,#fff)}}
.pills{display:inline-flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;flex-wrap:wrap}.pills a{display:inline-flex;gap:6px;align-items:center;padding:6px 11px;border-radius:9px;color:var(--text2);font-size:13px;font-weight:500;white-space:nowrap}.pills a i{width:7px;height:7px;border-radius:50%;background:var(--sc-dot)}.pills a:hover{background:var(--hover)}.pills a.on{background:var(--brand);color:#fff;font-weight:600}.pills a.on i{background:#fff}.pills a small{font-size:11px;opacity:.75}
/* list toolbar */
.ltools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.ltools .grow{flex:1}
.sbox{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 10px;height:36px;min-width:230px}.sbox input{border:0;margin:0;padding:0;background:none;height:34px;outline:0;box-shadow:none !important}.sbox .i{color:var(--muted);width:16px}
.ltools select{width:auto;margin:0;height:36px;padding:0 10px;border-radius:10px;border-color:var(--line);background:var(--panel)}
.tcount{font-size:13px;color:var(--muted);white-space:nowrap}
.fbtn>summary{display:inline-flex;gap:6px;align-items:center;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);list-style:none}.fbtn>summary em{font-style:normal;background:var(--brand);color:#fff;border-radius:99px;padding:0 6px;font-size:11px}.fbtn .menu{width:280px;padding:12px}.fbtn .menu label{margin-bottom:10px}
.vrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
/* dense ticket table */
.tt{width:100%;border-collapse:separate;border-spacing:0}.tt th{position:sticky;top:0;z-index:1}
.tt td{padding:9px 12px;font-size:13px}.tt tr:hover td{background:color-mix(in srgb,var(--brand) 4%,var(--panel))}
.tid{font-weight:700;font-size:12.5px;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ttl a{color:var(--text);font-weight:600;display:block;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ttl a:hover{color:var(--brand)}.ttl small,.dt small,.la small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.dt,.la{white-space:nowrap}.la .cmt{display:inline-flex;gap:4px;align-items:center}.la .cmt .i{width:12px;height:12px;vertical-align:-2px}
.prio{display:inline-flex;gap:5px;align-items:center;font-size:12px;font-weight:600;white-space:nowrap}.prio i{width:8px;height:8px;border-radius:2px;background:#94a3b8}.prio.p-urgent{color:#dc2626}.prio.p-urgent i{background:#dc2626}.prio.p-high{color:#ea580c}.prio.p-high i{background:#f97316}.prio.p-normal{color:var(--text2)}.prio.p-normal i{background:#3b82f6}.prio.p-low{color:var(--muted)}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap}.pager .pg{display:inline-flex;gap:4px;align-items:center}.pager a,.pager span.cur{display:inline-grid;place-items:center;min-width:32px;height:32px;border:1px solid var(--line);border-radius:8px;color:var(--text2);background:var(--panel)}.pager span.cur{font-weight:700;color:var(--text)}.pager a.dis{opacity:.4;pointer-events:none}.pager select{width:auto;margin:0;height:32px;padding:0 8px}
/* ticket detail: split pane */
.tdv{display:grid;grid-template-columns:320px minmax(0,1fr);gap:14px;align-items:start}
.tlist{position:sticky;top:70px;max-height:calc(100vh - 150px);display:flex;flex-direction:column;padding:0;overflow:hidden}
.tlh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:13.5px}.tlh a{color:var(--text);display:inline-flex;gap:6px;align-items:center}.tlh .cnt{margin-left:auto;background:var(--on);color:var(--brand);font-size:12px;border-radius:99px;padding:1px 9px}
.tlb{overflow:auto;flex:1}
.tli{display:block;padding:10px 14px;border-bottom:1px solid var(--line2);color:var(--text);border-left:3px solid transparent}.tli:hover{background:var(--hover)}.tli.on{background:color-mix(in srgb,var(--brand) 9%,var(--panel));border-left-color:var(--brand)}
.tli .r1,.tli .r3{display:flex;justify-content:space-between;align-items:center;gap:8px}.tli .r1 .tid{color:var(--brand)}.tli .r1 small,.tli .r3 small{color:var(--muted);font-size:11.5px;white-space:nowrap}.tli .r2{font-size:13px;margin:3px 0 6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tmain{min-width:0}
.thd{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 0;margin-bottom:14px}
.thd .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.thd .nav2{display:inline-flex;gap:4px}.thd .nav2 a{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);color:var(--text2)}.thd .nav2 a.dis{opacity:.35;pointer-events:none}.thd .tid{color:var(--brand);font-size:13px}.thd .nofn{color:var(--muted);font-size:12.5px}
.thd .acts{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.thd .acts .btn,.thd .acts summary.btn{display:inline-flex;gap:6px;align-items:center;list-style:none}.ibtn{display:inline-grid;place-items:center;width:34px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--text2);cursor:pointer;padding:0;list-style:none}.ibtn:hover{background:var(--hover)}.ibtn.on,.btn.on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:color-mix(in srgb,var(--brand) 8%,var(--panel))}
.thd h1{font-size:22px;margin:10px 0 6px;line-height:1.25}.thd .meta{margin:0 0 10px}
.ttabs{display:flex;gap:4px;border-top:1px solid var(--line2);margin:0 -16px;padding:0 10px;overflow-x:auto}.ttabs a{display:inline-flex;gap:7px;align-items:center;padding:11px 12px;color:var(--muted);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;white-space:nowrap}.ttabs a:hover{color:var(--text)}.ttabs a.on{color:var(--brand);border-bottom-color:var(--brand)}.ttabs a em{font-style:normal;background:var(--col);color:var(--text2);border-radius:99px;padding:0 7px;font-size:11.5px}
.tbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.dcard h3{font-size:15px;margin:0 0 12px}.dl2{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0;margin:0}.dl2 dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line2)}.dl2 dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line2);font-size:13.5px;min-width:0;overflow-wrap:anywhere}.dl2 dd.full{grid-column:1/-1;padding-top:0}
.etbl{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0 6px}.etbl th{background:var(--panel2);color:var(--muted);font-size:11px}.etbl td{font-size:13px;border-bottom:1px solid var(--line2)}.etbl tr:last-child td{border-bottom:0}
.desc{line-height:1.6;font-size:14px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere}
.props h3,.attc h3{display:flex;align-items:center;justify-content:space-between;font-size:15px;margin:0 0 10px}
.prow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center;padding:6px 0;font-size:13px}.prow>span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.prow select,.prow input{margin:0;padding:6px 9px;border-radius:9px;font-size:13px}
.attl{display:flex;flex-direction:column;gap:6px}.attl a{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 8px;border:1px solid var(--line2);border-radius:9px;color:var(--text)}.attl a img{width:34px;height:34px;object-fit:cover;border-radius:6px}.attl small{color:var(--muted);margin-left:auto}
.addf{position:relative;overflow:hidden;display:inline-flex !important;gap:4px;align-items:center}.addf input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.tpane[hidden]{display:none}
.wlist{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
@media(max-width:1280px){.kcs{grid-template-columns:repeat(2,minmax(0,1fr))}.kcs .kstat{grid-column:1/-1}.tbody{grid-template-columns:1fr}}
@media(max-width:1100px){.tdv{grid-template-columns:1fr}.tlist{display:none}}
@media(max-width:860px){
 aside.sb{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;width:260px !important;box-shadow:0 0 40px rgba(0,0,0,.35);height:100%}
 html.sbo aside.sb{transform:none}html.sbo .sbshade{position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:29}
 html.sbc .sb .nl,html.sbc .sb .chev,html.sbc .sb .lgfull{display:revert}html.sbc .sb .lgicon{display:none}html.sbc .ng>summary{display:flex}
 .burger{display:inline-grid}.sbcol{display:none}.fsz,.tsw .tenant,.mei,.tbtn.out span{display:none}.topbar{padding:0 10px;gap:6px}.topbar .me{padding:3px;border-radius:50%;height:auto}
 .crumbs{padding:8px 12px}.bca .btn span{display:none}main.content{padding:12px}
 .kcs{grid-template-columns:1fr 1fr}.sbox{min-width:0;flex:1 1 100%}
 .tt .c-rep,.tt .c-cre,.tt .c-la{display:none}.ttl a,.ttl small{max-width:52vw}
 .topbar .bellpop{width:min(360px,92vw);right:-90px}
}
@media print{aside.sb,.topbar,.crumbs,.tlist,.thd .acts,.ttabs,.demo-banner{display:none !important}.tdv,.tbody{display:block}.tpane[hidden]{display:block}}
.snav span.nl{width:auto;text-align:left;flex:1;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis}
.topbar .bell>summary{display:inline-grid;padding:0 9px;font-size:13px;border-radius:10px}.topbar .bell>summary:hover{background:rgba(255,255,255,.18)}.topbar .bellpop{left:auto;right:0;display:flex}
.topbar .me form{margin:0}.topbar .me small{display:inline}
@media(max-width:860px){.topbar .bellpop{right:-90px}}
/* v15 detail tweaks */
.btn.ghost.on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 50%,var(--line));background:color-mix(in srgb,var(--brand) 8%,var(--panel))}
.attc h3{display:flex;justify-content:space-between;align-items:center;gap:8px}
.attc h3 form{margin:0}
.tpane>.msg,.tpane>.ev{margin-bottom:10px}
.tpane>.ev{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:8px 12px}
.msg .mh{display:flex;align-items:center;gap:8px}
.msg .mh .muted{margin-left:auto}
.props form .prow select,.props form .prow input{max-width:170px;margin:0}
.thd .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* v15: undo legacy nav rules on in-content navs */
main.content nav{flex:0 1 auto;overflow:visible}
.ltools nav.pills{display:inline-flex;flex-direction:row;flex-wrap:wrap;flex:0 1 auto;max-width:100%}
.ltools nav.pills a{display:inline-flex;margin:0;color:var(--text2)}
.ltools nav.pills a.on{color:#fff;background:var(--brand)}
.ltools .sbox{margin-left:auto}
main.content nav.ttabs a{margin:0;border-radius:0;display:inline-flex}
main.content nav.ttabs a.on{background:transparent;color:var(--brand)}
body[data-theme=dark] .msg.internal,body[data-theme=midnight] .msg.internal{background:#2a2410;border-color:#5c4a12;color:#f5e7b8}
@media (prefers-color-scheme:dark){body[data-theme=system] .msg.internal{background:#2a2410;border-color:#5c4a12;color:#f5e7b8}}
/* v17: owner customer panel */
.s-churned{--sc-bg:#ffe4e6;--sc-fg:#be123c;--sc-dot:#f43f5e}.s-urgent{--sc-bg:#fee2e2;--sc-fg:#b91c1c;--sc-dot:#ef4444}.s-risk{--sc-dot:#e11d48}
body:is([data-theme=dark],[data-theme=midnight]) .s-churned,body:is([data-theme=dark],[data-theme=midnight]) .s-urgent{--sc-bg:color-mix(in srgb,var(--sc-dot) 18%,transparent);--sc-fg:#fecdd3}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:14px}
.ocharts{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-bottom:14px}.ocharts .card{margin:0}.ocharts h3 small{font-weight:500}
@media(max-width:1100px){.ocharts{grid-template-columns:1fr}}
.sbtag{margin:-6px 0 10px;padding:0 14px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--sbt,#fff) 65%,transparent)}
html.sbc .sbtag{display:none}
.tsw.static{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;background:var(--tbpill,rgba(255,255,255,.12));color:var(--tbt,#fff);font-weight:600;font-size:13px}
.r-owner{background:#8452DB !important;color:#fff !important}
.csq{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;font-weight:800;font-size:11.5px;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 60%,#0B1F4D))}
.csq.big{width:42px;height:42px;border-radius:12px;font-size:15px}
.cname{display:flex;align-items:center;gap:10px;color:var(--text);min-width:200px}.cname b{font-weight:650}.cname small{display:block;color:var(--muted);font-size:11.5px}
.ctbl td{vertical-align:middle}.ctbl td small{display:block;font-size:11.5px;margin-top:2px}.ctbl td.num,.ctbl th.num,.etbl .num{text-align:right}
.ctbl tr.risk td:first-child{box-shadow:inset 3px 0 0 #f43f5e}
.tscroll{overflow-x:auto}.ctbl{min-width:1320px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dom{display:inline-flex !important;gap:4px;align-items:center}.dom .i{width:13px;height:13px}.dom.ok{color:#15803d}.dom.pend{color:#b45309}
.mchips{display:flex;flex-wrap:wrap;gap:3px;max-width:230px}.mchip{font-size:11px;padding:1px 7px;border-radius:99px;background:var(--col,#eef2f7);color:var(--text2);white-space:nowrap}
.hs{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}.hs b{min-width:22px;text-align:right}.hs i{width:54px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;display:block}.hs i u{display:block;height:100%;border-radius:99px}
.hs-ok b{color:#15803d}.hs-ok u{background:#22c55e}.hs-warn b{color:#b45309}.hs-warn u{background:#f59e0b}.hs-bad b{color:#be123c}.hs-bad u{background:#f43f5e}
.hs.big{font-size:28px;gap:12px}.hs.big i{width:160px;height:10px}
.hbig{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.hbar{display:block;width:100%;height:6px;border-radius:99px;background:var(--line);overflow:hidden}.hbar u{display:block;height:100%;background:var(--brand);border-radius:99px}.hbar.lg{height:8px;margin:6px 0 10px}
.warnx{color:#be123c !important;display:inline-flex !important;gap:3px;align-items:center}.warnx .i{width:12px;height:12px}
.rflag{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:#ffe4e6;color:#be123c;margin:2px 4px 2px 0}.rflag .i{width:12px;height:12px}
body:is([data-theme=dark],[data-theme=midnight]) .rflag{background:rgba(244,63,94,.16);color:#fecdd3}
.rflags{margin-top:10px}
.b-sample{background:#ede9fe !important;color:#6d28d9 !important;font-size:10px !important;text-transform:uppercase;letter-spacing:.05em}.b-eco{background:#fce7f3;color:#be185d}
.chs{white-space:nowrap}.chs span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;margin-right:3px;color:var(--muted);background:var(--col,#f1f5f9);opacity:.45}.chs span.on{opacity:1;color:#15803d;background:#dcfce7}.chs .i{width:14px;height:14px}
body:is([data-theme=dark],[data-theme=midnight]) .chs span.on{background:rgba(34,197,94,.18);color:#86efac}
.ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ovgrid .card{margin:0 0 14px}@media(max-width:1280px){.ovgrid{grid-template-columns:1fr}}
.chk{list-style:none;padding:0;margin:0}.chk li{display:flex;gap:8px;align-items:center;padding:5px 0;color:var(--muted);font-size:13.5px}.chk li .i{width:16px;height:16px}.chk li.ok{color:var(--text)}.chk li.ok .i{color:#22c55e}
.tlv{margin-top:10px;border-left:2px solid var(--line);padding-left:16px}
.tlx{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;font-size:13.5px;border-bottom:1px dashed var(--line2)}.tlx .tdot{position:absolute;left:-22px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--brand)}
.kind{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;margin-right:4px;vertical-align:1px}.kind .i{width:12px;height:12px}
.kind.k-blue{background:#e0ecff;color:#1d4ed8}.kind.k-violet{background:#ede9fe;color:#6d28d9}.kind.k-teal{background:#ccfbf1;color:#0f766e}.kind.k-green{background:#dcfce7;color:#15803d}.kind.k-amber{background:#fef3c7;color:#b45309}.kind.k-rose{background:#ffe4e6;color:#be123c}.kind.k-gray{background:#f1f5f9;color:#475569}
body:is([data-theme=dark],[data-theme=midnight]) .kind{background:color-mix(in srgb,currentColor 18%,transparent)}
.onote{white-space:normal}.onote small{display:block;margin-top:6px}.card .onote{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--col,#f8fafc)}
.cust-h{display:flex;align-items:center;gap:12px}
.tli .cn{display:flex;align-items:center;gap:8px;min-width:0}.tli .cn b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tli .cn .csq{width:24px;height:24px;font-size:10px;border-radius:7px}
.tagf{margin-top:10px}.tagf .row{gap:6px;flex-wrap:nowrap}.tagf input{margin:0}
.flash.info{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.flash .lnk{font-weight:600}
.demo-banner.imp{background:linear-gradient(90deg,#8452DB,#be123c)}
.etbl tr.tot td{border-top:2px solid var(--line)}
@media(min-width:1200px){.kgrid{grid-template-columns:repeat(4,1fr)}}
.flash.info .lnk{font-size:13px;padding:0;background:none;border:0;color:var(--brand);text-decoration:underline;cursor:pointer}
.etbl td .hbar{min-width:110px}
@media(min-width:1200px){.kgrid:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}}
.menu button.dang{color:#be123c}
/* v18: PayPal checkout + company types */
.ppwrap{margin:10px 0 6px}.ppbtn{display:flex;align-items:center;justify-content:center;width:100%;height:45px;border:0;border-radius:6px;margin:0 0 9px;cursor:pointer;font:600 15px system-ui,sans-serif}.ppbtn.gold{background:#ffc439}.ppbtn.gold:hover{filter:brightness(.96)}.ppbtn.dark{background:#2c2e2f;color:#fff}
.ppl{font:italic 800 21px/1 Verdana,system-ui,sans-serif;letter-spacing:-.5px}.ppl b{color:#003087}.ppl i{color:#009cde}.ppby{text-align:center;font-size:11px;color:#6b7280}.ppby b{color:#003087;font-style:italic}
.ppmock-note{background:#fff7ed;border:1px dashed #fb923c;color:#9a3412;border-radius:10px;padding:8px 10px;font-size:12.5px;margin:0 0 10px}.pperr{background:#fee2e2;color:#991b1b;border-radius:8px;padding:8px 10px;font-size:13px;margin-top:6px}
.ppmodal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:9999;padding:16px}.ppwin{background:#fff;color:#111;border-radius:14px;width:min(380px,100%);padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.pphd{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:12px}.pphd small{font-size:10px;font-weight:700;color:#c2410c;background:#ffedd5;padding:3px 7px;border-radius:99px}
.ppamt{font-size:30px;font-weight:800;margin:0;text-align:center}.ppto{text-align:center;margin:2px 0 14px;color:#555}.ppwin label{display:block;font-size:12px;color:#555;margin-bottom:12px}.ppwin input{width:100%;padding:9px;border:1px solid #ccc;border-radius:6px;margin-top:4px;background:#f8f8f8;color:#111}.ppcancel{background:none;border:0;color:#0070ba;width:100%;cursor:pointer;font-size:13px}.ppfoot{font-size:11px;color:#777;text-align:center;margin:10px 0 0}
.rcpt code{font-size:11px}.ppstat{display:inline-flex;gap:6px;align-items:center}.secret-mask{font-family:ui-monospace,monospace;letter-spacing:.5px}
.steps-pp{counter-reset:s;list-style:none;padding:0;margin:0}.steps-pp li{counter-increment:s;position:relative;padding:0 0 10px 34px;font-size:13.5px}.steps-pp li:before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--brand,#2F6FE4);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.ctpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.ctpick label{position:relative;display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line,#e5e7eb);border-radius:12px;padding:12px 12px 12px 50px;cursor:pointer}.ctpick label.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}.ctpick input{position:absolute;opacity:0}.ctpick .ci{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent)}.ctpick small{color:var(--muted,#64748b);font-size:12px}
.disclaimer{background:#fef3c7;border:1px solid #fcd34d;color:#78350f;border-radius:10px;padding:10px 12px;font-size:13px;margin:0 0 12px}

.dpick{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 20px 50px -25px rgba(15,23,42,.25);color:#0f172a;text-align:left}
.dsteps{display:grid;grid-template-columns:1.75fr 1fr;gap:22px}.dstep{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 10px;font-size:14px;color:#0f172a}.dstep b{width:22px;height:22px;border-radius:50%;background:#2F6FE4;color:#fff;display:grid;place-items:center;font-size:12px}
.dtypes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.dtypes a{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px;text-decoration:none;color:#0f172a;transition:.15s}.dtypes a:hover{border-color:var(--c)}
.dtypes a>span{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:color-mix(in srgb,var(--c) 13%,#fff)}.dtypes a b{display:block;font-size:13.5px;line-height:1.25}.dtypes a small{display:block;font-size:11.5px;color:#64748b;line-height:1.35;margin-top:2px}.dtypes a em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--c);margin-top:4px;line-height:1.3}
.dtypes a.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.droles-col{position:sticky;top:12px;align-self:start}.dsel{font-size:14px;color:#475569;margin:0 0 10px;padding:10px 12px;background:#f8fafc;border-radius:10px}.dsel b{color:#0f172a}
.droles{display:flex;flex-direction:column;gap:8px}.droles a{display:flex;gap:12px;align-items:center;border:1px solid #e5e7eb;border-radius:12px;padding:12px;text-decoration:none;color:#0f172a;background:#fff;transition:.15s}.droles a:hover{border-color:#2F6FE4;background:#f5f8ff;transform:translateX(2px)}.droles a>span{font-size:22px}.droles a div{flex:1}.droles a b{font-size:15px}.droles a small{display:block;color:#64748b;font-size:12px;line-height:1.35}.droles a i{font-style:normal;color:#2F6FE4;font-weight:800}
.dsub{font-size:12px;color:#64748b;margin:10px 0 0}.dsub code{font-size:11.5px}.dnote{font-size:12px;color:#64748b;margin:6px 0 0}
@media(max-width:900px){.dsteps{grid-template-columns:1fr}.droles-col{position:static}}@media(max-width:560px){.dtypes{grid-template-columns:1fr}}
.demohub{max-width:1180px;margin:24px auto;padding:0 16px}.dh-head{text-align:center;margin-bottom:18px}.dh-head h1{margin:12px 0 6px}.demohub .center{text-align:center;margin-top:16px}
@media(min-width:900px){.ocharts{grid-template-columns:1.3fr 1fr}}.b.btype{background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 75%,#000);white-space:nowrap}
.center:has(.demohub){max-width:none;margin:0 auto;padding:0}@media(min-width:1100px){.demohub .dtypes{grid-template-columns:repeat(3,1fr)}}