*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* High-contrast light palette */
      --bg:         #f5f3ef;
      --card:       #ffffff;
      --text:       #111111;
      --muted:      #777;
      --accent:     #2d5a27;
      --accent-lt:  #e8f0e7;
      --pop:        #e85d3a;
      --tag-bg:     #edeae6;
      --radius:     14px;
      --shadow:     0 2px 20px rgba(0,0,0,0.06);

      /* Season colors */
      --season-spring: #d4a843;
      --season-summer: #6a9ab5;
      --season-autumn: #b5623a;
      --season-winter: #3a3a6e;

      /* Fonts */
      --font-display: 'Syne', sans-serif;
      --font-body:    'Satoshi', sans-serif;
    }

    html {
      scrollbar-gutter: stable;
    }
    html, body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overscroll-behavior: none;
    }

    /* ── Color season sidebar (visible only when viewport is wide enough) ── */
    .season-sidebar {
      display: none;
      position: fixed;
      top: 140px;
      right: max(16px, calc(50% - 480px/2 - 200px - 24px));
      width: 176px;
      background: var(--card);
      border: 1px solid #e0e0e0;
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      z-index: 110;
    }
    @media (min-width: 860px) {
      .season-sidebar { display: block; }
    }
    .season-sidebar h4 {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
      text-transform: uppercase; color: var(--muted);
      margin: 0 0 12px;
    }
    .season-sidebar .ss-item {
      display: flex; align-items: flex-start; gap: 8px;
      margin-bottom: 12px;
    }
    .season-sidebar .ss-item:last-child { margin-bottom: 0; }
    .season-sidebar .ss-dot {
      width: 10px; height: 10px; border-radius: 50%;
      flex-shrink: 0; margin-top: 3px;
    }
    .season-sidebar .ss-body { display: flex; flex-direction: column; gap: 2px; }
    .season-sidebar .ss-name {
      font-size: 12px; font-weight: 600; color: var(--text);
    }
    .season-sidebar .ss-desc {
      font-size: 11px; color: var(--muted); line-height: 1.4;
    }
    .season-sidebar .ss-footer {
      margin-top: 14px; padding-top: 12px;
      border-top: 1px solid #eee;
      font-size: 10px; color: #aaa; line-height: 1.5;
    }

    /* ── Header ── */
    header {
      position: sticky; top: 0; z-index: 100;
      background: var(--bg);
      padding: 12px 16px 0;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      transition: padding 0.3s;
    }
    header.compact {
      padding-top: 8px;
    }
    header.compact .search-wrap {
      max-height: 0; opacity: 0; overflow: hidden;
      padding-top: 0; padding-bottom: 0; margin: 0;
      transition: max-height 0.3s, opacity 0.2s, padding 0.3s;
    }
    header.compact .search-toggle { display: flex; }
    .header-top {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 10px;
      gap: 8px;
    }
    .header-actions {
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }

    /* ── Logo ── */
    .logo {
      display: flex; flex-direction: row; align-items: baseline;
      flex-wrap: wrap; gap: 0;
    }
    .logo-lu {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 800; letter-spacing: -1px;
      color: var(--text);
    }
    .logo-ff {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 800; letter-spacing: -1px;
      color: var(--accent);
    }
    .logo-beta {
      font-family: var(--font-display);
      font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
      color: var(--pop); text-transform: uppercase;
      background: rgba(232,93,58,0.1);
      border: 1px solid rgba(232,93,58,0.25);
      border-radius: 4px;
      padding: 1px 5px;
      margin-left: 6px;
      vertical-align: super;
      line-height: 1;
    }
    .logo-tagline {
      width: 100%;
      font-family: var(--font-display);
      font-size: 9px; font-weight: 500; letter-spacing: 0.12em;
      color: var(--muted); margin-bottom: -1px;
    }

    /* ── Daily drop ── */
    .daily-drop {
      margin-bottom: 16px; background: var(--card);
      border-radius: var(--radius); box-shadow: var(--shadow);
      overflow: hidden;
    }
    .daily-drop-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px 8px;
    }
    .daily-drop-title {
      font-family: var(--font-display); font-size: 14px; font-weight: 700;
    }
    .daily-drop-dismiss {
      background: none; border: none; font-size: 14px; color: var(--muted);
      cursor: pointer; padding: 0;
    }
    .daily-drop-scroll {
      display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 14px;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .daily-drop-scroll::-webkit-scrollbar { display: none; }
    .daily-drop-card {
      flex-shrink: 0; width: 120px; cursor: pointer;
      transition: transform 0.15s;
    }
    .daily-drop-card:active { transform: scale(0.96); }
    .daily-drop-img {
      width: 120px; height: 150px; border-radius: 10px; object-fit: cover;
      background: var(--tag-bg);
    }
    .daily-drop-name {
      font-size: 11px; color: var(--text); margin-top: 6px;
      line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden;
    }
    .daily-drop-price {
      font-size: 11px; font-weight: 600; color: var(--accent); margin-top: 2px;
    }
    .daily-drop-match {
      font-size: 9px; color: var(--muted); font-weight: 600;
    }
    body.dark .daily-drop { background: #1a1a1a; }
    body.dark .daily-drop-img { background: #252525; }

    .feed-count {
      font-size: 11px; color: var(--muted); font-weight: 500;
      margin-bottom: 8px; padding-left: 2px;
    }

    .nav-tabs { display: flex; gap: 4px; }
    .nav-tab {
      padding: 6px 14px; border-radius: 999px; border: none;
      background: transparent; font-family: var(--font-body);
      font-size: 13px; font-weight: 500; color: var(--muted);
      cursor: pointer; transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-tab.active { background: var(--text); color: white; }

    /* Search toggle icon (shown in compact mode) */
    .search-toggle {
      display: none; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%;
      border: 1.5px solid #ddd; background: var(--card);
      font-size: 14px; cursor: pointer; color: var(--muted);
      transition: border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }
    .search-toggle:hover { border-color: var(--accent); }
    /* Notification bell */
    .notif-bell {
      position: relative; background: none; border: none;
      cursor: pointer; padding: 6px; flex-shrink: 0; color: var(--muted);
      transition: color 0.15s; -webkit-tap-highlight-color: transparent;
      display: flex; align-items: center; justify-content: center;
    }
    .notif-bell:hover { color: var(--text); }
    .notif-bell svg { display: block; }
    .notif-badge {
      position: absolute; top: -2px; right: -4px;
      background: var(--pop); color: white; font-size: 9px; font-weight: 700;
      min-width: 16px; height: 16px; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 4px; font-family: var(--font-body);
    }

    /* Notification panel */
    .notif-overlay {
      display: none; position: fixed; inset: 0; z-index: 250;
      background: rgba(0,0,0,0.3);
    }
    .notif-overlay.open { display: block; }
    .notif-panel {
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 100%; max-width: 360px;
      background: var(--card); box-shadow: -4px 0 30px rgba(0,0,0,0.1);
      display: flex; flex-direction: column;
      animation: slideInRight 0.25s ease;
    }
    @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .notif-panel-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .notif-panel-title {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
    }
    .notif-panel-close {
      background: none; border: none; font-size: 18px; color: var(--muted);
      cursor: pointer; padding: 0;
    }
    .notif-list {
      flex: 1; overflow-y: auto; padding: 8px 0;
    }
    .notif-item {
      display: flex; gap: 12px; padding: 12px 20px;
      cursor: pointer; transition: background 0.15s;
      border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    .notif-item:hover { background: var(--tag-bg); }
    .notif-item.unread { background: var(--accent-lt); }
    .notif-item.unread:hover { background: #dce8db; }
    .notif-thumb {
      width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
      background: var(--tag-bg); flex-shrink: 0;
    }
    .notif-icon {
      width: 44px; height: 44px; border-radius: 10px; background: var(--tag-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .notif-content { flex: 1; min-width: 0; }
    .notif-title {
      font-size: 13px; font-weight: 600; color: var(--text);
      margin-bottom: 2px;
    }
    .notif-body {
      font-size: 12px; color: var(--muted); line-height: 1.4;
      overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .notif-time {
      font-size: 10px; color: #aaa; margin-top: 3px;
    }
    .notif-empty {
      text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px;
    }

    /* Dark theme for notifications */
    body.dark .notif-panel { background: #1a1a1a; box-shadow: -4px 0 30px rgba(0,0,0,0.4); }
    body.dark .notif-panel-header { border-bottom-color: rgba(255,255,255,0.06); }
    body.dark .notif-item { border-bottom-color: rgba(255,255,255,0.03); }
    body.dark .notif-item:hover { background: #252525; }
    body.dark .notif-item.unread { background: #1e2a1e; }
    body.dark .notif-item.unread:hover { background: #253025; }
    body.dark .notif-thumb { background: #252525; }
    body.dark .notif-icon { background: #252525; }
    body.dark .notif-title { color: #e8e4df; }
  body.dark .sign-out-btn { border-color: #333; color: #666; }
  body.dark .sign-out-btn:hover { border-color: var(--pop); color: var(--pop); }

    .admin-link {
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); padding: 4px; flex-shrink: 0;
      transition: color 0.15s;
    }
    .admin-link:hover { color: var(--accent); }
    .admin-link svg { display: block; }

    .sign-out-btn {
      background: none; border: 1px solid #ddd; border-radius: 8px;
      color: var(--muted); cursor: pointer;
      padding: 5px 10px; flex-shrink: 0;
      display: flex; align-items: center; gap: 5px;
      font-family: var(--font-body); font-size: 11px; font-weight: 500;
      transition: all 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .sign-out-btn:hover { border-color: var(--pop); color: var(--pop); }
    .sign-out-btn svg { display: block; }
    .sign-out-label { white-space: nowrap; }
    @media (max-width: 420px) { .sign-out-label { display: none; } }

    /* Saved collection view */
    #savedView {
      max-width: 480px; margin: 0 auto; padding: 0 16px 32px;
    }
    .saved-sub-tabs {
      display: flex; gap: 4px; padding: 12px 0 8px;
      border-bottom: 1px solid rgba(0,0,0,0.06); margin-bottom: 4px;
    }
    .saved-sub-tab {
      padding: 6px 16px; border-radius: 999px; border: 1.5px solid transparent;
      background: transparent; font-family: var(--font-body);
      font-size: 13px; font-weight: 500; color: var(--muted);
      cursor: pointer; transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .saved-sub-tab.active {
      border-color: var(--text); color: var(--text);
    }
    .saved-header {
      padding: 10px 0 6px;
      font-size: 12px; color: var(--muted);
    }
    .saved-empty {
      text-align: center; padding: 50px 20px; color: var(--muted);
    }
    .saved-empty h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 6px; color: var(--text); }
    .saved-empty p { font-size: 13px; line-height: 1.5; }
    .empty-emoji { font-size: 40px; margin-bottom: 12px; }

    .card-remove {
      position: absolute; top: 8px; right: 8px;
      width: 24px; height: 24px; border-radius: 50%;
      background: rgba(0,0,0,0.4); color: white; border: none;
      font-size: 12px; cursor: pointer; display: flex;
      align-items: center; justify-content: center; z-index: 5;
      -webkit-tap-highlight-color: transparent;
    }

    /* ── Beta toast ── */
    .beta-toast {
      position: fixed; bottom: 20px; left: 20px; z-index: 200;
      background: #fff8e1; border: 1px solid #ffe082; border-radius: 12px;
      padding: 14px 16px; max-width: 260px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      font-size: 12px; color: #6d5a00; line-height: 1.5;
    }
    .beta-toast-text { padding-right: 20px; }
    .beta-dismiss {
      position: absolute; top: 8px; right: 10px;
      background: none; border: none; font-size: 13px; color: #a08a00;
      cursor: pointer; padding: 0; line-height: 1;
    }
    body.dark .beta-toast { background: #2a2400; border-color: #3a3200; color: #c9a800; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
    body.dark .beta-dismiss { color: #c9a800; }
    body.dark .beta-link { color: #c9a800; }

    /* ── Onboarding banner ── */
    .onboarding-banner {
      margin: 0 auto; max-width: 480px; padding: 12px 16px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .onboarding-main {
      display: flex; align-items: flex-start; gap: 10px;
      background: var(--accent-lt); border: 1px solid rgba(45,90,39,0.15);
      border-radius: 12px; padding: 14px 16px;
    }
    .onboarding-emoji { font-size: 22px; flex-shrink: 0; line-height: 1; }
    .onboarding-text {
      display: flex; flex-direction: column; gap: 4px;
      font-size: 13px; line-height: 1.5; color: var(--text);
    }
    .onboarding-text strong { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
    .onboarding-text span { color: var(--muted); font-size: 12px; }
    .onboarding-dismiss {
      align-self: center; background: none; border: none;
      font-family: var(--font-body); font-size: 12px; color: var(--muted);
      cursor: pointer; padding: 4px 12px; text-decoration: underline;
    }
    body.dark .onboarding-main { background: #1a2e1a; border-color: rgba(45,90,39,0.25); }
    body.dark .onboarding-text { color: #e8e4df; }

    /* ── Search bar ── */
    .search-wrap {
      padding: 4px 16px 8px; max-width: 480px; margin: 0 auto;
      max-height: 60px; opacity: 1;
      transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
      overflow: hidden;
    }
    .search-input {
      width: 100%; padding: 9px 16px 9px 38px; border-radius: 999px;
      border: 1.5px solid #ddd; background: var(--card);
      font-family: var(--font-body); font-size: 14px; color: var(--text);
      outline: none; box-sizing: border-box; transition: border-color 0.15s;
    }
    .search-input:focus { border-color: var(--accent); }
    .search-input::placeholder { color: var(--muted); }
    .search-wrap-inner {
      position: relative;
    }
    .search-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      font-size: 14px; pointer-events: none; color: var(--muted);
    }
    .search-clear {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none; font-size: 14px; color: var(--muted);
      cursor: pointer; display: none; padding: 0; line-height: 1;
    }

    /* ── Season chips — horizontal scrolling, color-coded ── */
    .filters {
      display: flex; justify-content: center;
      gap: 8px;
      padding: 4px 16px 10px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .filters::-webkit-scrollbar { display: none; }
    .filter-group {
      display: flex; align-items: center; justify-content: center;
      gap: 6px; flex-wrap: nowrap; flex-shrink: 0;
    }
    .filter-label {
      font-family: var(--font-display); font-size: 9px; font-weight: 700;
      color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
      white-space: nowrap; flex-shrink: 0;
    }

    /* ── Taste Level bar — inline with header ── */
    .taste-level {
      display: flex; align-items: center; gap: 8px;
      padding: 0 16px 8px; max-width: 480px; margin: 0 auto;
    }
    .taste-label {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: 0.5px;
      white-space: nowrap; flex-shrink: 0;
    }
    .taste-bar-wrap {
      flex: 1; height: 6px; background: #e4e1dc; border-radius: 999px;
      position: relative; overflow: hidden;
    }
    .taste-bar-fill {
      height: 100%; width: 0%;
      transition: width 0.7s cubic-bezier(0.34,1.56,0.64,1), background 0.5s;
      background: var(--accent);
      border-radius: 999px;
    }
    .taste-bar-fill.t2 { background: var(--season-spring); }
    .taste-bar-fill.t3 { background: var(--pop); }
    .taste-bar-fill.t4 { background: linear-gradient(90deg, var(--pop), #a855f7); }
    .taste-tick {
      position: absolute; top: 0; bottom: 0;
      width: 2px; background: var(--bg); border-radius: 1px;
      pointer-events: none;
    }
    .taste-level-name {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; min-width: 36px;
      text-align: right; flex-shrink: 0;
      transition: color 0.3s; color: var(--muted);
    }
    .taste-level-name.t1 { color: var(--accent); }
    .taste-level-name.t2 { color: var(--season-spring); }
    .taste-level-name.t3 { color: var(--pop); }
    .taste-level-name.t4 { color: #a855f7; }
    .taste-teaser {
      text-align: center; font-size: 11px; color: #888;
      padding: 0 16px 8px; letter-spacing: 0.01em;
    }
    .taste-teaser strong { color: var(--accent); font-weight: 600; }

    /* ── Season-colored chips ── */
    .chip {
      padding: 6px 14px; border-radius: 999px;
      border: 1.5px solid #ddd; background: var(--card);
      font-family: var(--font-body);
      font-size: 13px; color: var(--text); font-weight: 500;
      cursor: pointer; white-space: nowrap;
      transition: all 0.15s; flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .chip.active { font-weight: 600; color: white; }
    .chip[data-value="all"].active    { background: var(--text); border-color: var(--text); }
    .chip[data-value="Spring"].active { background: var(--season-spring); border-color: var(--season-spring); }
    .chip[data-value="Summer"].active { background: var(--season-summer); border-color: var(--season-summer); }
    .chip[data-value="Autumn"].active { background: var(--season-autumn); border-color: var(--season-autumn); }
    .chip[data-value="Winter"].active { background: var(--season-winter); border-color: var(--season-winter); }
    /* Inactive but tinted borders */
    .chip[data-value="Spring"]:not(.active) { border-color: rgba(212,168,67,0.35); color: #9a7a20; }
    .chip[data-value="Summer"]:not(.active) { border-color: rgba(106,154,181,0.35); color: #4a7a94; }
    .chip[data-value="Autumn"]:not(.active) { border-color: rgba(181,98,58,0.35);  color: #8a4a25; }
    .chip[data-value="Winter"]:not(.active) { border-color: rgba(58,58,110,0.35);  color: #3a3a6e; }

    /* ── Feed — masonry container ── */
    main { padding: 16px; max-width: 480px; margin: 0 auto; }
    .feed {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    /* ── Card ── */
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(24px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1);      }
    }
    .card {
      background: var(--card); border-radius: var(--radius);
      overflow: hidden; box-shadow: var(--shadow);
      display: flex; flex-direction: column;
      -webkit-tap-highlight-color: transparent;
      animation: cardIn 0.4s ease both;
      /* masonry: absolute positioning */
      position: absolute;
      width: calc(50% - 6px);
      transition: transform 0.2s, opacity 0.25s, box-shadow 0.2s;
    }
    .card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
    .card:active { transform: scale(0.97); }

    /* Season accent strip on card bottom */
    .card[data-season="Spring"] { border-bottom: 3px solid var(--season-spring); }
    .card[data-season="Summer"] { border-bottom: 3px solid var(--season-summer); }
    .card[data-season="Autumn"] { border-bottom: 3px solid var(--season-autumn); }
    .card[data-season="Winter"] { border-bottom: 3px solid var(--season-winter); }

    /* Hero card — full width, first in batch */
    .card.card-hero {
      width: 100%;
    }

    .card-image {
      position: relative; width: 100%;
      overflow: hidden; background: #eae7e2; cursor: pointer;
    }
    .card-image img {
      display: block; width: 100%; height: auto;
      object-fit: cover; transition: opacity 0.3s;
    }
    .card-image img.loading { opacity: 0; }

    .season-badge {
      position: absolute; top: 8px; left: 8px;
      background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
      border-radius: 999px; padding: 3px 9px;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; pointer-events: none;
      letter-spacing: 0.03em;
    }
    /* Season-specific badge colors */
    .season-badge.season-Spring { color: #7a5c10; background: rgba(212,168,67,0.18); }
    .season-badge.season-Summer { color: #3a6a80; background: rgba(106,154,181,0.18); }
    .season-badge.season-Autumn { color: #7a3a15; background: rgba(181,98,58,0.18); }
    .season-badge.season-Winter { color: #2a2a5e; background: rgba(58,58,110,0.18); }
    .season-badge.match { background: var(--accent); color: white; }

    .sale-badge {
      position: absolute; top: 8px; right: 8px;
      background: var(--pop); color: white;
      border-radius: 999px; padding: 3px 8px;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; pointer-events: none;
    }
    .match-badge {
      position: absolute; bottom: 8px; left: 8px;
      background: rgba(45,90,39,0.85); color: white;
      border-radius: 999px; padding: 2px 8px;
      font-family: var(--font-display);
      font-size: 10px; font-weight: 700; pointer-events: none;
      backdrop-filter: blur(4px);
    }

    /* Card fade animations */
    .card.fading-out { opacity: 0; transform: scale(0.92); pointer-events: none; }
    .card.fading-in  { animation: fadeIn 0.25s ease forwards; }
    @keyframes fadeIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

    /* ── Liked / disliked card states ── */
    .card.card-liked {
      outline: 2.5px solid var(--accent); outline-offset: -2px;
    }
    .card.card-liked .card-image::after {
      content: "\2764\FE0F"; position: absolute; top: 8px; right: 8px;
      font-size: 18px; pointer-events: none; z-index: 6;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    }
    /* Like animation */
    @keyframes likePopIn {
      0%   { transform: scale(0.3); opacity: 0; }
      50%  { transform: scale(1.25); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .card.card-just-liked .card-image::after {
      animation: likePopIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
    }
    .card.card-just-liked {
      box-shadow: 0 0 0 6px rgba(45,90,39,0.18), var(--shadow);
      transition: box-shadow 0.3s ease;
    }

    .card.card-disliked {
      opacity: 0.32; filter: grayscale(40%);
      animation: none;
    }
    .card.card-just-disliked {
      transition: opacity 0.35s ease, filter 0.35s ease;
    }

    /* ── Thumbs row ── */
    .card-actions {
      display: flex; justify-content: space-around;
      padding: 8px 10px 2px; gap: 6px;
    }
    .thumb-btn {
      flex: 1; padding: 6px; border: none;
      background: var(--tag-bg); border-radius: 999px;
      font-size: 15px; cursor: pointer;
      transition: all 0.15s, transform 0.2s; line-height: 1;
      -webkit-tap-highlight-color: transparent;
    }
    .thumb-btn.active-like    { background: #d4edda; }
    .thumb-btn.active-dislike { background: #f8d7da; }
    .thumb-btn:active { transform: scale(0.85); }
    /* Bounce on feedback */
    @keyframes thumbBounce {
      0%   { transform: scale(1); }
      30%  { transform: scale(1.3); }
      60%  { transform: scale(0.9); }
      100% { transform: scale(1); }
    }
    .thumb-btn.bouncing { animation: thumbBounce 0.35s ease; }

    .card-add-board {
      display: block; width: calc(100% - 20px); margin: 6px 10px 0;
      padding: 5px 0; border: 1px dashed #ccc; border-radius: 8px;
      background: none; font-family: var(--font-body); font-size: 10px;
      font-weight: 500; color: var(--muted); cursor: pointer;
      transition: all 0.15s; text-align: center;
      -webkit-tap-highlight-color: transparent;
    }
    .card-add-board:hover { border-color: var(--accent); color: var(--accent); }

    .card-body { padding: 6px 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
    .card-retailer {
      font-family: var(--font-display);
      font-size: 10px; font-weight: 600; color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .card-title {
      font-size: 12px; color: var(--text); line-height: 1.4;
      display: -webkit-box; -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; overflow: hidden; cursor: pointer;
    }
    .card-price { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .price-now { font-size: 13px; font-weight: 700; }
    .price-was { font-size: 11px; color: var(--muted); text-decoration: line-through; }
    .card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .tag { background: var(--tag-bg); color: #555; font-size: 10px; padding: 2px 7px; border-radius: 999px; }

    .match-bar { display: none; }
    .match-pct { display: none; }
    .match-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-lt), var(--accent)); transition: width 0.5s ease; }

    /* ── Loading / empty ── */
    .loading-spinner { display: flex; justify-content: center; padding: 40px; }
    .spinner { width: 28px; height: 28px; border: 2.5px solid #ddd; border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); width: 100%; }
    .empty-state h3 { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; color: var(--text); }

    .load-more {
      display: block; width: 100%; padding: 14px; margin-top: 8px;
      background: var(--card); border: 1.5px solid #ddd; border-radius: var(--radius);
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      color: var(--text); cursor: pointer; transition: all 0.15s;
      position: relative; z-index: 10;
    }
    .load-more:hover { border-color: var(--accent); color: var(--accent); }
    .load-more:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ── Modal ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
      align-items: flex-end; justify-content: center;
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--card); border-radius: 24px 24px 0 0;
      width: 100%; max-width: 480px; max-height: 92vh;
      overflow-y: auto; animation: slideUp 0.3s ease;
      padding-bottom: env(safe-area-inset-bottom, 20px);
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .modal-drag { width: 40px; height: 4px; background: #ddd; border-radius: 999px; margin: 12px auto 0; }

    .modal-images {
      width: 100%; aspect-ratio: 3/4;
      overflow-x: auto; display: flex;
      scroll-snap-type: x mandatory; scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .modal-images::-webkit-scrollbar { display: none; }
    .modal-img-wrap {
      flex-shrink: 0; width: 100%; height: 100%;
      scroll-snap-align: start;
    }
    .modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

    .modal-body { padding: 20px 20px 8px; }

    .modal-meta {
      display: flex; justify-content: space-between;
      align-items: flex-start; margin-bottom: 8px;
    }
    .modal-retailer {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 600; color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .modal-season {
      font-family: var(--font-display);
      font-size: 11px; font-weight: 700;
      background: var(--accent-lt); color: var(--accent);
      padding: 3px 10px; border-radius: 999px;
    }
    .modal-season.match { background: var(--accent); color: white; }
    .modal-season.season-Spring { background: rgba(212,168,67,0.15); color: #7a5c10; }
    .modal-season.season-Summer { background: rgba(106,154,181,0.15); color: #3a6a80; }
    .modal-season.season-Autumn { background: rgba(181,98,58,0.15);  color: #7a3a15; }
    .modal-season.season-Winter { background: rgba(58,58,110,0.15);  color: #2a2a5e; }

    .modal-title {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 10px;
    }

    .modal-price { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .modal-price .price-now { font-size: 18px; font-weight: 700; }
    .modal-price .price-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
    .modal-price .discount { font-size: 12px; font-weight: 600; color: var(--pop); background: rgba(232,93,58,0.08); padding: 2px 8px; border-radius: 999px; }

    .modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .modal-tag { background: var(--tag-bg); color: #555; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
    .modal-tag.season { background: var(--accent-lt); color: var(--accent); font-weight: 500; }

    .modal-colors {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 8px; flex-wrap: wrap;
    }
    .color-swatch {
      width: 16px; height: 16px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.12); flex-shrink: 0;
    }
    .color-label {
      font-size: 12px; color: var(--muted); font-style: italic;
    }

    .modal-desc {
      font-size: 13px; color: #555; line-height: 1.7;
      max-height: none; overflow-y: visible;
      margin-bottom: 20px; padding-right: 4px;
    }

    .modal-actions { display: flex; gap: 10px; padding: 0 20px 20px; }
    .btn-shop {
      flex: 1; padding: 14px; background: var(--pop); color: white;
      border: none; border-radius: 12px; font-family: var(--font-display);
      font-size: 14px; font-weight: 700; cursor: pointer;
      text-decoration: none; text-align: center;
      transition: opacity 0.15s;
    }
    .btn-shop:active { opacity: 0.8; }
    .btn-thumb {
      width: 50px; padding: 14px; background: var(--tag-bg);
      border: none; border-radius: 12px; font-size: 18px;
      cursor: pointer; transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-thumb.active-like    { background: #d4edda; }
    .btn-thumb.active-dislike { background: #f8d7da; }

    /* Share row inside modal */
    .modal-share-row {
      display: flex; align-items: center; justify-content: center;
      gap: 10px; padding: 0 20px 16px;
    }
    .btn-share-item {
      background: none; border: 1.5px solid #ddd; border-radius: 999px;
      padding: 8px 20px; font-family: var(--font-body); font-size: 13px;
      font-weight: 500; color: var(--muted); cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-share-item:hover { border-color: var(--accent); color: var(--accent); }
    .share-item-copied {
      font-size: 12px; color: var(--accent); display: none;
    }

    /* ── Boards ── */
    #boardsView {
      max-width: 480px; margin: 0 auto; padding: 0 16px 32px;
    }
    .boards-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px 0 12px;
    }
    .boards-header span { font-size: 13px; color: var(--muted); }
    .btn-new-board {
      background: none; border: 1.5px solid var(--accent); border-radius: 999px;
      padding: 7px 16px; font-family: var(--font-body); font-size: 12px;
      font-weight: 600; color: var(--accent); cursor: pointer;
      transition: all 0.15s;
    }
    .btn-new-board:hover { background: var(--accent); color: white; }
    .boards-list {
      display: flex; flex-direction: column; gap: 10px;
    }
    .board-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--card); border-radius: var(--radius); padding: 14px 16px;
      box-shadow: var(--shadow); cursor: pointer; transition: all 0.15s;
    }
    .board-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
    .board-card:active { transform: scale(0.98); }
    .board-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
    .board-thumb {
      width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
      background: var(--tag-bg); flex-shrink: 0;
    }
    .board-info { flex: 1; min-width: 0; }
    .board-name {
      font-family: var(--font-display); font-size: 15px; font-weight: 700;
      color: var(--text); margin-bottom: 2px;
    }
    .board-count { font-size: 12px; color: var(--muted); }
    .board-arrow { font-size: 16px; color: var(--muted); flex-shrink: 0; }

    /* Board detail */
    .board-detail-header {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 0; flex-wrap: wrap;
    }
    .board-back {
      background: none; border: none; font-family: var(--font-body);
      font-size: 13px; color: var(--accent); cursor: pointer; padding: 0;
      font-weight: 500;
    }
    .board-detail-name {
      font-family: var(--font-display); font-size: 18px; font-weight: 700;
      flex: 1;
    }
    .board-delete {
      background: none; border: none; font-size: 12px; color: var(--muted);
      cursor: pointer; padding: 0;
    }
    .board-delete:hover { color: var(--pop); }

    /* New board modal */
    .new-board-modal { max-width: 380px; border-radius: 24px; }
    .board-emoji-picker {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
      justify-content: center;
    }
    .board-emoji-opt {
      width: 40px; height: 40px; border-radius: 10px;
      border: 2px solid transparent; background: var(--tag-bg);
      font-size: 20px; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      transition: all 0.15s;
    }
    .board-emoji-opt.selected { border-color: var(--accent); background: var(--accent-lt); }
    .board-name-input {
      width: 100%; padding: 12px 16px; border-radius: 12px;
      border: 1.5px solid #ddd; background: var(--bg);
      font-family: var(--font-body); font-size: 14px; color: var(--text);
      outline: none; transition: border-color 0.15s;
    }
    .board-name-input:focus { border-color: var(--accent); }

    /* Add to board list */
    .add-to-board-modal { max-width: 380px; border-radius: 24px; }
    .add-to-board-list {
      display: flex; flex-direction: column; gap: 6px;
      max-height: 300px; overflow-y: auto;
    }
    .add-to-board-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px; border-radius: 10px; cursor: pointer;
      transition: background 0.15s;
    }
    .add-to-board-row:hover { background: var(--tag-bg); }
    .add-to-board-row .board-emoji { font-size: 20px; }
    .add-to-board-row .board-name { font-size: 14px; font-weight: 500; }
    .add-to-board-row .board-check {
      margin-left: auto; font-size: 14px; color: var(--accent);
      display: none;
    }
    .add-to-board-row.added .board-check { display: inline; }

    .modal-toast {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8);
      background: rgba(0,0,0,0.75); color: white; padding: 10px 24px;
      border-radius: 999px; font-family: var(--font-display);
      font-size: 15px; font-weight: 700; pointer-events: none;
      opacity: 0; transition: opacity 0.2s, transform 0.2s;
      z-index: 20; backdrop-filter: blur(8px);
    }
    .modal-toast.show {
      opacity: 1; transform: translate(-50%, -50%) scale(1);
    }

    .modal-close {
      position: absolute; top: 16px; right: 16px;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(0,0,0,0.3); color: white; border: none;
      font-size: 16px; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      z-index: 10;
    }

  /* ── Style Personality Overlay ── */
  .profile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .profile-overlay.open { display: flex; }

  .profile-card {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 24px;
    max-width: 360px;
    width: 100%;
    padding: 36px 28px 28px;
    text-align: center;
    position: relative;
    animation: profilePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes profilePop {
    from { opacity:0; transform: scale(0.85) translateY(20px); }
    to   { opacity:1; transform: scale(1)    translateY(0);    }
  }

  .profile-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none; border: none;
    color: #555; font-size: 20px;
    cursor: pointer; line-height: 1;
  }
  .profile-close:hover { color: #fff; }

  .profile-luff-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #555;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 700;
  }
  .profile-emoji {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 14px;
  }
  .profile-eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
  }
  .profile-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .profile-desc {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 14px;
  }
  .profile-tag {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 20px;
    font-size: 12px;
    color: #ccc;
    padding: 4px 12px;
    text-transform: capitalize;
  }
  .profile-season-line {
    font-size: 12px;
    color: #666;
    margin-bottom: 24px;
  }
  .profile-season-line span { color: var(--accent); }

  .profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .btn-share {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
  }
  .btn-share:hover { opacity: 0.88; }
  .btn-profile-close {
    background: none;
    border: 1px solid #2a2a2a;
    color: #888;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
  }
  .btn-profile-close:hover { color: #fff; border-color: #555; }

  .share-copied {
    font-size: 12px;
    color: var(--accent);
    margin-top: 6px;
    display: none;
  }

  /* ── Profile popup tier sections ── */
  .profile-section {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid #222;
    text-align: left;
  }
  .profile-section-title {
    font-family: var(--font-display);
    font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #555; margin-bottom: 10px;
  }
  .profile-palette {
    display: flex; gap: 6px; flex-wrap: wrap;
  }
  .profile-swatch {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .profile-change-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; margin-bottom: 6px;
  }
  .profile-change-label {
    color: #555; min-width: 72px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .profile-change-from { color: #666; text-decoration: line-through; }
  .profile-change-arrow { color: #444; }
  .profile-change-to { color: #ccc; font-weight: 500; }
  .profile-brand-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 7px; font-size: 12px;
  }
  .profile-brand-rank { color: #444; font-size: 10px; min-width: 14px; }
  .profile-brand-name { color: #ccc; flex: 1; }
  .profile-brand-bar-wrap {
    width: 60px; height: 4px; background: #222; border-radius: 999px; overflow: hidden;
  }
  .profile-brand-bar { height: 100%; background: var(--accent); border-radius: 999px; }
  .profile-dna-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; font-size: 12px;
  }
  .profile-dna-name { color: #ccc; min-width: 80px; text-transform: capitalize; }
  .profile-dna-bar-wrap {
    flex: 1; height: 5px; background: #222; border-radius: 999px; overflow: hidden;
  }
  .profile-dna-bar {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #a855f7);
    transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
  }
  .profile-dna-pct { color: #555; font-size: 10px; min-width: 28px; text-align: right; }
  .profile-avoids {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .profile-avoid-tag {
    background: #2a1a1a; border: 1px solid #3a2222; border-radius: 20px;
    font-size: 12px; color: #cc8888; padding: 4px 12px; text-transform: capitalize;
  }
  .profile-next-unlock {
    margin-top: 16px; padding: 12px 14px;
    background: #0e0e0e; border: 1px solid #1e1e1e;
    border-radius: 10px; text-align: center;
  }
  .profile-next-unlock .pnu-label {
    font-family: var(--font-display);
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
    color: #444; margin-bottom: 4px; font-weight: 700;
  }
  .profile-next-unlock .pnu-text {
    font-size: 12px; color: #777;
  }
  .profile-next-unlock .pnu-text strong { color: var(--accent); }

  /* ── Profile sidebar — pinned in the LEFT desktop margin ── */
  .profile-sidebar {
    display: none;
    position: fixed;
    top: 140px;
    left: max(16px, calc(50% - 480px/2 - 196px - 24px));
    width: 180px;
    background: var(--card);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius);
    padding: 16px;
    z-index: 110;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .profile-sidebar:hover { border-color: #ccc; }
  .ps-luff {
    font-family: var(--font-display);
    font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
  }
  .ps-emoji { font-size: 28px; line-height: 1; margin-bottom: 8px; }
  .ps-eyebrow {
    font-family: var(--font-display);
    font-size: 9px; letter-spacing: 0.12em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 4px; font-weight: 600;
  }
  .ps-name {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; color: var(--text);
    line-height: 1.2; margin-bottom: 8px;
  }
  .ps-tags {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
  }
  .ps-tag {
    background: var(--tag-bg); border: 1px solid #e0dcd7;
    border-radius: 20px; font-size: 10px; color: #666;
    padding: 2px 8px; text-transform: capitalize;
  }
  .ps-season {
    font-size: 10px; color: var(--muted); margin-bottom: 12px;
  }
  .ps-season span { color: var(--accent); }
  .ps-view-btn {
    width: 100%; background: none; border: 1px solid #e0dcd7;
    border-radius: 8px; color: var(--muted); font-size: 11px;
    padding: 7px 0; cursor: pointer; font-family: var(--font-body);
  }
  .ps-view-btn:hover { color: var(--text); border-color: #ccc; }

  /* ── Mobile profile note — slim banner below header, mobile only ── */
  .profile-mobile-note {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #111;
    border-bottom: 1px solid #222;
    cursor: pointer;
  }
  @media (max-width: 899px) {
    .profile-mobile-note.visible { display: flex; }
  }
  .pmn-emoji { font-size: 22px; line-height: 1; }
  .pmn-text { flex: 1; min-width: 0; }
  .pmn-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: #fff; }
  .pmn-sub  { font-size: 11px; color: #666; }
  .pmn-arrow { font-size: 14px; color: #444; flex-shrink: 0; }

  /* ── Season info button — mobile only ── */
  .season-info-btn {
    display: none;
    background: var(--tag-bg); border: 1px solid #d0ccc7; border-radius: 50%;
    width: 18px; height: 18px; font-size: 10px; cursor: pointer;
    color: var(--muted); line-height: 1; padding: 0; flex-shrink: 0;
    align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
  }
  .season-info-btn:hover { border-color: var(--accent); color: var(--accent); }
  @media (max-width: 899px) {
    .season-info-btn { display: inline-flex; }
  }

  /* ── Season tooltip — mobile info popup ── */
  .season-tooltip {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
    align-items: flex-end;
    background: rgba(0,0,0,0.5);
  }
  .season-tooltip.open { display: flex; }
  .season-tooltip-panel {
    background: var(--bg);
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 36px;
    width: 100%;
    animation: slideUp 0.25s ease;
  }
  .season-tooltip-panel h4 {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; margin: 0 0 6px;
    color: var(--text);
  }
  .season-tooltip-panel .stp-intro {
    font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.5;
  }
  .season-tooltip-panel .ss-item { margin-bottom: 12px; }
  .season-tooltip-panel .ss-name { font-size: 13px; }
  .season-tooltip-panel .ss-desc { font-size: 12px; }
  .stp-close {
    display: block; width: 100%; margin-top: 18px;
    background: none; border: 1px solid #ddd; border-radius: 10px;
    padding: 12px; font-size: 14px; color: var(--muted);
    cursor: pointer; font-family: var(--font-body);
  }

  /* ── Footer ── */
  .site-footer {
    text-align: center; padding: 32px 16px 24px;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 24px;
  }
  .footer-content {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap;
  }
  .footer-logo {
    font-family: var(--font-display); font-size: 14px; font-weight: 800;
    color: var(--text); letter-spacing: -0.5px;
  }
  .footer-logo span { color: var(--accent); }
  .footer-sep { color: #ccc; }
  .footer-link {
    color: var(--accent); font-weight: 600; text-decoration: none;
  }
  .footer-link:hover { text-decoration: underline; }
  body.dark .site-footer { border-top-color: rgba(255,255,255,0.06); }
  body.dark .footer-logo { color: #e8e4df; }
  body.dark .footer-sep { color: #444; }

  /* ── Theme toggle button ── */
  .theme-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 300;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid #ddd; background: var(--card);
    font-size: 18px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .theme-toggle:hover { transform: scale(1.1); }

  /* ============================================================
     DARK THEME — scoped under body.dark
     Remove this entire block to revert to light-only.
     ============================================================ */
  body.dark {
    --bg:         #0f0f0f;
    --card:       #1a1a1a;
    --text:       #e8e4df;
    --muted:      #777;
    --accent:     #c9a76c;
    --accent-lt:  #2a2418;
    --pop:        #e85d3a;
    --tag-bg:     #252525;
    --shadow:     0 2px 20px rgba(0,0,0,0.3);

    --season-spring: #d4a843;
    --season-summer: #6a9ab5;
    --season-autumn: #b5623a;
    --season-winter: #7070b8;
  }

  /* Header */
  body.dark header { border-bottom-color: rgba(255,255,255,0.06); }
  body.dark .nav-tab { color: #666; }
  body.dark .nav-tab.active { background: #e8e4df; color: #111; }

  /* Logo */
  body.dark .logo-lu { color: #e8e4df; }
  body.dark .logo-ff { color: var(--accent); }
  body.dark .logo-beta { color: var(--pop); background: rgba(232,93,58,0.12); border-color: rgba(232,93,58,0.3); }

  /* Search */
  body.dark .search-input { background: #1a1a1a; border-color: #333; color: #e8e4df; }
  body.dark .search-input:focus { border-color: var(--accent); }
  body.dark .search-toggle { background: #1a1a1a; border-color: #333; }

  /* Chips */
  body.dark .chip { background: #1a1a1a; border-color: #333; color: #bbb; }
  body.dark .chip[data-value="Spring"]:not(.active) { border-color: rgba(212,168,67,0.3); color: #d4a843; }
  body.dark .chip[data-value="Summer"]:not(.active) { border-color: rgba(106,154,181,0.3); color: #6a9ab5; }
  body.dark .chip[data-value="Autumn"]:not(.active) { border-color: rgba(181,98,58,0.3);  color: #b5623a; }
  body.dark .chip[data-value="Winter"]:not(.active) { border-color: rgba(112,112,184,0.3); color: #7070b8; }

  /* Cards */
  body.dark .card { box-shadow: 0 2px 16px rgba(0,0,0,0.4); }
  body.dark .card:hover { box-shadow: 0 4px 28px rgba(0,0,0,0.5); }
  body.dark .card-image { background: #222; }
  body.dark .card-retailer { color: var(--accent); }
  body.dark .card-title { color: #ddd; }
  body.dark .price-now { color: #e8e4df; }
  body.dark .price-was { color: #666; }
  body.dark .tag { background: #252525; color: #999; }
  body.dark .match-bar { background: #252525; }
  body.dark .card.card-liked { outline-color: var(--accent); }
  body.dark .card.card-just-liked { box-shadow: 0 0 0 6px rgba(201,167,108,0.18), var(--shadow); }

  /* Thumb buttons */
  body.dark .thumb-btn { background: #252525; }
  body.dark .thumb-btn.active-like { background: #1e3a1e; }
  body.dark .thumb-btn.active-dislike { background: #3a1e1e; }

  /* Season badges */
  body.dark .season-badge { background: rgba(0,0,0,0.6); color: #ccc; backdrop-filter: blur(8px); }
  body.dark .season-badge.season-Spring { background: rgba(212,168,67,0.2); color: #d4a843; }
  body.dark .season-badge.season-Summer { background: rgba(106,154,181,0.2); color: #6a9ab5; }
  body.dark .season-badge.season-Autumn { background: rgba(181,98,58,0.2);  color: #b5623a; }
  body.dark .season-badge.season-Winter { background: rgba(112,112,184,0.2); color: #7070b8; }
  body.dark .season-badge.match { background: var(--accent); color: #111; }
  body.dark .sale-badge { background: var(--pop); }

  /* Modal */
  body.dark .modal { background: #1a1a1a; }
  body.dark .modal-drag { background: #444; }
  body.dark .modal-retailer { color: var(--accent); }
  body.dark .modal-title { color: #e8e4df; }
  body.dark .modal-season { background: #2a2418; color: var(--accent); }
  body.dark .modal-tag { background: #252525; color: #999; }
  body.dark .modal-desc { color: #888; }
  body.dark .btn-shop { background: var(--pop); color: white; }
  body.dark .saved-sub-tabs { border-bottom-color: rgba(255,255,255,0.06); }
  body.dark .saved-sub-tab { color: #666; }
  body.dark .saved-sub-tab.active { border-color: #e8e4df; color: #e8e4df; }
  body.dark .board-thumb { background: #252525; }
  body.dark .btn-thumb { background: #252525; }
  body.dark .btn-thumb.active-like { background: #1e3a1e; }
  body.dark .btn-thumb.active-dislike { background: #3a1e1e; }
  body.dark .modal-close { background: rgba(255,255,255,0.15); }
  body.dark .btn-share-item { border-color: #333; color: #888; }
  body.dark .btn-share-item:hover { border-color: var(--accent); color: var(--accent); }

  /* Load more */
  body.dark .load-more { background: #1a1a1a; border-color: #333; color: #bbb; }
  body.dark .load-more:hover { border-color: var(--accent); color: var(--accent); }

  /* Taste bar */
  body.dark .taste-bar-wrap { background: #252525; }
  body.dark .taste-tick { background: #0f0f0f; }
  body.dark .taste-bar-fill.t1 { background: var(--accent); }

  /* Sidebars */
  body.dark .season-sidebar { background: #1a1a1a; border-color: #2a2a2a; }
  body.dark .season-sidebar h4 { color: #555; }
  body.dark .season-sidebar .ss-name { color: #ccc; }
  body.dark .season-sidebar .ss-desc { color: #777; }
  body.dark .season-sidebar .ss-footer { border-top-color: #2a2a2a; color: #555; }

  body.dark .profile-sidebar { background: #1a1a1a; border-color: #2a2a2a; }
  body.dark .profile-sidebar:hover { border-color: #444; }
  body.dark .ps-name { color: #e8e4df; }
  body.dark .ps-tag { background: #252525; border-color: #333; color: #999; }
  body.dark .ps-view-btn { border-color: #333; color: #777; }
  body.dark .ps-view-btn:hover { border-color: #555; color: #ccc; }

  /* Boards */
  body.dark .board-card { background: #1a1a1a; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
  body.dark .board-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
  body.dark .board-name { color: #e8e4df; }
  body.dark .btn-new-board { border-color: var(--accent); color: var(--accent); }
  body.dark .btn-new-board:hover { background: var(--accent); color: #111; }
  body.dark .board-name-input { background: #111; border-color: #333; color: #e8e4df; }
  body.dark .board-emoji-opt { background: #252525; }
  body.dark .board-emoji-opt.selected { background: #2a2418; border-color: var(--accent); }
  body.dark .add-to-board-row:hover { background: #252525; }
  body.dark .new-board-modal { background: #1a1a1a; }
  body.dark .add-to-board-modal { background: #1a1a1a; }

  /* Card add-to-board */
  body.dark .card-add-board { border-color: #333; color: #666; }
  body.dark .card-add-board:hover { border-color: var(--accent); color: var(--accent); }

  /* Season tooltip */
  body.dark .season-tooltip-panel { background: #1a1a1a; }
  body.dark .season-tooltip-panel h4 { color: #e8e4df; }
  body.dark .stp-close { border-color: #333; color: #777; }

  /* Saved empty */
  body.dark .saved-empty h3 { color: #e8e4df; }

  /* Mobile profile note — already dark, no changes needed */

  /* Spinner */
  body.dark .spinner { border-color: #333; border-top-color: var(--accent); }

  /* First hint */
  body.dark #firstHint { color: #555; }

  /* Scrollbar */
  body.dark { scrollbar-color: #333 #0f0f0f; }

  /* Theme toggle in dark mode */
  body.dark .theme-toggle { background: #1a1a1a; border-color: #333; }