/* ═══════════════════════════════════════════
   MY ACCOUNT HUB — my-account.css v42
   Scoped to .mya-* prefix. Dark Sentinel
   theme using global CSS variable tokens.
   v37: A1 trail progress card, A3 recommendation card
   v38: Phase C Whiskey Journal tab + Pours History
   v39: Phase B My Collection tab (Shelf + Wishlist)
   v40: Phase D Sidebar collection counts widget
   v41: Counts widget moved into nav; rabbit → /my/
   ═══════════════════════════════════════════ */

:root {
  --mya-sidebar-w: 240px;
  --mya-topbar-h: 56px;
}

/* ── Shell ── */
.mya-shell {
  background: var(--dark-1, #0D0B08);
  color: var(--text-1, #F0E6D4);
  font-family: system-ui, -apple-system, Arial, sans-serif;
}

/* ═══════════════════════════════════════════
   AUTH GATE — full-screen overlay
   ═══════════════════════════════════════════ */
.mya-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(120,72,12,0.22) 0%, transparent 70%),
    radial-gradient(ellipse at 50% 50%, #0D0B08 0%, #060604 100%);
  overflow-y: auto;
}

/* Ghost cards — blurred portal preview in background */
.mya-gate-bg {
  position: absolute;
  inset: 0;
  padding: 80px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  filter: blur(16px);
  opacity: 0.18;
  pointer-events: none;
  overflow: hidden;
}
.mya-gate-bg-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
}
.mya-gate-bg-row--2 {
  grid-template-columns: 3fr 2fr;
}
.mya-gate-ghost {
  background: rgba(240,230,212,0.07);
  border: 1px solid rgba(92,61,26,0.45);
  border-radius: 10px;
  height: 140px;
}
.mya-gate-ghost--tall  { height: 230px; }
.mya-gate-ghost--wide  { height: 88px; }

/* Centered content wrapper */
.mya-auth-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* Logo + brand name above card */
.mya-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mya-auth-logo {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
  object-position: center 12%;
  border: 1px solid rgba(249,175,54,0.25);
  box-shadow: 0 0 28px rgba(249,175,54,0.1);
}
.mya-auth-brand-name {
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240,230,212,0.5);
}

