/* ============================================================
   styles.css — PaliaMarket shared stylesheet
   Loaded by: index.html, rewards.html, votes.html
   ============================================================ */

/* ── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=Fredoka:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* ── Primary accent — warm gold ── */
  --accent:       #16A34A;
  --accent-deep:  #15803D;
  --accent-light: #FEF5E0;

  /* ── Market design tokens ── */
  --bg:           #FAFAFA;
  --surface:      #FFFFFF;
  --ink:          #1A1A1A;
  --muted:        #8A8A8A;
  --line:         #ECECEC;
  --chip:         #F5F2F0;
  --sidebar-w:    320px;

  /* ── Legacy aliases → gold (keeps all var() usages working) ── */
  --sun:          #22C55E;
  --sun-deep:     #16A34A;
  --sun-light:    #FEF5E0;
  --mint:         #FEF5E0;
  --mint-deep:    #16A34A;
  --lilac:        #FEF5E0;
  --lilac-deep:   #16A34A;

  /* ── Semantic colors ── */
  --coral:        #EF4444;
  --coral-light:  #FEE2E2;
  --sky:          #EFF6FF;
  --sky-deep:     #3B82F6;

  /* ── Neutrals ── */
  --cream:        #F5F2F0;
  --peach:        #F2F2F6;
  --peach-deep:   #9090A8;
  --text:         #1A1A1A;
  --text-soft:    #6B6B7B;
  --text-muted:   #8A8A8A;
  --white:        #FFFFFF;
  --card-bg:      #FFFFFF;
  --border:       #ECECEC;
  --shadow:       0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.08);
  --radius:       8px;
  --radius-sm:    8px;
}

/* ── RESET ────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Instant dark/light mode — no fade */
.sh-no-transition *,
.sh-no-transition *::before,
.sh-no-transition *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* ── BASE ─────────────────────────────────────────────────── */
body {
  font-family: 'Geist', 'Inter', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
body::before { display: none; }

/* ── Override header.js #FFFFFF !important — restore the subtle grey bg ── */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg) !important;
  font-family: 'Inter', 'Geist', sans-serif !important;
}
body.dark { background: var(--bg) !important; }

