/* EFTS Advance Pro CRM — design tokens and components (from the EFTS Advance Pro design system) */
/* Layout: charcoal sidebar + white top bar + working canvas; tokens from the EFTS Advance Pro design system */
:root{
--brand:#c8102e;--brand-strong:#a10c24;--brand-soft:#fdeced;--on-brand:#ffffff;
--charcoal:#1c1f26;--on-charcoal:#e8eaee;--on-charcoal-muted:#9aa1ad;
--surface-0:#f4f5f7;--surface-100:#ffffff;--surface-200:#eef0f3;--border:#dfe2e7;--border-strong:#8c93a0;
--ink:#16181d;--ink-muted:#5b616e;--ink-faint:#6f7582;--focus:#2563eb;
--success:#137a3a;--success-soft:#e7f6ec;--warning:#a15c07;--warning-soft:#fdf3e1;--danger:#b42318;--danger-soft:#fdecea;
--info:#1d4ed8;--info-soft:#e8effd;--neutral-soft:#eceef2;
--temp-hot:#b4160f;--temp-hot-soft:#fde4e1;--temp-warm:#9a5300;--temp-warm-soft:#fdf0dc;--temp-cold:#1e5aa8;--temp-cold-soft:#e4eefa;
--ch-facebook:#1464d2;--ch-instagram:#b0256f;--ch-whatsapp:#0f7a43;--ch-tiktok:#16181d;--ch-youtube:#c40000;--ch-linkedin:#0a5fb4;--ch-website:#475467;
--chart-1:#c8102e;--chart-2:#475467;--chart-3:#2563eb;--chart-4:#d97706;--chart-5:#0d9488;
--shadow-card:0 1px 2px rgba(16,24,40,.06);--shadow-raised:0 8px 24px rgba(16,24,40,.14);--scrim:rgba(16,24,40,.45);--paper:#ffffff;--paper-ink:#16181d;
--sans:Inter,"Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
--r-sm:4px;--r-md:8px;--r-lg:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--brand:#f0525a;--brand-strong:#ff7a80;--brand-soft:#3a171b;--on-brand:#16181d;--charcoal:#0b0c0f;--on-charcoal-muted:#8b929e;
--surface-0:#0f1115;--surface-100:#171a20;--surface-200:#20242c;--border:#2c313b;--border-strong:#646c7a;--ink:#f2f3f5;--ink-muted:#a3a9b5;--ink-faint:#868d99;--focus:#7aa7ff;
--success:#4ade80;--success-soft:#13281b;--warning:#fbbf24;--warning-soft:#2e2210;--danger:#f87171;--danger-soft:#341614;--info:#7aa7ff;--info-soft:#152036;--neutral-soft:#262a33;
--temp-hot:#ff8a7a;--temp-hot-soft:#3b1612;--temp-warm:#fbbf24;--temp-warm-soft:#2f220e;--temp-cold:#8ab8ff;--temp-cold-soft:#14233a;
--ch-facebook:#6aa5ff;--ch-instagram:#f07ab8;--ch-whatsapp:#4ade80;--ch-tiktok:#f2f3f5;--ch-youtube:#ff6b6b;--ch-linkedin:#6fb1f0;--ch-website:#a3adbd;
--chart-1:#f0525a;--chart-2:#a3adbd;--chart-3:#6aa5ff;--chart-4:#fbbf24;--chart-5:#2dd4bf;--shadow-card:none;--shadow-raised:0 8px 24px rgba(0,0,0,.5);--scrim:rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
--brand:#f0525a;--brand-strong:#ff7a80;--brand-soft:#3a171b;--on-brand:#16181d;--charcoal:#0b0c0f;--on-charcoal-muted:#8b929e;
--surface-0:#0f1115;--surface-100:#171a20;--surface-200:#20242c;--border:#2c313b;--border-strong:#646c7a;--ink:#f2f3f5;--ink-muted:#a3a9b5;--ink-faint:#868d99;--focus:#7aa7ff;
--success:#4ade80;--success-soft:#13281b;--warning:#fbbf24;--warning-soft:#2e2210;--danger:#f87171;--danger-soft:#341614;--info:#7aa7ff;--info-soft:#152036;--neutral-soft:#262a33;
--temp-hot:#ff8a7a;--temp-hot-soft:#3b1612;--temp-warm:#fbbf24;--temp-warm-soft:#2f220e;--temp-cold:#8ab8ff;--temp-cold-soft:#14233a;
--ch-facebook:#6aa5ff;--ch-instagram:#f07ab8;--ch-whatsapp:#4ade80;--ch-tiktok:#f2f3f5;--ch-youtube:#ff6b6b;--ch-linkedin:#6fb1f0;--ch-website:#a3adbd;
--chart-1:#f0525a;--chart-2:#a3adbd;--chart-3:#6aa5ff;--chart-4:#fbbf24;--chart-5:#2dd4bf;--shadow-card:none;--shadow-raised:0 8px 24px rgba(0,0,0,.5);--scrim:rgba(0,0,0,.6);color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--surface-0);color:var(--ink);font:400 14px/20px var(--sans);font-feature-settings:"tnum" 1;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--ink-muted)} .small{font-size:13px;line-height:18px} .cap{font-size:12px;line-height:16px}
.overline{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .between{justify-content:space-between} .grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:12px}
h1,h2,h3{margin:0;text-wrap:balance} h2{font:600 16px/24px var(--sans)} h3{font:600 14px/20px var(--sans)}

/* shell */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%}
.side{background:var(--charcoal);color:var(--on-charcoal);padding:12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:8px;padding:8px 8px 16px;font:700 15px/20px var(--sans)}
.mark{width:30px;height:30px;border-radius:var(--r-md);background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font:800 10px/1 var(--sans);overflow:hidden;flex:none}
.mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.side-group{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--on-charcoal-muted);padding:12px 8px 4px}
.nav{display:flex;align-items:center;gap:12px;height:36px;padding:0 8px;border-radius:var(--r-md);color:var(--on-charcoal-muted);background:none;border:0;width:100%;text-align:left;cursor:pointer;font-weight:500}
.nav svg{width:18px;height:18px;flex:none}
.nav:hover{background:rgba(255,255,255,.07);color:var(--on-charcoal)}
.nav.on{background:var(--brand);color:var(--on-brand)}
.count{margin-left:auto;min-width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.14);color:var(--on-charcoal);font:700 11px/20px var(--sans);text-align:center;padding:0 6px}
.nav.on .count{background:var(--on-brand);color:var(--brand)}
.main{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden}
.top{min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 24px;background:var(--surface-100);border-bottom:1px solid var(--border)}
.top h1{font:700 20px/28px var(--sans);white-space:nowrap}
.search{flex:1;max-width:420px;position:relative;margin-left:auto}
.search input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-200);padding:0 12px 0 34px}
.search svg{position:absolute;left:10px;top:9px;width:18px;height:18px;color:var(--ink-muted)}
.search-res{position:absolute;top:40px;left:0;right:0;background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-raised);z-index:30;max-height:360px;overflow:auto}
.search-res button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;cursor:pointer;border-bottom:1px solid var(--border)}
.search-res button:hover{background:var(--surface-200)}
.iconbtn{width:36px;height:36px;border-radius:var(--r-md);border:1px solid transparent;background:none;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink-muted);position:relative;flex:none}
.iconbtn:hover{background:var(--surface-200);color:var(--ink)} .iconbtn svg{width:18px;height:18px}
.dot{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:700 10px/16px var(--sans);padding:0 4px}
.menu-btn{display:none}
.content{flex:1;overflow:auto;padding:24px}
.demo-bar{background:var(--warning-soft);color:var(--warning);font:500 12px/16px var(--sans);padding:6px 24px;border-bottom:1px solid var(--border)}

/* controls */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;font:600 14px/20px var(--sans);cursor:pointer;white-space:nowrap;text-decoration:none}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--brand);color:var(--on-brand)} .btn.primary:hover{background:var(--brand-strong)}
.btn.secondary{background:var(--surface-100);color:var(--ink);border-color:var(--border-strong)} .btn.secondary:hover{background:var(--surface-200)}
.btn.ghost{background:transparent;color:var(--ink-muted)} .btn.ghost:hover{background:var(--surface-200);color:var(--ink)}
.btn.danger{background:var(--surface-100);color:var(--danger);border-color:var(--danger)}
.btn.sm{height:28px;padding:0 10px;font-size:13px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:600 13px/18px var(--sans)}
.in{height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-100);width:100%;min-width:0}
textarea.in{height:auto;min-height:72px;padding:8px 12px;resize:vertical}
.in:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.in::placeholder{color:var(--ink-faint)}
.in.sm{height:30px;font-size:13px;padding:0 8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.help{font-size:12px;line-height:16px;color:var(--ink-muted)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.filters .in{width:auto;min-width:140px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-100);padding:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:4px 10px;border-radius:6px;cursor:pointer;font:500 13px/18px var(--sans);color:var(--ink-muted)}
.seg button.on{background:var(--brand-soft);color:var(--brand-strong);font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px;font:600 13px/18px var(--sans);color:var(--ink-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}

/* status */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-sm);font:500 12px/16px var(--sans);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-neutral{background:var(--neutral-soft);color:var(--ink-muted)} .b-info{background:var(--info-soft);color:var(--info)} .b-success{background:var(--success-soft);color:var(--success)}
.b-warning{background:var(--warning-soft);color:var(--warning)} .b-danger{background:var(--danger-soft);color:var(--danger)} .b-brand{background:var(--brand-soft);color:var(--brand-strong)}
.temp{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 6px;border-radius:999px;font:700 11px/16px var(--sans);letter-spacing:.06em;white-space:nowrap}
.temp svg{width:12px;height:12px}
.t-hot{background:var(--temp-hot-soft);color:var(--temp-hot)} .t-warm{background:var(--temp-warm-soft);color:var(--temp-warm)} .t-cold{background:var(--temp-cold-soft);color:var(--temp-cold)}
.score{display:inline-flex;align-items:center;gap:8px;min-width:110px}
.score .tr{display:block;flex:1;height:6px;border-radius:999px;background:var(--surface-200);overflow:hidden}
.score .fl{display:block;height:100%;border-radius:999px}
.score.hot .fl{background:var(--temp-hot)} .score.warm .fl{background:var(--temp-warm)} .score.cold .fl{background:var(--temp-cold)}
.score b{font:600 13px/18px var(--sans);min-width:24px;text-align:right}
.ch{display:inline-flex;align-items:center;gap:6px;font:500 12px/16px var(--sans);color:var(--c,var(--ch-website));white-space:nowrap}
.ch i{width:18px;height:18px;border-radius:var(--r-sm);background:var(--c,var(--ch-website));color:var(--surface-100);display:inline-grid;place-items:center;font:700 9px/1 var(--sans);font-style:normal}
.overdue{color:var(--danger);font-weight:600}
.avatar{width:36px;height:36px;border-radius:999px;background:var(--surface-200);color:var(--ink-muted);display:inline-grid;place-items:center;font:600 12px/1 var(--sans);flex:none;position:relative}
.avatar.sm{width:24px;height:24px;font-size:10px}
.avatar .chd{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;border-radius:999px;border:2px solid var(--surface-100);background:var(--c,var(--ch-website))}

/* cards & dashboard */
.card{background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:16px;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:24px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.kpi:hover{border-color:var(--border-strong)}
.kpi .v{font:700 26px/32px var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .d{font:500 12px/16px var(--sans);color:var(--ink-muted)}
.kpi.alert{border-color:var(--danger)} .kpi.alert .v{color:var(--danger)}
.kpi.good .v{color:var(--success)}
.sec-title{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.grid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.list-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.list-item:last-child{border-bottom:0}
.chart text{fill:var(--ink-muted);font:500 11px var(--sans)}
.chart .lbl{fill:var(--ink);font-weight:600}
.chart .grid{stroke:var(--border)}
.hbar{display:grid;grid-template-columns:110px 1fr 70px;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.hbar .tr{height:10px;background:var(--surface-200);border-radius:999px;overflow:hidden}
.hbar .fl{height:100%;border-radius:999px;background:var(--chart-1)}
.hbar .n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.stackbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--surface-200)}

/* table */
.tw{border:1px solid var(--border);border-radius:var(--r-md);overflow:auto;background:var(--surface-100)}
table.t{width:100%;border-collapse:collapse}
.t th{position:sticky;top:0;background:var(--surface-200);text-align:left;font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
.t td{height:44px;padding:4px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.t tr:last-child td{border-bottom:0}
.t tbody tr{cursor:pointer} .t tbody tr:hover{background:var(--surface-200)}
.t .num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:32px;text-align:center;color:var(--ink-muted)}

/* kanban */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start;min-height:400px}
.col{background:var(--surface-200);border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:10px;width:272px;flex:none;min-height:200px}
.col.over{outline:2px dashed var(--brand);outline-offset:-2px}
.col-h{display:flex;justify-content:space-between;align-items:baseline;font:600 13px/18px var(--sans);padding:2px 4px}
.kc{background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:8px;cursor:grab}
.kc.dragging{box-shadow:var(--shadow-raised);opacity:.85}
.kc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:8px;font:500 12px/16px var(--sans);color:var(--ink-muted);gap:6px}

/* inbox */
.inbox{display:grid;grid-template-columns:340px minmax(0,1fr) 320px;height:calc(100% + 48px);margin:-24px;background:var(--surface-100)}
.ib-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.ib-scroll{overflow-y:auto;flex:1}
.conv{display:flex;gap:10px;padding:12px;border-bottom:1px solid var(--border);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.conv:hover{background:var(--surface-200)}
.conv.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.conv .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .msg{font-size:13px;line-height:18px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv.unread .msg{color:var(--ink);font-weight:500}
.unr{min-width:18px;height:18px;border-radius:999px;background:var(--brand);color:var(--on-brand);font:700 11px/18px var(--sans);text-align:center;padding:0 5px;flex:none}
.thread{display:flex;flex-direction:column;min-height:0;min-width:0}
.th-h{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface-0)}
.bub{max-width:75%;padding:8px 12px;border-radius:12px;background:var(--surface-100);border:1px solid var(--border);white-space:pre-wrap;word-wrap:break-word}
.bub.out{align-self:flex-end;background:var(--brand-soft);border-color:transparent}
.bub.ai{align-self:flex-end;background:var(--info-soft);border-color:transparent}
.bub .meta{display:block;font-size:11px;line-height:14px;color:var(--ink-muted);margin-top:4px}
.composer{border-top:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:8px}
.ib-side{border-left:1px solid var(--border);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:13px;line-height:18px}
.kv dt{color:var(--ink-muted)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ai-box{background:var(--info-soft);border-radius:var(--r-md);padding:12px;font-size:13px;line-height:18px;display:flex;flex-direction:column;gap:6px}
.ai-box .h{display:flex;align-items:center;gap:6px;font:700 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--info)}
.ai-box .h svg{width:14px;height:14px}
.ai-box ul{margin:0;padding-left:18px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chipbtn{border:1px solid var(--border);background:var(--surface-100);border-radius:999px;padding:2px 10px;font:500 12px/18px var(--sans);cursor:pointer;color:var(--ink-muted)}
.chipbtn.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-strong)}

/* drawer, modal, toast */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface-100);z-index:61;display:flex;flex-direction:column;box-shadow:var(--shadow-raised)}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);padding-top:calc(12px + env(safe-area-inset-top,0px))}
.drawer-b{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}
.drawer-f{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100% - 32px));background:var(--surface-100);border-radius:var(--r-lg);z-index:71;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-raised);max-height:90%;overflow:auto}
.modal-scrim{z-index:70}
.toasts{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;width:min(440px,calc(100% - 32px))}
.toast{background:var(--ink);color:var(--surface-100);padding:10px 14px;border-radius:var(--r-md);font-weight:500;box-shadow:var(--shadow-raised)}
.notif-pop{position:absolute;right:0;top:44px;width:min(360px,calc(100vw - 32px));background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-raised);z-index:40;max-height:420px;overflow:auto;text-align:left;color:var(--ink)}
.notif-pop .it{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;line-height:18px}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:76px 20px 1fr;column-gap:8px}
.tl .dt{font:500 12px/22px var(--sans);color:var(--ink-muted);text-align:right}
.tl .rail{display:flex;flex-direction:column;align-items:center}
.tl .dt2{width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--surface-100);border:2px solid var(--tc,var(--border-strong));flex:none}
.tl .ln{flex:1;width:2px;background:var(--border)}
.tl li:last-child .ln{display:none}
.tl .bd{padding-bottom:14px;min-width:0}
.tl .ti{font-weight:600;line-height:22px}
.tl .no{font-size:13px;line-height:18px;color:var(--ink-muted);overflow-wrap:anywhere}

