:root{
  /* Calendar timed-view hour row height. MUST stay in sync with the
     CAL_HOUR_PX JS constant (search CAL_HOUR_PX). Both define how many px
     equal one hour in day/week views; all event positioning, buffer bands,
     the now-line, and drag-snap math derive from it. */
  --cal-hour-px: 132px;
  /* Dark surfaces - sidebar, topbar, drawers, modals */
  --bg:#14102e;--bg-panel:#1d1840;--bg-card:#272150;--bg-card-hover:#322a63;
  /* Charcoal top bar, matches the mobile app header (mobile --charcoal) */
  --charcoal:#23212b;
  --sb-grad-top:#1c1640;--sb-grad-bot:#0d0a20;--sb-foot-bg:#0b0820;--sb-glass-border:rgba(199,184,255,.35);--sb-item-rest:rgba(255,255,255,.04);--sb-item-hover:rgba(255,255,255,.09);
  --bg-input:#181232;--purple:#6b21ea;--purple-light:#9b55ff;--purple-soft:#c7b8ff;--purple-dim:rgba(107,33,234,.12);
  --purple-border:rgba(107,33,234,.35);--orange:#ff4000;--orange-light:#ff6133;
  --orange-dim:rgba(255,64,0,.12);--orange-border:rgba(255,64,0,.35);
  --text:#ede8ff;--text-muted:#b8aee0;--text-dim:#6b5fa0;
  --border:rgba(255,255,255,.08);--radius:10px;--radius-lg:14px;
  --shadow:0 4px 32px rgba(0,0,0,.5);--shadow-p:0 0 24px rgba(107,33,234,.18);
  --sidebar-w:220px;
  /* Light surfaces - main content area */
  --main-bg:#f2f0f8;--main-card:#ffffff;--main-card-hover:#faf9ff;
  --main-border:rgba(107,33,234,.12);--main-text:#1a1030;--main-text-muted:#5a4d7a;
  --main-input:#ffffff;--main-input-border:rgba(107,33,234,.2);

  /* ============ ADDITIONS (May 12 2026) ============ */
  /* Brand interaction states */
  --purple-hover:#5816c2;--purple-active:#4a0fa3;
  --orange-hover:#e63a00;--orange-active:#cc3300;

  /* Semantic palette */
  --success:#10b981;--success-light:#34d399;--success-dim:rgba(52,211,153,.12);--success-text:#059669;
  --warning:#f59e0b;--warning-light:#fbbf24;--warning-dim:rgba(245,158,11,.12);--warning-text:#92400e;--warning-text-strong:#713f12;
  --danger:#ef4444;--danger-light:#f87171;--danger-dim:rgba(239,68,68,.12);--danger-text:#dc2626;
  --info:#3b82f6;--info-dim:rgba(59,130,246,.12);--info-text:#1e40af;

  /* Form states */
  --text-placeholder:#9ca3af;--text-disabled:#d0d0d8;
  --focus-ring:0 0 0 3px rgba(107,33,234,.25);

  /* Overlays + shadows */
  --overlay:rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 10px 25px rgba(0,0,0,.12);

  /* Radii */
  --radius-sm:4px;--radius-full:9999px;

  /* ============ ADDITIONS (June 9 2026) - Type, weight, line-height, space scales ============ */
  /* Codifies the implicit scales already in use (inline-style catalog, June 9). Numeric names map 1:1 to current px values: Phase 0 is a visual no-op. Off-grid drift (9/15/17px type, 3/5/9px space) is intentionally NOT tokenized; those sites stay inline for Phase 3 review. See MySpark-Inline-Style-Migration-Spec.md. */
  /* Type scale */
  --fs-10:10px;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;
  --fs-16:16px;--fs-18:18px;--fs-20:20px;--fs-22:22px;
  /* Weight scale */
  --fw-400:400;--fw-500:500;--fw-600:600;--fw-700:700;--fw-800:800;
  /* Line-height scale (numeric x10: --lh-15 = 1.5) */
  --lh-10:1;--lh-12:1.2;--lh-13:1.3;--lh-14:1.4;--lh-15:1.5;--lh-16:1.6;--lh-17:1.7;
  /* Space scale (2px grid) */
  --space-0:0;--space-2:2px;--space-4:4px;--space-6:6px;--space-8:8px;
  --space-10:10px;--space-12:12px;--space-14:14px;--space-16:16px;
  --space-18:18px;--space-20:20px;--space-24:24px;
  /* Light-surface system tokens (June 8 2026), see MySpark-Design-Tokens.docx */
  --divider:rgba(107,33,234,.18);          /* stronger than --main-border for section separation */
  --subnav-bar:#ddd8ee;                      /* tab bar band, clearly distinct from content by tone */
  --subnav-tab-hover:var(--main-text);       /* hover target for inactive tabs */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Lato,sans-serif;background:var(--main-bg);color:var(--main-text);font-size:14px;line-height:1.5}
.hidden{display:none!important}
#mkd-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:1500;display:flex;flex-direction:column;overflow:hidden}
/* Branded light theme + simplifications, scoped to the designer overlay only.
   GrapesJS sets its theme on :root, so we override the concrete classes directly
   for a deterministic light look that matches the app. */
#mkd-overlay{--gjs-main-font:Lato,Helvetica,sans-serif}
#mkd-overlay .gjs-one-bg,#mkd-overlay .gjs-pn-commands,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container,#mkd-overlay .gjs-blocks-c{background-color:var(--main-card)}
#mkd-overlay .gjs-pn-panel,#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-commands{box-shadow:none;border-color:var(--main-border)}
#mkd-overlay .gjs-two-color,#mkd-overlay .gjs-four-color,#mkd-overlay .gjs-sm-sector-label,#mkd-overlay .gjs-block-label,#mkd-overlay .gjs-clm-label{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn{color:var(--main-text-muted)}
#mkd-overlay .gjs-pn-btn:hover{color:var(--main-text)}
#mkd-overlay .gjs-pn-btn.gjs-pn-active{color:var(--purple)}
#mkd-overlay .gjs-three-bg{background-color:var(--purple)}
/* Section/category headers + form fields to light */
#mkd-overlay .gjs-block-category .gjs-title,#mkd-overlay .gjs-sm-sector-title,#mkd-overlay .gjs-trait-category .gjs-title{background-color:var(--main-bg);color:var(--main-text);border-bottom-color:var(--main-border)}
#mkd-overlay .gjs-field{background-color:var(--main-input);color:var(--main-text);border:1px solid var(--main-input-border)}
#mkd-overlay .gjs-field input,#mkd-overlay .gjs-field select,#mkd-overlay .gjs-field textarea{color:var(--main-text)}
/* Compact blocks: 3 per row, smaller icon + label */
#mkd-overlay .gjs-block{width:29%;min-width:0;min-height:58px;padding:.55em .4em;margin:6px 2% 4px;font-size:10px;border-color:var(--main-border);box-shadow:none}
#mkd-overlay .gjs-block:hover{box-shadow:0 0 0 2px var(--purple)}
#mkd-overlay .gjs-block-svg,#mkd-overlay .gjs-block svg{width:24px;height:24px}
#mkd-overlay .gjs-block-label{font-size:9px;font-family:Lato,sans-serif}
/* Style manager lives in the custom #mkd-style "Customize" sidebar, so hide
   GrapesJS's own right panel (empty now) and the class/state selector manager,
   which is not relevant for email editing. */
#mkd-overlay .gjs-pn-views,#mkd-overlay .gjs-pn-views-container{display:none!important}
#mkd-overlay .gjs-clm,#mkd-overlay .gjs-clm-tags,#mkd-overlay .gjs-sm-sels{display:none!important}
/* With the right panel gone, let the canvas fill its container (no blank gap). */
#mkd-overlay .gjs-cv-canvas{width:100%!important;right:0!important}
/* Style sectors always expanded (no collapsing) in the Customize sidebar; the
   headers are static labels — not clickable, no collapse chevron. */
#mkd-style .gjs-sm-sector .gjs-sm-properties{display:block!important}
#mkd-style .gjs-sm-title,#mkd-style .gjs-sm-sector-title{pointer-events:none;cursor:default}
#mkd-style .gjs-caret,#mkd-style [class*="caret"]{display:none!important}
/* Make the exit-preview control an obvious labeled button */
#mkd-overlay .gjs-off-prv{background:var(--orange);color:#fff;border-radius:6px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-md)}
#mkd-overlay .gjs-off-prv svg{width:18px;height:18px;fill:#fff}
#mkd-overlay .gjs-off-prv::after{content:'Exit preview';font-size:12px;font-weight:700;font-family:Lato,sans-serif}
/* Admin-only sidebar items. Body class is set/unset in applyRolePermissions.
   Belt-and-suspenders: even if JS gating misses, the CSS hides them. */
body:not(.role-admin) #sb-admin-label,
body:not(.role-admin) #sb-automations,
body:not(.role-admin) #sb-settings{display:none!important}
body:not(.subaccount-litbiz) #sb-agency-tools,
body:not(.agency-admin) #sb-agency-tools{display:none!important}
/* Role tier backstop — mirrors applyRolePermissions JS hides. */
body.role-user #sb-conversations,
body.role-user #sb-forms,
body.role-user #sb-media,
body.role-user #ppt-specialoffers{display:none!important}
body:not(.role-manager-up) #sb-reporting,
body:not(.role-manager-up) #sb-marketing,
body:not(.role-manager-up) #ppt-transactions,
body:not(.role-manager-up) #ppt-invoices,
body:not(.role-manager-up) #ppt-products{display:none!important}
/* ── AGENCY TOOLS PANEL ─────────────────────────────────── */
#panel-agency-tools{padding:24px 28px 60px}
.at-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-24px -28px 24px;flex-shrink:0;padding:0}
.at-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.at-tab:hover{color:var(--main-text)}
.at-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.at-tab-content{display:block}.at-placeholder{padding:60px 20px;text-align:center;color:var(--main-text-muted);font-size:15px;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.at-placeholder a{margin-top:16px;display:inline-block}
.at-sec-label{display:flex;align-items:center;gap:10px;margin:28px 0 14px}
.at-sec-label:first-child{margin-top:0}
.at-sec-label-text{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.12em}
.at-sec-label-line{flex:1;height:1px;background:var(--main-border)}

.at-tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1280px){.at-tools-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.at-tools-grid{grid-template-columns:repeat(2,1fr)}}
.at-tool-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--main-text);position:relative;overflow:hidden;transition:all .15s;cursor:pointer;box-shadow:var(--shadow-sm)}
.at-tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tc-color,var(--purple))}
.at-tool-card:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.at-tool-icon{font-size:22px;margin-bottom:2px}
.at-tool-name{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:800;color:var(--main-text);line-height:1.2}
.at-tool-desc{font-size:11px;color:var(--main-text-muted);line-height:1.5;flex:1}
.at-tool-btn{font-size:11px;font-weight:700;color:var(--tc-color,var(--purple));text-transform:uppercase;letter-spacing:.05em;margin-top:auto}
.at-tool-soon{position:absolute;top:8px;right:8px;background:var(--orange-dim);color:var(--orange);font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.06em}

.at-main-grid{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media(max-width:1100px){.at-main-grid{grid-template-columns:1fr}}
.at-main-left,.at-main-right{display:flex;flex-direction:column;gap:14px}

.at-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.at-card-hdr{padding:13px 16px;border-bottom:1px solid var(--main-border);display:flex;align-items:center;gap:10px;background:var(--main-bg)}
.at-card-hdr-title{font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.09em;flex:1}
.at-card-hdr-sub{font-size:11px;color:var(--main-text-muted)}
.at-card-body{padding:14px 16px}

.at-focus-input{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);padding:12px 14px;font-family:Lato,sans-serif;font-size:15px;font-weight:500;transition:border-color .15s,box-shadow .15s;outline:none}
.at-focus-input:focus{border-color:var(--purple);box-shadow:var(--focus-ring)}
.at-focus-sync{font-size:10px;color:var(--main-text-muted);margin-top:6px;text-align:right;height:14px}

.at-qa-list{display:flex;flex-direction:column;gap:6px}
.at-qa-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
@media(max-width:900px){.at-qa-list-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.at-qa-list-grid{grid-template-columns:1fr}}
.at-iframe-wrap{margin-top:8px}
.at-iframe-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.at-iframe{width:100%;height:calc(100vh - 140px);border:1px solid var(--main-border);border-radius:var(--radius-lg);background:#fff}
.at-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
@media(max-width:900px){.at-stats{grid-template-columns:repeat(2,1fr)}}
.at-stat{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.at-stat-val{font-family:'Exo 2',sans-serif;font-size:28px;font-weight:800;color:var(--main-text);line-height:1}
.at-stat-val.alert{color:var(--danger)}
.at-stat-val.warn{color:var(--warning)}
.at-stat-val.good{color:var(--success)}
.at-stat-val.brand{color:var(--purple)}
.at-stat-lbl{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-weight:600}
.at-stat-loading{color:var(--main-text-muted);opacity:.4}
.at-qa-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius);background:var(--main-bg);border:1px solid var(--main-border);text-decoration:none;color:var(--main-text);font-size:13px;font-weight:500;transition:all .15s}
.at-qa-btn:hover{border-color:var(--purple);background:var(--main-card-hover)}
.at-qa-icon{font-size:14px}
.at-qa-text{flex:1}
.at-qa-arrow{color:var(--main-text-muted);font-size:13px}

/* Service tier panels */
.at-svc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.at-svc-tab{padding:7px 14px;border-radius:var(--radius);background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text);font-family:'Exo 2',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.at-svc-tab:hover{border-color:var(--purple)}
.at-svc-tab.active{background:var(--purple);border-color:var(--purple);color:#fff}
.at-svc-panel{display:none}
.at-svc-panel.active{display:block}
.at-svc-panel-hdr{padding:14px 16px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none}
.at-svc-panel-name{font-family:'Exo 2',sans-serif;font-size:15px;font-weight:700;color:var(--main-text);margin-bottom:4px}
.at-svc-panel-desc{font-size:12px;color:var(--main-text-muted);line-height:1.5}
.at-tiers-grid{display:grid;gap:12px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.at-tiers-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:700px){.at-tiers-grid{grid-template-columns:1fr!important}}
.at-tier-card{padding:16px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);display:flex;flex-direction:column}
.at-tier-card.featured{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.at-tier-name{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.at-tier-price{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--purple);margin-bottom:6px;line-height:1}
.at-tier-price span{font-size:12px;font-weight:500;color:var(--main-text-muted);margin-left:2px}
.at-tier-note{font-size:11px;color:var(--main-text-muted);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--main-border);line-height:1.5}
.at-tier-features{list-style:none;padding:0;margin:0;font-size:12px;color:var(--main-text);line-height:1.7}
.at-tier-features li{padding-left:14px;position:relative}
.at-tier-features li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--purple)}

/* Accordion (SOP, Playbook) */
.at-acc-list{display:flex;flex-direction:column;gap:6px}
.at-acc-item{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:var(--main-bg)}
.at-acc-hdr{padding:11px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;transition:background .15s}
.at-acc-hdr:hover{background:var(--main-card-hover)}
.at-acc-num{width:26px;height:26px;border-radius:50%;background:var(--purple);color:#fff;font-family:'Exo 2',sans-serif;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.at-acc-title{flex:1;font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text)}
.at-acc-badge{font-size:10px;font-weight:600;color:var(--main-text-muted);background:var(--main-card);padding:3px 8px;border-radius:4px;border:1px solid var(--main-border)}
.at-acc-arrow{color:var(--main-text-muted);font-size:11px;transition:transform .15s}
.at-acc-item.open .at-acc-arrow{transform:rotate(180deg)}
.at-acc-body{display:none;padding:0 14px 14px 50px;font-size:13px;color:var(--main-text);line-height:1.6}
.at-acc-item.open .at-acc-body{display:block}
.at-acc-body ul{margin:6px 0 0;padding-left:20px}
.at-acc-body li{margin-bottom:4px}
.at-acc-note{margin-top:10px;padding:9px 12px;background:var(--orange-dim);border-left:3px solid var(--orange);border-radius:4px;font-size:12px;color:var(--main-text);line-height:1.5}

::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--purple-border);border-radius:3px}

/* AUTH */
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 25% 20%,rgba(107,33,234,.22) 0%,transparent 55%),
             radial-gradient(ellipse at 75% 80%,rgba(255,64,0,.12) 0%,transparent 50%),var(--bg)}
.auth-card{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  padding:44px 40px;width:380px;box-shadow:var(--shadow),var(--shadow-p)}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo img{width:80px;height:80px;object-fit:contain;border-radius:12px}
.auth-logo h1{font-family:Exo 2,sans-serif;font-size:22px;font-weight:800;margin-top:12px;color:#fff}
.auth-logo h1 span{color:var(--orange)}
.auth-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px}
.auth-error{background:var(--orange-dim);border:1px solid var(--orange-border);color:var(--orange-light);
  padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}

/* FORMS */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg-input);
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;
  font-family:Lato,sans-serif;font-size:14px;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.form-group textarea{resize:vertical;min-height:80px}
.form-group select option{background:var(--bg-card)}
.pkg-field{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;box-sizing:border-box}
.pkg-field:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.pkg-field option{background:var(--bg-card)}
.pkg-field-label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--main-text-muted);margin-bottom:4px}
/* Radio and checkbox inputs should NOT inherit the full-width style above */
.form-group input[type="radio"],.form-group input[type="checkbox"]{width:auto;padding:0}
/* Date/time pickers: render custom white icons so the picker is always
   visible regardless of how the browser handles color-scheme. The native
   indicator is made transparent but stays clickable on top. */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius);
  font-family:Lato,sans-serif;font-size:13px;font-weight:600;cursor:pointer;border:none;
  transition:all .18s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff}
.btn-action{background:var(--orange);color:#fff;border:none;border-radius:var(--radius)}
.btn-action:hover{background:var(--orange-hover)}
.btn-action:active{background:var(--orange-active)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-primary:hover{background:var(--orange-light)}
.btn-purple{background:var(--purple);color:#fff}.btn-purple:hover{background:var(--purple-light)}
.btn-ghost{background:transparent;color:var(--main-text-muted);border:1px solid var(--main-border)}
.btn-ghost:hover{background:var(--main-bg);color:var(--main-text);border-color:var(--purple-border)}
.btn-danger{background:rgba(239,68,68,.12);color:var(--danger-light);border:1px solid rgba(239,68,68,.22)}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:7px;background:transparent;border:1px solid var(--border);color:rgba(237,232,255,.82)}
.btn-icon:hover{background:var(--bg-card);color:var(--text)}
.btn-full{width:100%;justify-content:center}
/* Universal press feedback so every button responds the instant it is clicked,
   instead of feeling dead until the action renders. Composes with per-variant
   :active background rules. Disabled/busy buttons never press. */
.btn:active:not(:disabled):not(.btn-busy){transform:translateY(1px);filter:brightness(.94)}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* Busy state for async actions (Layer 3): block input, show a spinner, dim. The
   label is swapped to a "working" word by _withBusyBtn. */
.btn-busy{pointer-events:none;opacity:.8;cursor:progress}
.btn-spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:btnspin .6s linear infinite;flex:0 0 auto;vertical-align:middle}
@keyframes btnspin{to{transform:rotate(360deg)}}
.icon-btn-xs{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;
  display:inline-flex;align-items:center;border-radius:4px;transition:all .15s}
.icon-btn-xs:hover{color:var(--orange);background:var(--orange-dim)}
.icon-btn-xs svg{width:13px;height:13px}

/* APP LAYOUT */
#app{display:flex;height:100vh;overflow:hidden}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);flex-shrink:0;background:linear-gradient(180deg,var(--sb-grad-top) 0%,var(--bg-panel) 60%,var(--sb-grad-bot) 100%);
  border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}
.sb-logo{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.sb-logo img{width:32px;height:32px;object-fit:contain;border-radius:6px}
.sb-logo-text{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:800;color:#ffffff}
.sb-logo-text span{color:var(--orange)}
.sb-nav{flex:1;overflow-y:auto;padding:10px 8px}
.sb-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius);
  font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:all .18s;
  background:var(--sb-item-rest);border:1px solid transparent;width:100%;text-align:left;font-family:Lato,sans-serif;margin-bottom:3px}
.sb-item:hover{background:var(--sb-item-hover);color:var(--text)}
.sb-item.active{
  background:linear-gradient(180deg,rgba(155,85,255,.28) 0%,rgba(107,33,234,.20) 100%);
  color:var(--purple-soft);font-weight:600;position:relative;
  border:1px solid var(--sb-glass-border);
  box-shadow:0 2px 10px rgba(107,33,234,.30),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sb-item.active svg{color:var(--orange)}
.sb-item svg{width:18px;height:18px;flex-shrink:0;color:rgba(255,255,255,.72);transition:color .18s}
.sb-item:hover svg{color:var(--purple-light)}
.sb-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);padding:12px 12px 5px;margin-top:4px}
.sb-bottom{border-top:1px solid var(--border);padding:12px 8px;background:var(--sb-foot-bg)}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;transition:all .18s}
.sb-user:hover{background:var(--bg-card)}
.sb-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sb-user-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.85)}
.sb-user-role{font-size:10px;color:rgba(255,255,255,.5)}

/* TOP BAR */
#main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#top-bar{height:52px;background:var(--charcoal);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;position:relative}
/* Realtime inbound-message pill: absolutely centered in the top bar so it never
   reflows or overlaps the title/controls. Hidden = opacity:0 + no pointer events
   (stays in DOM, zero layout impact). Height stays within the 52px bar. */
