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

:root {
  color-scheme: light dark;
  --navy: #0a1628;
  --navy-mid: #122040;
  --navy-light: #1a3060;
  --gold: #c9a84c;
  --gold-light: #e8c96a;
  --gold-pale: #f5e9c3;
  --cream: #faf7f0;
  --white: #ffffff;
  --gray: #666e80;
  --gray-light: #e8eaf0;
  --text: #1a1f2e;
  --radius: 4px;
  --shadow: 0 4px 24px rgba(10,22,40,0.12);
  /* Library item types. Albums keep the brand gold; playlists take the
     cornflower already used for the Library panel's left border, lightened so
     it holds contrast as text on navy. */
  --type-album: #e8c96a;
  --type-playlist: #7ba3e8;
}

/* Visually hidden, still announced. Used where a label is abbreviated on screen
   but has to be read in full. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
}

/* ─── NAV ─── */
/* Scope to the site navbar (#top) so this fixed-position styling never leaks
   onto other <nav> elements, e.g. the matched-draws pager (nav.matches-pager). */
#top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(10,22,40,0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 72px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

#top .logo img {
  height: 48px;
  width: auto;
  display: block;
}

nav .nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

nav .nav-links a {
  color: var(--gold-pale);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}

nav .nav-links a:hover { color: var(--gold-light); }

#authSection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#authSection .btn {
  width: auto;
  white-space: nowrap;
}
.nav-greeting {
  font-size: 12px;
  color: var(--gold-pale);
  margin-right: 6px;
  white-space: nowrap;
}
.btn-signout {
  padding: 8px 16px !important;
  font-size: 12px !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid var(--gold);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-pale);
  transition: all 0.3s;
}

/* ─── THEME TOGGLE ─── */
.nav-toggle-li { display: inline-flex; align-items: center; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(245,233,195,0.28);
  background: transparent;
  color: var(--gold-pale);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201,168,76,0.1);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
/* Icon reflects the active theme: moon at night, sun by day. Scoped under
   .theme-toggle so these beat the `.theme-toggle svg` sizing rule. */
.theme-toggle .theme-icon--sun { display: none; }
.theme-toggle .theme-icon--moon { display: block; }
:root[data-theme="light"] .theme-toggle .theme-icon--sun { display: block; }
:root[data-theme="light"] .theme-toggle .theme-icon--moon { display: none; }

/* ─── VERIFY EMAIL BANNER ─── */
.verify-banner[hidden] { display: none; }
.verify-banner {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(18, 32, 64, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,168,76,0.3);
  color: var(--gold-pale);
  padding: 12px 40px;
  font-size: 14px;
}
.verify-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.verify-banner-inner p { flex: 1 1 240px; min-width: 200px; }
.verify-banner-inner strong { color: var(--gold); }
.verify-banner-actions {
  display: inline-flex;
  gap: 8px;
}
.verify-banner-actions .btn {
  width: auto;
  white-space: nowrap;
  padding: 6px 14px;
  font-size: 12px;
  margin-top: 0;
}
.verify-banner-msg[hidden] { display: none; }
.verify-banner-msg {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--gold-pale);
  margin-top: 4px;
}
.verify-banner-msg.error { color: #fca5a5; }
.verify-banner-msg.success { color: #86efac; }

body.verify-pending .hero { padding-top: calc(72px + 64px); }

/* ─── HERO ─── */
.hero {
  min-height: 560px;
  background: var(--navy);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 72px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(201,168,76,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(26,48,96,0.6) 0%, transparent 60%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 64px;
  width: 100%;
}

.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}

.hero-text h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero-text h2 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
  color: var(--gold-pale);
  line-height: 1.5;
  margin-bottom: 12px;
}

.hero-text h3 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 300;
  color: rgba(245,233,195,0.7);
  line-height: 1.5;
  margin-bottom: 40px;
}

.hero-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* ─── SECTION BASE ─── */
section { padding: 96px 40px; }

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

h2.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 24px;
}

h2.section-title.light { color: var(--white); }

.divider {
  width: 56px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 32px;
}

/* ─── WHAT IS KENO ─── */
.what-is-keno { background: var(--navy); border-top: 1px solid rgba(201,168,76,0.25); }

.keno-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.keno-grid img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.keno-text p {
  color: rgba(245,233,195,0.8);
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.luck-box {
  background: var(--navy);
  border-radius: 8px;
  padding: 40px;
  margin-top: 48px;
}

.luck-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 16px;
}

.luck-box p {
  color: var(--gold-pale);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.luck-box p:last-child { margin-bottom: 0; }

/* ─── PROUDLY CANADIAN ─── */
.canadian-badge {
  background: var(--navy);
  padding: 48px 40px;
  text-align: center;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.canadian-proudly {
  font-size: 1.1rem;
  color: var(--gold-pale);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}
.canadian-word {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #dd2e30;
  font-family: 'Playfair Display', serif;
  line-height: 1.2;
  margin-bottom: 4px;
}
.canadian-tagline {
  font-size: 0.95rem;
  color: rgba(245,233,195,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── FORM ─── */
.form-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px;
  padding: 40px;
}

.form-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 28px;
}

.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,233,195,0.6);
  margin-bottom: 6px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, textarea:focus {
  border-color: var(--gold);
}

textarea { resize: vertical; min-height: 80px; }

.radio-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: rgba(245,233,195,0.8);
  cursor: pointer;
}

.radio-group input[type="radio"] {
  width: auto;
  accent-color: var(--gold);
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  width: 100%;
  margin-top: 8px;
}

.btn:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.form-msg {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  display: none;
}

.form-msg.success {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
  color: #86efac;
  display: block;
}

.form-msg.error {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  display: block;
}

/* ─── NEWSLETTER ─── */
.newsletter-bar {
  background: var(--navy);
  padding: 48px 40px;
  border-top: 1px solid rgba(201,168,76,0.25);
  border-bottom: 1px solid rgba(201,168,76,0.25);
}

.newsletter-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-inner h3 {
  font-family: 'Playfair Display', serif;
  color: var(--gold);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.newsletter-inner p {
  color: rgba(245,233,195,0.7);
  font-size: 14px;
  margin-bottom: 24px;
}

.newsletter-form {
  display: flex;
  gap: 12px;
}

.newsletter-form input {
  flex: 1;
}

.newsletter-form .btn {
  width: auto;
  white-space: nowrap;
  margin-top: 0;
}

/* ─── DATA SECTION ─── */
.data-section {
  background: var(--navy);
  text-align: center;
  border-top: 1px solid rgba(201,168,76,0.25);
}
.data-samples {
  margin-top: 56px;
  text-align: left;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.data-section .stats {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin: 48px 0;
  flex-wrap: wrap;
}

.stat {
  text-align: center;
}

.stat-number {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}

.data-section img {
  width: 100%;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 2px solid rgba(201,168,76,0.2);
}

/* ─── FOUNDER ─── */
.founder {
  background: var(--navy);
  color: var(--white);
  border-top: 1px solid rgba(201,168,76,0.25);
}

.founder-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.founder-bio h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--white);
  margin-bottom: 4px;
}

.founder-bio .title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.founder-story h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 20px;
}

.founder-story p {
  color: rgba(245,233,195,0.8);
  font-size: 1.02rem;
  line-height: 1.8;
}

.quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  color: rgba(201,168,76,0.2);
  line-height: 0.5;
  display: block;
  margin-bottom: 24px;
}

/* ─── FAQ ─── */
.faq { background: var(--navy); border-top: 1px solid rgba(201,168,76,0.25); }

.faq-list {
  list-style: none;
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid rgba(201,168,76,0.12);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold-pale);
  gap: 24px;
}

.faq-question:hover { color: var(--gold); }

.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gold);
  transition: transform 0.3s;
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}

.faq-item.open .faq-answer {
  max-height: 800px;
}

.faq-answer-inner {
  padding-bottom: 28px;
  color: rgba(245,233,195,0.8);
  font-size: 1rem;
  line-height: 1.8;
}

.faq-answer-inner ul {
  list-style: none;
  margin-top: 16px;
}

.faq-answer-inner ul li {
  padding: 6px 0 6px 20px;
  position: relative;
}

.faq-answer-inner ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.faq-answer-inner strong { color: var(--gold); }

/* ─── INTERNATIONAL ─── */
.international {
  background: var(--navy-mid);
  color: var(--white);
  text-align: center;
}

.international h2 { color: var(--white); margin: 0 auto 16px; }

.international .divider { margin: 0 auto 32px; }

.international > .container > p {
  color: rgba(245,233,195,0.75);
  max-width: 700px;
  margin: 0 auto 48px;
  font-size: 1.05rem;
}

.locations-grid {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.location-tag {
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-pale);
  letter-spacing: 0.05em;
}

/* ─── FOOTER ─── */
footer {
  background: var(--navy);
  border-top: 1px solid rgba(201,168,76,0.25);
  padding: 60px 40px 32px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo img {
  height: 44px;
  margin-bottom: 20px;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-col a, .footer-col p {
  display: block;
  color: rgba(245,233,195,0.6);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(201,168,76,0.1);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(245,233,195,0.35);
}

.footer-bottom a {
  color: rgba(201,168,76,0.5);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-bottom a:hover { color: var(--gold); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  #top { padding: 0 20px; }
  .verify-banner { padding: 12px 20px; }
  body.verify-pending .hero { padding-top: calc(72px + 110px); }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    background: var(--navy);
    padding: 24px 20px;
    border-bottom: 1px solid rgba(201,168,76,0.2);
    gap: 20px;
  }

  section { padding: 64px 20px; }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 60px 20px;
    text-align: center;
  }

  .hero-image { order: -1; }

  .keno-grid,
  .membership-inner,
  .founder-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-row { grid-template-columns: 1fr; }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form .btn {
    width: 100%;
  }

  .data-section .stats { gap: 32px; }

  .stat-number { font-size: 2.5rem; }
}

/* ─── AUTH MODAL ─── */
.auth-modal[hidden] { display: none; }
#authModal [hidden] { display: none !important; }
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,22,40,0.7);
  backdrop-filter: blur(4px);
}
.auth-modal-card {
  position: relative;
  background: var(--navy-mid);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  color: var(--white);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.auth-modal-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 24px;
  text-align: center;
}
.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--gold-pale);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.2s;
}
.auth-modal-close:hover { color: var(--gold); }

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--white);
  color: var(--navy);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.auth-google-btn:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
}
.auth-google-btn .g-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: rgba(245,233,195,0.5);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201,168,76,0.2);
}

.auth-modal-card .form-group label {
  color: rgba(245,233,195,0.7);
}

.auth-toggle {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(245,233,195,0.7);
}
.auth-toggle a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.auth-toggle a:hover { color: var(--gold-light); text-decoration: underline; }

#authError:empty { display: none; }

.auth-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.auth-actions .btn {
  flex: 1;
  margin-top: 0;
}
.btn-secondary {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-secondary:hover {
  background: var(--gold);
  color: var(--navy);
}

.auth-forgot {
  margin-top: 6px;
  text-align: right;
  font-size: 12px;
}
.auth-forgot a {
  color: var(--gold);
  text-decoration: none;
}
.auth-forgot a:hover { color: var(--gold-light); text-decoration: underline; }

.password-wrapper {
  position: relative;
}
.password-wrapper input {
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(245,233,195,0.55);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: color 0.2s;
}
.password-toggle:hover { color: var(--gold); }
.password-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: inline; }

.strength-meter {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.strength-meter > span {
  flex: 1;
  height: 4px;
  background: rgba(245,233,195,0.15);
  border-radius: 2px;
  transition: background 0.2s;
}
.strength-meter.weak > span:nth-child(1) { background: #ef4444; }
.strength-meter.ok > span:nth-child(1),
.strength-meter.ok > span:nth-child(2) { background: var(--gold); }
.strength-meter.strong > span { background: #22c55e; }

.strength-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,233,195,0.5);
  margin-top: 6px;
  min-height: 14px;
}
.strength-label.weak { color: #fca5a5; }
.strength-label.ok { color: var(--gold-pale); }
.strength-label.strong { color: #86efac; }

/* ─── AI CHAT WIDGET ─── */
/* Self-contained navy-and-gold concierge. The same engraved gold keno-chip is
   the launcher, the strategist's avatar and the upsell emblem — the widget's
   signature. The panel stays dark in both site themes so it always reads as
   its own premium object. */
.ai-chat-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: none;               /* chat.js sets display:flex on sign-in */
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: radial-gradient(circle at 34% 30%, var(--gold-light) 0%, var(--gold) 58%, #a8842f 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 0 4px rgba(10,22,40,0.9),          /* navy gap = engraved ring */
    0 0 0 5px rgba(201,168,76,0.55),       /* outer gold rim */
    0 12px 28px -8px rgba(0,0,0,0.55);
  z-index: 1001;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ai-chat-btn::after {           /* invite halo */
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.6);
  animation: ai-chat-invite 2.8s ease-out infinite;
  pointer-events: none;
}
.ai-chat-btn:hover { transform: translateY(-2px) scale(1.04); }
.ai-chat-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.ai-chat-btn svg { width: 26px; height: 26px; display: block; }
.ai-chat-btn__chevron { display: none; }
/* When the panel is open the launcher becomes a minimize affordance and the
   invite halo rests. */
body:has(#aiChatWindow.open) .ai-chat-btn__spark { display: none; }
body:has(#aiChatWindow.open) .ai-chat-btn__chevron { display: block; }
body:has(#aiChatWindow.open) .ai-chat-btn::after { animation: none; opacity: 0; }

@keyframes ai-chat-invite {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ai-chat-window {
  position: fixed;
  bottom: 104px;
  right: 28px;
  width: min(384px, calc(100vw - 32px));
  height: min(620px, calc(100dvh - 140px));
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s,
              width 0.25s ease, height 0.25s ease;
}
.ai-chat-window.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
/* Expanded: the same corner-anchored panel grown to a working surface, so
   Engraved Ledger plots get a ~640px column instead of ~320px. Sits over the
   navbar by design (z-index already above it). */
.ai-chat-window.expanded {
  width: min(720px, calc(100vw - 32px));
  height: calc(100dvh - 132px);
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(10,22,40,0.6);
  border-bottom: 1px solid rgba(201,168,76,0.22);
}
.ai-chat-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: radial-gradient(circle at 34% 30%, var(--gold-light) 0%, var(--gold) 60%, #a8842f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 0 0 3px rgba(201,168,76,0.18);
}
.ai-chat-avatar svg { width: 20px; height: 20px; display: block; }
.ai-chat-titles { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ai-chat-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--gold-pale);
}
.ai-chat-status {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,233,195,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-chat-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6fe0a8;
  box-shadow: 0 0 0 2px rgba(111,224,168,0.22);
}
.ai-chat-min {
  margin-left: auto;
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(245,233,195,0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ai-chat-min:hover { background: rgba(201,168,76,0.14); color: var(--gold-light); }
.ai-chat-min:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ai-chat-min svg { width: 20px; height: 20px; display: block; }
/* New-session and expand join the chevron in the same ghost-button recipe.
   The first action takes over the chevron's auto margin so the trio sits
   together right of the titles. */
.ai-chat-act {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(245,233,195,0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ai-chat-act:hover { background: rgba(201,168,76,0.14); color: var(--gold-light); }
.ai-chat-act:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ai-chat-act svg { width: 18px; height: 18px; display: block; }
#aiChatNew { margin-left: auto; }
#aiChatNew ~ .ai-chat-min { margin-left: 0; }
/* 32px visual, 44px effective touch target. */
.ai-chat-act, .ai-chat-min { position: relative; }
.ai-chat-act::after, .ai-chat-min::after { content: ''; position: absolute; inset: -6px; }
#aiChatExpand .ico-contract { display: none; }
.ai-chat-window.expanded #aiChatExpand .ico-expand { display: none; }
.ai-chat-window.expanded #aiChatExpand .ico-contract { display: block; }

.ai-chat-messages {
  flex: 1;
  padding: 18px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.4) transparent;
}
.ai-chat-messages::-webkit-scrollbar { width: 7px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 4px; }
.msg {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 82%;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.msg.user {
  align-self: flex-end;
  background: rgba(201,168,76,0.16);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold-pale);
  border-bottom-right-radius: 4px;
}
.msg.ai {
  align-self: flex-start;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(201,168,76,0.6);
  color: rgba(245,233,195,0.92);
  border-bottom-left-radius: 4px;
}
.msg.ai a { color: var(--gold-light); }
.msg.ai strong { color: var(--gold-light); }
.msg.ai p { margin: 0 0 8px; }
.msg.ai p:last-child { margin-bottom: 0; }
.msg.ai ul, .msg.ai ol { margin: 4px 0 8px; padding-left: 18px; }
.msg.ai code {
  background: rgba(0,0,0,0.3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

.ai-chat-input {
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(201,168,76,0.2);
  background: rgba(10,22,40,0.5);
}
.ai-chat-input input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  color: var(--gold-pale);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-chat-input input::placeholder { color: rgba(245,233,195,0.4); }
.ai-chat-input input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.16);
}
.ai-chat-input button {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.ai-chat-input button:hover { background: var(--gold-light); transform: translateY(-1px); }
.ai-chat-input button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ai-chat-input button svg { width: 20px; height: 20px; display: block; }
.ai-chat-input input:disabled,
.ai-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Plan 2: inline plots (Engraved Ledger — gold hairlines, recessed plate) ── */
.msg.ai.plot-msg { max-width: 92%; width: 92%; }
.chat-plot { width: 100%; height: auto; display: block; background: rgba(0,0,0,0.22); border-radius: 8px; }
.chat-plot .plot-axis { stroke: rgba(245,233,195,0.3); stroke-width: 1; }
.chat-plot .plot-label { fill: rgba(245,233,195,0.55); font-size: 8px; font-family: 'Source Sans 3', monospace; }
.chat-plot .plot-note { fill: rgba(245,233,195,0.6); font-size: 8px; font-family: 'Source Sans 3', sans-serif; }
.chat-plot .plot-point { fill: rgba(232,201,106,0.85); }
.chat-plot .plot-annotation { fill: rgba(201,168,76,0.14); }
.chat-plot .plot-bar { fill: rgba(201,168,76,0.7); }
.chat-plot .plot-bar-overflow { fill: rgba(201,168,76,0.35); }
.chat-plot .plot-cell { fill: rgba(232,201,106,0.32); }
.chat-plot .plot-cell-text { fill: var(--gold-pale); font-size: 8px; font-family: 'Source Sans 3', monospace; }
/* gap_strips: "now" borrows the playlist cornflower — never used for a series */
.chat-plot .plot-grid { stroke: rgba(245,233,195,0.1); stroke-width: 1; }
.chat-plot .plot-qtick { stroke: rgba(245,233,195,0.75); stroke-width: 1; }
.chat-plot .plot-now { fill: var(--type-playlist); }
.chat-plot .plot-now-label { fill: var(--type-playlist); font-size: 8px; font-family: 'Source Sans 3', monospace; }

/* ── Plan 2: proposal confirm cards (Engraved Ledger) ── */
.proposal-card {
  align-self: flex-start;
  max-width: 92%;
  width: 92%;
  padding: 11px 14px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(201,168,76,0.9);
  color: rgba(245,233,195,0.92);
  overflow-wrap: anywhere;
}
.proposal-kind {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
  opacity: 0.85;
}
.proposal-actions { display: flex; gap: 8px; margin-top: 10px; }
.proposal-actions em { color: rgba(245,233,195,0.55); font-size: 12.5px; }
.proposal-confirm, .proposal-dismiss {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  padding: 6px 14px;
  transition: background 0.15s;
}
.proposal-confirm { background: transparent; border: 1px solid var(--gold); color: var(--gold-light); }
.proposal-confirm:hover:not(:disabled) { background: rgba(201,168,76,0.15); }
.proposal-confirm:disabled { opacity: 0.45; cursor: default; }
.proposal-dismiss { background: transparent; border: 1px solid rgba(245,233,195,0.25); color: rgba(245,233,195,0.6); }
.proposal-dismiss:hover { background: rgba(255,255,255,0.06); }
.proposal-cost {
  margin-top: 6px;
  padding-top: 6px;
  font-size: 12px;
  color: rgba(245,233,195,0.6);
  border-top: 1px dotted rgba(201,168,76,0.3);
}
.proposal-result { margin-top: 8px; font-size: 12.5px; font-style: italic; color: rgba(245,233,195,0.65); }
.proposal-search-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Source Sans 3', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  padding: 5px 8px;
  border-radius: 4px;
  margin-top: 4px;
  background: rgba(0,0,0,0.25);
  color: var(--gold-pale);
}
.proposal-search-row::after { content: ''; }
.proposal-search-row.running::after { content: 'running…'; color: var(--gold-light); }
.proposal-search-row.ok::after { content: 'saved ✓'; color: #6fe0a8; }
.proposal-search-row.failed::after { content: 'failed'; color: #fca5a5; }
.proposal-search-row.skipped { color: rgba(245,233,195,0.4); text-decoration: line-through; }
.proposal-search-row.skipped::after { content: 'skipped'; text-decoration: none; }

/* ── Strategy chooser card (Ledger Rows — same Engraved Ledger plate) ── */
.strategy-card {
  align-self: flex-start;
  max-width: 92%;
  width: 92%;
  padding: 11px 14px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid rgba(201,168,76,0.9);
  color: rgba(245,233,195,0.92);
  overflow-wrap: anywhere;
}
.strategy-kind {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 4px;
  opacity: 0.85;
}
.strategy-opt {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 7px 10px;
  margin-top: 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
  color: var(--gold-pale);
  transition: border-color 0.15s, background 0.15s;
}
.strategy-opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(201,168,76,0.12); }
.strategy-opt:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.strategy-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.strategy-sum { display: block; font-size: 12.5px; color: rgba(245,233,195,0.7); margin-top: 1px; }
/* Settled: the marked row keeps its gold edge, the rest recede. */
.strategy-card.settled .strategy-opt { opacity: 0.45; cursor: default; }
.strategy-card.settled .strategy-opt.chosen { opacity: 1; border-color: var(--gold); }
.strategy-result { margin-top: 8px; font-size: 12.5px; font-style: italic; color: rgba(245,233,195,0.65); }

/* These panels set `display: flex`, which would otherwise beat the UA
   `[hidden] { display: none }` rule — so the hidden attribute must win here for
   chat.js to switch between live chat and the upsell CTA. */
.ai-chat-messages[hidden],
.ai-chat-upsell[hidden],
.ai-chat-input[hidden] { display: none; }

/* Locked-premium panel shown to signed-in users without the agent plan. */
.ai-chat-upsell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: center;
  overflow-y: auto;
}
.upsell-emblem {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: radial-gradient(circle at 34% 30%, var(--gold-light) 0%, var(--gold) 60%, #a8842f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 0 0 4px rgba(201,168,76,0.16);
  margin-bottom: 4px;
}
.upsell-emblem svg { width: 26px; height: 26px; display: block; }
.upsell-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.upsell-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold-pale);
  margin: 0;
}
.upsell-lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245,233,195,0.75);
  margin: 0;
  max-width: 30ch;
}
.upsell-benefits {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}
.upsell-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(245,233,195,0.9);
}
.upsell-benefits li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.35em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
/* Keep the CTA gold on the always-dark panel, overriding the light-theme
   .btn override (which would otherwise be navy-on-navy). */
.ai-chat-upsell .upsell-cta {
  width: 100%;
  margin-top: 8px;
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
}
.ai-chat-upsell .upsell-cta:hover { background: var(--gold-light); color: var(--navy); }
.upsell-note {
  font-size: 11.5px;
  color: rgba(245,233,195,0.5);
  margin: 0;
}

/* Typing indicator while the agent is thinking. */
.msg.ai.thinking { display: flex; gap: 5px; align-items: center; padding: 12px 14px; }
.msg.ai.thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.45;
  animation: ai-typing 1.2s infinite ease-in-out;
}
.msg.ai.thinking span:nth-child(2) { animation-delay: 0.2s; }
.msg.ai.thinking span:nth-child(3) { animation-delay: 0.4s; }

/* Full-width bottom sheet on phones. */
@media (max-width: 560px) {
  .ai-chat-btn { bottom: 20px; right: 20px; }
  .ai-chat-window {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 88dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    transform-origin: bottom center;
    transform: translateY(100%);
  }
  .ai-chat-window.open { transform: translateY(0); }
  /* Tuck the launcher away while the sheet covers the screen. */
  body:has(#aiChatWindow.open) .ai-chat-btn { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-btn,
  .ai-chat-window,
  .ai-chat-input button,
  .ai-chat-min,
  .msg.ai.thinking span { transition: none; animation: none; }
  .ai-chat-btn::after { animation: none; opacity: 0; }
  .ai-chat-window { transform: none; }
}
@keyframes ai-typing {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* === Analytics ============================================== */
.analytics-view {
  padding: 56px 40px 96px;
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
/* The hero sits on the same navy. Replace the hard section seam with
   a hairline gold rule so the eye reads them as one continuous wall. */
.hero + .analytics-view {
  border-top: 1px solid rgba(201,168,76,0.15);
}
.analytics-view::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(201,168,76,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(26,48,96,0.55) 0%, transparent 60%);
  pointer-events: none;
}
.analytics-view .container { position: relative; max-width: 1100px; margin: 0 auto; }
.analytics-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
}
.analytics-title em { font-style: italic; color: var(--gold); }

/* ------ Preview (signed-out) -------------------------------- */
.analytics-preview .preview-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
  margin-top: 8px;
}
.preview-explainer p {
  color: var(--gold-pale);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 20px;
}
.preview-explainer p.muted { color: rgba(245,233,195,0.7); }
.preview-explainer p em { font-style: italic; color: var(--gold-light); }
.preview-explainer p strong { color: var(--gold); font-weight: 700; }
.preview-features {
  list-style: none;
  margin-top: 32px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.preview-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-pale);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.preview-features .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201,168,76,0.12);
  flex-shrink: 0;
}

/* ------ Sample table card ----------------------------------- */
.preview-sample { position: relative; }
.sample-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,233,195,0.7);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sample-label strong {
  color: var(--gold-pale);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sample-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border: 1px solid rgba(201,168,76,0.55);
  color: var(--gold);
  border-radius: 2px;
}
.sample-frame {
  position: relative;
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  padding: 28px 24px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.sample-frame .results-table { min-width: 0; }
.sample-frame .results-table th,
.sample-frame .results-table td {
  padding: 8px 4px;
  font-size: 12px;
  border-color: rgba(255,255,255,0.08);
}
.sample-frame .results-table thead th {
  background: rgba(201,168,76,0.85);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.sample-frame .results-table tbody th {
  background: rgba(255,255,255,0.03);
  color: var(--gold-pale);
  font-weight: 600;
  font-size: 11px;
  text-align: left;
  padding-left: 10px;
}
.sample-frame .results-table.sample tbody td {
  color: var(--gold-pale);
}

.sample-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.85) 60%, rgba(10,22,40,0.92) 100%);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  text-align: center;
  border-radius: 12px;
}
.veil-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--gold);
  margin: 0;
}
.veil-sub {
  color: rgba(245,233,195,0.8);
  font-size: 0.95rem;
  margin: 0 0 12px;
}
.veil-cta {
  width: auto;
  padding: 10px 28px;
  font-size: 13px;
  margin: 0;
}