/* automation */
.rule{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.node{border:1px solid var(--border);background:var(--surface-200);border-radius:var(--r-md);padding:4px 10px;font:500 12px/18px var(--sans)}
.node.if{background:var(--brand-soft);border-color:transparent;color:var(--brand-strong);font-weight:700}
.arrow{color:var(--ink-faint)}
.switch{position:relative;width:40px;height:22px;border-radius:999px;background:var(--border-strong);border:0;cursor:pointer;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface-100);transition:left .15s}
.switch.on{background:var(--success)} .switch.on::after{left:21px}

/* quotation document */
.paper{background:var(--paper);color:var(--paper-ink);border:1px solid var(--border);border-radius:var(--r-md);padding:28px;font-size:13px;line-height:19px;color-scheme:light}
.paper .ph{display:flex;justify-content:space-between;gap:16px;border-bottom:3px solid #c8102e;padding-bottom:14px;margin-bottom:14px;flex-wrap:wrap}
.paper h2{font-size:20px;color:#c8102e}
.paper table{width:100%;border-collapse:collapse;margin:12px 0}
.paper th{background:#1c1f26;color:#fff;text-align:left;padding:6px 8px;font-size:12px}
.paper td{padding:6px 8px;border-bottom:1px solid #dfe2e7}
.paper .num{text-align:right}
.paper .tot td{border:0;padding:3px 8px}
.paper .logo{max-height:56px;max-width:180px}
.paper .muted{color:#5b616e}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos img{width:88px;height:88px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--border)}
.perm td,.perm th{text-align:center} .perm td:first-child,.perm th:first-child{text-align:left}
@media (max-width:1200px){.inbox{grid-template-columns:300px minmax(0,1fr)} .ib-side{display:none} .inbox.side-open .ib-side{display:flex;position:fixed;right:0;top:0;bottom:0;width:min(340px,100%);background:var(--surface-100);z-index:61}}
@media (max-width:1000px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
 .app{grid-template-columns:minmax(0,1fr)}
 .side{position:fixed;top:0;bottom:0;left:0;width:260px;transform:translateX(-100%);z-index:62;transition:transform .2s;padding-top:calc(12px + env(safe-area-inset-top,0px))}
 .side.open{transform:none}
 .menu-btn{display:inline-grid}
 .content{padding:16px} .top{padding:8px 16px;flex-wrap:wrap} .demo-bar{padding:6px 16px}
 .search{order:3;max-width:none;flex-basis:100%}
 .inbox{grid-template-columns:minmax(0,1fr);margin:-16px;height:calc(100% + 32px)}
 .inbox .thread{display:none} .inbox.open .thread{display:flex} .inbox.open .ib-list{display:none}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 .kv{grid-template-columns:96px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* login */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100%;width:100%;grid-column:1/-1}
.lg-brand{background:var(--charcoal);color:var(--on-charcoal);padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden;min-height:100%}
.lg-rings{position:absolute;left:0;bottom:0;width:min(420px,70%);height:auto;opacity:.95;pointer-events:none}
.lg-copy{position:relative;z-index:1}
.lg-h{font:700 clamp(28px,3.6vw,44px)/1.08 var(--sans);letter-spacing:-.02em;color:var(--on-charcoal)}
.lg-brand > div:last-child{position:relative;z-index:1;text-align:right}
.lg-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--surface-100)}
.lg-box{width:100%;max-width:380px}
.lg-title{font:700 26px/32px var(--sans);margin:0}
.lg-sub{margin:6px 0 24px}
.lg-in{height:44px;font-size:15px}
.lg-btn{height:44px;justify-content:center;font-size:15px}
.lg-btn[disabled]{opacity:.55;cursor:not-allowed}
.lg-link{border:0;background:none;color:var(--brand);font:600 13px/18px var(--sans);cursor:pointer;padding:0}
.lg-eye{position:absolute;right:6px;top:6px;height:32px;padding:0 10px;border:0;background:none;color:var(--ink-muted);font:600 13px/18px var(--sans);cursor:pointer;border-radius:6px}
.lg-eye:hover{background:var(--surface-200);color:var(--ink)}
.lg-err{background:var(--danger-soft);color:var(--danger);border-radius:var(--r-md);padding:10px 12px;font-weight:500;font-size:13px}
.lg-ok{background:var(--success-soft);color:var(--success);border-radius:var(--r-md);padding:10px 12px;font-weight:500;font-size:13px}
.lg-demo{margin-top:24px;border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.lg-demo summary{cursor:pointer;font:600 13px/18px var(--sans)}
.demo-acc{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px;border-radius:6px;cursor:pointer;text-align:left;font-size:13px}
.demo-acc:hover{background:var(--surface-200)}
.lg-foot{margin-top:20px}
@media (max-width:860px){.login{grid-template-columns:minmax(0,1fr)} .lg-brand{padding:24px 16px;min-height:auto;gap:16px} .lg-rings{width:160px;left:auto;right:0;transform:scaleX(-1);opacity:.35} .lg-brand > div:last-child{display:none} .lg-h{font-size:26px} .lg-panel{padding:28px 16px 40px;align-items:flex-start}}

:root{--brand-blue:#0a4fc4;--map-bg:#12151b;--map-grid:rgba(255,255,255,.045);--map-road:#2b313c;--map-ring:#3b4250;--map-river:#1d3a66;--map-label:#a3a9b5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand-blue:#6aa5ff}}
:root[data-theme="dark"]{--brand-blue:#6aa5ff}
.side-logo{background:#fff;border-radius:var(--r-lg);padding:10px 12px 8px;margin:2px 0 10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.side-logo img{height:44px;width:auto;max-width:100%;object-fit:contain}
.side-logo span{font:700 10px/14px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#5b616e}
/* login v2 */
.login2{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(380px,1fr);min-height:100%;width:100%}
.map{position:relative;overflow:hidden;background:var(--map-bg);color:#f2f3f5;min-height:100%}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.route{animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-240}}
.ping{animation:ping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center} .ping2{animation:ping 2.4s ease-out .6s infinite;transform-box:fill-box;transform-origin:center}
.map::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(rgba(18,21,27,0),var(--map-bg) 70%);pointer-events:none}
.map-copy{z-index:2} .map-card{z-index:2}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.map-card{position:absolute;background:rgba(23,26,32,.88);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:10px 14px;display:flex;gap:10px;align-items:center;backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.4);color:#f2f3f5}
.map-card .cap{color:#a3a9b5}
.mc1{top:9%;left:7%} .mc2{top:9%;right:6%;flex-direction:column;align-items:flex-start;gap:0}
.pulse{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pl 1.8s infinite;flex:none}
@keyframes pl{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.map-copy{position:absolute;left:7%;bottom:7%;max-width:440px;background:linear-gradient(transparent,rgba(18,21,27,.0));}
.map-copy h2{font:800 clamp(30px,3.8vw,50px)/1.04 var(--sans);letter-spacing:-.025em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.map-copy h2 span{color:#ff4d5e}
.map-copy p{color:#c6cbd4;margin:12px 0 0;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.lg-side{background:var(--surface-100);display:flex;align-items:center;justify-content:center;padding:40px 32px;position:relative}
.lg-side::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--brand) 0 50%,var(--brand-blue) 50% 100%)}
.lg-card{width:100%;max-width:380px}
.lg-logo{width:220px;max-width:70%;height:auto;display:block;margin-bottom:14px}
:root[data-theme="dark"] .lg-logo{background:#fff;border-radius:12px;padding:10px 12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lg-logo{background:#fff;border-radius:12px;padding:10px 12px}}
.lg-stripe{display:flex;flex-direction:column;gap:4px;margin:0 0 22px}
.lg-stripe i{display:block;height:4px;width:56px;border-radius:2px;background:var(--brand-blue)} .lg-stripe i+i{background:var(--brand);width:40px}
.lg-inwrap{position:relative}
.lg-inwrap>svg{position:absolute;left:12px;top:13px;width:18px;height:18px;color:var(--ink-muted);pointer-events:none}
.lg-inwrap .lg-in{padding-left:38px}
.lg-ok svg{width:14px;height:14px;vertical-align:-2px}
@media (max-width:900px){.login2{grid-template-columns:minmax(0,1fr)} .map{height:300px;min-height:0} .map-copy{bottom:16px;left:16px;right:16px} .map-copy h2{font-size:28px} .map-copy p{display:none} .mc1{top:16px;left:16px} .mc2{display:none} .lg-side{padding:28px 16px 40px;align-items:flex-start} .lg-side::before{width:auto;height:6px;right:0;bottom:auto;background:linear-gradient(90deg,var(--brand) 0 50%,var(--brand-blue) 50% 100%)}}
@media (prefers-reduced-motion:reduce){.route,.ping,.ping2,.pulse{animation:none}}
/* team chat */
.chat{display:grid;grid-template-columns:260px minmax(0,1fr);height:calc(100% + 48px);margin:-24px;background:var(--surface-100)}
.cl-list{border-right:1px solid var(--border);overflow-y:auto;padding:8px}
.cl-h{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:12px 8px 4px}
.cl{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;text-align:left;color:var(--ink);font-weight:500}
.cl svg{width:16px;height:16px;color:var(--ink-muted)} .cl:hover{background:var(--surface-200)} .cl.on{background:var(--brand-soft);color:var(--brand-strong)}
.ai-dot,.ai-av{display:inline-grid;place-items:center;border-radius:999px;background:var(--brand-blue);color:#fff}
.ai-dot{width:24px;height:24px} .ai-dot svg,.ai-av svg{width:14px;height:14px;color:#fff}
.ai-av{background:var(--brand-blue)!important}
.cm-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.cm-list{gap:2px;background:var(--surface-100)}
.cm{display:flex;gap:10px;padding:8px;border-radius:var(--r-md)} .cm:hover{background:var(--surface-200)}
.cm.ai{background:var(--info-soft)}
.cm-t{overflow-wrap:anywhere;line-height:21px} .cm-t ul{margin:4px 0;padding-left:20px}
.day{display:flex;align-items:center;gap:8px;margin:10px 0;color:var(--ink-muted);font:600 12px/16px var(--sans)} .day::before,.day::after{content:"";flex:1;height:1px;background:var(--border)}
.mention{background:var(--info-soft);color:var(--info);border-radius:4px;padding:0 3px;font-weight:600} .mention.me{background:var(--brand-soft);color:var(--brand-strong)} .mention.ai{background:var(--brand-blue);color:#fff}
.ref{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand);text-decoration:none;background:var(--brand-soft);padding:0 4px;border-radius:4px}
@media (max-width:860px){.chat{grid-template-columns:minmax(0,1fr);margin:-16px;height:calc(100% + 32px)} .chat .cm-main{display:none} .chat.open .cm-main{display:flex} .chat.open .cl-list{display:none}}
/* integrations */
.integ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.integ{display:flex;flex-direction:column;gap:12px} .integ.on{border-color:var(--success)}
.integ-ic{width:40px;height:40px;border-radius:var(--r-md);background:var(--c);color:var(--surface-100);display:grid;place-items:center;font:800 14px/1 var(--sans);flex:none}
.integ-does{margin:0;padding-left:18px;font-size:13px;line-height:19px;color:var(--ink-muted)}

/* colourful dashboard */
:root{--t-blue:#1d5bd8;--t-blue-soft:#e6eefc;--t-teal:#0f766e;--t-teal-soft:#dff5f2;--t-violet:#6d3fd1;--t-violet-soft:#efe9fc;--t-amber:#a85a00;--t-amber-soft:#fdf0db;
--t-red:#c8102e;--t-red-soft:#fde7ea;--t-green:#137a3a;--t-green-soft:#e2f5e8;--t-slate:#475467;--t-slate-soft:#eceef2;
--t-hot:#b4160f;--t-hot-soft:#fde4e1;--t-warm:#9a5300;--t-warm-soft:#fdf0dc;--t-cold:#1e5aa8;--t-cold-soft:#e4eefa}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--t-blue:#7aa7ff;--t-blue-soft:#16223a;--t-teal:#2dd4bf;--t-teal-soft:#10282a;--t-violet:#b39bff;--t-violet-soft:#221a3a;--t-amber:#fbbf24;--t-amber-soft:#2e2210;
--t-red:#ff7a85;--t-red-soft:#3a171b;--t-green:#4ade80;--t-green-soft:#13281b;--t-slate:#a3adbd;--t-slate-soft:#262a33;--t-hot:#ff8a7a;--t-hot-soft:#3b1612;--t-warm:#fbbf24;--t-warm-soft:#2f220e;--t-cold:#8ab8ff;--t-cold-soft:#14233a}}
:root[data-theme="dark"]{--t-blue:#7aa7ff;--t-blue-soft:#16223a;--t-teal:#2dd4bf;--t-teal-soft:#10282a;--t-violet:#b39bff;--t-violet-soft:#221a3a;--t-amber:#fbbf24;--t-amber-soft:#2e2210;
--t-red:#ff7a85;--t-red-soft:#3a171b;--t-green:#4ade80;--t-green-soft:#13281b;--t-slate:#a3adbd;--t-slate-soft:#262a33;--t-hot:#ff8a7a;--t-hot-soft:#3b1612;--t-warm:#fbbf24;--t-warm-soft:#2f220e;--t-cold:#8ab8ff;--t-cold-soft:#14233a}
.hero{position:relative;overflow:hidden;background:#171a21;color:#f2f3f5;border-radius:16px;padding:24px;border:1px solid var(--border)}
.hero::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--brand) 0 50%,var(--brand-blue) 50% 100%)}
.hero-rings{position:absolute;right:0;top:0;width:200px;height:200px;opacity:.3;pointer-events:none;transform:scaleY(-1)}
.hero-top{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.hero-date{font:600 12px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#9aa1ad}
.hero-h{font:700 26px/32px var(--sans);color:#fff;margin-top:4px}
.hero-p{margin:4px 0 0;color:#c6cbd4}
.hero-act{display:flex;gap:8px;flex-wrap:wrap}
.hero-btn{background:#e0182f;color:#fff} .hero-btn:hover{background:#c8102e}
.hero-btn2{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)} .hero-btn2:hover{background:rgba(255,255,255,.14)}
.hero-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.hs{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;color:#fff;display:flex;flex-direction:column;gap:2px;font:inherit;box-shadow:inset 0 3px 0 var(--hc)}
.hs:hover{background:rgba(255,255,255,.1)}
.hs-v{font:700 24px/30px var(--sans);color:var(--hc);font-variant-numeric:tabular-nums}
.hs-l{font-size:13px;color:#c6cbd4} .hs-l b{color:#ff8a94}
.sec2{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.sec-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ts);color:var(--tc)} .sec-ic svg{width:17px;height:17px}
.kpis2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:24px}
.kpi2{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border-radius:14px;cursor:pointer;font:inherit;color:inherit;border:1px solid var(--border);
  background:linear-gradient(135deg,var(--ts) 0%,var(--surface-100) 58%);box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s,border-color .15s}
.kpi2:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--tc)}
.k-ic{width:40px;height:40px;border-radius:12px;background:var(--tc);color:var(--surface-100);display:grid;place-items:center;flex:none;box-shadow:0 4px 12px -4px var(--tc)}
.k-ic svg{width:20px;height:20px}
.k-b{display:flex;flex-direction:column;min-width:0}
.k-l{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.k-v{font:700 24px/30px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.k-d{font:500 12px/16px var(--sans);color:var(--ink-muted)}
.k-v.long{font-size:19px;line-height:28px;white-space:nowrap}
.kpi2.alert{border-color:var(--tc)} .kpi2.alert .k-v{color:var(--tc)}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.donut-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.card.lc{box-shadow:inset 0 3px 0 var(--tc),var(--shadow-card)}
@media (max-width:1000px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.hero{padding:18px 16px} .hero-h{font-size:22px} .hs-v{font-size:20px}}
@media (prefers-reduced-motion:reduce){.kpi2{transition:none} .kpi2:hover{transform:none}}

/* sidebar section colours (logo theme) */
.side > *{flex-shrink:0}
@media (max-width:600px){#who{display:none}}
.side{background:linear-gradient(180deg,#0d1b3e 0%,#141a2b 38%,#161a22 100%)}
:root[data-theme="dark"] .side{background:linear-gradient(180deg,#0a1530 0%,#0e121c 40%,#0b0c0f 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .side{background:linear-gradient(180deg,#0a1530 0%,#0e121c 40%,#0b0c0f 100%)}}
.sg{--g:#ff5a6a;--gs:rgba(255,90,106,.16);display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.sg-sales{--g:#ff5a6a;--gs:rgba(255,90,106,.16)} .sg-cust{--g:#5b9bff;--gs:rgba(91,155,255,.17)} .sg-fin{--g:#34d399;--gs:rgba(52,211,153,.16)}
.sg-grow{--g:#fbbf24;--gs:rgba(251,191,36,.16)} .sg-admin{--g:#b39bff;--gs:rgba(179,155,255,.17)}
.sg .side-group{display:flex;align-items:center;gap:8px;color:var(--g);opacity:.95}
.sg-dot{width:8px;height:8px;border-radius:3px;background:var(--g);box-shadow:0 0 0 3px var(--gs)}
.sg .nav{color:#c3c8d2}
.sg .nav .ni{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--gs);color:var(--g);flex:none;transition:background .15s,color .15s}
.sg .nav .ni svg{width:16px;height:16px}
.sg .nav:hover{background:rgba(255,255,255,.06);color:#fff}
.sg .nav.on{background:var(--gs);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g) 45%,transparent)}
.sg .nav.on .ni{background:var(--g);color:#10131a}
.sg .nav.on .count{background:var(--g);color:#10131a}
.nav{height:40px;gap:10px}
.side-logo{box-shadow:0 6px 18px -8px rgba(0,0,0,.6);position:relative;overflow:hidden}
.side-logo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brand) 0 50%,var(--brand-blue) 50% 100%)}
/* page colour per section */
.content{--pc:var(--t-red);--pcs:var(--t-red-soft)}
.pg-sales{--pc:var(--t-red);--pcs:var(--t-red-soft)} .pg-cust{--pc:var(--t-blue);--pcs:var(--t-blue-soft)} .pg-fin{--pc:var(--t-green);--pcs:var(--t-green-soft)}
.pg-grow{--pc:var(--t-amber);--pcs:var(--t-amber-soft)} .pg-admin{--pc:var(--t-violet);--pcs:var(--t-violet-soft)}
.phead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;margin-bottom:18px;border:1px solid var(--border);
  background:radial-gradient(120% 160% at 0% 0%,var(--pcs) 0%,var(--surface-100) 62%);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:14px solid var(--pc);opacity:.08}
.ph-ic{width:52px;height:52px;border-radius:14px;background:var(--pc);color:var(--surface-100);display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -8px var(--pc)}
.ph-ic svg{width:26px;height:26px}
.ph-crumb{font:700 11px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pc)}
.ph-t{font:700 22px/28px var(--sans)}
.ph-s{margin:2px 0 0;color:var(--ink-muted);font-size:13px}
.ph-stats{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.ph-st{background:var(--surface-100);border:1px solid var(--border);border-radius:12px;padding:8px 14px;min-width:96px;display:flex;flex-direction:column}
.ph-st b{font:700 18px/24px var(--sans);color:var(--pc);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-st span{font:500 12px/16px var(--sans);color:var(--ink-muted)}
/* tables, tabs, filters follow the page colour */
.content .tw{border-radius:12px;box-shadow:var(--shadow-card)}
.content .t th{background:var(--pcs);color:var(--pc)}
.content .t tbody tr:hover{background:color-mix(in srgb,var(--pcs) 55%,var(--surface-100))}
.content .t tbody tr td:first-child{box-shadow:inset 3px 0 0 transparent}
.content .t tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--pc)}
.content .tabs button.on{color:var(--pc);border-bottom-color:var(--pc)}
.content .seg button.on{background:var(--pcs);color:var(--pc)}
.content .card-h h2,.content .card>h2{color:var(--ink)}
.content .card{border-radius:14px}
.content .filters .in{border-radius:10px}
.content .col{background:var(--pcs)}
.content .col-h span:first-child{color:var(--pc)}
.content .kc{border-radius:10px;transition:box-shadow .15s,transform .15s}
.content .kc:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.content .list-item:hover b{color:var(--pc)}
.content .integ.on{border-color:var(--t-green)}
@media (max-width:860px){.phead{padding:14px} .ph-ic{width:44px;height:44px} .ph-t{font-size:19px} .ph-stats{width:100%}}
@media (prefers-reduced-motion:reduce){.content .kc{transition:none} .content .kc:hover{transform:none}}

/* ===== redesigned pages ===== */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.tb-l,.tb-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.toolbar .in{width:auto;min-width:150px;border-radius:10px;background:var(--surface-0)}
.sbox{position:relative} .sbox svg{position:absolute;left:10px;top:9px;width:18px;height:18px;color:var(--ink-muted)} .sbox .in{padding-left:34px;min-width:240px}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-100);border-radius:999px;padding:4px 6px 4px 12px;cursor:pointer;font:500 13px/18px var(--sans);color:var(--ink)}
.fchip b{background:var(--fcs);color:var(--fc);border-radius:999px;padding:0 8px;font-size:12px;line-height:20px;min-width:24px;text-align:center}
.fchip:hover{border-color:var(--fc)} .fchip.on{background:var(--fc);border-color:var(--fc);color:var(--surface-100)} .fchip.on b{background:var(--surface-100);color:var(--fc)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap}
.ptab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface-0);border-radius:10px;padding:6px 8px 6px 14px;cursor:pointer;font:600 13px/18px var(--sans);color:var(--ink-muted)}
.ptab b{background:var(--fcs);color:var(--fc);border-radius:8px;padding:0 8px;line-height:22px}
.ptab.on{background:var(--fcs);color:var(--fc);border-color:var(--fc)}
.empty2{text-align:center;padding:36px 16px;color:var(--ink-muted);background:var(--surface-100);border:1px dashed var(--border-strong);border-radius:14px;grid-column:1/-1}
.e-ic{width:48px;height:48px;border-radius:14px;display:inline-grid;place-items:center;background:var(--pcs,var(--surface-200));color:var(--pc,var(--ink-muted))} .e-ic svg{width:24px;height:24px}
.empty2 p{margin:10px 0}
.av2{width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;background:var(--acs);color:var(--ac);font:700 12px/1 var(--sans);flex:none;letter-spacing:.02em}
.av2.sm{width:24px;height:24px;border-radius:7px;font-size:10px} .av2.lg{width:46px;height:46px;border-radius:13px;font-size:15px} .av2.xl{width:64px;height:64px;border-radius:18px;font-size:21px;background:var(--ac);color:var(--surface-100);box-shadow:0 8px 18px -8px var(--ac)}
.nm2{display:inline-flex;align-items:center;gap:10px;min-width:0} .nm2>div{display:flex;flex-direction:column;min-width:0} .nm2 span{font-size:12px;line-height:16px;color:var(--ink-muted)} .nm2.sm{gap:6px;font-size:13px}
.ph2{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .ph2 svg{width:13px;height:13px;color:var(--ink-muted)}
.sq-ic{width:32px;height:32px;border-radius:9px;display:inline-grid;place-items:center;background:color-mix(in srgb,var(--qc) 14%,transparent);color:var(--qc);flex:none} .sq-ic svg{width:16px;height:16px} .sq-ic.lg{width:40px;height:40px;border-radius:11px} .sq-ic.lg svg{width:19px;height:19px}
.plate{font-family:var(--mono);font-size:13px;background:var(--surface-200);border:1px solid var(--border);border-radius:6px;padding:1px 6px;letter-spacing:.02em} .plate.sm{font-size:12px}
.srv{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--t-red);margin-right:6px} .srv.on{background:var(--t-green);box-shadow:0 0 0 3px var(--t-green-soft)}
.life{display:inline-flex;flex-direction:column;gap:3px;min-width:110px} .life-t{display:block;height:6px;border-radius:999px;background:var(--surface-200);overflow:hidden} .life-t span{display:block;height:100%;background:var(--lc);border-radius:999px}
.life-n{font:600 12px/14px var(--sans);color:var(--lc)}
.pay{display:inline-flex;flex-direction:column;gap:3px;min-width:140px} .pay-t{display:block;height:6px;border-radius:999px;background:var(--surface-200);overflow:hidden} .pay-t span{display:block;height:100%;border-radius:999px} .pay-t.big{height:10px}
/* my work */
.my-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ms{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--mcs),var(--surface-100) 70%);border:1px solid var(--border);border-radius:14px;padding:12px}
.ms-ic{width:36px;height:36px;border-radius:10px;background:var(--mc);color:var(--surface-100);display:grid;place-items:center;flex:none} .ms-ic svg{width:18px;height:18px}
.ms b{display:block;font:700 20px/24px var(--sans);color:var(--mc)} .ms span{font-size:12px;color:var(--ink-muted)}
.mbox{background:var(--surface-100);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.mbox-h{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(90deg,var(--bcs),transparent);border-bottom:1px solid var(--border)} .mbox-h h2{flex:1}
.mb-ic{width:30px;height:30px;border-radius:9px;background:var(--bc);color:var(--surface-100);display:grid;place-items:center} .mb-ic svg{width:16px;height:16px}
.mb-n{background:var(--bcs);color:var(--bc);font:700 12px/22px var(--sans);border-radius:999px;padding:0 9px}
.mbox-b{padding:6px 10px 10px;display:flex;flex-direction:column}
.mbox-b .empty2{border:0;padding:20px}
.li2,.fu2{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:10px;cursor:pointer}
.li2:hover,.fu2:hover{background:var(--surface-200)} .li2 .grow,.fu2 .grow{display:flex;flex-direction:column;min-width:0} .li2 span:not([class]),.fu2 .grow span{font-size:12px;line-height:16px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-due{font-size:12px;white-space:nowrap}
/* pipeline */
.col2{background:var(--scs)!important;border-top:4px solid var(--sc);padding-top:8px}
.col2-h{display:flex;align-items:center;gap:8px;padding:2px 2px 6px}
.c-ic{width:28px;height:28px;border-radius:8px;background:var(--sc);color:var(--surface-100);display:grid;place-items:center;flex:none} .c-ic svg{width:15px;height:15px}
.col2-h .grow{display:flex;flex-direction:column} .col2-h b{font-size:13px;line-height:18px} .col2-h .grow span{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.c-n{background:var(--surface-100);color:var(--sc,var(--rc));font:700 12px/22px var(--sans);border-radius:999px;padding:0 9px}
.col-empty{border:2px dashed color-mix(in srgb,var(--sc) 40%,transparent);border-radius:10px;padding:18px;text-align:center;font-size:12px;color:var(--ink-muted)}
.kc-need{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted)} .kc-need svg{width:14px;height:14px;flex:none}
/* follow-ups */
.fu-list{display:flex;flex-direction:column;gap:8px}
.fu-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-card)}
.fu-row.late{border-color:color-mix(in srgb,var(--t-red) 45%,var(--border));background:linear-gradient(90deg,var(--t-red-soft),var(--surface-100) 40%)}
.fu-main{cursor:pointer;min-width:220px} .fu-when{font-size:13px;min-width:120px;text-align:right}
/* quotations */
.qgrid,.cgrid,.tgrid,.igrid,.cpgrid,.sgrid,.rgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.qcard,.ccard,.tcard,.icard,.cpcard,.stcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;background:var(--surface-100);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow-card);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;overflow:hidden;font:inherit;color:var(--ink)}
.qcard:hover,.ccard:hover,.tcard:hover,.icard:hover,.cpcard:hover,.stcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--pc)}
.qcard:focus-visible,.ccard:focus-visible,.tcard:focus-visible,.icard:focus-visible,.cpcard:focus-visible,.stcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.qcard{background:linear-gradient(160deg,var(--qcs),var(--surface-100) 45%)} .qno{font-weight:700;color:var(--qc)}
.qname{font-size:16px;line-height:22px} .qitems{font-size:12px;line-height:17px;color:var(--ink-muted)}
.qtot{font:800 24px/30px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)} .qtot span{font:500 12px var(--sans);color:var(--ink-muted);margin-left:6px}
/* customers */
.cc-top{display:flex;align-items:center;gap:12px} .cc-top .grow{display:flex;flex-direction:column;min-width:0} .cc-top b{font-size:15px} .cc-top .grow span{font-size:12px;color:var(--ink-muted)}
.cc-info{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink-muted)} .cc-info span{display:flex;align-items:center;gap:6px} .cc-info svg{width:13px;height:13px}
.cc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:6px;background:var(--surface-0);border-radius:12px;padding:8px}
.cc-stats div{display:flex;flex-direction:column;align-items:center;text-align:center} .cc-stats b{font:700 15px/20px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap} .cc-stats span{font-size:11px;color:var(--ink-muted)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-muted)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px} .tiles.t4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(140deg,var(--ts),var(--surface-100) 65%);box-shadow:var(--shadow-card);font:inherit;color:var(--ink)}
.tile.wide{flex-direction:row;align-items:center;gap:12px} .tile.wide>div{display:flex;flex-direction:column}
.tile b{font:700 22px/28px var(--sans);color:var(--tc);font-variant-numeric:tabular-nums} .tile span{font-size:12px;color:var(--ink-muted)} .tile .tl{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase}
.tile .k-ic{width:34px;height:34px;border-radius:10px} .tile:hover{border-color:var(--tc)} .tile.on{border:2px solid var(--tc);padding:13px}
.tile:focus-visible{outline:2px solid var(--focus)}
/* renewals */
.rb{margin-bottom:18px} .rb-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} .rb-h h2{color:var(--rc)}
.rcard{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow-card)}
.rcard .grow{min-width:150px;display:flex;flex-direction:column;gap:3px}
.r-days{width:64px;height:64px;border-radius:16px;background:var(--rcs);color:var(--rc);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.r-days b{font:800 22px/24px var(--sans)} .r-days span{font-size:10px;font-weight:600}
.r-act{display:flex;flex-direction:column;gap:6px}
/* installs */
.sub-h{margin:6px 0 10px;color:var(--ink-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.igrid{margin-bottom:18px} .icard.cx{opacity:.65}
.ic-name{font-size:15px} .ic-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-muted)} .ic-meta>span{display:inline-flex;align-items:center;gap:5px} .ic-meta svg{width:13px;height:13px}
.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} .stepper .st{height:6px;border-radius:999px;background:var(--surface-200)} .stepper .st.done{background:var(--t-green)} .stepper .st.cur{background:var(--t-amber);box-shadow:0 0 0 3px var(--t-amber-soft)}
/* tickets */
.tcard{padding-top:30px} .t-rib{position:absolute;left:0;right:0;top:0;height:22px;background:var(--pcs2);color:var(--pc2);font:700 11px/22px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:0 16px;border-bottom:2px solid var(--pc2)}
.t-cat{font-size:15px} .t-issue{margin:0;font-size:13px;line-height:19px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* campaigns */
.cpcard{padding-top:0} .cp-band{display:flex;justify-content:space-between;align-items:center;margin:0 -16px;padding:10px 16px;background:color-mix(in srgb,var(--cc) 12%,var(--surface-100));border-bottom:1px solid var(--border)}
.cp-name{font-size:16px} .cp-time{display:flex;flex-direction:column;gap:4px}
.cp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .cp-stats div{display:flex;flex-direction:column} .cp-stats b{font-size:13px;white-space:nowrap} .cp-stats span{font-size:11px;color:var(--ink-muted)}
.cp-roi{display:flex;justify-content:space-between;align-items:center;background:color-mix(in srgb,var(--rc) 12%,var(--surface-100));border-radius:10px;padding:8px 12px;color:var(--rc)} .cp-roi b{font:800 22px/26px var(--sans)} .cp-roi span{font-weight:700;font-size:12px;letter-spacing:.06em}
/* reports */
.lb{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)} .lb:last-child{border:0} .lb .grow{display:flex;flex-direction:column;gap:5px}
.lb-rank{width:26px;height:26px;border-radius:50%;background:var(--surface-200);display:grid;place-items:center;font:700 12px var(--sans);flex:none} .lb-rank.gold{background:var(--t-amber);color:var(--surface-100)}
.lb-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-muted)}
.srow{display:flex;align-items:center;gap:12px;padding:8px 0}
/* staff */
.sgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.stcard{align-items:center;text-align:center;padding-top:28px} .st-band{position:absolute;left:0;right:0;top:0;height:54px;background:linear-gradient(120deg,var(--rc),color-mix(in srgb,var(--rc) 55%,var(--brand-blue)))}
.stcard .av2{position:relative;border:3px solid var(--surface-100)} .st-role{background:var(--rcs);color:var(--rc);font:600 12px/20px var(--sans);border-radius:999px;padding:0 10px}
.stcard .cc-stats{width:100%}
.tgl{position:relative;display:inline-block;width:34px;height:20px} .tgl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.tgl span{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:background .15s} .tgl span::after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:var(--surface-100);transition:left .15s}
.tgl input:checked+span{background:var(--pc)} .tgl input:checked+span::after{left:17px} .tgl input:disabled+span{opacity:.5} .tgl input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.tile .k-ic,.ms .ms-ic{color:var(--surface-100);font-size:inherit}
.tile .k-ic{background:var(--tc);display:grid;place-items:center;box-shadow:0 4px 12px -4px var(--tc)}
/* settings / automation / ai polish */
.pg-admin .card h2,.pg-grow .card h2{display:flex;align-items:center;gap:8px}
.pg-admin .card h2::before,.pg-grow .card h2::before{content:"";width:8px;height:18px;border-radius:3px;background:var(--pc)}
.pg-grow .rule{border-radius:16px} .pg-grow .node.if{background:var(--pc);color:var(--surface-100)} .pg-grow .node{background:var(--pcs);border-color:transparent;color:var(--ink)}
@media (max-width:1100px){.my-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.my-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .sbox .in{min-width:0;width:100%} .sbox{flex:1;min-width:0} .toolbar .in{min-width:0;flex:1} .fu-when{text-align:left;min-width:0} .fu-main{min-width:0;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.qcard,.ccard,.tcard,.icard,.cpcard,.stcard{transition:none} .qcard:hover,.ccard:hover,.tcard:hover,.icard:hover,.cpcard:hover,.stcard:hover{transform:none}}

/* ===== A4 documents ===== */
.doc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow-card)}
.a4-scroll{width:100%;overflow:hidden;padding-bottom:24px}
.a4-fit{width:794px;margin:0 auto}
@media (min-width:1100px){.a4-fit{margin:0}}
.a4{width:794px;min-height:1123px;background:#fff;color:#16181d;padding:44px 48px 28px;box-shadow:0 10px 40px -12px rgba(16,24,40,.35);border-radius:4px;position:relative;font:400 12.5px/1.5 Inter,"Noto Sans Devanagari",system-ui,sans-serif;display:flex;flex-direction:column;color-scheme:light;overflow:hidden}
.a4 *{color-scheme:light}
.a4-h{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.a4-logo{height:78px;width:auto}
.a4-co{display:flex;flex-direction:column;text-align:right;font-size:11.5px;line-height:1.55;color:#4a5160}
.a4-co b{font-size:15px;color:#16181d;margin-bottom:2px}
.a4-stripe{display:flex;gap:0;height:5px;margin:16px 0 18px;border-radius:3px;overflow:hidden} .a4-stripe i{flex:1;background:#c8102e} .a4-stripe i+i{background:#0a4fc4}
.a4-stripe.b{margin:10px 0 0;height:4px}
.a4-title{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.a4-title h1{font:800 30px/1 Inter,sans-serif;letter-spacing:.02em;color:#c8102e;margin:0} .a4-title span{font-size:11px;color:#6b7280;letter-spacing:.04em;text-transform:uppercase}
.a4-meta{border-collapse:collapse;font-size:12px;min-width:250px} .a4-meta td{padding:3px 0 3px 14px} .a4-meta td:first-child{color:#6b7280;padding-left:0} .a4-meta td:last-child{text-align:right}
.a4-st{padding:1px 8px;border-radius:4px;background:#eef0f3} .st-Paid,.st-Accepted{background:#e2f5e8;color:#137a3a} .st-Overdue,.st-Rejected{background:#fde7ea;color:#b42318} .st-PartiallyPaid,.st-Pending,.st-Sent,.st-Viewed{background:#fdf0db;color:#9a5300}
.a4-parties{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:18px}
.a4-box{border:1px solid #dfe2e7;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;background:#fafbfc}
.a4-lbl{font:700 10px/14px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#0a4fc4;margin-bottom:4px}
.a4-big{font-size:15px;color:#16181d}
.a4-kv{border-collapse:collapse;font-size:12px;width:100%} .a4-kv td{padding:2px 0;vertical-align:top} .a4-kv td:first-child{color:#6b7280;width:42%} .a4-kv .r{text-align:right}
.a4-items{width:100%;border-collapse:collapse;font-size:12.5px}
.a4-items th{background:#1c1f26;color:#fff;text-align:left;font:600 11px/1 Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:10px 10px}
.a4-items th:first-child{border-radius:6px 0 0 0} .a4-items th:last-child{border-radius:0 6px 0 0}
.a4-items td{padding:9px 10px;border-bottom:1px solid #e8eaee} .a4-items tbody tr:nth-child(even) td{background:#f7f8fa} .a4-items tr.pad td{height:30px}
.a4-items .r{text-align:right;font-variant-numeric:tabular-nums}
.a4-sum{display:grid;grid-template-columns:1fr 290px;gap:18px;margin-top:14px;align-items:start}
.a4-words b{font-size:12.5px;line-height:1.5}
.a4-tot{border-collapse:collapse;width:100%;font-size:12.5px} .a4-tot td{padding:5px 10px} .a4-tot td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.a4-tot tr.grand td{background:#c8102e;color:#fff;font:800 15px/1.4 Inter,sans-serif} .a4-tot tr.grand td:first-child{border-radius:6px 0 0 6px} .a4-tot tr.grand td:last-child{border-radius:0 6px 6px 0}
.a4-tot tr.bal td{font-weight:800;color:#0a4fc4;border-top:2px solid #0a4fc4;font-size:14px}
.a4-foot2{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-top:auto;padding-top:22px;align-items:end}
.a4-muted{color:#6b7280;font-size:11px;line-height:1.5;margin-top:4px}
.a4-sign{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:11px;color:#4a5160;text-align:center} .a4-sign>div{display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
.a4-sign .line{display:block;border-top:1.5px solid #16181d;margin-top:46px} .a4-sign .for{font-weight:600;color:#16181d;font-size:10.5px}
.a4-f{margin-top:20px;font-size:10.5px;color:#6b7280;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.a4-stamp{position:absolute;top:610px;left:50%;transform:translateX(-50%) rotate(-14deg);font:900 64px/1 Inter,sans-serif;letter-spacing:.14em;padding:8px 26px;border:6px solid;border-radius:14px;opacity:.12;pointer-events:none;z-index:1}
.a4-stamp.paid{color:#137a3a;border-color:#137a3a} .a4-stamp.due{color:#b42318;border-color:#b42318}

.lg-support{margin-top:20px;border-radius:14px;padding:14px;background:linear-gradient(135deg,var(--brand-soft),var(--surface-100) 55%,color-mix(in srgb,var(--brand-blue) 12%,var(--surface-100)));border:1px solid var(--border)}
.ls-h{display:flex;align-items:center;gap:10px;margin-bottom:10px} .ls-h b{font:800 16px/22px var(--sans);color:var(--ink)}
.ls-live{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:var(--on-brand);font:800 10px/20px var(--sans);letter-spacing:.1em;border-radius:999px;padding:0 9px}
.ls-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:lsb 1.4s infinite}
@keyframes lsb{50%{opacity:.25}}
.ls-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ls-item{display:flex;align-items:center;gap:8px;background:var(--surface-100);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--ink);text-decoration:none;font:700 15px/20px var(--sans);font-variant-numeric:tabular-nums;user-select:text;min-width:0}
.ls-item span{overflow-wrap:anywhere} .ls-item.wide{grid-column:1/-1;font-size:14px}
.ls-item svg{width:16px;height:16px;color:var(--brand);flex:none} .ls-item.wide svg{color:var(--brand-blue)}
.ls-item:hover{border-color:var(--brand)}
@media (prefers-reduced-motion:reduce){.ls-live i{animation:none}}

/* ===================== PHP build additions ===================== */
.req{color:var(--brand)}
.inline-form{display:inline-flex;margin:0}
a.nav,a.fchip,a.ptab,a.hs,a.kpi2,a.conv,a.cl,a.chipbtn,.seg a,.tabs a,a.list-item,a.li2,a.fu2{text-decoration:none;color:inherit}
a.nav{color:var(--on-charcoal-muted)} .sg a.nav{color:#c3c8d2} .sg a.nav:hover,.sg a.nav.on{color:#fff}
.seg a{border:0;background:none;padding:4px 10px;border-radius:6px;cursor:pointer;font:500 13px/18px var(--sans);color:var(--ink-muted);display:inline-block}
.seg a.on{background:var(--brand-soft);color:var(--brand-strong);font-weight:600}
.content .seg a.on{background:var(--pcs);color:var(--pc)}
.tabs a{border:0;background:none;padding:10px 12px;font:600 13px/18px var(--sans);color:var(--ink-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;display:inline-block}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)} .content .tabs a.on{color:var(--pc);border-bottom-color:var(--pc)}
.t tbody tr.static{cursor:default} .t tbody tr.static:hover{background:none}
.content .t tbody tr.static:hover td:first-child{box-shadow:none}
.search-res a{display:block;width:100%;text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none}
.search-res a:hover,.search-res a.on{background:var(--surface-200)}
.search-res .sr-k{font:600 11px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-right:6px}
.notif-pop .it a{color:inherit;text-decoration:none;display:block}
.notif-pop .it.unread{background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.toast.err{background:var(--danger);color:#fff} .toast.info{background:var(--info);color:#fff}
.drawer.wide{width:min(760px,100%)}
.drawer-loading{display:grid;place-items:center;height:100%;color:var(--ink-muted)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.umenu{position:absolute;right:0;top:44px;min-width:220px;background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-raised);z-index:40;padding:6px;display:flex;flex-direction:column}
.umenu .um-h{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.umenu a,.umenu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);border:0;background:none;color:var(--ink);text-decoration:none;cursor:pointer;font:500 14px/20px var(--sans);width:100%;text-align:left}
.umenu a:hover,.umenu button:hover{background:var(--surface-200)} .umenu svg{width:16px;height:16px;color:var(--ink-muted)}
.umenu form{margin:0}
.avatar-btn{border:0;background:none;padding:0;cursor:pointer;border-radius:999px}
.viewas-bar{background:var(--info-soft);color:var(--info);font:600 12px/16px var(--sans);padding:6px 24px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.viewas-bar form{margin:0}
.li-grid{display:grid;grid-template-columns:minmax(0,1fr) 72px 110px 36px;gap:6px;align-items:end}
.li-grid .lh{font:600 12px/16px var(--sans);color:var(--ink-muted)}
.li-desc{margin-top:4px}
.qtot-box{background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px}
.qtot-box .kv dd{text-align:right;font-variant-numeric:tabular-nums}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .file-row:last-child{border-bottom:0}
.file-row a{color:var(--ink);font-weight:600;text-decoration:none} .file-row a:hover{color:var(--brand)}
.photos a{display:block}
.drop-hint{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:14px;text-align:center;color:var(--ink-muted);font-size:13px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px}
.msg-del{font-size:11px;color:var(--ink-faint);margin-left:6px}
.composer .chips{max-height:64px;overflow:auto}
.bub.out .meta .dl-failed{color:var(--danger);font-weight:600}
.kv dd .btn{vertical-align:middle}
.settings-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.danger-zone{border-color:var(--danger)}
.install-body{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:var(--surface-0)}
.install-card{max-width:540px;width:100%;padding:28px;border-radius:16px;position:relative;overflow:hidden}
.install-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--brand) 0 50%,var(--brand-blue) 50% 100%)}
.hint{background:var(--surface-200);border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:18px;color:var(--ink-muted)}
.wa-btn{background:#0f7a43;color:#fff} .wa-btn:hover{background:#0b6236}
.imei-in{font-size:16px!important;height:44px!important;letter-spacing:.06em}
.err-text{color:var(--danger);font-weight:600}
.ok-text{color:var(--success);font-weight:600}
.warn-text{color:var(--warning);font-weight:600}
.col.over{outline:2px dashed var(--brand);outline-offset:-2px}
.kc[draggable=true]{user-select:none}
.mono-sm{font-family:var(--mono);font-size:11px}
.perm .tgl{vertical-align:middle}
.export-link{font-size:13px}
@media (max-width:860px){.viewas-bar{padding:6px 16px}.li-grid{grid-template-columns:minmax(0,1fr) 60px 90px 32px}}

/* ===================== print (A4 quotation / invoice → "Save as PDF") ===================== */
@page{size:A4;margin:0}
@media print{
  html,body{height:auto!important;background:#fff!important}
  .side,.top,.doc-bar,.demo-bar,.viewas-bar,.toasts,#overlay,#modal,.no-print{display:none!important}
  .app{display:block!important;height:auto!important}
  .main{overflow:visible!important;height:auto!important;display:block!important}
  .content{padding:0!important;overflow:visible!important;background:#fff!important}
  .a4-scroll{overflow:visible!important;padding:0!important}
  .a4-fit{zoom:1!important;width:210mm!important;margin:0!important}
  .a4{box-shadow:none!important;border-radius:0!important;width:210mm!important;min-height:297mm!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* base rules for the hidden attribute (popovers, scrims) */
[hidden]{display:none!important}
/* ===================== Leads (board · cards · modals) ===================== */
:root{--t-lime:#4d7c0f;--t-lime-soft:#ecf7d9;--star:#f5b301;--star-off:#d3d7de;--pink:#d6246e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--t-lime:#a3e635;--t-lime-soft:#1d2a10;--star-off:#3a404b}}
:root[data-theme="dark"]{--t-lime:#a3e635;--t-lime-soft:#1d2a10;--star-off:#3a404b}
/* header row */
.lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:10px 12px 10px 18px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.lh-t{font:700 24px/32px var(--sans);display:flex;align-items:baseline;gap:8px}
.lh-n{font:600 13px/18px var(--sans);color:var(--ink-muted);background:var(--surface-200);border-radius:999px;padding:1px 9px}
.lh-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-100);color:var(--ink);font:500 14px/20px var(--sans);cursor:pointer;box-shadow:var(--shadow-card);white-space:nowrap}
.lbtn svg{width:16px;height:16px;color:var(--ink-muted)} .lbtn:hover{background:var(--surface-200)} .lbtn.on{border-color:var(--brand);color:var(--brand)} .lbtn.on svg{color:var(--brand)}
.lbtn.icon{width:38px;padding:0;justify-content:center} .lbtn.solid{background:var(--brand);border-color:var(--brand);color:var(--on-brand)} .lbtn.solid svg{color:var(--on-brand)} .lbtn.solid:hover{background:var(--brand-strong)}
.vt{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card)}
.vt a{width:40px;height:36px;display:grid;place-items:center;color:var(--ink-muted);background:var(--surface-100)} .vt a+a{border-left:1px solid var(--border)} .vt a svg{width:18px;height:18px}
.vt a.on{background:var(--brand-soft);color:var(--brand-strong)}
.lsearch{display:flex;gap:8px;align-items:center;margin:-4px 0 14px} .lsearch .sbox .in{width:100%;height:40px;padding-left:36px}
/* dropdowns */
.dd{position:relative;display:inline-flex}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--surface-100);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-raised);z-index:45;padding:6px;display:flex;flex-direction:column}
.dd-menu.right{left:auto;right:0}
.dd-menu>a,.dd-menu>button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);border:0;background:none;color:var(--ink);text-decoration:none;font:500 14px/20px var(--sans);cursor:pointer;text-align:left;white-space:nowrap}
.dd-menu>a:hover,.dd-menu>button:hover{background:var(--surface-200)} .dd-menu svg{width:16px;height:16px;color:var(--ink-muted);flex:none}
.dd-note{padding:8px 10px;font-size:12px;color:var(--ink-muted)}
.fpanel{display:flex;flex-direction:column;gap:12px;padding:8px;width:min(560px,calc(100vw - 40px))}
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* board */
.lboard{display:flex;gap:14px;overflow-x:auto;align-items:flex-start;padding-bottom:10px;min-height:420px}
.lcol{width:340px;flex:none;display:flex;flex-direction:column;border-radius:14px;background:color-mix(in srgb,var(--sc) 7%,var(--surface-0));border:1px solid color-mix(in srgb,var(--sc) 22%,var(--border))}
.lcol.over{outline:2px dashed var(--sc);outline-offset:2px}
.lcol-h{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;background:var(--sc);color:#fff;border-radius:13px 13px 0 0;font:700 17px/24px var(--sans);position:sticky;top:0;z-index:2}
:root[data-theme="dark"] .lcol-h{color:#10131a} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lcol-h{color:#10131a}}
.lcol-h .sep{width:1px;height:20px;background:currentColor;opacity:.45}
.lcol-h .amt{font:600 12px/22px var(--sans);background:rgba(255,255,255,.18);border-radius:8px;padding:0 9px;white-space:nowrap}
.lcol-h .cnt{margin-left:auto;min-width:30px;text-align:center;background:var(--pink);color:#fff;border:2px solid rgba(255,255,255,.75);border-radius:999px;font:700 12px/20px var(--sans);padding:0 7px}
.lcol-b{display:flex;flex-direction:column;gap:12px;padding:12px;max-height:calc(100vh - 230px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--sc) transparent}
.lcol-more{display:block;text-align:center;font:600 13px/18px var(--sans);color:var(--sc);padding:8px;border:1px dashed var(--sc);border-radius:10px;text-decoration:none}
.lcol .col-empty{border-color:color-mix(in srgb,var(--sc) 40%,transparent)}
/* card */
.lc2{background:var(--surface-100);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.lc2:hover{box-shadow:var(--shadow-raised)} .lc2.dragging{opacity:.6;transform:rotate(1deg)} .lc2[draggable=true]{cursor:grab}
.lc2.late{background:color-mix(in srgb,var(--brand-soft) 75%,var(--surface-100));border-color:color-mix(in srgb,var(--brand) 35%,var(--border))}
.lc-top{padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border-bottom:1px solid var(--border);border-radius:12px 12px 0 0}
.lc-top:hover .lc-name{color:var(--brand)}
.lc-name{font:600 16px/22px var(--sans);color:var(--ink);overflow-wrap:anywhere}
.lc-ph{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font:500 14px/20px var(--sans);font-variant-numeric:tabular-nums;width:max-content}
.lc-ph svg{width:15px;height:15px;color:var(--success)} .lc-ph:hover{color:var(--success)}
.lc-labels{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.lchip{background:var(--t-violet-soft);color:var(--t-violet);border-radius:6px;padding:2px 8px;font:500 12px/18px var(--sans)}
.lc-body{padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.lc-kv{display:grid;grid-template-columns:16px 38px minmax(0,1fr);gap:6px;align-items:center;font-size:13px;line-height:18px;color:var(--ink)}
.lc-kv svg{width:15px;height:15px;color:var(--ink-muted)} .lc-kv b{font-weight:700} .lc-kv span{overflow-wrap:anywhere}
.lc-kv.red span{color:var(--danger);font-weight:700}
.lc-rate{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:10px;margin-top:6px;background:var(--surface-100)}
.lc2.late .lc-rate{border-color:color-mix(in srgb,var(--brand) 30%,var(--border));background:color-mix(in srgb,var(--brand-soft) 45%,var(--surface-100))}
.lc-rate>div{display:flex;flex-direction:column;gap:4px;padding:8px 12px} .lc-rate>div+div{border-left:1px solid var(--border);align-items:flex-end}
.lc-rate span:first-child{font:500 13px/18px var(--sans);color:var(--ink)} .lc-rate b{font:600 14px/20px var(--sans);font-variant-numeric:tabular-nums}
.lc-rate.wide{grid-template-columns:1fr 1fr 1.3fr} .lc-rate.wide>div:last-child{align-items:stretch}
.lc-reason{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--danger)}
.lc-foot{display:flex;align-items:center;gap:2px;padding:8px 10px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-200) 50%,transparent);border-radius:0 0 12px 12px}
.lf{position:relative;width:32px;height:32px;border:0;background:none;border-radius:8px;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink)}
.lf svg{width:18px;height:18px} .lf:hover{background:var(--surface-200)}
.lf.red{color:var(--danger)} .lf.green{color:var(--success)} .lf.blue{color:var(--info)} .lf.grey{color:var(--ink-muted)}
.lf-n{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:999px;background:var(--ink-faint);color:#fff;font:700 10px/16px var(--sans);font-style:normal;padding:0 4px}
.ovd{background:var(--danger);color:#fff;font:700 11px/20px var(--sans);letter-spacing:.04em;border-radius:999px;padding:0 9px;white-space:nowrap}
/* stars */
.stars{display:inline-flex;gap:2px}
.stars .st{width:20px;height:20px;padding:0;border:0;background:none;color:var(--star-off);display:inline-grid;place-items:center}
.stars .st svg{width:19px;height:19px} .stars .st.on{color:var(--star)}
.stars.edit .st{cursor:pointer} .stars.edit:hover .st{color:var(--star)} .stars.edit .st:hover~.st{color:var(--star-off)}
/* stage badge + list */
.stg{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:600 12px/16px var(--sans);background:color-mix(in srgb,var(--sc) 14%,var(--surface-100));color:var(--sc)}
.stg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.t.llist tbody tr.row-late{background:color-mix(in srgb,var(--brand-soft) 55%,transparent)}
.t.llist td{white-space:normal} .t.llist .lc-labels{max-width:220px}
/* modal with coloured header bar */
.mx{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));max-height:calc(100% - 32px);display:flex;flex-direction:column;background:var(--surface-100);border-radius:var(--r-lg);box-shadow:var(--shadow-raised);z-index:71;overflow:hidden}
.mx-sm{width:min(480px,calc(100% - 24px))} .mx-md{width:min(640px,calc(100% - 24px))} .mx-lg{width:min(980px,calc(100% - 24px))}
.mx-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 14px 22px;background:linear-gradient(90deg,#0d1b3e,#1c1f26);color:#fff;position:relative;flex:none}
.mx-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brand) 0 50%,var(--brand-blue) 50% 100%)}
.mx-h h2{font:700 17px/24px var(--sans);color:#fff}
.mx-x{width:34px;height:34px;border-radius:8px;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer} .mx-x:hover{background:rgba(255,255,255,.22)} .mx-x svg{width:18px;height:18px}
.mx-b{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.mx-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border);flex:none;flex-wrap:wrap}
.mx-f .btn{height:42px;padding:0 24px}
.btn.cancel{background:#8a8f98;color:#fff;border-color:transparent} .btn.cancel:hover{background:#767b84}
.mx .field label{font-weight:500}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px} .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.g2 .full,.g3 .full{grid-column:1/-1}
.mx .in{height:42px} .mx textarea.in{height:auto} .mx .in.sm{height:32px}
/* mobile number with country flag */
.phone-in{display:flex;gap:8px;align-items:center}
.cc-wrap{position:relative;display:inline-flex;align-items:center;gap:2px;height:42px;padding:0 4px;color:var(--ink-muted);flex:none}
.cc-wrap select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cc-wrap>svg:not(.flag){width:14px;height:14px}
.cc-wrap .flag{display:none;width:24px;height:22px} .cc-wrap .f-xx{width:20px;height:20px}
.cc-wrap[data-cc="+977"] .f-np{display:block} .cc-wrap[data-cc="+91"] .f-in{display:block} .cc-wrap:not([data-cc="+977"]):not([data-cc="+91"]) .f-xx{display:block}
.cc-wrap:focus-within{outline:2px solid var(--focus);border-radius:6px}
.pfx-in{flex:1;min-width:0;display:flex;align-items:center;height:42px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-100)}
.pfx-in:focus-within{outline:2px solid var(--focus);border-color:var(--focus)}
.pfx{padding:0 0 0 12px;color:var(--ink);font-variant-numeric:tabular-nums}
.pfx-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 12px 0 6px;font-variant-numeric:tabular-nums}
.dup-warn{color:var(--warning);font-weight:600} .dup-warn a{color:inherit}
/* label calculator */
.lbl-calc{min-height:42px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px}
.lbl-empty{display:grid;place-items:center;height:46px;background:var(--surface-200);border-radius:var(--r-md);color:var(--ink-muted)}
.lbl-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 12px 96px 86px 30px;gap:6px;align-items:center;background:var(--surface-0);border:1px solid var(--border);border-radius:8px;padding:4px 4px 4px 10px}
.lbl-name{font:600 13px/18px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lbl-x{color:var(--ink-muted);text-align:center}
.lbl-line{font:600 13px/18px var(--sans);text-align:right;font-variant-numeric:tabular-nums} .lbl-row .iconbtn{width:30px;height:30px}
.lbl-total{display:flex;justify-content:space-between;padding:4px 6px 0;font-size:14px} .lbl-total b{color:var(--brand)}
/* stage picker */
.stg-pick{display:flex;flex-direction:column;gap:8px}
.stg-opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:pointer}
.stg-opt:has(input:checked){border-color:var(--sc);background:color-mix(in srgb,var(--sc) 10%,var(--surface-100))}
.stg-opt input{margin-top:4px;accent-color:var(--sc)} .stg-opt>span:last-child{display:flex;flex-direction:column}
.stg-dot{width:10px;height:10px;border-radius:50%;background:var(--sc);margin-top:5px;flex:none}
/* drop zone + voice note */
.dz-row{display:flex;gap:12px;align-items:center}
.dz{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:16px;border:1.5px dashed var(--brand-blue);border-radius:10px;background:var(--surface-0);cursor:pointer;color:var(--ink-muted);font-size:13px}
.dz svg{width:30px;height:30px;color:var(--ink)} .dz b{font:500 17px/24px var(--sans);color:var(--ink)}
.dz.over,.dz:hover{background:color-mix(in srgb,var(--brand-blue) 6%,var(--surface-0))}
.mic{width:50px;height:50px;border-radius:10px;border:1.5px solid var(--brand-blue);background:var(--surface-100);color:var(--brand-blue);display:grid;place-items:center;cursor:pointer;flex:none}
.mic svg{width:22px;height:22px} .mic.rec{background:var(--danger);border-color:var(--danger);color:#fff;animation:pl 1.4s infinite}
.dz-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.dz-item{display:flex;align-items:center;gap:8px;font-size:13px;background:var(--surface-200);border-radius:8px;padding:4px 4px 4px 10px}
.dz-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dz-item audio{height:32px;max-width:220px}
.rec-time{color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}
/* follow-up history */
.fuh{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fuh li{border:1px solid var(--border);border-left:4px solid var(--info);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-100)}
.fuh li.done{border-left-color:var(--success)} .fuh li.late{border-left-color:var(--danger)}
.fuh-h{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap} .fuh-t{font-size:14px;line-height:20px;overflow-wrap:anywhere}
.fuh-m{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-muted)} .fuh-m svg{vertical-align:-2px}
.fuh-att{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.att.img img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.att.file{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 10px;border:1px solid var(--border);border-radius:8px;color:var(--ink);text-decoration:none}
.att audio{height:34px;max-width:260px;display:block}
.tot-row td{background:var(--surface-200)}
.print-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .print-head p{margin:0}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g3,.g2,.fp-grid{grid-template-columns:minmax(0,1fr)} .mx{top:0;left:0;transform:none;width:100%!important;height:100%;max-height:none;border-radius:0}
  .lcol{width:86vw} .lhead{padding:10px} .lh-t{font-size:20px} .lbl-row{grid-template-columns:minmax(0,1fr) 56px 10px 80px 30px} .lbl-line{display:none} .lc-rate.wide{grid-template-columns:1fr 1fr} .lc-rate.wide>div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}}
@media print{.t.llist{font-size:11px} .t.llist th,.t.llist td{padding:4px 6px}}
/* print just the open report modal */
@media print{
  body.print-modal .app,body.print-modal #overlay,body.print-modal .scrim,body.print-modal .mx-f,body.print-modal .toasts{display:none!important}
  body.print-modal .mx{position:static!important;transform:none!important;width:100%!important;max-height:none!important;box-shadow:none!important}
  body.print-modal .mx-b{overflow:visible!important}
}
.lc-rate span:first-child{white-space:nowrap} .lc-rate>div{min-width:0} .lc-rate>div:first-child{padding-right:6px}

.t.llist td{white-space:nowrap} .t.llist td .lc-labels{min-width:180px;max-width:260px} .t.llist .lchip{white-space:nowrap}

/* ===== compact Leads: 5 columns fit on a desktop screen, smaller Add Lead form ===== */
.lboard{gap:10px}
.lcol{flex:1 1 0;width:auto;min-width:210px}
.lcol-h{padding:8px 10px;font-size:14px;gap:6px}
.lcol-h .amt{font-size:11px;padding:0 6px;line-height:20px}
.lcol-h .cnt{font-size:11px;line-height:18px;min-width:24px;padding:0 5px}
.lcol-h .sep{height:16px}
.lcol-b{padding:8px;gap:8px}
.lc-top{padding:10px 10px 8px;gap:4px}
.lc-name{font-size:14px;line-height:19px}
.lc-ph{font-size:12.5px} .lc-ph svg{width:13px;height:13px}
.lchip{font-size:11px;line-height:16px;padding:1px 6px}
.lc-body{padding:8px 10px;gap:3px}
.lc-kv{grid-template-columns:14px 32px minmax(0,1fr);gap:4px;font-size:12px;line-height:16px}
.lc-kv svg{width:13px;height:13px}
.lc-rate{margin-top:4px} .lc-rate>div{padding:6px 8px;gap:2px}
.lc-rate span:first-child{font-size:11.5px} .lc-rate b{font-size:12.5px}
.stars .st{width:15px;height:15px} .stars .st svg{width:14px;height:14px}
.lc-foot{padding:4px 6px;gap:0}
.lf{width:26px;height:26px} .lf svg{width:15px;height:15px}
.lf-n{min-width:14px;height:14px;font-size:9px;line-height:14px}
.ovd{font-size:9.5px;line-height:17px;padding:0 6px}
/* Add Lead and other lead forms */
.mx-lg{width:min(760px,calc(100% - 24px))}
.mx-md{width:min(560px,calc(100% - 24px))}
.mx-h{padding:10px 12px 10px 18px} .mx-h h2{font-size:15px;line-height:22px}
.mx-x{width:28px;height:28px}
.mx-b{padding:14px 18px;gap:10px}
.mx-f{padding:10px 18px} .mx-f .btn{height:36px;padding:0 18px}
.mx .field{gap:4px} .mx .field label{font-size:12.5px;line-height:16px}
.mx .in{height:34px;font-size:13px} .mx textarea.in{min-height:56px}
.mx .help{font-size:11px}
.g3{gap:10px 16px} .g2{gap:10px 16px}
.cc-wrap,.pfx-in{height:34px}
.lbl-empty{height:34px;font-size:13px}
.dz{padding:10px} .dz b{font-size:14px} .dz svg{width:22px;height:22px}
.mic{width:42px;height:42px}
@media (max-width:640px){.lcol{flex:none;width:86vw}}.lc-rate{grid-template-columns:1fr}
.lc-rate>div{flex-direction:row;justify-content:space-between;align-items:center;padding:5px 8px}
.lc-rate>div+div{border-left:0;border-top:1px solid var(--border);align-items:center}
.lc-rate.wide{grid-template-columns:1fr} .lc-rate.wide>div:last-child{grid-column:auto;border-top:1px solid var(--border)} .lc-rate.wide .score{min-width:140px}
/* ===================== sticky notes ===================== */
.snotes{background:var(--surface-100);border:1px solid var(--border);border-radius:14px;padding:12px 16px 16px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.sn-head{display:flex;align-items:center;gap:8px;margin-bottom:12px} .sn-head h2{display:flex;align-items:center;gap:8px;font:600 16px/24px var(--sans)} .sn-head h2 svg{width:18px;height:18px;color:var(--brand-blue)}
.sn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.snotes.dash .sn-grid{display:flex;overflow-x:auto;padding:10px 4px 6px;scroll-snap-type:x proximity} .snotes.dash .snote{flex:0 0 260px;scroll-snap-align:start}
.snote{--nc:#16a34a;--ns:#e3f4e6;position:relative;background:var(--ns);border-radius:14px;border-bottom:3px solid var(--nc);min-height:170px;display:flex;flex-direction:column;box-shadow:0 2px 6px -3px rgba(16,24,40,.25);margin-top:8px}
.sn-yellow{--nc:#ca8a04;--ns:#fdf6d8} .sn-blue{--nc:#2563eb;--ns:#e4edfd} .sn-pink{--nc:#db2777;--ns:#fde7f1} .sn-violet{--nc:#7c3aed;--ns:#efe9fc}
:root[data-theme="dark"] .snote{--ns:color-mix(in srgb,var(--nc) 16%,#171a20)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .snote{--ns:color-mix(in srgb,var(--nc) 16%,#171a20)}}
.sn-pin{position:absolute;top:-12px;right:-6px;width:34px;height:34px;border:0;background:none;padding:0;color:var(--nc);cursor:pointer;display:grid;place-items:center;transform:rotate(35deg)}
.sn-pin svg{width:28px;height:28px} .snote:not(.pinned) .sn-pin{opacity:.35;transform:rotate(0)} .sn-pin:hover{opacity:1}
.inline-form:has(.sn-pin){position:absolute;top:-12px;right:-6px} .inline-form .sn-pin{position:static}
.sn-main{all:unset;box-sizing:border-box;cursor:pointer;flex:1;display:flex;flex-direction:column;gap:6px;padding:20px 16px 4px}
.sn-main:focus-visible{outline:2px solid var(--focus);border-radius:12px}
.sn-t{font:700 15px/20px var(--sans);color:var(--nc)}
.sn-b{font-size:13.5px;line-height:20px;color:var(--ink-muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sn-read .sn-b{display:block;-webkit-line-clamp:unset;padding:14px;color:var(--ink)}
.sn-f{display:flex;align-items:center;gap:2px;padding:4px 8px 6px 16px} .sn-f .cap{color:var(--ink-faint)}
.sn-f .lf{width:26px;height:26px} .sn-f .lf svg{width:15px;height:15px}
.sn-colors{display:flex;gap:10px} .sn-c input{position:absolute;opacity:0} .sn-c span{display:block;width:28px;height:28px;border-radius:8px;background:var(--ns);border:3px solid var(--nc);cursor:pointer}
.sn-c{--nc:#16a34a;--ns:#e3f4e6;position:relative} .sn-c input:checked+span{box-shadow:0 0 0 3px var(--surface-100),0 0 0 5px var(--nc)} .sn-c input:focus-visible+span{outline:2px solid var(--focus)}
.sn-c.sn-yellow{--nc:#ca8a04;--ns:#fdf6d8} .sn-c.sn-blue{--nc:#2563eb;--ns:#e4edfd} .sn-c.sn-pink{--nc:#db2777;--ns:#fde7f1} .sn-c.sn-violet{--nc:#7c3aed;--ns:#efe9fc}

/* every form uses the centred window: Submit first, grey Cancel last, delete buttons on the left */
.mx-f{align-items:center} .mx-f [data-close]{order:9} .mx-f .grow{flex:1}
.mx-f .btn[data-close]{background:#8a8f98;color:#fff;border-color:transparent} .mx-f .btn[data-close]:hover{background:#767b84}
.mx-f .btn.danger{background:var(--surface-100)}
.mx .form-grid{gap:10px 16px}
.mx-sm .form-grid,.mx-sm .g2{grid-template-columns:minmax(0,1fr)}
/* ===================== customer list ===================== */
.ctabs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ctabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.ctabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:var(--ink-muted);font:500 14px/20px var(--sans);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.ctabs a b{background:var(--surface-200);color:var(--ink-muted);border-radius:999px;font:600 11px/18px var(--sans);padding:0 8px}
.ctabs a.on{color:var(--brand);border-bottom-color:var(--brand)} .ctabs a.on b{background:var(--brand-soft);color:var(--brand-strong)}
.cbulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.cbi{width:38px;height:36px;border-radius:8px;border:1px solid var(--info);background:var(--surface-100);color:var(--info);display:inline-grid;place-items:center;cursor:pointer;text-decoration:none}
.cbi svg{width:17px;height:17px} .cbi:hover{background:var(--surface-200)}
.cbi.red{border-color:var(--danger);color:var(--danger)} .cbi.green{border-color:var(--success);color:var(--success)}
.cbi.solid{background:var(--surface-200);border-color:var(--border-strong);color:var(--ink)}
.ctw{border-radius:12px}
.content .t.clist th{background:linear-gradient(90deg,#0d1b3e,#1c1f26);color:#fff;font:600 13px/18px var(--sans);letter-spacing:0;text-transform:none;padding:12px}
.t.clist td{padding:4px 12px;height:46px}
.t.clist th.ck,.t.clist td.ck{width:36px;padding-right:0} .t.clist input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand)}
.cx-exp{width:28px;height:28px;border:0;background:none;border-radius:6px;display:grid;place-items:center;cursor:pointer;color:var(--ink-muted)} .cx-exp svg{width:16px;height:16px;transition:transform .15s} .cx-exp.open svg{transform:rotate(90deg)} .cx-exp:hover{background:var(--surface-200)}
.cacts{display:inline-flex;align-items:center;gap:2px}
.ca{width:26px;height:26px;border:0;background:none;border-radius:6px;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;text-decoration:none}
.ca svg{width:16px;height:16px} .ca:hover{background:var(--surface-200)}
.ca.amber{color:#d97706} .ca.red{color:var(--danger)} .ca.green{color:var(--success)} .ca.blue{color:var(--info)} .ca.pink{color:#c026d3} .ca.pink.on svg{fill:currentColor} .ca.off{opacity:.3;cursor:default}
.cname{color:var(--info);text-decoration:none;font-weight:500} .cname:hover{text-decoration:underline}
.mono-num{font-variant-numeric:tabular-nums}
.t.clist tr.cx-row td{background:var(--surface-0);height:auto;padding:10px 12px}
.cx-kv{display:grid;grid-template-columns:repeat(4,max-content minmax(0,1fr));gap:6px 12px;margin:0;font-size:13px}
.cx-kv dt{color:var(--ink-muted)} .cx-kv dd{margin:0;white-space:normal}
.cpager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:8px 12px;background:var(--surface-100);border:1px solid var(--border);border-radius:12px}
.pgb{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink)} .pgb svg{width:16px;height:16px} .pgb:hover{background:var(--surface-200)} .pgb.off{opacity:.3;pointer-events:none}
.ccard.cx{opacity:.6} .cfav{color:#c026d3} .cfav svg{width:16px;height:16px;fill:currentColor}
.cc-stats .stars .st{width:12px;height:12px} .cc-stats .stars .st svg{width:12px;height:12px}
@media (max-width:1000px){.cx-kv{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr)}}
@media (max-width:640px){.cx-kv{grid-template-columns:max-content minmax(0,1fr)} .cbulk .cap{display:none}}
/* ===================== to-do ===================== */
.lbtn.del{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:var(--danger-soft)} .lbtn.del svg{color:var(--danger)}
.dd-menu .ddb{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);border:0;background:none;color:var(--danger);font:500 14px/20px var(--sans);cursor:pointer;width:100%;white-space:nowrap} .dd-menu .ddb:hover{background:var(--surface-200)} .dd-menu form{margin:0}
.td-wrap{padding:0;overflow:hidden}
.td-tabs{display:flex;gap:4px;padding:6px 12px 0;border-bottom:1px solid var(--border);overflow-x:auto}
.td-tabs a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;color:var(--ink);font:500 15px/20px var(--sans);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.td-tabs a svg{width:18px;height:18px;color:var(--ink-muted)} .td-tabs a b{font:600 11px/18px var(--sans);background:var(--surface-200);color:var(--ink-muted);border-radius:999px;padding:0 7px}
.td-tabs a.on{color:var(--brand);border-bottom-color:var(--brand)} .td-tabs a.on svg{color:var(--brand)}
.tdb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px;background:var(--surface-0)}
.snotes .tdb{padding:0;background:none}
.tdcol{background:var(--surface-100);border-radius:12px;overflow:hidden;border:1px solid var(--border);display:flex;flex-direction:column;min-height:200px}
.tdcol header{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--ts);color:var(--tc);font-size:15px}
.td-pi{width:22px;height:22px;border-radius:5px;background:var(--tc);color:#fff;display:grid;place-items:center} .td-pi svg{width:14px;height:14px}
.tdcol-b{padding:10px;display:flex;flex-direction:column;gap:8px;max-height:460px;overflow-y:auto}
.td-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-faint);padding:30px 10px;text-align:center}
.td-empty svg{width:44px;height:44px;color:var(--border-strong)}
.tdc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;border:1px solid var(--border);border-left:3px solid var(--tc);border-radius:10px;padding:10px;background:var(--surface-100)}
.tdc.late{background:var(--danger-soft)} .tdc.done{opacity:.6} .tdc.done .td-body{text-decoration:line-through}
.td-check{width:24px;height:24px;border-radius:7px;border:2px solid var(--tc);background:var(--surface-100);color:transparent;display:grid;place-items:center;cursor:pointer;padding:0;margin-top:2px}
.td-check svg{width:15px;height:15px} .td-check.on{background:var(--tc);color:#fff} .td-check:hover{color:var(--tc)} .td-check.on:hover{color:#fff}
.td-main{cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.td-body{font-size:14px;line-height:20px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.td-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--ink-muted)} .td-meta svg{vertical-align:-2px}
.td-side{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:6px}
.td-users{display:flex;gap:2px;align-items:center}
.td-repeat{display:flex;flex-wrap:wrap;gap:6px 18px}
.td-repeat label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.td-repeat input{width:20px;height:20px;accent-color:var(--brand);margin:0}
.upick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:3px 6px;background:var(--surface-100)}
.upick:focus-within{outline:2px solid var(--focus);border-color:var(--focus)}
.upick select{border:0;background:transparent;flex:1;min-width:120px;height:26px;outline:0;color:var(--ink-muted)}
.uchip{display:inline-flex;align-items:center;gap:4px;background:var(--t-violet-soft);color:var(--t-violet);border-radius:6px;padding:1px 4px 1px 8px;font:500 12.5px/20px var(--sans)}
.uchip button{border:0;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.tgl.lg{width:48px;height:26px} .tgl.lg span::after{width:20px;height:20px} .tgl.lg input:checked+span::after{left:25px}
.tgl input:checked+span{background:var(--brand)}
@media (max-width:1000px){.tdb{grid-template-columns:minmax(0,1fr)}}

.qx-items{width:100%;max-width:760px;border-collapse:collapse;font-size:13px;margin:0 0 12px} .qx-items th,.qx-items td{padding:6px 10px;border-bottom:1px solid var(--border);text-align:left} .qx-items th{color:var(--ink-muted);font-weight:600;background:var(--surface-200)} .qx-items .num{text-align:right;white-space:nowrap}

/* ===================== dashboard quick-add bar ===================== */
.qbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0 0 16px;padding:6px 4px;background:var(--surface-100);border:1px solid var(--border);border-radius:12px}
.qb{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border:0;background:none;color:var(--ink);font:500 14.5px/20px var(--sans);cursor:pointer;border-radius:8px;position:relative}
.qb+.qb::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1.5px;background:var(--ink-muted);opacity:.55}
.qb svg{width:19px;height:19px;color:var(--qb)}
.qb:hover{background:var(--surface-200)} .qb:hover span{color:var(--qb)}
.qb:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:640px){.qbar{gap:2px;padding:4px} .qb{padding:7px 10px;font-size:13.5px} .qb+.qb::before{display:none}}

/* ===================== staff & roles ===================== */
.pw-in{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-100);overflow:hidden}
.pw-in:focus-within{outline:2px solid var(--focus);border-color:var(--focus)}
.pw-in .in{border:0;border-radius:0;flex:1;min-width:0;outline:0;box-shadow:none}
.pw-in button{border:0;border-left:1px solid var(--border);background:none;width:48px;display:grid;place-items:center;color:var(--ink-muted);cursor:pointer}
.pw-in button svg{width:18px;height:18px} .pw-in button.on,.pw-in button:hover{color:var(--brand)}
.st-flags{display:flex;flex-wrap:wrap;gap:10px 48px;padding:4px 8px}
.st-flags label{display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:14px;color:var(--ink)}
.st-flags input{width:20px;height:20px;accent-color:var(--brand);margin:0}
.st-feats{display:flex;flex-wrap:wrap;gap:14px 30px;padding:6px 0 2px}
.st-feats label{display:flex;flex-direction:column;align-items:flex-start;gap:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.st-sel{appearance:none;-webkit-appearance:none;border:0;border-radius:8px;padding:7px 34px 7px 12px;min-width:130px;font:600 13px/20px var(--sans);color:var(--t-green);background:var(--t-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
.st-sel.off{color:var(--danger);background-color:var(--danger-soft)}
.st-sel.ro{display:inline-block;background-image:none;cursor:default;padding-right:12px}
.st-sel:focus-visible{outline:2px solid var(--focus)}
.st-mail{max-width:200px} .st-mail a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--brand-blue,#2f5bd3);text-decoration:none}
.ctabs-row .ctabs+.cap{margin-left:auto}

/* ===================== tax invoice (Invoice settings layout) ===================== */
.a4.inv2{padding:28px;font:400 13px/1.45 "Noto Sans","Noto Sans Devanagari",Inter,system-ui,sans-serif;color:#1d1d1f}
.inv2 .iv-frame{border:2px solid #cfcfd4;padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;position:relative}
.inv2 .iv-title{margin:6px 0 10px;text-align:center;color:var(--ic);font:700 25px/1.2 inherit;letter-spacing:.2px;padding-bottom:12px;border-bottom:1px solid #e3e3e8}
.inv2 .iv-head{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:150px;margin-bottom:22px}
.inv2 .iv-logo{max-width:230px;max-height:130px;object-fit:contain}
.inv2 .iv-co{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:15px;line-height:1.6}
.inv2 table{border-collapse:collapse;width:100%}
.inv2 .iv-meta th,.inv2 .iv-meta td{border:1px solid #e3e3e8;padding:7px 10px;font-size:15px;text-align:left;font-weight:400}
.inv2 .iv-meta th{background:var(--ic);color:#fff;width:19%} .inv2 .iv-meta td{width:31%}
.inv2 .iv-to{display:flex;flex-direction:column;font-size:15px;line-height:1.55;margin:18px 2px 24px} .inv2 .iv-to b{font-size:15.5px}
.inv2 .iv-items th{background:var(--ic);color:#fff;font-weight:700;font-size:14px;text-align:left;padding:8px 9px;border:1px solid var(--ic)}
.inv2 .iv-items td{border:1px solid #e3e3e8;padding:8px 9px;vertical-align:top;font-size:14px;height:72px}
.inv2 .iv-items .sn{width:30px} .inv2 .iv-items td b{font-weight:700}
.inv2 .iv-none{text-align:center;color:#888}
.inv2 .iv-sum{display:grid;grid-template-columns:minmax(0,1fr) 38%;border:1px solid #e3e3e8;border-top:0}
.inv2 .iv-pay{display:flex;gap:12px;justify-content:space-between;padding:8px 12px;font-size:14.5px}
.inv2 .iv-pay-t{display:flex;flex-direction:column;gap:9px} .inv2 .iv-pay-t > b{font-size:15px}
.inv2 .iv-qr{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:#444;text-align:center}
.inv2 .iv-qr svg,.inv2 .iv-qrimg{width:112px;height:112px;object-fit:contain;display:block}
.inv2 .iv-tot{border-left:1px solid #e3e3e8}
.inv2 .iv-tot th,.inv2 .iv-tot td{padding:8px 12px;border-bottom:1px solid #e3e3e8;font-size:14.5px}
.inv2 .iv-tot th{text-align:left} .inv2 .iv-tot td{text-align:right}
.inv2 .iv-tot tr:last-child th,.inv2 .iv-tot tr:last-child td{border-bottom:0}
.inv2 .iv-tot .due th,.inv2 .iv-tot .due td{color:#c62828}
.inv2 .iv-words{background:var(--ic);color:#fff;font-weight:700;font-size:14.5px;padding:7px 12px;text-transform:uppercase}
.inv2 .iv-foot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);border:1px solid #e3e3e8;margin-top:auto;min-height:330px}
.inv2 .iv-words + .iv-foot{margin-top:60px}
.inv2 .iv-terms{padding:12px 16px;font-size:14px;line-height:1.5;border-right:1px solid #e3e3e8;white-space:normal}
.inv2 .iv-terms h2{color:var(--ic);font-size:18px;margin:0 0 12px}
.inv2 .iv-sign{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;font-size:15px}
.inv2 .iv-sign img{max-width:190px;max-height:170px;object-fit:contain}
.inv2 .iv-line{width:70%;border-bottom:1px solid #333;height:90px}
.inv2 .iv-note{text-align:center;color:#777;font-size:11.5px;margin:8px 0 0}
.inv2 .iv-muted{color:#888;font-size:12.5px}
@media print{.a4.inv2{padding:8mm!important}}
/* Invoice settings page */
.ivs{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:20px;align-items:start}
.ivs-form .card{margin-bottom:16px}
.ivs-prev{position:sticky;top:12px}
.ivs-img{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ivs-img img{max-height:64px;max-width:140px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px;object-fit:contain}
.ivs-img .ph{width:64px;height:64px;border:1px dashed var(--border-strong);border-radius:8px;display:grid;place-items:center;color:var(--ink-faint)}
.ivs-color{display:flex;align-items:center;gap:10px} .ivs-color input[type=color]{width:48px;height:36px;border:1px solid var(--border-strong);border-radius:8px;padding:2px;background:var(--surface-100);cursor:pointer}
@media (max-width:1100px){.ivs{grid-template-columns:minmax(0,1fr)} .ivs-prev{position:static}}

.lbl-manage{float:right;font:500 12.5px/20px var(--sans);color:var(--brand);text-decoration:none} .lbl-manage:hover{text-decoration:underline}

.dt-tones{display:flex;flex-wrap:wrap;gap:6px} .dt-tone{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px} .dt-tone input{position:absolute;opacity:0;pointer-events:none} .dt-tone span{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;background:color-mix(in srgb,var(--qc) 16%,transparent);color:var(--qc)} .dt-tone span svg{width:15px;height:15px} .dt-tone:has(input:checked){border-color:var(--qc);box-shadow:0 0 0 2px color-mix(in srgb,var(--qc) 30%,transparent)} .dt-tone:has(input:focus-visible){outline:2px solid var(--focus)}

/* ===================== Team Chat (WhatsApp-Web style) ===================== */
.wc-banner{background:color-mix(in srgb,var(--brand-blue,#2f5bd3) 12%,var(--surface-200));color:var(--brand-blue,#2f5bd3);font:600 13px/18px var(--sans);text-align:center;padding:9px 12px;border-radius:8px;margin:0 0 12px}
.wchat{display:grid;grid-template-columns:360px minmax(0,1fr);height:calc(100vh - 150px);min-height:480px;background:var(--surface-100);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.wchat.has-banner{height:calc(100vh - 200px)}
.wc-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--surface-100)}
.wc-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);min-height:64px}
.wc-logo{width:42px;height:42px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--border);padding:3px}
.wc-tabs{display:flex;gap:2px;margin:0 auto}
.wc-tab{position:relative;border:0;background:none;width:40px;height:40px;display:grid;place-items:center;color:var(--ink);cursor:pointer;border-radius:8px}
.wc-tab svg{width:20px;height:20px} .wc-tab:hover{background:var(--surface-200)}
.wc-tab.on{color:var(--brand)} .wc-tab.on::after{content:"";position:absolute;left:6px;right:6px;bottom:-11px;height:3px;border-radius:3px;background:var(--brand)}
.wc-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.wc-search{padding:12px 14px;border-bottom:1px solid var(--border)}
.wc-search .sbox .in{border-radius:999px;height:38px}
.wc-lists{flex:1;overflow-y:auto}
.wc-item{position:relative;display:flex;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.wc-item:hover,.wc-item.on{background:var(--surface-200)}
.wc-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px 6px 10px 16px;color:var(--ink);text-decoration:none}
.wc-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e9eaee;color:#a3a7b0;border:1px solid var(--border)}
.wc-av svg{width:24px;height:24px} .wc-av.grp{background:var(--brand-soft);color:var(--brand)}
.wc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wc-top,.wc-bot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.wc-top b{font:500 14.5px/20px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-when{flex:none;font-size:11.5px;color:var(--ink-muted)} .wc-item.unread .wc-when{color:var(--success,#1f9d55);font-weight:600}
.wc-prev{font-size:13px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-item.unread .wc-prev{color:var(--ink);font-weight:500}
.wc-item .unr{flex:none}
.wc-dd{flex:none;padding-right:8px}
.wc-chev{border:0;background:none;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--ink-muted);cursor:pointer}
.wc-chev svg{width:16px;height:16px} .wc-chev:hover{background:var(--surface-100);color:var(--ink)}
.wc-dd .dd-menu form{margin:0} .wc-dd .dd-menu button{width:100%}
.wc-empty{padding:24px 16px;text-align:center;color:var(--ink-muted);font-size:13px;margin:0}
.wc-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background-color:#efeef4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210' fill='none' stroke='%23d9d8e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 18h30a6 6 0 0 1 6 6v16a6 6 0 0 1-6 6H32l-8 7v-7h-4a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6z'/%3E%3Cpath d='M128 14c-9 0-16 7-16 16 0 12 16 26 16 26s16-14 16-26c0-9-7-16-16-16z'/%3E%3Ccircle cx='128' cy='30' r='5'/%3E%3Crect x='20' y='112' width='40' height='22' rx='3'/%3E%3Cpath d='M60 118h10l8 8v8H60'/%3E%3Ccircle cx='30' cy='138' r='5'/%3E%3Ccircle cx='68' cy='138' r='5'/%3E%3Crect x='118' y='100' width='26' height='42' rx='5'/%3E%3Cpath d='M128 136h6'/%3E%3Cpath d='M176 60l14 6-14 6-6 14-6-14-14-6 14-6 6-14z'/%3E%3Cpath d='M170 150a20 20 0 0 1 28 0M176 157a11 11 0 0 1 16 0'/%3E%3Ccircle cx='184' cy='165' r='2'/%3E%3Cpath d='M72 60v28M58 74h28'/%3E%3Ccircle cx='72' cy='74' r='10'/%3E%3Cpath d='M86 170l10 10 16-18'/%3E%3C/svg%3E");background-size:210px}
.wc-start{margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:20px}
.wc-bigic{width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 18px rgba(16,24,40,.08);color:#4a4d55}
.wc-bigic svg{width:50px;height:50px}
.wc-pill{background:#fff;border-radius:999px;padding:6px 16px;font:500 16px/22px var(--sans);color:var(--ink);box-shadow:0 2px 8px rgba(16,24,40,.06)}
.wc-th{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface-100);border-bottom:1px solid var(--border);min-height:64px}
.wc-th .wc-av{width:40px;height:40px}
.wc-msgs{flex:1;overflow-y:auto;padding:16px 6%;display:flex;flex-direction:column;gap:4px;background:none}
.wc-msgs .day{align-self:center;margin:10px 0}
.wc-msgs .day span{background:#fff;border-radius:8px;padding:4px 12px;font-size:12px;color:var(--ink-muted);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-hello{margin:auto;background:#fff;border-radius:8px;padding:8px 14px;color:var(--ink-muted);font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wb{display:flex;align-items:flex-end;gap:8px;max-width:72%}
.wb.me{align-self:flex-end;flex-direction:row-reverse}
.wb-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);display:grid;place-items:center;font:600 11px/1 var(--sans)}
.wb-b{position:relative;background:#fff;color:#1d1f24;border-radius:10px 10px 10px 2px;padding:6px 10px 18px;min-width:90px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wb.me .wb-b{background:#dcf2e6;border-radius:10px 10px 2px 10px}
.wb-n{display:block;font:600 12.5px/18px var(--sans);color:var(--brand)}
.wb-t{overflow-wrap:anywhere;line-height:20px;font-size:14px}
.wb-time{position:absolute;right:8px;bottom:3px;font-size:10.5px;color:#7b7f88}
.wb-att{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.wb-att .att.img img{max-width:240px;max-height:220px;border-radius:8px;display:block}
.wb-gone{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#7b7f88;font-style:italic;margin:2px 0} .wb-gone svg{width:15px;height:15px}
.wb .mention{background:color-mix(in srgb,var(--brand) 12%,transparent);border-radius:4px;padding:0 3px}
.wc-comp{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;background:var(--surface-100);border-top:1px solid var(--border)}
.wc-comp textarea{resize:none;min-height:42px;max-height:140px;border-radius:22px;padding:10px 16px}
.wc-attach{cursor:pointer;flex:none} .wc-send{flex:none;width:44px;height:42px;border-radius:50%;padding:0;justify-content:center}
.wc-files{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.wc-file{background:var(--surface-200);border-radius:6px;padding:2px 8px;font-size:12px} .wc-file i{color:var(--ink-muted);font-style:normal}
@media (max-width:860px){.wchat{grid-template-columns:minmax(0,1fr);height:calc(100vh - 120px)} .wchat .wc-main{display:none} .wchat.open .wc-main{display:flex} .wchat.open .wc-side{display:none} .wb{max-width:88%} .wc-msgs{padding:12px}}
@media (min-width:861px){.wc-th .menu-btn{display:none}}

/* ===================== dashboard (clean layout) ===================== */
.db-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:4px 0 16px}
.db-head h1{font:700 24px/30px var(--sans);margin:0;color:var(--ink)}
.db-head p{margin:4px 0 0;color:var(--ink-muted);font-size:14px}
.db-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.db-range .in.sm{width:auto}
.db-attn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.db-at{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--surface-100);border:1px solid var(--border);border-left:4px solid var(--ac);color:var(--ink);text-decoration:none;transition:box-shadow .15s,transform .15s}
.db-at:hover{box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.db-at .db-ic{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.db-at > span:last-child{display:flex;flex-direction:column;min-width:0}
.db-at b{font:700 22px/26px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-at b + span{font-size:13px;color:var(--ink-muted)}
.db-at.warn b + span{color:var(--danger);font-weight:500}
.db-ic{flex:none;display:grid;place-items:center} .db-ic svg{width:20px;height:20px}
.db-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px}
.db-kpi{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--surface-100);color:var(--ink);text-decoration:none;min-width:0}
.db-kpi:hover{background:var(--surface-200)}
.db-kpi-h{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--sans);color:var(--ink-muted)}
.db-kpi-h .db-ic{width:26px;height:26px;border-radius:7px;background:var(--ts);color:var(--tc)} .db-kpi-h .db-ic svg{width:15px;height:15px}
.db-kpi-v{font:700 22px/28px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-kpi-s{font-size:12.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-kpi.alert .db-kpi-s{color:var(--danger);font-weight:500}
.db-main{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.db-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.db-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.db-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px;align-items:start}
.db-main .card,.db-three .card{margin:0}
.db-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:12px}
.db-ch h2{font:600 15px/20px var(--sans);margin:0}
.db-ch div > span{display:block;font-size:12px;color:var(--ink-muted);margin-top:2px}
.db-ch a{display:inline-flex;align-items:center;gap:2px;font:500 12.5px/18px var(--sans);color:var(--brand);text-decoration:none;white-space:nowrap}
.db-ch a svg{width:14px;height:14px} .db-ch a:hover{text-decoration:underline}
.db-bar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:10px;align-items:center;margin:9px 0;font-size:13px}
.db-bar-l{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden} .db-bar-l em{font-style:normal;color:var(--ink-muted)}
.db-bar-t{height:8px;background:var(--surface-200);border-radius:999px;overflow:hidden} .db-bar-t span{display:block;height:100%;border-radius:999px}
.db-bar b{font-variant-numeric:tabular-nums;font-size:13px;text-align:right}
.db-empty{display:flex;align-items:center;gap:6px;color:var(--ink-muted);font-size:13px;margin:4px 0} .db-empty svg{width:16px;height:16px;color:var(--success,#1f9d55)}
.db-todo{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px} .db-todo:last-of-type{border-bottom:0}
.db-todo:hover{color:var(--brand)} .db-todo.done{color:var(--ink-muted);text-decoration:line-through} .db-todo svg{width:15px;height:15px;color:var(--success,#1f9d55)}
.db-pri{flex:none;width:9px;height:9px;border-radius:50%;background:var(--t-slate)} .db-pri.p-high{background:var(--t-red)} .db-pri.p-medium{background:var(--t-amber)} .db-pri.p-low{background:var(--t-green)}
.db-donut{display:flex;align-items:center;gap:18px;margin-bottom:6px} .db-donut > svg{width:120px;height:120px;flex:none}
.db-legend{display:flex;flex-direction:column;gap:8px;flex:1} .db-legend a{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;color:var(--ink)} .db-legend b{font-size:17px}
@media (max-width:1200px){.db-main{grid-template-columns:minmax(0,1fr)} .db-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.db-attn,.db-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .db-two,.db-three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.db-attn{grid-template-columns:minmax(0,1fr)} .db-head h1{font-size:20px}}

/* ===================== login: module hub illustration ===================== */
.hub{position:relative;overflow:hidden;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;
  background:radial-gradient(circle at 50% 55%,#c7bdf0 0,#ddd6f6 32%,#ece8fa 62%,#f6f4fd 100%);color:#2c2550}
.hub-top{text-align:center;max-width:520px;margin-bottom:6px;z-index:2}
.hub-top h2{font:800 clamp(24px,2.6vw,34px)/1.15 var(--sans);letter-spacing:-.02em;color:#2c2550;margin:0}
.hub-top h2 span{color:var(--brand)}
.hub-top p{margin:8px 0 0;color:#5b5480;font-size:14.5px}
.hub-stage{position:relative;width:min(100%,calc(100vh - 150px),760px);aspect-ratio:1;flex:none}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 0 0 12px rgba(255,255,255,.55),0 0 0 26px rgba(255,255,255,.22),0 18px 40px rgba(60,40,140,.25);z-index:2}
.hub-core img{width:72%;height:auto;object-fit:contain}
.hub-core span{font:700 clamp(8px,.85vw,11.5px)/1.1 var(--sans);color:#2c2550;letter-spacing:.02em;text-align:center}
.hub-n{position:absolute;--d:52px;transform:translate(-50%,calc(var(--d) / -2));display:flex;flex-direction:column;align-items:center;gap:5px;z-index:3;width:max-content;max-width:120px;text-align:center;animation:hubIn .6s ease-out both}
.hub-n.lg{--d:64px} .hub-n.sm{--d:44px}
.hub-b{width:var(--d);height:var(--d);border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--tc);box-shadow:0 0 0 5px rgba(255,255,255,.45),0 8px 20px rgba(60,40,140,.18);transition:transform .2s}
.hub-b svg{width:44%;height:44%}
.hub-n:hover .hub-b{transform:scale(1.08)}
.hub-n b{font:700 12.5px/1.2 var(--sans);color:#2c2550;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hub-n.lg b{font-size:14px} .hub-n.sm b{font-size:11.5px}
@keyframes hubIn{from{opacity:0;transform:translate(-50%,calc(var(--d) / -2)) scale(.6)}}
@media (prefers-reduced-motion:reduce){.hub-dots{display:none} .hub-n{animation:none}}
:root[data-theme="dark"] .hub{background:radial-gradient(circle at 50% 55%,#3a3270 0,#26214a 40%,#17152b 100%);color:#e9e6ff}
:root[data-theme="dark"] .hub-top h2,:root[data-theme="dark"] .hub-n b,:root[data-theme="dark"] .hub-core span{color:#efecff;text-shadow:none}
:root[data-theme="dark"] .hub-top p{color:#bdb6e6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hub{background:radial-gradient(circle at 50% 55%,#3a3270 0,#26214a 40%,#17152b 100%)}
  :root:not([data-theme="light"]) .hub-top h2,:root:not([data-theme="light"]) .hub-n b{color:#efecff;text-shadow:none} :root:not([data-theme="light"]) .hub-top p{color:#bdb6e6}}
@media (max-width:900px){.hub{min-height:0;padding:20px 12px 8px} .hub-stage{width:min(100%,520px)} .hub-n{--d:36px;max-width:84px} .hub-n.lg{--d:44px} .hub-n.sm{--d:30px} .hub-n b,.hub-n.lg b,.hub-n.sm b{font-size:10px} .hub-top p{display:none}}
@media (max-width:480px){.hub-n.sm b{display:none}}
/* login: social links */
.ls-social{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.ls-soc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:var(--surface-100);border:1px solid var(--border);color:var(--ink);text-decoration:none;font:600 11.5px/14px var(--sans);transition:transform .15s,border-color .15s}
.ls-soc svg{width:22px;height:22px;padding:5px;box-sizing:content-box;border-radius:50%;color:#fff}
.ls-soc:hover{transform:translateY(-2px)}
.s-wa svg{background:#25d366} .s-wa:hover{border-color:#25d366}
.s-fb svg{background:#1877f2} .s-fb:hover{border-color:#1877f2}
.s-ig svg{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)} .s-ig:hover{border-color:#d6249f}
.s-web svg{background:var(--brand-blue,#2f5bd3)} .s-web:hover{border-color:var(--brand-blue,#2f5bd3)}

@media (max-width:900px){.login2 .lg-side{order:-1} .login2 .hub{padding-top:28px}}

/* ===================== installer ===================== */
.install-card.ins{max-width:720px;width:100%}
.ins-steps{display:flex;gap:6px;list-style:none;padding:0;margin:12px 0 16px;flex-wrap:wrap}
.ins-steps li{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--sans);color:var(--ink-muted);padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface-200)}
.ins-steps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-100);font-weight:700;font-size:12px}
.ins-steps li.on{background:var(--brand-soft);color:var(--brand-strong)} .ins-steps li.on span{background:var(--brand);color:#fff}
.ins-steps li.done{color:var(--success,#1f9d55)} .ins-steps li.done span{background:var(--success,#1f9d55);color:#fff}
.ins-box{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:12px 0;background:var(--surface-100)}
.ins-box summary{cursor:pointer;display:flex;align-items:center;gap:8px}
.ins-box h2{font:700 17px/22px var(--sans);margin:0 0 10px}
.ins-checks{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.ins-checks li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.ins-checks li > span{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--sans);color:#fff;background:var(--success,#1f9d55)}
.ins-checks li.bad > span{background:var(--danger)} .ins-checks li.warn > span{background:var(--warning,#d97706)}
.ins-checks small{display:block;color:var(--ink-muted);margin-top:2px}
.ins-help{background:var(--surface-200);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.55;margin-bottom:12px}
.ins-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ins-pre{background:var(--surface-200);border-radius:8px;padding:10px 12px;font:13px/1.4 ui-monospace,Consolas,monospace;overflow-x:auto;user-select:all}
.ins-done h2{font:700 18px/24px var(--sans);margin:12px 0 6px} .ins-done h3{font:600 15px/20px var(--sans);margin:16px 0 4px}
@media (max-width:600px){.ins-g2{grid-template-columns:1fr}}