/* Auth card */
.mya-auth-card {
  width: 100%;
  background: rgba(10,8,5,0.9);
  border: 1px solid rgba(92,61,26,0.5);
  border-radius: 16px;
  padding: 32px 28px 28px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Card heading + subtitle */
.mya-auth-title {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: normal;
  color: var(--text-1, #F0E6D4);
  margin: 0 0 8px;
}
.mya-auth-subtitle {
  font-size: 14px;
  color: var(--muted, #B0A08C);
  margin: 0 0 22px;
  line-height: 1.5;
}

/* Field label */
.mya-auth-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(176,160,140,0.8);
  margin-bottom: 7px;
}

/* Input with @ icon prefix */
.mya-auth-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(92,61,26,0.7);
  border-radius: 8px;
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mya-auth-input-wrap:focus-within {
  border-color: var(--gold, #F9AF36);
  box-shadow: 0 0 0 3px rgba(249,175,54,0.12);
}
.mya-auth-input-icon {
  padding: 0 10px 0 14px;
  color: var(--muted, #B0A08C);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mya-auth-input-wrap .mya-auth-input {
  flex: 1;
  background: none;
  border: none;
  margin: 0;
  padding: 13px 14px 13px 0;
}
.mya-auth-input-wrap .mya-auth-input:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* Stand-alone inputs (verify code — no icon wrap) */
.mya-auth-input--solo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(92,61,26,0.7);
  border-radius: 8px;
  padding: 13px 14px;
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mya-auth-input--solo:focus {
  outline: none;
  border-color: var(--gold, #F9AF36);
  box-shadow: 0 0 0 3px rgba(249,175,54,0.12);
}

/* Full-width button */
.mya-btn-full {
  display: block;
  width: 100%;
}
.mya-btn-primary {
  background: var(--gold, #F9AF36);
  color: #0D0B08;
  border: none;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mya-btn-primary:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════
   PORTAL LAYOUT (sidebar + main)
   ═══════════════════════════════════════════ */
.mya-portal {
  display: flex;
  min-height: calc(100vh - 64px);
}

/* ── Sidebar ── */
.mya-sidebar {
  width: var(--mya-sidebar-w);
  flex-shrink: 0;
  background: #0A0804;
  border-right: 1px solid var(--border, #5C3D1A);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 5;
}
.mya-sidebar::-webkit-scrollbar { display: none; }

.mya-brand {
  padding: 22px 16px 18px;
  border-bottom: 1px solid rgba(92,61,26,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  transition: background 0.15s;
  text-align: center;
}
.mya-brand:hover { background: rgba(249,175,54,0.05); }
.mya-brand:focus-visible { outline: 2px solid rgba(249,175,54,0.5); outline-offset: -2px; }

/* ── Global focus styles (WCAG 2.4.7) ──────────────────────────────────
   Applied to every interactive element that lacked a visible focus ring.
   Uses :focus-visible so mouse users aren't bothered by rings on click.
   ─────────────────────────────────────────────────────────────────────── */
.mya-nav-btn:focus-visible,
.mya-mobile-nav-btn:focus-visible,
.mya-signout-btn:focus-visible,
.mya-action-chip:focus-visible,
.mya-settings-tab:focus-visible,
.mya-perks-tab:focus-visible,
.mya-btn-secondary:focus-visible,
.mya-btn-cancel:focus-visible,
.mya-btn-primary:focus-visible,
.mya-btn-text:focus-visible,
.mya-card-link:focus-visible,
.mya-ch-pill:focus-visible,
.mya-toggle-btn:focus-visible,
.mya-bo-card:focus-visible {
  outline: 2px solid var(--gold, #F9AF36);
  outline-offset: 2px;
}

/* Inputs: suppress the browser default but keep wrapper highlight (already has border on focus-within) */
.mya-auth-input:focus         { outline: none; }
.mya-auth-input--solo:focus   { outline: none; }
.mya-profile-input:focus      { outline: none; }
/* Compensate with an explicit ring on the wrapper when keyboard-focused */
.mya-auth-input-wrap:focus-within {
  box-shadow: 0 0 0 2px rgba(249, 175, 54, 0.35);
}
.mya-profile-field:focus-within {
  box-shadow: 0 0 0 2px rgba(249, 175, 54, 0.35);
}
.mya-brand-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.9;
}
.mya-brand-name {
  font-family: Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--text-1, #F0E6D4);
  line-height: 1.1;
  text-align: center;
}
.mya-brand-sub {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #F9AF36);
}

/* ── Nav ── */
.mya-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mya-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--muted, #B0A08C);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
  line-height: 1.3;
}
.mya-nav-btn:hover {
  background: rgba(249,175,54,0.06);
  color: var(--text-1, #F0E6D4);
}
.mya-nav-btn.active {
  background: rgba(249,175,54,0.12);
  color: var(--gold, #F9AF36);
}
.mya-nav-icon { flex-shrink: 0; color: inherit; }

/* Staff nav button — blue accent */
.mya-nav-btn--staff {
  margin-top: 6px;
  border-top: 1px solid rgba(74, 144, 226, 0.15);
  padding-top: 14px;
}
.mya-nav-btn--staff:hover {
  background: rgba(74, 144, 226, 0.08);
  color: #4A90E2;
}
.mya-nav-btn--staff.active {
  background: rgba(74, 144, 226, 0.14);
  color: #4A90E2;
}

/* ── Sidebar footer ── */
.mya-sidebar-foot {
  padding: 14px 12px;
  border-top: 1px solid rgba(92,61,26,0.5);
}
.mya-signout-btn {
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 6px;
  color: var(--muted, #B0A08C);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
.mya-signout-btn:hover { border-color: var(--gold); color: var(--text-1); }

/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */
.mya-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ── */
.mya-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: var(--mya-topbar-h);
  background: rgba(13,11,8,0.97);
  border-bottom: 1px solid rgba(92,61,26,0.4);
  position: sticky;
  top: 0;
  z-index: 8;
}
.mya-topbar-left { display: flex; align-items: center; gap: 10px; }
.mya-topbar-right { display: flex; align-items: center; gap: 12px; }
.mya-topbar-title {
  font-family: Georgia, serif;
  font-size: 19px;
  color: var(--text-1, #F0E6D4);
}
.mya-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid rgba(92,61,26,0.7);
  border-radius: 24px;
}
.mya-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dark-3, #1B1610);
  border: 1px solid var(--gold, #F9AF36);
  color: var(--gold, #F9AF36);
  font-family: Georgia, serif;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
}
.mya-user-name { font-size: 13px; color: var(--text-1); }

/* ── Content area ── */
.mya-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  max-width: 1280px;
}

/* ── Panel visibility ── */
.mya-panel { animation: mya-fade 0.18s ease; }
.mya-panel--hidden { display: none !important; }
@keyframes mya-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Loading state ── */
.mya-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  animation: mya-pulse 1.5s ease-in-out infinite;
}
@keyframes mya-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ── Error state ── */
.mya-error {
  padding: 24px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.mya-error strong { color: var(--red, #E8655A); display: block; margin-bottom: 6px; }

/* ── Coming Soon placeholder ── */
.mya-coming-soon {
  max-width: 480px;
  margin: 48px auto;
  text-align: center;
  padding: 40px;
  background: var(--dark-2, #13100B);
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 12px;
}
.mya-coming-soon h2 {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--gold, #F9AF36);
  margin: 0 0 8px;
}
.mya-coming-soon p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.mya-coming-soon-icon {
  color: var(--gold);
  margin-bottom: 16px;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════ */

/* ── Hero card ── */
.mya-hero-card {
  background: var(--dark-2, #13100B);
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: end;
}

/* Left: welcome text + membership stats */
.mya-hero-main {
  flex: 1;
  min-width: 0;
}

/* Right: activity numbers panel (1fr grid column — matches Member Pass card width) */
.mya-hero-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid rgba(92, 61, 26, 0.55);
  padding-left: 24px;
  align-items: flex-start;
}
.mya-hero-act-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold, #F9AF36);
  opacity: 0.72;
  margin-bottom: 0;
}
.mya-hero-act-row {
  display: flex;
  gap: 20px;
}
.mya-hero-act-stat {
  text-align: center;
  min-width: 48px;
}
.mya-hero-act-num {
  font-family: Georgia, serif;
  font-size: 32px;
  color: var(--gold, #F9AF36);
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 400;
  text-shadow: 0 0 22px rgba(249, 175, 54, 0.38);
}
.mya-hero-act-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
}
.mya-hero-act-tag {
  font-size: 11px;
  font-style: italic;
  color: rgba(249, 175, 54, 0.62);
  line-height: 1.4;
  border-top: 1px solid rgba(92, 61, 26, 0.45);
  padding-top: 8px;
  max-width: 100%;
}
.mya-hero-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,175,54,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.mya-welcome {
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--text-1, #F0E6D4);
  margin: 0 0 4px;
}
.mya-welcome-sub {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 20px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.mya-hero-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(92,61,26,0.9), rgba(249,175,54,0.5), transparent);
  margin-bottom: 20px;
}
.mya-hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.mya-hero-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 3px;
}
.mya-hero-stat-value {
  font-size: 14px;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.mya-status--active { color: #27ae60; font-weight: 600; }
.mya-status--inactive { color: var(--red, #E8655A); }

/* Migration pending badge (owner-visible) */
.mya-migration-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(249,175,54,0.12);
  color: var(--gold);
  border: 1px solid rgba(249,175,54,0.3);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Quick action chips ── */
.mya-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mya-action-chip {
  padding: 7px 16px;
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 20px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mya-action-chip:hover {
  border-color: var(--gold);
  color: var(--text-1);
}
.mya-action-chip--primary {
  background: var(--gold, #F9AF36);
  color: #0D0B08;
  border-color: var(--gold);
  font-weight: 600;
}
.mya-action-chip--primary:hover { opacity: 0.9; color: #0D0B08; }

/* ── Dashboard card grid ── */
.mya-dash-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
.mya-dash-left-col,
.mya-dash-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mya-card {
  background: var(--dark-2, #13100B);
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 10px;
  padding: 20px;
}
.mya-card--span2 { grid-column: span 2; }
.mya-card--full  { grid-column: 1 / -1; }
.mya-card--right { /* legacy — column wrappers handle placement now */ }
.mya-card-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(92,61,26,0.4);
  padding-bottom: 10px;
}
.mya-card-link {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-transform: none;
}
.mya-card-link:hover { text-decoration: underline; }

/* ── Pours card ── */
.mya-pours-display { display: flex; flex-direction: column; gap: 10px; }
.mya-pours-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mya-pours-num {
  font-family: Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold, #F9AF36);
}
.mya-pours-denom {
  font-family: Georgia, serif;
  font-size: 24px;
  color: var(--muted);
}
.mya-pours-label {
  font-size: 13px;
  color: var(--muted);
  margin-left: 4px;
}
.mya-pours-bar {
  height: 4px;
  background: rgba(92,61,26,0.6);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.mya-pours-bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.mya-pours-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.mya-pours-coming {
  display: inline-block;
  font-size: 10px;
  background: rgba(249,175,54,0.1);
  color: var(--gold);
  border-radius: 3px;
  padding: 1px 7px;
  margin-top: 4px;
}

/* ── Club pours selection list ── */
.mya-club-pours {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #2A1F14);
}
.mya-club-pours-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
  margin-bottom: 10px;
}
.mya-club-pour-item {
  display: flex;
  flex-direction: column;
  padding: 9px 0;
  border-bottom: 1px solid rgba(42,31,20,0.6);
}
.mya-club-pour-item:last-child { border-bottom: none; }
.mya-club-pour-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  line-height: 1.3;
}
.mya-club-pour-meta {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}

/* ── Member pass card ── */
.mya-pass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  background: #070705;
  border: 1px solid rgba(92,61,26,0.6);
  border-radius: 10px;
  margin-bottom: 12px;
}
.mya-pass-info { flex: 1; min-width: 0; }
.mya-pass-name {
  font-family: Georgia, serif;
  font-size: 17px;
  color: var(--text-1);
  margin-bottom: 3px;
}
.mya-pass-num {
  font-size: 13px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  font-weight: 600;
}
.mya-pass-tier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.mya-pass-qr {
  width: 76px; height: 76px;
  background: var(--gold-light, #FDE8C4);
  color: #0D0B08;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mya-pass-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Benefits list ── */
.mya-benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mya-benefit-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--dark-3, #1B1610);
  border: 1px solid rgba(92,61,26,0.4);
  border-radius: 8px;
  align-items: flex-start;
}
.mya-benefit-icon-wrap {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(92,61,26,0.8);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.mya-benefit-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-1);
  margin-bottom: 3px;
}
.mya-benefit-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════
   MOBILE NAV (horizontal scroll tabs)
   Shown on < 1024px instead of sidebar.
   ═══════════════════════════════════════════ */
.mya-mobile-nav {
  display: none;
  overflow-x: auto;
  border-bottom: 1px solid var(--border, #5C3D1A);
  background: #0A0804;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.mya-mobile-nav::-webkit-scrollbar { display: none; }
.mya-mobile-nav-btn {
  flex-shrink: 0;
  padding: 11px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.mya-mobile-nav-btn:hover { color: var(--text-1); }
.mya-mobile-nav-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1023px) {
  .mya-sidebar { display: none; }
  .mya-mobile-nav { display: flex; }
  .mya-portal { flex-direction: column; }

  /* Single-column stack: left col and right col become full-width */
  .mya-dash-grid { grid-template-columns: 1fr; }
  .mya-card--span2 { grid-column: 1; }
  .mya-card--full { grid-column: 1; }

  .mya-welcome { font-size: 24px; }
  .mya-hero-card { padding: 20px; grid-template-columns: 1fr; }
  .mya-hero-activity {
    border-left: none;
    border-top: 1px solid rgba(92, 61, 26, 0.55);
    padding-left: 0;
    padding-top: 16px;
    align-items: stretch;
  }
  .mya-hero-act-row { justify-content: space-between; }
  .mya-content { padding: 14px; }
  .mya-topbar { padding: 0 14px; }
  .mya-pours-num { font-size: 40px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Two equal columns on tablet — left/right wrappers both stretch to 1fr */
  .mya-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .mya-card--span2 { grid-column: span 2; }
  .mya-card--full { grid-column: 1 / -1; }
}

@media (min-width: 1440px) {
  :root { --mya-sidebar-w: 260px; }
}

@media (pointer: coarse) {
  /* Nav / tabs */
  .mya-nav-btn          { min-height: 44px; }
  .mya-mobile-nav-btn   { min-height: 44px; }
  .mya-settings-tab,
  .mya-perks-tab        { min-height: 44px; }
  /* Buttons */
  .mya-action-chip      { min-height: 44px; }
  .mya-btn-secondary,
  .mya-btn-cancel       { min-height: 44px; }
  /* Pills (comms channel selectors) */
  .mya-ch-pill          { min-height: 44px; }
  /* Toggle switches: visually 40×22px but expand tap area to 44px tall */
  .mya-toggle-btn       { position: relative; }
  .mya-toggle-btn::after {
    content: '';
    position: absolute;
    top: -11px;
    right: -14px;
    bottom: -11px;
    left: -14px;
  }
}

/* ═══════════════════════════════════════════
   COMMUNICATIONS TAB
   ═══════════════════════════════════════════ */

.mya-loading-msg {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.mya-comms-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mya-comms-section {
  background: var(--dark-2, #13100B);
  border: 1px solid var(--border, #5C3D1A);
  border-radius: 10px;
  padding: 20px 24px;
}

.mya-section-title {
  font-family: Georgia, serif;
  font-size: 15px;
  color: var(--gold, #F9AF36);
  margin: 0 0 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 11px;
}

/* ── Toggle rows — toggle on left, text fills right ── */
.mya-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.mya-toggle-row + .mya-toggle-row {
  border-top: 1px solid rgba(255,255,255,0.05);
}
.mya-toggle-row--master {
  padding-bottom: 14px;
  margin-bottom: 2px;
}
.mya-toggle-row--sub {
  padding-left: 12px;
  transition: opacity 0.2s;
}
.mya-toggle-row--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.mya-toggle-subcats {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}

.mya-toggle-text {
  flex: 1;
  min-width: 0;
}
.mya-toggle-label {
  display: block;
  font-size: 14px;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 2px;
}
.mya-toggle-desc {
  display: block;
  font-size: 12px;
  color: var(--muted, #B0A08C);
  line-height: 1.5;
}

/* ── Toggle switch ── */
.mya-toggle-btn {
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  margin-top: 2px;
}
.mya-toggle-btn--on {
  background: var(--gold, #F9AF36);
}
.mya-toggle-btn:disabled {
  cursor: default;
  opacity: 0.4;
}
.mya-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
  pointer-events: none;
}
.mya-toggle-btn--on .mya-toggle-knob {
  transform: translateX(18px);
}

.mya-toggle-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.mya-toggle-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.6;
}

/* ── Comms timeline ── */
.mya-comms-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mya-comms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mya-comms-row:last-child { border-bottom: none; }

.mya-comms-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mya-comms-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mya-comms-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.mya-comms-badge--email {
  background: rgba(249,175,54,0.15);
  color: var(--gold);
}
.mya-comms-badge--sms {
  background: rgba(160,208,160,0.12);
  color: #90C890;
}

.mya-comms-title {
  font-size: 13px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mya-comms-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.mya-comms-status {
  font-size: 11px;
  font-weight: 700;
}
.mya-comms-status--ok  { color: #5CB85C; }
.mya-comms-status--err { color: #E8655A; }

.mya-empty-state {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  text-align: center;
  padding: 24px 0;
}

/* ── Toast ── */
.mya-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--dark-2, #13100B);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  max-width: 260px;
}
.mya-toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.mya-toast--error {
  border-color: #E8655A;
  color: #E8655A;
}

/* ═══════════════════════════════════════════
   AUTH GATE — shared input + form styles
   ═══════════════════════════════════════════ */

/* Base input styles (shared by icon-wrap and standalone) */
.mya-auth-input {
  font-size: 15px;
  color: var(--text-1, #F0E6D4);
  font-family: inherit;
}
.mya-auth-input::placeholder { color: var(--muted, #B0A08C); opacity: 0.65; }

.mya-btn-text {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted, #B0A08C);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 0 2px;
  text-align: center;
}
.mya-btn-text:hover { color: var(--text-1, #F0E6D4); }

.mya-btn-link {
  display: block;
  text-align: center;
  text-decoration: none;
}

.mya-auth-code-sent {
  font-size: 13px;
  color: var(--gold, #F9AF36);
  margin: 0 0 12px;
  line-height: 1.5;
}

.mya-auth-not-found {
  font-size: 14px;
  color: var(--muted, #B0A08C);
  margin: 0 0 16px;
  line-height: 1.5;
}

.mya-auth-error {
  margin-top: 10px;
  color: #E8655A;
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
}

.mya-auth-status-msg {
  margin-top: 10px;
  color: var(--muted, #B0A08C);
  font-size: 13px;
  text-align: center;
}

/* ═══════════════════════════════════════════
   PROFILE DASHBOARD — non-member / inactive
   ═══════════════════════════════════════════ */

/* Join / Rejoin chip — gold border, works as <a> or <button> */
.mya-action-chip--cta {
  border-color: var(--gold, #F9AF36);
  color: var(--gold, #F9AF36);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mya-action-chip--cta:hover {
  background: var(--gold, #F9AF36);
  color: #0D0B08;
}

/* C33 teaser card — subtle gold top accent */
.mya-c33-teaser {
  border-color: rgba(249,175,54,0.3);
  position: relative;
  overflow: hidden;
}
.mya-c33-teaser::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold, #F9AF36) 0%, transparent 100%);
}

.mya-c33-teaser-desc {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0 0 16px;
  line-height: 1.55;
}

/* Full-width gold CTA button inside teaser card */
.mya-btn-join {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 12px 20px;
  background: var(--gold, #F9AF36);
  color: #0D0B08;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mya-btn-join:hover { opacity: 0.9; }

/* Gifted-by hero line */
.mya-gifted-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(249, 175, 54, 0.08);
  border: 1px solid rgba(249, 175, 54, 0.22);
  border-radius: 20px;
  font-size: 12px;
  color: var(--muted, #B0A08C);
}
.mya-gifted-by strong {
  color: var(--gold, #F9AF36);
  font-weight: 600;
}
.mya-gifted-by svg {
  flex-shrink: 0;
  color: var(--gold, #F9AF36);
}

/* ═══════════════════════════════════════════
   EXPERIENCE CARDS — Library Log, Recent
   Tastings, Your Palate
   ═══════════════════════════════════════════ */

/* Library Log — big stat */
.mya-xp-big-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 12px;
}
.mya-xp-big-num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold, #F9AF36);
  letter-spacing: -1px;
}
.mya-xp-stat-label {
  font-size: 13px;
  color: var(--muted, #B0A08C);
}

/* Library Log — mini stats row */
.mya-xp-mini-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border, #2A1F14);
}
.mya-xp-mini-stat {
  flex: 1;
  text-align: center;
  padding: 4px 0;
}
.mya-xp-mini-num {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  line-height: 1.2;
}
.mya-xp-mini-label {
  display: block;
  font-size: 10px;
  color: var(--muted, #B0A08C);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}
.mya-xp-mini-divider {
  width: 1px;
  height: 28px;
  background: var(--border, #2A1F14);
  flex-shrink: 0;
}

/* Recent Tastings — list */
.mya-xp-tasting-list {
  margin-top: 8px;
}
.mya-xp-tasting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #2A1F14);
  gap: 8px;
}
.mya-xp-tasting-row:last-child { border-bottom: none; }
.mya-xp-tasting-name {
  font-size: 13px;
  color: var(--text-1, #F0E6D4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.mya-xp-tasting-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mya-xp-sub-badge {
  font-size: 10px;
  color: var(--gold, #F9AF36);
  background: rgba(249, 175, 54, 0.08);
  border: 1px solid rgba(249, 175, 54, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mya-xp-date {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  white-space: nowrap;
}

/* Flavor Profile — bars */
.mya-xp-flavor-bars {
  margin-top: 8px;
}
.mya-xp-flavor-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.mya-xp-flavor-row:last-child { margin-bottom: 0; }
.mya-xp-flavor-tag {
  font-size: 12px;
  color: var(--text-1, #F0E6D4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mya-xp-flavor-bar-wrap {
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.mya-xp-flavor-bar-fill {
  height: 100%;
  background: var(--gold, #F9AF36);
  border-radius: 3px;
}
.mya-xp-flavor-count {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  text-align: right;
}

/* ═══════════════════════════════════════════
   PAYMENT TAB
   ═══════════════════════════════════════════ */
.mya-pay-wrap {
  max-width: 560px;
}

/* Card on file display */
.mya-pay-card-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  margin-bottom: 12px;
}
.mya-pay-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mya-pay-card-icon {
  color: var(--gold, #F9AF36);
  flex-shrink: 0;
}
.mya-pay-card-num {
  font-size: 15px;
  color: var(--text-1, #F0E6D4);
  font-weight: 500;
}
.mya-pay-card-exp {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}

/* No card on file */
.mya-pay-no-card {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted, #B0A08C);
  margin-bottom: 12px;
}

/* Secondary button (Update Card) */
.mya-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(249, 175, 54, 0.35);
  border-radius: 4px;
  color: var(--gold, #F9AF36);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.mya-btn-secondary:hover {
  border-color: var(--gold, #F9AF36);
  background: rgba(249, 175, 54, 0.07);
}

/* Cancel / destructive action button */
.mya-btn-cancel {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(224, 80, 64, 0.35);
  border-radius: 4px;
  color: #E8655A;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mya-btn-cancel:hover {
  border-color: #E8655A;
  background: rgba(224, 80, 64, 0.07);
}
.mya-btn-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inline Square card form */
.mya-pay-form {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  margin-bottom: 12px;
}
.mya-pay-form-error {
  font-size: 13px;
  color: #E8655A;
  margin: 10px 0 0;
}
.mya-pay-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* Empty state shared */
.mya-xp-empty {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  text-align: center;
  padding: 14px 0;
  margin: 0;
}

/* ── Per-type channel selection (Communications tab) ───────────────── */

/* Intro blurb above the channel rows */
.mya-ch-intro {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0 0 14px;
}

/* One row per notification type — pills on the left */
.mya-ch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(42, 31, 20, 0.6);
}
.mya-ch-row:last-of-type {
  border-bottom: none;
}

/* Label + description column */
.mya-ch-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Email / SMS pill button group — fixed-width left column */
.mya-ch-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 88px;  /* fits both pills stacked */
  padding-top: 0;
}

/* Individual channel pill */
.mya-ch-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border, #2A1F14);
  background: transparent;
  color: var(--muted, #B0A08C);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.mya-ch-pill--on {
  background: rgba(249, 175, 54, 0.1);
  border-color: rgba(249, 175, 54, 0.45);
  color: var(--gold, #F9AF36);
}
.mya-ch-pill--on::before {
  content: '✓';
  font-size: 10px;
}
.mya-ch-pill:hover:not([disabled]) {
  border-color: rgba(249, 175, 54, 0.3);
  color: var(--gold, #F9AF36);
}
.mya-ch-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Hint text below a row when SMS is active — indent to align with info column */
.mya-sms-hint {
  font-size: 11.5px;
  color: var(--muted, #B0A08C);
  margin: -4px 0 8px;
  padding: 0 0 0 104px; /* 88px pills + 16px gap */
  display: none;
  font-style: italic;
}
.mya-sms-hint--visible {
  display: block;
}
@media (max-width: 480px) {
  .mya-sms-hint { padding-left: 92px; }
}

/* Email-paused warning banner */
.mya-email-paused-banner {
  background: rgba(224, 80, 64, 0.08);
  border: 1px solid rgba(224, 80, 64, 0.3);
  border-radius: 4px;
  color: #E8655A;
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Mobile: pills already on left; shrink pill column slightly */
@media (max-width: 480px) {
  .mya-ch-pills {
    width: 76px;
  }
  .mya-ch-pill {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════
   SETTINGS SUB-TABS
   ═══════════════════════════════════════════ */
.mya-settings-tabs {
  display: flex;
  gap: 3px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mya-settings-tabs::-webkit-scrollbar { display: none; }

.mya-settings-tab {
  flex-shrink: 0;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted, #B0A08C);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.mya-settings-tab:hover {
  background: rgba(249,175,54,0.07);
  color: var(--text-1, #F0E6D4);
}
.mya-settings-tab.active {
  background: rgba(249,175,54,0.14);
  color: var(--gold, #F9AF36);
  box-shadow: inset 0 0 0 1px rgba(249,175,54,0.28);
}

.mya-settings-sub--hidden {
  display: none;
}

/* ═══════════════════════════════════════════
   SIDEBAR MEMBER INFO
   ═══════════════════════════════════════════ */
.mya-sidebar-member {
  padding: 10px 16px 14px;
  border-bottom: 1px solid rgba(92,61,26,0.5);
  text-align: center;
}
.mya-sidebar-member-num {
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 4px;
}
.mya-sidebar-member-meta {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  line-height: 1.6;
}
.mya-sidebar-member-meta .sm-status-active  { color: #27ae60; }
.mya-sidebar-member-meta .sm-status-inactive { color: var(--cancel, #E8655A); }

/* Status / role chips in sidebar — stack vertically, center-aligned */
.mya-sidebar-status-chip {
  display: block;
  width: fit-content;
  margin: 0 auto 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid;
}
.mya-sidebar-status-chip--active {
  background: rgba(39, 174, 96, 0.12);
  border-color: rgba(39, 174, 96, 0.45);
  color: #27ae60;
}
.mya-sidebar-status-chip--inactive {
  background: rgba(224, 80, 64, 0.10);
  border-color: rgba(224, 80, 64, 0.38);
  color: #E8655A;
}
.mya-sidebar-status-chip--staff {
  background: rgba(74, 144, 226, 0.12);
  border-color: rgba(74, 144, 226, 0.45);
  color: #4A90E2;
}
.mya-sidebar-status-chip--rewards-active {
  background: rgba(249, 175, 54, 0.10);
  border-color: rgba(249, 175, 54, 0.38);
  color: var(--gold, #F9AF36);
}
.mya-sidebar-status-chip--rewards-inactive {
  background: transparent;
  border-color: transparent;
  color: var(--muted, #B0A08C);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.mya-sidebar-rewards-enroll {
  display: block;
  width: fit-content;
  margin: -2px auto 5px;
  font-size: 10.5px;
  color: var(--gold, #F9AF36);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgba(249, 175, 54, 0.4);
  text-underline-offset: 2px;
  font-family: inherit;
}
.mya-sidebar-rewards-enroll:hover { color: #ffcc66; }

.mya-sidebar-member-since {
  display: block;
  font-size: 10.5px;
  color: var(--muted, #B0A08C);
  margin-bottom: 3px;
}
.mya-sidebar-member-renews {
  display: block;
  font-size: 10.5px;
  color: var(--muted, #B0A08C);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════
   MY TICKETS (Events tab)
   ═══════════════════════════════════════════ */
.mya-tickets-section {
  max-width: 640px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-1, #2A1F14);
}

.mya-ticket-sublabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold, #F9AF36);
  margin: 10px 0 4px;
}
.mya-ticket-sublabel--past {
  color: var(--muted, #B0A08C);
  cursor: pointer;
}
.mya-ticket-sublabel--past:hover { color: var(--text-1, #F0E6D4); }

.mya-ticket-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42, 31, 20, 0.6);
  text-decoration: none;
  color: var(--text-1, #F0E6D4);
  transition: opacity 0.15s;
}
.mya-ticket-card:hover { opacity: 0.8; }
.mya-ticket-card:last-of-type { border-bottom: none; }

.mya-ticket-img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(42, 31, 20, 0.5);
}

.mya-ticket-body { flex: 1; min-width: 0; }

.mya-ticket-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mya-ticket-meta {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}

.mya-ticket-status {
  font-size: 11px;
  margin-top: 2px;
}

.mya-release-btn {
  font-size: 10px;
  color: #E05040;
  background: none;
  border: 1px solid rgba(224, 80, 64, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5px;
  display: inline-block;
}
.mya-release-btn:hover { background: rgba(224, 80, 64, 0.1); }

/* ═══════════════════════════════════════════
   EVENT CARDS
   ═══════════════════════════════════════════ */
.mya-events-wrap {
  max-width: 640px;
}

.mya-events-footer {
  margin-top: 16px;
  padding-top: 4px;
  text-align: center;
}

.mya-ev-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42, 31, 20, 0.6);
  text-decoration: none;
  color: var(--text-1, #F0E6D4);
  transition: opacity 0.15s;
}
.mya-ev-card:hover { opacity: 0.8; }
.mya-ev-card:last-of-type { border-bottom: none; }

.mya-ev-date {
  flex-shrink: 0;
  width: 46px;
  text-align: center;
  background: rgba(249, 175, 54, 0.06);
  border: 1px solid rgba(249, 175, 54, 0.2);
  border-radius: 6px;
  padding: 6px 4px 5px;
}
.mya-ev-month {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold, #F9AF36);
  text-transform: uppercase;
}
.mya-ev-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1, #F0E6D4);
  line-height: 1.1;
}
.mya-ev-dow {
  font-size: 9px;
  color: var(--muted, #B0A08C);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mya-ev-img {
  flex-shrink: 0;
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(42, 31, 20, 0.5);
}

.mya-ev-body {
  flex: 1;
  min-width: 0;
}
.mya-ev-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mya-ev-meta {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  margin-bottom: 6px;
}

.mya-ev-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.mya-ev-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(176, 160, 140, 0.1);
  color: var(--muted, #B0A08C);
}
.mya-ev-badge--early {
  background: rgba(249, 175, 54, 0.12);
  color: var(--gold, #F9AF36);
}
.mya-ev-badge--ticket {
  background: rgba(139, 112, 234, 0.12);
  color: #B09AEE;
}
.mya-ev-badge--rsvp {
  background: rgba(39, 174, 96, 0.1);
  color: #5ACB7E;
}
.mya-ev-badge--free {
  background: rgba(39, 174, 96, 0.08);
  color: #5ACB7E;
}

.mya-ev-avail {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}
.mya-ev-avail--low  { color: var(--gold, #F9AF36); }
.mya-ev-avail--sold-out { color: #E8655A; }

@media (max-width: 600px) {
  /* Hide event image and allow title to wrap on small screens
     (extended from 480px — at 481-600px the 200px image crushes the text column) */
  .mya-ev-img   { display: none; }
  .mya-ev-title { white-space: normal; }
}

/* ═══════════════════════════════════════════
   PERKS TAB
   ═══════════════════════════════════════════ */
.mya-perks-wrap {
  max-width: 640px;
}

.mya-perk-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.mya-perk-card--featured {
  border-color: rgba(249,175,54,0.25);
  background: rgba(249,175,54,0.04);
}

.mya-perk-card--prompt {
  border-style: dashed;
  border-color: rgba(249,175,54,0.2);
}

.mya-perk-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted, #B0A08C);
}

.mya-perk-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  flex: 1;
}

.mya-perk-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
}

.mya-perk-badge--active {
  background: rgba(39,174,96,0.12);
  color: #5ACB7E;
}

.mya-perk-badge--claimed {
  background: rgba(176,160,140,0.1);
  color: var(--muted, #B0A08C);
}

.mya-perk-badge--soon {
  background: rgba(249,175,54,0.12);
  color: var(--gold, #F9AF36);
}

.mya-perk-meter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 8px;
}

.mya-perk-meter-days {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted, #B0A08C);
  margin-left: 6px;
}

.mya-perk-meter {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.mya-perk-meter-fill {
  height: 100%;
  background: var(--gold, #F9AF36);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 4px;
}

.mya-perk-card-desc {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0;
  line-height: 1.55;
}

.mya-perk-card-action {
  margin-top: 12px;
  font-size: 13px;
  padding: 7px 14px;
}

/* ═══════════════════════════════════════════
   PERKS SUB-TABS
   ═══════════════════════════════════════════ */
.mya-perks-tabs {
  display: flex;
  gap: 3px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}

.mya-perks-tab {
  flex: 1;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted, #B0A08C);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-align: center;
}
.mya-perks-tab:hover {
  background: rgba(249,175,54,0.07);
  color: var(--text-1, #F0E6D4);
}
.mya-perks-tab.active {
  background: rgba(249,175,54,0.14);
  color: var(--gold, #F9AF36);
  box-shadow: inset 0 0 0 1px rgba(249,175,54,0.28);
}

/* ═══════════════════════════════════════════
   WELCOME GIFTS TAB
   ═══════════════════════════════════════════ */
.mya-gifts-list {
  display: flex;
  flex-direction: column;
}

.mya-gift-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(42,31,20,0.6);
}
.mya-gift-item:last-child { border-bottom: none; }

.mya-gift-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(92,61,26,0.8);
  color: var(--gold, #F9AF36);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mya-gift-info {
  flex: 1;
  min-width: 0;
}
.mya-gift-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 3px;
}
.mya-gift-meta {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  line-height: 1.4;
}

.mya-gift-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.mya-gift-badge--available {
  background: rgba(249,175,54,0.12);
  border: 1px solid rgba(249,175,54,0.3);
  color: var(--gold, #F9AF36);
}
.mya-gift-badge--redeemed {
  background: rgba(176,160,140,0.07);
  border: 1px solid rgba(176,160,140,0.22);
  color: var(--muted, #B0A08C);
}

/* Empty state */
.mya-gifts-empty {
  text-align: center;
  padding: 40px 20px;
}
.mya-gifts-empty-icon {
  color: var(--gold, #F9AF36);
  opacity: 0.4;
  margin-bottom: 14px;
}
.mya-gifts-empty-icon svg { width: 32px; height: 32px; }
.mya-gifts-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  margin: 0 0 8px;
}
.mya-gifts-empty-desc {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0;
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   TRAIL TAB
   ═══════════════════════════════════════════ */
.mya-trail-wrap {
  max-width: 480px;
}

.mya-trail-empty {
  color: var(--muted, #B0A08C);
  font-size: 14px;
  padding: 32px 0;
}

.mya-trail-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.mya-trail-stat {
  text-align: center;
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  padding: 16px 12px;
}

.mya-trail-stat-num {
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--gold, #F9AF36);
  line-height: 1;
  margin-bottom: 4px;
}

.mya-trail-stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
}

.mya-trail-progress {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  padding: 16px 18px;
}

.mya-trail-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted, #B0A08C);
  margin-bottom: 10px;
}

.mya-trail-progress-label span:first-child {
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
}

.mya-trail-bar {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.mya-trail-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8860B, var(--gold, #F9AF36));
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 4px;
}

/* ═══════════════════════════════════════════
   A1 — TRAIL PROGRESS CARD (dashboard widget)
   ═══════════════════════════════════════════ */

.mya-tp-counts {
  margin: 10px 0 8px;
  font-size: 14px;
  color: var(--text-1, #F0E6D4);
}
.mya-tp-visited {
  font-size: 22px;
  font-weight: 700;
  font-family: Georgia, serif;
  color: var(--gold, #F9AF36);
  line-height: 1;
}
.mya-tp-total {
  font-size: 16px;
  font-weight: 600;
}
.mya-tp-sep {
  color: var(--muted, #B0A08C);
}

.mya-tp-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mya-tp-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mya-tp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #B8860B, var(--gold, #F9AF36));
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 4px;
}
.mya-tp-pct {
  font-size: 11px;
  color: var(--muted, #B0A08C);
  white-space: nowrap;
  min-width: 30px;
  text-align: right;
}

.mya-tp-next {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2A1F14);
  font-size: 12px;
}
.mya-tp-next-label {
  color: var(--muted, #B0A08C);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  white-space: nowrap;
}
.mya-tp-next-name {
  color: var(--text-1, #F0E6D4);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   A3 — RECOMMENDED NEXT POUR CARD
   ═══════════════════════════════════════════ */

.mya-rec-body {
  margin-top: 10px;
}
.mya-rec-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  line-height: 1.3;
  margin-bottom: 8px;
}
.mya-rec-sub {
  display: inline-block;
  margin-bottom: 8px;
}
.mya-rec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.mya-rec-tag {
  background: rgba(249, 175, 54, 0.12);
  border: 1px solid rgba(249, 175, 54, 0.25);
  color: var(--gold, #F9AF36);
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 7px;
  text-transform: capitalize;
}
.mya-rec-reason {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  margin: 0 0 12px;
  line-height: 1.5;
}
.mya-rec-reason em {
  color: var(--text-1, #F0E6D4);
  font-style: normal;
  font-weight: 500;
}
.mya-rec-cta {
  display: inline-block;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   PROFILE FORM
   ═══════════════════════════════════════════ */
.mya-profile-wrap {
  max-width: 520px;
}

.mya-profile-form {
  margin-top: 4px;
}

.mya-profile-field {
  margin-bottom: 18px;
}

.mya-profile-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mya-profile-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted, #B0A08C);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.mya-profile-label-hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: rgba(176,160,140,0.7);
  margin-left: 6px;
}

.mya-profile-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 4px;
  color: var(--text-1, #F0E6D4);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 12px;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}

.mya-profile-input:focus {
  outline: none;
  border-color: var(--gold, #F9AF36);
  background: rgba(249,175,54,0.04);
}

/* Date input calendar icon tint */
.mya-profile-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(2) hue-rotate(5deg);
  cursor: pointer;
}

.mya-profile-field-err {
  font-size: 12px;
  color: #E8655A;
  margin-top: 4px;
  min-height: 16px;
}

.mya-profile-form-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #2A1F14);
}

@media (max-width: 480px) {
  .mya-profile-row--2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ── Install App (Settings → Profile) ─────── */
.mya-install-divider {
  margin: 28px 0 20px;
  border-top: 1px solid var(--border, #2A1F14);
}
.mya-install-title {
  font: 600 14px/1.3 Georgia, serif;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 8px;
}
.mya-install-hint {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin-bottom: 12px;
  line-height: 1.5;
}
.mya-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  background: transparent;
  color: var(--text-1, #F0E6D4);
  font: 500 13px/1 inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mya-btn-secondary:hover { border-color: var(--muted, #B0A08C); color: var(--text-1, #F0E6D4); }
.mya-btn-secondary:disabled { opacity: 0.5; cursor: default; }

/* ── Loading Spinner ──────────────────────── */
@keyframes mya-spin {
  to { transform: rotate(360deg); }
}

.mya-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(249, 175, 54, 0.18);
  border-top-color: var(--gold, #F9AF36);
  border-radius: 50%;
  animation: mya-spin 0.65s linear infinite;
  flex-shrink: 0;
}

.mya-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--muted, #B0A08C);
  font-size: 14px;
  text-align: center;
}

/* ── Trail stop list ─────────────────────── */
.mya-trail-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #2A1F14);
  margin: 20px 0 10px;
}

.mya-trail-section-title--planned { color: var(--gold, #F9AF36); }
.mya-trail-section-title--visited { color: #27ae60; }

.mya-trail-stop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42, 31, 20, 0.5);
}
.mya-trail-stop:last-child { border-bottom: none; }

.mya-trail-stop-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #0D0B08;
  margin-top: 2px;
}

.mya-trail-stop-info { flex: 1; min-width: 0; }

.mya-trail-stop-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  text-decoration: none;
  display: block;
}
.mya-trail-stop-name:hover { color: var(--gold, #F9AF36); }

.mya-trail-stop-loc {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}

.mya-trail-stop-visited {
  font-size: 11px;
  color: #27ae60;
  margin-top: 3px;
  font-weight: 500;
}

/* ════════════════════════════════════════════
   BACK OFFICE PANEL
   ════════════════════════════════════════════ */
.mya-bo-header {
  margin-bottom: 24px;
}
.mya-bo-title {
  font-size: 20px;
  font-family: Georgia, serif;
  color: var(--text-1, #F0E6D4);
  margin: 0 0 4px;
}
.mya-bo-sub {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0;
}
.mya-bo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mya-bo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(74, 144, 226, 0.06);
  border: 1px solid rgba(74, 144, 226, 0.18);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-1, #F0E6D4);
  transition: background 0.14s, border-color 0.14s;
}
.mya-bo-card:hover {
  background: rgba(74, 144, 226, 0.12);
  border-color: rgba(74, 144, 226, 0.38);
}
.mya-bo-card-icon {
  flex-shrink: 0;
  color: #4A90E2;
}
.mya-bo-card-body {
  flex: 1;
  min-width: 0;
}
.mya-bo-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mya-bo-card-desc {
  font-size: 11.5px;
  color: var(--muted, #B0A08C);
  margin-top: 2px;
}
.mya-bo-card-arrow {
  flex-shrink: 0;
  color: var(--muted, #B0A08C);
  opacity: 0.5;
}
.mya-bo-card:hover .mya-bo-card-arrow { opacity: 1; color: #4A90E2; }

@media (max-width: 600px) {
  .mya-bo-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   WHISKEY JOURNAL (Phase C)
   ════════════════════════════════════════════ */

/* ── Journal sub-tab nav ── */
.mya-journal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #2A1F14);
  margin-bottom: 20px;
}
.mya-journal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #B0A08C);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px 9px;
  transition: color 0.15s, border-color 0.15s;
}
.mya-journal-tab:hover { color: var(--text-1, #F0E6D4); }
.mya-journal-tab.active {
  border-bottom-color: var(--gold, #F9AF36);
  color: var(--gold, #F9AF36);
}
.mya-journal-tab:focus-visible {
  outline: 2px solid var(--gold, #F9AF36);
  outline-offset: 2px;
}

/* ── Journal sub-panels ── */
.mya-journal-sub--hidden { display: none; }

/* ── Filter bar ── */
.mya-jn-wrap { }
.mya-jn-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mya-jn-filters,
.mya-jn-sorts {
  display: flex;
  gap: 4px;
}
.mya-jn-filter-btn,
.mya-jn-sort-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 4px;
  color: var(--muted, #B0A08C);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 10px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mya-jn-filter-btn:hover,
.mya-jn-sort-btn:hover {
  color: var(--text-1, #F0E6D4);
  border-color: rgba(249, 175, 54, 0.4);
}
.mya-jn-filter-btn.active,
.mya-jn-sort-btn.active {
  background: rgba(249, 175, 54, 0.12);
  border-color: rgba(249, 175, 54, 0.4);
  color: var(--gold, #F9AF36);
  font-weight: 600;
}
.mya-jn-filter-btn:focus-visible,
.mya-jn-sort-btn:focus-visible {
  outline: 2px solid var(--gold, #F9AF36);
  outline-offset: 2px;
}

/* ── Search bar ── */
.mya-jn-search-wrap {
  margin-bottom: 14px;
}
.mya-jn-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 4px;
  color: var(--text-1, #F0E6D4);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.mya-jn-search:focus {
  border-color: var(--gold, #F9AF36);
  box-shadow: 0 0 0 2px rgba(249, 175, 54, 0.15);
}
.mya-jn-search::placeholder { color: var(--muted, #B0A08C); }

/* ── Journal entry list ── */
.mya-jn-list { }
.mya-jn-entry {
  border-bottom: 1px solid var(--border, #2A1F14);
  padding: 14px 0;
}
.mya-jn-entry:last-child { border-bottom: none; }

.mya-jn-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mya-jn-entry-left { flex: 1; min-width: 0; }
.mya-jn-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1, #F0E6D4);
  margin-bottom: 5px;
  line-height: 1.3;
}
.mya-jn-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mya-jn-date {
  font-size: 11px;
  color: var(--muted, #B0A08C);
}
.mya-jn-pos-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(74, 144, 226, 0.15);
  border: 1px solid rgba(74, 144, 226, 0.3);
  color: #4A90E2;
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Star rating ── */
.mya-jn-stars {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
}
.mya-jn-star {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 3px;
  transition: color 0.1s, transform 0.1s;
}
.mya-jn-star:hover { color: var(--gold, #F9AF36); transform: scale(1.15); }
.mya-jn-star--on   { color: var(--gold, #F9AF36); }
.mya-jn-star:focus-visible {
  outline: 2px solid var(--gold, #F9AF36);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ── Note area ── */
.mya-jn-note-area { margin-top: 10px; }
.mya-jn-note-display { margin-bottom: 2px; }
.mya-jn-note-text {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  font-style: italic;
  margin: 0 0 4px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Shared text button ── */
.mya-btn-text {
  background: none;
  border: none;
  color: var(--gold, #F9AF36);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mya-btn-text:hover { opacity: 0.8; }
.mya-btn-text:focus-visible {
  outline: 2px solid var(--gold, #F9AF36);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Inline note editor ── */
.mya-jn-editor { margin-top: 8px; }
.mya-jn-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--text-1, #F0E6D4);
  font-size: 13px;
  line-height: 1.55;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.mya-jn-textarea:focus {
  border-color: var(--gold, #F9AF36);
  box-shadow: 0 0 0 2px rgba(249, 175, 54, 0.12);
}
.mya-jn-textarea::placeholder { color: var(--muted, #B0A08C); font-style: italic; }
.mya-jn-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.mya-jn-save-btn {
  /* inherits from .mya-btn-primary but tighter */
  padding: 7px 14px;
  font-size: 12px;
}
.mya-jn-save-err {
  font-size: 12px;
  color: var(--err, #E8655A);
}
.mya-jn-empty { padding: 24px 0; }

/* ── Pours History sub-tab ── */
.mya-ph-wrap { }
.mya-ph-list { margin-top: 8px; }
.mya-ph-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border, #2A1F14);
}
.mya-ph-row:last-child { border-bottom: none; }
.mya-ph-date {
  font-size: 12px;
  color: var(--muted, #B0A08C);
  min-width: 100px;
  flex-shrink: 0;
}
.mya-ph-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mya-ph-name {
  font-size: 13px;
  color: var(--text-1, #F0E6D4);
  font-weight: 500;
}
.mya-ph-note-badge {
  font-size: 10px;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
  border: 1px solid rgba(39, 174, 96, 0.25);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .mya-jn-filter-bar  { gap: 8px; }
  .mya-jn-filters,
  .mya-jn-sorts       { flex-wrap: wrap; }
  .mya-ph-date        { min-width: 80px; font-size: 11px; }
}

/* ════════════════════════════════════════════
   SIDEBAR COLLECTION COUNTS WIDGET (Phase D)
   ════════════════════════════════════════════ */

.mya-coll-counts {
  border-top: 1px solid rgba(92,61,26,.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 4px;
  margin-top: 4px;
}
.mya-cc-row {
  align-items: center;
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 7px;
  padding: 5px 6px;
  text-align: left;
  transition: background .15s, color .15s;
  width: 100%;
}
.mya-cc-row:hover {
  background: rgba(249,175,54,.08);
  color: var(--text);
}
.mya-cc-row:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.mya-cc-row-icon {
  color: var(--gold);
  flex-shrink: 0;
  opacity: .7;
}
.mya-cc-label {
  flex: 1;
  letter-spacing: .01em;
}
.mya-cc-num {
  background: rgba(249,175,54,.12);
  border-radius: 10px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  padding: 1px 5px;
  text-align: center;
}

/* ════════════════════════════════════════════
   MY COLLECTION (Phase B)
   ════════════════════════════════════════════ */

/* Sub-tab nav — mirrors .mya-journal-tabs */
.mya-coll-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mya-coll-tab {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font: 13px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  padding: 10px 16px;
  position: relative;
  transition: color .15s;
}
.mya-coll-tab.active {
  color: var(--gold);
}
.mya-coll-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
.mya-coll-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.mya-coll-sub--hidden { display: none; }

/* Empty state */
.mya-coll-empty {
  padding: 32px 0;
  text-align: center;
}
.mya-coll-empty-msg {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 12px;
}
.mya-coll-browse-btn {
  color: var(--gold);
  font-size: 14px;
  text-decoration: none;
}
.mya-coll-browse-btn:hover { text-decoration: underline; }

/* Item list */
.mya-coll-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Single item row */
.mya-coll-item {
  align-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  transition: border-color .15s;
}
.mya-coll-item:hover { border-color: rgba(249,175,54,.25); }
.mya-coll-item-body {
  flex: 1;
  min-width: 0;
}
.mya-coll-item-name {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mya-coll-item-meta {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 3px;
}
.mya-coll-sub {
  color: var(--muted);
  font-size: 12px;
}
.mya-coll-priority {
  display: flex;
  gap: 2px;
  line-height: 1;
}
.mya-coll-dot {
  color: var(--border);
  font-size: 8px;
}
.mya-coll-dot--on { color: var(--gold); }
.mya-coll-item-date {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

/* Remove button */
.mya-coll-remove-btn {
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  opacity: .5;
  padding: 6px;
  transition: color .15s, opacity .15s;
}
.mya-coll-item:hover .mya-coll-remove-btn { opacity: 1; }
.mya-coll-remove-btn:hover  { color: #E8655A; }
.mya-coll-remove-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; opacity: 1; }

@media (max-width: 600px) {
  .mya-coll-item-name { font-size: 13px; }
  .mya-coll-tab       { padding: 8px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════
   REFER A FRIEND TAB (Phase E)
   ═══════════════════════════════════════════ */
.mya-ref-wrap {
  max-width: 540px;
}

/* How-it-works callout */
.mya-ref-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(249, 175, 54, 0.06);
  border: 1px solid rgba(249, 175, 54, 0.22);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.mya-ref-callout-icon {
  color: var(--gold, #F9AF36);
  flex-shrink: 0;
  margin-top: 1px;
}
.mya-ref-callout-text {
  font-size: 13.5px;
  color: var(--text-1, #F0E6D4);
  line-height: 1.55;
  margin: 0;
}
.mya-ref-callout-text strong {
  color: var(--gold, #F9AF36);
  font-weight: 600;
}

/* Referral link */
.mya-ref-link-wrap {
  margin-bottom: 24px;
}
.mya-ref-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
  margin-bottom: 8px;
}
.mya-ref-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mya-ref-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 4px;
  color: var(--text-1, #F0E6D4);
  font-size: 13px;
  padding: 9px 12px;
  font-family: inherit;
  cursor: text;
}
.mya-ref-input:focus {
  outline: none;
  border-color: rgba(249, 175, 54, 0.45);
}
.mya-ref-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--gold, #F9AF36);
  color: #0D0B08;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
  font-family: inherit;
}
.mya-ref-share-btn:hover { background: #ffcc5e; }
.mya-ref-share-btn:active { opacity: 0.85; }

.mya-ref-no-code {
  font-size: 13px;
  color: var(--muted, #B0A08C);
  margin: 0 0 24px;
}

/* Toast feedback */
.mya-ref-toast {
  min-height: 18px;
  font-size: 12px;
  margin-top: 8px;
  transition: opacity 0.2s;
}
.mya-ref-toast--ok  { color: #27ae60; }
.mya-ref-toast--err { color: #E8655A; }

/* Stats row */
.mya-ref-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #2A1F14);
  border-radius: 8px;
  padding: 18px 24px;
  margin-bottom: 28px;
}
.mya-ref-stat {
  flex: 1;
  text-align: center;
}
.mya-ref-stat-num {
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--gold, #F9AF36);
  line-height: 1;
  margin-bottom: 5px;
}
.mya-ref-stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
}
.mya-ref-stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(42, 31, 20, 0.8);
  flex-shrink: 0;
}

/* Referral list */
.mya-ref-list-wrap {
  margin-top: 4px;
}
.mya-ref-list-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #B0A08C);
  margin: 0 0 10px;
}
.mya-ref-list {
  display: flex;
  flex-direction: column;
}
.mya-ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(42, 31, 20, 0.5);
}
.mya-ref-row:last-child { border-bottom: none; }
.mya-ref-row-name {
  font-size: 14px;
  color: var(--text-1, #F0E6D4);
}
.mya-ref-row-date {
  font-size: 12px;
  color: var(--muted, #B0A08C);
}

@media (max-width: 480px) {
  .mya-ref-stats { padding: 14px 16px; }
  .mya-ref-stat-num { font-size: 22px; }
  .mya-ref-input-row { flex-direction: column; }
  .mya-ref-share-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   MOBILE FINE-TUNING  ≤ 480px
   Supplements the main ≤ 1023px block above.
   ════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Shell / cards ── */
  .mya-content { padding: 12px; }
  .mya-card    { padding: 14px; }

  /* ── Hero card ── */
  .mya-welcome      { font-size: 20px; }
  .mya-welcome-sub  { font-size: 10px; }
  .mya-hero-card    { padding: 16px; }
  .mya-hero-act-num { font-size: 24px; }
  .mya-hero-act-row { gap: 10px; }
  .mya-hero-act-stat { min-width: 36px; }

  /* ── Dashboard numbers ── */
  .mya-xp-big-num { font-size: 30px; }
  .mya-pours-num  { font-size: 32px; }

  /* ── Member Pass ── */
  .mya-pass-name { font-size: 17px; }

  /* ── Settings sub-tabs: tighter so all four fit ── */
  .mya-settings-tabs { padding: 3px; gap: 2px; }
  .mya-settings-tab  { padding: 8px 9px; font-size: 11.5px; }

  /* ── Perks sub-tabs ── */
  .mya-perks-tabs { padding: 3px; gap: 2px; }
  .mya-perks-tab  { padding: 8px 9px; font-size: 11.5px; }

  /* ── Communications rows: stack title above date+badge ── */
  .mya-comms-row       { flex-wrap: wrap; gap: 6px; }
  .mya-comms-row-right { flex-basis: 100%; justify-content: flex-start; padding-left: 36px; }

  /* ── Trail tab ── */
  .mya-trail-wrap { padding: 0; }

  /* ── Payment tab ── */
  .mya-pay-form-actions { flex-direction: column; gap: 8px; }
  .mya-btn-secondary,
  .mya-btn-cancel { width: 100%; justify-content: center; }

  /* ── Back Office cards: single column ── */
  .mya-bo-grid { grid-template-columns: 1fr; }

  /* ── Topbar ── */
  .mya-topbar-title { font-size: 13px; }
}