@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

  :root{
    --cream:#FBF3E7; --ink:#16324F; --coral:#E8342B; --teal:#2AA9A0;
    --gold:#F5C242; --blush:#F7DCD4; --line:#E7E1D6; --muted:#8A8272;
    --good:#2AA9A0; --bad:#C2483F;
    --ink-2:#1D4570; --coral-2:#F4544A;
    --sky:#2D7DD2; --sky-2:#1B5FB0; --orange:#C85F17; --orange-2:#B85714;
    --shadow-sm: 0 1px 2px rgba(22,50,79,.08), 0 1px 1px rgba(22,50,79,.05);
    --shadow-md: 0 4px 14px rgba(22,50,79,.10), 0 2px 4px rgba(22,50,79,.06);
    --shadow-lg: 0 20px 44px rgba(22,50,79,.20), 0 6px 16px rgba(22,50,79,.10);
    --ease: cubic-bezier(.2,.8,.2,1);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  h1,h2,h3,.display{ font-family:'Fredoka', sans-serif; letter-spacing:.01em; }
  .mono{ font-family:'IBM Plex Mono', monospace; }

  header{
    background:linear-gradient(155deg, var(--ink) 0%, var(--ink-2) 100%); color:var(--cream);
    padding:12px 24px; display:flex; flex-direction:column; gap:10px;
    box-shadow:0 2px 12px rgba(34,40,59,.18);
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{ font-size:22px; }
  .brand-logo-img{ height:40px; max-width:120px; width:auto; object-fit:contain; border-radius:4px; }
  .brand-name{ font-weight:700; font-size:19px; }
  .brand-tag{ font-size:12px; opacity:.65; display:flex; align-items:center; gap:6px; }
  .sync-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); display:inline-block; flex:none; }
  .sync-dot.busy{ background:var(--gold); }
  .sync-dot.bad{ background:var(--coral); }
  .main-tab-bar{
    display:flex; align-items:center; gap:0; background:white; border-bottom:1px solid var(--line);
    padding:0 12px; overflow-x:auto; scrollbar-width:thin;
  }
  .main-tab-bar{ flex-wrap:nowrap; }
  .main-tab-btn{
    background:none; border:none; border-bottom:3px solid transparent; color:var(--muted);
    font-weight:600; font-size:12px; padding:10px 9px; cursor:pointer; white-space:nowrap; flex:0 0 auto;
    transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  }
  .main-tab-btn:hover{ color:var(--ink); background:rgba(232,52,43,.04); }
  .main-tab-btn.active{ color:var(--coral); border-bottom-color:var(--coral); }
  header .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .nav-group{ position:relative; }
  .nav-group-btn .nav-caret{ font-size:9px; margin-left:2px; opacity:.7; transition:transform .15s var(--ease); }
  .nav-group.open .nav-group-btn .nav-caret{ transform:rotate(180deg); }
  .nav-group.open .nav-group-btn{ background:rgba(255,255,255,.22); }
  .nav-group-tabs{
    display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:40;
    background:var(--ink-2); border:1px solid rgba(255,255,255,.14); border-radius:12px;
    padding:8px; flex-direction:column; gap:4px; min-width:220px;
    box-shadow:var(--shadow-lg); animation:overlay-fade-in .15s var(--ease);
  }
  .nav-group.open .nav-group-tabs{ display:flex; }
  .nav-group-tabs .icon-btn{ width:100%; text-align:left; justify-content:flex-start; border-radius:8px; }
  .icon-btn{
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--cream);
    border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
    transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .icon-btn:hover{ background:rgba(255,255,255,.16); transform:translateY(-1px); }
  .icon-btn:active{ transform:translateY(0); }
  .icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
  /* Header actions: two groups (nav tabs + utility icons) that never wrap to a new
     row. If the nav group is too wide for the window it scrolls sideways instead. */
  .hdr-actions{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; min-width:0; }
  .hdr-nav-group{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow-x:auto; min-width:0; scrollbar-width:thin; }
  .hdr-nav-group::-webkit-scrollbar{ height:4px; }
  .hdr-util-group{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; flex:0 0 auto; }
  /* Row-1 category group buttons: a clear pill for the active group. */
  .nav-group-btn{ border-radius:8px; font-weight:600; }
  .nav-group-btn.active{ background:rgba(255,255,255,.16) !important; color:#fff !important; font-weight:700; border-bottom-color:var(--coral) !important; }
  .header-tab-btn{ font-size:12.5px; padding:8px 7px; white-space:nowrap; color:var(--cream); flex:0 0 auto; }
  .header-tab-btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .header-tab-btn.active{ background:none !important; color:#fff !important; border-bottom-color:var(--coral) !important; }
  .staff-pill{
    background:rgba(244,183,64,.16); border:1px solid rgba(244,183,64,.4); color:var(--gold);
    border-radius:999px; padding:7px 12px; font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px;
    transition:background .18s var(--ease);
  }
  .staff-pill:hover{ background:rgba(244,183,64,.26); }
  .user-menu-btn{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--cream);
    border-radius:999px; padding:5px 12px 5px 5px; font-size:13px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:8px; transition:background .18s var(--ease);
  }
  .user-menu-btn:hover{ background:rgba(255,255,255,.14); }
  .user-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--coral); color:white;
    display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex:none;
  }

  .layout{ display:grid; grid-template-columns: 1fr 460px; gap:0; max-width:1380px; margin:0 auto; min-height:calc(100vh - 60px); }
  @media (max-width: 860px){ .layout{ grid-template-columns: 1fr; } .sidebar{ position:static !important; } }

  /* ---- mobile: real touch targets, no iOS auto-zoom, collapsed nav ---- */
  @media (max-width: 760px){
    header{ flex-wrap:wrap; padding:10px 14px; }
    #mobileMenuToggle{ display:inline-flex !important; align-items:center; min-height:44px; }
    header .actions{
      display:none; width:100%; flex-direction:column; align-items:stretch; gap:8px;
      margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12);
    }
    header .actions.mobile-open{ display:flex; }
    .actions .icon-btn, .actions .staff-pill{
      width:100%; justify-content:flex-start; text-align:left; min-height:46px; font-size:14px;
    }

    /* Real touch targets everywhere, not just the header */
    .btn, .icon-btn, .staff-pill, .qty button, .inv-adjust button, .del-btn,
    .cal-nav .icon-btn, .auth-account-btn, .modal-actions .btn{
      min-height:44px;
    }
    .qty button, .inv-adjust button{ min-width:38px; }

    /* Prevent iOS Safari from zooming the page in on every field focus */
    input, select, textarea{ font-size:16px !important; }
    .item-price input[type="number"]{ font-size:14px !important; } /* small inline price editors stay compact but still >=16 not practical here; acceptable tradeoff, rarely used on phones */

    /* Drawers go full-width on small screens instead of a fixed 320-360px column */
    .settings-panel{ width:100% !important; }

    /* Calendar: a 7-column grid can't work at phone width — switch to an agenda list */
    .cal-grid, .cal-dow{ display:none !important; }
    .cal-nav{ flex-wrap:wrap; }
    .cal-agenda{ display:block; }
    .cal-agenda-day{ margin-bottom:16px; }
    .cal-agenda-date{
      font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px; padding:6px 0;
      border-bottom:2px solid var(--line); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;
    }
    .cal-agenda-date.is-today{ color:var(--coral); border-bottom-color:var(--coral); }
    .cal-agenda-count{ font-size:11px; color:var(--muted); font-weight:400; }
    .cal-agenda-empty{ font-size:12px; color:var(--muted); padding:4px 0 12px; }
  }
  @media (min-width: 761px){ .cal-agenda{ display:none; } }

  .catalog{ padding:20px 24px 100px; }
  .search-wrap{ position:sticky; top:0; background:var(--cream); padding:2px 0 14px; z-index:5; }
  .search-input{
    width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13px;
    font-family:'Work Sans',sans-serif; background:white;
  }
  .search-input:focus{ outline:none; border-color:var(--coral); }
  .sync-status{ font-size:11px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:5px; }
  .sync-status .warn{ color:var(--bad); }
  .cat-section{ margin-bottom:26px; }
  .cat-title{ font-size:16px; font-weight:600; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
  .cat-title .bar{ width:6px; height:16px; border-radius:3px; background:var(--coral); display:inline-block; }
  .no-results{ font-size:13px; color:var(--muted); padding:20px 0; text-align:center; }
  .item-row{
    display:flex; align-items:center; gap:12px; background:white; border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; margin-bottom:8px;
    transition:box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
  }
  .item-row:hover{ box-shadow:var(--shadow-sm); border-color:#DCD4C4; }
  .item-info{ flex:1; min-width:0; }
  .item-name{ font-weight:600; font-size:14px; }
  .web-badge{ font-size:11px; }
  .theme-badge{ font-size:10px; font-weight:700; background:rgba(84,110,222,.14); color:#4a5fd6; border-radius:999px; padding:2px 8px; }
  .item-note{ font-size:12px; color:var(--muted); margin-top:1px; }
  .item-price{ font-size:13px; font-weight:700; white-space:nowrap; width:84px; text-align:right; }
  .item-price input{
    width:78px; text-align:right; border:1px solid var(--line); border-radius:6px; padding:4px 6px;
    font-size:13px; font-family:'Work Sans',sans-serif; font-weight:700; display:none;
  }
  body.edit-mode .item-price span{ display:none; }
  body.edit-mode .item-price input{ display:inline-block; }
  .del-btn{
    display:none; width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
    background:var(--cream); color:#C2483F; cursor:pointer; font-size:14px; line-height:1;
  }
  .del-btn:hover{ background:#FBEAE8; border-color:#C2483F; }
  body.edit-mode .del-btn{ display:inline-block; }
  .add-item-row{
    border:1.5px dashed var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px;
    text-align:center; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; display:none;
  }
  .add-item-row:hover{ border-color:var(--coral); color:var(--coral); }
  body.edit-mode .add-item-row{ display:block; }
  .qty{ display:flex; align-items:center; gap:6px; }
  .qty button{
    width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--cream);
    cursor:pointer; font-size:15px; font-weight:700; color:var(--ink); line-height:1;
  }
  .qty button:hover{ background:var(--blush); }
  .qty button:disabled{ opacity:.4; cursor:not-allowed; }
  .qty .n{ width:22px; text-align:center; font-weight:700; font-size:14px; }

  .sidebar{
    background:white; border-left:1px solid var(--line); padding:20px; position:sticky; top:0;
    height:100vh; overflow-y:auto;
  }
  .sidebar h2{ font-size:16px; margin:0 0 12px; }
  .field{ margin-bottom:10px; }
  .field label{ font-size:12px; font-weight:600; color:#57503F; display:block; margin-bottom:4px; }
  .field input, .field textarea, .field select{
    width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px;
    font-family:'Work Sans',sans-serif; background:var(--cream);
  }
  .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--coral); }
  .field.has-error input, .field.has-error textarea{ border-color:var(--bad); }
  #fld-custName.has-error input{ border-color:var(--bad); }
  #fld-individual-name.has-error input, #fld-contactCompanyName.has-error input{ border-color:var(--bad); }
  .field-error{ font-size:11px; color:var(--bad); margin-top:3px; display:none; }

  .seg-input-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .seg-box{
    width:28px !important; height:38px; text-align:center; font-size:16px; font-weight:700;
    padding:0 !important; border:1.5px solid var(--line); border-radius:8px;
    background:var(--cream); font-family:'Work Sans',sans-serif; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  .seg-box:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(232,52,43,.12); background:white; }
  .seg-box:not(:placeholder-shown){ border-color:var(--line); }
  .seg-gap{ width:10px; flex:none; }
  .seg-prefix{
    background:var(--ink); color:white; border-radius:8px; padding:8px 10px; font-size:13px; font-weight:700;
    flex:none; height:38px; display:flex; align-items:center; box-sizing:border-box;
  }
  @media (max-width:420px){ .seg-box{ width:22px !important; height:34px; font-size:14px; } }
  .field.has-error .field-error{ display:block; }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* Title + First name + Surname on one row (title kept narrow). */
  .name-row{ display:grid; grid-template-columns:84px 1fr 1fr; gap:8px; }
  @media (max-width:520px){ .name-row{ grid-template-columns:70px 1fr 1fr; } }
  /* Client ID search on the left, assigned ID badge on the right. */
  .clientid-row{ display:flex; gap:8px; align-items:center; }
  .clientid-row input{ flex:1 1 auto; min-width:0; }
  .clientid-badge{ flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums;
    background:var(--chip,#eef6f1); color:var(--accent,#0b7a4b); border:1px solid var(--line,#d5e6dc);
    border-radius:8px; padding:7px 10px; min-width:56px; text-align:center; }

  .summary{ margin-top:16px; border-top:2px dashed var(--line); padding-top:12px; }
  .summary-row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
  .summary-row.total{ font-weight:700; font-size:16px; border-top:2px solid var(--ink); margin-top:6px; padding-top:8px; }
  .summary-empty{ font-size:12px; color:var(--muted); padding:14px 0; text-align:center; }

  .btn{
    border:none; border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px;
    cursor:pointer; width:100%; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:6px;
    transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  }
  .btn.primary{ background:linear-gradient(135deg, var(--coral-2), var(--coral)); color:white; box-shadow:0 4px 12px rgba(255,90,95,.28); }
  .btn.primary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,90,95,.36); }
  .btn.primary:active:not(:disabled){ transform:translateY(0); }
  .btn.primary:disabled{ opacity:.4; cursor:not-allowed; }
  .btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
  .btn.ghost:hover{ border-color:var(--muted); background:rgba(34,40,59,.02); }
  .btn.dark{ background:linear-gradient(135deg, var(--ink-2), var(--ink)); color:var(--cream); }
  .btn.dark:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--shadow-md); }
  .btn.dark:disabled{ opacity:.5; cursor:not-allowed; }
  .spinner{
    width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:white;
    animation:spin .7s linear infinite; display:inline-block;
  }
  .btn.ghost .spinner{ border-color:rgba(34,40,59,.25); border-top-color:var(--ink); }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .history{ margin-top:22px; }
  .history h3{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
  .hist-item{
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; margin-bottom:6px;
    cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:var(--cream);
  }
  .hist-item:hover{ border-color:var(--coral); }
  .hist-item .ref{ font-family:'IBM Plex Mono',monospace; font-weight:600; }
  .hist-item .by{ display:block; font-size:10.5px; color:var(--muted); font-weight:400; margin-top:1px; }
  .hist-empty{ font-size:12px; color:var(--muted); }

  .activity{ margin-top:22px; }
  .activity h3{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
  .act-item{ font-size:12px; color:#57503F; padding:5px 0; border-bottom:1px solid var(--line); line-height:1.4; }
  .act-item:last-child{ border-bottom:none; }
  .act-item .who{ font-weight:600; }
  .act-item .when{ color:var(--muted); font-size:10.5px; }
  .act-empty{ font-size:12px; color:var(--muted); }

  /* ---- overlay: printable quote ---- */
  .overlay{
    position:fixed; inset:0; background:rgba(34,40,59,.55); display:none;
    align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto; z-index:50;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  }
  .overlay.show{ display:flex; animation:overlay-fade-in .18s var(--ease); }
  @keyframes overlay-fade-in{ from{ opacity:0; } to{ opacity:1; } }

  /* ---- persistent tab panels: same overlay markup, rendered inline in
     the page instead of as a fixed modal - reuses every existing open()
     function and render() function completely unchanged ---- */
  .main-tab-panel{ display:none !important; }
  .main-tab-panel.show{
    display:block !important; position:static !important; inset:auto !important;
    background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    padding:0 !important; z-index:auto !important; animation:none !important;
  }
  .main-tab-panel .inv-doc, .main-tab-panel .crm-doc, .main-tab-panel .cal-doc{
    max-width:100% !important; width:100% !important; box-shadow:none !important;
    max-height:none !important; border-radius:14px; animation:none !important;
    margin:0 auto; padding:24px 28px 32px;
  }
  .main-tab-panel .close{ display:none !important; }

  .quote-doc{
    background:white; width:100%; max-width:680px; border-radius:14px; padding:36px 40px; position:relative;
    box-shadow:var(--shadow-lg); animation:doc-rise-in .22s var(--ease);
  }
  @keyframes doc-rise-in{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .quote-doc .close, .inv-doc .close{
    position:absolute; top:16px; right:16px; background:var(--cream); border:1px solid var(--line);
    border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:15px;
  }
  .qd-head{ border-bottom:3px solid var(--ink); padding-bottom:14px; margin-bottom:18px; }
  .qd-head-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; }
  .qd-brand{ font-size:20px; font-weight:700; }
  .qd-brand-tag{ font-size:11px; color:var(--muted); }
  .qd-ref{ text-align:right; }
  .qd-ref .num{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15px; background:var(--blush); padding:4px 10px; border-radius:6px; display:inline-block; }
  .qd-ref .date{ font-size:11px; color:var(--muted); margin-top:4px; }
  .qd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; font-size:13px; margin-bottom:18px; }
  .qd-grid .k{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
  .qd-table{ width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px; }
  .qd-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding:6px 4px; }
  .qd-table td{ padding:7px 4px; border-bottom:1px solid var(--line); }
  .qd-table td:last-child, .qd-table th:last-child{ text-align:right; }
  .qd-totals{ margin-left:auto; width:220px; }
  .qd-totals .row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
  .qd-totals .row.total{ font-weight:700; font-size:16px; border-top:2px solid var(--ink); margin-top:6px; padding-top:8px; }
  .qd-note{ font-size:11px; color:var(--muted); margin-top:20px; line-height:1.5; }
  .qd-actions{ display:flex; gap:8px; margin-top:22px; }
  .qd-actions .btn{ margin-top:0; }

  @page{ size:A4; margin:12mm; }

  @media print{
    /* Root fix: only the active overlay should exist in the print layout.
       (Previously other content was only visibility:hidden, which still
       reserves its layout height — that was silently producing several
       blank pages before the real content even started.) */
    body > *:not(.overlay){ display:none !important; }
    .overlay:not(.show){ display:none !important; }
    body > .overlay.show.print-hide-temp{ display:none !important; }
    body > .overlay.show{
      display:block !important; position:static !important; inset:auto !important;
      background:white !important; padding:0 !important; margin:0 !important;
    }
    body{ margin:0; background:white; }

    /* Print real colours — browsers strip backgrounds by default */
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }

    .quote-doc, .inv-doc{ box-shadow:none !important; max-width:100% !important; width:100% !important; margin:0 !important; padding:0 !important; border-radius:0; }

    /* Tighter, print-appropriate density — screen spacing is generous for touch/click targets, print doesn't need that */
    .qd-head{ padding-bottom:8px; margin-bottom:10px; }
    .qd-brand{ font-size:16px; }
    .qd-brand-tag{ font-size:10px; }
    .qd-ref .num{ font-size:13px; padding:3px 8px; }
    .qd-ref .date{ font-size:10px; }
    .qd-grid{ font-size:11px; gap:4px 16px; margin-bottom:10px; }
    .qd-grid .k{ font-size:9px; }
    .qd-table{ font-size:11px; margin-bottom:8px; }
    .qd-table th, .qd-table td{ padding:4px 3px; }
    .qd-totals{ width:200px; }
    .qd-totals .row{ font-size:11px; padding:2px 0; }
    .qd-totals .row.total{ font-size:13px; padding-top:5px; }
    .qd-note{ font-size:9.5px; margin-top:10px; color:#3a3527 !important; }
    .inv-head h2{ font-size:16px; }
    .inv-head .sub{ font-size:10px; }
    .inv-summary{ margin-bottom:10px; }
    .inv-stat{ padding:8px 10px; }
    .inv-stat .n{ font-size:15px; }
    .bk-sheet-table{ font-size:10.5px; }
    .bk-sheet-table th, .bk-sheet-table td{ padding:5px 4px; }
    .bk-sheet-controls, .crm-toolbar, .inv-toolbar{ display:none !important; }
    .ag-clauses{ max-height:none; font-size:9.5px; }

    /* Never split a row/card across a page boundary */
    .qd-table tr, .bk-sheet-table tr, .bk-sheet-day-header, .inv-row, .cal-booking-card{ page-break-inside:avoid; }

    .qd-actions, .close, .sig-actions, .ag-form-only, .inv-row-actions, .crm-history-item::after{ display:none !important; }
  }

  /* ---- hire agreement ---- */
  .agreement-doc{ max-width:720px; }

  /* ---- inventory ---- */
  .inv-doc{ background:white; width:100%; max-width:980px; border-radius:14px; padding:32px 36px 40px; position:relative; max-height:calc(100vh - 60px); overflow-y:auto; box-shadow:var(--shadow-lg); animation:doc-rise-in .22s var(--ease); }
  .inv-head h2{ font-size:20px; margin:0 0 4px; }
  .inv-head .sub{ font-size:13px; color:var(--muted); margin:0 0 18px; }
  .inv-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
  @media (max-width:760px){ .inv-summary{ grid-template-columns:1fr 1fr; } }
  .inv-stat{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .inv-stat .n{ font-size:20px; font-weight:700; font-family:'Fredoka',sans-serif; }
  .inv-stat .n.warn{ color:var(--bad); }
  .inv-stat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
  .inv-toolbar{ display:flex; gap:10px; margin-bottom:16px; align-items:center; }
  .inv-toolbar .search-input{ flex:1; }
  .inv-row{
    display:flex; align-items:center; gap:14px; background:var(--cream); border:1px solid var(--line);
    border-radius:12px; padding:12px 14px; margin-bottom:8px; flex-wrap:wrap;
  }
  .inv-thumb{
    width:44px; height:44px; border-radius:9px; object-fit:cover; flex:none; background:white; border:1px solid var(--line);
  }
  .inv-thumb-placeholder{
    width:44px; height:44px; border-radius:9px; flex:none; background:white; border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--muted);
  }
  .item-thumb{
    width:40px; height:40px; border-radius:8px; object-fit:cover; flex:none; background:var(--cream); border:1px solid var(--line);
  }
  .item-thumb-placeholder{
    width:40px; height:40px; border-radius:8px; flex:none; background:var(--cream); border:1px dashed var(--line);
    display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--muted);
  }
  .inv-row-info{ flex:1; min-width:180px; }
  .inv-row-name{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .inv-row-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
  .inv-badge{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:2px 8px; }
  .inv-badge.good{ background:rgba(42,169,160,.14); color:var(--good); }
  .inv-badge.fair{ background:rgba(244,183,64,.18); color:#8a6a10; }
  .inv-badge.repair{ background:rgba(255,90,95,.14); color:var(--coral); }
  .inv-badge.retired{ background:rgba(34,40,59,.1); color:var(--muted); }
  .inv-avail{ text-align:center; min-width:78px; }
  .inv-avail .num{ font-size:18px; font-weight:700; font-family:'Fredoka',sans-serif; }
  .inv-avail .num.zero{ color:var(--bad); }
  .inv-avail .num.low{ color:#8a6a10; }
  .inv-avail .lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
  .inv-adjust{ display:flex; align-items:center; gap:4px; }
  .inv-adjust button{
    width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:white; cursor:pointer; font-size:13px; font-weight:700; color:var(--ink);
  }
  .inv-adjust button:hover{ background:var(--blush); }
  .inv-row-actions{ display:flex; gap:6px; }
  .inv-row-actions button{
    width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:white; cursor:pointer; font-size:13px;
  }
  .inv-row-actions button:hover{ border-color:var(--coral); }
  .inv-empty{ font-size:13px; color:var(--muted); text-align:center; padding:30px 0; }
  .catalog-stock-badge{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em; }
  .catalog-stock-badge.zero{ background:rgba(255,90,95,.14); color:var(--coral); }
  .catalog-stock-badge.low{ background:rgba(244,183,64,.18); color:#8a6a10; }
  .all-quotes-list{ max-height:60vh; overflow-y:auto; padding-right:4px; }
  .bk-sheet-controls{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .bk-sheet-controls .field{ margin-bottom:0; min-width:140px; }
  .bk-sheet-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .bk-sheet-table th{ text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--ink); padding:8px 6px; }
  .bk-sheet-table td{ padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
  .bk-sheet-table .client-name{ font-weight:700; }
  .bk-sheet-table .client-meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .bk-sheet-table .goods-list{ line-height:1.5; }
  .bk-sheet-day-header td{ background:var(--blush); font-weight:700; font-family:'Fredoka',sans-serif; padding:8px 6px; border-bottom:2px solid var(--coral); }
  .bk-sheet-paid{ font-weight:700; }
  .bk-sheet-paid.full{ color:var(--good); }
  .bk-sheet-paid.partial{ color:#8a6a10; }
  .bk-sheet-paid.none{ color:var(--bad); }

  /* ---- calendar ---- */
  .cal-doc{ max-width:1100px; }
  .cal-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
  .cal-nav{ display:flex; align-items:center; gap:10px; }
  .cal-nav .icon-btn{ background:var(--cream); color:var(--ink); border-color:var(--line); padding:7px 12px; }
  .cal-nav .icon-btn:hover{ background:var(--blush); }
  .cal-month-label{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:16px; min-width:150px; text-align:center; }

  .cal-view-toggle{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .cal-view-btn{ background:white; border:none; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; border-right:1px solid var(--line); }
  .cal-view-btn:last-child{ border-right:none; }
  .cal-view-btn.active{ background:var(--coral); color:white; }
  .cal-view-btn:hover:not(.active){ background:var(--cream); }

  .cal-layout{ display:flex; gap:20px; align-items:flex-start; }
  .cal-sidebar{ flex:none; width:200px; }
  .cal-main{ flex:1; min-width:0; }

  .cal-mini{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px; }
  .cal-mini-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .cal-mini-dow{ font-size:9px; text-align:center; color:var(--muted); font-weight:700; padding-bottom:3px; }
  .cal-mini-day{
    font-size:11px; text-align:center; padding:5px 0; border-radius:6px; cursor:pointer; color:var(--ink);
  }
  .cal-mini-day:hover{ background:white; }
  .cal-mini-day.other-month{ opacity:.3; }
  .cal-mini-day.is-today{ font-weight:700; color:var(--coral); }
  .cal-mini-day.selected{ background:var(--coral); color:white; font-weight:700; }
  .cal-mini-day.has-bookings::after{ content:""; display:block; width:4px; height:4px; border-radius:50%; background:var(--teal); margin:2px auto 0; }
  .cal-mini-day.selected.has-bookings::after{ background:white; }

  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:18px; }
  .cal-dow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); text-align:center; padding-bottom:4px; font-weight:700; }
  .cal-day{
    background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:6px; min-height:74px;
    cursor:pointer; display:flex; flex-direction:column; gap:3px;
  }
  .cal-day:hover{ border-color:var(--coral); }
  .cal-day.other-month{ opacity:.35; }
  .cal-day.is-today{ border-color:var(--coral); border-width:2px; }
  .cal-day.selected{ background:var(--blush); }
  .cal-day-num{ font-size:12px; font-weight:700; }
  .cal-chip{
    font-size:10px; padding:2px 5px; border-radius:5px; background:white; border-left:3px solid var(--teal);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cal-chip.tentative{ border-left-color:var(--gold); }
  .cal-chip.confirmed{ border-left-color:var(--teal); }
  .cal-chip.cancelled{ border-left-color:var(--muted); opacity:.6; text-decoration:line-through; }
  .cal-chip-more{ font-size:10px; color:var(--muted); padding-left:5px; }

  .cal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:18px; }
  .cal-week-col{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:280px; }
  .cal-week-col.is-today{ border-color:var(--coral); border-width:2px; }
  .cal-week-col-head{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  .cal-week-col-head .num{ font-size:16px; color:var(--ink); display:block; font-family:'Fredoka',sans-serif; }
  .cal-week-card{
    background:white; border-radius:8px; padding:6px 8px; margin-bottom:6px; border-left:3px solid var(--teal);
    font-size:11px; cursor:pointer; box-shadow:var(--shadow-sm);
  }
  .cal-week-card.tentative{ border-left-color:var(--gold); }
  .cal-week-card.confirmed{ border-left-color:var(--teal); }
  .cal-week-card.cancelled{ border-left-color:var(--muted); opacity:.6; }
  .cal-week-card .time{ font-weight:700; color:var(--muted); font-size:10px; }
  .cal-week-card .name{ font-weight:600; margin-top:1px; }

  .cal-day-view{ display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:18px; }
  .cal-day-view-hours{ flex:none; width:56px; background:var(--cream); border-right:1px solid var(--line); }
  .cal-day-view-hour-label{ font-size:10px; color:var(--muted); text-align:right; padding:0 8px; height:48px; box-sizing:border-box; border-bottom:1px dashed var(--line); padding-top:2px; }
  .cal-day-view-body{ flex:1; position:relative; }
  .cal-day-view-slot{ height:48px; border-bottom:1px dashed var(--line); }
  .cal-day-view-event{
    position:absolute; left:8px; right:8px; background:white; border-left:4px solid var(--teal); border-radius:8px;
    padding:6px 10px; box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden;
  }
  .cal-day-view-event.tentative{ border-left-color:var(--gold); }
  .cal-day-view-event.confirmed{ border-left-color:var(--teal); }
  .cal-day-view-event.cancelled{ border-left-color:var(--muted); opacity:.6; }
  .cal-day-view-event .time{ font-size:10px; font-weight:700; color:var(--muted); }
  .cal-day-view-event .name{ font-weight:600; font-size:12.5px; }
  .cal-day-view-empty{ text-align:center; color:var(--muted); padding:30px 0; font-size:13px; }

  @media (max-width:760px){
    .cal-layout{ flex-direction:column; }
    .cal-sidebar{ width:100%; }
    .cal-week{ grid-template-columns:1fr; }
  }

  .cal-day-detail{ border-top:2px dashed var(--line); padding-top:16px; }
  .cal-day-detail h3{ font-size:14px; margin:0 0 10px; }
  .cal-booking-card{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
  .cal-booking-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .cal-booking-name{ font-weight:600; font-size:14px; }
  .cal-booking-meta{ font-size:12px; color:var(--muted); margin-top:2px; }
  .cal-status-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:2px 9px; flex:none; }
  .cal-status-badge.tentative{ background:rgba(244,183,64,.18); color:#8a6a10; }
  .cal-status-badge.confirmed{ background:rgba(42,169,160,.14); color:var(--good); }
  .cal-status-badge.cancelled{ background:rgba(34,40,59,.1); color:var(--muted); }
  .cal-booking-items{ font-size:12px; color:#57503F; margin-top:8px; line-height:1.5; }
  .cal-booking-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .cal-booking-actions button{
    font-size:12px; border:1px solid var(--line); background:white; border-radius:7px; padding:5px 10px; cursor:pointer;
  }
  .cal-booking-actions button:hover{ border-color:var(--coral); }
  .cal-empty{ font-size:13px; color:var(--muted); }

  .bk-item-picker{ display:flex; gap:6px; margin-bottom:6px; }
  .bk-item-picker input{ flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--cream); font-family:'Work Sans',sans-serif; }
  .bk-item-row{ display:flex; align-items:center; justify-content:space-between; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin-bottom:5px; font-size:12.5px; }
  .bk-item-row .qty-controls{ display:flex; align-items:center; gap:6px; }
  .bk-item-row .qty-controls button{ width:20px; height:20px; border-radius:5px; border:1px solid var(--line); background:white; cursor:pointer; font-size:12px; }
  .bk-item-row .remove-btn{ background:none; border:none; color:var(--bad); cursor:pointer; font-size:13px; margin-left:8px; }

  /* ---- CRM / contacts ---- */
  .crm-doc{ max-width:1000px; }
  .crm-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .crm-toolbar .search-input{ flex:1; min-width:180px; }
  .crm-toolbar select{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; background:var(--cream); font-family:'Work Sans',sans-serif; }
  .crm-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:760px){ .crm-list{ grid-template-columns:1fr; } }
  .crm-card{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; }
  .crm-card:hover{ border-color:var(--coral); }
  .crm-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .crm-card-name{ font-weight:700; font-size:14px; }
  .crm-card-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .crm-type-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:2px 8px; flex:none; }
  .crm-type-badge.individual{ background:rgba(42,169,160,.14); color:var(--good); }
  .crm-type-badge.company{ background:rgba(84,110,222,.14); color:#4a5fd6; }
  .crm-stage-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; padding:2px 8px; }
  .crm-stage-badge.enquiry{ background:rgba(244,183,64,.18); color:#8a6a10; }
  .crm-stage-badge.quoted{ background:rgba(84,110,222,.14); color:#4a5fd6; }
  .crm-stage-badge.booked{ background:rgba(42,169,160,.14); color:var(--good); }
  .crm-stage-badge.completed{ background:rgba(34,40,59,.1); color:var(--muted); }
  .crm-stage-badge.lost{ background:rgba(255,90,95,.14); color:var(--coral); }
  .crm-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
  .crm-tag{ font-size:10px; background:var(--blush); color:var(--coral); border-radius:999px; padding:2px 8px; }

  .crm-detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:16px; }
  .crm-detail-name{ font-size:20px; font-weight:700; font-family:'Fredoka',sans-serif; }
  .crm-detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
  @media (max-width:760px){ .crm-detail-grid{ grid-template-columns:1fr 1fr; } }
  .crm-stat{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
  .crm-stat .n{ font-size:17px; font-weight:700; font-family:'Fredoka',sans-serif; }
  .crm-stat .l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
  .crm-section-title{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin:20px 0 8px; }
  .crm-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; font-size:13px; }
  .crm-info-grid .k{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
  .crm-history-item{
    display:flex; justify-content:space-between; align-items:center; background:var(--cream); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:12.5px; cursor:pointer;
  }
  .crm-history-item:hover{ border-color:var(--coral); }
  .crm-history-tag{ font-size:9.5px; font-weight:700; text-transform:uppercase; background:white; border:1px solid var(--line); border-radius:999px; padding:2px 6px; margin-right:6px; }
  .crm-comm-item{ border-left:3px solid var(--teal); padding:6px 0 6px 12px; margin-bottom:8px; font-size:12.5px; }
  .crm-comm-type{ font-weight:700; text-transform:uppercase; font-size:10px; color:var(--teal); }
  .crm-comm-meta{ font-size:10.5px; color:var(--muted); margin-top:1px; }
  .crm-comm-add{ display:flex; gap:8px; margin-top:10px; }
  .crm-comm-add select{ border:1px solid var(--line); border-radius:8px; padding:8px; font-size:12.5px; background:var(--cream); font-family:'Work Sans',sans-serif; flex:none; }
  .crm-comm-add input{ flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; background:var(--cream); font-family:'Work Sans',sans-serif; }
  .crm-empty{ font-size:12.5px; color:var(--muted); }

  /* ---- dashboard ---- */
  .dash-range-row{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .dash-range-row select{ border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--cream); font-family:'Work Sans',sans-serif; }
  .dash-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
  .dash-stat{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .dash-stat .n{ font-size:20px; font-weight:700; font-family:'Fredoka',sans-serif; }
  .dash-stat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
  .dash-stat .trend{ font-size:11px; margin-top:4px; font-weight:600; }
  .dash-stat .trend.up{ color:var(--good); }
  .dash-kpi-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
  .dash-kpi{ border-radius:12px; padding:14px 12px; color:white; text-align:center; box-shadow:var(--shadow-sm); }
  .dash-kpi .n{ font-size:26px; font-weight:700; font-family:'Fredoka',sans-serif; line-height:1.1; }
  .dash-kpi .l{ font-size:11px; font-weight:600; margin-top:4px; opacity:.92; }
  .dash-stat .trend.down{ color:var(--bad); }
  .dash-charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
  @media (max-width:760px){ .dash-charts{ grid-template-columns:1fr; } }
  .dash-chart-card{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
  .dash-chart-title{ font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:10px; }
  .dash-bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; }
  .dash-bar-label{ width:70px; flex:none; text-align:right; color:var(--muted); }
  .dash-bar-track{ flex:1; background:white; border-radius:4px; height:16px; position:relative; overflow:hidden; }
  .dash-bar-fill{ height:100%; background:var(--coral); border-radius:4px; }
  .dash-bar-value{ width:70px; flex:none; font-weight:600; }
  .dash-empty{ font-size:12px; color:var(--muted); padding:10px 0; }
  #dashAiSummaryOutput{ margin-top:12px; font-size:13.5px; line-height:1.6; white-space:pre-wrap; }
  #dashAiSummaryOutput:empty{ display:none; }
  .dash-qa-input-row{ display:flex; gap:8px; margin-top:10px; }
  .dash-qa-input-row input{ flex:1; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; background:white; font-family:'Work Sans',sans-serif; }
  .dash-qa-item{ margin-bottom:12px; }
  .dash-qa-q{ font-weight:600; font-size:13px; margin-bottom:4px; }
  .dash-qa-a{ font-size:13px; line-height:1.55; color:#3a3527; white-space:pre-wrap; background:var(--cream); border-radius:8px; padding:10px 12px; }
  .dash-qa-a.loading{ color:var(--muted); font-style:italic; }
  .wa-preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .wa-item-row{ display:flex; justify-content:space-between; align-items:center; background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:13px; }
  .wa-item-row.matched{ border-left:3px solid var(--good); }
  .wa-item-row.unmatched{ border-left:3px solid var(--bad); }
  .wa-item-row select{ font-size:12px; border:1px solid var(--line); border-radius:6px; padding:4px 6px; background:white; font-family:'Work Sans',sans-serif; }
  .wa-inbox-item{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
  .wa-inbox-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .wa-inbox-from{ font-weight:600; font-size:13px; }
  .wa-inbox-when{ font-size:11px; color:var(--muted); }
  .wa-inbox-text{ font-size:12.5px; color:#3a3527; margin:6px 0; white-space:pre-wrap; max-height:80px; overflow-y:auto; }
  .wa-inbox-actions{ display:flex; gap:6px; }
  .wa-inbox-actions button{ font-size:11.5px; border:1px solid var(--line); background:white; border-radius:6px; padding:4px 8px; cursor:pointer; }
  .wa-inbox-actions button:hover{ border-color:var(--coral); }
  .ag-clauses{ font-size:12px; line-height:1.6; color:#3A3527; max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:16px; background:var(--cream); }
  .ag-clauses h4{ font-size:12.5px; margin:12px 0 4px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
  .ag-clauses h4:first-child{ margin-top:0; }
  .ag-clauses p{ margin:0 0 6px; }
  .ag-clauses .warn{ color:var(--bad); font-weight:600; }
  .ag-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:14px; }
  .ag-grid .field{ margin-bottom:0; }
  .ag-check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:#3A3527; margin-bottom:14px; line-height:1.4; }
  .ag-check input{ margin-top:2px; flex:none; }
  .sig-label{ font-size:12px; font-weight:600; color:#57503F; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
  .sig-pad-wrap{ border:1.5px dashed var(--line); border-radius:10px; background:white; margin-bottom:6px; touch-action:none; }
  .sig-pad-wrap canvas{ display:block; width:100%; height:150px; cursor:crosshair; }
  .sig-actions{ display:flex; justify-content:flex-end; margin-bottom:14px; }
  .sig-clear{ background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline; padding:2px; }
  .ag-signed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; font-size:13px; margin-bottom:16px; }
  .ag-signed-grid .k{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
  .ag-sig-img{ max-width:220px; max-height:90px; border-bottom:1px solid var(--ink); display:block; margin-top:4px; }
  .ag-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--good); background:rgba(42,169,160,.12); border-radius:999px; padding:4px 10px; margin-bottom:4px; }
  .ad-item{
    border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; margin-bottom:6px;
    cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:var(--cream);
  }
  .ad-item:hover{ border-color:var(--teal); }
  .ad-item .ref{ font-family:'IBM Plex Mono',monospace; font-weight:600; }
  .ad-item .by{ display:block; font-size:10.5px; color:var(--muted); font-weight:400; margin-top:1px; }

  .settings-panel{
    position:fixed; top:0; right:0; height:100vh; width:320px; background:white; border-left:1px solid var(--line);
    padding:20px; transform:translateX(100%); transition:transform .2s ease; z-index:60; overflow-y:auto;
  }
  .settings-panel.show{ transform:translateX(0); }
  .settings-panel.main-tab-panel{ display:none; }
  .settings-panel.main-tab-panel.show{
    display:block; position:static; height:auto; width:100%; border-left:none;
    transform:none; padding:24px 28px 32px; border-radius:14px;
  }
  .settings-panel h2{ font-size:15px; margin:0 0 4px; }
  .settings-panel p.hint{ font-size:12px; color:var(--muted); margin-bottom:14px; }

  .paste-zone{
    border:1.5px dashed var(--line); border-radius:10px; padding:14px; text-align:center;
    cursor:pointer; background:var(--cream); min-height:70px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
  }
  .paste-zone:focus, .paste-zone.dragover{ border-color:var(--coral); }
  .paste-zone img{ max-width:100%; max-height:70px; border-radius:6px; }
  .paste-zone span{ font-size:11px; color:var(--muted); line-height:1.4; }

  .qd-logo{ max-width:10cm; max-height:4cm; width:auto; height:auto; object-fit:contain; object-position:left top; margin-bottom:10px; display:block; }
  @media screen and (max-width:600px){
    /* Screen preview only — a real 10cm logo is wider than most phone
       screens. This just keeps the on-screen preview from overflowing;
       the actual print and PDF output still use the full 10cm x 4cm,
       since this rule is screen-only and jsPDF doesn't read CSS at all. */
    .qd-logo{ max-width:70vw; }
  }

  /* ---- toasts ---- */
  .toast-container{ position:fixed; bottom:20px; right:20px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:320px; }
  .toast{
    background:var(--ink); color:var(--cream); border-radius:10px; padding:12px 14px; font-size:13px;
    box-shadow:0 8px 24px rgba(0,0,0,.2); display:flex; align-items:flex-start; gap:8px; animation:toast-in .2s ease;
  }
  .toast.error{ background:var(--bad); }
  .toast.success{ background:var(--good); }
  @keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

  /* ---- modal backdrop (confirm / staff name) ---- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(34,40,59,.55); display:none; align-items:center; justify-content:center; z-index:80; padding:16px;
  }
  .modal-backdrop.show{ display:flex; }
  .modal-card{ background:white; border-radius:14px; padding:24px; max-width:360px; width:100%; }
  .modal-card h3{ margin:0 0 8px; font-size:16px; }
  .modal-card p{ font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.5; }
  .modal-actions{ display:flex; gap:8px; }
  .modal-actions .btn{ margin-top:0; }

  /* ---- initial load screen ---- */
  .load-screen{
    position:fixed; inset:0; background:var(--cream); z-index:200; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
  }
  .load-screen .spinner{ width:26px; height:26px; border-width:3px; border-color:rgba(34,40,59,.15); border-top-color:var(--coral); }
  .load-screen span{ font-size:13px; color:var(--muted); }
  .load-screen.hide{ display:none; }

  /* ---- auth gate ---- */
  .auth-gate{
    position:fixed; inset:0; background:var(--ink); z-index:300; display:none;
    align-items:center; justify-content:center; padding:20px;
  }
  .auth-gate.show{ display:flex; }
  .auth-card{ background:white; border-radius:16px; padding:32px; max-width:400px; width:100%; }
  .auth-card h2{ font-size:19px; margin:0 0 6px; display:flex; align-items:center; gap:8px; }
  .auth-card p.sub{ font-size:13px; color:var(--muted); margin:0 0 20px; line-height:1.5; }
  .auth-account-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .auth-account-btn{
    display:flex; align-items:center; gap:10px; text-align:left; border:1px solid var(--line); border-radius:10px;
    padding:10px 12px; background:var(--cream); cursor:pointer; font-size:14px; font-weight:600; color:var(--ink);
  }
  .auth-account-btn:hover{ border-color:var(--coral); }
  .auth-account-btn .avatar{
    width:30px; height:30px; border-radius:50%; background:var(--coral); color:white; display:flex;
    align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:none;
  }
  .auth-link{ background:none; border:none; color:var(--teal); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:4px 0; }
  .auth-back{ font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer; margin-bottom:14px; padding:0; text-decoration:underline; }
  .auth-error{ font-size:12.5px; color:var(--bad); margin:8px 0 0; display:none; }
  .auth-error.show{ display:block; }
  .auth-lockout{ font-size:12.5px; color:var(--bad); margin-top:8px; }

/* ── Finance module sub-tab bar (v2.0) ─────────────────────────────── */
.fin-tab-bar{
  display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  margin-top:4px;
}
.fin-tab-btn{
  background:none; border:none; border-bottom:3px solid transparent; color:var(--muted);
  font-weight:600; font-size:12.5px; padding:9px 12px; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.fin-tab-btn:hover{ color:var(--ink); background:rgba(232,52,43,.04); }
.fin-tab-btn.active{ color:var(--coral); border-bottom-color:var(--coral); }

/* ── Web 4.0 floating assistant (v2.6) ─────────────────────────────── */
#assistantFab{
  position:fixed; right:20px; bottom:20px; z-index:60; width:56px; height:56px; border-radius:50%;
  border:none; cursor:pointer; background:linear-gradient(155deg, var(--coral), #ff8a5c); color:#fff;
  font-size:24px; box-shadow:var(--shadow-lg); display:none; align-items:center; justify-content:center;
  transition:transform .15s var(--ease);
}
#assistantFab:hover{ transform:translateY(-2px); }
#assistantPanel{
  position:fixed; right:20px; bottom:86px; z-index:60; width:360px; max-width:calc(100vw - 40px);
  max-height:min(600px, calc(100vh - 120px)); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); display:none; flex-direction:column; overflow:hidden;
}
#assistantPanel.show{ display:flex; animation:overlay-fade-in .15s var(--ease); }
.assistant-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--blush); }
.assistant-head button{ border:none; background:none; cursor:pointer; font-size:16px; }
.assistant-insights{ padding:12px 14px; border-bottom:1px solid var(--line); max-height:210px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.assistant-insight{ text-align:left; border:1px solid var(--line); background:var(--cream); border-radius:10px; padding:8px 10px; font-size:12.5px; cursor:pointer; font-family:inherit; line-height:1.4; }
.assistant-insight:hover{ background:var(--blush); }
.assistant-log{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-height:50px; }
.assistant-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.assistant-input-row input{ flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-family:inherit; font-size:13px; }
@media (max-width:760px){ #assistantPanel{ right:10px; left:10px; width:auto; bottom:80px; } #assistantFab{ right:14px; bottom:14px; } }

/* ── XupaFin platform badge (v3.8) ──────────────────────────────────────────
   Sits under the company name. The point is a quiet dual-brand: the customer's
   business is the headline, XupaFin is the platform it runs on — the way a
   product says "powered by" without shouting. */
.xf-platform{
  display:flex; align-items:center; gap:6px; margin-top:3px;
}
.xf-sk-mark{
  width:13px; height:13px; flex:none; opacity:.8;
  fill:currentColor; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; color:var(--muted);
}
.xf-sk-mark path{ fill:none; }
.xf-badge{
  font-size:10.5px; letter-spacing:.01em; color:var(--muted);
  background:rgba(0,0,0,.05); border-radius:4px; padding:1px 6px; white-space:nowrap;
}
.xf-badge strong{ font-weight:700; }
.xf-ver{ font-size:9.5px; color:var(--muted); opacity:.65; }

  /* ===================== Fluent left navigation rail ===================== */
  .app-sidebar{ position:fixed; top:0; left:0; bottom:0; width:236px; z-index:300;
    background:var(--card,#fff); border-right:1px solid var(--line,#e7e1d6);
    overflow-y:auto; display:flex; flex-direction:column; padding:0 0 18px; }
  .sb-brand{ font-weight:800; font-size:16px; padding:16px 14px 10px; position:sticky; top:0;
    background:var(--card,#fff); border-bottom:1px solid var(--line,#eee); z-index:1; }
  .sb-group{ padding:2px 8px; }
  .sb-group-label{ font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted); font-weight:700; padding:12px 8px 4px; }
  .sb-item{ display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .12s var(--ease); }
  .sb-item:hover{ background:rgba(232,52,43,.07); }
  .sb-item.active{ background:var(--coral); color:#fff; font-weight:600; }
  .sb-toggle{ display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--cream); margin-right:4px; }

  /* Only take space once the app is ready (signed in) — the login screen stays
     full-width with no empty rail. Horizontal nav rows are hidden. */
  .app-sidebar{ display:none; }
  body.app-ready .app-sidebar{ display:flex; }
  body.app-ready{ padding-left:236px; }
  #navGroupRow, #navFuncRow{ display:none !important; }
  body.app-ready .overlay{ left:236px; }
  .app-sidebar-scrim{ display:none; }

  @media (max-width:860px){
    body.app-ready{ padding-left:0; }
    body.app-ready .app-sidebar{ transform:translateX(-100%); transition:transform .2s var(--ease); box-shadow:2px 0 18px rgba(0,0,0,.22); }
    body.app-ready.sidebar-open .app-sidebar{ transform:translateX(0); }
    .sb-toggle{ display:inline-block; }
    body.app-ready .overlay{ left:0; }
    body.app-ready.sidebar-open .app-sidebar-scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:250; }
  }


  /* Compact action buttons + chips inside smart-tables */
  .st-a{ border:1px solid var(--line,#ccd); background:#fff; color:var(--ink,#333); border-radius:6px; padding:2px 8px; cursor:pointer; font-size:11.5px; margin:1px; }
  .st-a:hover{ background:var(--cream,#f4f4f4); }
  .st-a.st-x{ color:#b23; border-color:#e6b3b0; }
  .st-chip{ border:1px solid #ccd; background:#fff; color:#999; border-radius:5px; padding:1px 6px; cursor:pointer; font-size:12px; }
  .st-chip.paid{ background:#0b7a4b; color:#fff; border-color:#0b7a4b; }

  /* Country-code dropdown must stay compact (override .field select width:100%) */
  .phone-cc{ width:auto !important; min-width:74px; }

/* ── Good/bad client box + WhatsApp photo/dial row (ported from Party Characters) ── */
.client-quality{ font-weight:800; font-size:13px; letter-spacing:.03em; text-align:center; border-radius:10px;
  padding:9px 12px; border:1px solid var(--line,#c8ccd4); }
.client-quality.none{ background:var(--cream,#f4f1ea); color:var(--muted,#6b7a7b); }
.client-quality.good{ background:#eaf6f1; color:#0F6E56; border-color:#0F6E56; }
.client-quality.bad{ background:#fdecea; color:#C0261F; border-color:#C0261F; }
.client-reason{ font-size:12.5px; color:var(--muted,#6b7a7b); background:var(--cream,#f4f1ea);
  border:1px solid var(--line,#c8ccd4); border-radius:8px; padding:7px 10px; margin-top:6px; }
.client-quality-row{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.client-quality-row #clientQualityBox{ flex:1 1 auto; margin:0; }
.client-wa-thumb{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--line,#c8ccd4); background:var(--cream,#f4f1ea); }
.client-wa-dial{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#25D366; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.client-wa-dial:hover{ background:#1da851; }

/* ── WhatsApp enquiry → quote system (ported from Party Characters) ─────────── */
.qb-inbox-sheet{ margin:18px 0 8px; }
.qb-inbox-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.qb-inbox-title{ font-weight:800; font-size:15px; }
.qb-inbox-count{ font-size:12px; color:var(--muted); background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
.qb-inbox-hint{ font-size:12.5px; color:var(--muted); margin:2px 0 10px; }
.qb-inbox-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.qb-inbox-table{ width:100%; border-collapse:collapse; font-size:13px; background:#fff; }
.qb-inbox-msg{ max-width:420px; color:#333; }
.qb-inbox-who{ display:flex; align-items:center; gap:6px; }
.qb-inbox-num{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.qb-inbox-block{ background:none; border:none; color:var(--bad,#C0261F); font-size:11.5px; cursor:pointer; padding:4px 2px; }
.qb-inbox-block:hover{ text-decoration:underline; }
.wa-st{ display:inline-block; font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.wa-st-new{ background:#eaf6f1; color:#0F6E56; border:1px solid #0F6E56; }
.wa-st-building{ background:#fff5e6; color:#B25B00; border:1px solid #e0a15a; }
.wa-st-quoted{ background:#eef2ff; color:#3949ab; border:1px solid #7986cb; }
.wa-convo-list{ display:flex; flex-direction:column; gap:10px; }
.wa-convo{ border:1px solid var(--line,#c8ccd4); border-radius:12px; background:#fff; overflow:hidden; }
.wa-convo-row{ display:flex; align-items:center; gap:8px; padding:8px 12px; flex-wrap:nowrap; overflow:hidden; }
.wa-convo-clickable{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; cursor:pointer; }
.wa-convo-clickable .wa-st{ flex:0 0 auto; }
.wa-convo-avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--line,#c8ccd4); background:var(--cream,#f4f1ea); }
.wa-convo-avatar-ph{ display:flex; align-items:center; justify-content:center; font-weight:700; color:#0F6E56; font-size:16px; }
.wa-convo-main{ flex:1 1 auto; min-width:0; }
.wa-convo-name{ display:flex; align-items:center; gap:6px; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-convo-name .qb-inbox-num{ font-size:11.5px; color:var(--muted); margin:0; }
.wa-convo-latest{ font-size:12px; color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-convo-count{ flex:0 0 auto; font-size:11px; color:var(--muted); }
.wa-convo-chevron{ flex:0 0 auto; color:var(--muted); font-size:12px; }
.wa-convo-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:nowrap; }
.wa-btn-sm{ width:auto !important; margin:0 !important; padding:6px 10px !important; font-size:12px !important; white-space:nowrap; }
.wa-icon-btn{ border:1px solid var(--line,#c8ccd4); background:#fff; border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.wa-icon-btn:hover{ background:var(--cream,#f7f4ee); }
.wa-icon-danger{ color:var(--bad,#C0261F); }
.wa-convo-dial{ width:34px; height:34px; }
.wa-convo-dial svg{ width:16px; height:16px; }
.wa-convo-body{ border-top:1px solid var(--line,#c8ccd4); background:var(--cream,#f7f4ee); padding:8px 12px; }
.wa-msg{ font-size:12.5px; padding:5px 0; border-bottom:1px dashed rgba(0,0,0,.08); }
.wa-msg:last-child{ border-bottom:none; }
.wa-msg-time{ color:var(--muted); font-size:11px; margin-right:6px; }
.wa-msg-ref{ color:#3949ab; font-weight:700; font-size:11px; }
.editing-quote-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#eef2ff; border:1px solid #7986cb; color:#283593; border-radius:10px; padding:8px 12px; margin:0 0 10px; font-size:13px; font-weight:600; }
.wa-choice-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:9999; }
.wa-choice-box{ background:#fff; border-radius:14px; padding:22px; max-width:420px; width:92%; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.wa-choice-title{ font-weight:800; font-size:16px; margin-bottom:6px; }
.wa-choice-sub{ color:var(--muted); font-size:13px; margin-bottom:16px; }
.wa-choice-actions{ display:flex; flex-direction:column; gap:8px; }

/* ── Archive-only governance controls ─────────────────────────────────── */
.arch-toolbar{ display:flex; gap:8px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
.arch-toolbar .arch-tab{ padding:5px 14px; font-size:12px; font-weight:600; border-radius:999px; }
.arch-toolbar .arch-tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.st-arch-btn{ padding:3px 10px !important; font-size:11px !important; white-space:nowrap; }
.st-arch-btn[data-arch]{ color:var(--muted); }
.st-arch-btn[data-arch-restore]{ color:var(--teal); border-color:var(--teal); }


  /* Searchable dropdown (combobox): type to filter, or ▾ to browse all — ported from PC */
  .combo{ position:relative; flex:1; min-width:0; }
  .combo > input{ width:100%; padding-right:26px; box-sizing:border-box; }
  .combo-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--muted); font-size:12px; padding:4px 6px; line-height:1; }
  .combo-toggle:hover{ color:var(--accent, #B39B6E); }
  .combo-list{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + 3px);
    max-height:260px; overflow-y:auto; background:var(--card,#fff); border:1px solid var(--line);
    border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.14); display:none; }
  .combo-list.show{ display:block; }
  .combo-opt{ padding:8px 11px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .combo-opt:hover{ background:rgba(0,0,0,.05); }
  .combo-opt small{ color:var(--muted); margin-left:6px; }
  .combo-empty{ padding:9px 11px; font-size:12px; color:var(--muted); }

  /* Quote/Proposal builder: collapsible sections (ported from PC) */
  .qb-sec{ border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--card,#fff); }
  .qb-sec > summary{
    list-style:none; cursor:pointer; padding:9px 12px; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; color:var(--muted); display:flex; align-items:center; gap:8px;
  }
  .qb-sec > summary::-webkit-details-marker{ display:none; }
  .qb-sec > summary::before{ content:"▸"; font-size:11px; transition:transform .15s ease; color:var(--accent, #B39B6E); }
  .qb-sec[open] > summary::before{ transform:rotate(90deg); }
  .qb-sec[open] > summary{ border-bottom:1px solid var(--line); }
  .qb-sec .qb-sec-body{ padding:10px 12px 12px; }
  .qb-sec .qb-sec-body .field:last-child{ margin-bottom:0; }
  .qb-sec.has-error{ border-color:var(--accent, #B39B6E); }

  /* Operational workflow strip (ported from PC, tour-operator steps) */
  .workflow-bar{ display:flex; align-items:center; gap:2px; flex-wrap:nowrap; padding:8px 16px; background:var(--card,#fff);
    border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .wf-step{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; border-radius:20px;
    padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--ink,#22283b); cursor:pointer; white-space:nowrap; transition:all .12s ease; }
  .wf-step:hover{ border-color:var(--accent,#B39B6E); color:var(--accent,#B39B6E); }
  .wf-step.active{ background:var(--accent,#B39B6E); color:#fff; border-color:var(--accent,#B39B6E); }
  .wf-ico{ font-size:14px; line-height:1; }
  .wf-arrow{ color:var(--muted,#8A8272); font-weight:700; padding:0 2px; flex:none; }
  @media(max-width:720px){ .wf-txt{ display:none; } .wf-step{ padding:6px 9px; } .wf-arrow{ padding:0; } }

  /* Package pricing matrix (tier x occupancy) at the top of the catalog */
  .pkg-matrix-section .pkg-matrix-body{ padding:6px 0 10px; }
  .pkg-matrix{ margin:0 0 14px; }
  .pkg-matrix-title{ font-weight:700; font-size:13.5px; color:var(--ink,#1F233E); margin:2px 0 6px; }
  .pkg-matrix-scroll{ overflow-x:auto; }
  .pkg-matrix-table{ border-collapse:collapse; width:100%; min-width:460px; font-size:13px; }
  .pkg-matrix-table th, .pkg-matrix-table td{ border:1px solid var(--line); padding:2px; text-align:center; }
  .pkg-matrix-table th{ background:var(--cream,#f7f5f0); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; padding:6px 4px; }
  .pkg-matrix-table td.pkg-tier{ font-weight:700; background:var(--cream,#f7f5f0); text-align:left; padding:6px 10px; white-space:nowrap; }
  .pkg-matrix-table td.pkg-na{ color:var(--muted); }
  .pkg-cell{ width:100%; border:none; background:var(--card,#fff); cursor:pointer; padding:9px 6px; font-size:13px; font-weight:600; color:var(--ink,#1F233E); border-radius:6px; transition:background .12s ease; font-family:inherit; }
  .pkg-cell:hover{ background:var(--accent,#B39B6E); color:#fff; }
  .pkg-cell.added{ background:rgba(11,122,75,.12); color:#0b6b52; }
  .pkg-cell-n{ font-size:11px; opacity:.85; }

  .pkg-onrequest{ border:1px dashed var(--line); border-radius:8px; padding:8px 12px; background:var(--cream,#f7f5f0); }
  .pkg-req-tag{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; border:1px solid var(--line); border-radius:10px; padding:1px 7px; margin-left:6px; }
  .pkg-onrequest-note{ font-size:12px; color:var(--muted); line-height:1.4; }

  .pkg-fromprice{ border:1px solid var(--line); border-radius:8px; padding:8px 12px; }
  .pkg-fromprice .pkg-from-row{ display:flex; align-items:center; gap:12px; margin-top:4px; }
  .pkg-from-label{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }