:root{
    --purple-50:#f5f3ff; --purple-100:#ede9fe; --purple-200:#ddd6fe;
    --purple-500:#7c3aed; --purple-600:#6d28d9; --purple-700:#5b21b6;
    --ink-900:#18181b; --ink-700:#3f3f46; --ink-500:#71717a; --ink-300:#d4d4d8; --ink-100:#f4f4f5;
    --green-600:#16a34a; --green-50:#f0fdf4; --red-600:#dc2626; --red-50:#fef2f2;
    --amber-600:#d97706; --amber-50:#fffbeb; --blue-600:#2563eb; --blue-50:#eff6ff;
    --card-bg:#ffffff; --page-bg:#faf9fc; --border:#ececf1;
    --shadow-sm: 0 1px 2px rgba(24,24,27,.04);
    --shadow-md: 0 4px 16px rgba(76,29,149,.06);
    --shadow-lg: 0 12px 32px rgba(76,29,149,.10);
    --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px;
  }
  [data-theme="dark"]{
    --card-bg:#19171f; --page-bg:#100e16; --border:#2a2733;
    --ink-900:#f4f4f5; --ink-700:#d4d4d8; --ink-500:#a1a1aa; --ink-300:#3f3f46; --ink-100:#211f29;
    --purple-50:#241f38; --purple-100:#2c2540;
    --green-50:#0f2118; --red-50:#2a1414; --amber-50:#2a2010; --blue-50:#101d2e;
    --shadow-md: 0 4px 20px rgba(0,0,0,.35);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  }
  /* ---------- Luxury Deep Burgundy & Velvet Rose Variant ----------
     Third theme, same token names as light/dark above, so every existing
     component (sidebar, cards, buttons, tables, charts) picks it up with
     zero component-CSS changes. Contrast-checked: every fg/bg text pair
     below is WCAG AA (4.5:1) or better — see palette notes per line. */
  [data-theme="luxury-rose"]{
    /* canvas / surfaces */
    --page-bg:#0F0B0B; --card-bg:#1A1213; --border:#3A2325;
    /* text (ink-900 = main text, ink-500 = muted, ink-100 = hover fill) */
    --ink-900:#FAFAFA; --ink-700:#E4D5D3; --ink-500:#B39E9D; --ink-300:#5C4547; --ink-100:#261B1C;
    /* accent (purple-* slot repurposed as rose accent — nav active state,
       primary buttons, links, focus rings all key off --purple-600) */
    --purple-50:#261B1C; --purple-100:#3A2325; --purple-200:#4A2C2F;
    --purple-500:#A23344; --purple-600:#8B2635; --purple-700:#6E1D29;
    /* semantic status colors, contrast-checked against their own -50 bg */
    --green-600:#4ADE80; --green-50:#14291D;
    --red-600:#F87171; --red-50:#2D1215;
    --amber-600:#FBBF24; --amber-50:#2C1E0A;
    --blue-600:#60A5FA; --blue-50:#0D2238;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 20px rgba(0,0,0,.45);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  }
  [data-theme="luxury-rose"] .brand-mark{
    background:linear-gradient(135deg,#A23344,#6E1D29);
    box-shadow:0 4px 10px rgba(139,38,53,.45);
  }
  [data-theme="luxury-rose"] .avatar{
    background:linear-gradient(135deg,#4A2C2F,#8B2635); color:#FAFAFA;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--page-bg); color:var(--ink-900);
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--purple-200);}
  svg{display:block; width:16px; height:16px; flex-shrink:0;}

  /* ---------- Layout ---------- */
  
  .brand{display:flex; align-items:center; gap:10px; padding:4px 10px 22px;}
  .brand-logo-img{height:32px;width:auto;display:block;}

  /* AI Studio — collapsible group. Parent row toggles open/closed; the
     5 pages (Plan/Ideas/Create Content/Instagram/Facebook) live nested
     inside instead of as separate flat sidebar items. */
  

  /* pages/staff-dashboard.html only — see its badge markup for why. Purple
     fill (not amber, to stay distinct from paImpersonateBanner right below
     it in the same sidebar) with the salon name filled in by
     populateStaffPortalBadge() (auth.js) once currentSalon is known. */
  .staff-portal-badge{
    display:flex; align-items:center; gap:6px; margin-bottom:14px;
    background:var(--purple-600); color:#fff; padding:8px 12px;
    border-radius:10px; font-size:11.8px; font-weight:600;
  }
  .staff-portal-badge svg{flex-shrink:0;}
  #staffPortalSalonName{font-weight:400; opacity:.85;}
  #staffPortalSalonName:not(:empty)::before{content:" · "}

  /* ---------- Main ---------- */
  
  .icon-sm{width:15px;height:15px;flex-shrink:0;}
  .notif-wrap{position:relative;}
  .notif-dropdown {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:320px;
  max-width:88vw;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  z-index:250;
  padding:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
}
  .notif-dropdown.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .notif-dropdown-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border);}
  .notif-dropdown-head b{font-size:13.5px;}
  .notif-mark-all{border:none; background:none; color:var(--purple-600); font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit;}
  .notif-list{max-height:min(340px, calc(100vh - 190px)); overflow-y:auto;}
  .notif-item{display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:default;}
  /* When rendered as a <button> (has reference_type/reference_id, so it can
     deep-link — see openNotifTarget() in notifications.js), reset the
     browser's default button chrome so it matches the plain-<div> layout
     above, then layer on interactive affordances the static version never
     needed: pointer cursor, a visible hover tint, and a focus-visible ring
     (buttons are keyboard-focusable by default, unlike the div they replace,
     so this is a real new a11y surface, not just decoration). */
  button.notif-item{width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); font:inherit; color:inherit;}
  .notif-item-clickable{cursor:pointer;}
  .notif-item-clickable:hover{background:var(--purple-50);}
  .notif-item-clickable:focus-visible{outline:2px solid var(--purple-500); outline-offset:-2px;}
  /* Quick actions inside a notification: the main action is filled, "Mark read" is quiet. */
  .notif-quick{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
  .notif-quick-btn{font:inherit; font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:var(--card-bg); color:var(--ink-700); cursor:pointer;}
  .notif-quick-btn:hover{background:var(--purple-50);}
  .notif-quick-btn.primary{background:var(--purple-600); border-color:var(--purple-600); color:#fff;}
  .notif-quick-btn.primary:hover{filter:brightness(1.08);}
  .notif-quick-btn:focus-visible{outline:2px solid var(--purple-500); outline-offset:2px;}
  .notif-quick-hint{margin-top:6px; font-size:12px; font-weight:600; color:var(--purple-600);}
  /* unread items without a destination: click = mark just this one as read */
  .notif-item-markable{cursor:pointer;}
  .notif-item-markable:hover{background:var(--purple-100);}
  .notif-item-markable:focus-visible{outline:2px solid var(--purple-500); outline-offset:-2px;}
  .notif-item:last-child{border-bottom:none;}
  .notif-item.unread{background:var(--purple-50);}
  .notif-item-dot{width:7px; height:7px; border-radius:50%; background:var(--purple-600); margin-top:6px; flex-shrink:0;}
  .notif-item.read .notif-item-dot{background:transparent;}
  /* WhatsApp connection status (Automations module) — was a raw
     🟢/🔴/⚪ emoji glyph; a fixed-size inline dot renders consistently
     across platforms unlike colored circle emoji. Sits inline before its
     label text as one string (not separate flex children), so it carries
     its own margin-right for spacing rather than relying on a flex gap. */
  .ac-status-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle;}
  .notif-item-body{flex:1; min-width:0;}
  .notif-item-title{font-size:12.6px; font-weight:600; color:var(--ink-900);}
  .notif-item-text{font-size:12px; color:var(--ink-500); margin-top:2px; line-height:1.4;}
  .notif-item-time{font-size:10.5px; color:var(--ink-500); opacity:.8; margin-top:4px;}
  .notif-empty{padding:30px 16px; text-align:center; font-size:12.5px; color:var(--ink-500);}
  .notif-retry{margin-top:10px; padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card, #fff); color:var(--purple-700, var(--purple-600)); font:inherit; font-size:12px; font-weight:600; cursor:pointer;}
  .notif-retry:hover{background:var(--purple-50);}
  .date-pill {
  cursor:pointer;
  font-family:inherit;
  transition:border-color .15s ease, background .15s ease;
}
  .date-range-wrap{position:relative;}
  .date-range-dropdown{
    position:absolute; top:calc(100% + 10px); right:0; width:240px; background:var(--card-bg); border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow-lg); z-index:250; padding:12px;
    opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease;
  }
  .date-range-dropdown.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .date-range-input{
    width:100%; margin-top:10px; padding:9px 10px; border:1px solid var(--border); border-radius:10px;
    background:var(--card-bg); color:var(--ink-900); font-size:12.6px; font-family:inherit;
  }
  .date-range-today-btn {
  width:100%;
  margin-top:8px;
  border:none;
  background:var(--purple-50);
  color:var(--purple-600);
  cursor:pointer;
  font-family:inherit;
}
  .date-range-today-btn:hover{background:var(--purple-100);}

  /* ---------- Grid ---------- */
  
  .chart-wrap { position:relative; }
  canvas{max-height:220px;}

  /* Lists */
  

  /* AI Recommendation banner */
  

  /* AI Assistant column */
  
  @keyframes chatTypingBounce{0%,60%,100%{opacity:.4; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

  /* Toast */
  

  /* Card variant — success / error / info */
  
  @media (max-width:560px){
    .toast.toast-success, .toast.toast-error, .toast.toast-info{width:calc(100vw - 32px); padding:13px 10px 13px 14px;}
  }

  /* ---------- Views ---------- */
  
  @keyframes viewFadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- Customers module ---------- */
  
  .search-box {
  transition:box-shadow .15s ease, border-color .15s ease;
}
  .search-box:focus-within{border-color:var(--purple-300, var(--purple-500)); box-shadow:0 0 0 3px var(--purple-100);}
  .search-box svg { width:15px; height:15px; }
  .page-btn:hover:not(:disabled){background:var(--ink-100);}

  /* ---------- Modals ---------- */
  
  .modal-lg{max-width:820px;}
  .form-check-row{
    display:flex; align-items:center; gap:9px; margin-top:12px; cursor:pointer;
    font-size:12.8px; font-weight:600; color:var(--ink-700); min-height:44px;
  }
  .form-check-row input[type="checkbox"]{width:17px; height:17px; flex-shrink:0; cursor:pointer;}
  .form-hint-inline{font-weight:500; color:var(--ink-500);}

  /* Custom Select */
  .cfc-select-wrap{position:relative; width:100%;}
  .cfc-select-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;
    border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.3px; font-family:inherit;
    background:var(--page-bg); color:var(--ink-900); cursor:pointer; transition:border-color .12s;
  }
  .cfc-select-trigger:hover{border-color:var(--purple-200);}
  .cfc-select-trigger.open{border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100);}
  .cfc-select-trigger.placeholder .cfc-select-value{color:var(--ink-500);}
  .cfc-select-trigger:disabled{opacity:.55; cursor:not-allowed;}
  .cfc-select-value{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .cfc-select-chevron{flex-shrink:0; color:var(--ink-500); transition:transform .15s;}
  .cfc-select-trigger.open .cfc-select-chevron{transform:rotate(180deg);}
  .cfc-select-panel{
    position:fixed; z-index:9999; max-height:240px; overflow-y:auto;
    background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:6px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  .cfc-select-option{
    padding:9px 11px; border-radius:8px; font-size:13px; color:var(--ink-700); cursor:pointer;
  }
  .cfc-select-option:hover{background:var(--ink-100);}
  .cfc-select-option.active{background:var(--purple-50); color:var(--purple-700); font-weight:600;}
  .cfc-select-option.disabled{opacity:.4; cursor:not-allowed;}

  /* Custom Date Picker */
  .cfc-date-wrap{position:relative; width:100%;}
  .cfc-date-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left;
    border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.3px; font-family:inherit;
    background:var(--page-bg); color:var(--ink-900); cursor:pointer; transition:border-color .12s;
  }
  .cfc-date-trigger:hover{border-color:var(--purple-200);}
  .cfc-date-trigger.open{border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100);}
  .cfc-date-trigger.placeholder .cfc-date-value{color:var(--ink-500);}
  .cfc-date-trigger:disabled{opacity:.55; cursor:not-allowed;}
  .cfc-date-icon{flex-shrink:0; color:var(--ink-500);}
  .cfc-date-panel{
    position:fixed; z-index:9999; width:280px; max-width:88vw;
    background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:12px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  .cfc-date-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; color:var(--ink-900);}
  .cfc-date-nav{width:26px; height:26px; border-radius:8px; border:none; background:var(--ink-100); color:var(--ink-700); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .cfc-date-nav:hover{background:var(--purple-100); color:var(--purple-700);}
  .cfc-date-dow{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; font-weight:700; color:var(--ink-500); margin-bottom:4px;}
  .cfc-date-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
  .cfc-date-cell{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--ink-700);
    border-radius:8px; cursor:pointer;
  }
  .cfc-date-cell.empty{cursor:default;}
  .cfc-date-cell:not(.empty):not(.disabled):hover{background:var(--ink-100);}
  .cfc-date-cell.today{font-weight:700; color:var(--purple-600);}
  .cfc-date-cell.selected{background:var(--purple-600); color:#fff; font-weight:700;}
  .cfc-date-cell.disabled{color:var(--ink-300); cursor:not-allowed;}
  .cfc-date-footer{display:flex; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--border);}
  .cfc-date-today-btn, .cfc-date-clear-btn{font-size:11.5px; font-weight:600; color:var(--purple-600); background:none; border:none; cursor:pointer; padding:4px 6px;}
  .cfc-date-clear-btn{color:var(--ink-500);}
  /* A real disabled attribute (used e.g. for the already-active/paused
     state of Campaign Activate/Pause) blocks keyboard activation too, not
     just mouse clicks — but browsers don't visually dim a plain button
     just because it's disabled unless told to, so this keeps the
     already-established "looks disabled" look intact. */
  .btn-secondary:disabled{opacity:0.5; cursor:not-allowed; pointer-events:none;}
  /* Low-emphasis text-style action that sits alongside Back/Next/Save
     without competing with them visually — e.g. "Skip, fill in myself"
     on the Add Service wizard, which should read as optional, not as an
     equal alternative to the primary path. */
  .btn-ghost-sm{
    background:none; border:none; color:var(--ink-500); font-size:12.6px; font-weight:600;
    padding:11px 10px; margin-right:auto; text-decoration:underline; text-underline-offset:2px;
    min-height:44px;
  }
  .btn-ghost-sm:hover{color:var(--ink-700);}

  /* ---------- Account Menu ---------- */
  
  /* 4-option appearance switcher (Light/Dark/Luxury Rose/System) — 2x2 grid
     instead of a single flex row, since "Luxury Rose" doesn't fit a
     quarter-width flex cell inside the 284px account dropdown. */
  

  /* Account Settings Modal */
  
  @keyframes acctFade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  /* ---------- Drawer ---------- */
  

  /* ---------- Leads Kanban ---------- */
  

  /* ---------- Services catalog ---------- */
  
  .service-card-image{
    width:calc(100% + 36px); height:140px; margin:-18px -18px 0; object-fit:cover;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:block; background:var(--ink-100);
  }
  .service-desc { min-height:18px; }

  /* Toggle switch */
  

  /* ---------- Staff directory ---------- */
  

  /* ---------- Marketing module ---------- */
  

  /* SETTINGS MODULE */
  
  .notif-grid-head span:not(:first-child){text-align:center;}
  .perm-grid span:not(:first-child){text-align:center;}
  @media (max-width:860px){
    .notif-grid-head, .notif-row{grid-template-columns:1fr repeat(4,46px); font-size:10px;}
    .perm-grid, .perm-row{grid-template-columns:1fr repeat(4,64px);}
  }
  #mktPanelRoot.mkt-fade{animation:viewFadeIn .18s ease;}

  /* Grouped marketing tabs: chevron on multi-child parents, second row of
     child tabs underneath (same idea as the AI Studio sub-tab rows). */
  .mkt-tab-parent{cursor:pointer;}
  .mkt-tab-chevron{display:flex; flex-shrink:0; opacity:.55; transition:transform .2s ease;}
  .mkt-tab-chevron svg{width:12px; height:12px;}
  .mkt-tab-parent.open .mkt-tab-chevron{transform:rotate(180deg);}
  .mkt-subtabs{display:none; gap:6px; overflow-x:auto; padding:10px 12px 14px; margin:0 12px; border-top:1px solid var(--border); scrollbar-width:thin;}
  .mkt-subtabs .mkt-tab{font-size:12px; padding:7px 12px;}
  .booking-revenue-grid{grid-template-columns:repeat(3,1fr); margin-bottom:18px;}

  /* ---------- AI Agent (Competitors) ---------- */
  
  @keyframes agentSpin{to{transform:rotate(360deg);}}
  .spinner-ring, .spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--purple-100); border-top-color:var(--purple-600); animation:agentSpin .8s linear infinite;}
  .wizard-step { flex-shrink:0; }
  .wizard-step-dot{width:24px; height:24px; border-radius:50%; background:var(--ink-100); color:var(--ink-500); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s ease, color .15s ease;}
  .wizard-step-label { white-space:nowrap; }
  .staff-form-step{display:none;}
  .staff-form-step.active{display:block;}
  .wizard-actions-right{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  @media (max-width:480px){
    .wizard-actions{flex-wrap:wrap;}
    .wizard-actions-right{width:100%; justify-content:flex-end;}
  }
  .wizard-hint{display:flex; gap:8px; align-items:flex-start; background:var(--purple-50); border:1px solid var(--purple-100); border-radius:10px; padding:10px 14px; font-size:12px; line-height:1.5; color:var(--ink-700); margin-bottom:16px;}
  /* Was a raw 💡 emoji glyph; ICONS.spark svg needs a fixed box + top nudge
     so it lines up with the first line of hint text instead of the emoji's
     natural baseline. */
  .wizard-hint-ic{width:14px; height:14px; flex-shrink:0; margin-top:1px; color:var(--purple-600);}
  .wizard-hint-ic svg{width:14px; height:14px;}
  /* Small inline icon used before secondary/meta text in Content Ideas cards
     (was raw 💡/🎬 emoji) — 12px fixed box, nudged down 1px so it sits on
     the text baseline instead of floating above it. */
  .ci-inline-ic{width:12px; height:12px; flex-shrink:0; margin-top:1px; color:currentColor;}
  .ci-inline-ic svg{width:12px; height:12px;}
  .wizard-option .wizard-badge{display:inline-block; margin-top:4px; font-size:10.5px; font-weight:700; color:var(--purple-600); letter-spacing:.2px;}
  .wizard-subtext{font-size:11.5px; color:var(--ink-500); margin:0 0 10px; line-height:1.5;}

  .segment-meta-sync{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; margin:2px 0 10px; border-radius:10px; background:var(--ink-100);}
  .segment-meta-sync span{font-size:11px; color:var(--ink-500); line-height:1.4;}
  .segment-meta-sync--success span{color:var(--green-600);}
  .segment-meta-sync--warn span{color:var(--amber-600);}
  .segment-meta-sync--error span{color:var(--red-600);}
  .segment-sync-btn { flex-shrink:0; border:1px solid var(--border); background:var(--card-bg); color:var(--ink-700); cursor:pointer; }
  .segment-sync-btn:hover{background:var(--ink-100);}
  .segment-sync-btn:disabled{opacity:.6; cursor:default;}

  /* ---------- Authentication + Onboarding ---------- */
  
  .auth-card .brand{justify-content:center; margin-bottom:6px;}

  /* Mobile nav toggle */
  

  /* Empty/loading skeleton */
  
  @keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

  /* Staged processing checklist — used during website scan/verify/sync */
  .proc-steps{display:flex; flex-direction:column; gap:2px; width:100%; max-width:320px; margin:6px auto 0;}
  .proc-step{display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:12.6px; font-weight:600; color:var(--ink-400); opacity:.55; transform:translateX(-2px); transition:opacity .25s ease, color .25s ease, transform .25s ease;}
  .proc-step.active, .proc-step.done{opacity:1; transform:translateX(0);}
  .proc-step.active{color:var(--ink-900);}
  .proc-step.done{color:var(--ink-500);}
  .proc-step-ic{display:flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border); color:transparent; transition:border-color .25s ease, background .25s ease, color .25s ease;}
  .proc-step.active .proc-step-ic{border-color:var(--purple-500); background:var(--purple-50);}
  .proc-step.active .proc-step-ic svg{width:11px;height:11px; color:var(--purple-600); animation:agentSpin 1s linear infinite;}
  .proc-step.done .proc-step-ic{border-color:var(--green-500); background:var(--green-500); color:#fff;}
  .proc-step.done .proc-step-ic svg{width:12px;height:12px;}
  .proc-step.pending .proc-step-ic svg{display:none;}

  @media (max-width:1200px){
    /* Overview takes the full first row, Insights and
       Assistant sit side by side under it (equal height). */
    .grid-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
    .grid-main > .col-span-2, .grid-main > .assistant{grid-column:1 / -1;}
    .grid-lists{grid-template-columns:repeat(2,minmax(0,1fr));}
    .grid-actions{grid-template-columns:minmax(0,1fr);}
    .service-grid{grid-template-columns:1fr 1fr;}
    .staff-grid{grid-template-columns:1fr 1fr;}
    .mkt-chart-grid{grid-template-columns:1fr;}
    .mkt-kpi-grid{grid-template-columns:repeat(3,1fr);}
    .wizard-option-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:980px){
    .app{grid-template-columns:1fr;}
    .sidebar{position:fixed; left:0; top:0; width:264px; transform:translateX(-100%); transition:transform .25s ease;}
    .sidebar.open{transform:translateX(0);}
    .sidebar-overlay.show{display:block;}
    .menu-toggle{display:flex;}
    .grid-stats{grid-template-columns:1fr 1fr;}
    .grid-stats.grid-stats-5{grid-template-columns:1fr 1fr;}
    .grid-stats.grid-stats-5 .stat-card:last-child{grid-column:1 / -1;}
    .grid-main{grid-template-columns:minmax(0,1fr);}
    .grid-main > *{grid-column:span 1 !important;}
    .grid-main .chart-wrap{flex-basis:200px; min-height:200px;}
    .grid-lists{grid-template-columns:minmax(0,1fr);}
    .grid-actions .qa-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .cust-stats{grid-template-columns:1fr 1fr;}
    .mkt-kpi-grid{grid-template-columns:repeat(2,1fr);}
    .booking-revenue-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .grid-stats, .cust-stats{grid-template-columns:1fr 1fr; gap:10px;}
    .grid-stats.grid-stats-5{grid-template-columns:1fr 1fr;}
    .grid-stats .stat-card, .cust-stats .stat-card{padding:14px;}
    .grid-stats .stat-top, .cust-stats .stat-top{gap:8px; margin-bottom:8px; align-items:flex-start;}
    .grid-stats .stat-icon, .cust-stats .stat-icon{width:32px;height:32px;border-radius:9px;}
    .grid-stats .stat-icon svg, .cust-stats .stat-icon svg{width:15px;height:15px;}
    .grid-stats .stat-title, .cust-stats .stat-title{font-size:10.8px; line-height:1.3;}
    .grid-stats .stat-value, .cust-stats .stat-value{font-size:18px; margin-bottom:2px;}
    .grid-stats .stat-delta, .cust-stats .stat-delta{font-size:10px;}
    .main{padding:16px 14px 40px;}
    .topbar{flex-direction:column;}
    .topbar-actions{width:100%; justify-content:flex-start;}
    .date-range-wrap{margin-right:auto;}
    .date-range-dropdown{left:0; right:auto;}
    .qa-grid{grid-template-columns:1fr 1fr;}
    .form-row-2{grid-template-columns:1fr;}
    .cust-toolbar{flex-direction:column; align-items:stretch;}
    .search-box{max-width:none;}
    .cust-toolbar .btn-primary{margin-left:0 !important;}
    .drawer{width:100%; max-width:100vw;}
    .service-grid{grid-template-columns:1fr;}
    .staff-grid{grid-template-columns:1fr;}
    .mkt-kpi-grid{grid-template-columns:1fr 1fr; gap:10px;}
    .booking-revenue-grid{grid-template-columns:1fr; gap:10px;}
    .inv-confirm-grid{grid-template-columns:1fr;}
    .mkt-kpi-card{padding:12px;}
    .mkt-kpi-card .stat-top{gap:8px; margin-bottom:8px; align-items:flex-start;}
    .mkt-kpi-card .stat-icon{width:30px;height:30px;border-radius:9px;}
    .mkt-kpi-card .stat-icon svg{width:14px;height:14px;}
    .mkt-kpi-card .stat-value{font-size:16.5px; margin-bottom:2px;}
    .mkt-kpi-card .stat-title{font-size:10.2px; line-height:1.3;}
    .wizard-steps{flex-wrap:wrap; row-gap:10px;}
    .wizard-connector{display:none;}
    .wizard-option-grid{grid-template-columns:1fr;}
    .funnel-label{width:74px; font-size:11.4px;}
    .auth-card{padding:26px 20px;}
    .ob-service-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }
  :focus-visible{outline:2px solid var(--purple-500); outline-offset:2px;}

  /* ---------- Social Media AI — First Time Setup ---------- */
  
  /* Was a raw ✕ text glyph with 2px/4px padding (~20x20px effective tap
     area) — swapped for a proper SVG (ICONS.closeIc, see marketing-social.js)
     and widened to a real 32x32px hit area. Still short of the 44x44px
     touch-target guideline, which is a deliberate trade-off for this dense
     inline chip context (matches Material Design's ~32-40px chip-remove
     convention) rather than an oversight — bump to 44px if mis-taps show up
     in testing. */
  .smai-comp-remove { width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  /* WhatsApp "not connected" hero icon (marketing-whatsapp.js) — was a raw
     48px emoji glyph, now ICONS.mobileIc; the global svg{width:16px} default
     needs overriding to fill this larger slot. */
  .wa-hero-icon svg{width:48px; height:48px;}
  /* WhatsApp template card/row icon — sizes itself off its own inline
     width/height (32px on the Quick Start cards, 20px on template rows) so
     one rule covers both; see waTemplateIconSvg() in marketing-whatsapp.js. */
  .wa-card-icon svg{width:100%; height:100%;}
  @media (max-width:560px){
    .smai-conn-grid{grid-template-columns:1fr;}
    .smai-goal-grid{grid-template-columns:1fr;}
  }

  /* ---------- Clients (Unified) Module ---------- */
  

  /* Replaces the old plain <table> for the Bookings history list — that
     table had data-label attrs for a mobile-stacked layout but no CSS ever
     used them, so on a phone it just scrolled sideways. Cards give every
     row a real touch target and let status/customer/when breathe instead
     of being crushed into table cells. */
  .booking-cards-grid{display:flex; flex-direction:column; gap:8px; padding:4px 20px 20px;}
  .booking-row-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  background:var(--card-bg);
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}
  .booking-row-card:hover{background:var(--ink-100);}
  .booking-row-card:focus-visible{outline:2px solid var(--purple-600); outline-offset:2px;}
  .booking-row-card-status{flex-shrink:0; width:82px;}
  .booking-row-card-main{flex:1; min-width:0;}
  .booking-row-card-name{font-size:13.8px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .booking-row-card-meta{font-size:12.2px; color:var(--ink-500); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .booking-row-card-when{flex-shrink:0; text-align:right;}
  .booking-row-card-date{font-size:12.6px; font-weight:600; margin-bottom:4px; white-space:nowrap;}
  /* Actions that aren't wired up yet still work (they show an honest "not
     set up" toast rather than faking success) but look identical to fully
     functional actions otherwise — nothing hints in advance which ones
     will actually do something. This visually sets them apart so people
     aren't guessing by trial and error. */
  .row-menu-item.is-stub{color:var(--ink-500);}
  .action-btn-sm.is-stub{color:var(--ink-500); background:var(--ink-100);}
  .stub-tag{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-500); background:var(--ink-100); padding:2px 6px; border-radius:20px; margin-left:auto;}
  .action-btn-sm.is-stub .stub-tag{background:var(--card-bg);}

  /* Calendar */
  
  .cal-day-cell { position:relative; }
  /* This hint used to render as bare unstyled browser-default text sitting
     inside every single day cell (no CSS rule ever existed for it) — a
     stray "+ Add" floating in all 42 cells at once, overlapping the date
     number and event pills. The whole cell is already a click target
     (data-cal-date, wired in wireClientCalendar), so this only needs to be
     a lightweight visual hint, not its own separate hit target: tucked
     into the corner, invisible until hover confirms the cell is
     interactive, and dropped completely on mobile below where hover
     doesn't exist and every cell is already cramped enough.  */
  .cal-day-add {
  top:5px;
  background:var(--purple-50);
  padding:2px 6px;
  border-radius:20px;
}
  @media (hover:hover){
    .cal-day-cell:not(.other-month):hover .cal-day-add{opacity:1;}
  }

  @media (max-width:980px){
    .client-kpi-grid{grid-template-columns:1fr 1fr;}
    .cal-month-grid{margin:16px 8px 20px;}
    .drawer-quick-actions{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    /* Business Profile card head now carries two action buttons (Connect
       Social Accounts + Edit Profile) alongside its title — .card-head has
       no wrap by default, so on a phone all three would squeeze onto one
       line. Stacking the actions under the title keeps both buttons at
       full, comfortably-tappable width instead of shrinking to fit. */
    #bizConnectSocialBtn, #bizEditProfileBtn{ flex:1; }
    .card-head:has(#bizConnectSocialBtn){ flex-wrap:wrap; row-gap:10px; }
    .card-head:has(#bizConnectSocialBtn) > div{ width:100%; margin-left:0 !important; }
    .client-kpi-grid{grid-template-columns:1fr 1fr; gap:10px;}
    .client-kpi-grid .stat-card{padding:14px;}
    .client-kpi-grid .stat-top{gap:8px; margin-bottom:8px; align-items:flex-start;}
    .client-kpi-grid .stat-icon{width:32px;height:32px;border-radius:9px;}
    .client-kpi-grid .stat-icon svg{width:15px;height:15px;}
    .client-kpi-grid .stat-title{font-size:10.8px; line-height:1.3;}
    .client-kpi-grid .stat-value{font-size:18px; margin-bottom:2px;}
    .client-kpi-grid .stat-delta{font-size:10px;}
    .cal-day-cell{min-height:64px;}
    .cal-day-add{display:none;}
    .action-card{flex-direction:column; align-items:flex-start;}
    .booking-row-card{flex-wrap:wrap;}
    .booking-row-card-status{order:1; width:auto;}
    .booking-row-card-main{order:2; flex-basis:100%;}
    .booking-row-card-when{order:3; text-align:left;}
    .cal-toolbar{padding:14px 14px 4px; gap:8px;}
    .cal-nav{gap:6px; flex-wrap:wrap;}
    .cal-nav-btn{width:28px;height:28px;}
    .cal-title{font-size:13px; min-width:0; flex:1;}
    #calToday{padding:6px 10px; font-size:11.5px;}
    .cal-view-switch{width:100%; justify-content:center;}
    .cal-view-btn{flex:1; padding:6px 10px; font-size:11.5px;}

    /* Booking Requests table (6 columns) forced horizontal scroll at
       760px min-width on a ~375-430px phone — cramped and dated-feeling.
       Below this breakpoint each row becomes a self-contained card
       instead: labels come from data-label (set alongside the <td>s in
       renderBookingsHistory) since the header row is hidden. Scoped to
       this table's id only — the Client List table has its own, separate
       column set and isn't part of this pass. */
    #bookingReqTable{min-width:0; width:100%;}
    #bookingReqTable thead{display:none;}
    #bookingReqTable, #bookingReqTable tbody, #bookingReqTable tr, #bookingReqTable td{display:block; width:100%;}
    #bookingReqTable tr{border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:var(--card-bg);}
    #bookingReqTable td{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border:none; text-align:right; max-width:none !important; white-space:normal !important;}
    #bookingReqTable td::before{content:attr(data-label); font-weight:600; color:var(--ink-500); font-size:11.2px; text-align:left; flex-shrink:0;}
  }

/* =========================================================
   GG Slider — shared range-slider component (js/core/gg-slider.js)
   Signature interaction: a value stays pinned above the thumb at all
   times (not just on hover), styled like a small callout tag — the same
   role a price/step badge plays elsewhere in Slava, so it reads as part
   of the app's own vocabulary rather than a bolted-on widget. Reused
   everywhere a bounded number is picked: budget, duration, radius, age.
========================================================= */
.gg-slider-field{margin-bottom:4px;}
.gg-slider-labelrow{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px;}
.gg-slider-track{position:relative; padding-top:30px;}
.gg-slider-track input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:linear-gradient(to right, var(--purple-600) var(--gg-fill,0%), var(--border) var(--gg-fill,0%));
  outline:none; cursor:pointer; margin:0; display:block;
}
.gg-slider-track input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--purple-600); box-shadow:0 1px 4px rgba(0,0,0,.18);
  cursor:grab; transition:transform .12s ease;
}
.gg-slider-track input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.15);}
.gg-slider-track input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--purple-600);
  box-shadow:0 1px 4px rgba(0,0,0,.18); cursor:grab;
}
.gg-slider-track input[type="range"]::-moz-range-track{height:6px; border-radius:99px; background:var(--border);}
.gg-slider-track input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--purple-400,var(--purple-500)); outline-offset:2px;}
.gg-slider-bubble{
  position:absolute; top:0; transform:translateX(-50%);
  background:var(--ink-900); color:var(--card-bg); font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:7px; white-space:nowrap; pointer-events:none;
}
.gg-slider-bubble::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--ink-900);
}
.gg-slider-bounds{display:flex; justify-content:space-between; font-size:10.8px; color:var(--ink-500); margin-top:6px;}

