:root{
      --bg:#faf9f7;
      --card:#ffffff;
      --card-hover:#fdfcfa;
      --ink:#111111;
      --ink2:#333333;
      --muted:#888888;
      --muted2:#b0b0b0;
      --line:rgba(0,0,0,0.06);
      --line2:rgba(0,0,0,0.10);
      --shadow:0 2px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
      --shadow2:0 1px 4px rgba(0,0,0,0.04);
      --shadow3:0 4px 16px rgba(0,0,0,0.06);
      --accent:#111111;
      --accent-soft:rgba(17,17,17,0.05);
      --gold:#b8964e;
      --gold-soft:rgba(184,150,78,0.12);
      --gold2:#9a7b3a;
      --rose:#c4727e;
      --rose-soft:rgba(196,114,126,0.10);
      --sage:#7a9e7e;
      --sage-soft:rgba(122,158,126,0.10);
      --top-c:#c4a35a;
      --heart-c:#c4727e;
      --base-c:#8b7eb5;
      --id-c:#6b88b5;
      --sup-c:#7ea87e;
      --bridge-c:#b5a06b;
      --filler-c:#b5b5b5;
      --warm-gradient:linear-gradient(135deg, #faf9f7 0%, #f5f0e8 50%, #f0ebe0 100%);
      /* Headline font (Fraunces). The SPA defined this inline in
         fragra_ui.html; without it every var(--font-display, …) call
         in the lifted page CSS would fall back to Georgia and the
         brand's italic display headlines (.hero h1, .cl-title,
         .founder-quote, footer headings, etc.) would render in the
         wrong typeface. */
      --font-display:'Fraunces', Georgia, serif;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      color:var(--ink);background:var(--bg);
      min-height:100vh;-webkit-font-smoothing:antialiased;
    }

    /* ── NAV ──────────────────────────── */
    /* Site nav — single source of truth, matches fragra_ui.html design.
       Editorial style: Fraunces font, gold underline on active link, no
       solid pill button. Used by shop.html, kit_detail.html, and any
       future standalone page that loads /js/site_nav.js. */
    nav{
      position:sticky;top:0;z-index:100;
      background:rgba(250,249,247,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    }
    .nav-inner{
      max-width:1100px;margin:0 auto;padding:0 28px;
      display:flex;align-items:center;justify-content:space-between;height:58px;
    }
    .nav-logo{
      font-size:22px;font-weight:900;letter-spacing:2px;color:var(--ink);
      text-decoration:none;
    }
    .nav-logo .logo-x{vertical-align:-4px;margin:0 1px}
    .nav-links{display:flex;gap:4px}
    .nav-link{
      padding:7px 16px;border-radius:0;font-size:11px;font-weight:600;
      letter-spacing:2.5px;text-transform:uppercase;
      color:var(--muted);cursor:pointer;
      border:none;border-bottom:1.5px solid transparent;
      background:transparent;text-decoration:none;
      font-family:var(--font-display, 'Fraunces', Georgia, serif);
      transition:color .2s, border-color .2s;
    }
    .nav-link:hover{color:var(--ink);background:transparent;text-decoration:none}
    .nav-link.active{
      color:var(--ink);background:transparent;
      border-bottom-color:var(--gold2);
      text-decoration:none;
    }
    /* Cart/bag icon — refined tote silhouette, hairline strokes, italic
       Fraunces badge. Matches the editorial luxe register. Used by all
       standalone pages (shop, cart, kit_detail, pricing) and mirrored
       inline in fragra_ui.html so the SPA looks identical. */
    .nav-cart{
      position:relative;display:inline-flex;align-items:center;
      cursor:pointer;color:var(--ink2, #2e251c);padding:6px 4px;
      transition:color .2s, opacity .2s;text-decoration:none;
    }
    .nav-cart:hover{color:var(--gold2, #a08855);opacity:1}
    .nav-cart svg{
      width:21px;height:21px;
      stroke-width:1.1;
      transition:stroke-width .2s;
    }
    .nav-cart:hover svg{stroke-width:1.3}
    .nav-cart-badge{
      position:absolute;top:-1px;right:-5px;
      background:var(--gold2, #a08855);color:#fff;
      font-family:'Fraunces', Georgia, serif;
      font-style:italic;font-weight:500;
      font-size:9.5px;letter-spacing:0;line-height:1;
      min-width:15px;height:15px;border-radius:8px;
      display:none;align-items:center;justify-content:center;
      padding:0 4px 1px;
      box-shadow:0 1px 3px rgba(40,28,12,0.20);
    }
    .nav-cart-badge.has-items{display:flex}

    .nav-user{display:flex;align-items:center;gap:10px;cursor:pointer;transition:opacity .15s}
    .nav-user:hover{opacity:0.7}
    .nav-avatar{
      width:34px;height:34px;border-radius:50%;
      background:var(--ink);color:var(--bg);
      display:flex;align-items:center;justify-content:center;
      font-weight:700;font-size:13px;
      box-shadow:0 2px 8px rgba(0,0,0,0.15);
    }
    .nav-name{font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:0.3px}

    /* ── HERO ─────────────────────────── */
    .hero{text-align:center;padding:52px 24px 36px;position:relative;z-index:1}
    .hero::after{
      content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
      width:60px;height:3px;border-radius:3px;
      background:linear-gradient(90deg, var(--gold), var(--rose));opacity:0.5;
    }
    .hero h1{font-size:42px;font-weight:200;letter-spacing:-1px;line-height:1.15;color:var(--ink)}
    .hero h1 em{font-style:normal;font-weight:800}
    .hero p{font-size:15px;color:var(--muted);margin-top:12px;letter-spacing:0.2px;line-height:1.5}

    /* ── PAGES ────────────────────────── */
    .page{display:none;max-width:1100px;margin:0 auto;padding:0 24px 40px;position:relative;z-index:2}
    .page.active{display:block}

    /* ── PANELS ───────────────────────── */
    .create-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    @media(max-width:800px){.create-layout{grid-template-columns:1fr}}
    .panel{
      border:1px solid var(--line);border-radius:16px;
      background:var(--card);overflow:hidden;
      box-shadow:var(--shadow2);
      transition:box-shadow .3s, border-color .3s;
    }
    .panel:hover{box-shadow:var(--shadow3);border-color:var(--line2)}
    .panel-head{
      padding:16px 20px;border-bottom:1px solid var(--line);
      font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
    }
    .panel-body{padding:20px}
    .panel-body label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:0.3px}

    textarea{
      width:100%;border:1.5px solid var(--line2);border-radius:12px;
      padding:14px 16px;font-size:15px;resize:vertical;min-height:100px;
      background:var(--bg);color:var(--ink);outline:none;font-family:inherit;
      transition:border-color .2s, box-shadow .2s;line-height:1.5;
    }
    textarea::placeholder{color:var(--muted2);font-weight:400}
    textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,0.06)}
    select{
      width:100%;border:1px solid var(--line2);border-radius:10px;
      padding:9px 12px;font-size:13px;background:var(--bg);color:var(--ink);
      outline:none;cursor:pointer;font-family:inherit;
    }

    .btn{
      border:none;border-radius:12px;padding:11px 20px;font-weight:600;font-size:13px;
      cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;
      font-family:inherit;letter-spacing:0.2px;
    }
    .btn:active{transform:translateY(1px)}
    .btn-dark{background:var(--ink);color:white;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
    .btn-dark:hover{background:#222;box-shadow:0 4px 14px rgba(0,0,0,0.25);transform:translateY(-1px)}
    .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
    .btn-outline:hover{border-color:var(--ink);background:var(--accent-soft)}
    .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
    .btn-ghost:hover{background:var(--accent-soft);color:var(--ink)}
    .btn-gold{background:var(--gold);color:white;box-shadow:0 2px 8px rgba(184,150,78,0.3)}
    .btn-sm{padding:8px 14px;font-size:11px;border-radius:10px}
    .btn-row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;align-items:center}
    #btnGenerate{
      padding:13px 32px;font-size:14px;font-weight:700;letter-spacing:0.5px;
      border-radius:12px;
    }

    /* ── Search ───────────────────────── */
    .search-box{position:relative}
    .search-input{
      width:100%;border:1px solid var(--line2);border-radius:10px;
      padding:10px 12px 10px 34px;font-size:13px;
      background:var(--bg);color:var(--ink);outline:none;font-family:inherit;
    }
    .search-input:focus{border-color:var(--ink)}
    .search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted2);font-size:13px}
    .search-results{
      position:absolute;top:100%;left:0;right:0;z-index:50;
      background:white;border:1px solid var(--line);border-radius:10px;
      box-shadow:var(--shadow);max-height:300px;overflow-y:auto;
      margin-top:4px;display:none;
    }
    .search-results.open{display:block}
    .search-item{
      padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line);
      transition:background .1s;
    }
    .search-item:last-child{border-bottom:none}
    .search-item:hover{background:var(--accent-soft)}
    .si-brand{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;font-weight:600}
    .si-name{font-size:13px;font-weight:600;margin-top:1px}

    /* ── Brand browser ────────────────── */
    .brand-browser{margin-top:16px}
    .brand-browser-label{
      font-size:10px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;
      color:var(--muted);margin-bottom:8px;
    }
    .brand-tabs{
      display:grid;grid-template-columns:repeat(13, 1fr);gap:3px;
      margin-bottom:12px;
    }
    .brand-tab{
      padding:7px 0;font-size:11px;font-weight:600;
      color:var(--muted);cursor:pointer;text-align:center;
      border:none;background:transparent;border-radius:8px;
      transition:all .15s;
    }
    .brand-tab:hover{color:var(--ink);background:var(--accent-soft)}
    .brand-tab.active{color:var(--card);background:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,0.15)}
    .brand-tab.disabled{color:var(--line2);cursor:default;pointer-events:none}
    .brand-content-area{
      border:1px solid var(--line);border-radius:10px;
      background:var(--bg);overflow:hidden;
    }
    .brand-list{
      max-height:340px;overflow-y:auto;padding:6px;
      scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
    }
    .brand-list::-webkit-scrollbar{width:4px}
    .brand-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
    .brand-item{
      padding:9px 12px;border-radius:8px;cursor:pointer;
      font-size:13px;font-weight:500;color:var(--ink2);transition:all .12s;
      display:flex;justify-content:space-between;align-items:center;
    }
    .brand-item:hover{background:var(--card);box-shadow:var(--shadow2)}
    .brand-item .b-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .brand-item .count{
      font-size:10px;color:var(--muted2);background:var(--line);
      padding:2px 7px;border-radius:10px;font-weight:600;flex-shrink:0;margin-left:8px;
    }
    .brand-letter-count{
      padding:8px 12px;font-size:10px;font-weight:600;color:var(--muted);
      letter-spacing:0.5px;border-bottom:1px solid var(--line);
      display:flex;justify-content:space-between;align-items:center;
    }
    .frag-list{max-height:340px;overflow-y:auto;padding:6px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
    .frag-list::-webkit-scrollbar{width:4px}
    .frag-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
    .frag-item{
      padding:10px 12px;border-radius:8px;cursor:pointer;
      transition:all .12s;
      display:flex;justify-content:space-between;align-items:center;
    }
    .frag-item:hover{background:var(--card);box-shadow:var(--shadow2)}
    .frag-item+.frag-item{border-top:1px solid var(--line)}
    .frag-item .fi-name{font-size:13px;font-weight:500;color:var(--ink2)}
    .frag-item .fi-action{
      font-size:11px;color:var(--gold2);font-weight:600;
      opacity:0;transition:opacity .12s;flex-shrink:0;margin-left:8px;
    }
    .frag-item:hover .fi-action{opacity:1}
    .frag-item:hover .fi-name{color:var(--ink);font-weight:600}
    .back-link{
      font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;
      padding:8px 12px;display:flex;align-items:center;gap:4px;
      border-bottom:1px solid var(--line);transition:color .1s;
    }
    .back-link:hover{color:var(--ink)}
    .brand-detail-name{
      padding:10px 12px 6px;font-size:14px;font-weight:700;color:var(--ink);
      letter-spacing:-0.2px;
    }

    /* ── LIBRARY ──────────────────────── */
    .lib-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
    .lib-header h2{font-size:22px;font-weight:800;letter-spacing:-0.5px}
    .lib-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));gap:18px}
    .formula-card{
      border:1px solid var(--line);border-radius:16px;
      background:var(--card);overflow:hidden;cursor:pointer;
      transition:all .3s;box-shadow:var(--shadow2);
    }
    .formula-card:hover{box-shadow:var(--shadow);border-color:var(--line2);transform:translateY(-3px)}
    .fc-visual{
      height:90px;display:flex;align-items:center;justify-content:center;
      position:relative;overflow:hidden;
    }
    .fc-icons{display:flex;gap:8px;font-size:28px;opacity:0.8}
    .fc-body{padding:14px 16px}
    .fc-title{font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.3;letter-spacing:-0.2px}
    .fc-sub{font-size:11px;color:var(--muted);line-height:1.4}
    .fc-tags{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
    .fc-tag{font-size:9px;padding:3px 10px;border-radius:99px;font-weight:600;letter-spacing:0.3px;background:var(--accent-soft);color:var(--ink2)}
    .fc-delete{
      position:absolute;top:8px;right:8px;width:28px;height:28px;
      border-radius:50%;border:none;background:rgba(0,0,0,0.4);color:white;
      font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
      opacity:0;transition:all .2s;backdrop-filter:blur(4px);z-index:2;
    }
    .formula-card:hover .fc-delete{opacity:1}
    .fc-delete:hover{background:rgba(200,50,50,0.85);transform:scale(1.1)}

    /* ── 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}
    .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 ───────────────────────── */
    .result-hero{
      text-align:center;padding:32px 24px 28px;margin:0 -24px;
      border-bottom:1px solid var(--line);margin-bottom:24px;
      background:linear-gradient(180deg, rgba(245,240,232,0.5) 0%, transparent 100%);
    }
    .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%}

    /* 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-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:8px;font-family:'Inter',system-ui,-apple-system,sans-serif}
    .lf-table th{
      font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;
      text-align:left;padding:4px 6px;border-bottom:1px solid var(--line);
    }
    .lf-table th:nth-child(n+2){text-align:right}
    .lf-table td{
      font-size:11px;padding:3px 6px;border-bottom:1px solid var(--line);color:var(--ink2);
    }
    .lf-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums;font-size:10px;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-size:10px;color:var(--muted);
    }
    .lf-stat b{color:var(--ink);font-weight:700}
    .lf-view-btn{
      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;
    }
    .result-hero h4{font-size:20px;font-weight:800;letter-spacing:-0.4px;margin-bottom:6px}
    .rh-desc{font-size:13px;color:var(--ink2);line-height:1.6;max-width:480px;margin:0 auto}
    .rh-inspired{font-size:11px;color:var(--gold2);margin-top:10px;font-weight:600;letter-spacing:0.3px}

    .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{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)}

    /* Ingredient bars */
    .ing-bars{display:flex;flex-direction:column;gap:2px}
    .ing-row{display:flex;align-items:center;gap:6px}
    .ing-name{font-size:11px;width:140px;min-width:90px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
    .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-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}

    /* Direction tags */
    .dir-bar{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
    .dir-tag{
      padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;
      border:1.5px solid var(--line2);background:white;cursor:pointer;
      transition:all .15s;user-select:none;letter-spacing:0.1px;
    }
    .dir-tag:hover{border-color:var(--ink);color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
    .dir-tag.active{background:var(--ink);color:white;border-color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
    .dir-msg{font-size:11px;color:var(--sage);margin-top:4px;min-height:16px;font-weight:500}

    /* Feedback */
    .fb-row{display:flex;gap:10px;margin-bottom:10px}
    .fb-row > div{flex:1}
    .fb-row label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px}
    .fb-row input,.fb-row select,.fb-row textarea{
      width:100%;border:1px solid var(--line2);border-radius:10px;
      padding:9px 12px;font-size:13px;background:var(--bg);outline:none;font-family:inherit;
    }
    .fb-row textarea{min-height:50px;resize:vertical}

    /* Profile */
    .prof-stats{display:flex;gap:12px;margin-bottom:16px}
    .prof-stat{text-align:center;flex:1;padding:14px;border-radius:12px;background:var(--accent-soft)}
    .prof-stat .num{font-size:24px;font-weight:800;color:var(--ink)}
    .prof-stat .lbl{font-size:10px;color:var(--muted);margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
    .bias-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}
    .bias-name{font-size:11px;width:120px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .bias-track{flex:1;height:14px;background:var(--accent-soft);border-radius:5px;overflow:hidden}
    .bias-fill{height:100%;border-radius:5px;font-size:9px;font-weight:700;color:white;display:flex;align-items:center;padding:0 5px}

    /* Signin */
    .signin-box{max-width:340px;margin:0 auto;text-align:center;padding:16px 0}
    .signin-box h3{font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-0.4px}
    .signin-box p{color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.5}
    .signin-input{
      width:100%;border:1.5px solid var(--line2);border-radius:12px;
      padding:13px 16px;font-size:15px;text-align:center;outline:none;
      font-weight:500;font-family:inherit;
      transition:border-color .2s, box-shadow .2s;
    }
    .signin-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,0.06)}

    /* Suggest */
    .suggest-item{
      border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
      margin-bottom:8px;background:var(--bg);
      transition:border-color .15s, background .15s;
    }
    .suggest-item:hover{border-color:var(--line2);background:rgba(245,240,232,0.5)}
    .suggest-item label{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:14px}
    .suggest-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
    .suggest-why{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4;padding-left:28px}

    /* Empty */
    .empty{text-align:center;padding:40px 20px}
    .empty h3{font-size:16px;font-weight:600;margin-bottom:4px}
    .empty p{font-size:13px;color:var(--muted)}

    .small{font-size:11px;color:var(--muted)}
    .hr{height:1px;background:var(--line);margin:14px 0}

    /* ── NEWSLETTER ───────────────────── */
    .newsletter{
      max-width:1100px;margin:64px auto 0;padding:0 24px;
      position:relative;z-index:2;
    }
    .newsletter-card{
      border:none;border-radius:20px;
      padding:48px 36px;text-align:center;
      background:linear-gradient(135deg, #f5f0e8 0%, #ede6da 50%, #f0e8dd 100%);
      position:relative;overflow:hidden;
      box-shadow:0 4px 20px rgba(0,0,0,0.04);
    }
    .newsletter-card::before{
      content:"";position:absolute;top:-60px;right:-60px;
      width:200px;height:200px;border-radius:50%;
      background:rgba(184,150,78,0.12);pointer-events:none;
    }
    .newsletter-card::after{
      content:"";position:absolute;bottom:-40px;left:-40px;
      width:160px;height:160px;border-radius:50%;
      background:rgba(196,114,126,0.10);pointer-events:none;
    }
    .newsletter-card>*{position:relative;z-index:1}
    .newsletter h3{font-size:22px;font-weight:800;letter-spacing:-0.4px;margin-bottom:6px;color:var(--ink)}
    .newsletter p{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.5}
    .newsletter-form{display:flex;gap:10px;max-width:440px;margin:0 auto}
    .newsletter-input{
      flex:1;padding:13px 18px;border:1.5px solid rgba(0,0,0,0.08);
      border-radius:12px;background:white;
      color:var(--ink);font-size:14px;font-family:inherit;outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .newsletter-input::placeholder{color:var(--muted2)}
    .newsletter-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,0.06)}
    .newsletter-btn{
      padding:13px 28px;border:none;border-radius:12px;
      background:var(--ink);color:white;font-size:13px;
      font-weight:700;letter-spacing:0.3px;cursor:pointer;
      font-family:inherit;transition:all .2s;white-space:nowrap;
      box-shadow:0 2px 8px rgba(0,0,0,0.2);
    }
    .newsletter-btn:hover{background:#222;box-shadow:0 4px 14px rgba(0,0,0,0.25);transform:translateY(-1px)}
    .newsletter-msg{font-size:12px;color:var(--gold2);margin-top:14px;min-height:18px;font-weight:600}

    /* ── FOOTER ───────────────────────── */
    .site-footer{
      margin-top:56px;border-top:1px solid var(--line);
      padding:40px 24px 32px;font-size:12px;color:var(--muted);
      background:linear-gradient(180deg, transparent 0%, rgba(245,240,232,0.3) 100%);
      position:relative;z-index:2;
    }
    .footer-inner{
      max-width:1100px;margin:0 auto;
    }
    .footer-top{
      display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:36px;
      margin-bottom:32px;
    }
    .footer-col h4{
      font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
      color:var(--ink);margin-bottom:12px;
    }
    .footer-col a{
      display:block;color:var(--muted);text-decoration:none;
      font-size:12px;line-height:2.2;font-weight:500;transition:color .15s;cursor:pointer;
    }
    .footer-col a:hover{color:var(--ink)}
    .footer-col p{font-size:12px;line-height:1.7;color:var(--muted)}
    .footer-bottom{
      border-top:1px solid var(--line);padding-top:20px;
      display:flex;justify-content:space-between;align-items:center;
    }
    .footer-brand{font-weight:900;font-size:16px;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
    .footer-copy{font-size:11px;color:var(--muted2)}

    /* ── FOOTER INFO MODAL ───────────── */
    .info-overlay{
      position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.4);
      backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
    }
    .info-overlay.open{display:flex}
    .info-box{
      background:var(--card);border-radius:16px;max-width:560px;width:90%;
      max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.15);
    }
    .info-top{
      display:flex;justify-content:space-between;align-items:center;
      padding:18px 22px;border-bottom:1px solid var(--line);
    }
    .info-top h3{font-size:17px;font-weight:700;letter-spacing:-0.2px}
    .info-body{padding:22px;font-size:13px;line-height:1.7;color:var(--ink2)}
    .info-body h4{font-size:14px;font-weight:700;color:var(--ink);margin:16px 0 6px}
    .info-body h4:first-child{margin-top:0}
    .info-body p{margin-bottom:10px}
    .info-body ul{margin:0 0 10px 18px}
    .info-body li{margin-bottom:4px}

    /* ── LOADING VIAL ─────────────────── */
    .loading-overlay{
      position:fixed;inset:0;z-index:300;
      background:rgba(250,249,247,0.96);
      display:none;align-items:center;justify-content:center;flex-direction:column;
    }
    .loading-overlay.active{display:flex}
    .vial-container{position:relative;width:120px;height:200px;margin-bottom:28px}
    .vial-body{
      position:absolute;bottom:0;left:50%;transform:translateX(-50%);
      width:60px;height:140px;
      border:3px solid var(--ink);border-radius:0 0 20px 20px;
      overflow:hidden;background:rgba(255,255,255,0.6);
    }
    .vial-neck{
      position:absolute;top:30px;left:50%;transform:translateX(-50%);
      width:30px;height:32px;
      border:3px solid var(--ink);border-bottom:none;
      border-radius:4px 4px 0 0;
      background:rgba(255,255,255,0.6);
    }
    .vial-cap{
      position:absolute;top:14px;left:50%;transform:translateX(-50%);
      width:38px;height:20px;
      background:var(--ink);border-radius:6px 6px 2px 2px;
    }
    .vial-liquid{
      position:absolute;bottom:0;left:0;right:0;
      height:30%;background:var(--ink);
      border-radius:0 0 17px 17px;
      animation:fillUp 3.5s ease-in-out infinite;
      transition:height .3s ease;
    }
    .vial-liquid::before{
      content:"";position:absolute;top:-6px;left:0;right:0;height:12px;
      background:var(--ink);
      border-radius:50%;
      animation:wave 1.5s ease-in-out infinite;
    }
    @keyframes fillUp{
      0%{height:15%}
      50%{height:75%}
      100%{height:15%}
    }
    @keyframes wave{
      0%,100%{transform:scaleY(0.4) translateY(2px)}
      50%{transform:scaleY(1) translateY(-2px)}
    }
    /* Bubbles inside vial */
    .vial-bubble{
      position:absolute;border-radius:50%;
      background:rgba(255,255,255,0.45);
    }
    .vb1{width:5px;height:5px;left:14px;bottom:8px;animation:vbub1 2s ease-in-out infinite}
    .vb2{width:4px;height:4px;left:28px;bottom:6px;animation:vbub2 2.4s ease-in-out infinite 0.6s}
    .vb3{width:6px;height:6px;left:20px;bottom:12px;animation:vbub1 1.8s ease-in-out infinite 1.2s}
    @keyframes vbub1{
      0%,100%{transform:translateY(0);opacity:0.6}
      50%{transform:translateY(-50px);opacity:0}
    }
    @keyframes vbub2{
      0%,100%{transform:translateY(0);opacity:0.5}
      50%{transform:translateY(-45px);opacity:0}
    }
    .loading-word{
      font-size:16px;font-weight:600;color:var(--ink);
      letter-spacing:0.5px;min-height:24px;
      animation:wordFade 0.6s ease;
    }
    @keyframes wordFade{
      from{opacity:0;transform:translateY(8px)}
      to{opacity:1;transform:translateY(0)}
    }
    .loading-bar-wrap{
      width:200px;height:3px;background:var(--line);
      border-radius:3px;margin-top:20px;overflow:hidden;
    }
    .loading-bar-fill{
      height:100%;width:0%;border-radius:3px;
      background:linear-gradient(90deg, var(--ink) 0%, var(--muted) 100%);
      animation:barGrow 3.5s ease-in-out infinite;
    }
    @keyframes barGrow{
      0%{width:0%}
      50%{width:85%}
      100%{width:100%}
    }

    /* ── LAVA LAMP (CSS-only, GPU-accelerated) ── */
    .lava-wrap{
      position:fixed;top:0;left:0;width:100%;height:100%;
      pointer-events:none;z-index:1;overflow:hidden;
    }
    .lava-blob{
      position:absolute;border-radius:50%;
      filter:blur(50px);
      will-change:transform;
    }
    /* Each blob: unique color, size, position, slow smooth orbit */
    .lb1{width:200px;height:200px;top:10%;left:15%;background:rgba(190,140,235,0.35);animation:lava1 40s ease-in-out infinite}
    .lb2{width:160px;height:160px;top:30%;left:55%;background:rgba(100,210,185,0.32);animation:lava2 36s ease-in-out infinite}
    .lb3{width:240px;height:240px;top:50%;left:35%;background:rgba(235,150,155,0.30);animation:lava3 44s ease-in-out infinite}
    .lb4{width:140px;height:140px;top:15%;left:70%;background:rgba(150,190,245,0.35);animation:lava4 38s ease-in-out infinite}
    .lb5{width:180px;height:180px;top:60%;left:20%;background:rgba(220,195,100,0.32);animation:lava5 42s ease-in-out infinite}
    .lb6{width:220px;height:220px;top:70%;left:60%;background:rgba(160,230,150,0.30);animation:lava6 46s ease-in-out infinite}
    .lb7{width:150px;height:150px;top:40%;left:80%;background:rgba(245,170,120,0.33);animation:lava7 34s ease-in-out infinite}
    .lb8{width:190px;height:190px;top:80%;left:45%;background:rgba(175,155,235,0.33);animation:lava8 40s ease-in-out infinite}

    /* Smooth orbits — blobs drift wide across the screen */
    @keyframes lava1{
      0%,100%{transform:translate(0, 0) scale(1)}
      25%{transform:translate(150px, 200px) scale(1.2)}
      50%{transform:translate(-100px, 350px) scale(0.85)}
      75%{transform:translate(80px, 150px) scale(1.15)}
    }
    @keyframes lava2{
      0%,100%{transform:translate(0, 0) scale(0.95)}
      25%{transform:translate(-120px, -180px) scale(1.15)}
      50%{transform:translate(100px, 250px) scale(1.1)}
      75%{transform:translate(-80px, 100px) scale(0.9)}
    }
    @keyframes lava3{
      0%,100%{transform:translate(0, 0) scale(1)}
      20%{transform:translate(180px, -150px) scale(1.15)}
      50%{transform:translate(-130px, 200px) scale(0.8)}
      80%{transform:translate(80px, -80px) scale(1.1)}
    }
    @keyframes lava4{
      0%,100%{transform:translate(0, 0) scale(1)}
      30%{transform:translate(-150px, 220px) scale(1.25)}
      60%{transform:translate(110px, -120px) scale(0.85)}
      85%{transform:translate(-50px, 80px) scale(1.1)}
    }
    @keyframes lava5{
      0%,100%{transform:translate(0, 0) scale(1)}
      25%{transform:translate(130px, -200px) scale(1.15)}
      50%{transform:translate(-170px, 150px) scale(0.9)}
      75%{transform:translate(100px, -50px) scale(1.2)}
    }
    @keyframes lava6{
      0%,100%{transform:translate(0, 0) scale(1.05)}
      30%{transform:translate(-100px, -220px) scale(0.85)}
      55%{transform:translate(150px, 130px) scale(1.15)}
      80%{transform:translate(-60px, -100px) scale(1)}
    }
    @keyframes lava7{
      0%,100%{transform:translate(0, 0) scale(0.9)}
      35%{transform:translate(140px, 180px) scale(1.2)}
      65%{transform:translate(-90px, -150px) scale(1)}
      90%{transform:translate(50px, 80px) scale(1.1)}
    }
    @keyframes lava8{
      0%,100%{transform:translate(0, 0) scale(1)}
      25%{transform:translate(-140px, -180px) scale(1.15)}
      50%{transform:translate(110px, 220px) scale(0.88)}
      75%{transform:translate(-80px, -70px) scale(1.12)}
    }

    @media(max-width:600px){
      .hero h1{font-size:28px}
      .hero{padding:36px 20px 28px}
      .nav-link.hide-m{display:none}
      .nav-inner{height:52px;padding:0 16px}
      .nav-logo{font-size:18px;letter-spacing:2px}
      .create-layout{grid-template-columns:1fr}
      .lib-grid{grid-template-columns:1fr}
      .brand-tabs{grid-template-columns:repeat(9, 1fr)}
      .newsletter-form{flex-direction:column}
      .newsletter-card{padding:32px 20px;border-radius:16px}
      .footer-top{grid-template-columns:1fr 1fr;gap:20px}
      .modal{border-radius:16px}
      .rh-icon{width:44px;height:44px}
      .dir-tag{padding:5px 11px;font-size:10px}
      #btnGenerate{padding:12px 28px;font-size:13px}
    }
    @media(max-width:400px){
      .footer-top{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column;gap:8px;text-align:center}
    }