*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }

    :root {
      --bg:          #FAF6EF;
      --white:       #FFFFFF;
      --wine:        #8B1A2E;
      --wine-deep:   #6B1122;
      --wine-soft:   rgba(139,26,46,0.07);
      --gold:        #B8935A;
      --ink:         #1C1008;
      --muted:       #7A6055;
      --border:      rgba(139,26,46,0.1);
      --border-soft: rgba(139,26,46,0.06);
      --sidebar-w:   230px;
    }

    body {
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      background: var(--bg);
      color: var(--ink);
      font-size: 14px;
    }

    /* ════════════════════════════
       AUTH
    ════════════════════════════ */
    #authView {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      padding: 24px;
    }
    .auth-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 48px 44px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 8px 48px rgba(28,16,8,0.09);
    }
    .auth-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .auth-brand span { color: var(--wine); }
    .auth-tagline {
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 36px;
    }
    .auth-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 24px;
    }
    .auth-note {
      font-size: 0.83rem;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 24px;
    }
    .field-group { margin-bottom: 16px; }
    .field-group label {
      display: block;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 7px;
    }
    .field-group input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.9rem;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
    }
    .field-group input:focus { border-color: var(--wine); background: var(--white); }
    .field-group select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.9rem;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      appearance: none;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .field-group select:focus { border-color: var(--wine); background: var(--white); }
    .auth-submit {
      width: 100%;
      padding: 14px;
      background: var(--wine);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: background 0.2s;
      margin-top: 6px;
    }
    .auth-submit:hover { background: var(--wine-deep); }
    .auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }
    .auth-submit--ghost { background: transparent; color: var(--wine); border: 1px solid var(--wine); margin-top: 12px; }
    .auth-submit--ghost:hover { background: rgba(139,26,46,0.06); }

    /* Free-trial strip at the top of the dashboard (self-serve accounts). */
    .plan-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
      margin-bottom: 20px; padding: 10px 14px; border-radius: 8px;
      background: rgba(184,147,90,0.10); border: 1px solid rgba(184,147,90,0.30);
      font-size: 0.82rem; color: var(--muted);
    }
    .plan-bar-label { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
    .plan-bar-sep { opacity: 0.5; }
    /* A trial in its last week, or over: the guest app closes, or has. */
    .plan-bar--warn { background: rgba(178,106,0,0.07); border-color: rgba(178,106,0,0.30); color: var(--ink); }
    .plan-bar--warn .plan-bar-label { color: #B26A00; }
    .plan-bar-btn {
      margin-left: auto; background: var(--wine); color: #fff; border: none; border-radius: 6px;
      padding: 6px 12px; font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 500; cursor: pointer;
    }
    .plan-bar-btn:hover { background: var(--wine-deep); }
    /* Setup checklist (restaurants, renderSetupChecklist). */
    .setup-card {
      background: var(--white); border: 1px solid var(--border); border-radius: 10px;
      padding: 20px 24px; margin-bottom: 24px;
    }
    .setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .setup-title { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 500; color: var(--ink); }
    .setup-sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
    .setup-hide {
      background: none; border: none; color: var(--muted); font-family: 'Jost', sans-serif;
      font-size: 0.78rem; text-decoration: underline; cursor: pointer; padding: 4px;
    }
    .setup-steps { list-style: none; margin: 0; padding: 0; }
    .setup-step {
      display: flex; align-items: center; gap: 14px; padding: 12px 0;
      border-top: 1px solid var(--border-soft);
    }
    .setup-mark {
      flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
      border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; color: #fff;
    }
    .setup-step--done .setup-mark { background: #2E7D32; border-color: #2E7D32; }
    .setup-step--next .setup-mark { border-color: var(--wine); }
    .setup-text { flex: 1; min-width: 0; }
    .setup-step-title { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
    .setup-step--done .setup-step-title { color: var(--muted); text-decoration: line-through; }
    .setup-step-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
    .setup-step--done .setup-step-sub { display: none; }
    .setup-btn { flex-shrink: 0; padding: 7px 14px; font-size: 0.8rem; }
    #store-name-input + .btn-ghost { flex-shrink: 0; }
    .settings-card .field-group > .field-hint { display: block; margin: 6px 0 0; font-size: 0.78rem; }
    .paywall-note { font-size: 0.88rem; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
    #paywallModal .modal-foot a.btn-primary { text-decoration: none; }
    .auth-feedback {
      margin-top: 14px;
      font-size: 0.82rem;
      padding: 10px 14px;
      border-radius: 6px;
      display: none;
      line-height: 1.5;
    }
    .auth-feedback.err { display: block; background: rgba(198,40,40,0.07); color: #C62828; border: 1px solid rgba(198,40,40,0.18); }
    .auth-feedback.ok  { display: block; background: rgba(46,125,50,0.07); color: #2E7D32; border: 1px solid rgba(46,125,50,0.18); }
    .auth-link {
      font-size: 0.8rem;
      color: var(--wine);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: opacity 0.18s;
    }
    .auth-link:hover { opacity: 0.7; }

    .auth-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 28px;
    }
    .auth-tab {
      flex: 1;
      padding: 10px;
      background: transparent;
      border: none;
      font-family: 'Jost', sans-serif;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.2s, border-color 0.2s;
      letter-spacing: 0.04em;
    }
    .auth-tab.active { color: var(--wine); border-bottom-color: var(--wine); }
    .auth-tab:hover:not(.active) { color: var(--ink); }

    #onboardingView {
      min-height: 100vh;
      display: none;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      padding: 24px;
    }
    .onboarding-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 48px 44px;
      width: 100%;
      max-width: 560px;
      box-shadow: 0 8px 48px rgba(28,16,8,0.09);
    }
    .onboarding-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
    }
    .onboarding-grid .full { grid-column: 1 / -1; }

    /* ════════════════════════════
       DASHBOARD LAYOUT
    ════════════════════════════ */
    #dashboardView { display: none; height: 100vh; overflow: hidden; }
    .layout { display: flex; height: 100%; }

    /* Sidebar */
    .sidebar {
      width: var(--sidebar-w);
      flex-shrink: 0;
      background: var(--white);
      border-right: 1px solid var(--border-soft);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
    }
    .sidebar-brand {
      padding: 26px 20px 20px;
      border-bottom: 1px solid var(--border-soft);
    }
    .sidebar-brand-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 500;
      color: var(--ink);
    }
    .sidebar-brand-name span { color: var(--wine); }
    .sidebar-brand-sub {
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 2px;
    }
    .sidebar-nav { padding: 14px 10px; flex: 1; }
    .nav-section-label {
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0 10px;
      margin: 14px 0 6px;
    }
    .nav-section-label:first-child { margin-top: 4px; }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 7px;
      font-size: 0.85rem;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.18s, color 0.18s;
      user-select: none;
      margin-bottom: 1px;
    }
    .nav-item:hover { background: var(--bg); color: var(--ink); }
    .nav-item.active { background: var(--wine); color: #fff; font-weight: 500; }
    .nav-item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
    .sidebar-footer {
      padding: 14px;
      border-top: 1px solid var(--border-soft);
    }
    .user-pill {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      background: var(--bg);
      border-radius: 8px;
      margin-bottom: 8px;
    }
    .user-avatar {
      width: 30px; height: 30px;
      background: var(--wine-soft);
      border: 1px solid rgba(139,26,46,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.95rem;
      color: var(--wine);
      flex-shrink: 0;
    }
    .user-email-text {
      font-size: 0.74rem;
      color: var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .logout-btn {
      width: 100%;
      padding: 8px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.76rem;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .logout-btn:hover { border-color: var(--wine); color: var(--wine); }

    /* Main */
    .main { flex: 1; overflow-y: auto; padding: 36px 40px; background: var(--bg); }
    .view { display: none; }
    .view.active { display: block; }

    /* Page header */
    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 28px;
    }
    .page-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.9rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.1;
    }
    .page-title em { font-style: italic; color: var(--wine); }
    .page-sub { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

    /* Buttons */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: var(--wine);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      box-shadow: 0 2px 10px rgba(139,26,46,0.2);
    }
    .btn-primary:hover { background: var(--wine-deep); transform: translateY(-1px); }
    .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
    .btn-primary svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 9px 18px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-ghost:hover { border-color: var(--wine); color: var(--wine); }
    .legal-links { margin-top: 18px; font-size: 0.75rem; color: var(--muted); text-align: center; }
    .legal-links a { color: var(--muted); }
    /* Terms acceptance fields (migration 20240322): onboarding, the gate, the paywall. */
    .terms-fields { margin: 18px 0 8px; text-align: left; }
    .terms-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--ink); line-height: 1.45; margin: 0 0 12px; cursor: pointer; }
    .terms-check input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--wine); }
    .terms-check a, .terms-out a { color: var(--wine); }
    .terms-out { font-size: 0.78rem; color: var(--muted); margin: 4px 0 0; }
    .terms-note { font-size: 0.82rem; color: var(--ink); line-height: 1.45; margin: 0 0 12px; }
    .terms-gate-foot { flex-wrap: wrap; gap: 8px; }
    /* Settings → Your data (migration 20240320). Red is the error red used by .auth-feedback.err. */
    .btn-danger {
      display: inline-flex; align-items: center; padding: 10px 18px;
      background: #C62828; color: #fff; border: none; border-radius: 6px;
      font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500; cursor: pointer;
      transition: background 0.2s;
    }
    .btn-danger:hover { background: #A31F1F; }
    .btn-danger:disabled { opacity: 0.6; cursor: default; }
    .data-export-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .data-danger-title { margin-top: 28px; color: #C62828; }
    .data-cancel-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--ink); margin: 0 0 14px; cursor: pointer; }
    .data-cancel-row input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: #C62828; }
    #del-expected { font-family: monospace; background: var(--bg); padding: 1px 6px; border-radius: 4px; }
    .btn-ghost svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* Stats row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px;
      margin-bottom: 28px;
    }
    .stat-card {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      padding: 18px 20px;
    }
    .stat-label {
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .stat-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1;
    }

    /* Toolbar */
    .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .search-box {
      position: relative;
      flex: 1;
      max-width: 320px;
    }
    .search-box svg {
      position: absolute;
      left: 11px; top: 50%;
      transform: translateY(-50%);
      width: 14px; height: 14px;
      stroke: var(--muted); fill: none; stroke-width: 2;
    }
    .search-box input {
      width: 100%;
      padding: 9px 12px 9px 33px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.84rem;
      color: var(--ink);
      background: var(--white);
      outline: none;
      transition: border-color 0.2s;
    }
    .search-box input:focus { border-color: var(--wine); }

    /* Table */
    .table-wrap {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      overflow: hidden;
    }
    table { width: 100%; border-collapse: collapse; }
    thead th {
      padding: 11px 14px;
      text-align: left;
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--bg);
      border-bottom: 1px solid var(--border-soft);
    }
    tbody td {
      padding: 12px 14px;
      font-size: 0.84rem;
      color: var(--ink);
      border-bottom: 1px solid var(--border-soft);
      vertical-align: middle;
    }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: rgba(250,246,239,0.5); }

    .thumb {
      width: 34px; height: 34px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid var(--border-soft);
    }
    .thumb-placeholder {
      width: 34px; height: 34px;
      border-radius: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
    }
    .thumb-placeholder svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 1.5; }
    .wine-name-cell { font-weight: 500; }
    .wine-sub { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
    .badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .badge-margin { background: var(--wine-soft); color: var(--wine); border: 1px solid rgba(139,26,46,0.15); }
    .rating-stars { color: var(--gold); font-weight: 600; font-size: 0.84rem; }
    .rating-count { font-size: 0.7rem; color: var(--muted); }
    .rating-empty { color: var(--muted); }
    .badge-ok  { background: rgba(46,125,50,0.07); color: #2E7D32; border: 1px solid rgba(46,125,50,0.18); }
    .badge-low { background: rgba(230,81,0,0.07); color: #E65100; border: 1px solid rgba(230,81,0,0.2); }
    .row-actions { display: flex; gap: 5px; }
    .row-btn {
      padding: 5px 9px;
      border-radius: 5px;
      font-family: 'Jost', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
    }
    .row-btn:hover { background: var(--bg); color: var(--ink); }
    .row-btn.del:hover { background: rgba(198,40,40,0.06); border-color: rgba(198,40,40,0.2); color: #C62828; }

    /* ── Row selection + bulk actions ──────────────────────────────────────
       The selection checkbox sits in its own narrow first column. It is styled
       distinctly from .menu-toggle (the is-active switch) on purpose: two
       controls in one row that both look like toggles would be easy to confuse,
       and one of them feeds a destructive action. */
    .col-check { width: 34px; padding-right: 0 !important; }
    .row-check {
      width: 15px;
      height: 15px;
      accent-color: var(--wine);
      cursor: pointer;
      margin: 0;
      vertical-align: middle;
    }
    tr.row-selected { background: var(--wine-soft); }

    .bulk-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
      padding: 10px 14px;
      background: var(--wine-soft);
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .bulk-count {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--wine);
      margin-right: auto;
    }
    /* Amber rather than wine: this is an attention state, not a selection. */
    .unmatched-bar {
      background: rgba(178,106,0,0.07);
      border-color: rgba(178,106,0,0.25);
    }
    .unmatched-bar .bulk-count { color: #B26A00; }

    /* Inline pairing-category picker, shown only on unmatched rows. Offers the
       20 valid values and nothing else, so a correction cannot introduce a value
       the recommendation algorithms will never match. */
    .cat-select {
      font-family: 'Jost', sans-serif;
      font-size: 0.72rem;
      padding: 4px 6px;
      border: 1px solid rgba(178,106,0,0.35);
      border-radius: 5px;
      background: var(--white);
      color: var(--ink);
      max-width: 190px;
      cursor: pointer;
    }
    .cat-select:focus { outline: 2px solid var(--wine); outline-offset: 1px; }
    /* Descriptor override — the taste and pairing chips in the bottle modal.
       Deliberately a chip grid rather than a multi-select: the vocabularies are fixed
       and small, and a retailer correcting an AI guess should SEE the whole vocabulary
       rather than hunt through a dropdown for a value they are not sure exists. */
    .descriptor-group { margin-bottom: 12px; }
    .descriptor-group-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .descriptor-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .descriptor-chip {
      font-family: 'Jost', sans-serif;
      font-size: 0.7rem;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--white);
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .descriptor-chip:hover { border-color: var(--wine); color: var(--wine); }
    .descriptor-chip.on {
      background: var(--wine-soft);
      border-color: var(--wine);
      color: var(--wine);
      font-weight: 500;
    }
    .empty-state {
      text-align: center;
      padding: 64px 40px;
    }
    .empty-state svg { display: block; margin: 0 auto 14px; opacity: 0.2; stroke: var(--muted); }
    .empty-state h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
    .empty-state p { font-size: 0.82rem; color: var(--muted); opacity: 0.7; }

    /* PDF Section */
    .drop-zone {
      border: 2px dashed rgba(139,26,46,0.2);
      border-radius: 10px;
      padding: 44px 40px;
      text-align: center;
      background: var(--white);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      margin-bottom: 20px;
    }
    .drop-zone:hover, .drop-zone.over { border-color: var(--wine); background: var(--wine-soft); }
    .drop-zone svg { display: block; margin: 0 auto 14px; opacity: 0.35; }
    .drop-zone-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
    .drop-zone-sub { font-size: 0.8rem; color: var(--muted); }
    .drop-zone-sub strong { color: var(--wine); }
    .pdf-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .pdf-row {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 9px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .pdf-icon { width: 34px; height: 34px; background: var(--wine-soft); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pdf-icon svg { width: 16px; height: 16px; stroke: var(--wine); fill: none; stroke-width: 1.6; }
    .pdf-info { flex: 1; }
    .pdf-name { font-size: 0.86rem; font-weight: 500; color: var(--ink); }
    .pdf-meta { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
    .pdf-view { font-size: 0.74rem; color: var(--wine); text-decoration: none; font-weight: 500; padding: 5px 10px; border: 1px solid rgba(139,26,46,0.2); border-radius: 4px; transition: background 0.15s; white-space: nowrap; }
    .pdf-view:hover { background: var(--wine-soft); }

    /* Margin data table section */
    .section-heading {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 14px;
    }

    /* Settings */
    .settings-card {
      background: var(--white);
      border: 1px solid var(--border-soft);
      border-radius: 10px;
      padding: 28px 32px;
      max-width: 560px;
      margin-bottom: 20px;
    }
    .settings-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
    .settings-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.65; margin-bottom: 18px; }
    .settings-row { display: flex; gap: 10px; align-items: flex-end; }

    /* Billing view (renderBillingView): the plan beside the payment method and billing
       details, then the invoices across the whole width. */
    .badge-neutral { background: rgba(184,147,90,0.10); color: #8A6A3A; border: 1px solid rgba(184,147,90,0.28); }
    .billing-grid {
      display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px;
      align-items: start; margin-bottom: 20px;
    }
    .billing-plan { grid-row: span 2; }
    .billing-card {
      background: var(--white); border: 1px solid var(--border-soft); border-radius: 10px; padding: 24px 28px;
    }
    .billing-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
    .billing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
    .billing-head h3 { margin-bottom: 0; }
    .billing-head .badge:empty { display: none; }
    .billing-status { font-size: 0.86rem; color: var(--ink); line-height: 1.6; margin-bottom: 16px; }
    .billing-details {
      display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px;
      margin: 0 0 18px; padding: 14px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
      font-size: 0.84rem;
    }
    .billing-details dt { color: var(--muted); }
    .billing-details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
    .billing-aside { color: var(--muted); font-size: 0.78rem; }
    .billing-note, .billing-hint { font-size: 0.8rem; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
    .billing-value { font-size: 0.9rem; color: var(--ink); margin-bottom: 12px; }
    .billing-warn {
      font-size: 0.8rem; color: #B26A00; background: rgba(178,106,0,0.07); border: 1px solid rgba(178,106,0,0.25);
      border-radius: 6px; padding: 8px 10px; margin-bottom: 12px;
    }
    .billing-actions { flex-wrap: wrap; }
    /* Text-only buttons: the discreet cancel link, "older invoices". */
    .billing-link {
      background: none; border: none; padding: 0; margin-top: 16px; cursor: pointer;
      font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--muted); text-decoration: underline;
    }
    .billing-link:hover { color: var(--wine); }
    .billing-cancel { display: block; }
    .billing-invoices-card { margin-bottom: 16px; }
    .billing-table-wrap { border: none; border-radius: 0; box-shadow: none; }
    .billing-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
    .billing-table th {
      text-align: left; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border);
    }
    .billing-table td { padding: 11px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--ink); }
    .billing-table tr:last-child td { border-bottom: none; }
    .billing-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .billing-invoice-number { font-weight: 500; }
    .billing-c-actions { text-align: right; white-space: nowrap; }
    .billing-c-actions a { color: var(--wine); font-weight: 500; text-decoration: none; margin-left: 14px; }
    .billing-c-actions a:hover { text-decoration: underline; }
    .billing-c-actions a.billing-pay {
      background: var(--wine); color: #fff; padding: 5px 12px; border-radius: 6px;
    }
    .billing-c-actions a.billing-pay:hover { background: var(--wine-deep); text-decoration: none; }
    .billing-empty { font-size: 0.84rem; color: var(--muted); }
    .billing-help { font-size: 0.82rem; color: var(--muted); }
    .billing-help a { color: var(--wine); font-weight: 500; }
    @media (max-width: 1100px) {
      .billing-grid { grid-template-columns: minmax(0, 1fr); }
      .billing-plan { grid-row: auto; }
    }

    /* Accent colour (Branding card). The preview reads --accent / --accent-rgb, set by
       renderAccentPicker(), and mirrors the diner app: parchment, ink, the accent. */
    .accent-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
    .accent-title { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
    .settings-card .accent-note { margin-bottom: 14px; }
    .accent-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
    .accent-swatch {
      width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
      border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(28,16,8,0.15);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .accent-swatch:hover { transform: scale(1.08); }
    .accent-swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
    .accent-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
    .accent-swatch-group { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
    .accent-swatch-label { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; }
    .accent-custom {
      width: 34px; height: 34px; border-radius: 50%; cursor: pointer; position: relative;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1.5px dashed rgba(28,16,8,0.3); color: var(--muted); font-size: 1.1rem;
    }
    .accent-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .accent-preview {
      --accent: #8B1A2E; --accent-rgb: 139,26,46;
      display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
      padding: 16px 18px; border-radius: 12px; background: #FAF6EF; border: 1px solid rgba(var(--accent-rgb),0.12);
    }
    .accent-preview-heading { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--ink); }
    .accent-preview-heading em { color: var(--accent); }
    .accent-preview-chip {
      font-size: 0.78rem; padding: 6px 12px; border-radius: 20px;
      border: 1.5px solid var(--accent); background: rgba(var(--accent-rgb),0.06); color: var(--accent);
    }
    .accent-preview-btn {
      font-size: 0.8rem; font-weight: 500; padding: 9px 16px; border-radius: 10px;
      background: var(--accent); color: #FFFFFF; letter-spacing: 0.02em;
    }
    .tag-list { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 1.5rem; margin-bottom: .5rem; }
    .tag { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .6rem;
      border-radius: 999px; background: var(--wine-soft); font-size: .82rem; color: var(--ink); }
    .tag button { background: none; border: none; cursor: pointer; color: var(--muted);
      font-size: 1rem; line-height: 1; padding: 0; }
    .tag button:hover { color: var(--wine); }
    .tag-input-row { display: flex; gap: .5rem; }
    .tag-input-row input { flex: 1; }
    .aisle-item { border: 1px solid var(--border); border-radius: 8px; padding: .75rem; margin-bottom: .75rem; }
    .aisle-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
    .aisle-name { font-weight: 600; font-size: .9rem; color: var(--ink); }
    .aisle-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0; }
    .aisle-remove:hover { color: var(--wine); }
    .no-aisles-msg { color: var(--muted); font-size: .85rem; margin: .25rem 0 .75rem; }
    .settings-row input {
      flex: 1;
      padding: 11px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.85rem;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      transition: border-color 0.2s;
      font-family: monospace;
      font-size: 0.78rem;
      letter-spacing: 0.03em;
    }
    .settings-row input:focus { border-color: var(--wine); background: var(--white); }
    .api-saved-badge { display: none; font-size: 0.75rem; color: #2E7D32; font-weight: 500; margin-top: 8px; }
    .api-saved-badge.show { display: block; }

    /* ════════════════════════════
       MODAL
    ════════════════════════════ */
    .modal-bg {
      position: fixed; inset: 0;
      background: rgba(28,16,8,0.35);
      backdrop-filter: blur(4px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-bg.open { display: flex; }
    .modal {
      background: var(--white);
      border-radius: 14px;
      width: 100%;
      max-width: 580px;
      max-height: 92vh;
      overflow-y: auto;
      box-shadow: 0 24px 80px rgba(28,16,8,0.18);
    }
    .modal-head {
      padding: 26px 28px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--white);
      z-index: 1;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border-soft);
    }
    .modal-head h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; color: var(--ink); }
    .modal-close-btn {
      width: 30px; height: 30px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .modal-close-btn:hover { background: var(--bg); }
    .modal-close-btn svg { width: 13px; height: 13px; stroke: var(--muted); fill: none; stroke-width: 2; }
    .modal-body { padding: 22px 28px; }
    .modal-foot {
      padding: 16px 28px 24px;
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      border-top: 1px solid var(--border-soft);
    }

    /* Photo capture */
    .photo-area { margin-bottom: 22px; }
    .photo-preview {
      width: 100%;
      height: 160px;
      border-radius: 8px;
      background: var(--bg);
      border: 2px dashed var(--border);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
    }
    .photo-preview img { width: 100%; height: 100%; object-fit: cover; }
    .photo-placeholder-inner { text-align: center; }
    .photo-placeholder-inner svg { display: block; margin: 0 auto 8px; opacity: 0.3; stroke: var(--muted); }
    .photo-placeholder-inner p { font-size: 0.78rem; color: var(--muted); }
    .photo-btns { display: flex; gap: 8px; }
    /* Restaurants: wines come from a printed list, so the box shows only once there is a
       photo, and the two buttons sit small at the top (applyBusinessTypeUI). */
    .modal--venue .photo-area { margin-bottom: 16px; }
    .modal--venue .photo-preview:not(:has(img)) { display: none; }
    .modal--venue .photo-btns .photo-btn { flex: 0 1 auto; padding: 7px 12px; }
    .photo-btn {
      flex: 1;
      padding: 9px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: transparent;
      font-family: 'Jost', sans-serif;
      font-size: 0.76rem;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
      display: flex; align-items: center; justify-content: center;
      gap: 6px;
    }
    .photo-btn:hover { border-color: var(--wine); color: var(--wine); background: var(--wine-soft); }
    .photo-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
    .ai-status {
      margin-top: 8px;
      font-size: 0.76rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ai-spinner {
      width: 12px; height: 12px;
      border: 1.5px solid var(--border);
      border-top-color: var(--wine);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }
    .ai-spinner.active { display: inline-block; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Form grid */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .form-grid .full { grid-column: 1 / -1; }
    /* The segment blocks are one grid cell each, so they span the row and lay out their
       own fields on the same two columns — otherwise a .full field inside them is half
       the modal's width. */
    #supermarket-fields, #restaurant-fields, #legacy-serving-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .form-field label {
      display: block;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 7px;
    }
    .form-field input, .form-field select {
      width: 100%;
      padding: 10px 13px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.86rem;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
    }
    .form-field input:focus, .form-field select:focus { border-color: var(--wine); background: var(--white); }
    .form-field input::placeholder { color: rgba(122,96,85,0.4); }
    .form-field input.ai-filled { border-color: rgba(46,125,50,0.4); background: rgba(46,125,50,0.03); }
    .margin-matched {
      font-size: 0.72rem;
      color: #2E7D32;
      margin-top: 5px;
      display: none;
    }
    .margin-matched.show { display: block; }
    .checkbox-wrap {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 13px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      cursor: pointer;
    }
    .checkbox-wrap input[type="checkbox"] { accent-color: var(--wine); width: 15px; height: 15px; }
    /* Inside a .form-field the generic label rule (uppercase, tracked, bold) would apply too. */
    .checkbox-wrap label { font-size: 0.83rem; color: var(--ink); cursor: pointer;
                           text-transform: none; letter-spacing: normal; font-weight: 400; margin: 0; }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 24px; right: 24px;
      background: var(--ink);
      color: #FAF6EF;
      padding: 12px 18px;
      border-radius: 8px;
      font-size: 0.83rem;
      box-shadow: 0 6px 28px rgba(28,16,8,0.2);
      transform: translateY(60px);
      opacity: 0;
      transition: transform 0.28s, opacity 0.28s;
      z-index: 400;
      max-width: 320px;
    }
    .toast.show { transform: translateY(0); opacity: 1; }
    .toast.ok  { border-left: 3px solid #4CAF50; }
    .toast.err { border-left: 3px solid #F44336; }

    /* ════════════════════════════
       TOUR
    ════════════════════════════ */
    #tourOverlay {
      position: fixed; inset: 0;
      z-index: 2000;
      pointer-events: none;
    }
    #tourSpotlight {
      position: absolute;
      border-radius: 10px;
      box-shadow: 0 0 0 9999px rgba(28,16,8,0.68);
      transition: top 0.35s cubic-bezier(0.4,0,0.2,1),
                  left 0.35s cubic-bezier(0.4,0,0.2,1),
                  width 0.35s cubic-bezier(0.4,0,0.2,1),
                  height 0.35s cubic-bezier(0.4,0,0.2,1);
      pointer-events: none;
    }
    #tourTooltip {
      position: absolute;
      background: var(--white);
      border-radius: 12px;
      padding: 24px 26px;
      width: 300px;
      box-shadow: 0 16px 56px rgba(28,16,8,0.22);
      pointer-events: all;
      transition: top 0.35s cubic-bezier(0.4,0,0.2,1),
                  left 0.35s cubic-bezier(0.4,0,0.2,1),
                  opacity 0.2s;
    }
    #tourTooltip::before {
      content: '';
      position: absolute;
      width: 10px; height: 10px;
      background: var(--white);
      transform: rotate(45deg);
    }
    #tourTooltip.arrow-left::before  { left: -5px;  top: 20px; }
    #tourTooltip.arrow-top::before   { top: -5px;   left: 24px; }
    #tourTooltip.arrow-none::before  { display: none; }
    .tour-step-label {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--wine);
      margin-bottom: 8px;
    }
    .tour-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--ink);
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .tour-text {
      font-size: 0.83rem;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 20px;
    }
    .tour-btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .tour-skip {
      font-size: 0.76rem;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Jost', sans-serif;
      padding: 0;
      transition: color 0.18s;
    }
    .tour-skip:hover { color: var(--wine); }
    .tour-next {
      padding: 9px 20px;
      background: var(--wine);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.18s;
    }
    .tour-next:hover { background: var(--wine-deep); }
    .tour-dots {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .tour-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--border);
      transition: background 0.2s, transform 0.2s;
    }
    .tour-dot.active { background: var(--wine); transform: scale(1.3); }

    /* Progress overlay for PDF parsing */
    .parse-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(28,16,8,0.45);
      backdrop-filter: blur(4px);
      z-index: 300;
      align-items: center;
      justify-content: center;
    }
    .parse-overlay.open { display: flex; }
    .parse-box {
      background: var(--white);
      border-radius: 12px;
      padding: 40px 48px;
      text-align: center;
      max-width: 360px;
    }
    .parse-spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--wine);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 18px;
    }
    .parse-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
    .parse-sub { font-size: 0.8rem; color: var(--muted); }

    /* ── Import stepper ────────────────────────────────────────────────────
       A spinner alone says "busy"; it does not say "busy doing what, and how
       far in". AI extraction on a long menu runs for tens of seconds, which is
       long enough that the difference between slow and hung matters. */
    .parse-steps {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--border-soft);
    }
    .parse-step {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.66rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      opacity: 0.4;
      transition: opacity 0.25s, color 0.25s;
    }
    .parse-step::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }
    .parse-step.done   { opacity: 1; color: var(--wine); }
    .parse-step.active { opacity: 1; color: var(--wine); font-weight: 500; }
    /* Only the active step pulses — a row of pulsing dots reads as noise. */
    .parse-step.active::before { animation: stepPulse 1.1s ease-in-out infinite; }
    @keyframes stepPulse {
      0%, 100% { transform: scale(1);   opacity: 1;   }
      50%      { transform: scale(1.5); opacity: 0.45; }
    }

    @media (prefers-reduced-motion: reduce) {
      .parse-step.active::before { animation: none; }
    }

    /* ════════════════════════════
       ONBOARDING — business type
    ════════════════════════════ */
    .ob-type-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 20px 0 8px;
    }
    .ob-type-card {
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 22px 18px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      text-align: center;
    }
    .ob-type-card:hover {
      border-color: var(--wine);
      background: var(--wine-soft);
      box-shadow: 0 2px 12px rgba(139,26,46,0.1);
    }
    .ob-type-card svg {
      width: 32px; height: 32px;
      stroke: var(--wine); fill: none; stroke-width: 1.5;
      margin-bottom: 10px;
    }
    .ob-type-title { font-weight: 600; font-size: 0.88rem; color: var(--ink); margin-bottom: 5px; }
    .ob-type-sub   { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }

    /* ════════════════════════════
       LANGUAGE — onboarding step 0 + sign-in switcher
    ════════════════════════════ */
    .ob-lang-grid { grid-template-columns: repeat(3, 1fr); }
    .ob-lang-grid .ob-type-card { padding: 18px 10px; }
    /* The detected language, pre-highlighted but not yet chosen. */
    .ob-lang-grid .ob-type-card.active { border-color: var(--wine); background: var(--wine-soft); }
    .ob-lang-code {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem; color: var(--wine); line-height: 1; margin-bottom: 8px;
    }
    .ob-lang-sub, .ob-lang-foot { font-size: 0.8rem; }
    .ob-lang-foot { margin-top: 12px; opacity: 0.8; }
    @media (max-width: 480px) { .ob-lang-grid { grid-template-columns: 1fr; } }

    .auth-card { position: relative; }
    .auth-card .lang-switcher {
      position: absolute; top: 18px; right: 20px;
      display: flex; gap: 2px;
    }
    .lang-btn {
      background: none; border: none; cursor: pointer;
      font-family: inherit; font-size: 0.7rem; letter-spacing: 0.1em;
      color: var(--muted); padding: 4px 5px;
      transition: color 0.18s;
    }
    .lang-btn:hover { color: var(--wine); }
    .lang-btn.active { color: var(--wine); font-weight: 600; }

    /* ════════════════════════════
       MODAL — restaurant fields
    ════════════════════════════ */
    .field-hint { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-left: 4px; }
    /* Printed-price rows in the bottle modal: the venue's format label, its price, remove. */
    .price-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; margin-bottom: 8px; align-items: center; }
    #use-printed-btn { margin-top: 4px; }
    .form-field textarea {
      width: 100%;
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'Jost', sans-serif;
      font-size: 0.88rem;
      color: var(--ink);
      background: var(--bg);
      outline: none;
      resize: vertical;
      transition: border-color 0.2s;
    }
    .form-field textarea:focus { border-color: var(--wine); background: var(--white); }

    /* By glass badge */
    .badge-glass { background: rgba(184,147,90,0.12); color: var(--gold); border: 1px solid rgba(184,147,90,0.25); }

    /* ════════════════════════════
       FOOD MENU VIEW
    ════════════════════════════ */
    .menu-parse-status {
      font-size: 0.82rem;
      color: var(--muted);
      min-height: 18px;
    }
    .order-opts { display: flex; flex-direction: column; gap: 10px; }
    .order-opt {
      display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
      padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px;
      transition: border-color 0.15s, background 0.15s;
    }
    .order-opt:hover { border-color: var(--wine); }
    .order-opt:has(input:checked) { border-color: var(--wine); background: rgba(139,26,46,0.04); }
    .order-opt input[type="radio"] { accent-color: var(--wine); margin-top: 3px; flex-shrink: 0; }
    .order-opt strong { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
    .order-opt em { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted); }

    /* An empty status line left a blank band under the toolbar; it returns with its text. */
    .menu-parse-status:empty { display: none; }
    .menu-parse-status.ok   { color: #2E7D32; }
    .menu-parse-status.warn { color: #B26A00; }
    .menu-parse-status.err  { color: #C62828; }

    /* Toggle switch for menu active state */
    .menu-toggle {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .menu-toggle input { display: none; }
    .menu-toggle-track {
      width: 32px; height: 18px;
      border-radius: 9px;
      background: var(--border);
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    .menu-toggle-track::after {
      content: '';
      position: absolute;
      top: 3px; left: 3px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #fff;
      transition: left 0.2s;
    }
    .menu-toggle input:checked + .menu-toggle-track { background: var(--wine); }
    .menu-toggle input:checked + .menu-toggle-track::after { left: 17px; }

/* ── Wine state: un-enriched and 86'd ──────────────────────────────────────── */
/* An un-enriched wine reaches diners only as "Not yet rated", and an 86'd one does
   not reach them at all. Both change what the venue is actually showing, so both are
   legible on the row itself and not only in the notice bar above the table. */
.badge-unenriched {
  background: rgba(178,106,0,0.08); color: #B26A00;
  border: 1px solid rgba(178,106,0,0.22);
}

/* Dimmed rather than hidden: the retailer still needs to find it to restore it. */
tr.row-unavailable { opacity: 0.55; }
tr.row-unavailable .wine-name-cell { text-decoration: line-through; }
tr.row-unavailable.row-selected { opacity: 1; }

/* The restore action is the affirmative one, so it reads as such next to "86". */
.row-btn-restore { color: var(--wine); border-color: rgba(139,26,46,0.35); }

/* ── Insights ──────────────────────────────────────────────────────────────── */
.insights-grid {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.insight-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.insight-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px;
  align-items: center; gap: 10px;
}
.insight-label {
  font-size: 0.84rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The bar is a proportion of the top row, so the column is fixed and the fill varies. */
.insight-bar {
  height: 6px; border-radius: 3px; background: var(--wine);
  opacity: 0.55; min-width: 4px;
}
.insight-value {
  font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: right;
}
.insight-empty { font-size: 0.84rem; color: var(--muted); }

/* A dish whose category was set by hand still reads as deliberate; an unset one
   should look like the outstanding task it is. */
.cat-select-unset { border-color: rgba(178,106,0,0.4); color: #B26A00; }
/* A restaurant's printed prices, one format per line, in the inventory table. */
.price-opt { white-space: nowrap; line-height: 1.5; }
.price-opt-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); }

/* ── Printable QR table card (restaurants) ─────────────────────────────────── */
.qr-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; width: 100%; }
.qr-card-preview {
  width: 240px; max-width: 100%; aspect-ratio: 1240 / 1748; height: auto;
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 18px rgba(28,16,8,0.10); background: #fff;
}
.qr-card-status { font-size: 0.75rem; color: var(--muted); text-align: center; max-width: 300px; line-height: 1.5; }
.qr-card-status:empty { display: none; }
.qr-plain-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.75rem; color: var(--muted); text-decoration: underline;
}
.qr-plain-link:hover { color: var(--wine); }
.modal-foot button:disabled { opacity: 0.5; cursor: default; }

/* Only the card prints. body.printing-qr is set by printQrCard() and removed on
   afterprint; hiding every other child of <body> (rather than visibility:hidden) keeps
   the dashboard from contributing blank pages of its own. The named page asks for A6
   where the browser honours it; elsewhere the card still prints at its true size. */
#qr-print-sheet { display: none; }
@page qrcard { size: 105mm 148mm; margin: 0; }
/* ════════════════════════════
   PHONES AND SMALL TABLETS (≤ 900px)
   The sidebar becomes a drawer opened from a top bar (toggleNav() in admin.js), the
   inventory and menu tables become one card per row, and every header and toolbar
   wraps. Nothing here applies above 900px.
════════════════════════════ */
.mobile-bar, .sidebar-backdrop, .select-all-label { display: none; }

@media (max-width: 900px) {
  #dashboardView { height: 100vh; height: 100dvh; }
  .layout { flex-direction: column; }

  .mobile-bar {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
    background: var(--white); border-bottom: 1px solid var(--border-soft);
  }
  .mobile-menu-btn {
    width: 42px; height: 42px; margin-left: -10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
  }
  .mobile-menu-btn:active { background: var(--bg); }
  .mobile-menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

  /* visibility keeps the closed drawer out of the tab order and away from screen readers. */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: min(290px, 86vw); height: auto;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: 8px 0 40px rgba(28,16,8,0.18);
  }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 290;
    background: rgba(28,16,8,0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s;
  }
  body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .nav-item { padding: 12px; font-size: 0.95rem; }

  .main { padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
  .plan-bar { margin-bottom: 16px; }
  .setup-card { padding: 16px; }
  .billing-card { padding: 18px 16px; }
  .billing-details { grid-template-columns: 1fr; gap: 2px; }
  .billing-details dd { margin-bottom: 10px; }
  /* Invoices: one card per invoice, the number and total across, the rest labelled. */
  .billing-table thead { display: none; }
  .billing-table, .billing-table tbody { display: block; }
  .billing-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  }
  .billing-table tr:last-child { border-bottom: none; }
  .billing-table td { display: block; padding: 0; border: none; }
  .billing-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }
  .billing-table .num { text-align: left; }
  .billing-c-number { grid-column: 1; }
  .billing-c-total { grid-column: 2; grid-row: 1; text-align: right !important; font-weight: 600; }
  .billing-c-total::before { display: none !important; }
  .billing-c-period { grid-column: 1 / -1; }
  .billing-c-actions { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .billing-c-actions a { margin: 0 16px 0 0; display: inline-block; }
  .setup-step { flex-wrap: wrap; }
  .setup-text { flex: 1 1 calc(100% - 38px); }
  .setup-btn { margin-left: 38px; }
  .plan-bar-sep { display: none; }

  .page-header { flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
  .page-header > div + div, .page-header > div + button { flex-wrap: wrap; }
  .page-title { font-size: 1.6rem; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 1.6rem; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .search-box { flex: 1 1 100%; max-width: none; }
  .bulk-bar { flex-wrap: wrap; }
  .settings-card { padding: 20px 18px; max-width: none; }
  .settings-row { flex-wrap: wrap; }
  .settings-row input { flex: 1 1 100%; min-width: 0; }
  .drop-zone { padding: 32px 20px; }
  .pdf-row { flex-wrap: wrap; padding: 12px 14px; }
  .pdf-info { min-width: 0; flex: 1 1 60%; }
  .pdf-name { overflow-wrap: anywhere; }
  .empty-state { padding: 44px 20px; }
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .toast { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; }

  .modal-bg { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .modal-head { padding: 18px 20px 14px; }
  .modal-body { padding: 18px 20px; }
  .modal-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); flex-wrap: wrap; }

  /* Fingers, not a mouse pointer. */
  .row-btn { padding: 8px 12px; font-size: 0.76rem; }
  .row-check { width: 20px; height: 20px; }
  /* iOS Safari zooms the page into any field under 16px when it gets focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select, textarea { font-size: 16px; }

  /* ── Tables as cards ── The header row keeps only its select-all box, now labelled. */
  .inv-table, .inv-table thead, .inv-table tbody, .menu-table, .menu-table thead, .menu-table tbody { display: block; }
  .inv-table thead tr, .menu-table thead tr { display: flex; }
  .inv-table thead th, .menu-table thead th { display: none; }
  .inv-table thead th.col-check, .menu-table thead th.col-check {
    display: flex; align-items: center; gap: 10px; flex: 1; width: auto; padding: 11px 14px !important;
  }
  .select-all-label {
    display: inline; cursor: pointer; font-size: 0.74rem; font-weight: 500;
    letter-spacing: normal; text-transform: none; color: var(--muted);
  }
  .inv-table tbody tr, .menu-table tbody tr {
    display: grid; column-gap: 12px; row-gap: 10px; align-items: start;
    padding: 14px; border-bottom: 1px solid var(--border-soft);
  }
  .inv-table tbody tr:last-child, .menu-table tbody tr:last-child { border-bottom: none; }
  .inv-table tbody td, .menu-table tbody td { display: block; padding: 0; border: none; min-width: 0; }
  .inv-table tbody td:only-child, .menu-table tbody td:only-child { grid-column: 1 / -1; }
  .inv-table tbody tr:hover td, .menu-table tbody tr:hover td { background: none; }
  .inv-table td.col-check, .menu-table td.col-check { width: auto; padding: 1px 0 0 !important; }
  .inv-table td[data-label]::before, .menu-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }

  /* Bottle: box · photo · name across; then vintage, price, quantity, margin or glass price;
     then type and rating; then the actions. */
  .inv-table tbody tr { grid-template-columns: 20px 40px repeat(4, minmax(0, 1fr)); }
  .inv-c-check   { grid-area: 1 / 1; }
  .inv-c-thumb   { grid-area: 1 / 2 / span 2; }
  .inv-c-wine    { grid-area: 1 / 3 / auto / -1; }
  .inv-c-vintage { grid-area: 2 / 3; }
  .inv-c-price   { grid-area: 2 / 4; }
  .inv-c-qty     { grid-area: 2 / 5; }
  .inv-c-var     { grid-area: 2 / 6; }
  .inv-c-type    { grid-area: 3 / 3 / auto / span 2; }
  .inv-table tbody td.inv-c-type { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
  .inv-c-rating  { grid-area: 3 / 5 / auto / span 2; }
  .inv-c-actions { grid-area: 4 / 3 / auto / -1; }
  .inv-c-thumb .thumb, .inv-c-thumb .thumb-placeholder { width: 40px; height: 40px; }
  /* No photo column (a restaurant with no bottle photos): everything moves left one. */
  .inv-table--nophoto tbody tr { grid-template-columns: 20px repeat(4, minmax(0, 1fr)); }
  .inv-table--nophoto .inv-c-wine    { grid-area: 1 / 2 / auto / -1; }
  .inv-table--nophoto .inv-c-vintage { grid-area: 2 / 2; }
  .inv-table--nophoto .inv-c-price   { grid-area: 2 / 3; }
  .inv-table--nophoto .inv-c-qty     { grid-area: 2 / 4; }
  .inv-table--nophoto .inv-c-var     { grid-area: 2 / 5; }
  .inv-table--nophoto .inv-c-type    { grid-area: 3 / 2 / auto / span 2; }
  .inv-table--nophoto .inv-c-rating  { grid-area: 3 / 4 / auto / span 2; }
  .inv-table--nophoto .inv-c-actions { grid-area: 4 / 2 / auto / -1; }
  /* No rating cell (a restaurant with no rated wine): the badges take the whole row. */
  .inv-table--norating .inv-c-type { grid-area: 3 / 3 / auto / -1; }
  .inv-table--norating.inv-table--nophoto .inv-c-type { grid-area: 3 / 2 / auto / -1; }
  /* A restaurant row has no quantity or margin cell; its printed prices take the room. */
  .inv-table--venue .inv-c-price { grid-area: 2 / 4 / auto / -1; }
  .inv-table--venue.inv-table--nophoto .inv-c-price { grid-area: 2 / 3 / auto / -1; }

  /* Dish: box · name · on/off switch; then section beside delete; then the pairing category. */
  .menu-table tbody tr { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .menu-c-check   { grid-area: 1 / 1; }
  .menu-c-dish    { grid-area: 1 / 2; font-weight: 500; }
  .menu-c-active  { grid-area: 1 / 3; }
  .menu-c-section { grid-area: 2 / 2; }
  .menu-c-actions { grid-area: 2 / 3; align-self: end; }
  .menu-c-cat     { grid-area: 3 / 2 / auto / -1; }
  .menu-table .cat-select { max-width: none; width: 100%; padding: 8px; }
}

@media (max-width: 520px) {
  .auth-card, .onboarding-card { padding: 32px 22px; }
  .onboarding-grid { grid-template-columns: 1fr; }
}

@media print {
  body.printing-qr > *:not(#qr-print-sheet) { display: none !important; }
  body.printing-qr { background: #fff !important; }
  body.printing-qr #qr-print-sheet { display: block; page: qrcard; }
  body.printing-qr #qr-print-sheet img { display: block; width: 105mm; height: 148mm; }
}

/* Menu dish modifiers: what else on the plate the wine must suit (chilli, a sauce). */
.dish-mods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dish-mod {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.72rem; color: var(--muted);
  background: rgba(139,26,46,0.06); border-radius: 10px; padding: 1px 4px 1px 8px;
}
.dish-mod-x {
  border: none; background: none; cursor: pointer; color: inherit;
  font-size: 0.9rem; line-height: 1; padding: 0 3px;
}
.dish-mod-x:hover { color: var(--wine); }

/* ── House wines (migration 20240324) ── */
.badge-house { background: rgba(139,26,46,0.08); color: var(--wine); }
/* A profile the enrichment itself called low-confidence: worth a sommelier's look. */
.badge-lowconf { background: rgba(139,26,46,0.05); color: var(--wine); border: 1px dashed rgba(139,26,46,0.35); }
.house-field .field-hint { display: block; margin: 8px 0; text-transform: none; letter-spacing: normal; font-size: 0.8rem; }
.house-field #tech-sheet-btn {
  display: inline-block; margin: 0; text-transform: none; letter-spacing: normal;
  font-size: 0.78rem; font-weight: 500;
}
.house-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.house-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--white, #fff);
}
.house-info { min-width: 0; }
.house-upload { flex-shrink: 0; cursor: pointer; white-space: nowrap; }
.house-upload.disabled { opacity: 0.5; pointer-events: none; }
.house-status { margin-top: 6px; font-size: 0.8rem; line-height: 1.4; }
.house-status--busy { color: var(--muted); }
.house-status--ok   { color: #2E7D32; }
.house-status--warn { color: #B26A00; }
.house-status--err  { color: #B3261E; }
@media (max-width: 520px) {
  .house-row { flex-direction: column; align-items: stretch; }
}