/* ---------- Grid ---------- */
  .grid-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px;}
  .grid-stats.grid-stats-5{grid-template-columns:repeat(5,1fr);}
  .card {
  transition:box-shadow .2s ease, transform .2s ease;
  min-width:0;
}
  .stat-card{padding:20px; cursor:default;}
  .stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .stat-card-clickable{cursor:pointer;}
  .stat-card-clickable:focus-visible{outline:2px solid var(--purple-600); outline-offset:2px;}
  /* Anything that leads somewhere (data-go) says so: pointer, a lift on hover, a visible keyboard ring. */
  [data-go]{cursor:pointer;}
  [data-go]:focus-visible{outline:2px solid var(--purple-600); outline-offset:2px;}
  .card[data-go], .stat-card-clickable{transition:border-color .15s ease, box-shadow .15s ease;}
  .card[data-go]:hover, .stat-card-clickable:hover{border-color:color-mix(in srgb, var(--purple-600) 28%, var(--border)); box-shadow:0 6px 18px rgba(124,58,237,.10);}
  .list-row[data-go]:hover{background:var(--purple-50);}
  .inline-link{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--purple-600); cursor:pointer; text-decoration:none;}
  .inline-link:hover{text-decoration:underline;}
  @media (prefers-reduced-motion:reduce){ .card[data-go], .stat-card-clickable{transition:none;} }
  .visit-badge { display:inline-block; color:var(--ink-500); background:var(--ink-100); vertical-align:middle; }
  .visit-badge-new{color:var(--green-600); background:var(--green-50);}

  /* Inventory module */
  .inv-scan-camera-wrap{position:relative; width:100%; aspect-ratio:3/4; max-height:60vh; background:#000; border-radius:16px; overflow:hidden;}
  .inv-scan-camera-wrap video{width:100%; height:100%; object-fit:cover;}
  .inv-scan-target{position:absolute; inset:22% 12%; border:2px solid #fff; border-radius:12px; box-shadow:0 0 0 999px rgba(0,0,0,.35);}
  .inv-scan-target::after{content:''; position:absolute; left:4%; right:4%; top:50%; height:2px; background:#ff3b30; box-shadow:0 0 8px #ff3b30; animation:invLaserSweep 1.6s ease-in-out infinite;}
  @keyframes invLaserSweep{0%,100%{top:12%;} 50%{top:88%;}}
  .inv-bulk-row{display:flex; align-items:center; gap:8px; font-size:12.6px; padding:8px 0; border-bottom:1px solid var(--border);}
  .inv-bulk-row:last-child{border-bottom:none;}
  .inv-bulk-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .inv-bulk-dot.green{background:var(--green-600);}
  .inv-bulk-dot.amber{background:var(--amber-600);}

  .inv-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; }
  .inv-row-card:hover{background:var(--ink-100);}
  .inv-row-card:focus-visible{outline:2px solid var(--purple-600); outline-offset:2px;}
  .inv-row-photo{flex-shrink:0; width:42px; height:42px; border-radius:10px; background:var(--purple-100); color:var(--purple-600); display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden;}
  .inv-row-photo img{width:100%; height:100%; object-fit:cover;}
  .inv-row-main{flex:1; min-width:0;}
  .inv-row-name{font-size:13.8px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .inv-row-meta{font-size:12.2px; color:var(--ink-500); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .inv-row-stock{flex-shrink:0; max-width:42%; text-align:right;}
  .inv-row-qty{font-size:13.4px; font-weight:700; margin-bottom:2px;}
  .inv-qty-low{color:var(--red-600);}
  .inv-type-badge { display:inline-block; vertical-align:middle; }
  .inv-type-retail{background:var(--blue-50); color:var(--blue-600);}
  .inv-type-pro{background:var(--purple-100); color:var(--purple-600);}
  .inv-confirm-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .inv-confirm-col .form-label{margin-top:10px;}
  .inv-confirm-photo{width:100%; aspect-ratio:1; max-width:140px; border-radius:12px; background:var(--ink-100); color:var(--ink-400); display:flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden;}
  .inv-confirm-photo img{width:100%; height:100%; object-fit:cover;}

@media print{
  body.inv-printing-label > *{visibility:hidden;}
  body.inv-printing-label #invPrintLabelArea, body.inv-printing-label #invPrintLabelArea *{visibility:visible;}
  body.inv-printing-label #invPrintLabelArea{position:fixed; top:0; left:0; border:none;}
}
  .stat-top{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .stat-icon{width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
  .stat-icon svg{width:20px;height:20px;}
  .stat-title{font-size:13px; color:var(--ink-500); font-weight:500;}
  .stat-value{font-size:26px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px;}
  .stat-delta{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:4px;}
  .up{color:var(--green-600);} .down{color:var(--red-600);}

  /* Overview main section = ONE row of two cards: Business Overview | AI card (AI Insights and
     AI Assistant live together in one card), same height. (Quick Actions + Refer & Earn
     used to live inside the assistant card, which made it ~830px tall and forced
     this section onto several rows; they now have their own row, .grid-actions.) */
  .grid-main{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:stretch;}
  /* Headers in this row never break mid-title or squash the dropdown: they wrap as a unit. */
  .grid-main .card-head{flex-wrap:wrap; gap:8px 12px;}
  .grid-main .card-head-title, .grid-main .select-pill{white-space:nowrap;}
  .col-span-2{grid-column:span 2;}
  .grid-main > .col-span-2{grid-column:auto;}
  .grid-main > .col-span-2.card{display:flex; flex-direction:column;}
  /* Fixed-height wrapper = the Chart.js "responsive container" pattern; it grows with
     the row (flex) and the chart follows. */
  .grid-main .chart-wrap{position:relative; flex:1 1 240px; min-height:240px;}
  .grid-main .chart-wrap canvas{max-height:none;}

  .card-head{display:flex; align-items:center; justify-content:between; justify-content:space-between; padding:20px 20px 4px;}
  .card-head-title{display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:700;}
  .card-head-title svg{width:17px;height:17px; color:var(--purple-600);}
  @media (max-width:340px){ .card-head{flex-wrap:wrap; gap:8px;} }
  .select-pill{
    border:1px solid var(--border); background:var(--card-bg); border-radius:9px; padding:6px 10px; font-size:12.5px;
    color:var(--ink-700); display:flex; align-items:center; gap:5px; font-weight:500;
  }
  .link-btn { color:var(--purple-600); background:var(--purple-50); }

  .revenue-total{padding:6px 20px 0;}
  .revenue-total b{font-size:27px; letter-spacing:-.02em;}
  .revenue-total .sub{color:var(--ink-500); font-size:12.5px; margin-top:2px;}
  .revenue-total .growth{color:var(--green-600); font-weight:600; font-size:12.5px;}
  .chart-wrap{padding:8px 12px 18px;}
  canvas{max-height:220px;}

  .insight-list{display:flex; flex-direction:column; gap:10px; padding:14px 16px 18px;}
  .insight{
    display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:14px; border:1px solid var(--border);
    cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .insight:hover{transform:translateX(2px); box-shadow:var(--shadow-sm);}
  .insight-ic{width:34px;height:34px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .insight-ic svg{width:16px;height:16px;}
  .insight-text b{font-size:13.3px; font-weight:600; display:block;}
  .insight-text p{margin:3px 0 0; font-size:12px; color:var(--ink-500);}
  .insight.red{background:var(--red-50); border-color:transparent;}
  .insight.amber{background:var(--amber-50); border-color:transparent;}
  .insight.blue{background:var(--blue-50); border-color:transparent;}
  .insight.green{background:var(--green-50); border-color:transparent;}
  .insight .chev{margin-left:auto; color:var(--ink-500); flex-shrink:0;}

  /* Lists */
  .list-row{display:flex; align-items:center; gap:12px; padding:11px 20px;}
  .list-row + .list-row{border-top:1px solid var(--border);}
  .list-row-clickable{cursor:pointer; transition:background .15s ease;}
  .list-row-clickable:hover, .list-row-clickable:focus-visible{background:var(--purple-50);}
  .list-row-clickable .chev{margin-left:6px; color:var(--ink-500); flex-shrink:0;}
  .rank{width:20px; font-size:12.5px; color:var(--ink-500); font-weight:600;}
  .thumb{width:34px;height:34px;border-radius:10px; background:linear-gradient(135deg,var(--purple-100),var(--purple-200)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--purple-700);}
  .list-name{font-size:13.4px; font-weight:600;}
  .list-sub{font-size:11.5px; color:var(--ink-500);}
  .list-right{margin-left:auto; text-align:right;}
  .list-amount{font-size:13.4px; font-weight:700;}
  .list-delta{font-size:11.5px; font-weight:600;}
  .status-confirmed{background:var(--green-50); color:var(--green-600);}
  .status-pending{background:var(--amber-50); color:var(--amber-600);}

  /* .grid-lists is shared: Customers, Marketing etc. use it for THREE cards, the Overview
     dashboard for FOUR. The shared rule stays 3 columns; only the Overview view changes it
     (2x2 on mid-size screens, one row of four from 1280px). Scoping by #view-dashboard keeps
     the other modules exactly as they were. */
  .grid-lists{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px;}
  @media (min-width:1201px) and (max-width:1279px){ #view-dashboard .grid-lists{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (min-width:1280px){ #view-dashboard .grid-lists{grid-template-columns:repeat(4,minmax(0,1fr));} }
  /* On the Overview each of the four cards is a size container, so its rows tighten up by
     themselves when the card is narrow. */
  #view-dashboard .grid-lists > .card{container-type:inline-size;}
  @container (max-width:300px){
    .card-head{padding:16px 14px 4px; flex-wrap:nowrap; gap:8px;}
    .card-head-title{font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .card-head .select-pill, .card-head .link-btn{flex-shrink:0; padding:5px 9px; font-size:11.5px;}
    .list-row{padding:10px 14px; gap:10px;}
    .rank{width:14px;}
    .thumb{width:30px; height:30px; font-size:11px; border-radius:9px;}
    .list-row > div:not([class]){flex:1; min-width:0;}
    .list-name, .list-sub{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .list-row > .list-name{flex:1;}
    .list-row .chev{display:none;}
    .list-amount{font-size:12.8px;}
  }
  /* Very narrow (4 cards on a ~1280px screen): drop the initials chip so the names
     stay readable instead of turning into "Rubina ...". */
  @container (max-width:260px){
    .thumb{display:none;}
    .card-head-title svg{display:none;}
  }

  /* ---- Overview polish (scoped to #view-dashboard; nothing here touches other modules) ---- */
  /* One scale for card titles: Quick Actions and AI Assistant now match the other card headers. */
  #view-dashboard .qa-title, #view-dashboard .assistant-title{font-size:15.5px; font-weight:700;}
  /* Figures line up in a column and don't jitter when they change. */
  #view-dashboard :is(.stat-value, .revenue-total b, .list-amount, .list-delta){font-variant-numeric:tabular-nums;}
  /* "No data yet" / "All time" are labels, not results: quieter than a real delta. */
  .stat-delta-muted{color:var(--ink-500); font-weight:500;}
  /* The assistant's welcome bubble already says hello — don't show the greeting twice. */
  .ai-merged .assistant-greet:has(+ .chat-log:not(:empty)){display:none;}
  /* Chart with nothing to plot: a message and the next step instead of a flat line. */
  .chart-empty{position:absolute; inset:8px 12px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:0 16px; background:linear-gradient(180deg, transparent, var(--card-bg) 70%);}
  .chart-empty b{font-size:14px; font-weight:700; color:var(--ink-900);}
  .chart-empty span{font-size:12.8px; color:var(--ink-500); max-width:34ch;}
  .chart-empty .btn-secondary{margin-top:6px; padding:7px 14px; font-size:12.5px;}
  /* Keyboard focus is always visible on every control in the Overview. */
  #view-dashboard :is(button, [role="button"], a, input, .link-btn, .select-pill, .wave):focus-visible{outline:2px solid var(--purple-600); outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){
    #view-dashboard *, #view-dashboard *::before, #view-dashboard *::after{transition:none !important; animation:none !important;}
  }

  /* AI Recommendation banner */
  .banner{
    margin-top:16px; background:linear-gradient(120deg,var(--purple-50),var(--card-bg) 60%);
    border:1px solid var(--purple-100); border-radius:var(--radius-lg); padding:18px 22px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .banner-ic{width:44px;height:44px;border-radius:12px; background:var(--purple-600); color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0;}
  .banner-ic svg{width:20px;height:20px;}
  .banner-text{flex:1 1 240px; min-width:0;}
  .banner-text b{font-size:14px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;}
  .tag-high { background:var(--red-600); color:#fff; }
  .tag-medium { background:var(--amber-600); color:#fff; }
  .tag-low { background:var(--ink-300); color:var(--ink-700); }
  .banner-text p{margin:3px 0 0; font-size:12.8px; color:var(--ink-700);}
  .btn-primary {
  margin-left:auto;
  background:var(--purple-600);
  color:#fff;
  border:none;
  box-shadow:0 4px 12px rgba(124,58,237,.3);
  min-height:44px;
}
  .btn-primary:hover{background:var(--purple-700); transform:translateY(-1px);}

  /* AI Assistant column */
  .assistant{padding:18px; display:flex; flex-direction:column; gap:14px;}
  /* AI Insights + AI Assistant in ONE card: insights on top (first three, "View All" for the rest),
     the assistant underneath. Suggestions become wrapping pills so the card stays compact. */
  .assistant.ai-merged{padding:0; gap:0;}
  .ai-merged .ai-section{min-width:0;}
  .ai-merged .ai-assistant-section{flex:1; display:flex; flex-direction:column; gap:14px; padding:18px; border-top:1px solid var(--border);}
  .ai-merged .insight-list{padding:12px 16px 16px; gap:8px;}
  .ai-merged .insight{padding:10px 12px;}
  .ai-merged .insight:nth-child(n+4){display:none;}
  .ai-merged #suggestList{flex-direction:row !important; flex-wrap:wrap; gap:8px !important;}
  .ai-merged .suggest-btn{width:auto; padding:7px 12px; border-radius:999px; font-size:12px; gap:8px;}
  .assistant-head{display:flex; align-items:center; gap:10px;}
  .assistant-head .wave{margin-left:auto; cursor:pointer; color:var(--ink-500);}
  .assistant-ic{width:32px;height:32px;border-radius:9px; background:var(--purple-600); color:#fff; display:flex;align-items:center;justify-content:center;}
  .assistant-ic svg{width:16px;height:16px;}
  .assistant-title{font-size:14.5px; font-weight:700;}
  .assistant-greet p{margin:0; font-size:13px; color:var(--ink-700); font-weight:500;}
  .assistant-greet span{font-size:12px; color:var(--ink-500);}
  .chat-log{display:flex; flex-direction:column; gap:8px; max-height:180px; overflow-y:auto;}
  .chat-bubble{font-size:12.6px; padding:10px 12px; border-radius:12px; line-height:1.45;}
  .chat-bubble.user{background:var(--purple-600); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
  .chat-bubble.ai{background:var(--ink-100); color:var(--ink-900); align-self:flex-start; border-bottom-left-radius:4px;}
  .chat-bubble.chat-typing{display:flex; align-items:center; gap:4px; padding:12px 14px;}
  .typing-dot{width:6px; height:6px; border-radius:50%; background:var(--ink-500); opacity:.4; animation:chatTypingBounce 1.2s infinite ease-in-out;}
  .typing-dot:nth-child(2){animation-delay:.15s;}
  .typing-dot:nth-child(3){animation-delay:.3s;}
  @keyframes chatTypingBounce{0%,60%,100%{opacity:.4; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}
  .suggest-btn{
    width:100%; text-align:left; display:flex; align-items:center; gap:10px; background:var(--ink-100); border:1px solid transparent;
    padding:10px 12px; border-radius:11px; font-size:12.6px; font-weight:500; color:var(--ink-700);
    transition:background .15s ease, border-color .15s ease;
  }
  .suggest-btn:hover{background:var(--purple-50); border-color:var(--purple-100); color:var(--purple-700);}
  .suggest-btn svg{width:15px;height:15px; color:var(--purple-600); flex-shrink:0;}
  .ask-row{display:flex; gap:8px; margin-top:2px;}
  .ask-input{
    flex:1; min-width:0; border:1px solid var(--border); border-radius:11px; padding:10px 12px; font-size:12.8px; background:var(--card-bg); color:var(--ink-900);
  }
  .ask-input:focus{outline:none; border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100);}
  .ask-send{width:40px; border-radius:11px; background:var(--purple-600); color:#fff; border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .ask-send svg{width:16px;height:16px;}

  /* Quick Actions + Refer & Earn: their own one-row section under the main row. */
  .grid-actions{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; margin-top:16px; align-items:stretch;}
  .grid-actions .quick-actions{margin:0; padding:18px;}
  .grid-actions .qa-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .grid-actions .refer-card{margin-top:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
  .qa-title{font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
  .qa-title svg{width:16px;height:16px; color:var(--purple-600);}
  .qa-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
  .qa-item{
    background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:14px 8px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease;
  }
  .qa-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
  .qa-ic{width:36px;height:36px;border-radius:10px; display:flex; align-items:center; justify-content:center;}
  .qa-ic svg{width:17px;height:17px;}
  .qa-label{font-size:11.3px; font-weight:600; color:var(--ink-700);}

  .refer-card{
    margin-top:16px; background:linear-gradient(135deg,var(--purple-600),var(--purple-700)); color:#fff;
    border-radius:var(--radius-lg); padding:18px; position:relative; overflow:hidden;
  }
  .refer-card svg.gift{width:22px;height:22px; margin-bottom:8px;}
  .refer-card b{font-size:14.5px; display:block;}
  .refer-card p{font-size:12px; opacity:.85; margin:4px 0 12px;}
  .refer-btn { background:#fff; color:var(--purple-700); border:none; display:inline-flex; align-items:center; gap:6px; }

  /* Toast */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(14px) scale(.96); opacity:0;
    background:var(--ink-900); color:#fff; padding:12px 20px; border-radius:12px; font-size:13px; font-weight:500;
    box-shadow:var(--shadow-lg); transition:opacity .28s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
    z-index:200; pointer-events:none; display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px);
  }
  [data-theme="dark"] .toast{background:#f4f4f5; color:#18181b;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}
  .toast-icon{display:flex; flex-shrink:0;} .toast-icon:empty{display:none;}
  .toast-body{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .toast-title{display:none;}
  .toast-close, .toast-action{display:none;}

  /* Card variant — success / error / info */
  .toast.toast-success, .toast.toast-error, .toast.toast-info{
    align-items:flex-start; text-align:left; padding:14px 12px 14px 16px; border-radius:16px; gap:11px;
    width:min(380px, calc(100vw - 32px)); background:var(--card-bg); color:var(--ink-900);
    box-shadow:0 14px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06); border-left:3px solid transparent;
  }
  [data-theme="dark"] .toast.toast-success, [data-theme="dark"] .toast.toast-error, [data-theme="dark"] .toast.toast-info{
    background:var(--card-bg); color:var(--ink-900);
  }
  .toast-success{border-left-color:var(--green-600);} .toast-success .toast-icon{color:var(--green-600);} .toast-success .toast-title{color:var(--green-600);}
  .toast-error{border-left-color:var(--red-600);} .toast-error .toast-icon{color:var(--red-600);} .toast-error .toast-title{color:var(--red-600);}
  .toast-info{border-left-color:var(--blue-600);} .toast-info .toast-icon{color:var(--blue-600);} .toast-info .toast-title{color:var(--blue-600);}
  .toast-success .toast-icon svg, .toast-error .toast-icon svg, .toast-info .toast-icon svg{width:19px; height:19px; margin-top:1px;}
  .toast.toast-success .toast-title, .toast.toast-error .toast-title, .toast.toast-info .toast-title{
    display:block; font-size:13.5px; font-weight:700; line-height:1.35;
  }
  .toast.toast-success #toastMsg, .toast.toast-error #toastMsg, .toast.toast-info #toastMsg{
    display:block; font-size:12.5px; font-weight:500; line-height:1.45; color:var(--ink-500);
  }
  .toast.toast-success .toast-close, .toast.toast-error .toast-close, .toast.toast-info .toast-close{
    display:flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px;
    margin:-2px -2px 0 0; padding:0; border:none; border-radius:8px; background:transparent; color:var(--ink-500);
    opacity:.7; cursor:pointer; pointer-events:auto; transition:opacity .15s ease, background .15s ease;
  }
  .toast-close:hover{opacity:1; background:var(--ink-100);}
  .toast.toast-success .toast-action, .toast.toast-error .toast-action, .toast.toast-info .toast-action{
    display:inline-flex; flex-shrink:0; align-self:center; font-size:12px; font-weight:700; padding:6px 13px;
    border-radius:9px; border:1.5px solid currentColor; background:transparent; cursor:pointer; pointer-events:auto;
    transition:background .15s ease, transform .12s cubic-bezier(.34,1.56,.64,1);
  }
  .toast-success .toast-action{color:var(--green-600);} .toast-error .toast-action{color:var(--red-600);} .toast-info .toast-action{color:var(--blue-600);}
  .toast-action:hover{background:var(--ink-100);} .toast-action:active{transform:scale(.94);}
  @media (max-width:560px){
    .toast.toast-success, .toast.toast-error, .toast.toast-info{width:calc(100vw - 32px); padding:13px 10px 13px 14px;}
  }

  /* ---------- Global Search ---------- */
  .gsearch-wrap{position:relative;}
  .gsearch-box{
    display:none; align-items:center; gap:8px; position:absolute; top:0; right:0; height:38px;
    background:var(--card-bg); border:1px solid var(--border); border-radius:11px; padding:0 12px;
    width:38px; overflow:hidden; transition:width .2s ease; z-index:120;
  }
  .gsearch-box svg{width:15px;height:15px; color:var(--ink-500); flex-shrink:0;}
  .gsearch-input{flex:1; border:none; background:none; font-size:13px; color:var(--ink-900); min-width:0;}
  .gsearch-input:focus{outline:none;}
  .gsearch-wrap.active .gsearch-box{display:flex; width:280px; border-color:var(--purple-500); box-shadow:0 0 0 3px var(--purple-100);}
  .gsearch-wrap.active #searchBtn{opacity:0; pointer-events:none;}

  /* Date pill collapses to just its icon while search is open, so the
     expanding search box (which grows leftward, absolutely positioned)
     never overlaps it — same gap is kept either way, animated. */
  .date-pill-label, .date-pill-chevron{transition:opacity .18s ease, max-width .2s ease, margin .2s ease; opacity:1; max-width:100px;}
  .date-pill-chevron{max-width:14px;}
  .date-range-wrap.gs-collapsed .date-pill{transition:padding .2s ease;}
  .date-range-wrap.gs-collapsed .date-pill-label,
  .date-range-wrap.gs-collapsed .date-pill-chevron{opacity:0; max-width:0; margin:0; overflow:hidden; pointer-events:none;}

  .gsearch-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:360px; overflow-y:auto;
    background:var(--card-bg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
    z-index:119; padding:6px;
  }
  .gsearch-dropdown.show{display:block;}
  .gsearch-item{
    width:100%; display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px;
    background:none; border:none; text-align:left; transition:background .12s ease;
  }
  .gsearch-item:hover, .gsearch-item.active{background:var(--ink-100);}
  .gsearch-item-ic{width:30px;height:30px;border-radius:9px; background:var(--purple-50); color:var(--purple-600); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .gsearch-item-ic svg{width:15px;height:15px;}
  .gsearch-item-text{display:flex; flex-direction:column; min-width:0;}
  .gsearch-item-text b{font-size:13px; font-weight:600; color:var(--ink-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .gsearch-item-text span{font-size:11px; color:var(--ink-500);}
  .gsearch-empty{padding:16px 10px; text-align:center; font-size:12.5px; color:var(--ink-500);}
  @media (max-width:560px){
    .gsearch-wrap.active .gsearch-box{width:200px;}
    .gsearch-dropdown{width:260px;}
  }

  /* ---------- Account Menu ---------- */
  .account-wrap{position:relative;}
  .avatar-btn{border:1px solid var(--border); cursor:pointer; padding:0;}
  .avatar-btn:hover{filter:brightness(1.04);}
  .avatar-btn:focus-visible{outline:2px solid var(--purple-500); outline-offset:2px;}
  .account-dropdown {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:284px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  z-index:250;
  padding:8px;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
}
  .account-dropdown.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .acct-dd-header{display:flex; align-items:center; gap:11px; padding:8px 10px 12px;}
  .acct-dd-avatar{width:40px;height:40px;border-radius:12px; background:linear-gradient(135deg,var(--purple-100),var(--purple-200)); color:var(--purple-700); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:13.5px; flex-shrink:0;}
  .acct-dd-name{font-size:13.4px; font-weight:700; line-height:1.3;}
  .acct-dd-email{font-size:11.3px; color:var(--ink-500); margin-top:1px;}
  .acct-dd-divider{height:1px; background:var(--border); margin:6px 2px;}
  .acct-dd-item{width:100%; display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; font-size:13px; font-weight:500; color:var(--ink-700); background:none; border:none; text-align:left; transition:background .12s ease;}
  .acct-dd-item:hover{background:var(--ink-100);}
  .acct-dd-item svg{width:16px;height:16px; color:var(--ink-500); flex-shrink:0;}
  .acct-dd-item.danger{color:var(--red-600);}
  .acct-dd-item.danger svg{color:var(--red-600);}
  .acct-dd-item.danger:hover{background:var(--red-50);}
  .acct-dd-appearance{padding:4px 10px 8px;}
  .acct-dd-appearance-label{display:flex;align-items:center;gap:11px; font-size:13px; font-weight:500; color:var(--ink-700); margin-bottom:8px;}
  .acct-dd-appearance-label svg{width:16px;height:16px;color:var(--ink-500);}
  .acct-seg{display:flex; background:var(--ink-100); border-radius:10px; padding:3px; gap:3px;}
  .acct-seg-btn{flex:1; padding:6px 0; font-size:11.3px; font-weight:600; color:var(--ink-500); border-radius:8px; border:none; background:none; transition:background .12s ease, color .12s ease;}
  .acct-seg-btn.active{background:var(--card-bg); color:var(--purple-600); box-shadow:var(--shadow-sm);}
  .acct-seg-4{display:grid; grid-template-columns:1fr 1fr;}
  .acct-seg-4 .acct-seg-btn{padding:7px 4px;}

  /* ---------- Drawer ---------- */
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(15,10,25,.45); z-index:300; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .drawer-overlay.show{opacity:1; pointer-events:auto;}
  .drawer {
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:400px;
  max-width:92vw;
  background:var(--card-bg);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  overflow-y:auto;
  padding:20px;
}
  .drawer-overlay.show .drawer{transform:translateX(0);}
  .drawer-head{display:flex; justify-content:flex-end; margin-bottom:6px;}
  .drawer-avatar{width:56px;height:56px;border-radius:16px; background:linear-gradient(135deg,var(--purple-100),var(--purple-200)); color:var(--purple-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; margin-bottom:12px;}
  .drawer-body h2{font-size:19px; margin:0 0 2px; letter-spacing:-.01em;}
  .drawer-body .drawer-sub{font-size:12.8px; color:var(--ink-500); margin-bottom:16px;}
  .drawer-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .drawer-stat{border:1px solid var(--border); border-radius:12px; padding:12px;}
  .drawer-stat b{font-size:16px; display:block;}
  .drawer-stat span{font-size:11.3px; color:var(--ink-500);}
  .drawer-section-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-500); margin:18px 0 8px;}
  .drawer-note{font-size:13px; color:var(--ink-700); line-height:1.55; background:var(--ink-100); padding:12px; border-radius:12px;}
  .drawer-tags{display:flex; flex-wrap:wrap; gap:6px;}
  .drawer-tag { background:var(--purple-50); color:var(--purple-600); }
  .visit-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.8px;}
  .visit-row:last-child{border-bottom:none;}

  /* Toggle switch */
  .switch{position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .switch-track{
    position:absolute; inset:0; background:var(--ink-300); border-radius:20px; cursor:pointer; transition:background .18s ease;
  }
  .switch-track::before {
  content:'';
  position:absolute;
  height:16px;
  width:16px;
  left:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
  .switch input:checked + .switch-track{background:var(--green-600);}
  .switch input:checked + .switch-track::before{transform:translateX(16px);}
  .switch input:focus-visible + .switch-track{outline:2px solid var(--purple-500); outline-offset:2px;}


/* Inventory in-page panels — list/detail navigation without modal stacking. */
.inv-page-panel{margin-bottom:18px;}
.inv-panel-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:2px 0 12px;border-bottom:1px solid var(--border);}
.inv-panel-title{font-size:16px;font-weight:700;color:var(--ink-900);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-panel-body{min-width:0;}
.inv-panel-header .btn-secondary{margin-left:0;flex:0 0 auto;}
.inv-panel-section{background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:16px;}
.inv-panel-section-title{font-size:13.4px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;}
.inv-panel-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.inv-panel-toggle{font-size:12.4px; font-weight:600; color:var(--purple-600); background:none; border:none; cursor:pointer; padding:4px 0;}

/* POS checkout — these classes existed in inventory-pos.js's markup with no
   matching CSS anywhere in the project (the redesign never got styled),
   so the panel would have rendered as unstyled stacked divs. */

.checkout-context{margin-bottom:2px;}
.section-kicker { margin-bottom:4px; }
.checkout-context p{font-size:12.4px; color:var(--ink-500); margin-top:4px;}
.checkout-section-head { margin-bottom:10px; }
.checkout-section-head .checkout-hint{font-size:11.6px; color:var(--ink-500); font-weight:400;}
.checkout-add-row { margin-bottom:12px; }
.checkout-add-row select{flex:1;}
.checkout-qty{width:70px; flex-shrink:0;}
.checkout-lines { margin-bottom:4px; }
.checkout-lines:empty::before{content:'No items added yet.'; font-size:12.6px; color:var(--ink-500);}
.checkout-payment-row { flex-wrap:wrap; justify-content:space-between; margin-top:14px; }
.checkout-payment-row .form-group{flex:1; min-width:160px;}
.checkout-total{text-align:right;}
.checkout-total .checkout-total-label{font-size:11.8px; color:var(--ink-500);}
.checkout-total .checkout-total-value{font-size:19px; font-weight:800;}
.checkout-actions { justify-content:flex-end; margin-top:16px; }
@media (max-width:560px){
  .inv-panel-header{gap:8px;}
  .inv-panel-title{font-size:14px;}
  .inv-panel-header .btn-secondary{padding:9px 12px;}
  .inv-panel-grid-2{grid-template-columns:1fr;}
  .checkout-field-grid{grid-template-columns:1fr;}
  .checkout-add-row{flex-wrap:wrap;}
}


/* =========================================================
   BUTTON SYSTEM — single source of truth for button geometry
   Variants (colour/background/border) stay with each class;
   size, radius, weight and layout live ONLY here.
     md  : btn-primary / btn-secondary / btn-danger
     sm  : action-btn-sm, action-btn-primary-sm, btn-connect,
           btn-disconnect, refer-btn, sb-danger-btn,
           date-range-today-btn, btn-upgrade
     xs  : link-btn, segment-sync-btn, seo-mini-btn
     icon: icon-btn (38px, header) · row-action-btn, cal-nav-btn,
           page-btn (32px, dense rows/toolbars)
   Intentionally different (own design language, not touched):
     ci-btn* (customer check-in theme), segmented controls
     (acct-seg-btn, cal-view-btn, cs-tool-btn, sb-viewport-btn).
========================================================= */
:root{
  --btn-pad-md:11px 20px; --btn-r-md:11px; --btn-fs-md:13.4px;
  --btn-pad-sm:8px 14px;  --btn-r-sm:10px; --btn-fs-sm:12.4px;
  --btn-pad-xs:6px 12px;  --btn-r-xs:9px;  --btn-fs-xs:12px;
  --btn-fw:600;
  --btn-icon-sm:32px; --btn-icon-r:10px;
  --btn-transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn-primary,.btn-secondary,.btn-danger{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  padding:var(--btn-pad-md); border-radius:var(--btn-r-md);
  font-size:var(--btn-fs-md); font-weight:var(--btn-fw); transition:var(--btn-transition);
}
.modal-actions .btn-secondary,.modal-actions .btn-danger{min-height:44px;}
.action-btn-sm,.action-btn-primary-sm,.btn-connect,.btn-disconnect,.refer-btn,.sb-danger-btn,.date-range-today-btn,.btn-upgrade{
  padding:var(--btn-pad-sm); border-radius:var(--btn-r-sm);
  font-size:var(--btn-fs-sm); font-weight:var(--btn-fw);
}
.link-btn,.segment-sync-btn,.seo-mini-btn{
  padding:var(--btn-pad-xs); border-radius:var(--btn-r-xs);
  font-size:var(--btn-fs-xs); font-weight:var(--btn-fw);
}
.row-action-btn,.cal-nav-btn,.page-btn{height:var(--btn-icon-sm); border-radius:var(--btn-icon-r);}
.row-action-btn,.cal-nav-btn{width:var(--btn-icon-sm);}


/* =========================================================
   BADGE + CHIP SYSTEM — one geometry per type
     badge : small non-interactive status/label pill
             status-pill, cs-post-status-pill, src-badge, tag-high/medium/low,
             visit-badge, staff-tag, inv-type-badge, drawer-tag,
             sb-publish-badge, dev-status-pill
     chip  : interactive filter / toggle pill
             chip, cs-pill, seo-kw-chip, ci-filter-chip, dev-radio-pill
   Colour stays with each class. Intentionally different (not touched):
   micro count bubbles (nav-badge, mkt-tab-badge, stub-tag, dot-badge,
   loyalty-badge), dense content-plan/calendar labels (cp-*, cs-cal-chip,
   cs-video-*, cs-pv-badge), selection tiles (service-channel-chip,
   ob-service-chip, ci-goal-chip, *-stat-chip) and ci-badge.
========================================================= */
:root{
  --badge-pad:3px 9px; --badge-r:20px; --badge-fs:10.8px; --badge-fw:700;
  --chip-pad:7px 14px; --chip-r:999px; --chip-fs:12.5px; --chip-fw:600;
}
.status-pill,.cs-post-status-pill,.src-badge,.tag-high,.tag-medium,.tag-low,.visit-badge,.staff-tag,.inv-type-badge,.drawer-tag,.sb-publish-badge,.dev-status-pill{
  padding:var(--badge-pad); border-radius:var(--badge-r); font-size:var(--badge-fs); font-weight:var(--badge-fw);
}
.chip,.cs-pill,.seo-kw-chip,.ci-filter-chip,.dev-radio-pill{
  padding:var(--chip-pad); border-radius:var(--chip-r); font-size:var(--chip-fs); font-weight:var(--chip-fw);
}


/* =========================================================
   CARD SYSTEM — two tiers, one surface
     surface  (radius-lg 20px) : card, service-card, staff-card, auth-card
                                 background + 1px border + shadow-sm live ONLY here
     compact  (radius-md 14px) : action-card, smai-conn-card, cp-day-card, cs-pv-card,
                                 smai-comp-card, staff-portal-status-card, inv-row-card,
                                 booking-row-card, cp-dur-card, wizard-result-card,
                                 conn-card, sb-theme-card, sb-review-card
   Modifier cards that ride on .card (stat-card, mkt-kpi-card, cs-an-card,
   cs-idea-card, agent-card) inherit it and only set their own padding.
   Padding stays per-card (content density differs). Intentionally different:
   ci-* cards (customer check-in theme), gradient feature cards (plan-card,
   refer-card, cs-video-card) and the staff-dashboard "atelier" theme overrides.
========================================================= */
:root{ --card-r:var(--radius-lg); --card-r-sm:var(--radius-md); }
.card,.service-card,.staff-card{
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--card-r); box-shadow:var(--shadow-sm);
}
.auth-card{border-radius:var(--card-r);}
.action-card,.smai-conn-card,.cp-day-card,.cs-pv-card,.smai-comp-card,.staff-portal-status-card,
.inv-row-card,.booking-row-card,.cp-dur-card,.wizard-result-card,.conn-card,.sb-theme-card,.sb-review-card{
  border-radius:var(--card-r-sm);
}