/* ── Page wrap + inner page padding (shared by all pages) ── */
.page-wrap { position: relative; z-index: 1; flex: 1 0 auto; min-height: 0; }
body > .page-wrap { margin-left: var(--sidebar-w); }
.page-wrap > .page {
  padding: 24px 20px 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .page-wrap > .page { padding: 20px 16px; }
}
.votes-page-header {
  width: 85%;
  max-width: 1400px;
  margin: 6px auto 12px auto;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .votes-page-header {
    width: 100% !important;
    padding: 0 16px;
  }
}
.page-content-width {
  width: 85%;
  max-width: 1400px;
  margin: 0 auto;
}
.deco { display: none; }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes float      { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-20px); } }
@keyframes bounce     { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-4px); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(16px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn      { from { opacity: 0; transform: scale(0.7); }        to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut    { from { opacity: 1; } to { opacity: 0; } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes confettiFall { 0% { opacity:1; transform: translateY(0) rotate(0deg); } 100% { opacity:0; transform: translateY(100vh) rotate(720deg); } }

/* ── PAGE HERO (shared base for all sub-pages) ────────────── */
.page-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 28px 28px;
  text-align: left;
  border-bottom: 1px solid var(--border, #ECECEC);
  margin-bottom: 32px;
}
.page-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border, #ECECEC);
  border-radius: 50px; padding: 5px 14px;
  font-size: 12px; font-weight: 500; color: var(--text-muted, #8A8A8A);
  margin-bottom: 16px; animation: fadeInDown 0.6s ease;
  font-family: 'Geist', 'DM Sans', sans-serif; letter-spacing: 0.02em;
}
.page-hero h1 {
  font-family: 'Instrument Serif', 'DM Serif Display', serif;
  font-size: clamp(32px, 5vw, 54px); font-weight: 400;
  color: var(--text); line-height: 1.05;
  margin-bottom: 12px; animation: fadeInUp 0.7s ease;
  letter-spacing: -0.025em;
}
.page-hero h1 span { color: var(--sun-deep); font-style: italic; }
.page-hero p {
  font-size: 15px; color: var(--text-muted, #8A8A8A);
  max-width: 540px;
  line-height: 1.6; white-space: normal;
  animation: fadeInUp 0.8s ease;
}

/* ── BUTTONS — canonical system ───────────────────────────────
   One consistent look for every button, themed for light + dark.
   Semantic variants:
     .btn-primary    → GREEN  — main / confirm action
     .btn-danger     → RED    — destructive / cancel   (.btn-coral is an alias)
     .btn-secondary  → GREY   — neutral / secondary action
     .btn-outline    → quiet outline (tertiary)
     .btn-sky        → BLUE   — informational (kept)
   Modifiers: .btn-sm · .btn-lg · .btn-block · :disabled
   Aliases (.btn-coral / .btn-mint) are kept so existing markup stays consistent.
   All variants keep a 2px border (transparent when unused) so heights never jump. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 20px; border-radius: 50px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  border: 2px solid transparent;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* GREEN — primary */
.btn-primary, .btn-mint   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover, .btn-mint:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,197,94,0.35); }

/* RED — danger */
.btn-danger, .btn-coral   { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-danger:hover, .btn-coral:hover { background: #DC2626; border-color: #DC2626; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.35); }

/* GREY — secondary / neutral */
.btn-secondary { background: var(--chip); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); border-color: var(--text-muted); transform: translateY(-1px); }

/* Quiet outline — tertiary */
.btn-outline   { background: transparent; color: var(--text-soft); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* BLUE — informational */
.btn-sky       { background: var(--sky); color: var(--sky-deep); border-color: var(--sky-deep); }
.btn-sky:hover { background: var(--sky-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(59,130,246,0.35); }

/* Sizes / width */
.btn-sm    { padding: 7px 14px; font-size: 13px; }
.btn-lg    { padding: 13px 26px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── On-image buttons (glass) ─────────────────────────────────
   Add .btn-on-image to ANY variant to make it glassy for use over photos /
   busy backgrounds. Each keeps its colour identity but frosted, with white
   text + blur + subtle shadow so it reads on light OR dark images:
     class="btn btn-primary   btn-on-image"  → glassy green
     class="btn btn-danger    btn-on-image"  → glassy red
     class="btn btn-secondary btn-on-image"  → glassy neutral (dark scrim)
     class="btn btn-sky       btn-on-image"  → glassy blue
     class="btn btn-on-image"                → neutral glass (no colour)
   .btn-white is a solid high-emphasis alternative. No dark-theme override is
   needed — these sit on the image, not the page. */
.btn-on-image {
  color: #fff !important;
  /* Hairline edge + faint sheen = a crafted glass pill, not a flat fill */
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(17,18,24,0.34);          /* mostly-transparent dark interior */
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 6px 22px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.btn-on-image:hover { transform: translateY(-1px); background: rgba(17,18,24,0.46); border-color: rgba(255,255,255,0.5); }

/* Colour = dark glass tinted toward the hue + a matching soft edge, so the
   interior stays see-through and elegant rather than a solid colour block. */
.btn-primary.btn-on-image, .btn-mint.btn-on-image             { background: rgba(19,78,47,0.42); border-color: rgba(134,239,172,0.45); }
.btn-primary.btn-on-image:hover, .btn-mint.btn-on-image:hover { background: rgba(19,78,47,0.58); border-color: rgba(134,239,172,0.7); }
.btn-danger.btn-on-image, .btn-coral.btn-on-image             { background: rgba(96,26,26,0.44); border-color: rgba(252,165,165,0.45); }
.btn-danger.btn-on-image:hover, .btn-coral.btn-on-image:hover { background: rgba(96,26,26,0.6); border-color: rgba(252,165,165,0.7); }
.btn-secondary.btn-on-image                                   { background: rgba(17,18,24,0.34); }
.btn-secondary.btn-on-image:hover                             { background: rgba(17,18,24,0.5); }
.btn-sky.btn-on-image                                         { background: rgba(23,52,102,0.44); border-color: rgba(147,197,253,0.45); }
.btn-sky.btn-on-image:hover                                   { background: rgba(23,52,102,0.6); border-color: rgba(147,197,253,0.7); }

.btn-white { background: #fff; color: #14141A; border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.btn-white:hover { background: #F0F0F0; border-color: #F0F0F0; transform: translateY(-1px); }

/* ── DROPDOWNS ────────────────────────────────────────────────
   One consistent look, matching the header menus. Two parts:
   1. Native <select> — styled globally so every select box matches
      (chevron, radius, border, focus ring), light + dark via tokens.
      NB: the OPEN option list is drawn by the OS and can't be themed;
      to fully match, a select must be rebuilt as a .dropdown-menu.
   2. .dropdown-menu / .dropdown-item / .dropdown-divider — the custom
      panel, mirroring the header dropdown (white/#16161A, 12px radius,
      soft shadow, 8px-radius items, hover fill, bounce-in). Opt-in. */

/* 1 — native selects */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: 'Geist', 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--text); background-color: var(--card-bg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 34px 9px 13px; cursor: pointer; outline: none; line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
select:hover  { border-color: var(--text-muted); }
select:focus  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,197,94,0.16); }
select:disabled { opacity: 0.5; cursor: not-allowed; }
/* Explicit dark values — native form controls can resolve var() inconsistently,
   so pin the surfaces to guarantee the select box matches the panel in dark. */
body.dark select { background-color: #16161A; border-color: #26262B; color: #F2F2F0; }
body.dark select:hover { border-color: #45454F; }

/* 2 — custom dropdown panel (matches the header menu) */
.dropdown-menu {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 9000; min-width: 200px;
  opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.97);
  transform-origin: top; transition: opacity .18s ease, transform .18s cubic-bezier(0.34,1.2,0.64,1);
}
.dropdown-menu.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
body.dark .dropdown-menu { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; border: none; background: transparent;
  font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 400; color: var(--text);
  text-align: left; cursor: pointer; text-decoration: none; transition: background .1s;
}
.dropdown-item:hover { background: var(--chip); }
.dropdown-item svg { flex-shrink: 0; opacity: 0.5; }
.dropdown-item.is-active { font-weight: 600; color: var(--accent); }
.dropdown-item.is-danger { color: var(--coral); }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── GOOGLE SIGN-IN BUTTON ────────────────────────────────── */
.google-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 16px; border: 2px solid var(--border); border-radius: 50px;
  background: var(--white); font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--text);
  cursor: pointer; justify-content: center; margin-bottom: 12px; transition: all 0.2s;
}
.google-btn:hover { border-color: #4285F4; background: #f0f6ff; transform: translateY(-1px); }

/* ── SECTION LAYOUT ───────────────────────────────────────── */
.section        { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; position: relative; z-index: 1; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.section-title  { font-family: 'Instrument Serif', 'DM Serif Display', serif; font-size: 30px; font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }

/* ── TABS ─────────────────────────────────────────────────── */
.tabs    { display: flex; gap: 6px; background: var(--cream); border: 2px solid var(--border); border-radius: 50px; padding: 4px; margin-bottom: 28px; flex-wrap: wrap; }
.tab-btn { padding: 8px 18px; border-radius: 50px; border: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.tab-btn.active { background: var(--sun); color: var(--text); box-shadow: 0 2px 8px rgba(126,200,160,0.3); }

/* ── FORMS ────────────────────────────────────────────────── */
.form-group  { margin-bottom: 16px; }
.form-label  { display: block; font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; }
.form-input  { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); background: var(--cream); transition: all 0.2s; outline: none; }
.form-input:focus { border-color: var(--sun-deep); background: var(--white); }
.form-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 13px; color: var(--text-muted); }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.form-error  { background: #FFE4DA; border: 2px solid var(--coral); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 700; color: #C0391B; margin-bottom: 14px; display: none; }
.form-error.show { display: block; }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(45,32,20,0.6); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--white); border-radius: 28px; padding: 32px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; transform: scale(0.92) translateY(20px); transition: all 0.3s; border: 3px solid var(--sun); position: relative; }
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-close { position: absolute; top: 16px; right: 16px; background: var(--sun-light); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--text); }
.modal-close:hover { background: var(--sun); transform: rotate(90deg); }
.modal-title { font-family: 'DM Serif Display', serif; font-size: 26px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
.modal-sub   { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }

/* ── AUTH MODAL ───────────────────────────────────────────── */
.auth-tabs { display: flex; background: var(--cream); border-radius: 50px; padding: 4px; margin-bottom: 24px; border: 2px solid var(--border); }
.auth-tab  { flex: 1; padding: 10px; text-align: center; border-radius: 50px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; color: var(--text-muted); border: none; background: transparent; font-family: 'DM Sans', sans-serif; }
.auth-tab.active { background: var(--sun); color: var(--text); }
.guest-notice    { background: var(--sky); border: 2px dashed var(--sky-deep); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--sky-deep); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

/* ── PANEL (slide-out) ────────────────────────────────────── */
.panel-overlay { position: fixed; inset: 0; background: rgba(20,10,5,0.7); backdrop-filter: blur(6px); z-index: 2000; display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.panel-overlay.open { opacity: 1; pointer-events: all; }
.panel { width: 100%; max-width: 780px; height: 100vh; background: var(--white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.34,1.1,0.64,1); border-left: 3px solid var(--sun); overflow: hidden; }
.panel-overlay.open .panel { transform: translateX(0); }
.panel-header { padding: 20px 24px; border-bottom: 2px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--cream); }
.panel-title  { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; color: var(--text); display: flex; align-items: center; gap: 10px; }
.panel-tabs   { display: flex; gap: 4px; padding: 12px 16px; background: var(--card-bg); border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.panel-tab    { padding: 8px 16px; border-radius: 50px; border: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.panel-tab.active { background: var(--sun); color: var(--text); }
.panel-body   { flex: 1; overflow-y: auto; padding: 24px; }
.panel-section { display: none; }
.panel-section.active { display: block; }


.cart-btn     { position: relative; background: var(--peach); border: 2px solid var(--peach-deep); border-radius: 50px; padding: 8px 16px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); }
.cart-btn:hover { background: var(--peach-deep); transform: scale(1.05); }
.cart-count   { position: absolute; top: -6px; right: -6px; background: var(--coral); color: var(--white); width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--white); }


/* ── PROGRESS BAR ─────────────────────────────────────────── */
.progress-bar-wrap { background: var(--border); border-radius: 50px; height: 10px; margin: 12px 0; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sun) 0%, var(--sun-deep) 100%); border-radius: 50px; transition: width 0.4s ease; }

/* ── TOAST (Etsy-style: white card, neutral icon badge, close button) ───── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
@media (max-width: 600px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    align-items: center;
  }
}
.toast {
  background: var(--white, #ffffff);
  border: 1.5px solid var(--border, #ECECEC);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111827);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  min-width: 200px;
  max-width: 320px;
  pointer-events: all;
  animation: toastIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg, #F3F3F1); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.toast.error .toast-icon { background: var(--coral-light); color: var(--coral); }
.toast-msg { flex: 1; min-width: 0; line-height: 1.4; }
.toast-close {
  flex-shrink: 0; width: 26px; height: 26px; border: none; background: transparent;
  border-radius: 50%; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s;
  font-size: 16px; line-height: 1; padding: 0;
}
.toast-close:hover { background: var(--bg, #F3F3F1); color: var(--text); }

/* ── REWARDS / TIER CARDS ─────────────────────────────────── */
.rewards-section { background: var(--card-bg); border: 2px solid var(--border); border-radius: 28px; padding: 36px; margin-bottom: 32px; }
.rewards-tiers   { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 24px; }
.tier-card       { background: var(--cream); border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; transition: all 0.2s; position: relative; }
.tier-card.active { border-color: var(--sun-deep); background: var(--sun-light); transform: scale(1.03); }
.tier-icon       { font-size: 36px; margin-bottom: 8px; }
.tier-name       { font-family: 'DM Serif Display', serif; font-size: 18px; font-weight: 400; color: var(--text); margin-bottom: 4px; }
.tier-req        { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
.tier-perks      { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.tier-active-badge { position: absolute; top: -10px; right: -10px; background: var(--sun-deep); color: var(--white); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 50px; }

/* ── SPIN WHEEL ───────────────────────────────────────────── */
.spin-section  { background: linear-gradient(135deg, #E8F7F0 0%, #F2E9E0 50%, #E8DFF5 100%); border: 3px dashed var(--sun-deep); border-radius: 28px; padding: 32px; text-align: center; margin-bottom: 32px; position: relative; overflow: hidden; }
.spin-title    { font-family: 'DM Serif Display', serif; font-size: 34px; font-weight: 400; color: var(--text); margin-bottom: 8px; }
.spin-subtitle { font-size: 16px; color: var(--text-soft); margin-bottom: 28px; }
.wheel-wrap      { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wheel-container { position: relative; width: 280px; height: 280px; }
.wheel-pointer   { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid var(--coral); z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.wheel-center    { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; background: var(--white); border-radius: 50%; border: 4px solid var(--sun-deep); z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.spin-result     { background: var(--sun-light); border: 3px solid var(--sun-deep); border-radius: var(--radius); padding: 24px; text-align: center; margin-top: 20px; display: none; }
.spin-result.show { display: block; animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.spin-result-emoji { font-size: 48px; margin-bottom: 8px; }
.spin-result-title { font-family: 'DM Serif Display', serif; font-size: 24px; font-weight: 400; color: var(--text); }
.spin-result-sub   { font-size: 14px; color: var(--text-soft); margin-top: 4px; }

/* ── ADMIN BADGE ──────────────────────────────────────────── */
.admin-badge { background: var(--coral); color: var(--white); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 50px; letter-spacing: 0.5px; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state      { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-text { font-size: 16px; font-weight: 600; }

/* ── SPINNER ──────────────────────────────────────────────── */
.spinner { width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }

/* ── CONFETTI ─────────────────────────────────────────────── */
.confetti-piece { position: fixed; width: 10px; height: 10px; border-radius: 2px; pointer-events: none; z-index: 9999; animation: confettiFall 3s ease-in forwards; }

/* ══════════════════════════════════════════════════════════
   SCROLLBARS
   ══════════════════════════════════════════════════════════ */
html.dark, body.dark, html.dark * , body.dark * {
  scrollbar-color: #4A4A52 #1A1A1E;
}
html.dark ::-webkit-scrollbar, body.dark ::-webkit-scrollbar {
  width: 10px; height: 10px;
}
html.dark ::-webkit-scrollbar-track, body.dark ::-webkit-scrollbar-track {
  background: #1A1A1E;
}
html.dark ::-webkit-scrollbar-thumb, body.dark ::-webkit-scrollbar-thumb {
  background: #4A4A52;
  border-radius: 8px;
}
html.dark ::-webkit-scrollbar-thumb:hover, body.dark ::-webkit-scrollbar-thumb:hover {
  background: #5C5C66;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════ */
html.dark, body.dark {
  background: #0E0E10;
  color: #F2F2F0;
  /* Override all design tokens for dark mode */
  --bg:           #0E0E10;
  --surface:      #16161A;
  --ink:          #F2F2F0;
  --muted:        #9A9A95;
  --line:         #26262B;
  --chip:         #1E1E22;
  --accent:       #22C55E;
  --accent-deep:  #16A34A;
  --accent-light: #2C1F00;
  --sun:          #22C55E;
  --sun-deep:     #22C55E;
  --sun-light:    #2C1F00;
  --mint:         #2C1F00;
  --mint-deep:    #22C55E;
  --lilac:        #2C1F00;
  --lilac-deep:   #22C55E;
  --coral:        #F87171;
  --coral-light:  #2A1A1A;
  --sky:          #1A1F2E;
  --sky-deep:     #60A5FA;
  --cream:        #1E1E22;
  --peach:        #16161A;
  --peach-deep:   #7070A0;
  --text:         #F2F2F0;
  --text-soft:    #9A9A95;
  --text-muted:   #6A6A65;
  --white:        #16161A;
  --card-bg:      #16161A;
  --border:       #26262B;
  --shadow:       0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.35);
}

/* Component-specific dark mode overrides */
body.dark .modal         { background: #16161F; border-color: rgba(233,168,37,0.4); }
body.dark .modal-close   { background: #2C1F00; color: #F0F0F8; }
body.dark .modal-title   { color: #F0F0F8; }
body.dark .modal-sub     { color: #6060A0; }
body.dark .form-input    { background: #111119; border-color: rgba(255,255,255,0.1); color: #F0F0F8; }
body.dark .form-input:focus { background: #2C1F00; border-color: #22C55E; }
body.dark .form-label    { color: #9090A8; }
body.dark .form-error    { background: #2A1A1A; border-color: #F87171; color: #F87171; }
body.dark .tabs          { background: #111119; border-color: rgba(255,255,255,0.07); }
body.dark .tab-btn       { color: #4A4A60; }
body.dark .tab-btn.active { background: #2C1F00; color: #F0F0F8; box-shadow: none; }
body.dark .auth-tabs     { background: #111119; border-color: rgba(255,255,255,0.07); }
body.dark .auth-tab      { color: #4A4A60; }
body.dark .auth-tab.active { background: #2C1F00; color: #F0F0F8; }
body.dark .google-btn    { background: #16161F; border-color: rgba(255,255,255,0.1); color: #F0F0F8; }
body.dark .google-btn:hover { background: #1E1E2C; border-color: rgba(255,255,255,0.2); }
body.dark .guest-notice  { background: #1A1F2E; border-color: rgba(96,165,250,0.3); color: #60A5FA; }
body.dark .panel         { background: #16161F; border-left-color: rgba(233,168,37,0.5); }
body.dark .panel-header  { background: #111119; border-bottom-color: rgba(255,255,255,0.06); }
body.dark .panel-title   { color: #F0F0F8; }
body.dark .panel-tabs    { background: #16161F; border-bottom-color: rgba(255,255,255,0.06); }
body.dark .panel-tab     { color: #4A4A60; }
body.dark .panel-tab.active { background: #2C1F00; color: #F0F0F8; }

body.dark .cart-btn      { background: #1E1E2C; border-color: rgba(255,255,255,0.1); color: #9090A8; }
body.dark .cart-btn:hover { background: #252538; border-color: rgba(255,255,255,0.18); color: #F0F0F8; }

body.dark .section-title { color: #F0F0F8; }
body.dark .tier-card     { background: #111119; border-color: rgba(255,255,255,0.07); }
body.dark .tier-card.active { background: #2C1F00; border-color: #22C55E; }
body.dark .tier-name     { color: #F0F0F8; }
body.dark .rewards-section  { background: #111119; border-color: rgba(255,255,255,0.07); }
body.dark .spin-section  { background: linear-gradient(135deg, #2C1F00 0%, #1A1A2E 50%, #1A1830 100%); }
body.dark .page-hero-badge  { background: transparent; border-color: #26262B; color: #555560; }
body.dark .page-hero { border-bottom-color: #26262B; }
body.dark .page-hero h1  { color: #F0F0F8; }
body.dark .page-hero p   { color: #666670; }
body.dark .toast          { background: #1E1E22; color: #F0F0F8; box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); }
body.dark .toast-icon     { background: rgba(255,255,255,0.08); color: #F0F0F8; }
body.dark .toast.error .toast-icon { background: rgba(248,113,113,0.15); color: #F87171; }
body.dark .toast-close    { color: #8A8A93; }
body.dark .toast-close:hover { background: rgba(255,255,255,0.08); color: #F0F0F8; }
/* Buttons — dark theme. Green primary + blue keep their vars (already dark-aware).
   Red is forced to a strong shade (the dark --coral token is a light red that fails
   against white text), and grey gets explicit dark surfaces. */
body.dark .btn-danger, body.dark .btn-coral { background: #EF4444; border-color: #EF4444; color: #fff; }
body.dark .btn-danger:hover, body.dark .btn-coral:hover { background: #DC2626; border-color: #DC2626; box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
body.dark .btn-secondary { background: #24242A; color: #F2F2F0; border-color: #33333A; }
body.dark .btn-secondary:hover { background: #2C2C34; border-color: #4A4A55; }
body.dark .btn-outline   { background: transparent; color: #9090A8; border-color: rgba(255,255,255,0.12); }
body.dark .btn-outline:hover { border-color: rgba(255,255,255,0.25); color: #F0F0F8; }
body.dark footer         { background: #07070E; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .page-hero p { white-space: normal; }
  .panel { max-width: 100%; }

}

/* Better mobile touch targets */
@media (max-width: 480px) {
  .btn { padding: 10px 18px; font-size: 13px; }
  .btn-sm { padding: 8px 14px; font-size: 12px; }
  .modal { padding: 24px 20px; border-radius: 20px; }
  .section { padding-left: 16px; padding-right: 16px; }

  .cart-footer { padding: 16px; }
  .cart-header { padding: 18px 16px; }
}

/* ── PAGE TAB NAVIGATION (Shop / Votes / Referral Redeemer) ──────────── */
.page-tab-nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-tab-nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1.5px solid rgba(0,0,0,0.08);
  position: relative;
}
.page-tab-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #9aada3;
  text-decoration: none;
  padding: 12px 0;
  margin-right: 28px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: color 0.22s ease;
  position: relative;
  letter-spacing: 0.1px;
  background: none;
  border: none;
  cursor: pointer;
}
.page-tab-link:first-child { padding-left: 0; }
.page-tab-link:last-child  { margin-right: 0; }
.page-tab-link:hover { color: #3D8B6A; }
.page-tab-link.active { color: #1a1a1a; font-weight: 700; }
.page-tab-indicator {
  position: absolute;
  bottom: -1px;
  height: 2.5px;
  background: linear-gradient(90deg, #7EC8A0, #3D8B6A);
  border-radius: 2px 2px 0 0;
  transition: left 0.3s cubic-bezier(0.45,0,0.25,1), width 0.3s cubic-bezier(0.45,0,0.25,1);
  pointer-events: none;
  will-change: left, width;
}
body.dark .page-tab-nav-inner { border-color: rgba(255,255,255,0.1); }
body.dark .page-tab-link { color: #4a6356; }
body.dark .page-tab-link:hover { color: #7EC8A0; }
body.dark .page-tab-link.active { color: #e8f4ee; }
body.dark .page-tab-indicator { background: linear-gradient(90deg, #3D8B6A, #7EC8A0); }
@media (max-width: 600px) {
  .page-tab-nav { padding: 0 14px; }
  .page-tab-link { font-size: 14px; margin-right: 18px; }
}

/* ── MARKET DESIGN: Sidebar layout ───────────────────────────────────────── */
@media (max-width: 799.98px) {
  body > .page-wrap { margin-left: 0; }
}
/* ── IGN underline input — dark mode transparency ────────────────────────── */
body.dark .ign-underline-wrap,
body.dark .ign-underline-wrap > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body.dark .ign-underline-input,
body.dark input[type="text"].ign-underline-input,
body.dark input[type="number"].ign-underline-input {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-box-shadow: none !important;
}
body.dark .ign-underline-input:-webkit-autofill,
body.dark .ign-underline-input:-webkit-autofill:hover,
body.dark .ign-underline-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ══════════════════════════════════════════════════════════
   STARRED VARIANT INDICATOR
   `starred` marks the special variant of an item — it pairs with a standard
   one sharing the same inventory_tag. These two classes are the single visual
   language for that flag everywhere it surfaces (builder cards and pack
   summary, checkout, dashboard orders, order and pack pages), replacing the
   old Star.png overlay that sat on the item thumbnail and was easy to miss.
   ══════════════════════════════════════════════════════════ */

/* Inline glyph that sits directly before an item name. */
.pp-star-ico {
  flex-shrink: 0;
  vertical-align: -2px;
  margin-right: 4px;
}

/* Labelled pill. Gold when the starred variant is active, grey when it isn't —
   the grey state is what makes it read as a control rather than a badge, so
   only render it for items that can actually be toggled. */
.pp-starred-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 13px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 1.5px solid #F5C451;
  background: #FEF6E0;
  color: #92610A;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
body.dark .pp-starred-pill {
  border-color: rgba(245, 196, 81, 0.45);
  background: rgba(245, 196, 81, 0.25);
  color: #F5C451;
}
.pp-starred-pill.is-off {
  border: 1.5px solid var(--border, #ECECEC);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-muted, #AFAFAF);
  backdrop-filter: blur(4px);
}
body.dark .pp-starred-pill.is-off {
  border-color: #33333A;
  background: rgba(20, 20, 22, 0.88);
  color: #6E6E78;
}
/* The off state's star is drawn with currentColor so it greys out with the
   pill; the on state's is hard-coded gold in the markup. */
.pp-starred-pill.is-off .pp-star-ico { color: inherit; }

button.pp-starred-pill {
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
button.pp-starred-pill:hover { border-color: #E0A92B; color: #7A5108; }
button.pp-starred-pill.is-off:hover {
  border-color: var(--text-muted, #AFAFAF);
  color: var(--text-soft, #3D3D3D);
  background: #FFFFFF;
}
body.dark button.pp-starred-pill.is-off:hover {
  border-color: #55555F;
  color: #B0B0B8;
  background: #202024;
}