/* Dual-thumb variant (age range etc): two overlaid native inputs sharing one
   visual track — keeps real keyboard/touch support on both thumbs instead of
   reinventing drag physics. */
.gg-range-dual{position:relative; padding-top:30px; height:20px;}
.gg-range-dual-rail{position:absolute; top:39px; left:0; right:0; height:6px; border-radius:99px; background:var(--border);}
.gg-range-dual-fill{position:absolute; top:39px; height:6px; border-radius:99px; background:var(--purple-600);}
.gg-range-dual input[type="range"]{
  position:absolute; top:30px; left:0; width:100%; height:20px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none;
}
.gg-range-dual input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; pointer-events:auto;
  background:#fff; border:3px solid var(--purple-600); box-shadow:0 1px 4px rgba(0,0,0,.18); cursor:grab;
}
.gg-range-dual input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.15);}
.gg-range-dual input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; pointer-events:auto;
  background:#fff; border:3px solid var(--purple-600); box-shadow:0 1px 4px rgba(0,0,0,.18); cursor:grab;
}
.gg-range-dual input[type="range"]::-moz-range-track{background:transparent; border:none;}
.gg-range-dual-bubble{
  position:absolute; top:0; transform:translateX(-50%);
  background:var(--ink-900); color:var(--card-bg); font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:7px; white-space:nowrap; pointer-events:none;
}
.gg-range-dual-bubble::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--ink-900);
}
.gg-range-dual-bounds{display:flex; justify-content:space-between; font-size:10.8px; color:var(--ink-500); margin-top:16px;}