.ws-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-6px);
  display:flex;align-items:center;gap:2px;max-width:440px;height:34px;padding:0 4px 0 12px;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:17px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:60;overflow:hidden;white-space:nowrap}
.ws-banner.ws-banner-show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) translateY(0)}
.ws-banner-main{display:flex;align-items:center;gap:4px;min-width:0;max-width:404px;
  background:none;border:none;cursor:pointer;padding:0;font-size:12.5px;color:var(--main-text);
  overflow:hidden;font-family:Lato,sans-serif}
.ws-banner-label{font-weight:700;color:var(--purple);flex:0 0 auto}
.ws-banner-name{font-weight:600;flex:0 0 auto}
.ws-banner-text{color:var(--main-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ws-banner-x{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--main-text-muted);
  font-size:17px;line-height:1;padding:2px 6px;margin-left:2px;border-radius:8px}
.ws-banner-x:hover{color:var(--main-text);background:var(--main-card-hover)}
.top-bar-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;flex:1;color:#ffffff}
.sync-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text-dim)}
.sync-dot.synced{background:var(--success-light)}.sync-dot.syncing{background:var(--orange);animation:blink 1s infinite}
.sync-dot.error{background:var(--danger-light)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* NOTIF BELL */
.notif-wrap{position:relative}
.notif-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  padding:7px;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;transition:all .18s}
.notif-btn:hover{background:var(--bg-card);color:var(--text)}
.notif-btn svg{width:16px;height:16px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#fff;
  font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}
.notif-drop{position:absolute;top:calc(100% + 8px);right:0;width:360px;
  background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);z-index:300;overflow:hidden}
.notif-drop-head{padding:12px 16px;border-bottom:1px solid var(--divider);
  display:flex;align-items:center;justify-content:space-between;color:var(--main-text)}
.notif-drop-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text)}
.notif-drop-list{max-height:320px;overflow-y:auto}
.notif-item{padding:11px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;
  transition:background .15s;display:flex;align-items:flex-start;gap:10px}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--main-card-hover)}
.notif-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ni-overdue{background:rgba(239,68,68,.2);color:var(--danger-light)}
.ni-due{background:var(--orange-dim);color:var(--orange)}
.ni-appt{background:var(--purple-dim);color:var(--purple-light)}
.notif-text{font-size:12px;color:var(--main-text);line-height:1.45}
.notif-sub{font-size:10px;color:var(--main-text);margin-top:2px}
.notif-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.notif-item .icon-btn-xs{color:var(--main-text-muted)}
.ni-event{background:var(--purple-dim);color:var(--purple-light)}
.ni-success{background:var(--success-dim);color:var(--success-light)}
.ni-info{background:var(--info-dim);color:var(--info)}
.ni-warn{background:var(--orange-dim);color:var(--orange)}
.ni-alert{background:var(--danger-dim);color:var(--danger-light)}
.notif-digest{padding:8px 14px;border-bottom:1px solid var(--divider);font-size:11px;
  color:var(--main-text-muted);line-height:1.5}
.notif-digest b{color:var(--main-text);font-weight:700}
.notif-digest .nd-alert b{color:var(--danger-light)}
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(243,128,32,.55)}70%{box-shadow:0 0 0 6px rgba(243,128,32,0)}100%{box-shadow:0 0 0 0 rgba(243,128,32,0)}}
.notif-badge:not(.hidden){animation:notifPulse 2s ease-out infinite}
.notif-time{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.85}
/* Collapsed category groups in the bell (e.g. "5 appointments tomorrow"). */
.notif-group{border-bottom:1px solid var(--main-border)}
.notif-group:last-child{border-bottom:none}
.notif-group-head{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer}
.notif-group-head:hover{background:var(--main-card-hover)}
.notif-group-head .flex-1{min-width:0}
.notif-group-count{font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--purple-dim);color:var(--purple);display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.notif-group-head .ng-chev{color:var(--main-text-muted);transition:transform .15s;flex-shrink:0}
.notif-group.open .ng-chev{transform:rotate(90deg)}
.notif-group-body{display:none}
.notif-group.open .notif-group-body{display:block;box-shadow:inset 2px 0 0 var(--purple-border)}
.notif-group-body .notif-item{padding-left:22px;background:var(--main-bg)}
/* Child of an event group: the header already said who it is from, so the
   timestamp leads and the repeated sentence sits under it, dimmed. */
.notif-repeat-sub{font-size:10px;color:var(--main-text-muted);margin-top:2px;opacity:.8}
.notif-actions{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--divider);position:sticky;top:0;background:var(--main-card);z-index:1}
.notif-actions .btn[disabled]{opacity:.4;cursor:default}

/* PANELS */
#panels{flex:1;overflow:hidden;position:relative;background:var(--main-bg)}
.panel{position:absolute;inset:0;overflow-y:auto;padding:22px 24px;background:var(--main-bg);color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --border:var(--main-border);
}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.page-title{font-family:Exo 2,sans-serif;font-size:20px;font-weight:700}
.page-subtitle{font-size:12px;color:var(--main-text-muted);margin-top:2px}

/* DASHBOARD */
.dash-greeting{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.dash-greeting h2{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;margin-bottom:0;color:var(--main-text)}
.dash-greeting h2 span{color:var(--orange)}
.dash-datetime{font-size:13px;color:var(--main-text-muted)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.acct-row{transition:border-color .12s ease,box-shadow .12s ease}
.acct-row:hover{border-color:var(--purple);box-shadow:0 4px 16px rgba(107,33,234,.13)}
.acct-row-main{cursor:pointer}
.acct-stat{text-align:left}
.acct-stat .n{font-family:Exo 2,sans-serif;font-weight:800;line-height:1;font-size:18px}
.acct-stat .l{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted);margin-top:3px;white-space:nowrap}
.acct-chev{display:inline-flex;align-items:center;color:var(--main-text-muted);transition:transform .18s ease;margin-left:2px}
.acct-expand{border-top:1px dashed var(--main-border);padding:12px 16px;align-items:center;gap:8px;flex-wrap:wrap;background:var(--main-card-hover);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.acct-expand .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:700;margin-right:4px}
.stat-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:14px 16px;border-top:2px solid var(--purple);box-shadow:0 2px 12px rgba(107,33,234,.07)}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);font-weight:600;margin-bottom:4px}
.stat-val{font-family:'Exo 2',sans-serif;font-size:24px;font-weight:800;color:var(--main-text)}
.dash-grid{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
.dash-grid-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-grid-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-card-fixed{display:flex;flex-direction:column;height:280px}
.dash-card-fixed .dash-scroll-list{flex:1;overflow-y:auto}
.dash-card-activity{display:flex;flex-direction:column;height:280px}
.dash-card-activity .dash-scroll-list{flex:1;overflow-y:auto}
#dash-revenue-card #dash-revenue-svg{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#dash-revenue-card #dash-revenue-svg svg{width:100%;height:100%}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dash-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.dash-card-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.dash-card-title-row .dash-card-title{margin-bottom:0}
.dash-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.dash-card-title svg{width:14px;height:14px;color:var(--orange)}
.dash-scroll-list{max-height:340px;overflow-y:auto;padding-right:4px}
.dash-scroll-list::-webkit-scrollbar{width:6px}
.dash-scroll-list::-webkit-scrollbar-thumb{background:var(--main-border);border-radius:3px}
.dash-scope-pill{display:inline-flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:999px;padding:2px;font-size:11px;font-weight:600}
.dash-scope-pill button{background:transparent;border:none;color:var(--main-text-muted);padding:3px 10px;border-radius:999px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit}
.dash-scope-pill button.active{background:var(--purple);color:#fff}

/* Hero card: today at a glance */
.dash-hero{background:linear-gradient(135deg,rgba(107,33,234,.18) 0%,rgba(255,64,0,.10) 100%);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;overflow:hidden;transition:background .8s ease}
.dash-hero-block{display:flex;flex-direction:column;gap:4px;min-width:120px}
.dash-hero-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.dash-hero-val{font-family:'Exo 2',sans-serif;font-size:22px;font-weight:800;color:var(--main-text);line-height:1.1}
.dash-hero-sub{font-size:11px;color:var(--main-text-muted)}
/* Time-of-day scenes behind the dashboard hero. Each daypart paints an
   illustrated SVG (self-contained data URI) under a left-weighted white scrim
   so the stats stay readable. Daypart set by _dashDaypart() on #dash-hero. */
.dash-hero[data-daypart] .dash-hero-val{text-shadow:0 1px 2px rgba(255,255,255,.8)}
.dash-hero[data-daypart] .dash-hero-label,.dash-hero[data-daypart] .dash-hero-sub{text-shadow:0 1px 1px rgba(255,255,255,.6)}
.dash-hero[data-daypart="dawn"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNhZWJmZTgnLz48c3RvcCBvZmZzZXQ9Jy41NScgc3RvcC1jb2xvcj0nI2U2YzNkNicvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmZDdhZCcvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdnbG93JyBjeD0nLjUnIGN5PScuNScgcj0nLjUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZjRkNicvPjxzdG9wIG9mZnNldD0nLjQ1JyBzdG9wLWNvbG9yPScjZmZkMzlhJyBzdG9wLW9wYWNpdHk9Jy45Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmZkMzlhJyBzdG9wLW9wYWNpdHk9JzAnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0nODAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0ndXJsKCNza3kpJy8+PGNpcmNsZSBjeD0nNTY1JyBjeT0nMTU4JyByPScxMzAnIGZpbGw9J3VybCgjZ2xvdyknLz48Y2lyY2xlIGN4PSc1NjUnIGN5PScxNTgnIHI9JzQyJyBmaWxsPScjZmZmMWQyJy8+PGcgZmlsbD0nI2Y0YzlkNicgb3BhY2l0eT0nLjcnPjxlbGxpcHNlIGN4PScyNTAnIGN5PSc2MCcgcng9JzYwJyByeT0nMTEnLz48ZWxsaXBzZSBjeD0nNjYwJyBjeT0nNDUnIHJ4PSc0OCcgcnk9JzknLz48L2c+PHBhdGggZD0nTTAgMTY4IFExNjAgMTM4IDMzMCAxNjAgVDgwMCAxNTQgVjIwMCBIMCBaJyBmaWxsPScjYTc5Y2NkJyBvcGFjaXR5PScuNTUnLz48cGF0aCBkPSdNMCAxODIgUTIxMCAxNTYgNDQwIDE3OCBUODAwIDE3NCBWMjAwIEgwIFonIGZpbGw9JyM4Mjc3YjUnIG9wYWNpdHk9Jy42NScvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="morning"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyM3OWI2ZWYnLz48c3RvcCBvZmZzZXQ9Jy42JyBzdG9wLWNvbG9yPScjY2ZlN2ZiJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmRmMGM5Jy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2dsb3cnIGN4PScuNScgY3k9Jy41JyByPScuNSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZmZmYmU4Jy8+PHN0b3Agb2Zmc2V0PScuNCcgc3RvcC1jb2xvcj0nI2ZmZTc5YScgc3RvcC1vcGFjaXR5PScuOTUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNmZmU3OWEnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PGZpbHRlciBpZD0nc29mdCcgeD0nLTMwJScgeT0nLTMwJScgd2lkdGg9JzE2MCUnIGhlaWdodD0nMTYwJSc+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0nMy4yJy8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc2MzAnIGN5PSc3NCcgcj0nOTUnIGZpbGw9J3VybCgjZ2xvdyknLz48Y2lyY2xlIGN4PSc2MzAnIGN5PSc3NCcgcj0nMzAnIGZpbGw9JyNmZmY2Y2YnLz48ZyBmaWxsPScjZmZmZmZmJyBvcGFjaXR5PScuODInIGZpbHRlcj0ndXJsKCNzb2Z0KSc+PGc+PGVsbGlwc2UgY3g9JzIzMicgY3k9Jzg0JyByeD0nNjInIHJ5PScxMCcvPjxjaXJjbGUgY3g9JzE5OCcgY3k9JzgwJyByPScxNScvPjxjaXJjbGUgY3g9JzIyMicgY3k9JzcyJyByPScyMicvPjxjaXJjbGUgY3g9JzI1MCcgY3k9Jzc2JyByPScxOCcvPjxjaXJjbGUgY3g9JzI3MicgY3k9JzgyJyByPScxNCcvPjwvZz48Zz48ZWxsaXBzZSBjeD0nNDk4JyBjeT0nMTEyJyByeD0nNDQnIHJ5PSc4Jy8+PGNpcmNsZSBjeD0nNDgwJyBjeT0nMTA4JyByPScxMycvPjxjaXJjbGUgY3g9JzUwMCcgY3k9JzEwMicgcj0nMTgnLz48Y2lyY2xlIGN4PSc1MjAnIGN5PScxMDgnIHI9JzEzJy8+PC9nPjwvZz48cGF0aCBkPSdNMCAxNjggUTE3MCAxNDIgMzUwIDE2MiBUODAwIDE1NiBWMjAwIEgwIFonIGZpbGw9JyM4ZmMwN2EnIG9wYWNpdHk9Jy42Jy8+PHBhdGggZD0nTTAgMTg0IFEyMjAgMTYwIDQ3MCAxODAgVDgwMCAxNzYgVjIwMCBIMCBaJyBmaWxsPScjNmJhODVjJyBvcGFjaXR5PScuNycvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="midday"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMzZjkyZTQnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNhN2Q1ZjYnLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nZ2xvdycgY3g9Jy41JyBjeT0nLjUnIHI9Jy41Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmZmZlZjInLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjZmZmMmIwJyBzdG9wLW9wYWNpdHk9Jy45Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmZmMmIwJyBzdG9wLW9wYWNpdHk9JzAnLz48L3JhZGlhbEdyYWRpZW50PjxmaWx0ZXIgaWQ9J3NvZnQnIHg9Jy0yMCUnIHk9Jy0yMCUnIHdpZHRoPScxNDAlJyBoZWlnaHQ9JzE0MCUnPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249JzQnLz48L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9JzgwMCcgaGVpZ2h0PScyMDAnIGZpbGw9J3VybCgjc2t5KScvPjxjaXJjbGUgY3g9JzY5MCcgY3k9JzQ2JyByPSc5MCcgZmlsbD0ndXJsKCNnbG93KScvPjxjaXJjbGUgY3g9JzY5MCcgY3k9JzQ2JyByPScyNicgZmlsbD0nI2ZmZmJkOCcvPjxnIGZpbGw9JyNmZmZmZmYnIG9wYWNpdHk9Jy41JyBmaWx0ZXI9J3VybCgjc29mdCknPjxlbGxpcHNlIGN4PScyMTAnIGN5PSc3OCcgcng9JzYyJyByeT0nMjInLz48ZWxsaXBzZSBjeD0nMjg1JyBjeT0nNjgnIHJ4PSc0Nicgcnk9JzE4Jy8+PGVsbGlwc2UgY3g9JzE1MCcgY3k9Jzg2JyByeD0nNDAnIHJ5PScxNicvPjxlbGxpcHNlIGN4PSc0NzAnIGN5PScxMjAnIHJ4PSc1Micgcnk9JzE4Jy8+PGVsbGlwc2UgY3g9JzUzMCcgY3k9JzExMicgcng9JzM4JyByeT0nMTUnLz48L2c+PHBhdGggZD0nTTAgMTcwIFExODAgMTQ2IDM3MCAxNjQgVDgwMCAxNTggVjIwMCBIMCBaJyBmaWxsPScjN2JiODY3JyBvcGFjaXR5PScuNicvPjxwYXRoIGQ9J00wIDE4NiBRMjMwIDE2MiA0ODAgMTgyIFQ4MDAgMTc4IFYyMDAgSDAgWicgZmlsbD0nIzVjOWU0ZCcgb3BhY2l0eT0nLjcnLz48L3N2Zz4K") center/cover no-repeat}
.dash-hero[data-daypart="afternoon"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNjN2E2ZDInLz48c3RvcCBvZmZzZXQ9Jy40NScgc3RvcC1jb2xvcj0nI2ZmY2Y5NCcvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmZTNhZCcvPjwvbGluZWFyR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdnbG93JyBjeD0nLjUnIGN5PScuNScgcj0nLjUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZjJjZicvPjxzdG9wIG9mZnNldD0nLjQ1JyBzdG9wLWNvbG9yPScjZmZjMDZhJyBzdG9wLW9wYWNpdHk9Jy45NScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2ZmYzA2YScgc3RvcC1vcGFjaXR5PScwJy8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9JzgwMCcgaGVpZ2h0PScyMDAnIGZpbGw9J3VybCgjc2t5KScvPjxjaXJjbGUgY3g9JzYxMCcgY3k9JzEyMCcgcj0nMTIwJyBmaWxsPSd1cmwoI2dsb3cpJy8+PGNpcmNsZSBjeD0nNjEwJyBjeT0nMTIwJyByPSc0NCcgZmlsbD0nI2ZmZTFhNicvPjxnIGZpbGw9JyNmZmQ5YWQnIG9wYWNpdHk9Jy44Jz48ZWxsaXBzZSBjeD0nMjUwJyBjeT0nNjQnIHJ4PSc1OCcgcnk9JzE1Jy8+PGVsbGlwc2UgY3g9JzE3MCcgY3k9JzcyJyByeD0nNDAnIHJ5PScxMicvPjxlbGxpcHNlIGN4PSc3MDAnIGN5PSc1Micgcng9JzQ0JyByeT0nMTInLz48L2c+PHBhdGggZD0nTTAgMTcwIFExNzAgMTQ0IDM2MCAxNjQgVDgwMCAxNTggVjIwMCBIMCBaJyBmaWxsPScjYzk4ZjVjJyBvcGFjaXR5PScuNTUnLz48cGF0aCBkPSdNMCAxODUgUTIyMCAxNjAgNDcwIDE4MSBUODAwIDE3NiBWMjAwIEgwIFonIGZpbGw9JyM5YzZmNDUnIG9wYWNpdHk9Jy42NScvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="evening"]{background:linear-gradient(90deg,rgba(255,255,255,.87) 0%,rgba(255,255,255,.64) 46%,rgba(255,255,255,.44) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMzYTJjNjYnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjYjA1MTdlJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmY4YTU0Jy8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9J2dsb3cnIGN4PScuNScgY3k9Jy41JyByPScuNSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZmZlOWMyJy8+PHN0b3Agb2Zmc2V0PScuNCcgc3RvcC1jb2xvcj0nI2ZmOTU1YScgc3RvcC1vcGFjaXR5PScuOTUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNmZjk1NWEnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc1NjAnIGN5PScxNjgnIHI9JzE0MCcgZmlsbD0ndXJsKCNnbG93KScvPjxjaXJjbGUgY3g9JzU2MCcgY3k9JzE2OCcgcj0nNTInIGZpbGw9JyNmZmQzOWEnLz48ZyBmaWxsPScjNWEzZjc0JyBvcGFjaXR5PScuNTUnPjxlbGxpcHNlIGN4PScyNTAnIGN5PSc1OCcgcng9JzYwJyByeT0nMTAnLz48ZWxsaXBzZSBjeD0nNjgwJyBjeT0nNDInIHJ4PSc0Nicgcnk9JzgnLz48L2c+PHBhdGggZD0nTTAgMTYyIFExNTAgMTMyIDMyMCAxNTQgVDgwMCAxNDggVjIwMCBIMCBaJyBmaWxsPScjM2IyZjVjJyBvcGFjaXR5PScuOCcvPjxwYXRoIGQ9J00wIDE4MCBRMjEwIDE1MiA0NDAgMTc2IFQ4MDAgMTcyIFYyMDAgSDAgWicgZmlsbD0nIzI0MWQ0MCcvPjwvc3ZnPgo=") center/cover no-repeat}
.dash-hero[data-daypart="night"]{background:linear-gradient(90deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.34) 100%),url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4MDAgMjAwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSd4TWlkWU1pZCBzbGljZSc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdza3knIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyMwZDEyMzgnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyODI5NWYnLz48L2xpbmVhckdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nbW9vbicgY3g9Jy41JyBjeT0nLjUnIHI9Jy41Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmM2Y1ZmYnLz48c3RvcCBvZmZzZXQ9Jy4zNScgc3RvcC1jb2xvcj0nI2U3ZWJmZicgc3RvcC1vcGFjaXR5PScuODUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNlN2ViZmYnIHN0b3Atb3BhY2l0eT0nMCcvPjwvcmFkaWFsR3JhZGllbnQ+PHJhZGlhbEdyYWRpZW50IGlkPSdtZmFjZScgY3g9Jy40JyBjeT0nLjM2JyByPScuNzUnPjxzdG9wIG9mZnNldD0nMCcgc3RvcC1jb2xvcj0nI2ZmZmZmZicvPjxzdG9wIG9mZnNldD0nLjYnIHN0b3AtY29sb3I9JyNlZWYxZmInLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNjOWNmZTgnLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0nY3JhdGVyJyBjeD0nLjQnIGN5PScuMzQnIHI9Jy43Jz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNhOWIxZDMnLz48c3RvcCBvZmZzZXQ9Jy42NScgc3RvcC1jb2xvcj0nI2MzY2FlNScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI2U0ZThmNicvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSc4MDAnIGhlaWdodD0nMjAwJyBmaWxsPSd1cmwoI3NreSknLz48Y2lyY2xlIGN4PSc2NTAnIGN5PSc2Nicgcj0nOTAnIGZpbGw9J3VybCgjbW9vbiknLz48Y2lyY2xlIGN4PSc2NTAnIGN5PSc2Nicgcj0nMzgnIGZpbGw9J3VybCgjbWZhY2UpJy8+PGcgZmlsbD0ndXJsKCNjcmF0ZXIpJyBvcGFjaXR5PScuNjUnPjxjaXJjbGUgY3g9JzYzNicgY3k9JzU1JyByPSc3Jy8+PGNpcmNsZSBjeD0nNjY1JyBjeT0nNTInIHI9JzQuNScvPjxjaXJjbGUgY3g9JzY3MicgY3k9JzcxJyByPSc1LjUnLz48Y2lyY2xlIGN4PSc2NDYnIGN5PSc4Micgcj0nNScvPjxjaXJjbGUgY3g9JzYyNScgY3k9JzcwJyByPSczLjUnLz48Y2lyY2xlIGN4PSc2NTcnIGN5PSc2OCcgcj0nMi42Jy8+PGNpcmNsZSBjeD0nNjU5JyBjeT0nODYnIHI9JzIuOCcvPjwvZz48ZyBmaWxsPScjZmZmZmZmJz48Y2lyY2xlIGN4PScxMjAnIGN5PSc1MCcgcj0nMS42JyBvcGFjaXR5PScuOScvPjxjaXJjbGUgY3g9JzIxMCcgY3k9JzM0JyByPScxLjInIG9wYWNpdHk9Jy43Jy8+PGNpcmNsZSBjeD0nMzAwJyBjeT0nNzAnIHI9JzEuOCcgb3BhY2l0eT0nLjk1Jy8+PGNpcmNsZSBjeD0nMzgwJyBjeT0nNDAnIHI9JzEuMScgb3BhY2l0eT0nLjYnLz48Y2lyY2xlIGN4PSc0NzAnIGN5PSc3OCcgcj0nMS41JyBvcGFjaXR5PScuODUnLz48Y2lyY2xlIGN4PScxNTAnIGN5PSc5Nicgcj0nMS4yJyBvcGFjaXR5PScuNycvPjxjaXJjbGUgY3g9JzUyMCcgY3k9JzM2JyByPScxLjMnIG9wYWNpdHk9Jy43NScvPjxjaXJjbGUgY3g9JzYwJyBjeT0nNzgnIHI9JzEuNCcgb3BhY2l0eT0nLjgnLz48Y2lyY2xlIGN4PScyNTAnIGN5PScxMTInIHI9JzEuMScgb3BhY2l0eT0nLjYnLz48Y2lyY2xlIGN4PSc0MjAnIGN5PScxMTAnIHI9JzEuNScgb3BhY2l0eT0nLjgnLz48Y2lyY2xlIGN4PSc3NDAnIGN5PScxMjAnIHI9JzEuMycgb3BhY2l0eT0nLjc1Jy8+PC9nPjxwYXRoIGQ9J00wIDE1MCBMMTIwIDEwOCBMMjMwIDE0OCBMMzQwIDEwMCBMNDcwIDE1MCBMNTYwIDExOCBMNjgwIDE1MiBMODAwIDExNiBWMjAwIEgwIFonIGZpbGw9JyMwYTBjMmEnIG9wYWNpdHk9Jy45Jy8+PC9zdmc+Cg==") center/cover no-repeat}

/* Quick action buttons */
.dash-quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dash-qa-btn{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--main-text);text-align:left}
.dash-qa-btn:hover{border-color:var(--orange);background:var(--main-card-hover);transform:translateY(-1px)}
.dash-qa-btn svg{width:18px;height:18px;color:var(--orange);flex-shrink:0}
.dash-qa-btn-label{font-size:13px;font-weight:600}
@media (max-width:780px){.dash-quick-actions{grid-template-columns:repeat(2,1fr);gap:8px}}

/* Activity feed */
.dash-act-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.dash-act-row:last-child{border-bottom:none}
.dash-act-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(107,33,234,.18)}
.dash-act-icon svg{width:12px;height:12px;color:#a855f7}
.dash-act-text{font-size:12px;color:var(--main-text);line-height:1.4}
.dash-act-when{font-size:10px;color:var(--main-text-muted);margin-top:2px}

.dash-appt-row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.dash-appt-row:last-child{border-bottom:none}
.dash-appt-time{font-family:Exo 2,sans-serif;font-size:12px;font-weight:700;min-width:52px;flex-shrink:0;color:var(--purple)}
.dash-appt-title{font-size:13px;font-weight:600;color:var(--main-text)}
.dash-appt-sub{font-size:11px;color:var(--main-text-muted)}
.dash-task-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border)}
.dash-task-row:last-child{border-bottom:none}
.dash-task-chk{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:2px;cursor:pointer;transition:border-color .18s}
.dash-task-chk:hover{border-color:var(--orange)}
.dash-task-name{font-size:13px;font-weight:500;color:var(--main-text)}
.dash-task-due{font-size:11px;color:var(--main-text-muted)}.dash-task-due.overdue{color:var(--danger-light)}.dash-task-due.due-today{color:var(--warning-light)}
.dash-empty{font-size:13px;color:var(--main-text-muted);padding:12px 0;text-align:center}

/* CONTACT TABLE */
.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.search-box{position:relative;flex:1;min-width:160px;max-width:260px}
.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.search-box input{padding-left:32px;background:var(--main-input);border:1px solid var(--main-input-border);
  border-radius:var(--radius);color:var(--text);height:36px;width:100%;
  font-family:Lato,sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--purple)}
.filter-sel{background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:0 10px;height:36px;font-family:Lato,sans-serif;font-size:13px;outline:none;cursor:pointer}
.filter-sel:focus{border-color:var(--purple)}
.filter-sel option{background:var(--main-card);color:var(--main-text)}
.tbl-wrap{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.ct-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ct-table thead{background:var(--main-bg)}
.ct-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);cursor:pointer;
  white-space:nowrap;user-select:none;border-bottom:1px solid var(--main-border)}
