.app-main { max-width: 1080px; min-width: 0; margin: 0 auto; padding: 28px 20px 60px; }
  /* folder tabs */
  .tabs {
    display: flex; gap: 6px; margin: 20px 0 0; padding: 0 8px;
    position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .tabs button {
    flex: 0 0 auto; min-height: 44px;
    background: var(--paper-deep); border: 1.5px solid var(--line); border-bottom: none;
    border-radius: 9px 9px 0 0; font-family: var(--font); font-size: 0.93rem; font-weight: 700;
    color: var(--ink-soft); padding: 9px 18px 11px; cursor: pointer; margin-bottom: -1.5px;
    white-space: nowrap;
  }
  .tabs button:hover { background: #f4eddf; color: var(--ink); }
  .tabs button.active { background: var(--surface); color: var(--brand-dark); border-color: var(--line); padding-bottom: 12px; }
  .panel {
    min-width: 0; background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  }
  #tab-panel > .panel:first-child, #tab-panel > .panel:only-child { border-top-left-radius: 0; }
  .row-list { width: 100%; border-collapse: collapse; }
  .row-list th, .row-list td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 0.93rem; vertical-align: top; }
  .row-list th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .row-actions { display: flex; justify-content: flex-end; gap: 4px; white-space: nowrap; }
  .chip {
    display: inline-block; margin: 1px 3px 1px 0; padding: 2px 9px;
    border-radius: 100px; font-size: 0.74rem; font-weight: 600;
    line-height: 1.35; vertical-align: middle; white-space: nowrap;
  }
  .chip.c1 { background: #f6d7d1; color: var(--danger); }
  .chip.c2 { background: #fdeed3; color: var(--accent-dark); }
  .form-grid { display: grid; gap: 14px; margin-top: 14px; }
  .form-grid label { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
  .form-grid input[type="text"], .form-grid input[type="email"], .form-grid input[type="number"], .form-grid select, .form-grid textarea {
    min-height: 42px; font-family: var(--font); font-size: 0.95rem; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%; max-width: 440px;
  }
  .form-grid textarea { min-height: 180px; max-width: 760px; resize: vertical; line-height: 1.45; }
  .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--brand); outline: 3px solid rgba(45, 92, 64, 0.18); }
  .ingredient-kind-options { display: grid; gap: 8px; max-width: 760px; }
  .ingredient-kind-options label {
    display: flex; align-items: flex-start; gap: 9px; min-height: 46px; margin: 0; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
    font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer;
  }
  .ingredient-kind-options input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; }
  .ingredient-kind-options small { display: block; margin-top: 2px; color: var(--ink-soft); font-weight: 400; }
  .ingredient-editor .form-grid, .ingredient-editor .form-actions { width: 100%; max-width: 760px; }
  .ingredient-editor .form-grid > *, .ingredient-editor fieldset { min-width: 0; box-sizing: border-box; }
  .ingredient-editor fieldset { width: 100%; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
  .ingredient-editor .form-grid input[type="text"], .ingredient-editor .form-grid textarea,
  .ingredient-editor .ingredient-kind-options, .ingredient-editor .guidance-box,
  .ingredient-editor .declaration-counter, .ingredient-editor .declaration-preview,
  .ingredient-editor .emphasis-grid { width: 100%; max-width: none; }
  .declaration-counter { max-width: 760px; margin-top: 5px; text-align: right; font-size: .76rem; color: var(--ink-soft); }
  .declaration-preview { max-width: 760px; padding: 12px 14px; border: 1px solid #b8cbbd; border-radius: 8px; background: var(--brand-tint); line-height: 1.5; overflow-wrap: anywhere; }
  .emphasis-grid { display: grid; gap: 10px; max-width: 760px; }
  .emphasis-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #faf6ec; }
  .emphasis-row input { max-width: 100% !important; }
  .suggestion-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
  .suggestion-row .muted { line-height: 1.3; }
  .suggestion-row button { min-height: 30px; padding: 4px 9px; border: 1px solid var(--brand); border-radius: 100px; background: #fff; color: var(--brand-dark); cursor: pointer; }
  .review-badge {
    display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 100px;
    background: #fdeed3; color: var(--accent-dark); font-size: .72rem; font-weight: 800;
    line-height: 1.35; vertical-align: middle; white-space: nowrap;
  }
  .declaration-cell { min-width: 260px; max-width: 440px; overflow-wrap: anywhere; }
  .declaration-cell details summary { color: var(--brand-dark); cursor: pointer; font-weight: 700; }
  .field-error { margin: 5px 0 0; color: var(--danger); font-size: .8rem; font-weight: 700; }
  .al-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .al-picker button {
    min-height: 42px; font-family: var(--font); font-size: 0.85rem; padding: 8px 10px; text-align: left;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; color: var(--ink);
  }
  .al-picker button:hover { border-color: var(--brand); background: var(--brand-tint); }
  .al-picker button.s1 { background: #f6d7d1; border-color: var(--danger); }
  .al-picker button.s2 { background: #fdeed3; border-color: var(--accent-dark); }
  .btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
  .control-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
  .control-row select, .control-row input { min-height: 42px; }
  .control-row .btn.small { min-height: 42px; }
  .control-grow { flex: 1 1 240px; min-width: 0; }
  .section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin: 0 0 14px;
  }
  .section-head h3 { margin: 0; }
  .muted { color: var(--ink-soft); font-size: 0.9rem; }
  .error-box, .ok-box {
    border: 1px solid currentColor; border-radius: 9px;
    padding: 11px 14px; margin: 10px 0; font-size: 0.92rem; text-align: left;
  }
  .error-box { background: #fbe9e5; color: var(--danger); }
  .ok-box { background: var(--brand-tint); color: var(--brand-dark); }
  .menu-stale-alert {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin: 0 0 14px;
  }
  .menu-stale-alert .btn { flex: 0 0 auto; }
  .guidance-box {
    max-width: 760px; padding: 11px 14px; border: 1px solid #d5b46f;
    border-radius: 9px; background: #fff7e3; color: var(--ink); font-size: .9rem;
  }
  .guidance-box strong { display: block; margin-bottom: 3px; color: var(--accent-dark); }
  .guidance-box .btn { margin-top: 10px; }
  .precautionary-note {
    width: 100%; max-width: 760px; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: 9px; background: #f7f4ec; color: var(--ink); font-size: .9rem;
  }
  .precautionary-note strong { display: block; margin-bottom: 3px; color: var(--brand-dark); }
  .recipe-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.93rem; }
  .recipe-row > span { flex: 1 1 240px; min-width: 0; }
  .recipe-row-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
  .recipe-row-actions button {
    min-width: 36px; height: 36px; flex: 0 0 auto; padding: 0 9px; border: none; border-radius: 7px;
    background: transparent; cursor: pointer; color: var(--brand-dark); font: inherit; font-weight: 700;
  }
  .recipe-row-actions button:hover { background: var(--brand-tint); }
  .recipe-row-actions button.danger { color: var(--danger); }
  .recipe-row-actions button.danger:hover { background: #fbe9e5; }
  .recipe-row-actions button:disabled { color: #9b968c; background: transparent; cursor: not-allowed; opacity: .55; }
  .recipe-replace-mode {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 10px 0 4px; padding: 9px 11px; border: 1px solid #b8cbbd; border-radius: 8px;
    background: var(--brand-tint); color: var(--brand-dark); font-size: .86rem;
  }
  .recipe-picker { position: relative; flex: 1 1 280px; min-width: min(100%, 240px); }
  .recipe-picker input { width: 100%; }
  .recipe-picker-results {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 260px; overflow-y: auto; margin: 0; padding: 5px;
    list-style: none; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); box-shadow: 0 10px 24px rgba(39, 48, 31, .14);
  }
  .recipe-picker-results[hidden] { display: none; }
  .recipe-picker-results [role="option"] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  }
  .recipe-picker-results [role="option"]:hover,
  .recipe-picker-results [role="option"].active { background: var(--brand-tint); }
  .recipe-picker-results [role="option"][aria-disabled="true"] {
    color: var(--ink-soft); cursor: not-allowed; background: #f6f1e7;
  }
  .recipe-picker-results small { flex: 0 0 auto; font-size: .72rem; font-weight: 700; }
  .recipe-picker-empty { padding: 9px 10px; color: var(--ink-soft); font-size: .86rem; }
  .recipe-picker-results .recipe-add-new {
    display: block; width: 100%; min-height: 42px; margin-top: 4px; padding: 8px 10px;
    border: 1px dashed var(--brand); border-radius: 7px; background: var(--brand-tint);
    color: var(--brand-dark); font: inherit; font-weight: 800; text-align: left; cursor: pointer;
  }
  .recipe-picker-results .recipe-add-new:hover { background: #e1eee4; }
  .draft-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 14px 0 0; padding: 10px 13px; border: 1px solid #b8cbbd;
    border-radius: 9px; background: var(--brand-tint); color: var(--brand-dark); font-size: .86rem;
  }
  .draft-notice .btn { flex: 0 0 auto; }
  .label-date-card { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #faf6ec; }
  .label-date-options { display: flex; flex-wrap: wrap; gap: 7px; }
  .label-date-options label {
    display: flex; align-items: center; gap: 6px; min-height: 38px; margin: 0;
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
    background: #fff; color: var(--ink); font-size: .82rem; font-weight: 700;
    text-transform: none; letter-spacing: normal; cursor: pointer;
  }
  .label-date-options input { width: 17px; height: 17px; margin: 0; }
  .label-date-custom { margin-top: 9px; }
  .label-date-custom[hidden] { display: none; }
  .label-include-option, .label-small-pack {
    display: flex !important; align-items: flex-start; gap: 7px; margin-top: 9px !important;
    color: var(--ink) !important; font-size: .82rem !important; font-weight: 700 !important;
    text-transform: none !important; letter-spacing: normal !important;
  }
  .label-include-option input, .label-small-pack input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; }
  .label-layout-card { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #faf6ec; }
  .label-fit-actions { display: grid; gap: 7px; margin-top: 10px; text-align: left; }
  .label-fit-actions:empty { display: none; }
  .label-fit-actions h5 { margin: 0 0 2px; font-size: .8rem; color: var(--ink-soft); }
  .label-fit-action {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  }
  .label-fit-action strong { display: block; font-size: .82rem; color: var(--brand-dark); }
  .label-fit-action small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .72rem; line-height: 1.3; }
  .label-fit-action .btn { flex: 0 0 auto; }
  .field-help { margin: 5px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.4; }
  /* Quiet disclosure for a legal caveat: present when wanted, silent otherwise.
     The popover is a child of .info-wrap, so travelling from icon to note never
     leaves the hover target; .info-pop's padding bridges the visible gap. */
  .info-wrap { position: relative; display: inline-block; vertical-align: middle; }
  .info-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin-left: 1px; padding: 0; vertical-align: middle;
    border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer;
  }
  .info-dot:hover, .info-dot[aria-expanded="true"] { color: var(--ink); background: var(--brand-tint); }
  .info-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .info-pop { position: absolute; left: 100%; top: 50%; z-index: 40; padding-left: 9px; transform: translateY(-50%); }
  .info-pop[hidden] { display: none; }
  .info-pop-inner {
    display: block; width: min(272px, calc(100vw - 40px)); padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    box-shadow: var(--shadow); color: var(--ink-soft); font-size: .75rem; line-height: 1.45;
  }
  .info-pop-inner a { color: var(--brand); }
  /* Narrow layouts are tap-only and have no room for an overlay: anchoring a
     fixed-width panel to a small inline icon puts it off-screen whenever the
     sentence wraps and the icon lands near the left edge. Below 840px the note
     expands in flow instead, where it cannot leave the viewport. */
  @media (max-width: 840px) {
    .field-help { position: relative; }
    .info-wrap { position: static; }
    .info-pop { left: 0; right: 0; top: 100%; width: auto; padding: 7px 0 0; transform: none; }
    .info-pop-inner { width: auto; }
  }
  .center-card { width: min(100%, 440px); margin: 60px auto; text-align: center; }
  .center-card.wide { width: min(100%, 540px); }
  .trial-entry { width: min(100%, 660px); text-align: left; padding: 30px; }
  .trial-entry-head { text-align: center; max-width: 560px; margin: 0 auto; }
  .trial-entry-head h1 { margin: 10px 0 8px; font-size: clamp(1.7rem, 4vw, 2.35rem); }
  .trial-audience-note { margin: 10px auto 0; max-width: 500px; color: var(--ink-soft); font-size: .82rem; }
  .trial-stamp {
    display: inline-block; padding: 4px 12px; border: 1.5px solid var(--accent-dark);
    border-radius: 100px; color: var(--accent-dark); background: #fff8e8;
    font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .trial-benefits {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px; margin: 22px 0;
  }
  .trial-benefit {
    min-width: 0; padding: 12px; border: 1px solid var(--line);
    border-radius: 9px; background: #faf6ec; font-size: 0.84rem; line-height: 1.4;
  }
  .trial-benefit strong { display: block; color: var(--brand-dark); margin-bottom: 2px; }
  .trial-login-panel {
    max-width: 440px; margin: 0 auto; padding-top: 3px; text-align: left;
  }
  .trial-login-panel label {
    display: block; margin-bottom: 6px; color: var(--ink);
    font-size: 0.86rem; font-weight: 700;
  }
  .trial-login-panel input[type="email"] {
    display: block; width: 100%; max-width: none; min-height: 48px;
    box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface); color: var(--ink);
    font-family: var(--font); font-size: 1rem;
  }
  .trial-login-panel input[type="email"]:focus {
    border-color: var(--registration);
  }
  .trial-login-panel .btn { width: 100%; }
  .trial-login-panel .btn-row { margin-top: 10px; }
  .trial-reassurance {
    margin: 10px 0 0; color: var(--ink-soft); text-align: center;
    font-size: 0.78rem; line-height: 1.45;
  }
  .trial-reassurance a { white-space: nowrap; }
  .login-sent { max-width: 500px; margin: 0 auto; text-align: center; }
  .login-sent .ok-mark {
    display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark);
    font-size: 1.5rem; font-weight: 900;
  }
  .login-sent .btn-row { justify-content: center; }
  .trial-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    background: #f7e8c8; border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 12px 16px; margin: 18px 0 0; font-size: 0.93rem; }
  .cancel-bar { background: #f2ede2; }
  .complimentary-bar { background: #e6f1e9; border-color: #aac4b1; }
  .complimentary-bar small { display: block; margin-top: 3px; color: var(--ink-soft); }
  .activation-guide {
    margin: 18px 0 4px; padding: 18px; border: 1.5px solid #b7c7ba;
    border-radius: var(--radius); background: #f2f7f3; box-shadow: 0 6px 18px rgba(29, 68, 45, .06);
  }
  .activation-guide-head {
    display: flex; align-items: start; justify-content: space-between; gap: 16px;
    margin-bottom: 13px;
  }
  .activation-guide-head h2 { margin: 0 0 3px; font-size: 1.25rem; }
  .activation-guide-head p { margin: 0; }
  .activation-progress { flex: 0 0 auto; color: var(--brand-dark); font-size: .83rem; font-weight: 800; }
  .activation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .activation-step {
    display: flex; flex-direction: column; min-width: 0; min-height: 145px;
    padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  }
  .activation-step.done { background: #e6f1e9; border-color: #aac4b1; }
  .activation-step-number {
    display: inline-grid; place-items: center; width: 25px; height: 25px; margin-bottom: 7px;
    border-radius: 50%; background: var(--paper-deep); color: var(--brand-dark); font-size: .78rem; font-weight: 900;
  }
  .activation-step.done .activation-step-number { background: var(--action); color: #fff; }
  .activation-step strong { display: block; margin-bottom: 3px; }
  .activation-step p { flex: 1; margin: 0 0 10px; color: var(--ink-soft); font-size: .8rem; line-height: 1.4; }
  .activation-step .btn { width: 100%; min-height: 38px; }
  .account-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--line); margin-top: 26px; padding-top: 12px;
    font-size: 0.82rem; color: var(--ink-soft); }
  .test-env-banner { background: #291d13; color: #fff7df; text-align: center; padding: 8px 16px;
    font-weight: 800; letter-spacing: 0.04em; font-size: 0.82rem; }
  .linklike { border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit;
    color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; border: none; border-radius: 7px; background: none;
    cursor: pointer; color: var(--brand); font-weight: 700; font-size: 0.88rem;
    padding: 6px 8px; font-family: var(--font);
  }
  .icon-btn:hover { background: var(--brand-tint); }
  .icon-btn.danger { color: var(--danger); }
  .icon-btn.danger:hover { background: #fbe9e5; }
  .account-email {
    display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
  }
  .empty-state {
    padding: 26px 20px; border: 1px dashed #b9ad8e; border-radius: 10px;
    background: #faf6ec; text-align: center;
  }
  .empty-state strong { display: block; margin-bottom: 4px; color: var(--ink); }
  .empty-state p { max-width: 560px; margin: 0 auto; }
  .check-list { margin: 0; padding: 0; border: 0; }
  .check-list legend {
    margin-bottom: 8px; font-size: 0.78rem; font-weight: 600;
    color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .check-option {
    display: flex; align-items: center; gap: 8px; min-height: 40px;
    margin: 2px 0; padding: 6px 8px; border-radius: 7px;
    color: var(--ink); cursor: pointer;
  }
  .check-option:hover { background: var(--brand-tint); }
  .check-option input { width: 18px; height: 18px; margin: 0; }
  .product-output-options { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .output-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
  .output-badge {
    display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 25px; padding: 2px 7px;
    border: 1px solid #b7c8bd; border-radius: 999px; background: var(--brand-tint);
    color: var(--brand-dark); font-size: .72rem; font-weight: 800; white-space: nowrap;
  }
  .output-badge.off { border-color: var(--line); background: #f4f0e6; color: var(--ink-soft); }
  .label-format-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .label-format-options label {
    display: flex; align-items: center; gap: 7px; min-height: 42px;
    padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink); font-size: .88rem; font-weight: 700;
    text-transform: none; letter-spacing: normal; cursor: pointer;
  }
  .label-format-options input { width: 18px; height: 18px; margin: 0; }
  .label-custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
  .label-custom-grid[hidden], #lbl-thermal-controls[hidden], #lbl-a4-controls[hidden], #lbl-rotate-row[hidden] { display: none !important; }
  .label-custom-grid input { max-width: none !important; }
  .label-product-option {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) 88px;
    align-items: center; gap: 9px; min-height: 48px; padding: 6px 8px;
    border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer;
  }
  .label-product-option:last-child { border-bottom: 0; }
  .label-product-option > input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
  .label-product-option label { margin: 0; color: var(--ink); font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; }
  .label-product-option input[type="number"] { width: 88px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
  .label-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 18px; align-items: start; margin-top: 18px; }
  .label-preview-grid > * { min-width: 0; }
  .label-preview-card { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #faf6ec; }
  .label-preview-card h4 { margin: 0 0 10px; }
  .label-preview-stage { min-height: 210px; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; background: #e8eee9; border-radius: 8px; }
  .label-preview-stage .ak-label { flex: 0 0 auto; border: 1px solid #777; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
  .label-fit-status { margin: 10px 0 0; color: var(--brand-dark); font-size: .82rem; line-height: 1.4; }
  .label-fit-status.error { color: var(--danger); font-weight: 700; }
  .loading-state { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
  .spinner {
    width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid var(--line);
    border-top-color: var(--brand); border-radius: 50%; animation: spin 700ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .pro-badge {
    background: var(--accent); border: 1.5px solid var(--ink); border-radius: 6px;
    padding: 0 7px 1px; font-weight: 800; font-size: 0.68rem;
    letter-spacing: 0.08em; margin-left: 6px; transform: rotate(2deg);
    display: inline-block; font-family: var(--font);
  }

  @media (max-width: 700px) {
    .account-email { display: none; }
    .app-main { padding-top: 18px; }
    .tabs { margin-top: 16px; padding: 0 2px; }
    #tab-panel > .panel:first-child, #tab-panel > .panel:only-child { border-top-left-radius: var(--radius); }
    .table-scroll { overflow: visible; }
    .row-list, .row-list tbody, .row-list tr, .row-list td { display: block; width: 100%; }
    .row-list thead {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .row-list tr { padding: 11px 0; border-bottom: 1px solid var(--line); }
    .row-list tbody tr:first-child { padding-top: 0; }
    .row-list tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
    .row-list td { padding: 3px 0; border: 0; }
    .row-actions { justify-content: flex-start; margin-top: 3px; }
    .activation-steps { grid-template-columns: 1fr; }
    .activation-step.done { display: none; }
    .activation-step { min-height: 0; }
    .label-preview-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .site-header .wrap { height: 58px; padding: 0 12px; gap: 8px; }
    .site-header .logo { gap: 6px; font-size: 1.04rem; white-space: nowrap; }
    .site-header .logo svg { width: 24px; height: 24px; }
    .pro-badge { margin-left: 2px; padding-inline: 5px; font-size: 0.6rem; }
    .nav { gap: 2px; }
    .icon-btn { padding-inline: 7px; }
    .app-main { padding: 16px 12px 42px; }
    .panel { padding: 17px; }
    .tabs button { padding-inline: 14px; }
    .section-head { align-items: flex-start; }
    .section-head .btn { width: 100%; }
    .form-grid input[type="text"], .form-grid input[type="email"], .form-grid input[type="number"], .form-grid select { max-width: none; }
    .form-actions .btn { flex: 1 1 130px; padding-inline: 16px; white-space: nowrap; }
    .export-actions .btn { width: 100%; }
    .trial-bar .btn { width: 100%; }
    .menu-stale-alert { align-items: flex-start; flex-direction: column; }
    .menu-stale-alert .btn { width: 100%; }
    .center-card { margin: 28px auto; }
    .trial-entry { padding: 22px 17px; }
    .trial-benefits { grid-template-columns: 1fr; gap: 7px; margin: 18px 0; }
    .trial-benefit { padding: 10px 11px; }
  }

  /* ---- Proofing Room — slim approval slice ---- */
  :root {
    --paper: #ecefe9;
    --paper-deep: #dfe3dc;
    --surface: #fbfaf6;
    --ink: #17211c;
    --ink-soft: #53605a;
    --brand: #273b31;
    --brand-dark: #17211c;
    --brand-tint: #dde7dc;
    --accent: #e7c85a;
    --accent-dark: #765c00;
    --danger: #a64030;
    --line: #c8cec7;
    --radius: 12px;
    --shadow: 0 14px 34px -26px rgba(23, 33, 28, .42);
    --shadow-hard: none;
    --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --registration: #bd4b38;
    --clearance: #dbe8d9;
    --proof-ground: #d6dbd4;
    /* Primary actions and the navigation rail carry the AllergenKit logo green,
       so the workspace and the public site read as one product. --ink stays the
       text and structure colour; it is not an action surface. */
    --action: #2d5c40;
    --action-hover: #376f4e;
    --action-edge: #1f4530;
  }
  html { font-size: 100%; background: var(--paper); }
  body {
    background: var(--paper);
    background-image: none;
    line-height: 1.5;
    font-feature-settings: "tnum" 1, "ss01" 1;
  }
  ::selection { background: #e7c85a; color: #17211c; }
  * { scrollbar-width: thin; scrollbar-color: #8e9992 transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: #8e9992; border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; }
  input, textarea { caret-color: var(--registration); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--registration); }
  h1, h2, h3, h4 { letter-spacing: -.025em; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #fbfaf6;
    border-bottom: 1px solid #b9c0ba;
    box-shadow: 0 5px 18px -18px rgba(23, 33, 28, .8);
  }
  .site-header .wrap { max-width: none; height: 64px; padding: 0 28px; }
  .site-header .logo { gap: 9px; font-family: var(--font); font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
  .site-header .logo svg { width: 26px; height: 26px; transform: none; }
  .pro-badge {
    margin-left: 2px;
    padding: 2px 6px;
    border: 1px solid var(--ink);
    border-radius: 4px;
    background: var(--accent);
    font-family: var(--font);
    font-size: .61rem;
    line-height: 1.2;
    transform: none;
  }
  .nav { gap: 6px; }
  .account-email { color: var(--ink-soft); font-size: .78rem; }
  .icon-btn {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: .8rem;
    font-weight: 700;
  }
  .icon-btn:hover { background: var(--paper-deep); color: var(--ink); }

  .app-main { max-width: none; margin: 0; padding: 0; }
  .app-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 64px); }
  .app-rail {
    position: sticky;
    top: 64px;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - 64px);
    padding: 25px 14px 18px;
    overflow: hidden;
    background: var(--action);
    color: #f3f2ec;
    border-right: 1px solid var(--action-edge);
  }
  .rail-title { margin: 0 12px 14px; color: #c9d4cc; font-size: .75rem; font-weight: 750; }
  .tabs {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    overflow-y: auto;
  }
  .tabs button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #c6d1c9;
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 650;
    text-align: left;
  }
  .tabs button:hover { background: rgba(255,255,255,.07); color: #fff; }
  .tabs button.active {
    padding-bottom: 10px;
    background: linear-gradient(225deg, transparent 0 6.36px, #f3f2ec 6.36px);
    color: var(--ink);
  }
  .tool-icon { flex: 0 0 auto; }
  .rail-assurance {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 12px;
    color: #c6d1c9;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: .75rem;
    font-weight: 650;
  }
  .rail-assurance svg { color: #99bd98; flex: 0 0 auto; }
  .app-workspace { min-width: 0; padding: 31px clamp(20px, 3.3vw, 52px) 64px; }
  .workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: min(100%, 1480px);
    margin: 0 auto 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #c3c9c2;
  }
  .workspace-header h1 { margin: 0 0 6px; font-size: clamp(1.65rem, 2.2vw, 2.3rem); font-weight: 780; }
  .workspace-header p { max-width: 68ch; margin: 0; color: var(--ink-soft); font-size: .91rem; }
  .workspace-mode {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: #36543e;
    background: var(--clearance);
    border: 1px solid #adbfad;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 750;
  }
  .workspace-notices, #tab-panel { width: min(100%, 1480px); margin-inline: auto; }
  .workspace-notices:empty { display: none; }
  .panel {
    padding: 22px;
    background: var(--surface);
    border: 1px solid #c3c9c2;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  #tab-panel > .panel:first-child, #tab-panel > .panel:only-child { border-top-left-radius: var(--radius); }
  .panel + .panel { margin-top: 16px; }
  .section-head { margin-bottom: 18px; }
  .section-head h3 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 760; }
  .section-head p { margin: 0; }
  .muted { color: var(--ink-soft); }

  .btn {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--action);
    border-radius: 7px;
    background: var(--action);
    color: #f8f7f2;
    box-shadow: 0 7px 15px -12px rgba(23, 33, 28, .8);
    font-size: .86rem;
    font-weight: 720;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  .btn:hover { transform: none; background: var(--action-hover); box-shadow: 0 10px 18px -12px rgba(23, 33, 28, .85); }
  .btn:active { transform: none; box-shadow: none; }
  .btn:disabled, .btn[aria-disabled="true"] { box-shadow: none; opacity: .42; }
  .btn.secondary { border-color: #aeb6af; background: #fbfaf6; color: var(--ink); box-shadow: none; }
  .btn.secondary:hover { border-color: #78847c; background: #edf0eb; }
  .btn.accent { background: var(--accent); color: var(--ink); }
  .btn.small { min-height: 36px; padding: 7px 11px; border-width: 1px; box-shadow: none; font-size: .78rem; }
  .btn.small:hover { transform: none; box-shadow: none; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
  summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--registration);
    outline-offset: 2px;
  }
  /* Registration red measures 1.56:1 against the green rail and fails WCAG
     1.4.11. Butter clears it at 4.71:1. Rail only; red still owns focus
     everywhere the background is chalk or white. */
  .app-rail a:focus-visible, .app-rail button:focus-visible, .app-rail [tabindex]:focus-visible {
    outline-color: var(--accent);
  }
  .form-grid { gap: 15px; }
  .form-grid label, .check-list legend { color: #4f5b54; font-size: .7rem; font-weight: 720; letter-spacing: .025em; }
  .form-grid input[type="text"], .form-grid input[type="email"], .form-grid input[type="number"], .form-grid select, .form-grid textarea,
  .label-product-option input[type="number"] {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #adb5ae;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(23,33,28,.03);
  }
  .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--registration); }

  .trial-bar, .cancel-bar, .complimentary-bar, .draft-notice, .menu-stale-alert {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
    font-size: .78rem;
  }
  .activation-guide {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 0 0 14px;
    padding: 11px 12px;
    border: 1px solid #bac3bb;
    border-radius: 8px;
    background: #f5f6f2;
    box-shadow: none;
  }
  .activation-guide-head { display: block; margin: 0; padding-right: 13px; border-right: 1px solid #cbd0ca; }
  .activation-guide-head h2 { margin: 0 0 3px; font-size: .78rem; font-weight: 760; }
  .activation-progress { color: var(--ink-soft); font-size: .72rem; font-weight: 650; }
  .activation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .activation-step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 46px;
    padding: 7px 8px;
    border: 1px solid #c9d0c9;
    border-radius: 6px;
    background: #fff;
  }
  .activation-step.done { background: #e9f0e7; border-color: #b9cbb7; }
  .activation-step-number { width: 24px; height: 24px; margin: 0; border-radius: 5px; background: #e1e5df; font-size: .67rem; }
  .activation-step.done .activation-step-number { background: var(--action); }
  .activation-step-copy { min-width: 0; }
  .activation-step-copy strong { display: block; margin: 0; font-size: .72rem; line-height: 1.2; }
  .activation-step-copy small { display: none; }
  .activation-step-state { color: #36543e; font-size: .72rem; font-weight: 720; }
  .activation-step .btn { width: auto; min-height: 32px; padding: 5px 8px; font-size: .72rem; }

  .label-workspace { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .label-workspace > .error-box { margin: 0 0 14px; }
  .label-workspace-grid { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(480px, 1.22fr); gap: 18px; align-items: start; }
  .label-run, .label-proof-card { min-width: 0; border: 1px solid #bec5be; border-radius: 12px; }
  .label-run { padding: 20px; background: var(--surface); }
  .label-run-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 17px; }
  .label-run-head h3 { margin: 0 0 4px; font-size: 1.1rem; }
  .label-run-head p { margin: 0; }
  .label-products { margin: 0; padding: 0; border: 0; }
  .label-products legend { margin-bottom: 8px; }
  .label-product-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 66px;
    gap: 10px;
    min-height: 53px;
    padding: 7px 2px;
    border-bottom: 1px solid #d9ddd7;
  }
  .label-product-option label { display: grid; align-content: center; gap: 2px; min-width: 0; font-size: .83rem; }
  .label-product-option label > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .label-product-option .review-badge { justify-self: start; margin: 0; }
  .quantity-field { display: flex; align-items: center; }
  .label-product-option input[type="number"] { width: 66px; min-height: 36px; font-size: .8rem; text-align: center; }
  .label-tool-drawer { margin-top: 10px; border: 1px solid #c8cec7; border-radius: 8px; background: #f8f8f4; }
  .label-tool-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 12px;
    list-style: none;
    cursor: pointer;
  }
  .label-tool-drawer summary::-webkit-details-marker { display: none; }
  .label-tool-drawer summary strong { display: block; font-size: .79rem; }
  .label-tool-drawer summary small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .72rem; }
  .label-tool-drawer summary svg { transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
  .label-tool-drawer[open] summary svg { transform: rotate(180deg); }
  .label-tool-body { margin: 0; padding: 14px 12px 13px; border-top: 1px solid #d2d7d1; }
  .label-tool-body input, .label-tool-body select { max-width: none !important; }
  .label-date-card, .label-layout-card { padding: 11px; border-radius: 7px; background: #fff; }
  .label-date-options { gap: 5px; }
  .label-date-options label, .label-format-options label { min-height: 36px; padding: 6px 8px; border-radius: 6px; font-size: .73rem; }
  .label-include-option, .label-small-pack { font-size: .72rem !important; }

  .label-proof-card {
    position: sticky;
    top: 82px;
    padding: 20px;
    background: var(--proof-ground);
    box-shadow: 0 18px 38px -30px rgba(23,33,28,.65);
  }
  .label-proof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
  .label-proof-head h3 { margin: 0 0 3px; font-size: 1.08rem; }
  .label-proof-head p { margin: 0; color: #4f5b54; font-size: .75rem; }
  .proof-mark {
    padding: 4px 7px;
    color: #873628;
    border: 1px solid #a84332;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
  }
  .label-preview-stage {
    position: relative;
    min-height: 330px;
    padding: 22px;
    overflow: hidden;
    background: #c7cec7;
    border: 1px solid #aeb7af;
    border-radius: 8px;
  }
  .label-preview-stage::before, .label-preview-stage::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--registration);
    pointer-events: none;
  }
  .label-preview-stage::before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
  .label-preview-stage::after { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
  /* .label-proof-frame and .label-proof-scale are shared geometry in label-print.css. */
  .label-preview-stage .ak-label { z-index: 1; border: 0; box-shadow: 0 16px 30px -20px rgba(20,28,23,.65), 0 2px 3px rgba(20,28,23,.1); animation: proof-register 240ms cubic-bezier(.2,.8,.2,1); transform-origin: center; }
  @keyframes proof-register {
    from { opacity: .55; transform: translateY(5px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .fit-verdict { margin-top: 11px; padding: 11px 12px; border: 1px solid #afbbb0; border-radius: 8px; background: rgba(251,250,246,.72); }
  .label-fit-status { margin: 0; color: #2f5c3b; font-size: .77rem; font-weight: 680; }
  .label-fit-status::before { content: "FIT"; display: inline-block; margin-right: 8px; color: #2f5c3b; font-size: .57rem; font-weight: 800; letter-spacing: .06em; }
  .label-fit-status.error { color: var(--danger); }
  .label-fit-status.error::before { content: "HOLD"; color: var(--danger); }
  .label-fit-actions { gap: 6px; }
  .label-fit-action { padding: 8px 9px; border-radius: 6px; background: #fbfaf6; }
  .label-proof-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; margin-top: 14px; }
  .label-proof-actions .muted { margin: 0; font-size: .75rem; line-height: 1.45; }
  .label-proof-actions .btn-row { justify-content: flex-end; margin: 0; }
  .label-proof-actions .btn:not(.secondary) { border-color: #8f3729; background: var(--registration); }
  .label-proof-actions .btn:not(.secondary):hover { background: #a63f2f; }
  .mandatory-note { margin: 6px 0 0; color: #3f4b44; font-size: .72rem; line-height: 1.4; }
  .disclaimer { margin-top: 13px; padding-top: 11px; border-top: 1px solid #b7beb7; color: #4e5953; font-size: .72rem; }

  .matrix-panel { padding: 20px; overflow: hidden; }
  .matrix-legend { display: flex; flex-wrap: wrap; gap: 15px; margin: -3px 0 14px; color: var(--ink-soft); font-size: .74rem; }
  .matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .matrix-key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #fff; border: 1px solid #c2c9c2; font-style: normal; font-size: .62rem; font-weight: 800; }
  .matrix-key.contains { background: #efd6d0; color: #873628; border-color: #d3a49a; }
  .matrix-key.may { background: #f5e9ba; color: #6c5700; border-color: #d8c570; }
  .matrix-scroll { max-height: calc(100vh - 245px); overflow: auto; border: 1px solid #adb6ae; border-radius: 8px; background: #fff; box-shadow: none; contain: none; }
  .matrix-scroll:focus-visible { outline-offset: -1px; }
  table.matrix { width: max-content; min-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  table.matrix th, table.matrix td { box-sizing: border-box; border: 0; border-right: 1px solid #d3d8d2; border-bottom: 1px solid #d3d8d2; }
  table.matrix thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    width: 58px;
    min-width: 58px;
    height: 48px;
    padding: 7px 3px;
    background: var(--action);
    color: #f4f3ed;
    font-size: .67rem;
    font-weight: 680;
    line-height: 1.05;
    vertical-align: middle;
  }
  table.matrix thead th abbr { text-decoration: none; cursor: help; }
  table.matrix thead th.item-col {
    left: 0;
    z-index: 5;
    width: 230px;
    min-width: 230px;
    padding: 9px 12px;
    font-family: var(--font);
    font-size: .72rem;
  }
  table.matrix tbody tr { height: 52px; }
  table.matrix th.item-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 230px;
    min-width: 230px;
    padding: 9px 12px;
    background: #fbfaf6;
    color: var(--ink);
    font-size: .75rem;
    font-weight: 680;
    text-align: left;
  }
  table.matrix td.al-cell { width: 58px; min-width: 58px; height: 52px; padding: 0; background: #fff; }
  table.matrix td.al-cell span { display: grid; place-items: center; width: 100%; height: 100%; color: #67726b; font-size: .72rem; font-weight: 760; }
  table.matrix td.al-cell.state-yes { background: #efd6d0; }
  table.matrix td.al-cell.state-yes span { color: #873628; }
  table.matrix td.al-cell.state-may { background: #f5e9ba; }
  table.matrix td.al-cell.state-may span { color: #6c5700; }
  .matrix-withheld { padding: 9px 12px; }

  .ingredient-library { padding: 20px; }
  .ingredient-editor + .ingredient-library,
  .product-editor + .product-library { display: none; }
  .ingredient-table { table-layout: fixed; }
  .ingredient-table th { padding: 8px 10px; color: #68736c; font-size: .72rem; letter-spacing: .02em; }
  .ingredient-table th:first-child { width: 54%; }
  .ingredient-table th:nth-child(2) { width: auto; }
  .ingredient-table th:last-child { width: 54px; }
  .ingredient-table td { height: 70px; padding: 10px; vertical-align: middle; }
  .ingredient-primary { min-width: 0; }
  .ingredient-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .ingredient-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
  .ingredient-primary > p { margin: 4px 0 0; overflow: hidden; color: var(--ink-soft); font-size: .74rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .ingredient-review-state { flex: 0 0 auto; padding: 2px 5px; border-radius: 4px; font-size: .57rem; font-weight: 760; }
  .ingredient-review-state.ready { color: #31533a; background: #dfebde; }
  .ingredient-review-state.attention { color: #735900; background: #f3e8b7; }
  .ingredient-allergens { min-width: 0; }
  .ingredient-allergens .chip { margin: 2px 3px 2px 0; padding: 2px 6px; border-radius: 4px; font-size: .6rem; }
  .ingredient-action-cell { position: relative; width: 54px; text-align: right; }
  .ingredient-row-menu { position: relative; }
  .ingredient-row-menu summary { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: 6px; color: var(--ink-soft); cursor: pointer; list-style: none; }
  .ingredient-row-menu summary::-webkit-details-marker { display: none; }
  .ingredient-row-menu summary:hover { background: var(--paper-deep); color: var(--ink); }
  .ingredient-row-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 5px);
    right: 0;
    display: grid;
    width: 210px;
    padding: 8px;
    background: #fff;
    border: 1px solid #bfc6bf;
    border-radius: 8px;
    box-shadow: 0 16px 30px -18px rgba(23,33,28,.55);
    text-align: left;
  }
  .ingredient-row-menu-panel p { margin: 0 0 5px; padding: 5px 7px 8px; border-bottom: 1px solid #dde1dc; }
  .ingredient-row-menu-panel p strong, .ingredient-row-menu-panel p span { display: block; }
  .ingredient-row-menu-panel p strong { margin-bottom: 2px; font-size: .62rem; }
  .ingredient-row-menu-panel p span { color: var(--ink-soft); font-size: .72rem; }
  .ingredient-row-menu-panel .icon-btn { justify-content: flex-start; width: 100%; }
  /* Flipped by placeOverlay() when there is no room below the trigger. */
  .ingredient-row-menu-panel.drop-up { top: auto; bottom: calc(100% + 5px); }
  .recipe-picker-results.drop-up { top: auto; bottom: calc(100% + 4px); }

  .error-box, .ok-box, .guidance-box { border-width: 1px; border-radius: 8px; box-shadow: none; }
  .error-box { background: #f3dfda; color: #7f2f23; }
  .ok-box { background: var(--clearance); }
  .empty-state { border-radius: 8px; background: #f5f6f2; }

  .editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d2d7d1;
  }
  .editor-head h3 { margin: 0 0 4px; font-size: 1.16rem; }
  .editor-head p { margin: 0; }
  .editor-draft-state {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid #b7c4b6;
    border-radius: 5px;
    background: #e6eee4;
    color: #34513b;
    font-size: .62rem;
    font-weight: 750;
  }
  .editor-actions { margin-top: 20px; padding-top: 15px; border-top: 1px solid #d2d7d1; }

  .product-editor { margin-bottom: 16px; }
  .product-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
  .product-recipe-pane { min-width: 0; padding: 0; }
  .product-recipe-pane .form-grid { margin: 0; }
  .product-name-field input { max-width: 600px !important; }
  .product-recipe-field { min-width: 0; }
  .recipe-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 52px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid #d7dcd6;
    font-size: .79rem;
  }
  .recipe-row:first-child { border-top: 1px solid #d7dcd6; }
  .recipe-position { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #e5e9e3; color: #5a665f; font-size: .61rem; font-weight: 780; }
  .recipe-component { min-width: 0; }
  .recipe-component strong { display: inline-block; margin-right: 4px; }
  .recipe-component .chip { padding: 2px 5px; border-radius: 4px; font-size: .57rem; }
  .recipe-row-actions { gap: 2px; }
  .recipe-row-actions button { display: grid; place-items: center; min-width: 32px; width: auto; height: 32px; padding: 0 7px; border-radius: 5px; font-size: .66rem; }
  .recipe-row-actions button[data-replace-recipe] { padding-inline: 8px; }
  .recipe-picker input { width: 100%; max-width: none; min-height: 42px; padding: 9px 11px; border: 1px solid #adb5ae; border-radius: 6px; background: #fff; }
  .recipe-picker-results { border-radius: 7px; box-shadow: 0 18px 34px -18px rgba(23,33,28,.55); }
  .recipe-picker-help { margin: 8px 0 0; font-size: .74rem; }
  .product-output-pane {
    padding: 16px;
    border: 1px solid #c5ccc5;
    border-radius: 9px;
    background: #f0f2ed;
  }
  .product-output-pane h4 { margin: 0 0 4px; font-size: .88rem; }
  .product-output-pane > div > p { margin: 0; color: var(--ink-soft); font-size: .74rem; }
  .product-output-options { margin-top: 15px; padding-top: 13px; }
  .product-output-options .check-option { min-height: 40px; margin: 4px 0; padding: 7px 8px; border: 1px solid #ccd2cc; background: #fff; }
  .output-impact { margin-top: 14px; padding-top: 13px; border-top: 1px solid #cbd1cb; }
  .output-impact strong { font-size: .72rem; }
  .output-impact p { margin: 4px 0 0; color: var(--ink-soft); font-size: .72rem; line-height: 1.45; }

  .product-library .table-scroll, .ingredient-library .table-scroll { overflow: visible; }
  .product-table { table-layout: fixed; }
  .product-table th:first-child { width: 35%; }
  .product-table th:nth-child(2) { width: 34%; }
  .product-table th:nth-child(3) { width: auto; }
  .product-table th:last-child { width: 54px; }
  .product-table td { height: 66px; vertical-align: middle; }
  .product-primary strong { display: block; overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
  .product-primary p { margin: 4px 0 0; color: var(--ink-soft); font-size: .68rem; }
  .product-table .chip { padding: 2px 6px; border-radius: 4px; font-size: .58rem; }
  .output-badge { min-height: 23px; padding: 2px 6px; border-radius: 4px; font-size: .61rem; }
  .product-action-cell { position: relative; width: 54px; text-align: right; }

  .ingredient-editor { margin-bottom: 16px; }
  .ingredient-editor .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px 20px;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .ingredient-editor .form-grid > * { grid-column: 1; min-width: 0; }
  .ingredient-editor .editor-preview {
    grid-column: 2;
    grid-row: 1 / span 12;
    position: sticky;
    top: 86px;
    align-self: start;
    padding: 16px;
    border: 1px solid #b8c1b9;
    border-radius: 9px;
    background: var(--proof-ground);
  }
  .ingredient-editor .editor-preview > label { color: #4f5b54; }
  .ingredient-editor .declaration-preview { margin-top: 8px; padding: 15px; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px -22px rgba(23,33,28,.65); font-size: .76rem; }
  .ingredient-editor .editor-field-name input, .ingredient-editor .editor-notes input { max-width: none; }
  .ingredient-editor .editor-kind { padding: 0; border: 0; }
  .ingredient-kind-options { grid-template-columns: 1fr 1fr; max-width: none; }
  .ingredient-kind-options label { min-height: 72px; padding: 10px; border-radius: 7px; font-size: .77rem; }
  .ingredient-kind-options small { font-size: .66rem; line-height: 1.4; }
  .ingredient-editor .editor-declaration textarea { max-width: none; min-height: 210px; }
  .ingredient-editor .editor-allergens { padding-top: 3px; }
  .ingredient-editor .al-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .ingredient-editor .al-picker button { min-height: 38px; padding: 7px; border-radius: 6px; font-size: .7rem; }
  .ingredient-editor .emphasis-grid, .ingredient-editor .precautionary-note, .ingredient-editor .guidance-box { max-width: none; }
  .ingredient-editor .emphasis-row { padding: 9px 10px; border-radius: 7px; }

  .qr-workspace { padding: 0; overflow: hidden; }
  .qr-workspace > .error-box { margin: 18px 18px 0; }
  .qr-workspace-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); min-height: 520px; }
  .qr-controls { min-width: 0; padding: 24px; background: var(--surface); }
  .qr-controls > h3 { margin: 0 0 16px; font-size: 1.08rem; }
  .qr-state { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; margin-bottom: 18px; padding: 12px; border: 1px solid #c3cac3; border-radius: 8px; background: #f3f4f0; }
  .qr-state-mark { width: 10px; height: 10px; margin-top: 4px; border-radius: 3px; background: #87918a; }
  .qr-state.live { background: #e8f0e6; border-color: #b7c9b5; }
  .qr-state.live .qr-state-mark { background: #3f6e49; }
  .qr-state.stale { background: #f4e8c2; border-color: #d4c17c; }
  .qr-state.stale .qr-state-mark { background: #846b00; }
  .qr-state strong { display: block; font-size: .77rem; }
  .qr-state p { margin: 3px 0 0; color: var(--ink-soft); font-size: .72rem; }
  .qr-controls .form-grid { margin: 0; }
  .qr-controls .form-grid input { max-width: none; }
  .qr-product-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin-top: 16px; padding: 12px; border-top: 1px solid #d3d8d2; border-bottom: 1px solid #d3d8d2; }
  .qr-product-summary strong, .qr-product-summary span { font-size: .72rem; }
  .qr-product-summary span { color: #36543e; font-weight: 720; }
  .qr-product-summary p { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .72rem; }
  .qr-empty { margin-top: 16px; }
  .qr-publish-actions { margin-top: 18px; }
  .qr-proof { min-width: 0; padding: 24px; background: var(--proof-ground); border-left: 1px solid #b9c1ba; }
  .qr-proof-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
  .qr-proof-head h3 { margin: 0 0 3px; font-size: 1.08rem; }
  .qr-proof-head p { margin: 0; color: var(--ink-soft); font-size: .74rem; }
  .qr-code-plate { display: grid; place-items: center; min-height: 330px; padding: 22px; border-radius: 8px; background: #fff; box-shadow: 0 16px 32px -24px rgba(23,33,28,.65); text-align: center; }
  .qr-code-plate #qm-qr { width: min(210px, 72%); }
  .qr-code-plate svg { display: block; width: 100%; height: auto; }
  .qr-code-plate strong { margin-top: 10px; font-size: 1rem; }
  .qr-code-plate span { color: var(--ink-soft); font-size: .7rem; }
  .qr-link-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 9px 0; border-bottom: 1px solid #b9c1ba; }
  .qr-link-row a { overflow: hidden; color: #304b39; font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .qr-proof-placeholder { display: grid; place-items: center; min-height: 330px; padding: 28px; border: 1px dashed #aeb7af; border-radius: 8px; color: #4f5b54; text-align: center; }
  .qr-proof-placeholder.stale { color: #725b00; background: rgba(245,233,186,.45); border-color: #c8b667; }
  .qr-proof-placeholder strong { margin-top: 12px; font-size: .86rem; }
  .qr-proof-placeholder p { max-width: 34ch; margin: 5px 0 0; font-size: .7rem; }
  .qr-workspace > .disclaimer { margin: 0; padding: 13px 24px; border-top: 1px solid #bcc4bd; background: #f2f3ef; }

  .records-workspace { padding: 0; overflow: hidden; }
  .records-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px; border-bottom: 1px solid #cbd1cb; }
  .records-intro h3 { margin: 0 0 5px; font-size: 1.14rem; }
  .records-intro p { max-width: 65ch; margin: 0; color: var(--ink-soft); font-size: .78rem; }
  .records-date { flex: 0 0 auto; color: #67726b; font-size: .72rem; font-weight: 740; }
  .records-workspace > .error-box { margin: 18px 24px 0; }
  .records-workspace > .empty-state { margin: 22px 24px; }
  .records-ledger { padding: 0 24px; }
  .records-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-height: 86px; border-bottom: 1px solid #d3d8d2; }
  .records-index { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c9d0c9; border-radius: 6px; color: var(--ink-soft); background: #f4f5f1; }
  .records-row strong { display: block; font-size: .82rem; }
  .records-row p { margin: 3px 0 0; color: var(--ink-soft); font-size: .74rem; }
  .records-count { padding: 4px 7px; border-radius: 5px; background: #e6eae4; color: #445048; font-size: .72rem; font-weight: 700; }
  .records-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 24px; background: #f1f3ee; }
  .records-actions > div:first-child strong { font-size: .77rem; }
  .records-actions > div:first-child p { max-width: 46ch; margin: 4px 0 0; color: var(--ink-soft); font-size: .72rem; }
  .records-actions .btn-row { justify-content: flex-end; margin: 0; }
  .records-workspace > .disclaimer { margin: 0; padding: 13px 24px; border-top: 1px solid #ccd2cc; }

  @media (max-width: 1080px) {
    .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
    .label-workspace-grid { grid-template-columns: minmax(290px, .78fr) minmax(420px, 1.22fr); }
    .label-proof-actions { grid-template-columns: 1fr; }
    .label-proof-actions .btn-row { justify-content: flex-start; }
    .product-editor-grid { grid-template-columns: minmax(0, 1fr) 250px; }
    .ingredient-editor .form-grid { grid-template-columns: minmax(0, 1fr) 270px; }
    .ingredient-editor .al-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 1000px) {
    .activation-guide { grid-template-columns: 1fr; }
    .activation-guide-head { display: flex; justify-content: space-between; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid #cbd0ca; }
    .activation-steps { grid-template-columns: 1fr; }
    .activation-step { min-height: 42px; }
    .activation-step.done { display: none; }
    .label-workspace-grid { grid-template-columns: minmax(250px, .68fr) minmax(0, 1.32fr); gap: 14px; }
    .label-preview-stage { min-height: 280px; padding: 18px; }
    .product-editor-grid,
    .qr-workspace-grid { grid-template-columns: 1fr; }
    .ingredient-editor .form-grid { grid-template-columns: 1fr; }
    .ingredient-editor .form-grid > *,
    .ingredient-editor .editor-preview { grid-column: 1; }
    .ingredient-editor .editor-preview { grid-row: auto; position: static; }
    .qr-proof { border-top: 1px solid #b9c1ba; border-left: 0; }
  }

  @media (max-width: 840px) {
    .site-header .wrap { padding-inline: 18px; }
    .app-shell { display: block; }
    .app-rail { position: sticky; top: 64px; z-index: 55; display: block; width: 100%; height: auto; padding: 7px 10px; }
    .rail-title, .rail-assurance { display: none; }
    .tabs { display: flex; gap: 4px; overflow-x: auto; }
    .tabs button { flex: 0 0 auto; width: auto; min-height: 40px; padding: 8px 10px; white-space: nowrap; }
    .tabs button.active { padding-bottom: 8px; }
    .app-workspace { padding: 22px 16px 48px; }
    .workspace-header { margin-bottom: 16px; padding-bottom: 16px; }
    .workspace-mode { display: none; }
    .activation-guide { grid-template-columns: 1fr; }
    .activation-guide-head { display: flex; justify-content: space-between; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid #cbd0ca; }
    .label-workspace-grid { grid-template-columns: 1fr; }
    .label-proof-card { position: static; }
    .label-preview-stage { min-height: 350px; }
    .product-editor-grid, .qr-workspace-grid { grid-template-columns: 1fr; }
    .ingredient-editor .form-grid { grid-template-columns: 1fr; }
    .ingredient-editor .form-grid > *, .ingredient-editor .editor-preview { grid-column: 1; }
    .ingredient-editor .editor-preview { grid-row: auto; position: static; }
    .qr-proof { border-top: 1px solid #b9c1ba; border-left: 0; }
    .records-actions { align-items: flex-start; flex-direction: column; }
    .records-actions .btn-row { justify-content: flex-start; }
  }

  @media (max-width: 700px) {
    .site-header .wrap { height: 58px; }
    .app-rail { top: 58px; }
    .app-rail { padding-right: 52px; }
    .app-rail::after {
      content: "More";
      position: absolute;
      top: 9px;
      right: 6px;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 42px;
      height: 36px;
      color: #d9e0da;
      background: linear-gradient(90deg, rgba(45,92,64,.15), var(--action) 34%);
      font-size: .68rem;
      font-weight: 720;
      pointer-events: none;
    }
    .workspace-header h1 { font-size: 1.55rem; }
    .workspace-header p { font-size: .8rem; }
    .activation-steps { grid-template-columns: 1fr; }
    .activation-step { min-height: 42px; }
    .label-run, .label-proof-card { padding: 16px; }
    .label-preview-stage { min-height: 300px; padding: 18px; }
    .label-proof-actions .btn-row { display: grid; grid-template-columns: 1fr 1fr; }
    .label-proof-actions .btn { width: 100%; }
    .ingredient-table { display: table; width: 100%; }
    .ingredient-table thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
    .ingredient-table tbody { display: table-row-group; width: auto; }
    .ingredient-table tr { display: table-row; width: auto; padding: 0; }
    .ingredient-table th, .ingredient-table td { display: table-cell; width: auto; border-bottom: 1px solid var(--line); }
    .ingredient-table th:first-child { width: 62%; }
    .ingredient-table th:nth-child(2), .ingredient-table td:nth-child(2) { display: none; }
    .ingredient-table th:last-child { width: 48px; }
    .ingredient-primary > p { max-width: 62vw; }
    .product-table { display: table; width: 100%; }
    .product-table thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
    .product-table tbody { display: table-row-group; width: auto; }
    .product-table tr { display: table-row; width: auto; padding: 0; }
    .product-table th, .product-table td { display: table-cell; width: auto; border-bottom: 1px solid var(--line); }
    .product-table th:first-child { width: auto; }
    .product-table th:nth-child(2), .product-table td:nth-child(2) { display: none; }
    .product-table th:nth-child(3) { width: 110px; }
    .product-table th:last-child { width: 48px; }
    .recipe-row { grid-template-columns: 24px minmax(0, 1fr); }
    .recipe-row-actions { grid-column: 2; justify-content: flex-start; }
    .ingredient-kind-options { grid-template-columns: 1fr; }
    .ingredient-editor .al-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qr-controls, .qr-proof { padding: 18px; }
    .qr-code-plate, .qr-proof-placeholder { min-height: 280px; }
    .records-intro, .records-actions { padding: 18px; }
    .records-ledger { padding-inline: 18px; }
    .records-row { grid-template-columns: 28px minmax(0, 1fr); padding: 12px 0; }
    .records-count { grid-column: 2; justify-self: start; }
    .records-actions .btn-row { display: grid; width: 100%; grid-template-columns: 1fr; }
    .records-actions .btn { width: 100%; }
    .matrix-scroll { max-height: calc(100vh - 260px); }
  }

  /* ---- Shared transient surfaces ----
     The confirm dialog, the toast and the account cards are shared with the
     public site and were never re-themed, so the Pro app was still showing the
     paper-folder identity: taped cards, a hard offset shadow and a heavy
     coloured stripe. Re-theme them here rather than in styles.css, which the
     marketing pages still own. */

  .card {
    padding: 24px;
    border: 1px solid #c3c9c2;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .card::before { display: none; }
  .card p { font-size: .91rem; }
  /* .card p outranks the single-class note styles below it, which flattened the
     trial screen to one size. Restore the intended steps. */
  .trial-entry .trial-audience-note { font-size: .82rem; }
  .trial-entry .trial-reassurance { font-size: .78rem; }

  .modal-backdrop { padding: 20px; background: rgba(23, 33, 28, .52); backdrop-filter: none; }
  .modal-card {
    padding: 22px;
    border: 1px solid #b3bbb4;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 16px 30px -18px rgba(23, 33, 28, .55);
  }
  .modal-card h2 { margin: 0 0 7px; font-size: 1.16rem; font-weight: 760; letter-spacing: -.025em; }
  .modal-card p { font-size: .91rem; line-height: 1.5; }
  .modal-actions { margin-top: 20px; }

  .toast {
    gap: 11px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid #c3c9c2;
    border-left-width: 1px;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 14px 34px -20px rgba(23, 33, 28, .55);
    font-size: .86rem;
  }
  /* Status reads as a squared key, the mark this system already uses for
     matrix states and QR freshness -- not as a coloured edge stripe. */
  .toast-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #b7c9b5;
    border-radius: 4px;
    background: var(--clearance);
    color: #2f5c3b;
    font-size: .62rem;
    font-weight: 800;
  }
  .toast.error { border-left-color: #c3c9c2; }
  .toast.warning { border-left-color: #c3c9c2; }
  .toast.error .toast-icon { border-color: #d3a49a; background: #efd6d0; color: #873628; }
  .toast.warning .toast-icon { border-color: #d8c570; background: #f3e8b7; color: #735900; }
  .toast-close { border-radius: 5px; color: var(--ink-soft); }
  .toast-close:hover { background: var(--paper-deep); color: var(--ink); }

  /* Below 840px the tool rail becomes a sticky strip under the header and the
     toast region sat on top of it, so every save confirmation covered the
     navigation. A fixed offset only moves the problem: the test site's
     environment banner is 55px at 375px and pushed the rail straight back under
     it. Anchor to the bottom instead. It cannot collide with whatever is stacked
     above, and a phone expects a confirmation in thumb reach. */
  @media (max-width: 840px) {
    .toast-region {
      top: auto;
      right: 12px;
      left: 12px;
      bottom: max(12px, env(safe-area-inset-bottom));
      width: auto;
    }
    .toast { animation: toast-rise 160ms ease-out; }
  }
  @keyframes toast-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---- Touch targets ----
     DESIGN.md asks for dense, grouped controls. That is right for a mouse and
     wrong for a thumb: measured on a phone, several controls here render
     between 17px and 34px, and the recipe row's reorder and delete buttons sit
     2px apart. Splitting by input method rather than viewport width keeps the
     density the system asks for and still gives a thumb a 44px target. A laptop
     with a touchscreen reports a fine primary pointer, so it keeps the dense
     layout it can actually use. */
  @media (pointer: coarse) {
    .btn,
    .btn.small,
    .activation-step .btn,
    .icon-btn,
    .tabs button,
    .site-header .logo,
    .label-product-option input[type="number"],
    .label-date-options label,
    .label-format-options label,
    .form-grid input[type="text"], .form-grid input[type="email"],
    .form-grid input[type="number"], .form-grid select { min-height: 44px; }
    .site-header .logo { display: inline-flex; align-items: center; }

    .ingredient-editor .al-picker button,
    .suggestion-row button { min-height: 44px; }

    .recipe-row-actions { gap: 6px; }
    .recipe-row-actions button { min-width: 44px; height: 44px; }
    .ingredient-row-menu summary { width: 44px; height: 44px; }

    /* Two controls keep their drawn size and grow only their hit area: the
       caveat dot sits inside a sentence, and a 44px close button would double
       the height of every toast. */
    .info-dot { position: relative; }
    .info-dot::after { content: ""; position: absolute; inset: -10px; }
    .toast-close { position: relative; }
    .toast-close::after { content: ""; position: absolute; inset: -7px; }

    .qr-link-row a { padding: 14px 0; }
    .account-foot a, .disclaimer a, .field-help a, .info-pop-inner a { padding: 6px 0; display: inline-block; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .label-tool-drawer summary svg, .btn { transition: none; }
    .label-preview-stage .ak-label { animation: none; }
    /* Reduced motion means less movement, not less feedback: the toast still
       arrives, without travelling, and the spinner still reads as working
       without spinning. A still ring would read as stalled. */
    .toast { animation: toast-arrive 160ms ease-out; }
    .spinner { animation: spinner-working 1.6s ease-in-out infinite alternate; }
  }
  @keyframes toast-arrive { from { opacity: 0; } to { opacity: 1; } }
  @keyframes spinner-working { from { opacity: 1; } to { opacity: .4; } }

  /* ---- print sheets ---- */
  #print-root { display: none; }
  @media print {
    .site-header, .app-main { display: none !important; }
    #print-root { display: block; }
    @page { margin: 0; size: A4 portrait; }
    .sheet { width: 210mm; box-sizing: border-box; display: grid; page-break-after: always; }
    .sheet.l7165 { padding: 13mm 4.6mm 0; grid-template-columns: 99.1mm 99.1mm; grid-auto-rows: 67.7mm; column-gap: 2.5mm; }
    .sheet.l7163 { padding: 15.1mm 4.6mm 0; grid-template-columns: 99.1mm 99.1mm; grid-auto-rows: 38.1mm; column-gap: 2.5mm; }
    .label { box-sizing: border-box; padding: 4mm 5mm; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
    .label .l-name { font-weight: 800; font-size: 9pt; margin-bottom: 1.5mm; }
    .label .l-ing { font-size: 7pt; line-height: 1.35; }
    .sheet.l7163 .label .l-ing { font-size: 6.3pt; line-height: 1.25; }
    .label .l-may { font-size: 7pt; font-weight: 600; margin-top: 1mm; }
    .label .l-foot { font-size: 6pt; color: #444; margin-top: 1.5mm; }
    #matrix-print table { border-collapse: collapse; width: 190mm; margin: 10mm; }
    #matrix-print th, #matrix-print td { border: 1px solid #888; font-size: 6.5pt; padding: 3px 2px; text-align: center; }
    #matrix-print th.item, #matrix-print td.item { text-align: left; font-size: 8pt; min-width: 40mm; }
    #matrix-print thead th { background: #1e4230 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #matrix-print td.s1 { background: #f6d7d1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #matrix-print td.s2 { background: #fdeed3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #matrix-print .m-head { font-family: Arial, sans-serif; margin: 10mm 10mm 0; display: flex; justify-content: space-between; }
    #qr-sign { text-align: center; font-family: Arial, Helvetica, sans-serif; padding-top: 30mm; }
    #qr-sign h1 { font-size: 24pt; margin: 0 0 4mm; }
    #qr-sign .qs-sub { font-size: 13pt; margin: 0 0 6mm; }
    #qr-sign svg { width: 100mm; height: 100mm; display: block; margin: 0 auto 8mm; }
    #qr-sign .qs-url { font-size: 9pt; color: #444; margin: 0 0 2mm; word-break: break-all; }
    #qr-sign .qs-foot { font-size: 9pt; color: #666; }
    #records-print { font-family: Arial, Helvetica, sans-serif; color: #111; }
    #records-print .rp-page { padding: 12mm 10mm; page-break-after: always; }
    #records-print .rp-page:last-child { page-break-after: auto; }
    #records-print .rp-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5mm; }
    #records-print h1 { font-size: 15pt; margin: 0; }
    #records-print .rp-biz { font-size: 10pt; color: #444; margin-top: 1mm; }
    #records-print .rp-meta { font-size: 8pt; color: #444; text-align: right; line-height: 1.9; }
    #records-print table { border-collapse: collapse; width: 100%; }
    #records-print th, #records-print td { border: 1px solid #888; font-size: 8pt; padding: 4px 5px; text-align: left; vertical-align: top; }
    #records-print thead th { background: #1e4230 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #records-print table.mx th, #records-print table.mx td { font-size: 6.5pt; padding: 3px 2px; text-align: center; }
    #records-print table.mx th.item, #records-print table.mx td.item { text-align: left; font-size: 8pt; min-width: 40mm; }
    #records-print td.s1 { background: #f6d7d1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #records-print td.s2 { background: #fdeed3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #records-print .rp-foot { font-size: 7.5pt; color: #555; margin-top: 4mm; }
  }