/* Radius-targeting map */
.gg-radius-map{width:100%; height:220px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); margin-top:12px;}
.gg-audience-readout{
  display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px;
  background:var(--purple-50); border-radius:var(--radius-sm); font-size:12.4px; color:var(--purple-700); font-weight:600;
}
.gg-audience-readout .ob-spin{width:13px; height:13px;}

/* AI Campaign Builder — result step (marketing-builder.js) */
.wiz-creative-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:start;}
.wiz-creative-copy{min-width:0;}
.wiz-image-slot{
  background:var(--card-bg); border:1px dashed var(--purple-200); border-radius:var(--radius-md);
  min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px; position:relative;
}
.wiz-image-slot p{font-size:11.5px; color:var(--ink-500); margin:8px 0 0;}
.wiz-image-slot--filled{padding:0; border-style:solid; overflow:hidden;}
.wiz-image-slot--filled img{width:100%; height:100%; object-fit:cover; display:block; min-height:180px;}
.wiz-image-slot--filled .icon-btn{position:absolute; top:8px; right:8px; background:rgba(255,255,255,.92); backdrop-filter:blur(2px);}
.wiz-more-details{margin-top:16px; border-top:1px solid var(--purple-100); padding-top:4px;}
.wiz-more-details summary{cursor:pointer; font-size:12.4px; font-weight:600; color:var(--purple-600); padding:8px 0; list-style:none;}
.wiz-more-details summary::-webkit-details-marker{display:none;}
.wiz-more-details summary::before{content:'▸ '; display:inline-block; transition:transform .15s ease;}
.wiz-more-details[open] summary::before{transform:rotate(90deg);}
@media (max-width:640px){
  .wiz-creative-grid{grid-template-columns:1fr;}
}