.ct-table th:hover{color:var(--main-text)}
.ct-table th.sort-asc::after{content:' \2191'}
.ct-table th.sort-desc::after{content:' \2193'}
.ct-table td{padding:11px 14px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-table td.ct-tags-cell{white-space:normal;overflow:visible}
.ct-table tbody tr:last-child td{border-bottom:none}
.ct-table tbody tr:hover{background:#f5f3ff;cursor:pointer}
.ct-name-cell{display:flex;align-items:center;gap:10px;color:var(--main-text);min-width:0}
.ct-name-cell>div:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.ct-tags{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tag-pill{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600}
.ct-tagpill{display:inline-flex;align-items:center;gap:3px}
.ct-tag-x{background:none;border:none;cursor:pointer;font-size:12px;line-height:1;padding:0;margin-left:1px;color:inherit;opacity:.55}
.ct-tag-x:hover{opacity:1}
.ct-tag-add{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--main-border);background:none;color:var(--main-text-muted);cursor:pointer;font-size:13px;line-height:1;padding:0}
.ct-tag-add:hover{color:var(--purple);border-color:var(--purple)}
.ct-tagmenu{position:fixed;z-index:2000;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(107,33,234,.18);padding:6px;width:200px;max-height:280px;overflow:auto}
.ct-tagmenu input{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:6px;border:1px solid var(--main-border);border-radius:var(--radius-sm);font-size:12px;background:var(--main-bg);color:var(--main-text)}
.ct-tagmenu-opt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--main-text)}
.ct-tagmenu-opt:hover{background:var(--main-bg)}
.ct-tagmenu-empty{padding:8px;font-size:12px;color:var(--main-text-muted)}
.type-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.type-lead{background:rgba(255,64,0,.15);color:#ff6133}
.type-client{background:rgba(107,33,234,.2);color:#a855f7}
.type-partner{background:rgba(16,185,129,.15);color:var(--success-light)}
.type-employee{background:rgba(245,158,11,.15);color:var(--warning-light)}
.type-lapsed{background:rgba(156,163,175,.18);color:#9ca3af}
.type-none{background:rgba(156,163,175,.18);color:#9ca3af}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success-light);display:inline-block;margin-right:4px}
.status-dot.inactive{background:var(--text-dim)}
/* In the contacts table the dot is the whole cell: center it and drop the
   drawer-context right margin so it lines up with the checkbox. */
.ct-table td .status-dot{vertical-align:middle;margin-right:0}
/* Zero the checkbox's default top margin so it centers on the same line as
   the status dot (browsers add a few px of top margin by default). */
.ct-table .cb-col input{vertical-align:middle;margin:0}
/* The actions cell holds just the edit icon; don't let the generic cell
   ellipsis clip it into a stray "..". */
.ct-table td.ct-act{overflow:visible;text-overflow:clip;white-space:nowrap;text-align:right;padding-right:22px}

/* CALENDAR */
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.cal-toolbar-left{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.cal-big-month{font-family:'Exo 2',sans-serif;font-size:38px;font-weight:800;color:var(--main-text);line-height:0.9;letter-spacing:-0.5px;text-transform:capitalize}
@media (max-width:600px){.cal-big-month{font-size:26px}}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-period{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;width:280px;white-space:nowrap;text-align:center;color:var(--main-text)}
.view-toggle{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden}
.view-btn{padding:6px 14px;font-size:12px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;background:transparent;border:none;font-family:Lato,sans-serif;transition:all .18s}
.view-btn:hover{color:var(--text)}.view-btn.active{background:var(--purple);color:#fff}
.svc-list-row:hover{background:var(--main-bg)}
.svc-list-row:last-child{border-bottom:none !important}
.svc-detail-tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s;margin-bottom:-1px;font-family:Lato,sans-serif}
.svc-detail-tab:hover{color:var(--main-text)}
.svc-detail-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Reusable: white card content inside dark modal context. */
/* Use on any element where bg=main-card so descendants get correct text color. */
.light-card{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:6px}
.light-card-muted{color:var(--main-text-muted)}
.light-card.clickable{cursor:pointer;transition:background .1s}
.light-card.clickable:hover{background:var(--main-bg)}
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--main-text-muted)}
.legend-dot{width:10px;height:10px;border-radius:50%}
.cal-month{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 12px rgba(107,33,234,.07);min-height:calc(100vh - 260px);display:flex;flex-direction:column}
.cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.cal-dow-row div{text-align:center;padding:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--main-text-muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);flex:1;grid-auto-rows:1fr}
.cal-cell{min-height:80px;border-right:1px solid var(--main-border);border-bottom:1px solid var(--main-border);padding:6px;cursor:pointer;transition:background .12s}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:#f5f3ff}
.cal-cell.other-month .cal-day-num{opacity:.25}
.cal-cell.today .cal-day-num{background:var(--purple);color:#fff;border-radius:50%}
.cal-cell.cal-blackout{background:repeating-linear-gradient(45deg,rgba(248,113,113,.04),rgba(248,113,113,.04) 10px,rgba(248,113,113,.09) 10px,rgba(248,113,113,.09) 20px)}
.cal-day-num{font-size:12px;font-weight:600;margin-bottom:3px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--main-text)}
.cal-ev{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}
.cal-ev:hover{filter:brightness(1.2)}
.cal-ev-task{background:var(--orange-dim);color:var(--orange)}
.cal-more{font-size:10px;color:var(--text-muted);padding:1px 4px;cursor:pointer}
.cal-timed{display:flex;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:auto;box-shadow:0 2px 12px rgba(107,33,234,.07);height:calc(100vh - 260px)}
/* cal-timed viewport fill: day + week match month's responsive height. The box
   fills the viewport and reflows on resize. Flex children (time gutter + day
   columns) stretch to the box height so their backgrounds extend cleanly below
   the last hour. The .tgrid-row 68px height is NOT changed, so all event
   positioning, buffer bands, and drag math stay pixel-exact. */
.cal-timed > div{min-height:max-content}
.time-col{width:52px;flex-shrink:0;background:var(--main-bg);border-right:1px solid var(--main-border);display:flex;flex-direction:column;position:sticky;left:0;z-index:3}
.time-col-head{min-height:56px;border-bottom:1px solid var(--main-border);flex-shrink:0;position:sticky;top:0;z-index:6;background:var(--main-bg)}
.time-col-allday{height:28px;border-bottom:1px solid var(--main-border);font-size:9px;color:var(--text-dim);display:flex;align-items:center;justify-content:flex-end;padding:0 6px;background:var(--main-bg);flex-shrink:0;position:sticky;top:56px;z-index:6}
.day-col-allday{min-height:28px;border-bottom:1px solid var(--main-border);padding:3px 5px;display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:var(--main-card);flex-shrink:0;position:sticky;top:56px;z-index:2}
.cal-allday-chip{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.02em}
.time-slot{height:var(--cal-hour-px);padding:3px 5px;font-size:10px;color:var(--main-text-muted);
  border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:flex-end;flex-shrink:0;position:relative}
/* Quarter-hour increment ticks on the right edge of the time gutter (day/week).
   The half-hour tick is longer and stronger than the :15/:45 ticks. */
.ts-tick{position:absolute;right:0;border-top:1px solid var(--main-text-muted);pointer-events:none}
.ts-q1{top:25%;width:7px;opacity:.45}
.ts-h{top:50%;width:14px;opacity:.75}
.ts-q3{top:75%;width:7px;opacity:.45}
.day-col{flex:1;min-width:88px;border-right:1px solid var(--main-border);display:flex;flex-direction:column}
.day-col:last-child{border-right:none}
.day-col-head{min-height:56px;background:var(--main-card);padding:6px 4px 5px;text-align:center;position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--main-border);font-size:11px;font-weight:600;color:var(--main-text);flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.day-col-head.today{color:var(--orange)}
.tgrid-row{height:var(--cal-hour-px);border-bottom:1px solid var(--main-border);position:relative;cursor:pointer}
.tgrid-row::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 16px,rgba(255,255,255,.05) 16px,rgba(255,255,255,.05) 17px)}
.tgrid-row:hover{background:rgba(255,255,255,.012)}
.tgrid-row.off-hours{background:rgba(0,0,0,.18)}
.cal-offhours-band{position:absolute;left:0;right:0;background:rgba(0,0,0,.18);z-index:0;pointer-events:none}
.timed-ev{position:absolute;border-radius:4px;padding:2px 0 0;font-size:11px;font-weight:600;
  overflow:hidden;cursor:pointer;z-index:1;border:1px solid rgba(255,255,255,.15);color:#fff;transition:filter .15s;line-height:1.3}
.timed-ev:hover{filter:brightness(1.15)}
.timed-ev-cancelled{opacity:.45}
.timed-ev-rescheduled{opacity:.45;text-decoration:line-through;background:var(--text-placeholder) !important;cursor:pointer}
.timed-ev-completed{background:#6b7280 !important;opacity:.75}
.appt-row-sm.rescheduled{border-left-color:var(--text-dim);opacity:.5;text-decoration:line-through}
.timed-ev-time{font-size:10px;opacity:.8;white-space:nowrap}
.timed-ev-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timed-ev-client{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cal-now-line{position:absolute;left:0;right:0;height:2px;background:#ef4444;z-index:10;pointer-events:none}
.cal-now-dot{position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ef4444}
.day-off-banner{height:100%;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text-dim);font-style:italic;background:rgba(0,0,0,.2)}

/* TASKS */
.task-chip-row{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.task-chip-sep{display:inline-block;width:1px;height:20px;background:var(--border,#e5e7eb);margin:0 4px;align-self:center;flex-shrink:0}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  font-family:Lato,sans-serif;transition:all .18s}
.chip:hover{color:var(--text);border-color:var(--purple-border)}
.chip.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.chip-orange.active{background:var(--orange-dim);color:var(--orange);border-color:var(--orange-border)}
.task-list{display:flex;flex-direction:column;gap:8px}
.task-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:border-color .18s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.task-card:hover{border-color:var(--purple-border)}
.task-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.task-chk:hover{border-color:var(--orange)}.task-chk.done{background:var(--success-light);border-color:var(--success-light)}
.task-chk.in-progress{border-color:var(--orange);border-style:dashed}
.task-chk svg{width:10px;height:10px;color:#fff}
.task-body{flex:1;min-width:0}
.task-title{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--main-text)}
.task-title.done{text-decoration:line-through;color:var(--text-muted)}
.task-desc{font-size:12px;color:var(--main-text-muted);margin-bottom:6px;line-height:1.5}
.task-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pri-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:4px}
.ph{background:rgba(239,68,68,.15);color:var(--danger-light)}
.pm{background:rgba(245,158,11,.15);color:var(--warning-light)}
.pl{background:rgba(16,185,129,.15);color:var(--success-light)}
.task-due{font-size:11px;color:var(--text-muted)}.task-due.overdue{color:var(--danger-light)}
.task-link{font-size:11px;color:var(--purple-light);cursor:pointer}.task-link:hover{color:var(--orange)}
.task-actions{display:flex;gap:5px;flex-shrink:0}

/* POS */
.pos-grid{display:grid;grid-template-columns:1fr 330px;gap:14px}
.pos-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.pos-card:last-child{margin-bottom:0}
.pos-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);
  margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.pos-item-add{display:flex;gap:7px;margin-bottom:10px;align-items:flex-end}
.pos-item-add input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);padding:8px 11px;font-family:Lato,sans-serif;font-size:13px;outline:none}
.pos-item-add input:focus{border-color:var(--purple)}
.pos-item-add .price-f{width:90px;flex:none}
.pos-line{display:flex;align-items:center;justify-content:space-between;
  padding:7px 0;border-bottom:1px solid var(--main-border)}
.pos-line:last-child{border-bottom:none}
.pos-line-desc{font-size:13px;font-weight:500;color:var(--main-text)}
.pos-line-price{font-size:13px;font-weight:600;color:var(--main-text)}
.pos-totals{border-top:1px solid var(--main-border);padding-top:12px;margin-top:4px}
.pos-tr{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px;color:var(--main-text-muted)}
.pos-tr.grand{font-family:'Exo 2',sans-serif;font-size:18px;font-weight:800;color:var(--main-text);
  padding-top:10px;border-top:1px solid var(--border);margin-top:6px}
.tip-row{display:flex;gap:5px;margin-top:7px}
.tip-btn{flex:1;padding:7px 4px;border-radius:var(--radius);background:var(--main-bg);
  border:1px solid var(--border);color:var(--text-muted);font-family:Lato,sans-serif;
  font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;text-align:center}
.tip-btn:hover{border-color:var(--purple-border);color:var(--text)}
.tip-btn.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.pay-tabs{display:flex;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.pay-tab{flex:1;padding:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--main-text-muted);
  background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .18s}
.pay-tab.active{background:var(--purple);color:#fff}
.pay-tab.disabled,.pay-tab[disabled]{opacity:.4;cursor:not-allowed}
.pay-tab.disabled:hover,.pay-tab[disabled]:hover{background:transparent}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.s-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.s-card.full{grid-column:1/-1}
.s-card-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;margin-bottom:14px;color:var(--main-text);
  display:flex;align-items:center;gap:8px}
.s-card-title svg{width:14px;height:14px;color:var(--orange)}
.bh-row{display:flex;align-items:center;gap:9px;padding:5px 0}
.bh-label{width:36px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.bh-toggle{width:38px;height:20px;border-radius:10px;background:var(--border);cursor:pointer;
  position:relative;flex-shrink:0;transition:background .2s}
.bh-toggle.on{background:var(--purple)}
.bh-toggle::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s}
.bh-toggle.on::after{left:21px}
/* Notifications tab styles (Phase 2B-2) */
.notif-cat{margin-bottom:24px}
.notif-cat-title{font-size:11px;font-weight:700;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:0.5px;padding:0 0 8px;border-bottom:1px solid var(--main-border);margin-bottom:12px}
.notif-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);margin-bottom:8px;align-items:center}
.notif-info{min-width:0}
.notif-label{font-size:14px;font-weight:600;color:var(--main-text);display:flex;align-items:center;gap:8px}
.notif-desc{font-size:12px;color:var(--main-text-muted);margin-top:2px;line-height:1.5}
.notif-chip-group{display:inline-flex;align-items:center;gap:4px}
.notif-preview-eye{background:transparent;border:none;padding:4px;border-radius:var(--radius-sm);cursor:pointer;color:var(--main-text-muted);display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}
.notif-preview-eye:hover{color:var(--purple);background:var(--purple-dim)}
.notif-preview-eye svg{display:block}
.notif-preview-banner{background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);padding:10px 14px;font-size:12px;color:var(--text-muted);margin-bottom:14px}
.notif-preview-subject{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.notif-preview-subject-label{font-size:11px;color:var(--text-muted);font-weight:500;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.notif-preview-iframe-wrap{border:1px solid var(--main-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.notif-preview-iframe{width:100%;border:none;display:block;min-height:400px}
.notif-controls{display:grid;align-items:center;gap:14px;justify-content:end;justify-items:start}
.notif-controls.audience-patient{grid-template-columns:95px 95px}
.notif-section-title{font-size:13px;font-weight:700;color:var(--main-text);margin:32px 0 4px;display:flex;align-items:center;gap:8px}
.notif-section-title:first-of-type{margin-top:0}
.notif-section-desc{font-size:12px;color:var(--main-text-muted);margin-bottom:16px;line-height:1.5}
.notif-section-icon{display:inline-flex;align-items:center;color:var(--main-text-muted)}
.notif-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius-full);font-size:12px;color:var(--main-text-muted);cursor:pointer;transition:all 0.15s;justify-self:start;min-width:78px;justify-content:center}
.notif-chip.on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
.notif-chip-icon{display:inline-flex;align-items:center}
.notif-collapse{margin-bottom:14px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-bg)}
.notif-collapse-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;color:var(--main-text)}
.notif-collapse-head .notif-collapse-sum{font-size:11px;color:var(--main-text-muted);font-weight:400;margin-left:8px}
.notif-collapse-head svg.nc-chev{transition:transform 0.15s;flex-shrink:0}
.notif-collapse.open .notif-collapse-head svg.nc-chev{transform:rotate(90deg)}
.notif-collapse-body{display:none;padding:0 14px 14px}
.notif-collapse.open .notif-collapse-body{display:block}
.notif-sms-bubble{max-width:340px;padding:12px 14px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:14px;border-bottom-left-radius:4px;font-size:14px;line-height:1.45;color:var(--main-text);white-space:pre-wrap;word-break:break-word}
.notif-sms-meta{font-size:11px;color:var(--main-text-muted);margin-top:8px}
.notif-save-bar{position:sticky;top:0;background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;z-index:10;box-shadow:var(--shadow-md)}.notif-save-bar-text{font-size:13px;color:var(--main-text)}
.notif-save-bar-text strong{color:var(--purple)}
.notif-save-bar-actions{display:flex;gap:8px}
.bh-time{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:4px 8px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:120px}
.bh-time:focus{border-color:var(--purple)}
.bh-sep{font-size:11px;color:var(--text-muted)}
/* In the appointment modal date/time row, expand time pickers to fill their
   grid cell and match the date input's height. */