/* ------ Pricing rail ---------------------------------------- */
.pricing-section {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid rgba(201,168,76,0.15);
}
.pricing-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--white);
  font-weight: 700;
  margin-bottom: 36px;
}
.pricing-title em { font-style: italic; color: var(--gold); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pricing-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 28px;
}
.tier {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tier:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.tier-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 2px;
}
.tier-price .amount {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.tier-price .cadence {
  color: rgba(245,233,195,0.6);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.tier-tagline {
  color: var(--gold-pale);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
  flex-grow: 1;
}
.tier-features li {
  position: relative;
  padding-left: 22px;
  color: rgba(245,233,195,0.85);
  font-size: 0.95rem;
  line-height: 1.45;
}
.tier-features li strong { color: var(--gold-light); font-weight: 600; }
.tier-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.tier-cta {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font-size: 13px;
}
.btn.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn.btn-outline:hover {
  background: rgba(201,168,76,0.12);
  color: var(--gold-light);
}
.tier-featured {
  background:
    linear-gradient(180deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.04) 100%),
    rgba(255,255,255,0.04);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.2),
    0 40px 80px -40px rgba(0,0,0,0.7);
  transform: translateY(-6px);
}
.tier-featured:hover { transform: translateY(-9px); }
.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ------ Signed-in dashboard --------------------------------- */
.analytics-dashboard[hidden] { display: none; }
.analytics-intro { color: var(--gold-pale); margin-bottom: 16px; font-size: 1.02rem; max-width: 720px; }
.quota-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
/* Quota badge: a single outlined pill holding the running query balance
   (plan allowance + never-expiring credits). The renew note beside it carries
   the monthly top-up rate; both live in .quota-row. */
.quota-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--gold, #c9a14a);
  border-radius: 999px;
  background: rgba(201,168,76,0.08);
  color: var(--gold-pale);
}
.quota-badge__coin { align-self: center; color: var(--gold-light); font-size: 13px; }
.quota-badge__num { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.quota-badge__unit { font-size: 12px; color: rgba(245,233,195,0.72); letter-spacing: 0.02em; }
.quota-badge.exhausted { border-color: #e57373; color: #e57373; background: rgba(229,115,115,0.08); }
.quota-badge.exhausted .quota-badge__coin { display: none; }
.quota-badge.exhausted .quota-badge__num,
.quota-badge.exhausted .quota-badge__unit { color: inherit; }
/* Renew note: a quiet secondary caption — smaller and less prominent than the pill. */
.quota-renew {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(245,233,195,0.45);
}
.quota-renew .g { color: var(--gold-light); font-weight: 700; }
.quota-renew[hidden] { display: none; }

/* Subscribe CTA: compact, refined gold pill that sits beside the quota badge.
   The [hidden] rule is required because an author display rule would otherwise
   override the `hidden` attribute's UA `display:none`. */
.subscribe-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 8px 18px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--navy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px -12px rgba(201,168,76,0.8);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.subscribe-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px -12px rgba(201,168,76,0.95);
}
.subscribe-cta:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.subscribe-cta__icon { font-size: 13px; line-height: 1; }
.subscribe-cta[hidden] { display: none; }

.picks-form { display: flex; flex-direction: column; gap: 16px; }
.picks-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(56px, 1fr));
  gap: 10px;
}
.picks-grid input {
  padding: 12px 8px;
  font-size: 18px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--white, #fff);
}
.picks-grid input.invalid { border-color: #e57373; }
.picks-grid input:focus { outline: 2px solid var(--gold, #c9a14a); }

#picksSubmitBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.picks-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--gold-pale, #e7d6a8);
}
.picks-loading[hidden] { display: none; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(201, 161, 74, 0.3);
  border-top-color: var(--gold, #c9a14a);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.results-tabbed {
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 10px;
  margin-top: 16px;
  background: rgba(10,22,40,0.45);
}
.results-tabs {
  display: flex;
  gap: 0;
  padding: 0 0 0 4px;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.results-tab {
  all: unset;
  cursor: pointer;
  padding: 10px 20px 9px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(245,233,195,0.45);
  position: relative;
  transition: color 0.15s;
}
.results-tab:hover {
  color: var(--gold-pale);
}
.results-tab.active {
  color: var(--gold);
}
.results-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
.results-tab-panel {
  display: none;
  padding: 20px 16px 8px;
}
.results-tab-panel.active {
  display: block;
}

.picks-results { margin-top: 32px; }
.results-caption {
  font-family: 'Playfair Display', serif;
  color: var(--gold-pale, #e7d6a8);
  font-size: 18px;
  margin: 28px 0 8px;
}
.results-caption:first-child { margin-top: 0; }
.results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
/* .results-table + .results-table: removed — tables now live in separate cards */
.results-table th,
.results-table td {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.results-table thead th { background: var(--gold, #c9a14a); color: #111; }
.results-table tbody th { text-align: left; background: rgba(255,255,255,0.04); }
.results-table tbody tr { transition: background-color 0.15s ease; }
.results-table tbody tr:hover { background: rgba(201,168,76,0.06); }
.form-msg { font-size: 13px; min-height: 1em; color: #e57373; }

/* --- Matched draws block --- */
.results-third { margin-top: 40px; }

.matches-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 6px;
  gap: 4px;
}
.matches-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.matches-stat-num.zero { color: var(--gold-pale); }
.matches-stat-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,233,195,0.7);
  margin-top: 6px;
}
.matches-cap-note {
  font-size: 12px;
  color: rgba(245,233,195,0.6);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

.matches-table-wrap {
  max-height: 520px;
  overflow-y: auto;
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 8px;
  margin-top: 20px;
  background: rgba(255,255,255,0.02);
}
.matches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.matches-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gold);
  color: var(--navy);
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.matches-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.matches-table tbody tr { transition: background-color 0.15s ease; }
.matches-table tbody tr:hover { background: rgba(100,149,237,0.06); }
.matches-table .col-draw {
  white-space: nowrap;
  text-align: center;
  color: var(--gold-pale);
  width: 1%;
}
.matches-table .col-drawn,
.matches-table .col-next {
  color: rgba(245,233,195,0.78);
}
.matches-table .nums {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}
.matches-table .hit {
  color: var(--gold-light);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(232,201,106,0.4);
}
.matches-empty {
  text-align: center;
  padding: 28px;
  color: rgba(245,233,195,0.55);
  font-style: italic;
}
.matches-empty[hidden] { display: none; }

.matches-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid rgba(100,149,237,0.18);
  background: rgba(22,52,120,0.25);
}
.matches-pager[hidden] { display: none; }
.pager-btn {
  background: transparent;
  border: 1px solid rgba(100,149,237,0.35);
  color: rgba(170,200,255,0.85);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.pager-btn:hover:not(:disabled) {
  background: rgba(100,149,237,0.1);
  border-color: rgba(100,149,237,0.65);
  color: rgba(200,220,255,0.95);
}
.pager-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pager-status {
  font-size: 12px;
  color: rgba(170,200,255,0.6);
  letter-spacing: 0.04em;
}

/* ─── Analytics results: card system ─────────────────────── */
.results-stats-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 40px 30px;
  background: linear-gradient(135deg, rgba(201,168,76,0.09) 0%, rgba(26,48,96,0.25) 100%);
  border: 1px solid rgba(201,168,76,0.28);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  margin-bottom: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.results-stats-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.results-stats-banner .matches-stat { margin: 0; position: relative; }
.results-stats-banner .matches-stat-num {
  font-size: clamp(3.5rem, 6vw, 5.2rem);
  text-shadow: 0 0 24px rgba(201,168,76,0.25);
}
.results-stats-banner .matches-stat-num.zero { text-shadow: none; }
.results-stats-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.65);
  margin-bottom: 14px;
  position: relative;
}

.analytics-table-card {
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid rgba(201,168,76,0.15);
  background: rgba(255,255,255,0.025);
  overflow: hidden;
}
.analytics-table-card--same { border-left: 3px solid var(--gold); }
.analytics-table-card--next { border-left: 3px solid var(--gold-light); }
.analytics-table-card--archive { border-left: 3px solid rgba(100,149,237,0.7); }

.atc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
}
.analytics-table-card--same .atc-header {
  background: linear-gradient(90deg, rgba(201,168,76,0.1) 0%, rgba(255,255,255,0.02) 60%, transparent 100%);
}
.analytics-table-card--next .atc-header {
  background: linear-gradient(90deg, rgba(232,201,106,0.08) 0%, rgba(255,255,255,0.02) 60%, transparent 100%);
}
.analytics-table-card--archive .atc-header {
  background: linear-gradient(90deg, rgba(26,48,96,0.65) 0%, rgba(100,149,237,0.04) 60%, transparent 100%);
}
.atc-header-left {
  display: flex;
  align-items: center;
  gap: 11px;
}
.atc-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.analytics-table-card--same .atc-icon {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
.analytics-table-card--next .atc-icon {
  background: rgba(232,201,106,0.10);
  color: var(--gold-light);
}
.analytics-table-card--archive .atc-icon {
  background: rgba(26,48,96,0.65);
  color: rgba(150,185,255,0.85);
  border-color: rgba(100,149,237,0.22);
}

.atc-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--gold-pale);
  margin: 0;
  line-height: 1.2;
}
.analytics-table-card--next .atc-title { color: var(--gold-light); }
.analytics-table-card--archive .atc-title { color: rgba(190,215,255,0.9); }
.atc-sub {
  font-size: 11px;
  color: rgba(245,233,195,0.52);
  margin: 2px 0 0;
}
.analytics-table-card--archive .atc-sub { color: rgba(150,185,255,0.45); }

/* Best/Worst switch — a segmented control that flips the Next Draw table
   between the 10 most- and 10 least-frequent next-draw numbers. A sliding
   thumb rides gold (hot/best) → cornflower (cold/worst). Right edge of header. */
.reverse-switch {
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: stretch;
  padding: 3px;
  border: 0;
  cursor: pointer;
  font: inherit;
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}
.reverse-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), background 0.22s ease;
}
.reverse-switch[aria-checked="true"] .reverse-switch-thumb {
  transform: translateX(100%);
  background: #6495ed;
}
.reverse-switch-opt {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(245,233,195,0.5);
  transition: color 0.22s ease;
}
.reverse-switch[aria-checked="false"] .reverse-switch-opt--best { color: #1b1b1b; }
.reverse-switch[aria-checked="true"] .reverse-switch-opt--worst { color: #06101f; }
.reverse-switch:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 999px; }

/* "Negative" mode cue on the card itself when worst is showing. */
.analytics-table-card--next.is-reversed { border-left-color: rgba(100,149,237,0.75); }
.analytics-table-card--next.is-reversed .atc-title { color: rgba(160,190,255,0.95); }
.analytics-table-card--next.is-reversed .atc-icon {
  background: rgba(26,48,96,0.6);
  color: rgba(150,185,255,0.9);
  border-color: rgba(100,149,237,0.22);
}

.results-table-scroll { overflow-x: auto; }
.results-table-scroll .results-table { min-width: 720px; margin: 0; }

/* T2 header gets gold-light to distinguish from T1's gold */
.analytics-table-card--next .results-table thead th {
  background: var(--gold-light);
}
/* In "worst" mode the header row goes cold cornflower to match the switch. */
.analytics-table-card--next.is-reversed .results-table thead th {
  background: #6495ed;
  color: #06101f;
}
/* T3 archive gets a navy-blue header to visually distinguish it as a record table */
.analytics-table-card--archive .matches-table thead th {
  background: rgba(22,52,120,0.9);
  color: rgba(200,220,255,0.92);
}

/* When matches table is nested inside the archive card, kill the double border
   and let it flow seamlessly from the card header into the pager footer. */
.analytics-table-card--archive .matches-table-wrap {
  border: none;
  border-radius: 0;
  margin-top: 0;
  background: transparent;
}

@media (max-width: 960px) {
  .analytics-preview .preview-grid { grid-template-columns: 1fr; gap: 48px; }
  .pricing-grid,
  .pricing-grid--pair { grid-template-columns: 1fr; gap: 20px; justify-content: stretch; }
  .tier-featured { transform: none; }
  .tier-featured:hover { transform: translateY(-3px); }
}

@media (max-width: 600px) {
  .analytics-view { padding: 64px 20px; }
  .picks-grid { grid-template-columns: repeat(4, 1fr); }
  .sample-frame { padding: 18px 14px; }
  .sample-frame .results-table th,
  .sample-frame .results-table td { font-size: 10.5px; padding: 6px 3px; }
  .veil-title { font-size: 1.35rem; }
  .pricing-section { margin-top: 64px; padding-top: 40px; }
  .tier { padding: 28px 22px; }
  .results-stats-banner { padding: 24px 16px 20px; }
  .results-tab { padding: 8px 14px 7px; font-size: 12px; }
  .results-tab-panel { padding: 14px 10px 6px; }
  .matches-table .nums { font-size: 11.5px; }
  .matches-table-wrap { max-height: 400px; }
}

/* ── Saved-search history ── */
#historyPanel {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(201,168,76,0.15);
  border-left: 3px solid rgba(100,149,237,0.7);
  border-radius: 10px;
  margin-bottom: 28px;
  min-height: 200px;
  /* Bounded so a large library scrolls inside itself instead of pushing the
     New Search form off screen and dragging the sidebar away with it. */
  max-height: min(72vh, 760px);
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  flex-shrink: 0;
  width: 180px;
  padding: 20px 12px;
  border-right: 1px solid rgba(201,168,76,0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(190,215,255,0.5);
  margin: 0 0 8px 8px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: rgba(245,233,195,0.65);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-item:hover {
  background: rgba(201,168,76,0.06);
  color: var(--gold-pale);
}
.sidebar-item.active {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.2);
  color: var(--gold-pale);
}
.sidebar-dot {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-item.active .sidebar-dot { color: var(--gold-light); }
.sidebar-count {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(245,233,195,0.4);
}
.sidebar-item.active .sidebar-count { color: var(--gold-light); }
.sidebar-count:empty { display: none; }

/* ── Main content area ── */
/* The single scroll container for the panel. min-height:0 lets this flex child
   actually shrink; without it the flex default floors it at content height. */
.main-content {
  flex: 1;
  padding: 0 24px 20px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.35) transparent;
}
.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.3);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.main-content::-webkit-scrollbar-thumb:hover { background-color: rgba(201,168,76,0.5); }

