/* css/pages/result_modal.css — full result modal styles lifted verbatim
   from fragra_ui.html as part of Phase 4 part 3 (result modal port).
   Loaded by /create via templates/pages/create.html. The selectors
   here mirror what the SPA renders so /create's result modal is
   pixel-identical to the live version. */

/* ── Save to Library — understated, editorial keeper action ── */
.res-save-lib-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;
}
.res-save-lib{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 32px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display, Georgia, serif);
  font-size:15px;font-weight:500;letter-spacing:.015em;line-height:1;
  color:var(--gold2,#9a7b3f);background:transparent;
  border:1px solid var(--gold,#b8954e);
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .12s ease;
}
.res-save-lib:hover{
  background:rgba(184,149,78,.06);border-color:var(--gold2,#9a7b3f);
}
.res-save-lib:active{transform:translateY(1px)}
.res-save-lib.is-saved{
  background:linear-gradient(135deg,var(--gold,#b8954e),var(--gold2,#9a7b3f));
  color:#fff;border-color:transparent;
  box-shadow:0 3px 16px rgba(184,149,78,.26);
}
.res-save-lib.is-saved:hover{
  background:linear-gradient(135deg,var(--gold,#b8954e),var(--gold2,#9a7b3f));
}
.res-save-lib-hint{
  font-size:11.5px;line-height:1.5;color:var(--muted,#9a948c);
  max-width:260px;flex:1 1 180px;
}

/* ── res-polish-collapse + summary (378-437) ──────────────────── */
    .res-polish-collapse{
      border:1px solid var(--line);border-radius:14px;
      background:rgba(255,255,255,0.55);
      padding:0;overflow:hidden;
    }
    .res-polish-collapse > summary{
      list-style:none;cursor:pointer;
      display:flex;align-items:center;gap:12px;
      padding:12px 16px;
      transition:background .15s;
    }
    .res-polish-collapse > summary::-webkit-details-marker{display:none}
    .res-polish-collapse > summary:hover{background:rgba(184,150,78,0.05)}
    .res-polish-collapse[open] > summary{
      border-bottom:1px solid var(--line);
      background:rgba(184,150,78,0.05);
    }
    .res-polish-summary-icon{
      width:28px;height:28px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      color:var(--gold2);
    }
    .res-polish-summary-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
    .res-polish-summary-title{
      font-size:13px;font-weight:700;color:var(--ink);letter-spacing:0.1px;
    }
    .res-polish-summary-sub{
      font-size:11px;color:var(--muted);line-height:1.4;
    }
    .res-polish-summary-cta{
      flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
      padding:6px 12px;border:1px solid var(--gold);border-radius:999px;
      font-size:11.5px;font-weight:700;color:var(--gold2);letter-spacing:0.2px;
      background:#fff;
    }
    .res-polish-summary-pill{
      font-size:9.5px;letter-spacing:0.4px;
      background:rgba(184,150,78,0.18);color:var(--gold2);
      padding:2px 6px;border-radius:6px;
    }
    /* Tighter padding when polish lives inside the collapsible */
    .res-polish-inline-tight{
      margin-top:0 !important;border:none;border-radius:0;
      padding:12px 16px 16px;background:transparent;
    }

    /* Legacy health-strip classes — kept as no-op hides in case any code
       still references them. The real UI is the refine strip above.       */
    .s2-health-strip, .s2-health-badge, .s2-health-row, .s2-health-score,
    .s2-health-label-top, .s2-health-label-bot, .s2-polish-btn{
      /* intentionally empty — old nodes are no longer in the DOM */
    }

    /* Small help icon next to jargon labels (council F4). */
    .idiff-help{
      display:inline-block;font-size:10px;color:var(--muted);
      margin-left:3px;cursor:help;opacity:.65;
    }
    .idiff-help:hover{opacity:1}


/* ── Commerce CTA card on the formula result (438-480) ──────── */
    /* ── Commerce CTA card on the formula result (council F1) ──────────────
       The moment of maximum intent. This is the primary CTA — everything
       else on the result page is secondary refinement. */
    .res-buy-card{
      display:flex;gap:14px;align-items:center;justify-content:space-between;
      flex-wrap:wrap;margin-top:14px;padding:14px 16px;
      border:1px solid var(--gold);border-radius:14px;
      background:linear-gradient(135deg, rgba(184,150,78,0.08) 0%, rgba(255,255,255,0.85) 100%);
      box-shadow:0 2px 10px rgba(184,150,78,0.08);
    }
    .res-buy-left{display:flex;flex-direction:column;gap:3px;min-width:0}
    .res-buy-pricerow{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
    .res-buy-price{
      font-family:var(--font-display);
      font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-0.3px;
    }
    .res-buy-vol{font-size:12px;color:var(--muted)}
    .res-buy-meta{
      font-size:11px;color:var(--muted);
      display:flex;gap:6px;align-items:center;flex-wrap:wrap;
    }
    .res-buy-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .res-buy-sample{
      background:#fff;color:var(--ink);
      border:1px solid var(--line);border-radius:999px;
      padding:9px 16px;font-size:12px;font-weight:600;
      cursor:pointer;font-family:inherit;transition:all .15s;
      white-space:nowrap;
    }
    .res-buy-sample:hover{border-color:var(--gold);color:var(--gold2)}
    .res-buy-primary{
      background:var(--ink);color:#fff;border:none;border-radius:999px;
      padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:0.2px;
      cursor:pointer;font-family:inherit;transition:all .15s;
      white-space:nowrap;
    }
    .res-buy-primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
    @media (max-width:560px){
      .res-buy-card{padding:12px 14px}
      .res-buy-right{width:100%}
      .res-buy-primary, .res-buy-sample{flex:1;text-align:center}
    }


/* ── Inspiration fidelity card (663-708) ────────────────────── */
    /* ── Inspiration fidelity card (post-gen diff) ─────────────── */
    .idiff-card{
      margin-top:14px;padding:14px 16px;
      border:1px solid var(--line);border-radius:12px;
      background:linear-gradient(135deg, rgba(184,150,78,0.04) 0%, rgba(255,255,255,0.6) 100%);
    }
    .idiff-header{
      display:flex;align-items:center;justify-content:space-between;
      gap:10px;margin-bottom:8px;flex-wrap:wrap;
    }
    .idiff-title{
      font-family:var(--font-display);
      font-size:13px;font-weight:500;color:var(--ink);
    }
    .idiff-meter{
      display:inline-flex;align-items:center;gap:6px;
      font-size:10.5px;color:var(--muted);letter-spacing:0.3px;
    }
    .idiff-meter-bar{
      width:60px;height:5px;border-radius:999px;
      background:rgba(0,0,0,0.06);overflow:hidden;position:relative;
    }
    .idiff-meter-fill{
      position:absolute;inset:0 auto 0 0;
      background:linear-gradient(90deg, var(--gold2,#9a7b3a), var(--gold,#b8964e));
      border-radius:999px;
    }
    .idiff-meter-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink2)}
    .idiff-rows{display:flex;flex-direction:column;gap:4px;margin-top:4px}
    .idiff-row{
      display:flex;align-items:flex-start;gap:8px;
      font-size:11.5px;color:var(--ink2);line-height:1.45;
    }
    .idiff-row-label{
      font-size:9.5px;font-weight:700;color:var(--muted);
      letter-spacing:0.6px;text-transform:uppercase;
      min-width:64px;margin-top:2px;
    }
    .idiff-pill{
      display:inline-block;padding:2px 9px;border-radius:999px;
      font-size:10.5px;font-weight:600;margin-right:4px;margin-bottom:3px;
    }
    .idiff-pill-kept{background:rgba(122,158,126,0.14);color:#4a6b4e;border:1px solid rgba(122,158,126,0.3)}
    .idiff-pill-evicted{background:rgba(196,68,68,0.08);color:#8a4040;border:1px solid rgba(196,68,68,0.22)}
    .idiff-pill-added{background:rgba(184,150,78,0.12);color:var(--gold2,#9a7b3a);border:1px solid rgba(184,150,78,0.3)}


/* ── Secondary CTAs on formula result (709-795) ─────────────── */
    /* ── Secondary CTAs on formula result (Sillage Lab, etc.) ──────────
       Two-tier hierarchy: Polish stays primary (filled, dark), these are
       outlined / quiet so the eye lands on Polish first. */
    .res-cta{
      position:relative;
      display:flex;align-items:center;gap:10px;width:100%;
      padding:10px 14px;
      background:transparent;
      color:var(--ink);
      border:1px solid var(--line);
      border-radius:11px;
      font-size:12px;font-weight:600;letter-spacing:0.35px;
      cursor:pointer;
      transition:border-color var(--dur-fast) var(--ease-out),
                 background-color var(--dur-fast) var(--ease-out),
                 transform var(--dur-fast) var(--ease-out);
    }
    .res-cta:hover{
      transform:translateY(-1px);
      border-color:#d4ad5b;
      background:rgba(212,173,91,0.05);
    }
    .res-cta .res-cta-inner{
      display:flex;align-items:center;gap:10px;flex:1;min-width:0;
    }
    .res-cta svg{flex-shrink:0;opacity:0.88}
    .res-cta .res-cta-label{flex:1;text-align:left}
    .res-cta .res-cta-chip{
      font-size:9.5px;color:var(--muted);letter-spacing:0.55px;
      padding:2px 8px;border-radius:999px;
      background:var(--card2,rgba(0,0,0,0.04));
      border:1px solid var(--line);
      text-transform:uppercase;font-weight:700;
      white-space:nowrap;
    }
    /* Positive-state variant: shown to Pro/Studio/Artisan users and admins
       to make their free access explicit instead of just hiding the upsell. */
    .res-cta .res-cta-chip.is-free{
      color:var(--gold2,#a08855);
      background:rgba(184,150,78,0.10);
      border-color:rgba(184,150,78,0.40);
    }
    .res-cta-sub{
      font-size:10.5px;color:var(--muted);
      margin-top:4px;line-height:1.45;padding:0 2px;
    }

    /* Pro-gated state — fully readable with a gold lock badge.
       Blur removed (was 1.6px + opacity 0.5) — the dashed border + PRO
       badge are sufficient signal that it's locked, and the previous
       treatment made the label illegible. */
    .res-cta.is-locked{
      cursor:pointer;
      border-style:dashed;
      border-color:rgba(212,173,91,0.55);
      background:rgba(212,173,91,0.04);
      padding-right:78px;  /* room for the PRO badge so text doesn't overlap */
    }
    .res-cta.is-locked .res-cta-inner{
      opacity:1;
      pointer-events:none;user-select:none;
    }
    .res-cta.is-locked .res-cta-label{
      color:var(--ink);font-weight:700;
    }
    .res-cta.is-locked svg{opacity:1}
    .res-cta.is-locked:hover{
      border-color:#d4ad5b;background:rgba(212,173,91,0.09);
    }
    .res-cta-lock-badge{
      position:absolute;top:50%;right:12px;transform:translateY(-50%);
      display:inline-flex;align-items:center;gap:5px;
      padding:5px 11px;border-radius:999px;
      background:#1a1a1f;color:#d4ad5b;
      font-size:10px;font-weight:700;letter-spacing:0.8px;
      border:1px solid #d4ad5b;
      box-shadow:0 2px 8px rgba(212,173,91,0.25);
      z-index:2;pointer-events:none;
    }
    .res-cta-lock-badge svg{width:11px;height:11px;stroke:#d4ad5b;opacity:1}

    /* Polish panel interior */
    .s2-mode-tabs{
      display:flex;gap:6px;margin-bottom:14px;
      padding:4px;background:var(--card2,#f8f5ee);border-radius:10px;
      border:1px solid var(--line);
    }

/* ── Polish modes tabs + preview area (796-849) ─────────────── */
    .s2-mode-tab{
      flex:1;padding:8px 10px;border:none;background:transparent;
      font-size:11.5px;font-weight:600;color:var(--muted);
      border-radius:7px;cursor:pointer;letter-spacing:0.3px;
      transition:background-color var(--dur-fast) var(--ease-out),
                 color var(--dur-fast) var(--ease-out);
    }
    .s2-mode-tab:hover{color:var(--ink)}
    .s2-mode-tab.active{background:var(--ink);color:#fffbef}
    .s2-mode-desc{
      font-size:12px;color:var(--muted);line-height:1.55;
      padding:12px 14px;border-radius:9px;
      background:var(--card);border:1px solid var(--line);
      margin-bottom:14px;
    }
    .s2-mode-desc .s2md-tagline{
      font-size:12.5px;color:var(--ink);font-weight:600;
      letter-spacing:0.2px;margin-bottom:10px;line-height:1.5;
    }
    .s2-mode-desc .s2md-section{
      margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
    }
    .s2-mode-desc .s2md-section:first-of-type{
      margin-top:0;padding-top:0;border-top:none;
    }
    .s2-mode-desc .s2md-label{
      display:block;
      font-size:10px;font-weight:700;color:var(--muted);
      letter-spacing:0.7px;text-transform:uppercase;margin-bottom:3px;
    }
    .s2-mode-desc .s2md-body{
      font-size:11.5px;color:var(--ink);line-height:1.55;
    }
    .s2-mode-desc .s2md-body em{
      font-style:normal;color:var(--muted);
    }
    .s2-preview-area{
      min-height:120px;
    }
    .s2-preview-empty{
      padding:24px 16px;text-align:center;font-size:12.5px;color:var(--muted);
      border:1px dashed var(--line);border-radius:10px;
    }
    .s2-preview-empty strong{color:var(--ink);font-weight:600}
    .s2-loading{
      display:flex;align-items:center;justify-content:center;gap:10px;
      padding:32px 16px;font-size:12.5px;color:var(--muted);
    }
    .s2-loading-spinner{
      width:14px;height:14px;border:2px solid var(--line);
      border-top-color:var(--ink);border-radius:50%;
      animation:s2Spin 0.8s linear infinite;
    }
    @keyframes s2Spin{to{transform:rotate(360deg)}}

/* ── .rh-card .rh-desc + interactive pyramid (1136-1158) ────── */
    .rh-card .rh-desc{
      font-size:12.5px;
      line-height:1.55;
    }
    .s5-trophy-ring{
      position:absolute;inset:-6px;
      border:1px solid rgba(212,173,91,0.3);
      border-radius:inherit;
      pointer-events:none;
      opacity:0;transition:opacity var(--dur-slow) var(--ease-out);
    }
    /* Interactive pyramid enhancements */
    .np-note{
      cursor:pointer;
      transition:transform var(--dur-fast) var(--ease-out),
                 background-color var(--dur-fast) var(--ease-out),
                 border-color var(--dur-fast) var(--ease-out);
    }
    .np-note:focus-visible{outline:2px solid var(--gold2, #d4ad5b); outline-offset:2px}
    .np-note.s5-selected{
      transform:translateY(-1px) scale(1.04);
      box-shadow:0 2px 6px rgba(20,18,14,0.12);
    }

/* ── s5 selected-note popover + s5 export bar (1159-1236) ───── */
    .s5-note-popover{
      margin-top:10px;padding:12px 14px;
      border:1px solid var(--line);border-radius:11px;
      background:var(--card2,#f8f5ee);
      display:none;animation:s5FadeIn var(--dur-med) var(--ease-out);
    }
    .s5-note-popover.open{display:block}
    @keyframes s5FadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
    .s5-note-popover-head{
      display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
      margin-bottom:6px;
    }
    .s5-note-popover-title{
      font-family:var(--font-display);
      font-size:16px;font-weight:500;color:var(--ink);
    }
    .s5-note-popover-meta{
      font-size:10.5px;color:var(--muted);letter-spacing:0.4px;text-transform:uppercase;
    }
    .s5-note-popover-body{
      font-size:12px;color:var(--ink2, var(--ink));line-height:1.55;
    }
    .s5-note-popover-bar{
      margin-top:8px;height:4px;border-radius:2px;
      background:var(--line);overflow:hidden;
    }
    .s5-note-popover-bar-fill{
      height:100%;background:var(--sage);
      transition:width var(--dur-slow) var(--ease-out);
    }
    .s5-note-popover-close{
      background:transparent;border:none;font-size:18px;color:var(--muted);
      cursor:pointer;line-height:1;padding:0 4px;
    }
    .s5-note-popover-close:hover{color:var(--ink)}

    /* Export menu */
    .s5-export-wrap{position:relative;display:inline-block}
    .s5-export-btn{
      display:flex;align-items:center;gap:6px;
      padding:7px 14px;background:var(--card2,#f8f5ee);
      color:var(--ink);border:1px solid var(--line);
      border-radius:999px;
      font-size:11.5px;font-weight:600;letter-spacing:0.3px;
      cursor:pointer;
      transition:background-color var(--dur-fast) var(--ease-out),
                 border-color var(--dur-fast) var(--ease-out);
    }
    .s5-export-btn:hover{background:#fff;border-color:var(--line2,var(--line))}
    .s5-export-btn svg{width:12px;height:12px}
    .s5-export-menu{
      position:absolute;bottom:calc(100% + 6px);right:0;
      min-width:180px;
      background:var(--card,#fffbef);border:1px solid var(--line);
      border-radius:10px;
      box-shadow:0 10px 30px rgba(20,18,14,0.16);
      padding:4px;
      opacity:0;pointer-events:none;transform:translateY(4px);
      transition:opacity var(--dur-fast) var(--ease-out),
                 transform var(--dur-fast) var(--ease-out);
      z-index:var(--z-modal);
    }
    .s5-export-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
    .s5-export-menu-item{
      display:flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:7px;cursor:pointer;
      font-size:12.5px;color:var(--ink);
      transition:background-color var(--dur-fast) var(--ease-out);
    }
    .s5-export-menu-item:hover{background:var(--card2,#f8f5ee)}
    .s5-export-menu-item svg{width:14px;height:14px;color:var(--muted)}
    .s5-export-menu-item .s5-emi-sub{
      font-size:10.5px;color:var(--muted);margin-left:auto;
    }
    .s5-export-busy{
      padding:10px 16px;border-radius:8px;
      font-size:12px;color:var(--muted);
    }

/* ── s5 export toast (1237-1256) ────────────────────────────── */
    /* Toast for export done */
    .s5-toast{
      position:fixed;bottom:24px;left:50%;transform:translate(-50%, 12px);
      padding:10px 18px;border-radius:999px;
      background:var(--ink);color:#fffbef;
      font-size:12px;font-weight:500;
      box-shadow:0 10px 30px rgba(20,18,14,0.24);
      opacity:0;pointer-events:none;
      z-index:var(--z-toast);
      transition:opacity var(--dur-med) var(--ease-out),
                 transform var(--dur-med) var(--ease-out);
    }
    .s5-toast.open{opacity:1;transform:translate(-50%, 0);pointer-events:auto}
    /* ══════════════════════════════════════════════════════════════════════
       END SPRINT 5
       ══════════════════════════════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════════════════════════════
       SPRINT 6 · TYPOGRAPHY SCALE + SPACING UTILITIES + ICON SPRITE
       ══════════════════════════════════════════════════════════════════════ */

/* ── s7 undo toast stack (1340-1386) ────────────────────────── */
    /* ── Undo toast stack ─────────────────────────────────────────────── */
    .s7-toast-stack {
      position:fixed; left:50%; bottom:var(--s-xl);
      transform:translateX(-50%);
      display:flex; flex-direction:column; gap:var(--s-sm);
      z-index:var(--z-toast);
      pointer-events:none;
      max-width:min(440px, 92vw);
    }
    .s7-undo-toast {
      display:flex; align-items:center; gap:var(--s-md);
      padding:10px 16px 10px 18px;
      background:var(--ink); color:#fffbef;
      border-radius:var(--r-pill);
      box-shadow:0 10px 30px rgba(20,18,14,0.24);
      font-size:var(--t-base); font-weight:500;
      transform:translateY(12px); opacity:0;
      transition:transform var(--dur-med) var(--ease-out),
                 opacity var(--dur-med) var(--ease-out);
      pointer-events:auto;
    }
    .s7-undo-toast.enter { transform:translateY(0); opacity:1; }
    .s7-undo-toast.exit  { transform:translateY(12px); opacity:0; }
    .s7-undo-toast-msg { flex:1; min-width:0; line-height:1.3; }
    .s7-undo-toast-btn {
      background:transparent; border:1px solid rgba(255,251,239,0.3);
      color:#fffbef; padding:4px 12px; border-radius:var(--r-pill);
      font-size:var(--t-xs); font-weight:600; letter-spacing:0.6px;
      text-transform:uppercase; cursor:pointer;
      transition:background-color var(--dur-fast) var(--ease-out),
                 border-color var(--dur-fast) var(--ease-out);
    }
    .s7-undo-toast-btn:hover { background:rgba(255,251,239,0.12); border-color:rgba(255,251,239,0.5); }
    .s7-undo-toast-close {
      background:transparent; border:none; color:rgba(255,251,239,0.6);
      font-size:16px; line-height:1; cursor:pointer; padding:0 4px;
    }
    .s7-undo-toast-close:hover { color:#fffbef; }
    .s7-undo-toast-bar {
      position:absolute; left:0; bottom:0; height:2px; background:var(--gold2,#d4ad5b);
      border-radius:0 0 var(--r-pill) var(--r-pill);
      transform-origin:left center;
      transform:scaleX(1);
    }
    .s7-undo-toast.error { background:#c44; color:#fff; }
    .s7-undo-toast.success { background:var(--sage); color:#fff; }


/* ── s7 celebration sparkle burst (1388-1430) ───────────────── */
    .s7-celebrate-host {
      position:fixed; inset:0; pointer-events:none;
      z-index:calc(var(--z-toast) - 1);
      overflow:hidden;
    }
    .s7-spark {
      position:absolute; width:10px; height:10px; border-radius:50%;
      opacity:0;
      animation:s7SparkFly 900ms var(--ease-out) forwards;
    }
    @keyframes s7SparkFly {
      0%   { opacity:0; transform:translate(0,0) scale(0.4); }
      15%  { opacity:1; }
      100% { opacity:0; transform:translate(var(--sx,0), var(--sy,-60px)) scale(1.4); }
    }
    .s7-confetti {
      position:absolute; width:8px; height:14px;
      transform-origin:center;
      animation:s7ConfettiFall 1400ms ease-in forwards;
      opacity:0;
    }
    @keyframes s7ConfettiFall {
      0%   { opacity:0; transform:translate(0,0) rotate(0); }
      10%  { opacity:1; }
      100% { opacity:0; transform:translate(var(--cx,0), var(--cy,120px)) rotate(var(--cr,360deg)); }
    }
    /* ══════════════════════════════════════════════════════════════════════
       END SPRINT 7
       ══════════════════════════════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════════════════════════════
       SPRINT 8 · STATES OVERHAUL
       Skeleton shimmer, phase progress, empty states, error recovery,
       first-time tour, feature hints.
       ══════════════════════════════════════════════════════════════════════ */
    /* Skeleton shimmer */
    .s8-skel{
      position:relative; overflow:hidden;
      background:linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
      background-size:200% 100%;
      border-radius:var(--r-sm);
      animation:s8Shimmer 1.4s ease-in-out infinite;
    }

/* ── MODALS base + Result hero + .rh-* + .section-label (2679-2917) ── */
    /* ── MODALS ───────────────────────── */
    .modal-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,0.45);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
      display:none;align-items:center;justify-content:center;
      padding:20px;z-index:200;overflow-y:auto;
      animation:fadeIn .2s ease;
    }
    .modal-overlay.open{display:flex}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .modal{
      width:min(720px, 96vw);border-radius:20px;background:white;
      box-shadow:0 24px 80px rgba(0,0,0,0.22);
      overflow:hidden;max-height:92vh;overflow-y:auto;
      animation:slideUp .3s ease;
    }
    .modal-top{
      padding:18px 24px;display:flex;justify-content:space-between;align-items:flex-start;
      position:sticky;top:0;background:white;z-index:1;border-bottom:1px solid var(--line);
    }
    .modal-top h3{font-size:17px;font-weight:800;letter-spacing:-0.3px}
    #resultModal .modal-top{
      background:linear-gradient(180deg,#faf8f4 0%,#f5f2ec 100%);
      border-bottom:none;position:relative;overflow:hidden;
    }
    #resultModal .modal-top h3{
      font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
      color:var(--gold2);position:relative;z-index:1;
    }
    #resultModal .modal-top::after{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(circle at 15% 60%, rgba(200,170,120,0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(200,170,120,0.08) 0%, transparent 40%);
    }
    .rh-top-deco{position:absolute;border-radius:50%;pointer-events:none;opacity:0.15;border:1.5px solid var(--gold2)}
    .rh-td1{width:6px;height:6px;top:12px;left:40%}
    .rh-td2{width:4px;height:4px;top:22px;left:55%}
    .rh-td3{width:8px;height:8px;top:8px;left:72%}
    .rh-td4{width:3px;height:3px;top:26px;left:30%;background:var(--gold2);opacity:0.12}
    .rh-td5{width:5px;height:5px;top:16px;left:82%;background:var(--gold2);opacity:0.10}
    .close-btn{
      width:30px;height:30px;border-radius:10px;border:1px solid var(--line);
      background:transparent;cursor:pointer;font-size:15px;color:var(--muted);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      transition:all .15s;
    }
    .close-btn:hover{background:var(--accent-soft);color:var(--ink);border-color:var(--line2)}
    .modal-content{padding:0 24px 24px}

    /* ── Result ─────────────────────────
       The hero fades smoothly into the page background via the ::before
       overlay — no border-bottom (that would render as a visible line
       across the fade). The fade reaches full opacity right at 100% so
       there is no "white band" between the illustration and the content
       below, which is what created the disconnected-line effect.            */
    .result-hero{
      text-align:center;padding:60px 24px 32px;margin:0 -24px 24px;
      /* Absolute path so the URL is independent of the CSS file's
         own location. Updated 2026-06-10 to a wider perfumery-atelier
         scene (apothecary shelves + brass scale + arched window). */
      background:url('/img/lab_bg.webp') center 25%/cover no-repeat;
      position:relative;overflow:hidden;border-radius:12px 12px 0 0;
      min-height:260px;
    }
    .result-hero::before{
      content:'';position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(250,249,247,0.05) 0%, rgba(250,249,247,0.18) 30%, rgba(250,249,247,0.55) 60%, rgba(250,249,247,0.92) 90%, rgba(250,249,247,1) 100%);
      z-index:0;
    }
    .result-hero>*{position:relative;z-index:1}
    .rh-lantern{
      position:absolute;border-radius:50%;pointer-events:none;z-index:0;
      background:radial-gradient(circle,rgba(255,200,90,0.7) 0%,rgba(255,180,60,0.3) 40%,rgba(255,160,40,0.08) 65%,transparent 80%);
    }
    .rh-l1{width:90px;height:90px;top:5%;left:3%;animation:lanternPulse 4s ease-in-out infinite}
    .rh-l2{width:110px;height:110px;top:-5%;left:23%;animation:lanternPulse 3.5s ease-in-out infinite 0.5s}
    .rh-l3{width:110px;height:110px;top:-5%;left:57%;animation:lanternPulse 3.8s ease-in-out infinite 1.2s}
    .rh-l4{width:70px;height:70px;top:30%;right:15%;animation:lanternPulse 4.2s ease-in-out infinite 2s}
    @keyframes lanternPulse{
      0%,100%{opacity:0.4;transform:scale(0.9)}
      50%{opacity:1;transform:scale(1.3)}
    }
    .rh-icons{margin-bottom:16px;display:flex;justify-content:center;gap:10px}
    .rh-icon{
      width:50px;height:50px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:13px;font-weight:700;letter-spacing:0.5px;
      text-transform:uppercase;
      box-shadow:0 2px 8px rgba(0,0,0,0.08);
      border:2px solid rgba(255,255,255,0.8);
    }
    .rh-icon-svg{
      background:transparent !important;border:none !important;
      box-shadow:none !important;border-radius:0 !important;
      width:52px;height:52px;
    }
    .rh-icon-svg svg{width:100%;height:100%}
    .fc-icon-svg{width:34px;height:34px;flex-shrink:0}
    .fc-icon-svg svg{width:100%;height:100%}

    /* ── Formula micro-animations ── */
    .anim-container{width:220px;height:180px;margin:0 auto 16px;position:relative;overflow:hidden}
    .anim-container svg{width:100%;height:100%}
    /* 1: Bubbling vial */
    @keyframes bubbleRise{0%{transform:translateY(0);opacity:0.7}50%{opacity:1}100%{transform:translateY(-50px);opacity:0}}
    @keyframes vaporDrift{0%{transform:translateY(0) scaleX(1);opacity:0.5}50%{transform:translateY(-18px) scaleX(1.3);opacity:0.3}100%{transform:translateY(-36px) scaleX(0.6);opacity:0}}
    @keyframes liquidWave{0%,100%{d:path("M45 75 Q60 72 75 75 Q90 78 105 75 L105 95 L45 95 Z")}50%{d:path("M45 75 Q60 78 75 75 Q90 72 105 75 L105 95 L45 95 Z")}}
    /* 2: Orbiting elements */
    @keyframes orbit1{0%{transform:rotate(0deg) translateX(48px) rotate(0deg)}100%{transform:rotate(360deg) translateX(48px) rotate(-360deg)}}
    @keyframes orbit2{0%{transform:rotate(120deg) translateX(54px) rotate(-120deg)}100%{transform:rotate(480deg) translateX(54px) rotate(-480deg)}}
    @keyframes orbit3{0%{transform:rotate(240deg) translateX(42px) rotate(-240deg)}100%{transform:rotate(600deg) translateX(42px) rotate(-600deg)}}
    @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    /* 3: Lava-lamp plume */
    @keyframes blobRise1{0%{transform:translateY(0) scale(1);opacity:0.8}40%{transform:translateY(-25px) scale(1.3);opacity:0.9}70%{transform:translateY(-45px) scale(0.9);opacity:0.5}100%{transform:translateY(-60px) scale(0.6);opacity:0}}
    @keyframes blobRise2{0%{transform:translateY(0) scale(0.8);opacity:0.6}50%{transform:translateY(-30px) scale(1.1);opacity:0.8}100%{transform:translateY(-55px) scale(0.7);opacity:0}}
    @keyframes blobMerge{0%,100%{rx:8;ry:8}30%{rx:11;ry:6}60%{rx:6;ry:11}}
    /* 4: Suspended droplets */
    @keyframes dropBob1{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    @keyframes dropBob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    @keyframes dropFall{0%{transform:translateY(0);opacity:1}60%{transform:translateY(20px);opacity:1}80%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:0}}
    @keyframes rippleOut{0%{r:0;opacity:0.6}60%{r:12;opacity:0.2}100%{r:16;opacity:0}}
    /* 5: Blooming halo */
    @keyframes petalOpen1{0%,100%{transform:rotate(0deg) scale(0.4);opacity:0.2}50%{transform:rotate(15deg) scale(1);opacity:0.5}}
    @keyframes petalOpen2{0%,100%{transform:rotate(0deg) scale(0.5);opacity:0.3}50%{transform:rotate(-10deg) scale(1.1);opacity:0.4}}
    @keyframes haloPulse{0%,100%{r:14;opacity:0.3}50%{r:18;opacity:0.15}}
    @keyframes haloBreath{0%,100%{transform:scale(0.9)}50%{transform:scale(1.05)}}

    /* Quick-pick mood tags */
    .mood-picks{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
    .mood-picks-label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px}
    .mood-tags{display:flex;flex-wrap:wrap;gap:6px}
    .mood-tag{
      padding:6px 14px;border-radius:20px;font-size:11px;font-weight:500;
      border:1px solid var(--line2);background:white;cursor:pointer;
      transition:all .15s;color:var(--ink2);
    }
    .mood-tag:hover{border-color:var(--ink);color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}

    /* Last formula panel */
    .last-formula{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
    .lf-header{position:relative;text-align:center;margin-bottom:10px}
    .lf-label{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:0.5px;text-transform:uppercase}
    .lf-prompt{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;max-width:85%;margin-left:auto;margin-right:auto}
    .lf-mode{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:10px;color:var(--muted);font-weight:500;letter-spacing:0.3px}
    .lf-view-wrap{position:absolute;right:0;top:50%;transform:translateY(-50%)}
    .lf-table{width:100%;border-collapse:collapse;margin-top:12px;font-family:'Inter',system-ui,-apple-system,sans-serif}
    .lf-table th{
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      font-size:10px;font-weight:600;color:var(--gold2);text-transform:uppercase;letter-spacing:1.4px;
      text-align:left;padding:7px 8px;border-bottom:1px solid rgba(184,150,78,0.25);
    }
    .lf-table th:nth-child(n+2){text-align:right}
    .lf-table td{
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      font-size:12px;padding:6px 8px;border-bottom:1px solid rgba(184,150,78,0.10);color:var(--ink2);
      line-height:1.4;
    }
    .lf-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted)}
    .lf-table tr:last-child td{border-bottom:none}
    .lf-table .lf-name{font-weight:600;color:var(--ink)}
    .lf-table .lf-role{
      display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle;
    }
    .lf-totals{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
    .lf-stat{
      font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:10px;color:var(--muted);
    }
    .lf-stat b{color:var(--ink);font-weight:700}
    .lf-view-btn{
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      font-size:10px;font-weight:600;color:var(--gold2);cursor:pointer;
      background:none;border:none;padding:0;letter-spacing:0.3px;
    }
    .lf-view-btn:hover{text-decoration:underline}
    .lf-empty{font-size:12px;color:var(--muted2);font-style:italic;padding:8px 0}

    /* Inspiration active card */
    .inspire-active-card{
      background:var(--warm-gradient);border:1px solid var(--line);border-radius:12px;
      padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
    }
    .iac-info{flex:1}
    .iac-brand{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
    .iac-name{font-size:14px;font-weight:700;color:var(--ink);margin-top:2px}
    .iac-badge{
      font-size:9px;font-weight:700;color:var(--gold2);background:var(--gold-soft);
      padding:3px 8px;border-radius:10px;letter-spacing:0.3px;text-transform:uppercase;
      flex-shrink:0;
    }
    .rh-card{
      background:rgba(255,255,255,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      border-radius:16px;padding:20px 28px 16px;max-width:480px;margin:0 auto;
      border:1px solid rgba(255,255,255,0.5);
      box-shadow:0 4px 24px rgba(60,50,30,0.08);
    }
    .result-hero h4{
      font-size:24px;font-weight:300;letter-spacing:0.3px;margin-bottom:6px;
      color:#2c2418;font-style:italic;
    }
    .rh-desc{
      font-size:12px;color:#5a4f42;line-height:1.6;
      letter-spacing:0.2px;font-weight:400;margin:0;
    }
    .rh-inspired{
      font-size:10px;color:var(--gold2);margin-top:8px;font-weight:500;letter-spacing:0.8px;
      text-transform:uppercase;
    }
    .rh-history{margin-top:10px;padding-top:8px;border-top:1px solid rgba(0,0,0,0.08)}
    .rh-history-label{
      font-size:9px;font-weight:700;color:var(--muted);letter-spacing:1.2px;
      text-transform:uppercase;margin-bottom:5px;
    }
    .rh-history-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px;justify-content:center}
    .rh-history-step{
      background:rgba(60,50,30,0.06);border:1px solid rgba(60,50,30,0.18);
      color:#5a4f42;border-radius:12px;padding:3px 9px;font-size:10.5px;
      cursor:pointer;line-height:1.3;transition:all .15s;font-family:inherit;
      max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .rh-history-step:hover{background:rgba(60,50,30,0.12);border-color:rgba(60,50,30,0.32)}
    .rh-history-step.current{
      background:var(--sage);border-color:var(--sage);color:#fff;font-weight:600;cursor:default;
    }
    .rh-history-step.current:hover{background:var(--sage);border-color:var(--sage)}
    .rh-history-arrow{color:rgba(60,50,30,0.4);font-size:10px;user-select:none}
    .rh-history-actions{display:flex;justify-content:center;margin-top:6px}
    .rh-history-revert{
      background:transparent;border:1px solid var(--gold);color:var(--gold2);
      border-radius:12px;padding:4px 12px;font-size:10.5px;font-weight:600;
      letter-spacing:0.2px;cursor:pointer;font-family:inherit;
      transition:all .15s;
    }
    .rh-history-revert:hover{background:var(--gold);color:#fff}

    .section-label{
      font-size:10px;font-weight:700;color:var(--muted);margin:20px 0 8px;
      text-transform:uppercase;letter-spacing:1px;
    }

    /* Note pyramid */

/* ── Note pyramid (.np-*) (2918-2935) ───────────────────────── */
    .note-pyramid{display:flex;flex-direction:column;gap:6px}
    .np-tier{display:flex;align-items:flex-start;gap:12px}
    .np-label{
      width:48px;font-size:10px;font-weight:700;text-align:right;text-transform:uppercase;
      letter-spacing:0.5px;flex-shrink:0;padding-top:4px;
    }
    .np-label.top{color:var(--top-c)}
    .np-label.heart{color:var(--heart-c)}
    .np-label.base{color:var(--base-c)}
    .np-notes{display:flex;gap:4px;flex-wrap:wrap}
    .np-note{
      padding:5px 12px;border-radius:8px;font-size:11px;font-weight:500;
      transition:transform .1s;
    }
    .np-note:hover{transform:scale(1.05)}
    .np-note.top{background:rgba(196,163,90,0.12);color:#8a7030;border:1px solid rgba(196,163,90,0.15)}
    .np-note.heart{background:rgba(196,114,126,0.12);color:#904050;border:1px solid rgba(196,114,126,0.15)}
    .np-note.base{background:rgba(139,126,181,0.12);color:#5a5080;border:1px solid rgba(139,126,181,0.15)}

/* ── Ask panel (.rx-ask + Polish panel top tabs) (3289-3402) ── */
    .rx-ask{
      margin-top:14px;border:1px solid var(--line);border-radius:12px;
      background:var(--card);overflow:hidden;
    }
    .rx-ask.rx-ask-full{margin-top:0;border:none;background:transparent}
    .rx-ask-head{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      width:100%;padding:10px 14px;cursor:pointer;user-select:none;
      border:none;background:transparent;text-align:left;
      border-bottom:1px solid transparent;
      transition:background-color var(--dur-fast) var(--ease-out),
                 border-color var(--dur-fast) var(--ease-out);
    }
    .rx-ask.rx-ask-full .rx-ask-head{display:none}
    .rx-ask.rx-ask-open .rx-ask-head{border-bottom-color:var(--line)}
    .rx-ask-head:hover{background:rgba(212,173,91,0.04)}
    .rx-ask-title{
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;
      font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0.3px;
    }
    .rx-ask-title svg{stroke:#d4ad5b;flex-shrink:0}
    .rx-ask-sub{
      font-size:10.5px;color:var(--muted);letter-spacing:0.2px;font-weight:500;
    }
    .rx-ask-toggle{
      font-size:10px;font-weight:700;color:var(--muted);letter-spacing:0.6px;
      padding:3px 8px;border-radius:999px;border:1px solid var(--line);
      text-transform:uppercase;flex-shrink:0;
    }
    .rx-ask.rx-ask-open .rx-ask-toggle{color:var(--ink);border-color:var(--ink)}
    .rx-ask-body{
      display:none;flex-direction:column;gap:10px;padding:12px 14px;
    }
    .rx-ask.rx-ask-open .rx-ask-body,
    .rx-ask.rx-ask-full .rx-ask-body{display:flex}
    .rx-ask-hint{
      font-size:11px;color:var(--muted);line-height:1.45;
    }
    .rx-ask-chips{display:flex;flex-wrap:wrap;gap:5px}
    .rx-ask-chip{
      padding:5px 11px;border-radius:999px;
      background:var(--card2,#f8f5ee);color:var(--ink);
      border:1px solid var(--line);font-size:10.5px;font-weight:600;
      cursor:pointer;letter-spacing:0.15px;
      transition:border-color var(--dur-fast) var(--ease-out),
                 background-color var(--dur-fast) var(--ease-out),
                 transform var(--dur-fast) var(--ease-out);
    }
    .rx-ask-chip:hover{
      border-color:#d4ad5b;background:rgba(212,173,91,0.08);
      transform:translateY(-1px);
    }
    .rx-ask-messages{
      display:flex;flex-direction:column;gap:8px;
      max-height:260px;overflow-y:auto;padding:2px 2px;
    }
    .rx-ask-msg{
      font-size:12px;line-height:1.55;padding:9px 12px;border-radius:10px;
      max-width:92%;word-wrap:break-word;
    }
    .rx-ask-msg.user{
      background:var(--ink);color:#fffbef;
      align-self:flex-end;border-bottom-right-radius:3px;
    }
    .rx-ask-msg.bot{
      background:var(--card2,#f8f5ee);color:var(--ink);
      align-self:flex-start;border-bottom-left-radius:3px;
      border:1px solid var(--line);
    }
    .rx-ask-msg.bot b{color:#8a7030}
    .rx-ask-msg.bot .rx-ask-step{
      display:block;margin-top:6px;padding:6px 10px;
      border-radius:8px;background:rgba(212,173,91,0.08);
      border:1px solid rgba(212,173,91,0.25);font-size:11.5px;
    }
    .rx-ask-msg.bot .rx-ask-cta{
      display:inline-block;margin-top:8px;padding:6px 14px;
      border-radius:8px;background:var(--ink);color:#fffbef;
      font-size:10.5px;font-weight:700;letter-spacing:0.3px;
      cursor:pointer;border:none;text-transform:uppercase;
    }
    .rx-ask-msg.bot .rx-ask-cta:hover{background:#d4ad5b;color:#1a1a1f}
    .rx-ask-msg.thinking{
      background:var(--card2,#f8f5ee);color:var(--muted);font-style:italic;
      align-self:flex-start;border:1px dashed var(--line);
    }
    .rx-ask-input{display:flex;gap:6px;align-items:center;padding-top:4px}
    .rx-ask-input input{
      flex:1;padding:8px 12px;border:1px solid var(--line);
      background:var(--card);color:var(--ink);
      border-radius:9px;font-size:12px;font-family:inherit;
    }
    .rx-ask-input input:focus{outline:none;border-color:#d4ad5b}
    .rx-ask-send{
      padding:8px 14px;border:none;border-radius:9px;
      background:var(--ink);color:#fffbef;
      font-size:11px;font-weight:700;letter-spacing:0.3px;cursor:pointer;
    }
    .rx-ask-send:hover{background:#d4ad5b;color:#1a1a1f}

    /* ── Polish panel top-level tabs (Polish | Ask) ── */
    .s2-section-tabs{
      display:flex;gap:4px;
      padding:4px;background:var(--card2,#f8f5ee);border-radius:10px;
      border:1px solid var(--line);margin-bottom:14px;
    }
    .s2-section-tab{
      flex:1;padding:8px 10px;border:none;background:transparent;
      font-size:11.5px;font-weight:600;color:var(--muted);
      border-radius:7px;cursor:pointer;letter-spacing:0.3px;
    }
    .s2-section-tab:hover{color:var(--ink)}
    .s2-section-tab.active{background:var(--ink);color:#fffbef}


/* ── How-it-wears timeline (.hiw-*) (3403-3463) ─────────────── */
    /* ── "How it wears" — time-story education block beneath the pyramid ── */
    .how-it-wears{
      margin-top:14px;padding:12px 14px;
      border:1px solid var(--line);border-radius:12px;
      background:var(--card);
    }
    .hiw-headline{
      font-size:11px;font-weight:700;color:var(--ink);letter-spacing:0.5px;
      text-transform:uppercase;margin-bottom:10px;
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    }
    .hiw-headline svg{stroke:var(--muted);opacity:0.8}
    /* Council F5: visible confidence badge on wear-time predictions. */
    .hiw-confidence{
      margin-left:auto;display:inline-flex;align-items:center;gap:5px;
      font-size:9.5px;font-weight:600;letter-spacing:0.3px;
      color:#5a7c5e;text-transform:none;
      padding:3px 8px;border-radius:999px;
      background:rgba(122,158,126,0.12);
      cursor:help;
    }
    .hiw-confidence-dot{
      width:6px;height:6px;border-radius:50%;
      background:#7a9e7e;flex-shrink:0;
    }
    .hiw-timeline{display:flex;flex-direction:column;gap:10px}
    .hiw-row{
      display:flex;gap:12px;padding:10px 12px;border-radius:10px;
      background:var(--card2,rgba(0,0,0,0.015));
      border-left:3px solid var(--line);
    }
    .hiw-row.hiw-top{border-left-color:var(--top-c, #c4a35a)}
    .hiw-row.hiw-heart{border-left-color:var(--heart-c, #c4727e)}
    .hiw-row.hiw-base{border-left-color:var(--base-c, #8b7eb5)}
    .hiw-time{
      flex-shrink:0;width:86px;font-size:10.5px;font-weight:700;
      color:var(--ink);letter-spacing:0.3px;padding-top:1px;
    }
    .hiw-body{flex:1;min-width:0}
    .hiw-tier{
      font-size:11.5px;font-weight:700;letter-spacing:0.3px;
      margin-bottom:3px;
    }
    .hiw-row.hiw-top .hiw-tier{color:#8a7030}
    .hiw-row.hiw-heart .hiw-tier{color:#904050}
    .hiw-row.hiw-base .hiw-tier{color:#5a5080}
    .hiw-desc{
      font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:6px;
    }
    .hiw-notes{
      display:flex;flex-wrap:wrap;gap:4px;
    }
    .hiw-notes .np-note{font-size:10.5px;padding:3px 9px}
    .hiw-foot{
      font-size:10.5px;color:var(--muted);margin-top:10px;
      padding-top:9px;border-top:1px dashed var(--line);line-height:1.5;
    }
    .hiw-foot a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--muted)}
    .hiw-foot a:hover{border-bottom-color:var(--ink)}

    /* Ingredient bars */

/* ── Ingredient bars + legend (3464-3540) ───────────────────── */
    .ing-bars{display:flex;flex-direction:column;gap:2px}
    .ing-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:2px}
    .ing-name-wrap{width:140px;min-width:90px;text-align:right;flex-shrink:0}
    .ing-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
    .ing-scent{font-size:9px;color:var(--muted);font-style:italic;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tip-card{background:rgba(107,142,95,0.08);border:1px solid rgba(107,142,95,0.25);border-radius:12px;padding:10px 14px;margin-bottom:8px;cursor:pointer;transition:background .2s}
    .tip-card:hover{background:rgba(107,142,95,0.15)}
    .tip-card.active{background:var(--sage);border-color:var(--sage)}
    .tip-card.active .tip-name,.tip-card.active .tip-why{color:#fff}
    .tip-name{font-size:13px;font-weight:600;color:var(--sage);text-transform:capitalize}
    .tip-why{font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.3}
    .tip-note{font-size:10.5px;color:#b8860b;margin-top:5px;line-height:1.3;font-style:italic}
    .tip-card.active .tip-note{color:rgba(255,248,235,0.85)}
    /* Bundle visual grouping for the result-modal Try-Adding chips —
       same colour vocabulary as the /suggest modal so the user maps
       one mental model across both surfaces.
       Each .in-bundle card carries a data-bundle-slot attribute (A, B, C…)
       so two different bundles in the same list get distinct accent
       colours instead of all sharing the same green. */
    .tip-card.in-bundle{padding-left:11px}
    .tip-card.alt-direction{border-left:3px solid #d6b691;padding-left:11px}
    /* Group A — sage green (matches the existing bundle palette) */
    .tip-card.in-bundle[data-bundle-slot="A"]{border-left:3px solid #a3c2a3}
    .tip-card.in-bundle[data-bundle-slot="A"].active{border-left-color:#7aa37a}
    /* Group B — dusty teal */
    .tip-card.in-bundle[data-bundle-slot="B"]{border-left:3px solid #8db3c2}
    .tip-card.in-bundle[data-bundle-slot="B"].active{border-left-color:#6a92a3}
    /* Group C — muted plum */
    .tip-card.in-bundle[data-bundle-slot="C"]{border-left:3px solid #b89ac2}
    .tip-card.in-bundle[data-bundle-slot="C"].active{border-left-color:#9377a3}
    /* Group D — warm amber */
    .tip-card.in-bundle[data-bundle-slot="D"]{border-left:3px solid #c2a875}
    .tip-card.in-bundle[data-bundle-slot="D"].active{border-left-color:#a38855}
    /* Tiny chip in the corner that names the group ("Group A") so users
       can scan the list and tell at a glance which cards belong together. */
    .tip-group-tag{
      display:inline-block;
      font-family:var(--font-display, Georgia, serif);
      font-size:9.5px;font-weight:700;letter-spacing:1.6px;
      text-transform:uppercase;
      padding:2px 7px;border-radius:999px;
      margin-left:8px;vertical-align:middle;
      background:rgba(0,0,0,0.04);
      border:1px solid currentColor;
      opacity:0.92;
    }
    .tip-card.in-bundle[data-bundle-slot="A"] .tip-group-tag{color:#5a8a5a}
    .tip-card.in-bundle[data-bundle-slot="B"] .tip-group-tag{color:#4a7585}
    .tip-card.in-bundle[data-bundle-slot="C"] .tip-group-tag{color:#7a5a8a}
    .tip-card.in-bundle[data-bundle-slot="D"] .tip-group-tag{color:#9a7a3a}
    .tip-card.active .tip-group-tag{
      color:rgba(255,255,255,0.9) !important;
      background:rgba(255,255,255,0.18);
      border-color:rgba(255,255,255,0.3);
    }
    /* The bundle badge inside a tip card — slightly smaller margins than
       inside the suggest modal so it sits cleanly under the chip name. */
    .tip-bundle-badge{margin-left:0 !important;margin-top:6px}
    .tip-card.active .suggest-bundle{
      background:rgba(255,255,255,0.18);color:#fff;
      border-color:rgba(255,255,255,0.3);
    }
    .tip-card.active .suggest-bundle-label{color:rgba(255,255,255,0.85)}
    .res-why-section{background:rgba(255,248,235,0.7);border-radius:12px;padding:14px 18px;margin-top:12px}
    .res-why-section .section-label{margin-top:0}
    .res-why-text{font-size:12px;color:var(--ink2);line-height:1.5}
    .ing-track{flex:1;height:18px;background:var(--accent-soft);border-radius:6px;overflow:hidden}
    .ing-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 6px;font-size:9px;font-weight:700;color:white;min-width:fit-content;white-space:nowrap}
    .ing-fill.identity{background:var(--id-c)}
    .ing-fill.family_support{background:var(--sup-c)}
    .ing-fill.bridge{background:var(--bridge-c)}
    .ing-fill.elastic_filler{background:var(--filler-c)}
    .ing-fill.unknown{background:#999}
    .ing-vol{font-size:10px;color:var(--muted);width:60px;min-width:60px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
    .ing-legend{display:flex;gap:10px;margin:4px 0;font-size:10px;color:var(--muted)}
    .ing-legend span{display:flex;align-items:center;gap:3px}
    .ing-legend .sw{width:8px;height:8px;border-radius:2px}

/* ── Modal mobile responsive (4213-4288) ────────────────────── */
    /* ── Tablet (768px) ── */
    @media(max-width:768px){
      .hero h1{font-size:clamp(24px, 5vw, 36px)}
      .hero p{font-size:clamp(13px, 2.5vw, 15px)}
      .modal-top h3{font-size:clamp(14px, 3vw, 17px)}
      .modal{width:min(720px, 98vw)}
      .modal-content{padding:0 16px 20px}
      .modal-top{padding:14px 16px}
      .result-hero{min-height:200px;padding:40px 16px 24px}
      .rh-card{padding:14px 18px 12px}
      .result-hero h4{font-size:20px}
      .section-label{font-size:9px;margin:14px 0 6px}
      .ing-name-wrap{width:110px;min-width:70px}
      .ing-name{font-size:10px}
      .tip-card{padding:8px 12px}
      .tip-name{font-size:12px}
      .sidebar-card{padding:12px}
    }
    /* ── Mobile (600px) ── */
    @media(max-width:600px){
      .hero h1{font-size:30px}
      .page{padding:0 16px 32px}
      .nav-link.hide-m{display:none}
      .nav-inner{height:52px;padding:0 12px}
      .nav-logo{font-size:18px;letter-spacing:2px}
      .nav-link{font-size:10px;padding:6px 10px}
      .create-layout{grid-template-columns:1fr}
      .lib-grid{grid-template-columns:1fr}
      .lib-list-row{grid-template-columns:1fr 80px 50px 36px;font-size:11px}
      .lib-list-row .row-hide-m{display:none}
      .qv-drawer{width:100vw;max-width:100vw}
      .lib-header{flex-wrap:wrap;gap:8px}
      .lib-toolbar{flex-direction:column}
      .lib-toolbar .search-wrap{width:100%}
      .lib-toolbar-right{width:100%;justify-content:space-between}
      .lib-tabs{overflow-x:auto;scrollbar-width:none}
      .lib-tabs::-webkit-scrollbar{display:none}
      .lib-tab{padding:8px 10px;font-size:10px;white-space:nowrap}
      .brand-tabs{grid-template-columns:repeat(7, 1fr)}
      .newsletter-form{flex-direction:column}
      .newsletter-card{padding:32px 16px;border-radius:16px}
      .footer-top{grid-template-columns:1fr 1fr;gap:16px}
      .modal{border-radius:16px;width:min(720px, 100vw);max-height:96vh}
      .modal-content{padding:0 14px 16px}
      .rh-icon{width:44px;height:44px}
      .dir-tag{padding:5px 11px;font-size:10px}
      #btnGenerate{padding:12px 28px;font-size:13px}
      .share-friend-item{padding:8px 10px}
      .result-hero{min-height:160px;padding:32px 12px 20px}
      .result-hero h4{font-size:18px}
      .rh-card{padding:12px 14px 10px}
      .rh-desc{font-size:12px}
      .np-label{font-size:9px;min-width:50px}
      .np-note{font-size:10px;padding:3px 8px}
      .ing-name-wrap{width:90px;min-width:60px}
      .ing-vol{font-size:9px;width:50px}
      #page-messages .btn-sm{padding:6px 10px;font-size:10px}
      #chatMessages{max-height:50vh !important}
    }
    /* ── Small mobile (400px) ── */
    @media(max-width:400px){
      .page{padding:0 12px 24px}
      .footer-top{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column;gap:8px;text-align:center}
      .hero h1{font-size:20px}
      .hero p{font-size:13px}
      .nav-name{display:none}
      .nav-link{font-size:9px;padding:5px 8px;letter-spacing:0.4px}
      .modal-top h3{font-size:13px}
      .brand-tabs{grid-template-columns:repeat(5, 1fr)}
      .lib-header h2{font-size:18px}
      .panel-body{padding:14px}
      .panel-head{padding:12px 14px;font-size:9px}
      #page-messages .lib-header{flex-direction:column;align-items:flex-start;gap:6px}
    }


/* ════════════════════════════════════════════════════════════════════
   LUXURY FORMULA MODAL (.formula-luxe) — Le Labo / Aesop overrides
   Lifted from fragra_ui.html lines 7733-8181 (second style block).
   ════════════════════════════════════════════════════════════════════ */
  /* ── Modal chrome ─────────────────────────────────────────────────── */
  /* The shared auth_modal.css sets .modal{max-width:640px}, which clamps
     the result modal to a narrow column. The result-modal layout (hero
     illustration + ingredient bars + tips grid) needs ~900px to breathe,
     so we override max-width here. !important is needed because the
     auth_modal.css rule also uses single-class specificity and loads
     earlier in the cascade. */
  .formula-luxe{
    background:#fdfcf9 !important;
    border-radius:2px !important;
    border:1px solid rgba(184,150,78,0.18);
    box-shadow:0 12px 60px rgba(40,28,12,0.18) !important;
    max-width:900px !important;
    width:min(900px, 96vw) !important;
  }
  .formula-luxe .modal-top{
    background:#fdfcf9 !important;
    border-bottom:1px solid rgba(184,150,78,0.15);
    padding:18px 28px !important;
  }
  .formula-luxe .modal-top h3{
    font-family:var(--font-display, Georgia, serif);
    font-size:10px !important;font-weight:600 !important;
    letter-spacing:3.5px !important;text-transform:uppercase;
    color:var(--gold2) !important;margin:0 !important;
  }
  .formula-luxe .modal-top .close-btn{
    width:32px;height:32px;border-radius:0 !important;
    background:transparent !important;color:var(--ink) !important;
    border:1px solid rgba(184,150,78,0.25);font-weight:300;font-size:20px;
    transition:all .2s;
  }
  .formula-luxe .modal-top .close-btn:hover{
    background:var(--ink) !important;color:#fff !important;
    border-color:var(--ink);
  }
  .formula-luxe .modal-top .rh-top-deco{display:none !important}
  /* No top padding — the result-hero sits flush against the modal-top
     so the cream band flows directly into the lab illustration. A 32px
     top padding here used to render as a "white string" between the
     "YOUR FORMULA" header and the hero. The hero's own ::before gradient
     fades the bottom of the illustration back into cream. */
  .formula-luxe .modal-content{padding:0 36px 40px !important}

  /* ── Hero (the illustration) ──────────────────────────────────────── */
  .formula-luxe .result-hero{
    margin:0 -36px 32px !important;
    border-radius:0 !important;
    padding:80px 24px 56px !important;
    min-height:300px !important;
  }
  .formula-luxe .result-hero::before{
    background:linear-gradient(180deg,
      rgba(253,252,249,0.05) 0%,
      rgba(253,252,249,0.12) 40%,
      rgba(253,252,249,0.45) 80%,
      rgba(253,252,249,0.94) 96%,
      #fdfcf9 100%) !important;
  }
  /* Thin sepia frame inside the illustration so the lab scene reads as
     a framed picture rather than bleeding into the modal cream. Drawn
     via an absolute ::after with pointer-events:none so it doesn't
     interfere with the centered .rh-card. Inset 12px from each edge,
     1px soft sepia line. Stays under the children (no explicit z-index
     ⇒ same stacking level as ::before / gradient, behind the card). */
  .formula-luxe .result-hero::after{
    content:"";
    position:absolute;
    top:12px;right:12px;bottom:12px;left:12px;
    border:1px solid rgba(140,100,60,0.32);
    pointer-events:none;
  }
  .formula-luxe .rh-lantern{opacity:0.30 !important}
  .formula-luxe .rh-icons{display:none !important}
  .formula-luxe .rh-card{
    background:rgba(253,252,249,0.70) !important;
    backdrop-filter:blur(10px) saturate(0.85) !important;
    -webkit-backdrop-filter:blur(10px) saturate(0.85) !important;
    border:1px solid rgba(184,150,78,0.18) !important;
    box-shadow:0 8px 28px rgba(40,28,12,0.10) !important;
    border-radius:1px !important;
    padding:26px 40px 22px !important;max-width:580px !important;
  }
  .formula-luxe .rh-card::before{
    content:"YOUR FORMULA";display:block;
    font-family:var(--font-display, Georgia, serif);
    font-size:10px;font-weight:600;letter-spacing:3.5px;
    color:var(--gold2);text-transform:uppercase;margin-bottom:14px;
    text-shadow:0 0 18px rgba(253,252,249,0.95), 0 0 8px rgba(253,252,249,0.85);
  }
  .formula-luxe .rh-card::after{
    content:"";display:block;width:36px;height:1px;
    background:var(--gold2);margin:18px auto 0;opacity:0.65;
    box-shadow:0 0 12px rgba(253,252,249,0.6);
  }
  .formula-luxe .result-hero h4{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:32px !important;font-weight:400 !important;font-style:italic !important;
    color:#2a1f12 !important;letter-spacing:-0.4px !important;
    margin-bottom:12px !important;line-height:1.2;
    text-shadow:
      0 0 32px rgba(253,252,249,0.98),
      0 0 18px rgba(253,252,249,0.92),
      0 0 6px rgba(253,252,249,0.75),
      0 1px 2px rgba(60,40,15,0.18) !important;
  }
  .formula-luxe .rh-desc{
    font-size:13px !important;color:#5a4a32 !important;
    line-height:1.6 !important;letter-spacing:0.2px !important;
    text-shadow:0 0 18px rgba(253,252,249,0.9), 0 0 8px rgba(253,252,249,0.8) !important;
  }
  .formula-luxe .rh-inspired{
    font-size:9.5px !important;letter-spacing:2.2px !important;
    color:var(--gold2) !important;margin-top:12px !important;
    text-shadow:0 0 14px rgba(253,252,249,0.9) !important;
  }

  /* ── Buy card ─────────────────────────────────────────────────────── */
  .formula-luxe .res-buy-card{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.20) !important;
    border-radius:2px !important;
    padding:22px 28px !important;
    box-shadow:none !important;
    margin-bottom:14px !important;
  }
  .formula-luxe .res-buy-price{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:24px !important;font-weight:300 !important;
    color:var(--ink) !important;letter-spacing:-0.2px !important;
  }
  .formula-luxe .res-buy-vol{
    font-size:11.5px !important;color:var(--muted) !important;
    letter-spacing:0.4px;text-transform:uppercase;
  }
  .formula-luxe .res-buy-meta{
    font-size:10px !important;color:var(--muted) !important;
    letter-spacing:1.4px !important;text-transform:uppercase;margin-top:6px;
  }
  .formula-luxe .res-buy-sample{
    background:transparent !important;
    border:1px solid rgba(184,150,78,0.35) !important;
    border-radius:0 !important;
    padding:11px 22px !important;
    font-size:10.5px !important;font-weight:600 !important;
    letter-spacing:2px !important;text-transform:uppercase;
    color:var(--ink2) !important;
    transition:all .2s;
  }
  .formula-luxe .res-buy-sample:hover{
    border-color:var(--gold2) !important;color:var(--ink) !important;
    background:rgba(184,150,78,0.05) !important;
  }
  .formula-luxe .res-buy-primary{
    background:var(--ink) !important;color:#fff !important;
    border:none !important;border-radius:0 !important;
    padding:12px 26px !important;
    font-size:10.5px !important;font-weight:600 !important;
    letter-spacing:2px !important;text-transform:uppercase;
    transition:all .25s;box-shadow:none !important;
  }
  .formula-luxe .res-buy-primary:hover{
    background:var(--gold2) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 6px 18px rgba(0,0,0,0.18) !important;
  }

  /* ── Section labels (Scent Profile, etc.) ─────────────────────────── */
  .formula-luxe .section-label{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:10px !important;font-weight:600 !important;
    letter-spacing:3px !important;text-transform:uppercase;
    color:var(--gold2) !important;
    margin:36px 0 16px !important;
    padding-bottom:8px;border-bottom:1px solid rgba(184,150,78,0.18);
  }

  /* ── Note pyramid (TOP / HEART / BASE) ────────────────────────────── */
  .formula-luxe .note-pyramid{gap:14px !important;padding:8px 0}
  .formula-luxe .np-tier{align-items:center !important;gap:18px !important}
  .formula-luxe .np-label{
    font-family:var(--font-display, Georgia, serif) !important;
    width:56px !important;font-size:10px !important;font-weight:600 !important;
    letter-spacing:2.2px !important;color:var(--gold2) !important;
    padding-top:2px !important;
  }
  .formula-luxe .np-label.top,
  .formula-luxe .np-label.heart,
  .formula-luxe .np-label.base{color:var(--gold2) !important}
  .formula-luxe .np-notes{gap:6px !important}
  .formula-luxe .np-note,
  .formula-luxe .np-note.top,
  .formula-luxe .np-note.heart,
  .formula-luxe .np-note.base{
    background:transparent !important;
    border:1px solid rgba(184,150,78,0.30) !important;
    color:var(--ink2) !important;
    border-radius:0 !important;
    padding:6px 14px !important;font-size:11.5px !important;
    font-weight:400 !important;letter-spacing:0.3px !important;
    font-family:inherit !important;
    transition:all .2s;
  }
  .formula-luxe .np-note:hover{
    transform:none !important;
    border-color:var(--gold2) !important;color:var(--ink) !important;
    background:rgba(184,150,78,0.05) !important;
  }

  /* ── How it wears timeline ────────────────────────────────────────── */
  .formula-luxe #resHowItWears{margin-top:16px}
  .formula-luxe .hiw-row{
    display:flex !important;gap:18px !important;
    border-left:1px solid rgba(184,150,78,0.25) !important;
    border-left-color:rgba(184,150,78,0.25) !important;
    background:transparent !important;
    padding:14px 18px !important;
    margin-bottom:6px;border-radius:0 !important;
  }
  .formula-luxe .hiw-row.hiw-top,
  .formula-luxe .hiw-row.hiw-heart,
  .formula-luxe .hiw-row.hiw-base{
    border-left-color:rgba(184,150,78,0.40) !important;
  }
  .formula-luxe .hiw-time{
    flex-shrink:0 !important;width:120px !important;
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:9.5px !important;letter-spacing:1.5px !important;
    color:var(--gold2) !important;text-transform:uppercase;
    font-weight:600 !important;
    white-space:nowrap !important;
    padding-top:3px;
  }
  .formula-luxe .hiw-body{flex:1;min-width:0;color:var(--muted) !important}
  .formula-luxe .hiw-tier{
    font-size:13px !important;font-weight:600 !important;
    color:var(--ink) !important;letter-spacing:0.1px;
    margin-bottom:5px;line-height:1.3;
  }
  .formula-luxe .hiw-row.hiw-top .hiw-tier,
  .formula-luxe .hiw-row.hiw-heart .hiw-tier,
  .formula-luxe .hiw-row.hiw-base .hiw-tier{color:var(--ink) !important}
  .formula-luxe .hiw-desc{
    font-size:12px !important;line-height:1.55 !important;
    color:var(--muted) !important;letter-spacing:0.1px;
    margin-bottom:0 !important;
  }

  /* ── Ask about this scent ─────────────────────────────────────────── */
  .formula-luxe .rx-ask{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.18) !important;
    border-radius:2px !important;
    margin-top:14px;
  }
  .formula-luxe .rx-ask-head{
    background:transparent !important;
    padding:14px 22px !important;
  }
  .formula-luxe .rx-ask-title{
    font-size:12px !important;font-weight:500 !important;
    color:var(--ink) !important;letter-spacing:0.3px;
  }
  .formula-luxe .rx-ask-sub{
    font-size:10.5px !important;color:var(--muted) !important;
    letter-spacing:0.4px;font-weight:400 !important;
  }
  .formula-luxe .rx-ask-toggle{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:9.5px !important;letter-spacing:2.2px !important;
    color:var(--gold2) !important;font-weight:600 !important;
  }

  /* ── CTAs (Sillage Lab, Recipe PDF, etc.) ─────────────────────────── */
  .formula-luxe .res-cta{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.22) !important;
    border-radius:2px !important;
    padding:16px 22px !important;
    box-shadow:none !important;
    transition:all .25s;
  }
  .formula-luxe .res-cta:hover{
    background:rgba(184,150,78,0.04) !important;
    border-color:var(--gold2) !important;
    transform:none !important;
  }
  .formula-luxe .res-cta .res-cta-label{
    font-size:12.5px !important;font-weight:500 !important;
    color:var(--ink) !important;letter-spacing:0.3px;
  }
  .formula-luxe .res-cta .res-cta-chip{
    background:transparent !important;
    border:1px solid rgba(184,150,78,0.40) !important;
    border-radius:0 !important;
    color:var(--gold2) !important;
    font-size:9px !important;font-weight:600 !important;
    letter-spacing:1.8px !important;text-transform:uppercase;
    padding:3px 8px !important;
  }
  .formula-luxe .res-cta-lock-badge{
    background:transparent !important;
    border:1px solid rgba(184,150,78,0.40) !important;
    border-radius:0 !important;
    color:var(--gold2) !important;
    font-size:9px !important;font-weight:600 !important;
    letter-spacing:1.5px !important;
    padding:4px 9px !important;
  }
  .formula-luxe .res-cta-sub{
    font-size:11.5px !important;color:var(--muted) !important;
    line-height:1.55 !important;padding:0 4px !important;
    margin-top:6px !important;letter-spacing:0.1px;
  }

  /* ── Ingredients block (always shown, no longer collapsed) ────────── */
  .formula-luxe .ing-block{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.18) !important;
    border-radius:0 !important;
    padding:18px 22px !important;
    margin-bottom:14px;
  }
  .formula-luxe .ing-legend{
    display:flex;flex-wrap:wrap;gap:14px;
    padding-bottom:12px;margin-bottom:12px;
    border-bottom:1px solid rgba(184,150,78,0.15);
    font-size:10px !important;letter-spacing:1.4px;
    text-transform:uppercase;color:var(--muted);
  }
  .formula-luxe .ing-legend .sw{
    display:inline-block;width:8px;height:8px;border-radius:50%;
    vertical-align:middle;margin-right:4px;
  }

  /* ── Polish collapse summary ──────────────────────────────────────── */
  .formula-luxe .res-polish-collapse{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.22) !important;
    border-radius:2px !important;
  }
  /* Polish: mode tabs container — clean strip, no heavy card */
  .formula-luxe .res-polish-modes,
  .formula-luxe .s2-mode-tabs{
    display:flex !important;gap:6px !important;
    background:transparent !important;border:none !important;
    padding:0 !important;border-radius:0 !important;
    margin-bottom:14px !important;
  }
  .formula-luxe .s2-mode-tab{
    flex:1;padding:11px 14px !important;
    background:transparent !important;border:1px solid rgba(184,150,78,0.30) !important;
    border-radius:0 !important;
    font-family:inherit !important;
    font-size:10.5px !important;font-weight:600 !important;
    color:var(--ink2) !important;
    letter-spacing:2px !important;text-transform:uppercase;
    cursor:pointer;transition:all .2s;
  }
  .formula-luxe .s2-mode-tab:hover{
    border-color:var(--gold2) !important;color:var(--ink) !important;
    background:rgba(184,150,78,0.04) !important;
  }
  .formula-luxe .s2-mode-tab.active{
    background:var(--ink) !important;color:#fff !important;
    border-color:var(--ink) !important;
  }
  /* Polish: mode description card — match cream/hairline aesthetic */
  .formula-luxe .s2-mode-desc{
    background:#fdfcf9 !important;
    border:1px solid rgba(184,150,78,0.18) !important;
    border-radius:0 !important;
    padding:18px 22px !important;
    margin-bottom:14px !important;
    color:var(--muted) !important;
  }
  .formula-luxe .s2-mode-desc .s2md-tagline{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:14px !important;font-weight:400 !important;font-style:italic !important;
    color:var(--ink) !important;line-height:1.4 !important;
    letter-spacing:0.1px !important;margin-bottom:12px !important;
  }
  .formula-luxe .s2-mode-desc .s2md-section{
    margin-top:12px !important;padding-top:12px !important;
    border-top:1px solid rgba(184,150,78,0.15) !important;
  }
  .formula-luxe .s2-mode-desc .s2md-section:first-of-type{
    margin-top:0 !important;padding-top:0 !important;border-top:none !important;
  }
  .formula-luxe .s2-mode-desc .s2md-label{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:9.5px !important;font-weight:600 !important;
    letter-spacing:2.2px !important;text-transform:uppercase;
    color:var(--gold2) !important;margin-bottom:6px !important;
  }
  .formula-luxe .s2-mode-desc .s2md-body{
    font-family:inherit !important;
    font-size:12.5px !important;line-height:1.55 !important;
    color:var(--ink2) !important;letter-spacing:0.1px;
  }
  .formula-luxe .s2-mode-desc .s2md-body em{
    font-style:normal !important;color:var(--muted) !important;
  }
  /* Polish: Run button + empty preview state */
  .formula-luxe .res-polish-run{margin-bottom:10px !important}
  .formula-luxe .res-polish-run .btn,
  .formula-luxe #s2RunBtn{
    background:var(--ink) !important;color:#fff !important;
    border:none !important;border-radius:0 !important;
    padding:11px 26px !important;
    font-family:inherit !important;font-size:10.5px !important;
    font-weight:600 !important;letter-spacing:2px !important;
    text-transform:uppercase;
  }
  .formula-luxe .res-polish-run .btn:hover,
  .formula-luxe #s2RunBtn:hover{background:var(--gold2) !important}
  .formula-luxe .s2-preview-area{
    min-height:0 !important;
  }
  .formula-luxe .s2-preview-empty{
    padding:10px 14px !important;
    border:none !important;border-radius:0 !important;
    background:transparent !important;
    font-size:11.5px !important;color:var(--muted) !important;
    text-align:left !important;
  }
  .formula-luxe .s2-preview-empty strong{color:var(--ink) !important;font-weight:600 !important}
  .formula-luxe .res-polish-summary{
    padding:16px 22px !important;
  }
  .formula-luxe .res-polish-summary-title{
    font-size:12.5px !important;color:var(--ink) !important;
    font-weight:500 !important;letter-spacing:0.3px;
  }
  .formula-luxe .res-polish-summary-sub{
    font-size:11px !important;color:var(--muted) !important;
    letter-spacing:0.2px;
  }
  .formula-luxe .res-polish-summary-cta{
    font-family:var(--font-display, Georgia, serif) !important;
    font-size:9.5px !important;color:var(--gold2) !important;
    letter-spacing:2.2px !important;text-transform:uppercase;font-weight:600;
  }
  .formula-luxe .res-polish-summary-pill{
    background:transparent !important;
    border:1px solid rgba(184,150,78,0.40) !important;
    color:var(--gold2) !important;border-radius:0 !important;
    font-size:9px !important;letter-spacing:1.5px !important;
    padding:2px 7px !important;margin-left:6px;
  }

  /* ── Margins between major sections ───────────────────────────────── */
  .formula-luxe #resAsk,
  .formula-luxe .res-buy-card{margin-bottom:14px}
  .formula-luxe > .modal-content > div[style*="margin-top:10px"],
  .formula-luxe details{margin-top:12px !important}

  /* ── Bottom action bar (Detailed feedback / Export / Close / Compare) — refine button styling */
  .formula-luxe .modal-content .btn-row .btn,
  .formula-luxe .modal-content button.btn-outline,
  .formula-luxe .modal-content button.btn-ghost{
    border-radius:0 !important;
    font-size:10.5px !important;letter-spacing:1.8px !important;
    text-transform:uppercase;font-weight:600 !important;
  }

  /* ── Mobile ───────────────────────────────────────────────────────── */
  @media (max-width:700px){
    .formula-luxe .modal-content{padding:20px 18px 28px !important}
    .formula-luxe .result-hero{margin:0 -18px 22px !important;padding:50px 16px 36px !important}
    .formula-luxe .result-hero h4{font-size:24px !important}
    .formula-luxe .res-buy-card{padding:16px 18px !important}
    .formula-luxe .res-buy-price{font-size:20px !important}
  }

/* ── Add-to-Bag confirmation modal ─────────────────────────────
   Replaces the legacy native prompt()+prompt()+confirm() chain that
   fired from "Order this perfume". Cream surface + sepia hairline +
   italic Fraunces title matches the rest of the editorial chrome
   (result modal, last-formula card, Shop CTA). The user lands on
   one screen with formula name, volume + concentration pickers, a
   live price summary, and a single confirm button. */
.atb-modal{
  max-width:520px !important;
  width:min(520px, 92vw) !important;
  background:#fdfcf9 !important;
  border:1px solid rgba(184,150,78,0.18);
  border-radius:2px !important;
  box-shadow:0 18px 56px rgba(40,28,12,0.22);
}
.atb-modal .modal-top{
  background:#fdfcf9 !important;
  border-bottom:1px solid rgba(184,150,78,0.18);
  padding:18px 26px !important;
}
.atb-modal .modal-top h3{
  font-family:var(--font-display, Georgia, serif);
  font-size:10px !important;font-weight:600 !important;
  letter-spacing:3.5px !important;text-transform:uppercase;
  color:var(--gold2) !important;margin:0 !important;
}
.atb-modal .modal-top .close-btn{
  width:32px;height:32px;border-radius:0 !important;
  background:transparent !important;color:var(--ink) !important;
  border:1px solid rgba(184,150,78,0.25);font-weight:300;font-size:20px;
  cursor:pointer;transition:all .2s;
}
.atb-modal .modal-top .close-btn:hover{
  background:var(--ink) !important;color:#fff !important;border-color:var(--ink);
}
.atb-modal .modal-content{padding:26px 28px 24px !important}

.atb-eyebrow{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:10px;letter-spacing:3.2px;font-weight:600;
  color:var(--gold2);text-transform:uppercase;
  text-align:center;
}
.atb-name{
  font-family:var(--font-display, Georgia, serif);
  font-style:italic;font-weight:400;
  font-size:22px;line-height:1.25;color:var(--ink);
  text-align:center;margin:8px auto 22px;
  max-width:420px;
}
.atb-section{margin-top:18px}
.atb-section-label{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:9.5px;letter-spacing:2.4px;font-weight:600;
  color:var(--gold2);text-transform:uppercase;
  margin-bottom:10px;
}

.atb-pills{
  display:flex;flex-wrap:wrap;gap:8px;
}
.atb-vol-pills .atb-pill{flex:1 1 0;min-width:62px}
.atb-conc-pills{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

.atb-pill{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:13px;font-weight:500;color:var(--ink);
  background:#fdfcf9;
  border:1px solid rgba(184,150,78,0.30);
  border-radius:2px;
  padding:10px 12px;cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
  text-align:center;
}
.atb-pill:hover{
  border-color:rgba(184,150,78,0.55);
  background:#fffdf8;
}
.atb-pill.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.atb-pill-conc{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 8px;
}
.atb-pill-title{font-weight:600;font-size:13px;letter-spacing:0.4px}
.atb-pill-sub{
  font-size:10px;color:var(--muted);font-weight:400;
  letter-spacing:0.2px;
}
.atb-pill-conc.active .atb-pill-sub{color:rgba(255,255,255,0.78)}

.atb-summary{
  margin-top:22px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid rgba(184,150,78,0.22);border-radius:2px;
  background:#fffdf8;
}
.atb-summary-left{flex:1}
.atb-summary-details{
  font-family:var(--font-display, Georgia, serif);
  font-weight:500;font-size:14.5px;color:var(--ink);
  letter-spacing:0.1px;
}
.atb-summary-fine{
  font-size:11px;color:var(--muted);
  margin-top:4px;letter-spacing:0.2px;
}
.atb-summary-price{
  font-family:var(--font-display, Georgia, serif);
  font-weight:500;font-size:24px;color:var(--ink);
  letter-spacing:-0.2px;
  font-variant-numeric:tabular-nums;
}

.atb-msg{
  margin-top:10px;min-height:14px;
  font-size:11px;color:var(--gold2);
  letter-spacing:0.2px;text-align:center;
}

.atb-actions{
  margin-top:18px;display:flex;gap:10px;
}
.atb-cancel, .atb-confirm{
  flex:1;padding:14px 16px;border-radius:2px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:11px;letter-spacing:2.4px;font-weight:600;
  text-transform:uppercase;cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.atb-cancel{
  background:transparent;color:var(--ink2);
  border:1px solid rgba(184,150,78,0.30);
}
.atb-cancel:hover{
  background:rgba(184,150,78,0.05);color:var(--ink);
  border-color:rgba(184,150,78,0.55);
}
.atb-confirm{
  flex:1.6;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
}
.atb-confirm:hover{
  background:#000;
}
.atb-confirm:disabled{
  background:rgba(17,17,17,0.4);border-color:transparent;cursor:wait;
}

@media (max-width:540px){
  .atb-modal .modal-content{padding:22px 20px 20px !important}
  .atb-name{font-size:19px}
  .atb-vol-pills{flex-wrap:wrap}
  .atb-vol-pills .atb-pill{flex:1 1 calc(33.33% - 6px);min-width:0}
  .atb-conc-pills{grid-template-columns:1fr}
  .atb-summary{flex-direction:column;align-items:stretch;text-align:center}
  .atb-summary-price{text-align:center}
  .atb-actions{flex-direction:column-reverse}
  .atb-confirm{flex:1}
}

/* ════════ PRO SUBSTITUTION DECISION CARDS (renderSubstitutionCards) ════════
   Rendered into #resSubCards beneath the ingredient breakdown. Warm palette
   tuned to the site (cream + gold), with teal/amber/coral confidence tints. */
  .ing-row-sub{cursor:pointer;border-radius:6px;transition:background .12s}
  .ing-row-sub:hover{background:rgba(184,150,78,0.07)}
  .ing-sub-badge{display:inline-block;margin-top:3px;font-size:9px;font-weight:700;
    letter-spacing:.3px;padding:1px 7px;border-radius:999px;line-height:1.5;
    background:rgba(184,150,78,0.16);color:var(--gold2);white-space:nowrap}
  .ing-sub-badge.band-near-identical,.ing-sub-badge.band-close{background:rgba(29,158,117,0.14);color:#0f6e56}
  .ing-sub-badge.band-loose,.ing-sub-badge.band-weak{background:rgba(216,90,48,0.13);color:#993c1d}

  #resSubCards{margin:14px 0 4px}
  .sub-cards-head{margin:0 0 10px}
  .sub-cards-title{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold2);font-weight:700}
  .sub-cards-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}

  .sub-card{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
    background:var(--bg);overflow:hidden}
  .sub-card.weak{border-color:rgba(184,150,78,0.4)}
  .sub-card-head{display:flex;align-items:center;gap:8px;width:100%;
    background:transparent;border:none;cursor:pointer;padding:11px 13px;
    text-align:left;font-family:inherit}
  .sub-card-head:hover{background:rgba(184,150,78,0.05)}
  .sub-card-swap{flex:1;min-width:0;font-size:13px;color:var(--ink);
    display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .sub-from{color:var(--muted);text-decoration:line-through}
  .sub-arrow{color:var(--gold2)}
  .sub-to{font-weight:600}
  .sub-card-pill{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
  .sub-card-pill.band-near-identical,.sub-card-pill.band-close{background:rgba(29,158,117,0.14);color:#0f6e56}
  .sub-card-pill.band-workable{background:rgba(184,150,78,0.18);color:var(--gold2)}
  .sub-card-pill.band-loose,.sub-card-pill.band-weak{background:rgba(216,90,48,0.13);color:#993c1d}
  .sub-card-chev{font-size:11px;color:var(--muted);transition:transform .15s}
  .sub-card.open .sub-card-chev{transform:rotate(180deg)}

  .sub-card-body{display:none;padding:0 13px 13px}
  .sub-card.open .sub-card-body{display:block}
  .sub-card-intro{font-size:12px;color:var(--ink2);line-height:1.55;
    padding:10px 0 12px;border-top:1px solid var(--line)}
  .sub-card-cols{display:flex;gap:14px;flex-wrap:wrap}
  .sub-card-opts{flex:1 1 290px;min-width:260px}
  .sub-card-prev{flex:1 1 210px;min-width:200px;background:rgba(0,0,0,0.02);
    border:1px solid var(--line);border-radius:10px;padding:13px}

  .sub-opt{display:block;width:100%;text-align:left;background:transparent;
    border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:7px;
    cursor:pointer;font-family:inherit}
  .sub-opt:hover{background:rgba(184,150,78,0.05);border-color:rgba(184,150,78,0.3)}
  .sub-opt.sel{border-color:var(--gold);background:rgba(184,150,78,0.1)}
  .sub-opt-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .sub-opt-title{font-size:12.5px;font-weight:600;color:var(--ink)}
  .sub-opt-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}
  .sub-opt-pill{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
  .sub-opt-tag{margin-left:auto;font-size:10.5px;font-weight:700;white-space:nowrap}
  .sub-opt-tag.tag-free{color:var(--muted)}
  .sub-opt-tag.tag-buy{color:var(--gold2)}
  .pill-strong{background:rgba(29,158,117,0.14);color:#0f6e56}
  .pill-mid{background:rgba(184,150,78,0.18);color:var(--gold2)}
  .pill-weak{background:rgba(216,90,48,0.13);color:#993c1d}
  .pill-diverge{background:rgba(120,90,150,0.13);color:#5a3f73}
  .pill-drop{background:rgba(0,0,0,0.05);color:#666}

  .sub-more-btn{width:100%;text-align:left;background:transparent;border:none;
    color:var(--gold2);font-size:11.5px;font-weight:600;cursor:pointer;
    padding:5px 2px;font-family:inherit}
  .sub-more-btn:hover{text-decoration:underline}

  .sub-prev-eyebrow{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .sub-prev-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
  .sub-prev-sub{font-size:11px;color:var(--muted);margin:2px 0 12px}
  .sub-prev-meterlbl{font-size:10.5px;color:var(--muted);margin-bottom:5px}
  .sub-meter{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .sub-meter-track{flex:1;height:6px;background:rgba(0,0,0,0.06);border-radius:999px;overflow:hidden}
  .sub-meter-fill{height:100%;border-radius:999px}
  .sub-meter-fill.fill-strong{background:#1d9e75}
  .sub-meter-fill.fill-mid{background:#ba8a3a}
  .sub-meter-fill.fill-weak{background:#d85a30}
  .sub-meter-val{font-size:12px;font-weight:700;color:var(--ink)}
  .sub-prev-chiplbl{font-size:10.5px;color:var(--muted);margin-bottom:5px}
  .sub-chips{margin-bottom:10px;line-height:1.9}
  .sub-chip{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:6px;margin:0 4px 4px 0}
  .sub-chip.gain{background:rgba(99,153,34,0.13);color:#3b6d11}
  .sub-chip.lose{background:rgba(216,90,48,0.11);color:#993c1d}
  .sub-chip-none{font-size:12px;color:var(--muted)}
  .sub-prev-note{font-size:11.5px;color:var(--ink2);line-height:1.55;margin-bottom:12px}
  .sub-prev-note.dim{font-size:10.5px;color:var(--muted)}
  .sub-prev-btn{width:100%;background:var(--ink);color:#fff;border:none;border-radius:8px;
    padding:9px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .sub-prev-btn:hover{background:#000}
  .sub-status{margin-top:9px;font-size:11px;color:var(--gold2);line-height:1.5}

  .sub-card-foot{font-size:10px;color:var(--muted);line-height:1.5;
    margin-top:12px;padding-top:9px;border-top:1px solid var(--line)}
  .sub-drop-note{font-size:11px;color:var(--muted);line-height:1.55;
    padding:9px 11px;background:rgba(0,0,0,0.02);border:1px solid var(--line);border-radius:9px}

  @media (max-width:520px){
    .sub-card-cols{flex-direction:column}
    .sub-card-prev{order:-1}
  }

  /* ── Clickable ingredient rows + ingredient detail popup ─────────────── */
  .ing-clickable{cursor:pointer;border-radius:6px;transition:background var(--dur-fast,.12s) var(--ease-out,ease)}
  .ing-clickable:hover{background:rgba(184,150,78,0.06)}
  .ing-clickable:hover .ing-name{color:var(--gold2);text-decoration:underline;text-underline-offset:2px}
  .ing-clickable:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* Tappable pyramid chips (Scent Profile) — open the same detail card as the
     ingredient breakdown rows. */
  .np-note.ing-clickable{cursor:pointer;transition:border-color .12s,background .12s,color .12s}
  .np-note.ing-clickable:hover{border-color:var(--gold);background:var(--gold-soft,rgba(184,150,78,0.12));color:var(--ink)}
  .np-note.ing-clickable:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  /* ── Ingredient detail card — editorial restyle (Fraunces name, gold
        eyebrow labels, gold hairline ornament) ──────────────────────────── */
  .ing-info-modal{max-width:440px}
  .ing-info-modal #ingInfoName{
    font-family:var(--font-display,'Fraunces',Georgia,serif);
    font-weight:600;font-size:23px;letter-spacing:-0.2px;color:var(--ink);
  }
  .ing-info-card{display:flex;flex-direction:column;gap:2px;position:relative;padding-top:10px}
  /* a soft gold hairline crowning the data, echoing the page's divider rules */
  .ing-info-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-soft,rgba(184,150,78,0.14)) 15%,
      var(--gold-soft,rgba(184,150,78,0.14)) 85%,transparent);
  }
  .ing-info-row{display:flex;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);align-items:flex-start}
  .ing-info-row:last-child{border-bottom:none}
  .ing-info-k{flex:0 0 120px;font-size:9.5px;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--gold2);padding-top:3px}
  .ing-info-v{flex:1;font-size:13px;line-height:1.55;color:var(--ink2)}
  .ing-info-v strong{color:var(--ink);font-weight:600}
  .ing-info-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.3px;
    padding:2px 9px;border-radius:999px;margin-right:7px}
  .ing-info-tag.top{background:rgba(196,163,90,0.14);color:#8a7030;border:1px solid rgba(196,163,90,0.26)}
  .ing-info-tag.heart{background:rgba(196,114,126,0.14);color:#904050;border:1px solid rgba(196,114,126,0.26)}
  .ing-info-tag.base{background:rgba(139,126,181,0.14);color:#5a5080;border:1px solid rgba(139,126,181,0.26)}

  /* Visible status beside the Try-Adding Apply button. #tweakMsg lives inside a
     display:none wrapper, so this is the user-facing feedback channel. */
  .try-add-msg{display:inline-block;margin-left:10px;font-size:11px;color:var(--gold2);vertical-align:middle}
  .try-add-msg.err{color:#b4413c}
</style>