#apt-datetime-row .time-pair{width:100%;height:38px}
#apt-datetime-row .time-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .time-clk-btn{width:34px}
#apt-datetime-row .date-pair{width:100%;height:38px}
#apt-datetime-row .date-text{font-size:14px;padding:9px 12px}
#apt-datetime-row .date-clk-btn{width:34px}
/* Free-text time input with a clickable clock-icon picker button.
   The text field accepts loose entry like "9", "9 am", "9:30pm", "21:00";
   on blur the value is normalized and displayed as "9:00 AM". The clock
   button opens the OS-native time picker via showPicker(). */
.time-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:130px;position:relative}
.time-pair:focus-within{border-color:var(--purple)}
.time-pair.is-disabled{opacity:.45}
.time-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.time-text.invalid{color:var(--danger-light)}
.time-text:disabled{cursor:not-allowed}
.time-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.time-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.time-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Custom time picker popover (hour / minute / AM-PM columns + OK button). */
.time-pop{position:fixed;z-index:99999;background:var(--main-card);border:1px solid var(--main-border);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:8px 8px 10px;width:208px;
  font-family:Lato,sans-serif;color:var(--main-text)}
.tp-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;height:200px}
.tp-col{overflow-y:auto;text-align:center;scrollbar-width:thin}
.tp-col::-webkit-scrollbar{width:5px}
.tp-col::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
.tp-opt{padding:8px 6px;font-size:14px;color:var(--main-text);cursor:pointer;border-radius:6px;
  margin:1px 4px;transition:background .1s}
.tp-opt:hover{background:rgba(107,33,234,.08)}
.tp-opt.selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.tp-ok{display:block;margin:8px auto 2px;padding:6px 26px;background:var(--purple);color:#fff;
  border:none;border-radius:6px;font-weight:700;cursor:pointer;font-family:Lato,sans-serif;font-size:13px}
.tp-ok:hover{background:#5b1bd1}
/* Date picker mirrors time picker structure */
.date-pair{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);overflow:hidden;height:30px;width:160px;position:relative}
.date-pair:focus-within{border-color:var(--purple)}
.date-pair.is-disabled{opacity:.45}
.date-text{background:transparent;border:none;color:var(--text);padding:4px 6px 4px 10px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:100%;min-width:0}
.date-text.invalid{color:var(--danger-light)}
.date-text:disabled{cursor:not-allowed}
.date-clk-btn{background:transparent;border:none;border-left:1px solid var(--border);color:var(--text-muted);padding:0 7px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px}
.date-clk-btn:hover:not(:disabled){color:var(--text);background:rgba(255,255,255,.04)}
.date-clk-btn:disabled{cursor:not-allowed;opacity:.5}
/* Modal form-group context: date picker fills its grid cell and matches
   input height. Mirrors the time picker's modal sizing pattern. */
.form-group .date-pair{width:100%;height:38px}
.form-group .date-text{font-size:13px;padding:9px 12px}
.form-group .date-clk-btn{width:34px}

.date-pop{position:fixed;z-index:99999;background:var(--main-card);border:1px solid var(--main-border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px;width:260px;font-family:Lato,sans-serif;color:var(--main-text)}
.dp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-size:14px;font-weight:700;color:var(--main-text)}
.dp-nav{background:none;border:none;color:var(--main-text-muted);cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px}
.dp-nav:hover{background:rgba(107,33,234,.08);color:var(--purple)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dp-dow > div{text-align:center;font-size:11px;font-weight:700;color:var(--main-text-muted);padding:4px 0;text-transform:uppercase;letter-spacing:.05em}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-day{background:none;border:none;color:var(--main-text);font-size:13px;padding:7px 0;cursor:pointer;border-radius:6px;font-family:Lato,sans-serif;transition:background .1s}
.dp-day:hover:not(:disabled){background:rgba(107,33,234,.08)}
.dp-day-out{color:var(--main-text-muted);opacity:.35;cursor:default}
.dp-day-today{font-weight:700;color:var(--purple)}
.dp-day-selected{background:rgba(107,33,234,.14);color:var(--purple);font-weight:700}
.dp-day-selected.dp-day-today{background:var(--purple);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--main-border)}
.dp-foot-btn{background:none;border:none;color:var(--purple);cursor:pointer;font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;font-family:Lato,sans-serif}
.dp-foot-btn:hover{background:rgba(107,33,234,.08)}

/* Date input picker icon styling */
.date-pick{background-color:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:7px 10px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;cursor:pointer}
.date-pick:focus{border-color:var(--purple)}
.role-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;flex-shrink:0}
.role-admin{background:var(--orange-dim);color:var(--orange)}
.role-user{background:var(--purple-dim);color:var(--purple-light)}
.role-viewer{background:rgba(255,255,255,.07);color:var(--text-muted)}
.tag-mgr{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag-manage-item{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.tag-rm{background:none;border:none;cursor:pointer;font-size:14px;color:currentColor;opacity:.6;padding:0;line-height:1;margin-left:2px}
.tag-rm:hover{opacity:1;color:var(--danger-text)}
.color-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.color-sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.color-sw.selected{border-color:#fff}

/* SCHEDULE */
.sched-row{display:flex;align-items:center;gap:8px;padding:4px 0;flex-wrap:wrap}
.sched-day{width:40px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase}
.sched-toggle{cursor:pointer;background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:3px 9px;font-size:11px;font-weight:600;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .15s}
.sched-toggle.on{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.sched-lunch-toggle{cursor:pointer;background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:3px 9px;font-size:11px;font-weight:600;color:var(--text-muted);font-family:Lato,sans-serif;transition:all .15s;margin-left:6px}
.sched-lunch-toggle.on{background:rgba(245,158,11,.15);color:#d97706;border-color:rgba(245,158,11,.4)}
.sched-lunch-toggle:disabled{opacity:.4;cursor:not-allowed}
.sched-lunch-row{display:flex;align-items:center;gap:8px;padding:0 0 4px 48px;font-size:11px}
.sched-lunch-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em;min-width:32px}
.sched-time{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  color:var(--text);padding:4px 7px;font-size:12px;font-family:Lato,sans-serif;outline:none;width:120px}
.sched-time:focus{border-color:var(--purple)}
.ov-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-card);
  border-radius:var(--radius);margin-bottom:5px}
.ov-date{font-size:12px;font-weight:600;min-width:80px}
.ov-type{font-size:11px}

/* SEARCHABLE SELECT */
.ss-wrap{position:relative}
.ss-inp{width:100%;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);
  color:var(--main-text);padding:9px 12px;font-family:Lato,sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.ss-inp:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ss-drop{position:absolute;top:100%;left:0;right:0;background:var(--main-card);
  border:1px solid var(--purple-border);border-radius:var(--radius);margin-top:3px;
  max-height:200px;overflow-y:auto;z-index:400;box-shadow:var(--shadow)}
.ss-opt{padding:9px 12px;font-size:13px;cursor:pointer;transition:background .12s;color:var(--main-text)}
.ss-opt:hover{background:#f5f3ff}
.ss-empty{padding:12px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card)}

/* DRAWER */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
#drawer-overlay.open{opacity:1;pointer-events:all}
#contact-drawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);width:860px;max-width:95vw;height:85vh;
  background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);z-index:201;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;box-shadow:var(--shadow-lg)}
/* Drawer-content wraps the head, tabs, and body. Without this flex layout,
   drawer-body's flex:1 + overflow-y:auto don't apply because drawer-content
   isn't a flex container. Result: content overflows the drawer with no
   scrollbar, especially noticeable on smaller screens with long lists. */
#drawer-content{display:flex;flex-direction:column;height:100%;min-height:0;flex:1}
#contact-drawer.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:12px;flex-shrink:0}
.drawer-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:Exo 2,sans-serif;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.drawer-name{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:700;color:var(--main-text)}
.drawer-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.drawer-tabs{display:flex;border-bottom:2px solid var(--divider);flex-shrink:0;background:var(--subnav-bar);padding:0 20px;overflow-x:auto;scrollbar-width:none}
.drawer-tabs::-webkit-scrollbar{display:none}
.drawer-tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;
  background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap;flex-shrink:0}
.drawer-tab:hover{color:var(--main-text)}
.drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;min-height:0;-webkit-overflow-scrolling:touch}
.drawer-cards{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px 14px;border-bottom:1px solid var(--divider);flex-shrink:0}
.dcard{flex:1 1 130px;min-width:130px;text-align:left;border:1px solid transparent;border-radius:var(--radius-lg);padding:14px 12px;cursor:pointer;transition:transform .12s,box-shadow .16s;position:relative;font-family:inherit;display:flex;align-items:center;gap:10px;min-height:80px}
.dcard:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(107,33,234,.16)}
.dcard-ico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.dcard-ico svg{width:16px;height:16px}
.dcard-txt{min-width:0}
.dcard-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.dcard-val{font-size:13px;font-weight:700;color:var(--main-text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard-val.muted{font-weight:600;color:var(--main-text-muted);opacity:.8}
.alerts-pop{position:absolute;top:100%;left:0;margin-top:6px;width:300px;max-width:80vw;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:60;padding:10px}
.alerts-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.alerts-pop-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted)}
.alerts-pop-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:4px;margin-bottom:5px}
.alerts-pop-empty{font-size:12px;color:var(--main-text-muted);padding:6px 2px}
.ie-line{display:flex;align-items:center;gap:6px;min-height:22px}
.ie-val{font-size:14px;color:var(--main-text);min-width:0;word-break:break-word}
/* Settings > Email: transactional | marketing two-column split with a divider */
.email-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.email-cols>.email-col{min-width:0;overflow-x:auto}
.email-cols>.email-col+.email-col{border-left:1px solid var(--main-border);padding-left:32px}
@media(max-width:1300px){
  .email-cols{grid-template-columns:1fr;gap:0}
  .email-cols>.email-col+.email-col{border-left:none;padding-left:0;border-top:1px solid var(--main-border);padding-top:28px;margin-top:28px}
}
.ie-pencil{background:none;border:none;cursor:pointer;color:var(--main-text-muted);padding:2px;border-radius:6px;flex-shrink:0;opacity:.45;transition:opacity .12s,color .12s;line-height:0}
.ie-pencil:hover{color:var(--purple);opacity:1}
.ie-input{width:100%;height:34px;padding:5px 9px;font-size:13px;border:1px solid var(--main-border);border-radius:8px;background:var(--main-card);color:var(--main-text);font-family:inherit}
.ie-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-dim)}
.ie-savebar{position:sticky;top:-18px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:10px;padding:8px 12px;margin:-4px 0 14px}
.ie-savebar-txt{font-size:12px;font-weight:700;color:var(--purple)}
.ie-tags{display:flex;flex-wrap:wrap;gap:5px}
/* Sticky sub-tab header inside drawer-body. Keeps chips and action button
   visible while the list scrolls. Negative margins pull the background to
   the body edges so it cleanly covers padding. */
.d-sticky-sub{position:sticky;top:-18px;background:var(--main-card);z-index:5;
  margin:-18px -20px 12px;padding:18px 20px 10px}
.sec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-muted);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.info-item label{font-size:10px;color:var(--main-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:2px}
.info-item span{font-size:14px;color:var(--main-text)}
.info-item a{color:var(--main-text);text-decoration:none}.info-item a:hover{color:var(--purple)}
.note-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:10px 12px;margin-bottom:7px}
.note-date{font-size:11px;color:rgba(255,255,255,.5)}.note-text{font-size:13px;line-height:1.55;white-space:pre-wrap;margin-top:4px;color:var(--text)}
.appt-row-sm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--orange);
  border-radius:var(--radius);padding:9px 12px;margin-bottom:6px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap}
.appt-row-sm > div:first-child{min-width:0;flex:1 1 200px}
.appt-row-sm.completed{border-left-color:var(--success-light);opacity:.6}.appt-row-sm.cancelled{border-left-color:var(--text-dim);opacity:.4}.appt-row-sm.waiting_room{border-left-color:var(--warning,#f59e0b)}
.appt-row-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:160px;z-index:50;padding:4px;display:flex;flex-direction:column}
.appt-row-menu-item{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:8px 10px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}
.appt-row-menu-item:hover{background:var(--bg-card-hover);color:var(--orange)}
.appt-row-menu-item svg{flex-shrink:0;color:var(--text-muted)}
.appt-row-menu-item:hover svg{color:var(--orange)}
.appt-row-menu-danger{color:var(--danger-light)}
.appt-row-menu-danger svg{color:var(--danger-light)}
.appt-row-menu-danger:hover{background:var(--danger-dim);color:var(--danger-light)}
.appt-row-menu-danger:hover svg{color:var(--danger-light)}
.appt-row-menu-sep{height:1px;background:var(--border);margin:4px 0}
.appt-sm-title{font-size:13px;font-weight:600;margin-bottom:2px;color:var(--text)}
.appt-sm-meta{font-size:11px;color:var(--text-muted)}
.sb-sm{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;text-transform:uppercase}
.sched{background:var(--orange-dim);color:var(--orange)}
.compl{background:rgba(52,211,153,.15);color:var(--success-light)}
.canc{background:rgba(255,255,255,.08);color:var(--text-muted)}
.reschd{background:rgba(251,191,36,.15);color:var(--warning-light)}
.noshow{background:rgba(249,115,22,.15);color:#f97316}
.task-sm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:8px 11px;margin-bottom:6px;display:flex;align-items:flex-start;gap:8px;color:#ffffff}
.tch-sm{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;margin-top:2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.tch-sm.done{background:var(--success-light);border-color:var(--success-light)}
.tch-sm.in-progress{border-color:var(--orange);border-style:dashed}
.tch-sm svg{width:9px;height:9px;color:#fff}
.tsk-done{text-decoration:line-through;color:rgba(255,255,255,.4)}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

/* MODAL */
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1500;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(4px);padding:20px}
#modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);
  width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow),var(--shadow-p);transform:scale(.96);transition:transform .2s}
#modal-overlay.open .modal{transform:scale(1)}
.modal-lg{max-width:640px}.modal-xl{max-width:760px}.modal-xxl{max-width:1100px}
#bulk-body-rte:empty:before{content:attr(data-ph);color:var(--main-text-muted);pointer-events:none}
/* GrapesJS RTE toolbar: let actions size to content with padding so the text
   merge-var buttons (Name/Email/Biz/Phone) aren't scrunched into each other. */
.gjs-rte-action{width:auto!important;min-width:24px;padding:0 7px!important;display:inline-flex!important;align-items:center;justify-content:center}
#bulk-body-rte img{max-width:100%;height:auto;cursor:pointer}
#bulk-body-rte h2{font-size:22px;font-weight:700;margin:0 0 8px;line-height:1.25}
#bulk-body-rte h3{font-size:18px;font-weight:700;margin:0 0 6px;line-height:1.3}
#bulk-body-rte p{margin:0 0 10px}
/* Automation editor inputs used class .msp-input but it was never defined, so
   they rendered unstyled/cramped. Give them the standard input treatment. */
.msp-input{padding:9px 11px;background:var(--main-input);border:1px solid var(--main-input-border);border-radius:var(--radius);color:var(--main-text);font-size:14px;box-sizing:border-box;font-family:inherit;line-height:1.4}
.msp-input:focus{outline:none;border-color:var(--purple)}
select.msp-input{height:38px;cursor:pointer}
textarea.msp-input{resize:vertical}
.modal-wide{max-width:min(1280px,calc(100vw - 80px));min-height:min(70vh,640px)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;color:#ffffff}
.modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.warn-box{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius);padding:12px 14px;font-size:13px;color:var(--warning-light);margin-bottom:12px}
.warn-box strong{color:#fde68a}

/* ============================================================
   MASTER LIGHT-SURFACE SYSTEM (June 8 2026)
   Pass 1: inert until a surface opts in via .surface-light or
   migrates a bar to .subnav-tab. Promote to global .modal/.drawer
   in pass 2 after launch. See MySpark-Design-Tokens.docx.
   ============================================================ */

/* Light-surface system tokens (--divider, --subnav-bar, --subnav-tab-hover)
   live in the top :root block. */

/* Reusable light-surface remap. Apply to a shell to flip every
   var()-driven child to the light palette. Mirrors the .panel remap. */
.surface-light{
  background:var(--main-card);
  color:var(--main-text);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --bg-card:var(--main-card);
  --bg-card-hover:var(--main-card-hover);
  --bg-input:var(--main-input);
  --bg-panel:var(--main-card);
  --border:var(--main-border);
}
/* Shell holdouts the token remap can't reach (raw hex in base rules) */
.surface-light .modal-title{color:var(--main-text)}
.surface-light .modal-head{border-bottom-color:var(--divider)}
.surface-light .modal-foot{border-top-color:var(--divider)}
.surface-light .form-group input,
.surface-light .form-group select,
.surface-light .form-group textarea{border:1px solid var(--main-input-border)}
.surface-light .btn-icon{color:var(--main-text-muted);border-color:var(--divider)}
.surface-light .btn-icon:hover{background:var(--main-card-hover);color:var(--main-text)}
/* Drawer header on light */
.surface-light .drawer-head{border-bottom-color:var(--divider)}
.surface-light .drawer-name{color:var(--main-text)}
.surface-light .drawer-sub{color:var(--main-text-muted)}
.surface-light .drawer-tabs{background:var(--subnav-bar);border-bottom:2px solid var(--divider)}
.surface-light .drawer-tab{color:var(--main-text-muted)}
.surface-light .drawer-tab:hover{color:var(--main-text)}
.surface-light .drawer-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
/* Drawer body on light */
.surface-light .d-sticky-sub{background:var(--main-card)}
.surface-light .sec-label{color:var(--main-text);font-size:11px;font-weight:800;letter-spacing:.06em;border-bottom-color:var(--divider);margin-top:28px}
.surface-light .sec-label:first-child{margin-top:0}
.surface-light .info-item label{color:var(--main-text-muted)}
.surface-light .info-item a:hover{color:var(--purple)}
.surface-light .note-item{background:var(--main-bg);border-color:var(--main-border)}
.surface-light .note-date{color:var(--main-text-muted)}
.surface-light .appt-row-sm{background:var(--main-bg);border-color:var(--main-border)}
.surface-light .task-sm{background:var(--main-bg);border-color:var(--main-border);color:var(--main-text)}
.surface-light .canc{background:var(--main-bg);color:var(--main-text-muted)}
.surface-light .tsk-done{color:var(--main-text-muted)}
/* Drawer info: breathing room + full-width section dividers */
.surface-light .info-grid{gap:14px 8px}
.surface-light .info-item label{margin-bottom:3px}
.surface-light .sec-row{border-bottom:1px solid var(--divider);padding-bottom:6px;margin-bottom:10px}
.surface-light .sec-row .sec-label{border-bottom:none;padding-bottom:0}
/* Warn-box readable on light surfaces */
.surface-light .warn-box{color:var(--warning-text-strong)}
.surface-light .warn-box strong{color:var(--warning-text-strong)}

/* Collapsed subnav. Replaces pay-panel-tab / cal-panel-tab /
   forms-panel-tab / at-tab (NOT .pay-tab, that's a segmented control). */
.subnav-bar{display:flex;background:var(--subnav-bar);border-bottom:1px solid var(--divider);flex-shrink:0;padding:0}
.subnav-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;
  background:none;border-top:none;border-left:none;border-right:none;
  font-family:Lato,sans-serif;white-space:nowrap}
.subnav-tab:hover{color:var(--subnav-tab-hover)}
.subnav-tab.active{color:var(--purple);border-bottom-color:var(--purple)}


/* TAG SELECTOR */
.tag-sel-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.tag-opt{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;
  border:1px solid var(--border);color:var(--text-muted);background:transparent;
  transition:all .15s;font-family:Lato,sans-serif}
.tag-opt.selected{color:var(--purple-light);border-color:var(--purple-border);background:var(--purple-dim)}
.divider{height:1px;background:var(--border);margin:12px 0}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:14px}
.pg-btn{width:30px;height:30px;border-radius:var(--radius);background:var(--main-card);
  border:1px solid var(--main-border);color:var(--main-text-muted);font-size:12px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;font-family:Lato,sans-serif}
.pg-btn:hover{border-color:var(--purple-border);color:var(--main-text)}
.pg-btn.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.pg-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.pg-info{font-size:12px;color:var(--main-text-muted);padding:0 3px}