/* ── View panels ── */
/* NOTE: this [hidden] rule must stay after any rule that sets display on
   .view-panel, or the views all show at once. */
.view-panel {
  animation: view-fade-in 0.2s ease;
}
.view-panel[hidden] { display: none; }
@keyframes view-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Sticky view toolbar (header + breadcrumb) ── */
.view-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -24px;          /* bleed to the panel edges */
  /* A real bottom padding, not a child margin: a collapsing margin would leave
     a gap the scrolling content shows through. */
  padding: 20px 24px 14px;
  /* Opaque restatement of the panel fill (rgba(255,255,255,.025) over --navy)
     so rows do not show through while they scroll underneath. */
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)), var(--navy);
}
.view-toolbar .view-header { margin-bottom: 0; }
.view-toolbar .breadcrumb { margin: 12px 0 0; }
.view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.view-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(190,215,255,0.9);
  margin: 0;
  flex: 1;
}
.view-header-btn {
  padding: 6px 14px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: none;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.view-header-btn:hover {
  background: rgba(201,168,76,0.12);
  color: var(--gold-light);
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: 13px;
}
.breadcrumb[hidden] { display: none; }
.breadcrumb-link {
  background: none;
  border: none;
  color: var(--gold-pale);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  transition: background 0.15s;
}
.breadcrumb-link:hover {
  background: rgba(201,168,76,0.08);
}
.breadcrumb-sep {
  color: rgba(245,233,195,0.3);
  font-size: 14px;
  user-select: none;
}
.breadcrumb-current {
  color: var(--gold-light);
  font-weight: 700;
  font-size: 13px;
}
.breadcrumb-link--inert {
  color: var(--gold-pale);
  cursor: default;
}
.breadcrumb-link--inert:hover {
  background: none;
}

/* ── Typed breadcrumb chips ──
   Every hop says what kind of thing it is. The kind is abbreviated on screen
   (Alb / Pl) and spelled out for screen readers; min-width keeps the two
   abbreviations the same width so names line up across a trail. */
/* --kind paints borders, --kind-text sets label type. They part company in light
   mode: the brass accent is only 3.4:1 on a parchment card, which is fine for a
   rule and fails for words. */
.kind-album { --kind: var(--type-album); --kind-text: var(--type-album); }
.kind-playlist { --kind: var(--type-playlist); --kind-text: var(--type-playlist); }

.breadcrumb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border: 1px solid rgba(201,168,76,0.14);
  border-left: 2px solid var(--kind);
  border-radius: 6px;
  background: none;
  color: var(--gold-pale);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.breadcrumb-chip:hover { background: rgba(201,168,76,0.07); }
.breadcrumb-chip--current {
  cursor: default;
  border-left-width: 3px;
  background: rgba(201,168,76,0.05);
}
.breadcrumb-chip--current:hover { background: rgba(201,168,76,0.05); }
.crumb-kind {
  flex: none;
  min-width: 19px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--kind-text);
}
.crumb-name { font-size: 13px; font-weight: 600; }
.breadcrumb-chip--current .crumb-name { font-weight: 700; }
.history-heading {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(190,215,255,0.9);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100,149,237,0.15);
}
/* ── Search card ── */
.search-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(201,168,76,0.15);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 28px;
}
.search-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gold);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.form-actions .btn {
  flex: 1;
  width: auto;
  margin-top: 0;
  padding: 13px 24px;
  border: 1px solid transparent;
}
.form-actions .btn-secondary {
  border-color: var(--gold);
}
.history-scroll-wrap {
  position: relative;
}
.history-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 36px 12px;
  max-width: 100%;
}
.history-list::-webkit-scrollbar { display: none; }
.history-scroll-btn {
  position: absolute;
  top: 0;
  bottom: 12px;
  z-index: 2;
  width: 36px;
  border: none;
  background: linear-gradient(to right, rgba(10,22,40,0.85), transparent);
  color: var(--gold);
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  padding: 0;
  line-height: 1;
  opacity: 0.5;
}
.history-scroll-btn--left {
  left: 0;
  background: linear-gradient(to right, rgba(10,22,40,0.7), transparent);
}
.history-scroll-btn--right {
  right: 0;
  background: linear-gradient(to left, rgba(10,22,40,0.7), transparent);
}
.history-scroll-btn:hover {
  opacity: 1;
  color: var(--gold-light);
  background: linear-gradient(to right, rgba(10,22,40,0.95), rgba(10,22,40,0.4));
}
.history-scroll-btn--right:hover {
  background: linear-gradient(to left, rgba(10,22,40,0.95), rgba(10,22,40,0.4));
}
.history-scroll-btn:active {
  opacity: 1;
  color: var(--gold-pale);
}
.history-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 46px 9px 28px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: rgba(255,255,255,0.1);
  color: var(--gold-pale);
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.history-pill.in-playlist { border-color: rgba(200,178,115,0.45); }
.history-pill::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 7px;
  width: 2px;
  background: rgba(100,149,237,0.2);
  border-radius: 1px;
}
.history-pill:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.12);
}

.pill-picks {
  font-weight: 600;
  color: var(--gold-pale);
  letter-spacing: 0.01em;
}
.pill-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(245,233,195,0.5);
  margin-right: 4px;
}
.pill-suffix {
  font-size: inherit;
  font-weight: inherit;
  color: rgba(245,233,195,0.5);
}
.pill-date {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold-pale);
  line-height: 1.4;
  opacity: 0.65;
}
.pill-matches {
  font-weight: 600;
  color: var(--gold-pale);
}
.pill-matches.low { color: rgba(245,233,195,0.5); }
.pill-matches.mid { color: var(--gold-pale); }
.pill-matches.high { color: #fff3c9; }
.history-empty, .history-error { text-align: center; padding: 18px 0; font-size: 14px; }
.history-empty { color: rgba(245,233,195,0.4); }
.history-error { color: #fca5a5; }
.history-loading:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; }
#historyLoadMore:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  background: rgba(255,255,255,0.06);
  color: rgba(190,215,255,0.7);
  font-family: inherit;
  user-select: none;
  white-space: nowrap;
  margin: 12px auto 0;
}
#historyLoadMore:hover {
  border-color: rgba(100,149,237,0.5);
  background: rgba(100,149,237,0.12);
  color: rgba(190,215,255,0.95);
}
#historyLoadMore:focus-visible {
  outline: 2px solid rgba(100,149,237,0.6);
  outline-offset: 2px;
}