/* CARD ON FILE */
.card-on-file{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-brand-icon{width:36px;height:24px;background:rgba(255,255,255,.12);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,.8);flex-shrink:0}
.card-details{flex:1}
.card-number{font-size:13px;font-weight:600;color:var(--text)}
.card-exp{font-size:11px;color:rgba(255,255,255,.55)}
.card-on-file.on-light{background:var(--main-card);border-color:var(--main-border)}
.card-on-file.on-light .card-brand-icon{background:var(--purple-dim);color:var(--purple)}
.card-on-file.on-light .card-number{color:var(--main-text)}
.card-on-file.on-light .card-exp{color:var(--main-text-muted)}
.sq-card-form{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:12px;min-height:44px}

/* BULK ACTION BAR */
.bulk-bar{background:var(--main-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:0 1px 6px rgba(107,33,234,.08)}
.bulk-count{font-size:13px;font-weight:600;color:var(--purple-light)}
.bulk-select-all-btn{background:none;border:none;color:var(--purple-light);cursor:pointer;
  font-family:Lato,sans-serif;font-size:12px;font-weight:600;padding:0;text-decoration:underline}
.cb-col{width:36px;padding:10px 8px!important}
input[type=checkbox]{cursor:pointer;accent-color:var(--purple);width:15px;height:15px}
.archive-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:4px;background:rgba(245,158,11,.15);color:var(--warning-light);margin-left:6px}

/* EMPTY STATE */
.empty-state{text-align:center;padding:44px 20px;color:var(--main-text-muted)}
.empty-state svg{width:38px;height:38px;margin:0 auto 12px;display:block;opacity:.3}
.empty-state h3{font-family:'Exo 2',sans-serif;font-size:15px;margin-bottom:5px;color:var(--main-text)}
.empty-state p{font-size:13px;color:var(--main-text-muted)}

/* TOAST */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--bg-card);border:1px solid var(--purple-border);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;color:var(--text);box-shadow:var(--shadow);
  animation:toastIn .3s ease;display:flex;align-items:center;gap:8px;max-width:280px}
.toast.success{border-color:rgba(52,211,153,.4)}.toast.error{border-color:var(--orange-border)}.toast.warn{border-color:rgba(245,158,11,.4)}
@keyframes toastIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

/* User menu popup */
.sb-bottom{position:relative}
.user-menu-popup{position:absolute;bottom:100%;left:8px;right:8px;background:var(--bg-card);
  border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);z-index:100;margin-bottom:5px}
.um-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;
  font-weight:500;cursor:pointer;transition:background .15s;color:var(--text-muted);
  background:none;border:none;width:100%;text-align:left;font-family:Lato,sans-serif}
.um-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.um-item svg{width:14px;height:14px;flex-shrink:0}
.um-item.danger{color:var(--danger-light)}
.um-item.danger:hover{background:rgba(239,68,68,.1);color:var(--danger-light)}
.um-div{height:1px;background:var(--border)}
/* Products */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.prod-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);
  padding:16px;transition:border-color .18s;display:flex;flex-direction:column;box-shadow:0 1px 6px rgba(107,33,234,.06);
  /* Self-contained light-on-white tokens so the card reads correctly whether
     it sits inside .panel (light theme) or inside a dark modal. */
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --border:var(--main-border);
  color:var(--main-text);
}
.prod-card:hover{border-color:var(--purple-border)}
.prod-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.prod-name{font-family:'Exo 2',sans-serif;font-size:14px;font-weight:700;color:var(--main-text)}
.prod-cat-badge{font-size:10px;font-weight:600;color:var(--purple-light);background:var(--purple-dim);
  padding:2px 7px;border-radius:4px;margin-top:3px;display:inline-block}
.prod-status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex-shrink:0;margin-top:4px}
.prod-status-dot.on{background:var(--success-light)}
.prod-desc-text{font-size:12px;color:var(--text-muted);margin-bottom:10px;line-height:1.5;flex:1}
.prod-opts-section{border-top:1px solid var(--border);padding-top:9px;margin-bottom:9px}
.prod-opt-row{display:flex;align-items:center;padding:3px 0;font-size:12px;gap:4px}
.prod-opt-name{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-opt-price{font-family:Exo 2,sans-serif;font-weight:700;font-size:12px;margin:0 6px}
.prod-opt-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 5px;border-radius:3px;flex-shrink:0}
.prod-opt-badge.one_time{background:var(--orange-dim);color:var(--orange)}
.prod-opt-badge.recurring{background:var(--purple-dim);color:var(--purple-light)}
.prod-foot{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:9px;margin-top:auto}
/* Products | Orders subtabs: underline style, same as Special Offers (_soTab). */
.pst-tabs{display:flex;align-items:center;border-bottom:1px solid var(--main-border);margin-bottom:18px}
.pst-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--main-text-muted);font-size:14px;font-weight:700;padding:8px 2px;margin-right:24px;cursor:pointer}
.pst-tab.active{border-bottom-color:var(--purple);color:var(--main-text)}
.pricing-edit-row{display:flex;align-items:flex-start;gap:8px;padding:12px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.pricing-edit-row:last-child{margin-bottom:0}
/* Notification enhancements */
.notif-read-item{opacity:.8}
.ns-type-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--border)}
.ns-type-row:last-child{border-bottom:none}
.ns-type-label{font-size:13px;font-weight:500}
.ns-sw{position:relative;width:38px;height:20px;border-radius:10px;cursor:pointer;border:none;
  background:var(--border);transition:background .2s;flex-shrink:0}
.ns-sw.on{background:var(--purple)}
.ns-sw::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .2s}
.ns-sw.on::after{left:21px}

/* PAYMENT PANEL TABS */
.pay-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0}
.pay-panel-tab{padding:14px 20px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.pay-panel-tab:hover{color:var(--main-text)}
.pay-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* SUBSCRIPTIONS */
/* Match the white-card pattern used elsewhere (stat-card, prod-card). The
   row sits inside .panel which sets light-theme tokens, but we make the
   tokens self-contained so the row renders correctly anywhere. */
.sub-row{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:13px 16px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 210px;gap:12px;align-items:center;cursor:pointer;transition:border-color .18s,box-shadow .18s;margin-bottom:7px;box-shadow:0 1px 6px rgba(107,33,234,.06);
  --text:var(--main-text);
  --text-muted:var(--main-text-muted);
  --text-dim:#9b8fc4;
  --border:var(--main-border);
  --bg-card:var(--main-card);
  color:var(--main-text);
}
.sub-row:hover{border-color:var(--purple-border);box-shadow:0 2px 12px rgba(107,33,234,.1)}
.sub-row.active{border-left:3px solid var(--success-light)}
.sub-row.paused{border-left:3px solid var(--orange);opacity:.85}
.sub-row.past_due{border-left:3px solid var(--warning-light)}
.sub-row.suspended{border-left:3px solid var(--danger-light)}
.sub-row.cancelled{border-left:3px solid var(--text-dim);opacity:.55}
.sub-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-biz{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-cycle-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--purple-dim);color:var(--purple-light);display:inline-block;margin-top:3px}
.sub-date-cell{font-size:12px;color:var(--text-muted)}
.sub-date-cell strong{display:block;font-size:13px;font-weight:600;color:var(--text)}
.sub-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.sub-pay-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block}
.spb-paid{background:rgba(52,211,153,.15);color:var(--success-light)}
.spb-unpaid{background:var(--orange-dim);color:var(--orange)}
.spb-overdue{background:rgba(239,68,68,.15);color:var(--danger-light)}
.sub-section-label{font-family:Exo 2,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sub-count-badge{font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--bg-card)}
.sub-item-edit-row{display:flex;align-items:flex-start;gap:7px;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px}
.sub-item-edit-row:last-child{margin-bottom:0}

/* CATEGORY MANAGER */
.cat-mgr-bar{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.cat-mgr-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;user-select:none;transition:background .15s}
.cat-mgr-head:hover{background:#f5f3ff}
.cat-mgr-head-label{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);display:flex;align-items:center;gap:7px}
.cat-mgr-body{padding:12px 16px;border-top:1px solid var(--main-border);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.cat-chip-item{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border)}
.cat-chip-rm{background:none;border:none;cursor:pointer;color:rgba(155,85,255,.45);font-size:15px;padding:0;line-height:1;display:flex;align-items:center;transition:color .15s}
.cat-chip-rm:hover{color:var(--danger-light)}
.cat-mgr-add{display:flex;gap:7px;margin-top:10px;align-items:center;padding-top:10px;border-top:1px solid var(--main-border);width:100%}

/* INVENTORY */
.inv-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin-top:3px}
.inv-ok{background:rgba(52,211,153,.12);color:var(--success-light)}
.inv-low{background:rgba(245,158,11,.15);color:var(--warning-light)}
.inv-out{background:rgba(239,68,68,.15);color:var(--danger-light)}
.inv-track-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);margin-top:8px}

/* CAL TABS */
.cal-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 20px;flex-shrink:0;padding:0}
.cal-panel-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.cal-panel-tab:hover{color:var(--main-text)}
.cal-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

/* APPTS LIST VIEW */
.appt-list-row{background:var(--main-card);border:1px solid var(--main-border);border-left:4px solid var(--orange);border-radius:var(--radius-lg);padding:13px 16px;display:flex;align-items:flex-start;gap:14px;margin-bottom:8px;cursor:pointer;transition:border-color .18s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.appt-list-row:hover{border-color:var(--purple-border)}
.appt-list-date{font-family:'Exo 2',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--main-text-muted);min-width:48px;text-align:center;flex-shrink:0;padding-top:2px}
.appt-list-date .appt-day-num{font-size:22px;font-weight:800;color:var(--main-text);line-height:1;display:block}
.appt-list-body{flex:1;min-width:0}
.appt-list-title{font-size:14px;font-weight:600;margin-bottom:3px;color:var(--main-text)}
.appt-list-meta{font-size:12px;color:var(--main-text-muted)}

/* CONVERSATIONS PANEL */
.conv-wrap{display:flex;flex-direction:column;height:100%;margin:-22px -24px;background:var(--main-bg)}
.conv-toolbar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0}
.conv-filter-group{display:flex;gap:6px;align-items:center}
.conv-filter-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-right:4px}
.conv-pill{padding:5px 12px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.conv-pill:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-pill .conv-pill-count{font-size:10px;background:rgba(255,255,255,.18);padding:1px 6px;border-radius:var(--radius-full);font-weight:700}
.conv-pill:not(.active) .conv-pill-count{background:var(--purple-dim);color:var(--purple)}
.conv-toolbar-spacer{flex:1}
.conv-refresh{padding:6px 10px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.conv-refresh:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-actionbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--main-card);border-bottom:1px solid var(--main-border);flex-shrink:0;flex-wrap:wrap}
.conv-search-wrap{position:relative;flex:1 1 320px;min-width:200px;max-width:480px}
.conv-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--main-text-muted);pointer-events:none}
.conv-search-input{width:100%;padding:8px 36px 8px 34px;border:1px solid var(--main-input-border);border-radius:var(--radius);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.conv-search-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-search-input::placeholder{color:var(--text-placeholder)}
.conv-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:var(--main-text-muted);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.conv-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-search-clear svg{width:14px;height:14px;display:block}
.conv-search-input:placeholder-shown ~ .conv-search-clear{display:none}
/* Contacts panel search clear-X. Matches conversations pattern. */
/* Contacts search clear-X. Explicit dimensions so svg renders inside the button.
   Button has fixed 22x22 size, svg centered via flex. Auto-hides when input empty. */
.c-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;background:none;border:none;cursor:pointer;padding:0;
  color:var(--main-text-muted);font-size:18px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.c-search-clear:hover{color:var(--main-text);background:var(--main-card-hover)}
.search-box input:placeholder-shown ~ .c-search-clear{display:none}
.search-box input{padding-right:34px}
.gclr-btn{position:fixed;z-index:100000;width:20px;height:20px;display:none;
  align-items:center;justify-content:center;cursor:pointer;border:none;padding:0;margin:0;
  background:transparent;color:var(--main-text-muted);border-radius:50%;
  font-size:15px;line-height:1;font-family:inherit}
.gclr-btn:hover{color:var(--main-text);background:var(--main-card-hover)}
.conv-stats{display:flex;align-items:center;gap:18px;flex-shrink:0;flex-wrap:wrap}
.conv-stat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--main-text-muted);white-space:nowrap}
.conv-stat svg{width:14px;height:14px;flex-shrink:0;color:var(--main-text-muted)}
.conv-stat-value{font-size:13px;font-weight:600;color:var(--main-text)}
.conv-stat-value.muted{color:var(--main-text-muted);font-weight:500}
.conv-stat-value.warn{color:var(--warning-text)}
.conv-actionbar-spacer{flex:1}
.conv-new-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;flex-shrink:0}
.conv-new-btn:hover:not(:disabled){background:var(--orange-hover)}
.conv-new-btn:active:not(:disabled){background:var(--orange-active)}
.conv-new-btn:disabled{opacity:.55;cursor:not-allowed}
.conv-new-btn svg{width:14px;height:14px}
.conv-composer-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.conv-composer-card{width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--purple-border);border-radius:var(--radius-lg);overflow:hidden}
.conv-composer-card .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.conv-composer-card .modal-title{font-size:16px;font-weight:700;color:#fff}
.surface-light.conv-composer-card .modal-title{color:var(--main-text)}
.conv-composer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.conv-composer-close:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-close svg{width:18px;height:18px}
.conv-composer-card .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;color:var(--text)}
.conv-composer-card .modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--border)}
.conv-composer-section{margin-bottom:18px}
.conv-composer-section:last-child{margin-bottom:0}
.conv-composer-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:8px}
.conv-composer-search-wrap{position:relative}
.conv-composer-search{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box}
.conv-composer-search:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-search::placeholder{color:var(--text-placeholder)}
.conv-composer-results{margin-top:8px;max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card)}.conv-composer-result{display:flex;gap:10px;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.conv-composer-result:last-child{border-bottom:none}
.conv-composer-result:hover{background:var(--bg-card-hover)}
.conv-composer-result-avatar{width:32px;height:32px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;text-transform:uppercase}
.conv-composer-result-body{flex:1;min-width:0}
.conv-composer-result-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-composer-result-meta{font-size:11px;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap}
.conv-composer-result-meta span{display:inline-flex;align-items:center;gap:3px}
.conv-composer-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12px}
.conv-composer-pinned{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--purple-dim);border:1px solid var(--purple-border);border-radius:var(--radius);margin-bottom:0}.conv-composer-pinned-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.conv-composer-pinned-clear:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-pinned-clear svg{width:14px;height:14px}
.conv-composer-channel-row{display:flex;gap:8px}
.conv-composer-channel-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-full);background:var(--bg-card);color:var(--text-muted);font-size:13px;font-weight:600;border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:all .15s}
.conv-composer-channel-pill:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text)}
.conv-composer-channel-pill.active{background:var(--purple);color:#fff;border-color:var(--purple)}
.conv-composer-channel-pill:disabled{opacity:.4;cursor:not-allowed}
.conv-composer-channel-pill svg{width:14px;height:14px}
.conv-composer-subject{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;margin-bottom:8px}
.conv-composer-subject:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-subject::placeholder{color:var(--text-placeholder)}.conv-composer-body-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-input);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;resize:vertical;min-height:120px;line-height:1.5}
.conv-composer-body-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.conv-composer-body-input::placeholder{color:var(--text-placeholder)}
.conv-composer-body-input:disabled{opacity:.6;cursor:not-allowed}
.conv-composer-error{padding:10px 12px;background:var(--danger-dim);color:var(--danger-text);border:1px solid var(--danger);border-radius:var(--radius);font-size:12px;margin-top:12px}.conv-composer-cancel{padding:8px 14px;background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.conv-composer-cancel:hover{background:var(--bg-card-hover);color:var(--text)}
.conv-composer-send{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.conv-composer-send:hover:not(:disabled){background:var(--orange-hover)}
.conv-composer-send:active:not(:disabled){background:var(--orange-active)}
.conv-composer-send:disabled{opacity:.45;cursor:not-allowed}
.conv-composer-send svg{width:14px;height:14px}
.conv-main{flex:1;display:flex;min-height:0;overflow:hidden}
.conv-list{width:360px;flex-shrink:0;border-right:1px solid var(--main-border);background:var(--main-card);overflow-y:auto}
.conv-list-empty{padding:40px 20px;text-align:center;color:var(--main-text-muted);font-size:13px}
.conv-list-item{padding:14px 16px;border-bottom:1px solid var(--main-border);cursor:pointer;display:flex;gap:12px;transition:background .12s;border-left:3px solid transparent}
.conv-list-item:hover{background:var(--main-card-hover)}
.conv-list-item.active{background:var(--purple-dim);border-left-color:var(--purple)}
.conv-list-item.unread{background:var(--main-bg)}
.conv-list-item.unread.active{background:var(--purple-dim)}
.conv-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--purple-dim);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;text-transform:uppercase}
.conv-list-body{flex:1;min-width:0}
.conv-list-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px}
.conv-list-name{font-size:13px;font-weight:600;color:var(--main-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-list-item.unread .conv-list-name{font-weight:700}
.conv-list-time{font-size:11px;color:var(--main-text-muted);flex-shrink:0;white-space:nowrap}
.conv-list-item.unread .conv-list-time{color:var(--purple);font-weight:600}
.conv-list-preview{font-size:12px;color:var(--main-text-muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.conv-list-item.unread .conv-list-preview{color:var(--main-text)}
.conv-list-meta{display:flex;align-items:center;gap:6px;margin-top:4px}
.conv-list-channel{display:inline-flex;align-items:center;gap:4px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);background:var(--main-bg);color:var(--main-text-muted)}
.conv-list-channel.ch-email{background:var(--info-dim);color:var(--info-text)}
.conv-list-channel.ch-sms{background:var(--success-dim);color:var(--success-text)}
.conv-list-channel.ch-chat{background:var(--warning-dim);color:var(--warning-text)}
.conv-list-assignee{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--purple-light);background:var(--purple-dim);padding:2px 7px;border-radius:var(--radius-full)}
.conv-list-assignee svg{width:10px;height:10px}
.conv-assign-select{font-size:12px;border:1px solid var(--main-border);border-radius:var(--radius);background:var(--main-card);color:var(--main-text);padding:6px 8px;cursor:pointer;font-family:inherit;max-width:150px}
.conv-assign-select:hover{background:var(--main-card-hover)}
.conv-list-channel svg{width:11px;height:11px}
.conv-list-direction{font-size:10px;color:var(--main-text-muted);font-weight:600}
.conv-list-direction.inbound{color:var(--success-text)}
.conv-list-unread-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--purple);flex-shrink:0;margin-left:auto}
.conv-thread{flex:1;display:flex;flex-direction:column;min-width:0;background:#e8e5f0}
.conv-thread-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--main-text-muted);padding:40px;text-align:center}
.conv-thread-empty svg{width:48px;height:48px;margin-bottom:14px;opacity:.4}
.conv-thread-empty h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--main-text)}
.conv-thread-empty p{font-size:13px;max-width:280px}
.conv-thread-head{background:var(--main-card);border-bottom:1px solid var(--main-border);padding:14px 20px;flex-shrink:0;display:flex;align-items:center;gap:12px}
.conv-thread-head-info{flex:1;min-width:0}
.conv-thread-head-name{font-size:14px;font-weight:700;color:var(--main-text)}
.conv-thread-head-meta{font-size:12px;color:var(--main-text-muted);margin-top:2px;display:flex;align-items:center;gap:8px}
.conv-thread-head-actions{display:flex;gap:6px}
.conv-thread-action{padding:6px 12px;font-size:12px;border-radius:var(--radius);background:none;border:1px solid var(--main-border);color:var(--main-text-muted);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.conv-thread-action:hover{background:var(--main-card-hover);color:var(--main-text)}
.conv-thread-action.danger{color:var(--danger-text);border-color:var(--danger-dim)}
.conv-thread-action.danger:hover{background:var(--danger-dim);color:var(--danger-text)}
.sb-badge{position:absolute;top:8px;right:10px;background:var(--purple);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.sb-item{position:relative}
.conv-thread-action svg{width:13px;height:13px}
.conv-thread-status{display:inline-block;font-size:10px;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.conv-thread-status.open{background:var(--success-dim);color:var(--success-text)}
.conv-thread-status.closed{background:var(--main-border);color:var(--main-text-muted)}
.conv-thread-status.archived{background:var(--text-disabled);color:var(--main-text-muted)}
.conv-thread-messages{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:14px;max-width:880px;width:calc(100% - 32px);margin:16px auto;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.conv-msg{max-width:82%;display:flex;flex-direction:column;gap:4px}
.conv-msg.outbound{align-self:flex-end;align-items:flex-end}
.conv-msg.inbound{align-self:flex-start;align-items:flex-start}
.conv-msg-bubble{padding:10px 14px;border-radius:var(--radius-lg);font-size:13px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;min-width:0;max-width:100%}
.conv-msg.outbound .conv-msg-bubble{background:var(--purple);color:#fff;border-bottom-right-radius:var(--radius-sm)}
.conv-msg.inbound .conv-msg-bubble{background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-bottom-left-radius:var(--radius-sm)}
.conv-msg-subject{font-weight:600;margin-bottom:4px;font-size:12px;opacity:.95}
.conv-msg-body{white-space:pre-wrap}
.conv-msg.outbound .conv-msg-bubble.failed{background:var(--danger);}
.conv-msg-meta{font-size:10px;color:var(--main-text-muted);display:flex;align-items:center;gap:6px;padding:0 6px}
.conv-msg-source{text-transform:uppercase;letter-spacing:.05em;font-weight:600;opacity:.8}
.conv-msg-status{font-weight:600}
.conv-msg-status.failed{color:var(--danger-text)}
.conv-composer-wrap{flex-shrink:0;padding:0 0 16px;max-width:880px;width:calc(100% - 32px);margin:0 auto;box-sizing:border-box}
.conv-phi-reminder{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;font-size:11px;color:var(--main-text-muted);background:var(--warning-dim);border:1px solid var(--warning-border,var(--warning));border-radius:var(--radius-sm);line-height:1.4}
.conv-phi-reminder svg{flex-shrink:0;color:var(--warning-text)}
.conv-phi-reminder.conv-phi-reminder-dark{margin-top:8px;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:var(--text-muted)}
.conv-phi-reminder.conv-phi-reminder-dark svg{color:var(--warning-light)}
/* SMS consent state for the open thread. Makes the reply window visible so a
   conversation converts into real consent instead of expiring silently. */
.conv-consent-note{display:flex;align-items:flex-start;gap:9px;padding:10px 20px;font-size:12px;line-height:1.45;background:var(--warning-dim);border-bottom:1px solid var(--warning-border,var(--warning));color:var(--main-text);flex-shrink:0}
.conv-consent-note.blocked{background:var(--danger-dim);border-bottom-color:var(--danger-dim)}
.conv-consent-note svg{flex-shrink:0;width:14px;height:14px;margin-top:1px;color:var(--warning-text)}
.conv-consent-note.blocked svg{color:var(--danger-text)}
.conv-consent-body{flex:1;min-width:0}
.conv-consent-title{font-weight:700}
.conv-consent-sub{color:var(--main-text-muted);margin-top:2px}
.conv-composer{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.conv-composer textarea{width:100%;min-height:60px;max-height:160px;border:none;outline:none;resize:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.55;color:var(--main-text);padding:0;box-sizing:border-box}
.conv-composer textarea::placeholder{color:var(--main-text-muted)}
.conv-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--main-border)}
.conv-composer-meta{font-size:11px;color:var(--main-text-muted);display:flex;align-items:center;gap:10px}
.conv-composer-meta .char-count.over{color:var(--danger-text);font-weight:600}
.conv-composer-send{padding:7px 16px;font-size:13px;font-weight:600;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.conv-composer-send:hover:not(:disabled){background:var(--orange-hover)}
.conv-composer-send:disabled{background:var(--main-border);color:var(--main-text-muted);cursor:not-allowed}
.conv-composer-disabled{padding:14px 16px;font-size:13px;color:var(--main-text-muted);text-align:center;background:var(--main-card);border:1px dashed var(--main-border);border-radius:var(--radius-lg)}
.conv-composer-disabled button{background:none;border:none;color:var(--purple);font-weight:600;cursor:pointer;padding:0;font-size:inherit;text-decoration:underline}
.conv-msg.sending .conv-msg-bubble{opacity:.6}
.conv-msg-retry{margin-left:8px;background:none;border:none;color:var(--danger-text);cursor:pointer;font-weight:600;font-size:11px;text-decoration:underline;padding:0}
.conv-msg-date-divider{align-self:center;font-size:10px;color:var(--main-text-muted);background:var(--main-card);padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--main-border);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
/* Conversations attachments (email) */
.conv-composer-actions{justify-content:flex-start}
.conv-composer-send{margin-left:auto}
.conv-attach-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px;background:none;border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text-muted);cursor:pointer;transition:color .15s,border-color .15s}
.conv-attach-btn:hover{color:var(--purple);border-color:var(--purple)}
.conv-composer-attach{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.conv-attach-chips{display:flex;flex-wrap:wrap;gap:6px}
.conv-attach-chips:empty{display:none}
.conv-attach-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:4px 8px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);font-size:12px;color:var(--main-text)}
.conv-attach-chip svg{flex:0 0 auto;color:var(--main-text-muted)}
.conv-attach-chip.uploading{opacity:.7}
.conv-attach-chip.error{border-color:var(--danger);color:var(--danger-text)}
.conv-attach-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-attach-chip-size{flex:0 0 auto;color:var(--main-text-muted);font-size:11px}
.conv-attach-chip-x{flex:0 0 auto;background:none;border:none;color:var(--main-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.conv-attach-chip-x:hover{color:var(--danger-text)}
.conv-attach-chip-spin{flex:0 0 auto;width:12px;height:12px;border:2px solid var(--main-text-muted);border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
.conv-msg-attachments{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conv-msg-att{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:5px 9px;border-radius:var(--radius);font-size:12px;text-decoration:none;overflow-wrap:anywhere}
.conv-msg-att svg{flex:0 0 auto}
.conv-msg-att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-msg-att-size{flex:0 0 auto;opacity:.75;font-size:11px}
.conv-msg-att.disabled{cursor:default;opacity:.6}
.conv-msg-att.image{padding:0;max-width:220px;border-radius:var(--radius);overflow:hidden}
.conv-msg-att.image img{display:block;max-width:220px;max-height:220px;width:auto;height:auto}
.conv-msg.outbound .conv-msg-att.file{background:rgba(255,255,255,.16);color:#fff}
.conv-msg.outbound .conv-msg-att.file:hover{background:rgba(255,255,255,.26)}
.conv-msg.inbound .conv-msg-att.file{background:var(--main-bg);color:var(--main-text);border:1px solid var(--main-border)}
.conv-msg.inbound .conv-msg-att.file:hover{border-color:var(--purple)}

/* FORMS PANEL */
.forms-panel-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0;padding:0}
.forms-panel-tab{padding:13px 18px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.forms-panel-tab:hover{color:var(--main-text)}
.forms-panel-tab.active{color:var(--purple);border-bottom-color:var(--purple)}

@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* COMING SOON PLACEHOLDER */
.coming-soon-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}
.coming-soon-wrap svg{width:44px;height:44px;opacity:.18;margin-bottom:16px}
.coming-soon-wrap h3{font-family:Exo 2,sans-serif;font-size:17px;font-weight:700;margin-bottom:7px}
.coming-soon-wrap p{font-size:13px;color:var(--text-muted);max-width:320px}
.coming-soon-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;background:var(--purple-dim);color:var(--purple-light);border:1px solid var(--purple-border);margin-bottom:12px}
/* ===== FORM BUILDER ===== */
#fb-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:150;display:flex;flex-direction:column;overflow:hidden;--bg-panel:var(--main-card);--bg-card:var(--main-bg);--bg-card-hover:var(--main-card-hover);--bg-input:var(--main-input);--text:var(--main-text);--text-muted:var(--main-text-muted);--text-dim:var(--main-text-muted);--border:var(--main-border)}
.fb-topbar{height:52px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0}
.fb-name-inp{background:transparent;border:none;color:var(--text);font-family:Exo 2,sans-serif;font-size:15px;font-weight:700;outline:none;flex:1;min-width:0;padding:4px 8px;border-radius:6px;transition:background .15s}
.fb-name-inp:focus{background:var(--bg-input)}
.fb-status-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:5px 9px;font-size:12px;font-family:Lato,sans-serif;outline:none;height:32px}
.fb-body{display:flex;flex:1;overflow:hidden;min-height:0}
.fb-pal{width:190px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;padding:0 0 16px}
@media (max-width:1599px){.fb-pal{width:178px}}
@media (max-width:1199px){.fb-pal{width:164px}}
.fb-pal-search-wrap{position:sticky;top:0;z-index:4;background:var(--bg-panel);padding:10px 10px 8px;border-bottom:1px solid var(--border)}
.fb-pal-search{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:12px;font-family:Lato,sans-serif;padding:7px 9px 7px 30px;outline:none;box-sizing:border-box}
.fb-pal-search:focus{border-color:var(--purple)}
.fb-pal-search-ic{position:absolute;left:19px;top:18px;color:var(--text-dim);pointer-events:none}
.fb-pal-grp{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);padding:11px 12px 6px;cursor:pointer;user-select:none}
.fb-pal-grp:hover{color:var(--text-muted)}
.fb-pal-grp span{flex:1}
.fb-pal-chev{flex-shrink:0;transition:transform .15s}
.fb-pal-chev.closed{transform:rotate(-90deg)}
.fb-pal-grp-count{background:var(--purple-dim);color:var(--purple-light);font-size:9px;padding:1px 6px;border-radius:8px;letter-spacing:0}
.fb-pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 10px}
.fb-pal-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:9px 5px;min-height:54px;cursor:grab;transition:background .12s,border-color .12s;font-size:10.5px;font-weight:500;color:var(--text-muted);user-select:none;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.fb-pal-item:hover{background:var(--main-card);border-color:var(--purple-border);color:var(--text)}
.fb-pal-item:active{cursor:grabbing}
.fb-pal-item svg{width:16px;height:16px;flex-shrink:0;color:var(--purple)}
.fb-pal-item span{line-height:1.25;word-break:break-word}
.fb-pal-newcf{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 20px);margin:8px 10px 0;padding:9px;font-size:11px;font-weight:600;color:var(--purple);background:var(--purple-dim);border:1px dashed var(--purple-border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-newcf:hover{background:var(--purple-soft)}
.fb-pal-empty{font-size:11px;color:var(--text-dim);padding:14px 12px;text-align:center}
.fb-pal-subcat{font-size:10px;font-weight:600;color:var(--text-muted);padding:8px 12px 3px}
.fb-pal-cf-actions{display:flex;gap:5px;padding:8px 10px 0}
.fb-pal-cf-actions .fb-pal-newcf{margin:0;flex:1;width:auto}
.fb-pal-manage{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:9px;font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-family:Lato,sans-serif}
.fb-pal-manage:hover{border-color:var(--purple-border);color:var(--text)}
/* Custom field manager modal */
.cf-mgr-cat{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.cf-mgr-cat-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-card)}
.cf-mgr-cat-name{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-weight:600;padding:6px 8px;outline:none;font-family:Lato,sans-serif}
.cf-mgr-cat-name:focus{border-color:var(--purple)}
.cf-mgr-fields{padding:4px 10px}
.cf-mgr-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-mgr-field-row:last-child{border-bottom:none}
.cf-mgr-field-label{flex:1;font-size:13px;font-weight:500}
.cf-mgr-empty{font-size:12px;color:var(--text-dim);padding:8px 10px}
.cf-mgr-addcat{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cf-mgr-addcat input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;padding:7px 9px;outline:none;font-family:Lato,sans-serif}
.fb-canvas-area{flex:1;overflow-y:auto;padding:28px 32px;background:var(--main-bg);background-image:radial-gradient(rgba(107,33,234,.05) 1px,transparent 1px);background-size:20px 20px}
.fb-pg-tabs-row{display:flex;align-items:center;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.fb-pg-tab{padding:5px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--main-border);color:var(--main-text-muted);background:transparent;font-family:Lato,sans-serif;transition:all .14s;display:flex;align-items:center;gap:5px}
.fb-pg-tab:hover{border-color:var(--purple-border);color:var(--text)}
.fb-pg-tab.active{background:var(--purple-dim);color:var(--purple-light);border-color:var(--purple-border)}
.fb-pg-add{padding:5px 10px;border-radius:20px;font-size:12px;cursor:pointer;border:1px dashed var(--main-border);color:var(--main-text-muted);background:transparent;font-family:Lato,sans-serif}
.fb-pg-add:hover{border-color:var(--purple-border);color:var(--purple-light)}
.fb-canvas-center{max-width:800px;margin:0 auto}
.fb-page-canvas{background:#ffffff;border-radius:12px;padding:22px;min-height:280px;transition:background .2s;box-shadow:0 1px 3px rgba(26,16,48,.06),0 8px 28px rgba(26,16,48,.08)}
.fb-page-canvas.dz-active{outline:2px solid var(--purple);outline-offset:2px}
.fb-canvas-title{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:16px;pointer-events:none;word-break:break-word}
.fb-canvas-submit{margin-top:20px;pointer-events:none}
.fb-editing-pill{position:absolute;top:-8px;left:10px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--purple);padding:1px 7px;border-radius:4px;pointer-events:none;z-index:3}
.fb-fields-wrap{position:relative}
.fb-dropzone{height:6px;margin:0;position:relative;z-index:2;border-radius:3px;transition:height .12s,background .12s}
.fb-dropzone.dz-over{height:24px;background:var(--purple-dim)}
.fb-dz-line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--purple);border-radius:1px;transform:translateY(-50%);opacity:0;transition:opacity .1s}
.fb-dropzone.dz-over .fb-dz-line{opacity:1}
/* Shared drag-to-reorder drop-line indicator. box-shadow draws the line with no
   layout shift (a border would push the row and feel sluggish). The line sits on
   the edge nearest the cursor so it shows exactly where the item will land. */