/* ── Light mode — "Ivory & Brass": the navy+gold dark brand, lit for daylight ──
   Palette
     parchment page   #f4efe2      warm white surface #fffdf7
     navy ink          #14233f      warm body text     #57513f / muted #6b6350
     brass accent      #a67f1e      deep brass (AA txt) #7c5e14
     gilt fill (hdrs)  #cba646 / #dcc069 (navy text)
     slate (cold/arch) #2f5a8f      hairline rgba(20,35,63,.10)  brass rule rgba(166,127,30,.30)
   Gold is the brand's spine; brass is gold read on paper. Red stays only where it
   means "Canadian" or "danger", never as page chrome. Data surfaces stay near-white
   so tables read crisp; the page chrome carries the warmth.
   Gated on :root[data-theme="light"] (set by js/theme.js) — CSS nesting scopes
   every rule below to that root, so the navbar toggle can force a theme
   regardless of the OS, while theme.js still defaults to prefers-color-scheme. */
:root[data-theme="light"] {
  /* Deep brass and the Ivory & Brass slate — both already carry text elsewhere
     in this theme, so both clear contrast on the parchment surfaces. Declared
     first: bare declarations after nested rules are easy to lose track of. */
  --type-album: #a67f1e;
  --type-playlist: #2f5a8f;

  body { background: #f4efe2; color: #57513f; }

  #top {
    background: rgba(253,251,247,0.92);
    border-bottom: 1px solid rgba(166,127,30,0.35);
    box-shadow: 0 1px 16px rgba(20,35,63,0.05);
  }
  nav .nav-links a { color: #14233f; }
  nav .nav-links a:hover { color: #7c5e14; }
  .hamburger span { background: #14233f; }
  .theme-toggle { border-color: rgba(20,35,63,0.22); color: #7c5e14; }
  .theme-toggle:hover { color: #a67f1e; border-color: #a67f1e; background: rgba(166,127,30,0.1); }
  .theme-toggle:focus-visible { outline-color: #a67f1e; }
  .nav-greeting { color: #14233f; }
  .btn-signout { background: transparent; color: #14233f; border-color: rgba(20,35,63,0.35); }
  .btn-signout:hover { background: #14233f; color: #fffdf7; }

  .verify-banner { background: #fbf6ea; color: #14233f; border-bottom: 1px solid rgba(166,127,30,0.3); }
  .verify-banner strong { color: #7c5e14; }

  .analytics-view { background: #f4efe2; color: #14233f; }
  .analytics-title { color: #14233f; }
  .analytics-title em { color: #a67f1e; }
  .analytics-intro { color: #6b6350; }
  .section-label { color: #7c5e14 !important; } /* !important beats inline style="color:var(--gold)" on some pages, while dark mode keeps the gold */

  .preview-explainer p, .preview-features li { color: #57513f; }
  .preview-explainer p.muted, .sample-label { color: #837a63; }
  .sample-label strong { color: #7c5e14; }
  .sample-tag { border-color: rgba(166,127,30,0.5); color: #7c5e14; }
  .sample-frame { background: #14233f; border: 1px solid rgba(20,35,63,0.18); box-shadow: 0 18px 44px -20px rgba(20,35,63,0.45); }
  .sample-veil {
    background: linear-gradient(180deg, rgba(253,251,247,0.72) 0%, rgba(253,251,247,0.93) 60%, rgba(253,251,247,0.97) 100%);
  }
  .veil-title { color: #a67f1e; }
  .veil-sub { color: #57513f; }

  .pricing-section { border-top: 1px solid rgba(166,127,30,0.25); }
  .pricing-title { color: #14233f; }
  .pricing-title em { color: #a67f1e; }
  .tier { background: #fffdf7; border: 1px solid rgba(20,35,63,0.12); box-shadow: 0 12px 30px -22px rgba(20,35,63,0.35); }
  .tier:hover { border-color: rgba(166,127,30,0.55); box-shadow: 0 22px 44px -26px rgba(20,35,63,0.4); }
  .tier-name { color: #a67f1e; }
  .tier-price .amount { color: #14233f; }
  .tier-price .cadence { color: #837a63; }
  .tier-tagline { color: #57513f; }
  .tier-features li { color: #57513f; }
  .tier-features li strong { color: #7c5e14; }
  .tier-features li::before { border-left-color: #a67f1e; border-bottom-color: #a67f1e; }
  .btn.btn-outline { color: #7c5e14; border-color: rgba(166,127,30,0.6); background: transparent; }
  .btn.btn-outline:hover { background: rgba(166,127,30,0.1); color: #5f470d; }
  .tier-featured {
    background: linear-gradient(180deg, rgba(166,127,30,0.08) 0%, rgba(255,253,247,1) 100%);
    border-color: rgba(166,127,30,0.55);
    box-shadow: 0 0 0 1px rgba(166,127,30,0.25), 0 30px 60px -34px rgba(20,35,63,0.45);
  }
  .tier-badge { background: #a67f1e; color: #fffdf7; }

  .quota-badge { border-color: rgba(20,35,63,0.16); color: #14233f; background: rgba(166,127,30,0.06); }
  .quota-badge__coin { color: #a67f1e; }
  .quota-badge__unit { color: #837a63; }
  .quota-badge.exhausted { border-color: #b23b30; color: #b23b30; background: rgba(178,59,48,0.06); }
  .quota-renew { color: #837a63; }
  .quota-renew .g { color: #7c5e14; }

  .picks-grid input { background: #fffdf7; border: 1px solid rgba(20,35,63,0.18); color: #14233f; }
  .picks-grid input:focus { outline: 2px solid #a67f1e; }
  .picks-grid input.invalid { border-color: #b23b30; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
    background: #fffdf7; border: 1px solid rgba(20,35,63,0.18); color: #14233f;
  }
  label, .radio-group label { color: #6b6350; }
  .picks-loading { color: #6b6350; }

  .btn { background: #14233f; color: #fffdf7; border: none; }
  .btn:hover { background: #25406e; color: #fffdf7; }
  .btn:focus-visible { outline: 2px solid #a67f1e; outline-offset: 2px; }
  .btn-secondary { background: transparent; color: #14233f; border: 1px solid rgba(20,35,63,0.4); }
  .btn-secondary:hover { background: #14233f; color: #fffdf7; }
  .form-actions .btn-secondary { border-color: rgba(20,35,63,0.4); }

  .subscribe-cta { background: #14233f; color: #fffdf7; }
  .subscribe-cta:hover { background: #25406e; }

  .results-stats-banner {
    background: linear-gradient(135deg, rgba(166,127,30,0.09), rgba(255,253,247,0.6));
    border: 1px solid rgba(166,127,30,0.28);
    border-top: 3px solid #a67f1e;
  }
  .results-stats-banner::before { background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(166,127,30,0.06) 0%, transparent 70%); }
  .results-stats-label { color: #7c5e14; }
  .results-stats-banner .matches-stat-num { text-shadow: none; }
  .matches-stat-num { color: #14233f; }
  .matches-stat-label { color: #6b6350; }
  .matches-cap-note { color: #837a63; }

  .results-tabbed { background: #fffdf7; border: 1px solid rgba(20,35,63,0.12); }
  .results-tabs { border-bottom: 1px solid rgba(20,35,63,0.1); }
  .results-tab { color: #837a63; }
  .results-tab:hover { color: #14233f; }
  .results-tab.active { color: #7c5e14; }
  .results-tab.active::after { background: #a67f1e; }

  /* Gilded ledger headers — gold fill, navy ink — same table logic as dark mode */
  .results-table thead th { background: #cba646; color: #14233f; }
  .analytics-table-card--next .results-table thead th { background: #dcc069; color: #14233f; }
  .analytics-table-card--next.is-reversed .results-table thead th { background: #2f5a8f; color: #fffdf7; }
  .results-table tbody th { background: rgba(20,35,63,0.03); color: #14233f; }
  .results-table tbody tr:hover { background: rgba(166,127,30,0.07); }
  .results-table th, .results-table td { border-color: rgba(20,35,63,0.1); color: #57513f; }

  .analytics-table-card { background: #fffdf7; border: 1px solid rgba(20,35,63,0.1); }
  .atc-header { background: rgba(166,127,30,0.02); border-bottom: 1px solid rgba(20,35,63,0.07); }
  .analytics-table-card--same .atc-header { background: linear-gradient(90deg, rgba(166,127,30,0.09), transparent 70%); }
  .analytics-table-card--next .atc-header { background: linear-gradient(90deg, rgba(166,127,30,0.07), transparent 70%); }
  .analytics-table-card--archive .atc-header { background: linear-gradient(90deg, rgba(47,90,143,0.08), transparent 70%); }
  .atc-title { color: #14233f; }
  .analytics-table-card--same .atc-title { color: #7c5e14; }
  .analytics-table-card--next .atc-title { color: #7c5e14; }
  .analytics-table-card--archive .atc-title { color: #2f5a8f; }
  .atc-sub { color: #837a63; }
  .analytics-table-card--archive .atc-sub { color: #7d8ba3; }
  .atc-icon { border: 1px solid rgba(20,35,63,0.1); }
  .analytics-table-card--same .atc-icon { background: rgba(166,127,30,0.1); color: #a67f1e; }
  .analytics-table-card--next .atc-icon { background: rgba(166,127,30,0.1); color: #a67f1e; }
  .analytics-table-card--archive .atc-icon { background: rgba(47,90,143,0.1); color: #2f5a8f; border-color: rgba(47,90,143,0.25); }
  .analytics-table-card--same { border-left: 3px solid #a67f1e; }
  .analytics-table-card--next { border-left: 3px solid #cba646; }
  .analytics-table-card--archive { border-left: 3px solid #2f5a8f; }

  .matches-table-wrap { border: 1px solid rgba(20,35,63,0.12); background: #fffdf7; }
  .matches-table thead th { background: #cba646; color: #14233f; }
  .matches-table tbody td { border-top: 1px solid rgba(20,35,63,0.07); color: #57513f; }
  .matches-table tbody tr:hover { background: rgba(166,127,30,0.05); }
  .matches-table .col-draw { color: #14233f; }
  .matches-table .col-drawn, .matches-table .col-next { color: #6b6350; }
  .matches-table .hit { color: #7c5e14; text-shadow: none; font-weight: 700; }
  .matches-empty { color: #837a63; }
  .matches-pager { border-top: 1px solid rgba(20,35,63,0.1); background: rgba(20,35,63,0.02); }
  .pager-btn { border: 1px solid rgba(20,35,63,0.18); color: #6b6350; }
  .pager-btn:hover:not(:disabled) { background: rgba(166,127,30,0.08); border-color: #a67f1e; color: #7c5e14; }
  .pager-status { color: #837a63; }
  .analytics-table-card--archive .matches-table thead th { background: #14233f; color: #f5e9c3; }

  #historyPanel { background: #fffdf7; border: 1px solid rgba(20,35,63,0.1); border-left: 3px solid #a67f1e; }
  .sidebar { border-right-color: rgba(20,35,63,0.08); }
  .sidebar-header { color: rgba(20,35,63,0.4); }
  .sidebar-item { color: rgba(20,35,63,0.55); }
  .sidebar-item:hover { background: rgba(166,127,30,0.05); color: #7c5e14; }
  .sidebar-item.active { background: rgba(166,127,30,0.08); border-color: rgba(166,127,30,0.2); color: #7c5e14; }
  .sidebar-item.active .sidebar-dot { color: #a67f1e; }
  .sidebar-count { color: rgba(20,35,63,0.35); }
  .sidebar-item.active .sidebar-count { color: #a67f1e; }
  .main-content { scrollbar-color: rgba(166,127,30,0.35) transparent; }
  .main-content::-webkit-scrollbar-thumb { background: rgba(166,127,30,0.35); }
  .main-content::-webkit-scrollbar-thumb:hover { background-color: rgba(166,127,30,0.55); }
  .view-toolbar { background: #fffdf7; }
  .view-title { color: #14233f; }
  .view-header { border-bottom-color: rgba(20,35,63,0.08); }
  .breadcrumb { background: rgba(20,35,63,0.03); }
  .breadcrumb-link { color: #7c5e14; }
  .breadcrumb-link:hover { background: rgba(166,127,30,0.08); }
  .breadcrumb-sep { color: rgba(20,35,63,0.25); }
  .breadcrumb-current { color: #a67f1e; }
  .breadcrumb-link--inert { color: #6b6350; }
  .breadcrumb-link--inert:hover { background: none; }
  .breadcrumb-chip { border-color: rgba(20,35,63,0.12); border-left-color: var(--kind); color: #14233f; }
  .breadcrumb-chip:hover { background: rgba(166,127,30,0.08); }
  .breadcrumb-chip--current,
  .breadcrumb-chip--current:hover { background: rgba(166,127,30,0.06); }
  .view-header-btn { border-color: rgba(166,127,30,0.5); color: #7c5e14; }
  .view-header-btn:hover { background: rgba(166,127,30,0.08); color: #5f470d; }
  .history-heading { color: #14233f; border-bottom: 1px solid rgba(20,35,63,0.08); }

  .history-scroll-btn { color: #a67f1e; }
  .history-scroll-btn--left { background: linear-gradient(to right, #f4efe2, transparent); }
  .history-scroll-btn--right { background: linear-gradient(to left, #f4efe2, transparent); }
  .history-scroll-btn:hover { color: #14233f; }
  .history-scroll-btn--left:hover { background: linear-gradient(to right, #f4efe2, transparent); }
  .history-scroll-btn--right:hover { background: linear-gradient(to left, #f4efe2, transparent); }

  .history-pill { background: #faf5ea; border: 1px solid rgba(20,35,63,0.1); color: #14233f; }
  .history-pill:hover { border-color: #a67f1e; background: #fbf3df; }
  .history-pill::before { background: #a67f1e; opacity: 0.4; }
  .history-pill.in-playlist { border-color: #a67f1e; }
  .pill-playlist-dot { color: #a67f1e; }
  .pill-picks { color: #14233f; }
  .pill-date { color: #837a63; }
  .pill-matches { color: #14233f; }
  .pill-matches.low { color: #9a917c; }
  .pill-matches.mid { color: #7c5e14; }
  .pill-matches.high { color: #14233f; }
  .pill-label, .pill-suffix { color: rgba(20,35,63,0.4); }
  .history-empty { color: rgba(20,35,63,0.3); }

  #historyLoadMore { border: 1px solid rgba(20,35,63,0.12); background: transparent; color: #6b6350; }
  #historyLoadMore:hover { border-color: #a67f1e; background: rgba(166,127,30,0.07); color: #7c5e14; }

  .search-card { background: #fffdf7; border: 1px solid rgba(20,35,63,0.1); border-left: 3px solid #a67f1e; }
  .search-heading { color: #7c5e14; border-bottom: 1px solid rgba(20,35,63,0.08); }

  .strip-toggle { background: rgba(20,35,63,0.06); }
  .strip-toggle-btn { color: #6b6350; }
  .strip-toggle-btn.active { background: #cba646; color: #14233f; }

  .reverse-switch { background: rgba(20,35,63,0.1); }
  .reverse-switch-opt { color: rgba(20,35,63,0.45); }
  .reverse-switch[aria-checked="false"] .reverse-switch-thumb { background: #cba646; }
  .reverse-switch[aria-checked="true"] .reverse-switch-thumb { background: #2f5a8f; }
  .reverse-switch[aria-checked="false"] .reverse-switch-opt--best { color: #14233f; }
  .reverse-switch[aria-checked="true"] .reverse-switch-opt--worst { color: #fffdf7; }
  .analytics-table-card--next.is-reversed .atc-title { color: #2f5a8f; }
  .analytics-table-card--next.is-reversed .atc-icon { background: rgba(47,90,143,0.1); color: #2f5a8f; border-color: rgba(47,90,143,0.25); }
  .strip-action-btn { color: #14233f; border-color: rgba(20,35,63,0.2); }
  .strip-action-btn:hover { border-color: #a67f1e; color: #7c5e14; }
  .strip-action-btn.active { background: #cba646; color: #14233f; }
  .strip-action-btn.danger { color: #b23b30; border-color: rgba(178,59,48,0.4); }
  .playlist-card { background: #faf5ea; border-color: rgba(20,35,63,0.1); }
  .playlist-card:hover { border-color: #a67f1e; }
  .playlist-card-name { color: #14233f; }
  .playlist-card-count { background: rgba(20,35,63,0.05); color: #6b6350; }
  .playlist-card--add { border-color: rgba(166,127,30,0.35); color: #7c5e14; }
  .playlist-card--add:hover { border-color: #a67f1e; background: rgba(166,127,30,0.06); color: #5f470d; }
  .albums-heading { color: #14233f; }
  .album-card { background: #faf5ea; border: 1px solid rgba(20,35,63,0.1); color: #14233f; }
  .album-card:hover { border-color: #a67f1e; background: #fbf3df; }
  .album-card.active { border-color: #a67f1e; background: #fbf3df; border-left-color: #a67f1e; }
  .album-card-name { color: #14233f; }
  .album-card-count { color: #6b6350; }
  .album-menu-btn { color: rgba(20,35,63,0.35); }
  .album-menu-btn:hover { background: rgba(166,127,30,0.08); border-color: rgba(166,127,30,0.25); color: #7c5e14; }
  .playlist-list-item { border-bottom-color: rgba(20,35,63,0.08); color: #14233f; }
  .playlist-list-item:hover { background: rgba(47,90,143,0.04); }
  .playlist-list-item.active { background: rgba(47,90,143,0.07); }
  .playlist-list-item::before { background: rgba(47,90,143,0.5); }
  .playlist-list-item.active::before { background: rgba(47,90,143,0.9); }
  .playlist-list-name { color: #14233f; }
  .playlist-list-count { color: rgba(20,35,63,0.45); }
  .playlist-action-btn { border-color: rgba(20,35,63,0.18); color: rgba(20,35,63,0.55); }
  .playlist-action-btn:hover { background: rgba(166,127,30,0.07); border-color: #a67f1e; color: #7c5e14; }

  .search-list-item + .search-list-item { border-top-color: rgba(20,35,63,0.06); }
  .search-list-item:hover { background: rgba(5,150,105,0.03); }
  .search-list-item::before { background: rgba(5,150,105,0.4); }
  .search-list-picks { color: #14233f; }
  .search-list-date { color: rgba(20,35,63,0.45); }
  .search-list-matches { color: #14233f; }
  .search-list-matches.low { color: rgba(20,35,63,0.4); }
  .search-list-matches.mid { color: #7c5e14; }
  .search-list-matches.high { color: #14233f; }
  .tree-branch::before,
  .tree-branch::after { background: rgba(166,127,30,0.3); }
  .tree-branch-label { color: rgba(166,127,30,0.55); }
  .tree-tier .playlist-card::before { background: rgba(166,127,30,0.4); }
  .tree-tier .history-pill::after { background: rgba(166,127,30,0.4); }
  .drill-back-btn { border-color: rgba(20,35,63,0.2); color: #7c5e14; }
  .drill-back-btn:hover { background: rgba(166,127,30,0.08); border-color: #a67f1e; }
  .playlist-picker, .search-picker { background: #fffdf7; border-color: rgba(20,35,63,0.14); color: #14233f; box-shadow: 0 12px 32px -12px rgba(20,35,63,0.35); }
  .playlist-picker-item:hover, .playlist-picker-item:hover { background: rgba(166,127,30,0.08); }
  .playlist-picker-item.checked { color: #7c5e14; }
  .playlist-picker-new input { background: #faf5ea; border-color: rgba(20,35,63,0.14); color: #14233f; }
  .playlist-item-remove { color: #b23b30; border-color: rgba(178,59,48,0.35); background: rgba(178,59,48,0.07); }
  .playlist-item-remove:hover { background: rgba(178,59,48,0.16); }
  .playlist-detail-name { color: #14233f; }
  .playlist-detail-count { color: rgba(20,35,63,0.45); }
  .playlist-detail-info:hover { background: rgba(20,35,63,0.04); }
  .playlist-item-grip { color: rgba(20,35,63,0.22); }
  .playlist-item-grip:hover { color: #14233f; background: rgba(20,35,63,0.05); }
  .pill-add-btn { border-color: #a67f1e; background: rgba(166,127,30,0.12); color: #7c5e14; }
  .pill-add-btn:hover { background: rgba(166,127,30,0.22); }
  .pill-remove-btn { border-color: rgba(178,59,48,0.5); background: rgba(178,59,48,0.1); color: #b23b30; }
  .pill-remove-btn:hover { background: rgba(178,59,48,0.2); }
  .playlist-item.drag-over { box-shadow: -2px 0 0 0 #a67f1e; }
  .playlist-item.drag-over-right { box-shadow: 2px 0 0 0 #a67f1e; }
  .history-list.drag-over-container::after { background: #a67f1e; }

  /* Modals & toasts — brought into daylight (were dark-only) */
  .modal-card { background: #fffdf7; border-color: rgba(166,127,30,0.3); box-shadow: 0 24px 60px -20px rgba(20,35,63,0.4); }
  .modal-header h3 { color: #7c5e14; }
  .modal-body { color: #57513f; }
  .modal-close-btn { color: rgba(20,35,63,0.4); }
  .modal-close-btn:hover { color: #7c5e14; }
  .modal-input { background: #faf5ea; border-color: rgba(20,35,63,0.16); color: #14233f; }
  .modal-input:focus { border-color: #a67f1e; }
  .auth-modal-backdrop { background: rgba(20,35,63,0.45); }
  .auth-modal-card { background: #fffdf7; border-color: rgba(166,127,30,0.35); color: #14233f; box-shadow: 0 24px 60px -20px rgba(20,35,63,0.4); }
  .auth-modal-card h3 { color: #7c5e14; }
  .auth-modal-close { color: rgba(20,35,63,0.4); }
  .auth-modal-close:hover { color: #7c5e14; }
  .auth-divider { color: #837a63; }
  .auth-divider::before, .auth-divider::after { background: rgba(20,35,63,0.12); }
  .auth-modal-card .form-group label { color: #6b6350; }
  .auth-toggle { color: #6b6350; }
  .auth-toggle a { color: #7c5e14; }
  .auth-toggle a:hover { color: #5f470d; }
  .toast--info { background: #14233f; color: #f5e9c3; border-color: rgba(166,127,30,0.5); }

  /* ─── HOME PAGE ─── */
  .hero { background: #f4efe2; }
  .hero::before { background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(166,127,30,0.1) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(20,35,63,0.05) 0%, transparent 60%); }
  .hero-text h1 { color: #14233f; }
  .hero-text h1 em { color: #a67f1e; }
  .hero-text h2 { color: #57513f; }
  .hero-text h3 { color: #837a63; }
  .hero-image img { box-shadow: 0 24px 60px -24px rgba(20,35,63,0.3); }

  .canadian-badge { background: #efe7d6; border-bottom-color: rgba(166,127,30,0.28); }
  .canadian-proudly { color: #14233f; }
  .canadian-word { color: #b23b30; }
  .canadian-tagline { color: #837a63; }

  h2.section-title.light { color: #14233f; }
  .divider { background: #a67f1e; }

  .what-is-keno { background: #efe7d6; border-top-color: rgba(166,127,30,0.28); }
  .keno-text p { color: #57513f; }
  .luck-box { background: #fffdf7; border: 1px solid rgba(20,35,63,0.1); box-shadow: 0 12px 30px -22px rgba(20,35,63,0.3); }
  .luck-box h3 { color: #a67f1e; }
  .luck-box p { color: #57513f; }

  .form-card { background: #fffdf7; border-color: rgba(20,35,63,0.1); }
  .form-card h3 { color: #a67f1e; }

  .newsletter-bar { background: #efe7d6; border-top-color: rgba(166,127,30,0.28); border-bottom-color: rgba(166,127,30,0.28); }
  .newsletter-inner h3 { color: #14233f; }
  .newsletter-inner p { color: #57513f; }

  .data-section { background: #f4efe2; border-top-color: rgba(166,127,30,0.28); }
  .data-section > .container > p { color: #57513f; }
  .stat-number { color: #14233f; }
  .stat-label { color: #7c5e14; }

  .founder { background: #efe7d6; color: #14233f; border-top-color: rgba(166,127,30,0.28); }
  .founder-bio h3 { color: #14233f; }
  .founder-bio .title { color: #a67f1e; }
  .founder-story p { color: #57513f; }
  .founder-story h3 { color: #a67f1e; }
  .quote-mark { color: rgba(166,127,30,0.14); }

  .international { background: #efe7d6; color: #14233f; }
  .international h2 { color: #14233f; }
  .international > .container > p { color: #57513f; }
  .location-tag { background: rgba(166,127,30,0.1); border-color: rgba(166,127,30,0.35); color: #7c5e14; }

  .faq { background: #f4efe2; border-top-color: rgba(166,127,30,0.28); }
  .faq-question { color: #14233f; }
  .faq-question:hover { color: #7c5e14; }
  .faq-item { border-bottom-color: rgba(20,35,63,0.1); }
  .faq-icon { color: #a67f1e; }
  .faq-answer-inner { color: #57513f; }
  .faq-answer-inner strong { color: #7c5e14; }

  footer { background: #efe7d6; border-top-color: rgba(166,127,30,0.28); }
  .footer-col a, .footer-col p { color: #57513f; }
  .footer-col a:hover { color: #7c5e14; }
  .footer-col h4 { color: #a67f1e; }
  .footer-bottom { border-top-color: rgba(20,35,63,0.1); }
  .footer-bottom p { color: #837a63; }
  .footer-bottom a { color: #7c5e14; }
  .footer-bottom a:hover { color: #5f470d; }
  .glyph-cell.off { fill: rgba(20,35,63,0.1); }
  .glyph-cell.on { fill: #a67f1e; }
  .cover { background: #faf5ea; border-color: rgba(20,35,63,0.1); color: #14233f; }
  .cover:hover { border-color: #a67f1e; }
  /* Restated after the two border-color shorthands above, which would otherwise
     paint over the type accent. */
  .cover--typed,
  .cover--typed:hover { border-top-color: var(--kind); }
  .cover:focus-visible, .row:focus-visible { outline-color: #a67f1e; }
  .cover-name { color: #14233f; }
  .cover-meta { color: #57513f; }
  /* The brass accent is 3.4:1 on the card; the palette's deep brass, annotated
     "AA txt", is 5.6:1. Playlist slate already clears it, so it is left alone. */
  .kind-album { --kind-text: #7c5e14; }
  .row { color: #14233f; border-bottom-color: rgba(20,35,63,0.07); }
  .row:hover { background: rgba(166,127,30,0.04); }
  .row-meta { color: rgba(20,35,63,0.4); }
  .row-dot { color: #a67f1e; }
  .row-add-btn { border-color: rgba(166,127,30,0.45); background: rgba(166,127,30,0.1); color: #7c5e14; }
  .row-add-btn:hover { background: rgba(166,127,30,0.2); }
  .row-remove-btn { border-color: rgba(178,59,48,0.35); background: rgba(178,59,48,0.07); color: #b23b30; }
  .row-remove-btn:hover { background: rgba(178,59,48,0.16); }
  .matches.low { color: rgba(20,35,63,0.35); }
  .matches.mid { color: #7c5e14; }
  .matches.high { color: #14233f; }
  .rows-list { border-color: rgba(20,35,63,0.08); }
  .picker-row:hover { background: rgba(166,127,30,0.08); }
  .picker-row:has(input:checked) { background: rgba(166,127,30,0.12); border-color: rgba(166,127,30,0.35); }
  .picker-row:focus-within { border-color: #a67f1e; }
  .picker-row-sub { color: rgba(20,35,63,0.45); }
  .picker-scroll-list { scrollbar-color: rgba(166,127,30,0.35) transparent; }
  .picker-row input { accent-color: #a67f1e; }
  .modal-field-label { color: rgba(20,35,63,0.5); }
  .playlist-picker-new { border-top-color: rgba(20,35,63,0.12); }
}

/* ── Keno board glyph ── */
.glyph { display: block; width: 44px; height: auto; flex: none; }
.glyph-row { width: 40px; }
/* The cover board now carries every number in the album, so give it card width. */
.glyph-cover { width: 100%; max-width: 128px; }
.glyph-cell { fill: rgba(245,233,195,0.08); }
.glyph-cell.on { fill: var(--gold-light); }
.glyph-cell.off { fill: rgba(245,233,195,0.08); }

/* ── Cover cards grid ── */
.covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 16px;
  /* Clearance for the sticky toolbar: cards lift 2px on hover and draw a focus
     ring 2px outside themselves, and without this the top row's edge disappears
     under the toolbar's opaque background. */
  padding-top: 8px;
}
.cover {
  display: flex;
  flex-direction: column;
  /* Spacing is set per element rather than by one flex gap: the four lines group
     into two pairs (kind+name, then counts) and a uniform gap cannot say that. */
  gap: 0;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  color: var(--gold-pale);
  transition: border-color 0.15s, transform 0.15s;
}
.cover:hover {
  border-color: var(--gold-light);
  transform: translateY(-2px);
}
.cover:focus-visible,
.row:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
.cover-art {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 8px 0;
  margin-bottom: 10px;
}
/* Typed card: a coloured top edge you catch in peripheral vision, plus the kind
   spelled out above the name. The card grid is homogeneous within one list, but
   you move between lists that otherwise look identical.
   The :hover pair is not redundant — `.cover:hover { border-color }` is a
   shorthand with higher specificity, so without it a hovered playlist card
   flips its blue edge to gold. */
.cover--typed,
.cover--typed:hover { border-top-color: var(--kind); }
.cover--typed { border-top-width: 3px; border-top-style: solid; }
.cover-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--kind-text);
  margin-bottom: 3px;
}
.cover-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--gold-pale);
  /* A 60-character name is legal, and unclamped it doubled the card's height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Was 10.5px at opacity .6 on top of a .6 alpha colour — the two multiplied to
   an effective .36 and measured 2.90:1, under the 4.5:1 AA needs. One alpha,
   one size that can be read. */
.cover-meta {
  font-size: 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-variant-numeric: tabular-nums;
  color: rgba(245,233,195,0.72);
  margin-top: 7px;
}
/* margin-top:auto pins the actions to the card's bottom edge, so they line up
   across a row instead of floating under names of different lengths. */
.cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
  padding-top: 10px;
}

/* ── Playlist action buttons ── */
.playlist-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* ── Search result rows (glyph layout) ── */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border: 0;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--gold-pale);
  font: inherit;
  cursor: pointer;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  transition: background 0.12s;
}
.row:hover { background: rgba(201,168,76,0.04); }
.row-main { flex: 1; min-width: 0; }
.picks {
  font-family: 'Source Sans 3', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.row-meta {
  font-family: 'Source Sans 3', monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: rgba(245,233,195,0.5);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-top: 1px;
}
.matches {
  font-family: 'Source Sans 3', monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex: none;
  text-align: right;
}
.matches.low { color: rgba(245,233,195,0.5); }
.matches.mid { color: var(--gold-pale); }
.matches.high { color: #fff3c9; font-weight: 600; }
.rows-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201,168,76,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.rows-list .row:last-child { border-bottom: none; }

/* ── Plan 2: drag-and-drop reorder (Engraved Ledger) ── */
.row--draggable { cursor: grab; }
.row--draggable:active { cursor: grabbing; }
.drag-handle {
  flex: none;
  width: 14px;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(245,233,195,0.5);
  opacity: 0;
  transition: opacity 0.15s;
  user-select: none;
}
.row--draggable:hover .drag-handle,
.row--draggable:focus-visible .drag-handle { opacity: 1; }
.row.dragging { opacity: 0.45; }
.row.drop-above, .row.drop-below { position: relative; }
.row.drop-above::before, .row.drop-below::after {
  content: '';
  position: absolute;
  left: 4%;
  width: 92%;
  height: 2px;
  background: var(--gold-light);
  box-shadow: 0 0 6px rgba(232,201,106,0.8);
  pointer-events: none;
}
.row.drop-above::before { top: -1px; }
.row.drop-below::after { bottom: -1px; }

/* Row affordances: remove from a playlist, add to one, already-filed marker. */
.row-remove-btn,
.row-add-btn {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  line-height: 1;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.row-remove-btn {
  border: 1px solid rgba(252,165,165,0.3);
  background: rgba(252,165,165,0.08);
  color: #fca5a5;
}
.row-remove-btn:hover { opacity: 1; background: rgba(252,165,165,0.22); transform: scale(1.1); }
.row-add-btn {
  border: 1px solid rgba(201,168,76,0.35);
  background: rgba(201,168,76,0.1);
  color: var(--gold-light);
  font-size: 16px;
}
.row-add-btn:hover { opacity: 1; background: rgba(201,168,76,0.22); transform: scale(1.1); }
.row-dot {
  flex: none;
  font-size: 8px;
  line-height: 1;
  color: var(--gold);
}

/* ── Playlists ── */
.history-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.strip-toggle { display: inline-flex; gap: 4px; background: rgba(255,255,255,0.04); border-radius: 999px; padding: 3px; }
.strip-toggle-btn { border: 0; background: transparent; color: rgba(245,233,195,0.6); padding: 5px 16px; border-radius: 999px; cursor: pointer; font: inherit; }
.strip-toggle-btn.active { background: var(--gold-pale, #c8b273); color: #1b1b1b; }
.history-top-actions { display: inline-flex; gap: 8px; }
.strip-action-btn { border: 1px solid rgba(245,233,195,0.3); background: transparent; color: var(--gold-pale, #c8b273); padding: 5px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; }
.strip-action-btn:hover { border-color: var(--gold-pale, #c8b273); }
.strip-action-btn.active { background: var(--gold-pale, #c8b273); color: #1b1b1b; }
.strip-action-btn.danger { color: #fca5a5; border-color: rgba(252,165,165,0.4); }

.playlist-card { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(245,233,195,0.2); border-radius: 12px; cursor: pointer; white-space: nowrap; background: rgba(255,255,255,0.03); }
.playlist-card:hover { border-color: var(--gold-pale, #c8b273); }
.playlist-card-name { font-weight: 600; color: var(--gold-pale, #c8b273); }
.playlist-card-count { font-size: 12px; opacity: 0.7; background: rgba(255,255,255,0.06); border-radius: 999px; padding: 1px 8px; }

.playlist-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.playlist-back-arrow { font-size: 22px; font-weight: 300; line-height: 1; opacity: 0.5; color: var(--gold-pale, #c8b273); user-select: none; }
.playlist-detail-info { display: inline-flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; border-radius: 8px; padding: 6px 10px 6px 4px; transition: background 0.15s; }
.playlist-detail-info:hover { background: rgba(200,178,115,0.1); }
.playlist-detail-name { font-size: 18px; font-weight: 700; color: var(--gold-pale, #c8b273); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-detail-count { font-size: 13px; opacity: 0.55; white-space: nowrap; flex-shrink: 0; }
.playlist-detail-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.playlist-item { position: relative; padding-left: 46px; }
.playlist-item::before { content: none; }

.playlist-item-grip {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none;
  color: rgba(245,233,195,0.3); font-size: 18px; line-height: 1;
  border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.playlist-item-grip:hover { color: var(--gold-pale, #c8b273); background: rgba(255,255,255,0.06); }
.playlist-item-grip:active { cursor: grabbing; }

.playlist-item.dragging { opacity: 0.35; }
.playlist-item.drag-over { box-shadow: -2px 0 0 0 var(--gold-pale, #c8b273); }
.playlist-item.drag-over-right { box-shadow: 2px 0 0 0 var(--gold-pale, #c8b273); }
.history-list.drag-over-container::after {
  content: ''; display: block; width: 3px; align-self: stretch;
  background: var(--gold-pale, #c8b273); border-radius: 2px;
  flex-shrink: 0;
}

.playlist-item-remove {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(252,165,165,0.4);
  background: rgba(252,165,165,0.1);
  color: #fca5a5;
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.playlist-item-remove:hover { opacity: 1; background: rgba(252,165,165,0.25); transform: scale(1.1); }



.pill-add-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-pale, #c8b273);
  background: rgba(200,178,115,0.15);
  color: var(--gold-pale, #c8b273);
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.pill-add-btn:hover { opacity: 1; background: rgba(200,178,115,0.3); transform: scale(1.1); }

.pill-remove-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(252,165,165,0.4);
  background: rgba(252,165,165,0.1);
  color: #fca5a5;
  font-size: 18px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.pill-remove-btn:hover { opacity: 1; background: rgba(252,165,165,0.25); transform: scale(1.1); }

.pill-playlist-dot { color: var(--gold-pale, #c8b273); font-size: 8px; line-height: 1; margin-left: 2px; vertical-align: middle; }

.search-picker {
  min-width: 220px; padding: 12px;
  background: #1f2230;
  border: 1px solid rgba(245,233,195,0.2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: var(--gold-pale, #f5e9c3);
}

.results-add-playlist { position: relative; margin-top: 12px; }
.playlist-picker { position: absolute; z-index: 20; margin-top: 6px; min-width: 240px; padding: 12px; background: #1f2230; border: 1px solid rgba(245,233,195,0.2); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.playlist-picker-title { margin: 0 0 8px; font-size: 13px; opacity: 0.8; }
.playlist-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.playlist-picker-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.playlist-picker-item:hover { background: rgba(255,255,255,0.06); }
.playlist-picker-item.checked { color: var(--gold-pale, #c8b273); }
.picker-check { width: 14px; display: inline-block; }
.playlist-picker-empty { font-size: 13px; opacity: 0.6; margin: 4px 0; }
.playlist-picker-new { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(245,233,195,0.15); }
.playlist-picker-new input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(245,233,195,0.2); background: rgba(0,0,0,0.2); color: inherit; }
.playlist-picker-new .btn { align-self: flex-start; padding: 6px 16px; }
.playlist-picker-error { color: #fca5a5; font-size: 12px; margin: 8px 0 0; }

/* ── Modal pick lists (add existing playlist / add searches) ── */
.picker-scroll-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.35) transparent;
}
/* This is a <label>, and the global `label` rule (main.css ~413) forces
   uppercase, letter-spacing and a bottom margin on every one. `font: inherit`
   does not cover those three, so they have to be reset by hand or playlist
   names render as COL 91. */
.picker-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.picker-row:hover { background: rgba(255,255,255,0.06); }
.picker-row input { flex: none; accent-color: var(--gold); cursor: pointer; }
/* Selected rows hold a mark of their own — with a long list you scroll away
   from the checkbox you just ticked. */
.picker-row:has(input:checked) {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.30);
}
.picker-row:focus-within { border-color: var(--gold-light); }
.picker-row-art { flex: none; display: flex; align-items: center; }
.picker-row-main { flex: 1; min-width: 0; }
.picker-row-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-row-sub {
  display: block;
  font-size: 10.5px;
  margin-top: 1px;
  color: rgba(245,233,195,0.5);
  font-variant-numeric: tabular-nums;
}
.picker-row-meta {
  flex: none;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}
.modal-note { margin: 0; }
/* Same reset as .picker-row — this is a <label> too, and without it the album
   names inside the <select> come out uppercased. .modal-field-label reapplies
   the uppercase deliberately, on itself. */
.modal-field {
  display: block;
  margin: 12px 0 0;
  text-transform: none;
  letter-spacing: normal;
}
.modal-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.6;
}
select.modal-input { cursor: pointer; }
.playlists-loading:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  background: #1f2230;
  border: 1px solid rgba(245,233,195,0.2);
  border-radius: 16px;
  padding: 28px 24px 20px;
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.modal-card--wide { min-width: 440px; }
.modal-close-btn {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0;
  color: rgba(245,233,195,0.4);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.modal-close-btn:hover { color: var(--gold-pale, #c8b273); }
.modal-header { margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.25rem; }
.modal-body { color: rgba(245,233,195,0.9); font-size: 14px; }
.modal-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(245,233,195,0.2);
  background: rgba(0,0,0,0.25);
  color: #f5e9c3; font: inherit; font-size: 14px; outline: none;
}
.modal-input:focus { border-color: var(--gold-pale, #c8b273); }
.modal-footer { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
/* .btn is width:100% for forms, so as flex items both footer buttons claimed the
   full row and shrank to fill it — leaving justify-content:flex-end nothing to
   align and wrapping any label that outgrew its share. Size them to content. */
.modal-footer .btn { width: auto; flex: none; margin-top: 0; white-space: nowrap; }
.btn-danger { background: #dc2626; color: #fff; border: 0; }
.btn-danger:hover { background: #b91c1c; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn:disabled:hover { filter: none; }

/* ── Toast ── */
.toast-container {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  animation: toast-in 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
}
.toast--success { background: #065f46; color: #d1fae5; border: 1px solid #34d399; }
.toast--error { background: #7f1d1d; color: #fecaca; border: 1px solid #f87171; }
.toast--info { background: #1e3a5f; color: #dbeafe; border: 1px solid #60a5fa; }
.toast--out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}

/* ── Light-mode overrides for modals ── */
.light-mode .modal-card, .light-mode .modal-body { background: #fff; }
.light-mode .modal-input { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.03); color: #1b1b1b; }
.light-mode .modal-close-btn { color: rgba(0,0,0,0.3); }

.albums-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.album-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  color: var(--gold-pale);
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.album-card:hover {
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.06);
}
.album-card.active {
  border-color: var(--gold-light);
  background: rgba(201,168,76,0.1);
  border-left: 3px solid var(--gold-light);
}
.album-card-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold-pale);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-card-count {
  font-size: 11px;
  opacity: 0.55;
  color: rgba(245,233,195,0.6);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}
.album-menu-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: rgba(245,233,195,0.4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}
.album-menu-btn:hover {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.25);
  color: var(--gold-pale);
}



/* ── Playlist list (vertical) ── */
.playlist-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.playlist-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border: none;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  color: var(--gold-pale);
  transition: background 0.15s;
}
.playlist-list-item:last-child { border-bottom: none; }
.playlist-list-item:hover {
  background: rgba(100,149,237,0.03);
}
.playlist-list-item.active {
  background: rgba(100,149,237,0.06);
}
.playlist-list-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(100,149,237,0.5);
  margin-right: 2px;
}
.playlist-list-item.active::before {
  background: rgba(100,149,237,0.9);
}
.playlist-list-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-list-count {
  font-size: 11px;
  opacity: 0.5;
  white-space: nowrap;
  flex-shrink: 0;
}
.playlist-list-actions {
  flex-shrink: 0;
  display: inline-flex;
  gap: 4px;
}
.playlist-action-btn {
  padding: 4px 10px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  background: none;
  color: rgba(245,233,195,0.55);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.playlist-action-btn:hover {
  background: rgba(201,168,76,0.08);
  border-color: var(--gold-light);
  color: var(--gold-pale);
}
/* Card-sized variant, for the action strip inside a cover. */
.playlist-action-btn--sm { font-size: 10px; padding: 2px 8px; }

/* ── Tree connector (org-chart branch line between tiers) ── */
.tree-connector {
  /* No vertical lines — each card below tethers individually to the branch */ 
}
.tree-branch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0;
}
.tree-branch::before,
.tree-branch::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: rgba(201,168,76,0.3);
}
.tree-branch-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(201,168,76,0.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Tree tier (org-chart level content) ── */
.tree-tier {
  padding-top: 14px;
  animation: tree-tier-in 0.25s ease;
}

/* Each playlist card gets a vertical tether up to the branch line above */
.tree-tier .playlist-card {
  position: relative;
}
.tree-tier .playlist-card::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: rgba(201,168,76,0.4);
  border-radius: 1px;
  pointer-events: none;
}
/* Each search pill gets a vertical tether up to the branch line above */
.tree-tier .history-pill {
  position: relative;
}
.tree-tier .history-pill::after {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: rgba(201,168,76,0.4);
  border-radius: 1px;
  pointer-events: none;
}
@keyframes tree-tier-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.playlist-card--add {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 80px;
  padding: 14px 18px;
  border: 1px dashed rgba(201,168,76,0.35);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  color: var(--gold-pale);
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
  opacity: 0.7;
}
.playlist-card--add:hover {
  border-style: solid;
  border-color: var(--gold-light);
  background: rgba(201,168,76,0.08);
  opacity: 1;
}
.playlist-card-add-icon {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.playlist-card-add-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.6;
}
.drill-back-btn {
  background: none;
  border: 1px solid rgba(245,233,195,0.2);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  padding: 0;
}
.drill-back-btn:hover {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold-light);
}

/* ── Search vertical list ── */
/* No max-height/overflow here: .main-content is the panel's scroller now, and a
   second scrollbar nested inside it made long playlists awkward to reach. */
.search-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.search-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  color: var(--gold-pale);
  transition: background 0.15s;
}
.search-list-item + .search-list-item {
  border-top: 1px solid rgba(201,168,76,0.06);
}
.search-list-item:hover {
  background: rgba(52,211,153,0.03);
}
.search-list-item::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(52,211,153,0.4);
}
.search-list-picks {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Source Sans 3', monospace;
  letter-spacing: 0.02em;
  color: var(--gold-pale);
  flex-shrink: 0;
}
.search-list-date {
  font-size: 12px;
  opacity: 0.55;
  color: rgba(245,233,195,0.6);
  flex-shrink: 0;
}
.search-list-matches {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-pale);
  flex-shrink: 0;
}
.search-list-matches.low { opacity: 0.5; }
.search-list-matches.mid { color: var(--gold-pale); }
.search-list-matches.high { color: #fff3c9; }
.search-list-remove {
  flex-shrink: 0;
  margin-left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(252,165,165,0.3);
  background: rgba(252,165,165,0.08);
  color: #fca5a5;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.search-list-remove:hover {
  opacity: 1;
  background: rgba(252,165,165,0.2);
  transform: scale(1.1);
}


/* ── Library panel, narrow screens ──
   Placed last on purpose: a media query adds no specificity, so these have to
   come after the base rules they override. The bounded, internally scrolling
   panel is a desktop affordance; here the panel stacks and the page scrolls. */
@media (max-width: 760px) {
  #historyPanel { flex-direction: column; max-height: none; overflow: visible; }
  .sidebar {
    flex-direction: row;
    width: auto;
    gap: 6px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(201,168,76,0.1);
    overflow-x: auto;
  }
  .sidebar-header { display: none; }
  /* The buttons live inside this wrapper, so it is the one that has to lay out
     horizontally — turning only .sidebar into a row leaves them stacked. */
  .sidebar-section { display: flex; gap: 6px; }
  .sidebar-item { width: auto; white-space: nowrap; }
  .sidebar-count { margin-left: 6px; }
  .main-content { overflow: visible; padding: 0 16px 16px; }
  .view-toolbar { margin: 0 -16px; padding: 16px 16px 12px; }
  .covers { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
  .view-header { flex-wrap: wrap; }
}
:root[data-theme="light"] {
  @media (max-width: 760px) {
    .sidebar { border-bottom-color: rgba(20,35,63,0.08); }
  }
}