.dnd-line-above{box-shadow:inset 0 2px 0 0 var(--purple)}
.dnd-line-below{box-shadow:inset 0 -2px 0 0 var(--purple)}
.fb-fields-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-flow:row dense}
.fb-field-wrap{position:relative;grid-column:span 2}
.fb-field-wrap.half-w{grid-column:span 1}
.fb-dropzone{grid-column:span 2}
.fb-fc{position:relative;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:var(--radius);padding:9px 11px;cursor:pointer;transition:border-color .14s,box-shadow .14s;display:flex;align-items:flex-start;gap:8px}
.fb-fc:hover{border-color:#aaa}
.fb-fc.sel{border-color:var(--purple);box-shadow:0 0 0 2px rgba(107,33,234,.15)}
.fb-fc.is-dragging{opacity:.3;border-style:dashed}
.fb-fc .dh{color:#bbb;cursor:grab;flex-shrink:0;padding-top:1px}
.fb-fc:hover .dh{color:#888}
.fb-fc .dh:active{cursor:grabbing}
.fb-fc .fp{flex:1;min-width:0}
.fb-fc .ft{font-size:9px;font-weight:700;text-transform:uppercase;color:#bbb;flex-shrink:0;padding-top:2px}
.fb-fc .fa{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s}
.fb-fc:hover .fa,.fb-fc.sel .fa{opacity:1}
.fb-fc .fa .icon-btn-xs{color:#888}
.fb-fc .fa .icon-btn-xs:hover{color:#ff4000;background:rgba(255,64,0,.08)}
.fb-lbl{font-size:11px;font-weight:600;color:#222;margin-bottom:3px}
.fb-lbl .req{color:#ff4000;margin-left:2px}
.fb-mi{height:26px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px}
.fb-mita{height:48px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:5px}
.fb-msel{height:26px;background:#f8f8f8;border:1px solid var(--text-disabled);border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:10px;color:#bbb;justify-content:space-between}
.fb-mopt{display:flex;align-items:center;gap:5px;font-size:11px;color:#666;padding:2px 0}
.fb-mopt-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-mopt-box{width:11px;height:11px;border-radius:3px;border:1.5px solid var(--text-disabled);flex-shrink:0}
.fb-empty-drop{border:2px dashed var(--text-disabled);border-radius:var(--radius);padding:32px 20px;text-align:center;color:var(--main-text-muted);font-size:13px}
.fb-sp{width:480px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
@media (max-width:1599px){.fb-sp{width:340px}}
@media (max-width:1199px){.fb-sp{width:260px}}
.fb-sp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.fb-sp-t{flex:1;padding:10px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;background:none;border:none;color:var(--text-muted);font-family:Lato,sans-serif;border-bottom:2px solid transparent;transition:all .15s}
.fb-sp-t.active{color:var(--orange);border-bottom-color:var(--orange)}
.fb-sp-t.is-disabled{opacity:.4}
.fb-sp-body{padding:12px;flex:1}
.fb-sl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:10px 0 4px;display:block}
.fb-si{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px}
.fb-si:focus{border-color:var(--purple)}
.fb-ss{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:7px 9px;font-family:Lato,sans-serif;font-size:13px;outline:none;margin-bottom:8px;height:36px}
.fb-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:2px 0}
.fb-toggle-lbl{font-size:13px;font-weight:500}
.fb-opt-item{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.fb-opt-item input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 7px;font-size:12px;outline:none;font-family:Lato,sans-serif}
.fb-cond-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:9px;margin-bottom:6px}
.fb-cond-selects{display:flex;gap:4px;margin-bottom:5px;flex-wrap:wrap}
.fb-cond-selects select{flex:1;min-width:64px;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:4px 6px;font-size:11px;outline:none;font-family:Lato,sans-serif;height:28px}
.fb-cond-val{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:4px 6px;font-size:11px;outline:none;font-family:Lato,sans-serif}
.fb-col-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-col-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-col-btn.active{background:var(--purple);color:#fff}
.fb-divider{height:1px;background:var(--border);margin:10px 0}
/* Form list */
.fb-list-card{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.fb-list-card:hover{border-color:var(--purple-border)}
.fb-list-icon{width:38px;height:38px;border-radius:var(--radius);background:var(--purple-dim);border:1px solid var(--purple-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Embed panel */
.fb-code-block{background:var(--main-bg);border:1px solid var(--main-border);border-radius:var(--radius);padding:12px;font-family:monospace;font-size:11px;color:var(--main-text);white-space:pre-wrap;word-break:break-all;max-height:160px;overflow-y:auto;line-height:1.6;margin-bottom:8px}
/* Submissions */
.fb-sub-row{background:var(--main-card);border:1px solid var(--main-border);color:var(--main-text);border-radius:var(--radius);padding:10px 14px;margin-bottom:6px;cursor:pointer;transition:border-color .14s,background .14s;display:flex;align-items:flex-start;gap:12px}
.fb-sub-row:hover{background:var(--main-card-hover);border-color:var(--purple-border)}
/* Preview overlay */
.fb-prev-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.fb-prev-card{background:#f4f4f8;border-radius:14px;width:100%;max-width:800px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* #form-embed:start (extracted into book.mysparkplus.app/form.html by scripts/frontend/build-form-embed.js; uses --text-disabled, --purple, --orange, defined in that shell's :root) */
.fb-form-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;grid-auto-flow:row dense}
.fb-form-fields-grid > .fb-prev-field{grid-column:span 2}
.fb-form-fields-grid > .fb-prev-field.half-w{grid-column:span 1}
.fb-form-fields-grid > hr{grid-column:span 2}
.fb-prev-head{padding:22px 24px 16px;border-bottom:1px solid #e0e0e8}
.fb-prev-head h2{font-size:18px;font-weight:700;color:#111;margin:0}
.fb-prev-body{padding:20px 24px 28px}
.fb-prev-field{margin-bottom:16px}
.fb-prev-label{display:block;font-size:13px;font-weight:600;color:#222;margin-bottom:5px}
.fb-prev-label .req{color:#ff4000}
.fb-prev-input{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;transition:border-color .2s}
.fb-prev-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(107,33,234,.1)}
.fb-prev-select{width:100%;border:1px solid var(--text-disabled);border-radius:7px;padding:9px 12px;font-size:14px;color:#111;background:#fff;outline:none;font-family:Lato,sans-serif;height:42px}
.fb-prev-opt-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:#333;cursor:pointer}
.fb-prev-opt-row input{width:16px;height:16px;cursor:pointer;accent-color:var(--purple)}
.fb-prev-submit{display:inline-block;padding:11px 28px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:Lato,sans-serif;transition:filter .15s}
.fb-prev-submit:hover{filter:brightness(1.1)}
.fb-prev-tnc{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#444}
.fb-prev-tnc input{margin-top:2px;width:15px;height:15px;cursor:pointer;accent-color:var(--purple)}
.fb-prev-sig{width:100%;height:100px;border:1px solid var(--text-disabled);border-radius:7px;background:#fff;cursor:crosshair}
/* #form-embed:end */
.fb-pg-indicator{display:flex;align-items:center;gap:6px;margin-bottom:16px;justify-content:center}
.fb-pg-dot{width:8px;height:8px;border-radius:50%;background:#ddd;transition:background .2s}
.fb-pg-dot.active{background:var(--purple);width:20px;border-radius:4px}

/* RICH TEXT EDITOR */
.fb-rte-wrap{border:1px solid var(--text-disabled);border-radius:8px;overflow:hidden;margin-bottom:8px}
.fb-rte-bar{display:flex;gap:2px;padding:5px 7px;background:#f0f0f4;border-bottom:1px solid var(--text-disabled);flex-wrap:wrap}
.fb-rte-btn{padding:3px 8px;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:12px;font-weight:600;color:#444;font-family:Lato,sans-serif;transition:background .12s}
.fb-rte-btn:hover{background:#ddd}
.fb-rte-body{min-height:80px;max-height:160px;overflow-y:auto;padding:10px 12px;font-size:13px;color:#222;line-height:1.6;outline:none;background:#fff}
.fb-rte-body a{color:var(--purple)}
/* FILE TYPE CHECKBOXES */
.fb-file-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:6px}
.fb-file-chk{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);cursor:pointer;padding:2px 0}
.fb-file-chk input{width:13px;height:13px;cursor:pointer;accent-color:var(--purple);flex-shrink:0}
/* CONTENT ELEMENT PREVIEWS */
.fb-content-el{padding:8px 10px;border-radius:var(--radius);background:#f4f4f8}
.fb-content-header{font-weight:700;color:#111;line-height:1.3}
.fb-content-para{font-size:13px;color:#555;line-height:1.6}
.fb-content-divider{border:none;border-top:1.5px solid var(--text-disabled);margin:4px 0}
/* ALIGNMENT ROW */
.fb-align-row{display:flex;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
.fb-align-btn{flex:1;padding:6px;font-size:11px;font-weight:600;cursor:pointer;background:transparent;border:none;color:var(--text-muted);font-family:Lato,sans-serif;text-align:center;transition:all .12s}
.fb-align-btn.active{background:var(--purple);color:#fff}
/* CUSTOM FIELDS */
.cf-cat-section{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:8px;overflow:hidden}
.cf-cat-head{display:flex;align-items:center;gap:8px;padding:10px 14px;user-select:none}
.cf-cat-name{font-size:13px;font-weight:600;flex:1}
.cf-cat-count{font-size:11px;color:var(--text-muted)}
.cf-cat-body{padding:10px 14px;border-top:1px solid var(--border)}
.cf-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.cf-field-row:last-child{border-bottom:none}
.cf-field-key{font-size:10px;font-family:monospace;color:var(--text-muted);background:var(--bg-card);padding:2px 6px;border-radius:4px;flex-shrink:0}
.cf-field-type-badge{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 5px;border-radius:3px;background:var(--purple-dim);color:var(--purple-light);flex-shrink:0}
/* CONTACT DRAWER CUSTOM FIELDS */
.drawer-cf-section{margin-bottom:4px}
.drawer-cf-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-top:22px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text);transition:color .14s}
.drawer-cf-head:hover{color:var(--purple)}
.drawer-cf-body{padding:10px 12px}
.drawer-cf-label{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;display:block;margin-bottom:3px}
.drawer-cf-inp{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;font-family:Lato,sans-serif;margin-bottom:8px}
.drawer-cf-inp:last-child{margin-bottom:0}

/* STAFF PANEL */
.staff-tabs{display:flex;background:var(--subnav-bar);border-bottom:2px solid var(--divider);margin:-22px -24px 22px;flex-shrink:0}
.staff-tab{padding:14px 20px;font-size:13px;font-weight:600;color:var(--main-text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;background:none;border-top:none;border-left:none;border-right:none;font-family:Lato,sans-serif;white-space:nowrap}
.staff-tab:hover{color:var(--main-text)}
.staff-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.staff-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px}
.staff-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.add-tile{border:2px dashed var(--border);border-radius:var(--radius-lg);background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:120px;color:var(--main-text-muted);font-weight:600;transition:border-color .15s,color .15s}
.add-tile:hover{border-color:var(--purple);color:var(--purple)}
.staff-card-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Exo 2,sans-serif;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.staff-card-name{font-size:14px;font-weight:700}
.staff-card-pos{font-size:12px;font-weight:600;color:var(--text);min-height:15px}.staff-card-role{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.staff-card-sched{font-size:11px;color:var(--text-muted);margin-top:2px}
.staff-pending-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--warning-dim);color:var(--warning-light);border:1px solid var(--warning);border-radius:var(--radius-full);padding:2px 10px;margin-top:2px;cursor:default}
/* REPORTING TABLE */
.rpt-filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.rpt-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.rpt-table th{text-align:left;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg)}
.rpt-table td{padding:10px 12px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.rpt-table tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--main-border)}
.data-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--main-card)}
.data-table th{text-align:left;padding:10px 16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);background:var(--main-bg);white-space:nowrap}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--main-border);vertical-align:middle;color:var(--main-text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:var(--main-card-hover)}
.rpt-total-row td{font-weight:700;background:var(--main-bg);color:var(--main-text)}
/* WEEK SCHEDULE DASHBOARD */
.dash-week{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;box-shadow:0 2px 12px rgba(107,33,234,.07)}
.dash-week-title{font-family:'Exo 2',sans-serif;font-size:13px;font-weight:700;color:var(--main-text);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.week-day-col{margin-bottom:12px}
.week-day-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:5px}
.week-day-label.is-today{color:var(--purple)}
.week-appt-item{background:var(--bg-card);border-radius:6px;padding:7px 10px;margin-bottom:4px;border-left:3px solid var(--purple);display:flex;align-items:center;gap:8px}
.week-appt-time{font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0;min-width:52px}
.week-appt-title{font-size:13px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.week-no-appts{font-size:12px;color:var(--text-dim);padding:4px 0}
/* AGENCY DASHBOARD TABS */
.agency-tab-bar{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:0 32px;display:flex;gap:0;align-items:flex-end}
.agency-tab{background:transparent;border:none;color:var(--text-muted);padding:14px 20px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;letter-spacing:0.02em;transition:color .15s}
.agency-tab:hover{color:var(--text)}
.agency-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.agency-tab-content{padding:28px 32px}
/* Agency Users master-detail panel */
.au-wrap{display:flex;gap:0;border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--main-card);min-height:520px}
.au-side{width:260px;flex-shrink:0;border-right:1px solid var(--main-border);display:flex;flex-direction:column;background:rgba(107,33,234,.06)}
.au-side-search{padding:16px 14px;border-bottom:1px solid var(--main-border)}
.au-side-list{overflow-y:auto;flex:1}
.au-side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--main-border);font-size:13px;color:var(--main-text);transition:background .12s}
.au-side-item:hover{background:var(--main-card-hover)}
.au-side-item.active{background:var(--purple-dim);border-left:3px solid var(--orange);padding-left:11px}
.au-side-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-side-badge{font-size:11px;color:var(--main-text-muted);flex-shrink:0;font-weight:600}
.au-main{flex:1;display:flex;flex-direction:column;min-width:0}
.au-toolbar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--main-border);flex-wrap:wrap}
.au-toolbar .input{flex:1;min-width:200px}
.au-table{width:100%;border-collapse:collapse;font-size:13px}
.au-table th{text-align:left;padding:10px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);border-bottom:1px solid var(--main-border);font-weight:700}
.au-table td{padding:13px 16px;border-bottom:1px solid var(--main-border);color:var(--main-text);vertical-align:middle}
.au-table tr:hover td{background:var(--main-card-hover)}
.au-pill-ok{display:inline-block;background:var(--success-dim);color:var(--success-text);border:1px solid var(--success);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pill-pending{display:inline-block;background:var(--warning-dim);color:var(--warning-text);border:1px solid var(--warning);font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full)}
.au-pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}
.au-empty{padding:48px 24px;text-align:center;color:var(--main-text-muted);font-size:14px}
.au-wrap .input{padding:11px 14px}
.au-side-item{padding-top:13px;padding-bottom:13px}
.agency-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.agency-toolbar input[type="text"],.agency-toolbar select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 10px;font-size:13px;height:34px;font-family:inherit}
.agency-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.agency-stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}
.agency-stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px}
.agency-stat-value{font-family:Exo 2,sans-serif;font-size:26px;font-weight:800;color:var(--text)}
.agency-stat-sub{font-size:12px;color:var(--text-muted);margin-top:4px}

/* BOOKING WIDGETS */
.booking-widget-placeholder{background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;color:var(--text-muted)}
/* CUSTOM FIELD READ-ONLY */
.cf-ro-val{font-size:13px;color:var(--text);padding:3px 0;min-height:20px;word-break:break-word}
.cf-ro-val.empty{color:var(--text-dim);font-style:italic}

/* CALENDAR SCHEDULE BLOCKS */
.cal-sched-off{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--danger-light);background:#f8717115;border-radius:3px;padding:1px 5px;margin-bottom:2px;letter-spacing:.04em}
.cal-sched-custom{font-size:9px;font-weight:700;color:var(--success-light);background:#34d39915;border-radius:3px;padding:1px 5px;margin-bottom:2px}
.cal-sched-closed{font-size:9px;color:var(--text-dim);padding:1px 4px;margin-bottom:2px;font-style:italic}
.cal-off-block{position:absolute;left:2px;right:2px;border-radius:5px;padding:5px 7px;font-size:11px;font-weight:700;z-index:3;pointer-events:none;overflow:hidden}
.cal-off-block-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.cal-off-block-reason{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:400;opacity:.8}
.cal-off-banner{font-size:10px;padding:3px 8px;display:flex;flex-wrap:wrap;gap:4px;background:rgba(248,113,113,.07);border-bottom:1px solid rgba(248,113,113,.12)}
.cal-off-pill{display:flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600}
.off-day-overlay{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(248,113,113,.08) 4px,rgba(248,113,113,.08) 8px);pointer-events:none;border-radius:4px}
/* AM/PM TIME HINT */
.bh-time-fmt{font-size:10px;color:var(--text-muted);min-width:52px;font-weight:600;display:inline-block;margin-left:4px}
/* ACCOUNT CREDITS */
.credit-balance-card{background:linear-gradient(135deg,#6b21ea22,#ff400012);border:1px solid var(--purple-border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.credit-balance-amt{font-family:Exo 2,sans-serif;font-size:22px;font-weight:800;color:var(--purple-light)}
.credit-balance-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.credit-hist-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.credit-hist-row:last-child{border-bottom:none}
.credit-pos{color:var(--success-light);font-weight:700}
.credit-neg{color:var(--danger-light);font-weight:700}
.dpay-tile{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.dpay-tile-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.dpay-tile-val{font-family:Exo 2,sans-serif;font-size:18px;font-weight:800;color:var(--text);line-height:1.2}

/* Media Library */
.media-grid-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:14px}
.media-tile{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}
.media-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(107,33,234,.1)}
.media-thumb{height:120px;display:flex;align-items:center;justify-content:center;background:var(--main-bg);overflow:hidden;position:relative}
.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-thumb-icon{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--main-text-muted)}
.media-thumb-ext{font-family:Exo 2,sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff}
.media-tile-info{padding:8px 10px}
.media-tile-name{font-size:12px;font-weight:600;color:var(--main-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.media-tile-meta{font-size:10px;color:var(--main-text-muted);display:flex;justify-content:space-between}
.media-list-table{width:100%;border-collapse:collapse;margin-top:14px;background:var(--main-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--main-border)}
.media-list-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);background:var(--main-bg);border-bottom:1px solid var(--main-border)}
.media-list-table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--main-border);color:var(--main-text)}
.media-list-table tr:last-child td{border-bottom:none}
.media-list-table tr:hover{background:var(--main-card-hover)}
.media-list-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:800;color:#fff;text-transform:uppercase}
.media-empty{text-align:center;padding:48px 20px;color:var(--main-text-muted)}
.media-empty svg{margin:0 auto 12px;display:block;opacity:.3}
.media-drop-zone{border:2px dashed var(--purple-border);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.media-drop-zone:hover,.media-drop-zone.dragover{background:rgba(107,33,234,.04);border-color:var(--purple)}
.media-drop-zone svg{margin:0 auto 10px;display:block;color:var(--purple-light)}
.media-progress-wrap{margin-top:14px;background:var(--main-bg);border-radius:var(--radius);overflow:hidden;height:6px}
.media-progress-bar{height:100%;background:var(--orange);width:0%;transition:width .2s}
.media-crumb{display:flex;align-items:center;gap:10px;margin:14px 0 4px}
.media-crumb-label{font-size:13px;font-weight:700;color:var(--main-text)}
.media-folder-row{cursor:pointer}
.media-folder-ico{background:var(--purple) !important}
.media-folder-tile .media-thumb{background:var(--main-bg)}
.media-folder-thumb{color:var(--purple-light)}
.media-tile[draggable="true"]{cursor:grab}
.media-tile[draggable="true"]:active{cursor:grabbing}
.media-list-table tr[draggable="true"]{cursor:grab}
.media-drop-hot{background:rgba(107,33,234,.10) !important;box-shadow:inset 0 0 0 2px var(--purple)}
.media-folder-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 4px}
.media-folder-bar-hint{font-size:11px;color:var(--main-text-muted);margin:0 0 2px}
.media-folder-pill{font-size:12px;font-weight:600;color:var(--main-text);background:var(--main-card);border:1px solid var(--main-border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .12s,border-color .12s}
.media-folder-pill:hover{background:var(--main-card-hover)}
.media-folder-pill.is-active{border-color:var(--purple);color:var(--purple-light)}
.media-folder-pill.is-home{display:inline-flex;align-items:center;gap:5px;background:rgba(107,33,234,.10);border-color:var(--purple);color:var(--purple-light)}
.media-folder-pill.is-home:hover{background:rgba(107,33,234,.16)}
.media-folder-pill.is-home svg{width:13px;height:13px}
/* DRILL-DOWN TABLE */
.drill-table{width:100%;border-collapse:collapse;font-size:12px}
.drill-table th{text-align:left;padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.drill-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.drill-table tr:last-child td{border-bottom:none}
/* MY WEEK REDESIGN */
.week-sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.week-sched-day{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center}
.week-sched-day.is-today{border-color:var(--purple);background:rgba(107,33,234,.08)}
.week-sched-day-name{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;letter-spacing:.05em}
.week-sched-day-num{font-size:18px;font-weight:800;font-family:Exo 2,sans-serif;line-height:1;margin-bottom:6px}
.week-sched-status{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-bottom:3px;display:inline-block}
.sched-on{background:#34d39920;color:var(--success-light)}
.sched-off{background:#f8717120;color:var(--danger-light)}
.sched-custom{background:#fbbf2420;color:var(--warning-light)}
.week-sched-hours{font-size:10px;color:var(--text-muted);line-height:1.4}

/* MULTI-COLUMN DAY VIEW */
.cal-mc-col{flex:1;min-width:180px;border-left:1px solid var(--main-border);display:flex;flex-direction:column}
/* === CALENDAR DRAG === */
.timed-ev[draggable="true"]{cursor:grab}
.timed-ev[draggable="true"]:active{cursor:grabbing}
.timed-ev[data-cal-drag="1"]{cursor:grab}
.timed-ev[data-cal-drag="1"]:active{cursor:grabbing}
.timed-ev.cal-dragging{opacity:.4}
.cal-drop-target{position:absolute;left:3px;right:3px;border-radius:6px;pointer-events:none;z-index:5;transition:top .05s ease}
.cal-drop-target.ok{background:rgba(52,211,153,.20);border:2px dashed var(--success);box-shadow:0 0 0 2px rgba(52,211,153,.15)}
.cal-drop-target.bad{background:rgba(248,113,113,.20);border:2px dashed var(--danger);box-shadow:0 0 0 2px rgba(248,113,113,.15)}
.cal-drop-target-label{position:absolute;top:4px;left:8px;font-size:11px;font-weight:700;color:var(--main-text);background:var(--main-card);padding:2px 6px;border-radius:4px;box-shadow:var(--shadow-sm)}
.cal-drop-confirm{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:10000;min-width:280px;max-width:340px}
.cal-drop-confirm-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 8px}
.cal-drop-confirm-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.cal-drop-confirm-row strong{color:var(--main-text)}
.cal-drop-confirm-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.cal-ev[draggable="true"]{cursor:grab}
.cal-ev[draggable="true"]:active{cursor:grabbing}
.cal-ev.cal-dragging{opacity:.4}
.cal-cell.cal-drop-cell-ok{background:rgba(52,211,153,.18) !important;box-shadow:inset 0 0 0 2px var(--success)}
.cal-cell.cal-drop-cell-bad{background:rgba(248,113,113,.18) !important;box-shadow:inset 0 0 0 2px var(--danger)}
.cal-drop-confirm-time-input{padding:4px 8px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:12px;font-weight:700;width:90px;text-align:right;font-family:inherit}
.cal-drop-confirm-time-input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-ctx-menu{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:4px;z-index:10000;min-width:160px}
.cal-ctx-menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;color:var(--main-text);cursor:pointer;border-radius:var(--radius-sm)}
.cal-ctx-menu-item:hover{background:var(--main-card-hover)}
.cal-move-picker{position:fixed;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px;z-index:10001;min-width:260px}
.cal-move-picker-title{font-size:13px;font-weight:700;color:var(--main-text);margin:0 0 10px}
.cal-move-picker-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cal-move-picker-row label{font-size:11px;color:var(--main-text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.cal-move-picker-row input{padding:8px 10px;border:1px solid var(--main-border);border-radius:var(--radius-sm);background:var(--main-input);color:var(--main-text);font-size:13px;font-family:inherit}
.cal-move-picker-row input:focus{outline:none;border-color:var(--purple);box-shadow:var(--focus-ring)}
.cal-move-picker-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.cal-mc-head{height:56px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--divider);background:var(--subnav-bar);position:sticky;top:0;z-index:2;flex-shrink:0}
.cal-mc-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Exo 2,sans-serif;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.cal-mc-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--main-text)}
.cal-mc-role{font-size:10px;color:var(--main-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* MANAGE VIEW PANEL */
.cal-manage-panel{width:280px;position:fixed;top:0;right:0;height:100vh;background:var(--main-card);border-left:1px solid var(--main-border);overflow-y:auto;z-index:200;box-shadow:-4px 0 20px rgba(0,0,0,.35);display:flex;flex-direction:column;color:var(--main-text)}
.cal-manage-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--divider);flex-shrink:0}
.cal-manage-head-title{font-family:Exo 2,sans-serif;font-size:14px;font-weight:700}
.cal-manage-section{padding:12px 16px;border-bottom:1px solid var(--divider)}
.cal-manage-section-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--main-text-muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.cal-staff-row{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .1s}
.cal-staff-row:hover{background:var(--main-card-hover)}
.cal-sf-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cal-sf-name{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-sf-role{font-size:10px;color:var(--main-text-muted);flex-shrink:0}
.cal-sf-cb{accent-color:var(--purple);width:14px;height:14px;cursor:pointer;flex-shrink:0}
.cal-manage-panel .icon-btn-xs{color:var(--main-text-muted)}
.cal-manage-btn{padding:6px 12px;font-size:12px;font-weight:600;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius);color:var(--main-text);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:Lato,sans-serif;transition:all .12s;white-space:nowrap}
.cal-manage-btn:hover{background:var(--main-card-hover);border-color:var(--purple-border);color:var(--main-text)}
.cal-manage-btn.active{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple-light)}
.cal-body-outer{display:block}
.svc-ms-wrap{position:relative}
.svc-ms-display{min-height:38px;border:1px solid var(--main-input-border);border-radius:6px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--main-input)}
.svc-ms-chips{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:22px}
.svc-ms-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap}
.svc-ms-arrow{color:var(--text-muted);font-size:11px;flex-shrink:0;margin-left:4px}
.svc-ms-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--main-card);border:1px solid var(--main-border);border-radius:6px;z-index:500;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.svc-ms-search{width:100%;border:none;border-bottom:1px solid var(--main-border);padding:8px 10px;background:transparent;color:var(--main-text);font-size:12px;outline:none;box-sizing:border-box}
.svc-ms-options{max-height:180px;overflow-y:auto}
.svc-ms-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:var(--main-text)}
.svc-ms-opt:hover{background:var(--main-bg)}
.svc-ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} /* unused */
/* ── Tabbed widget editor + ordered service list ─────────────────────────── */
.swg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--main-border);margin-bottom:14px;padding:0 0 0 2px}
.swg-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;text-transform:none}
.swg-tab:hover{color:var(--text)}
.swg-tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.swg-tab-badge{display:inline-block;background:var(--main-bg);color:var(--text-muted);font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;margin-left:6px;min-width:14px;text-align:center}
.swg-tab.active .swg-tab-badge{background:var(--purple);color:#fff}
.swg-tab-pane{display:none}
.swg-tab-pane.active{display:flex;flex-direction:column;gap:14px}
.swg-svc-add-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.swg-svc-add-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--purple);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.swg-svc-add-btn:hover{filter:brightness(1.1)}
.swg-svc-add-wrap{position:relative}
.swg-svc-add-pop{position:absolute;top:calc(100% + 4px);left:0;width:340px;max-width:calc(100vw - 32px);background:var(--main-card);color:var(--main-text);border:1px solid var(--main-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:600;overflow:hidden;display:flex;flex-direction:column;max-height:420px}
.swg-svc-add-search{width:100%;border:none;border-bottom:1px solid var(--main-border);padding:9px 12px;background:transparent;color:var(--main-text);font-size:13px;outline:none;box-sizing:border-box;flex-shrink:0}
.swg-svc-add-search::placeholder{color:#8a7fb0}
.swg-svc-add-list{overflow-y:auto;flex:1;min-height:60px}
.swg-svc-add-cathdr{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f4f1fb;font-size:11px;font-weight:700;color:var(--main-text);text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--main-border)}
.swg-svc-add-catbtn{font-size:11px;font-weight:600;color:var(--purple);background:none;border:none;cursor:pointer;text-transform:none;letter-spacing:0;padding:0}
.swg-svc-add-catbtn:hover{text-decoration:underline}
.swg-svc-add-row{display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--main-text);border-bottom:1px solid rgba(0,0,0,.04)}
.swg-svc-add-row:hover{background:#f7f4fc}
.swg-svc-add-row input[type=checkbox]{margin:0;flex-shrink:0;cursor:pointer}
.swg-svc-add-row .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.swg-svc-add-empty{padding:20px 14px;text-align:center;font-size:12px;color:var(--main-text-muted)}
.swg-svc-add-foot{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#f4f1fb;border-top:1px solid var(--main-border);flex-shrink:0;font-size:12px}
.swg-svc-add-foot .ct{color:var(--main-text);font-weight:600}
.swg-svc-add-foot .acts{display:flex;gap:6px}
.swg-svc-add-foot button{font-size:12px;font-weight:600;padding:5px 12px;border-radius:5px;border:none;cursor:pointer}
.swg-svc-add-foot .cancel{background:transparent;color:var(--main-text-muted)}
.swg-svc-add-foot .ok{background:var(--purple);color:#fff}
.swg-svc-add-foot .ok:disabled{opacity:.45;cursor:not-allowed}
.swg-svc-list{display:flex;flex-direction:column;gap:6px;background:#f4f1fb;border-radius:8px;padding:8px;border:1px solid var(--main-border);min-height:280px;color:var(--main-text)}
.swg-svc-list-empty{padding:28px 14px;text-align:center;font-size:12px;color:var(--main-text-muted);font-style:italic}
.swg-svc-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--main-border);border-radius:6px;color:var(--main-text);transition:box-shadow .15s,opacity .15s}
.swg-svc-row[draggable=true]{cursor:grab}
.swg-svc-row.is-drag{opacity:.4}
.swg-svc-row.drop-above{border-top:2px solid var(--purple)}
.swg-svc-row.drop-below{border-bottom:2px solid var(--purple)}
.swg-svc-handle{color:#8a7fb0;font-size:14px;line-height:1;cursor:grab;user-select:none;padding:0 2px}
.swg-svc-row .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.swg-svc-name{flex:1;font-size:13px;font-weight:600;color:var(--main-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swg-svc-cat{font-size:10px;font-weight:700;color:var(--main-text-muted);background:#f4f1fb;border:1px solid var(--main-border);padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;white-space:nowrap}
.swg-svc-rm{background:transparent;border:none;color:#8a7fb0;font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1}
.swg-svc-rm:hover{background:rgba(248,113,113,.12);color:var(--danger-light)}
.cal-appt-count{font-size:10px;font-weight:600;color:var(--orange);margin-top:1px}
.tpl-list{display:flex;flex-direction:column;gap:8px}
.tpl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--main-border,rgba(107,33,234,.12));border-radius:8px;cursor:pointer;transition:border-color .15s}
.tpl-row:hover{border-color:var(--purple)}
.tpl-row.active{border-color:var(--purple);background:#faf8ff}
.tpl-row-name{flex:1;font-size:14px;font-weight:600;color:var(--main-text)}
.tpl-row-sub{font-size:12px;color:var(--main-text-muted);margin-top:2px}
.tpl-editor{max-width:700px}
.tpl-toolbar{display:flex;gap:4px;padding:6px 8px;background:var(--main-bg,#f2f0f8);border:1px solid var(--main-border,rgba(107,33,234,.12));border-bottom:none;border-radius:6px 6px 0 0;flex-wrap:wrap;align-items:center}
.tpl-tb-btn{background:none;border:1px solid transparent;border-radius:4px;padding:3px 7px;font-size:12px;cursor:pointer;color:var(--main-text);font-family:inherit;transition:background .15s}
.tpl-tb-btn:hover{background:#6b21ea22;border-color:var(--purple);color:var(--purple)}
.tpl-tb-sep{width:1px;height:18px;background:var(--main-border,rgba(107,33,234,.12));margin:0 4px}
.tpl-body{min-height:220px;padding:12px;border:1px solid var(--main-border);border-radius:0 0 6px 6px;background:#fff;font-size:14px;line-height:1.6;color:var(--main-text);outline:none;font-family:Arial,sans-serif}
.tpl-preview{background:#fff;border:1px solid var(--main-border);border-radius:6px;padding:20px;font-size:14px;line-height:1.6;color:var(--main-text);margin-top:16px;max-width:700px}
.tpl-preview-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);margin-bottom:8px}
.var-picker{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.var-chip{background:#6b21ea15;color:var(--purple);border:1px solid #6b21ea33;border-radius:4px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:monospace;transition:background .15s}
.var-chip:hover{background:#6b21ea30}
.settings-tab-bar{display:flex;gap:2px;margin-bottom:20px;border-bottom:2px solid var(--main-border,rgba(107,33,234,.12))}
.stab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;color:var(--main-text-muted);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:-2px;transition:color .15s,border-color .15s;font-family:inherit;letter-spacing:.01em}
.stab:hover{color:var(--main-text)}
.stab.active{color:var(--purple);border-bottom-color:var(--purple)}
.email-wizard{max-width:560px}
.dns-rec-row{background:var(--main-bg,#f2f0f8);border:1px solid var(--main-border,rgba(107,33,234,.12));border-radius:6px;padding:12px 14px;margin-bottom:10px}
.dns-rec-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--main-text-muted);margin-bottom:3px}
.dns-rec-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dns-rec-type{font-size:10px;font-weight:700;background:#6b21ea22;color:var(--purple);border-radius:3px;padding:1px 6px;letter-spacing:.04em}
.dns-rec-val{font-family:monospace;font-size:12px;color:var(--main-text);word-break:break-all;line-height:1.5;flex:1}
.dns-rec-copy{flex-shrink:0;background:none;border:1px solid var(--main-border);border-radius:4px;padding:3px 10px;font-size:11px;cursor:pointer;color:var(--main-text-muted);transition:background .15s;font-family:inherit}
.dns-rec-copy:hover{background:#6b21ea22;color:var(--purple);border-color:var(--purple)}
.domain-verified-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,.12);color:#059669;border:1px solid rgba(52,211,153,.3);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:600;margin-bottom:16px}

/* CONTACT IMPORT */
.import-upload-zone{border:2px dashed var(--border);border-radius:var(--radius);
  padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.import-upload-zone:hover,.import-upload-zone.drag-over{border-color:var(--purple-border);background:var(--purple-dim)}
.import-map-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.import-map-table th{text-align:left;padding:6px 10px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border)}
.import-map-table td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.import-map-sel{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;font-size:12px;color:var(--text);outline:none;width:100%}
.import-map-sel:focus{border-color:var(--purple-border)}
.import-stat-card{flex:1;border-radius:10px;padding:14px;text-align:center}
.import-stat-num{font-size:26px;font-weight:700;line-height:1}
.import-stat-label{font-size:12px;margin-top:4px}
.import-dupe-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px}
.import-dupe-row{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-bottom:1px solid var(--border)}
.import-dupe-row:last-child{border-bottom:none}


/* ============================================================
   Help Center
   ============================================================ */
.help-root {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  height: 100%;
  min-height: 500px;
  background: var(--main-bg);
  color: var(--main-text);
}
@media (max-width: 768px) {
  .help-root { grid-template-columns: 1fr; }
  .help-sidebar { border-right: none; border-bottom: 1px solid var(--main-border); padding-bottom: 16px; }
}

.help-sidebar {
  padding: 16px 12px 16px 0;
  border-right: 1px solid var(--main-border);
  overflow-y: auto;
}
.help-sidebar h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--main-text-muted);
  margin: 4px 0 8px 12px;
  font-weight: 600;
}
.help-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--main-text);
  user-select: none;
  transition: background 0.12s;
}
.help-cat:hover { background: var(--main-card-hover); }
.help-cat.active { background: var(--purple-dim); color: var(--purple); font-weight: 600; }
.help-cat .help-cat-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.help-cat .help-cat-admin { margin-left: auto; font-size: 9px; text-transform: uppercase; opacity: 0.7; letter-spacing: 0.5px; font-weight: 700; color: var(--purple); }
.help-support-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--main-border); }
.help-support-block .help-support-hint { font-size: 11px; color: var(--main-text-muted); margin: 0 12px 8px; line-height: 1.4; }
.help-support-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--purple);
  background: var(--purple-dim);
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.help-support-btn:hover { background: var(--purple); color: #ffffff; }
.help-support-btn .help-support-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }

.help-content { padding: 16px 4px 32px; overflow-y: auto; }

.help-search-wrap { position: relative; margin-bottom: 20px; }
.help-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--main-input-border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--main-input);
  color: var(--main-text);
  outline: none;
  font-family: inherit;
}
.help-search:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-dim); }
.help-search::placeholder { color: var(--main-text-muted); }
.help-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.6;
  font-size: 14px;
}

.help-header { margin-bottom: 16px; }
.help-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--main-text); }
.help-header .help-header-sub { color: var(--main-text-muted); font-size: 14px; }

.help-article-grid { display: grid; gap: 10px; }
.help-article-card {
  padding: 16px 18px;
  border: 1px solid var(--main-border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--main-card);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.help-article-card:hover {
  border-color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px var(--purple-dim);
  background: var(--main-card-hover);
}
.help-article-card .help-article-title { font-weight: 600; font-size: 15px; color: var(--main-text); margin-bottom: 4px; }
.help-article-card .help-article-summary { color: var(--main-text-muted); font-size: 13px; line-height: 1.5; }
.help-article-card .help-article-meta { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 11px; color: var(--main-text-muted); }
.help-article-card .help-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--purple-dim);
  color: var(--purple);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.help-empty { padding: 40px 20px; text-align: center; color: var(--main-text-muted); }
.help-loading { padding: 40px 20px; text-align: center; color: var(--main-text-muted); }

.help-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--purple);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  margin-bottom: 16px;
  font-family: inherit;
}
.help-back:hover { text-decoration: underline; }

.help-reader { max-width: 760px; }
.help-reader h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: var(--main-text); }
.help-reader .help-reader-meta { color: var(--main-text-muted); font-size: 12px; margin-bottom: 24px; display: flex; gap: 10px; align-items: center; }
.help-reader .help-p { font-size: 15px; line-height: 1.65; color: var(--main-text); margin: 12px 0; }
.help-reader .help-h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--main-text); }
.help-reader .help-ul, .help-reader .help-ol, .help-reader .help-steps { margin: 12px 0; padding-left: 24px; }
.help-reader .help-ul li, .help-reader .help-ol li { font-size: 14px; line-height: 1.6; color: var(--main-text); margin: 6px 0; }
.help-reader .help-steps { list-style: none; padding-left: 0; counter-reset: step; }
.help-reader .help-steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 14px 12px 48px;
  margin: 8px 0;
  background: var(--main-card);
  border: 1px solid var(--main-border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--main-text);
}
.help-reader .help-steps li::before {
  content: counter(step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-reader .help-tip, .help-reader .help-warn {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.55;
}
.help-reader .help-tip { background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; color: var(--main-text); }
.help-reader .help-warn { background: var(--orange-dim); border-left: 3px solid var(--orange); color: var(--main-text); }
.help-reader .help-callout-label { font-weight: 700; flex-shrink: 0; }
.help-reader .help-tip .help-callout-label { color: #10b981; }
.help-reader .help-warn .help-callout-label { color: var(--orange); }
.help-reader .help-table-wrap { margin: 18px 0; overflow-x: auto; border: 1px solid var(--main-border); border-radius: 10px; }
.help-reader .help-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-reader .help-table th { text-align: center; font-weight: 700; color: var(--main-text); background: var(--main-card); padding: 10px 12px; border-bottom: 1px solid var(--main-border); white-space: nowrap; }
.help-reader .help-table th:first-child { text-align: left; }
.help-reader .help-table td { padding: 9px 12px; border-bottom: 1px solid var(--main-border); text-align: center; color: var(--main-text); }
.help-reader .help-table tr:last-child td { border-bottom: none; }
.help-reader .help-td-label { text-align: left; font-weight: 600; }
.help-reader .help-cell { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.help-reader .help-cell-yes { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.help-reader .help-cell-no { color: var(--main-text-muted); }
.help-reader .help-cell-view { background: rgba(55, 138, 221, 0.15); color: #378add; }

.help-search-hit { background: rgba(255, 200, 0, 0.35); border-radius: 2px; padding: 0 2px; color: var(--main-text); font-weight: 600; }

/* Inline info-icon tooltip (used on coupon usage rules). Bubble uses --main-text
   as background and --main-card as text so it inverts correctly in both themes. */
.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border-radius: var(--radius-full); border: 1px solid var(--main-border); background: var(--main-bg); color: var(--main-text-muted); font-size: 9px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; vertical-align: middle; user-select: none; flex-shrink: 0; }
.help-tip:hover, .help-tip:focus { border-color: var(--purple); color: var(--purple); outline: none; }
.help-tip .help-tip__pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 210px; padding: 8px 10px; border-radius: var(--radius); background: var(--main-text); color: var(--main-card); font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 2300; pointer-events: none; box-shadow: var(--shadow-lg); white-space: normal; }
.help-tip .help-tip__pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--main-text); }
.help-tip:hover .help-tip__pop, .help-tip:focus .help-tip__pop, .help-tip:focus-within .help-tip__pop { opacity: 1; visibility: visible; }

/* ===================== INVOICES (Payments > Invoices) ===================== */
.ta-r{text-align:right}
/* List */
.inv-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.inv-chips{display:flex;gap:6px;flex-wrap:wrap}
.inv-chip{padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text-muted);font-size:12px;cursor:pointer}
.inv-chip.active{background:var(--purple);border-color:var(--purple);color:#fff}
.inv-search{max-width:220px}
.inv-empty,.inv-lines-empty{padding:28px;text-align:center;color:var(--main-text-muted);font-size:13px}
.inv-table{width:100%;border-collapse:collapse;font-size:13px}
.inv-table th{text-align:left;padding:8px 10px;color:var(--main-text-muted);font-weight:600;border-bottom:1px solid var(--main-border);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.inv-table td{padding:9px 10px;border-bottom:1px solid var(--divider);vertical-align:middle}
.inv-num{font-weight:600;color:var(--main-text)}
.inv-actions{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.inv-danger-link{color:var(--danger)}
/* Status badges */
.inv-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:600}
.inv-badge-draft{background:var(--main-input);color:var(--main-text-muted)}
.inv-badge-info{background:var(--info-dim);color:var(--info-text)}
.inv-badge-warn{background:var(--orange-dim);color:var(--orange)}
.inv-badge-paid{background:var(--success-dim);color:var(--success-text)}
.inv-badge-void{background:var(--danger-dim);color:var(--danger-text)}
/* Builder overlay */
#inv-overlay{position:fixed;inset:0;background:var(--main-bg);z-index:160;display:flex;flex-direction:column;overflow:hidden}
.inv-ov-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--main-border);background:var(--main-card)}
.inv-ov-title{font-size:16px;font-weight:700;color:var(--main-text)}
.inv-ov-body{flex:1;overflow:auto;padding:20px}
.inv-ov-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;max-width:1100px;margin:0 auto;align-items:start}
.inv-ov-main,.inv-ov-side{background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:18px;box-shadow:0 1px 6px rgba(107,33,234,.06)}
.inv-ov-foot{padding:14px 20px;border-top:1px solid var(--main-border);background:var(--main-card);display:flex;gap:10px}
.inv-sec-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--main-text-muted);margin-bottom:8px}
.inv-locked-banner{background:var(--orange-dim);color:var(--orange);padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;max-width:1100px;margin-left:auto;margin-right:auto}
.mt-14{margin-top:14px}
.inv-field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inv-toggle{font-size:13px;color:var(--main-text);display:flex;align-items:center;gap:5px;cursor:pointer}
.inv-adhoc{display:flex;flex-direction:column;gap:8px}
.inv-lbl{display:block;font-size:12px;color:var(--main-text-muted);margin-bottom:4px}
.inv-ta{width:100%;min-height:54px;resize:vertical}
/* Line editor */
.inv-add-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--divider)}
.inv-add-grid{display:grid;grid-template-columns:1fr 70px 100px 128px;gap:8px;align-items:start;margin-bottom:8px}
.inv-add-head{margin-bottom:2px}
.inv-add-head>div{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--main-text-muted)}
.inv-add-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.inv-add-grid .ss-inp{width:100%}
.inv-add-btn{width:100%;padding:9px 11px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;min-height:38px}
.inv-qty-in{width:64px}
.inv-price-in{width:96px}
.inv-line-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--divider)}
.inv-line-desc-cell{flex:1;min-width:0}
.inv-line-name{font-size:13px;color:var(--main-text)}
.inv-line-desc{width:100%}
.inv-tax-cell{font-size:12px;color:var(--main-text-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.inv-line-total{width:82px;text-align:right;font-size:13px;color:var(--main-text);font-weight:600}
.inv-line-rm{border:none;background:none;color:var(--main-text-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.inv-line-rm:hover{color:var(--danger)}
/* Totals */
.inv-totals{margin-top:16px;padding-top:12px;border-top:1px solid var(--main-border)}
.inv-tot-row{display:flex;justify-content:space-between;font-size:13px;color:var(--main-text-muted);padding:3px 0}
.inv-tot-grand{font-size:15px;font-weight:700;color:var(--main-text);border-top:1px solid var(--divider);margin-top:5px;padding-top:8px}
/* Mark-paid modal */
.inv-modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1600;display:flex;align-items:center;justify-content:center;padding:20px}
.inv-modal-card{width:100%;max-width:360px;background:var(--main-card);border:1px solid var(--main-border);border-radius:var(--radius-lg);padding:20px}
.inv-modal-title{font-size:15px;font-weight:700;color:var(--main-text)}
.inv-modal-sub{font-size:13px;color:var(--main-text-muted);margin:4px 0 14px}
.inv-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media (max-width:720px){.inv-ov-grid{grid-template-columns:1fr}}


/* Quiet hours card (Notifications tab, P0-3) */
.notif-quiet-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--main-border);border-radius:10px;background:var(--main-bg);margin-bottom:16px}
.notif-quiet-controls{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.notif-quiet-times{font-size:12px;color:var(--main-text-muted);display:inline-flex;align-items:center;gap:6px}
.notif-quiet-times input[type="time"]{border:1px solid var(--main-border);background:var(--main-card);color:var(--main-text);border-radius:6px;padding:4px 6px;font-size:12px}
@media (max-width:720px){.notif-quiet-card{flex-direction:column}.notif-quiet-controls{justify-content:flex-start}}

/* Single-row multi-stage reminder (stage pills + shared channel chips) */
.notif-controls.reminder-group{grid-template-columns:auto 95px 95px}
.notif-stage-pills{display:inline-flex;gap:6px;align-items:center;margin-right:4px}
.notif-stage-pill{padding:4px 10px;border:1px solid var(--main-border);border-radius:var(--radius-full);font-size:11px;font-weight:600;color:var(--main-text-muted);cursor:pointer;background:var(--main-bg);transition:all 0.15s;white-space:nowrap}
.notif-stage-pill.on{background:var(--purple-dim);border-color:var(--purple-border);color:var(--purple)}
@media (max-width:720px){.notif-controls.reminder-group{grid-template-columns:auto;justify-items:start}}

/* SOAP rich section editor: prose + inline checkbox lines (Settings > Clinical
   templates and the note editor). Checkbox state round-trips in the section
   text as leading ☐ / ☑ markers; no separate storage. */
.soap-rt{width:100%;min-height:90px;max-height:340px;overflow-y:auto;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:9px 12px;font-family:Lato,sans-serif;font-size:13px;line-height:1.7;outline:none;box-sizing:border-box;white-space:pre-wrap}
.soap-rt:focus{border-color:var(--purple)}
.soap-rt-line{min-height:1.2em}
.soap-cb{cursor:pointer;user-select:none;display:inline-block;margin-right:3px;font-size:15px;line-height:1;color:var(--purple)}
.soap-rt[contenteditable="false"]{opacity:.85}
/* ============ UTILITY LAYER (June 9 2026) - Phase 1 of inline-style migration ============ */
/* Token-backed utility classes. Every value references a :root token, never raw px.
   Built from the June 9 inline-style catalog (top static declarations).
   Color utilities intentionally NOT built: color is already token-backed inline.
   Padding PAIRS and off-grid values intentionally NOT built: they surface in Phase 3 review.
   .hidden and .clickable already existed and are reused, not redefined.
   See MySpark-Inline-Style-Migration-Spec.md. */

/* Font size */
.fs-10{font-size:var(--fs-10)}.fs-11{font-size:var(--fs-11)}.fs-12{font-size:var(--fs-12)}
.fs-13{font-size:var(--fs-13)}.fs-14{font-size:var(--fs-14)}.fs-16{font-size:var(--fs-16)}
.fs-18{font-size:var(--fs-18)}.fs-20{font-size:var(--fs-20)}.fs-22{font-size:var(--fs-22)}

/* Font weight */
.fw-400{font-weight:var(--fw-400)}.fw-500{font-weight:var(--fw-500)}.fw-600{font-weight:var(--fw-600)}
.fw-700{font-weight:var(--fw-700)}.fw-800{font-weight:var(--fw-800)}

/* Line height */
.lh-10{line-height:var(--lh-10)}.lh-12{line-height:var(--lh-12)}.lh-13{line-height:var(--lh-13)}
.lh-14{line-height:var(--lh-14)}.lh-15{line-height:var(--lh-15)}.lh-16{line-height:var(--lh-16)}
.lh-17{line-height:var(--lh-17)}

/* Margin bottom */
.mb-0{margin-bottom:var(--space-0)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mb-10{margin-bottom:var(--space-10)}
.mb-12{margin-bottom:var(--space-12)}.mb-14{margin-bottom:var(--space-14)}.mb-16{margin-bottom:var(--space-16)}
.mb-18{margin-bottom:var(--space-18)}.mb-20{margin-bottom:var(--space-20)}.mb-24{margin-bottom:var(--space-24)}

/* Margin top */
.mt-0{margin-top:var(--space-0)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}
.mt-12{margin-top:var(--space-12)}.mt-14{margin-top:var(--space-14)}.mt-16{margin-top:var(--space-16)}

/* Gap */
.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}
.gap-14{gap:var(--space-14)}.gap-16{gap:var(--space-16)}

/* Padding (single-value only; pairs deferred to Phase 3) */
.pad-4{padding:var(--space-4)}.pad-6{padding:var(--space-6)}.pad-8{padding:var(--space-8)}
.pad-10{padding:var(--space-10)}.pad-12{padding:var(--space-12)}.pad-14{padding:var(--space-14)}
.pad-16{padding:var(--space-16)}

/* Layout primitives */
.u-flex{display:flex}.u-grid{display:grid}.u-block{display:block}
.flex-center{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.w-full{width:100%}

/* Text */
.text-upper{text-transform:uppercase}.text-center{text-align:center}

/* Color (added June 9 2026, batch 2b recon) - unlocks multi-property migration.
   These wrap already-token-backed color values so multi-prop attributes whose
   only unmappable piece was color become fully mappable. See migration spec. */
.txt-muted{color:var(--text-muted)}.txt-main-muted{color:var(--main-text-muted)}
.txt{color:var(--text)}.txt-main{color:var(--main-text)}.txt-dim{color:var(--text-dim)}
.txt-orange{color:var(--orange)}
.bg-card{background:var(--bg-card)}.bg-input{background:var(--bg-input)}
.bg-main-card{background:var(--main-card)}.bg-main-input{background:var(--main-input)}