/* ============================================================
   Aniplay — app.css  |  Main Design System
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --color-void:    #080B12;
  --color-surface: #10141E;
  --color-raise:   #161C2A;
  --color-border:  rgba(255,255,255,0.06);
  --color-accent:  #FF6B35;
  --color-purple:  #C94FFF;
  --color-text:    #E8EAF0;
  --color-muted:   #6B7A8D;
  --color-dim:     #3A4556;
  --radius-card:   16px;
  --radius-sm:     8px;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);
  --nav-h:         64px;
  --transition:    0.2s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-void);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 1.1rem; font-weight: 600; }
h4 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }

.accent { color: var(--color-accent); }

/* ── Navigation ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,11,18,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}

.nav-bar { width: 100%; }

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}

.logo-text { color: var(--color-accent); }

.nav-links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}
.nav-links a {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
  background: rgba(255,255,255,0.06);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  text-decoration: none;
}

.badge-premium {
  font-size: 0.65rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem 1.25rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--color-muted);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.mobile-menu a:hover { background: var(--color-raise); color: var(--color-text); }
.mobile-cta {
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent);
  text-align: center;
  border-radius: 8px;
  margin-top: 8px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); text-decoration: none; color: #fff; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.btn-ghost:hover { background: var(--color-raise); border-color: rgba(255,255,255,0.12); text-decoration: none; color: var(--color-text); }

.btn-text {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.btn-text:hover { text-decoration: underline; }

.btn-sm  { padding: 7px 16px; font-size: 0.82rem; }
.btn-lg  { padding: 13px 28px; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }

/* ── Main content ─────────────────────────────────────────── */
.site-content { min-height: calc(100vh - var(--nav-h)); }
.main-content { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }

/* ── Sections ─────────────────────────────────────────────── */
.section { padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.section-dark { background: var(--color-surface); }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.see-all { font-size: 0.85rem; color: var(--color-accent); font-weight: 600; }
.see-all:hover { text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 5rem 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.25);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.hero-title { margin-bottom: 1rem; }
.hero-sub { font-size: 1.05rem; color: var(--color-muted); max-width: 460px; margin-bottom: 2rem; }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.hero-proof { display: flex; align-items: center; gap: 10px; }
.proof-avatars { display: flex; }
.proof-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-void);
  margin-right: -8px;
}
.proof-avatar.a { background: linear-gradient(135deg, #FF6B35, #ff9966); color: #fff; }
.proof-avatar.b { background: linear-gradient(135deg, #C94FFF, #a040d4); color: #fff; }
.proof-avatar.c { background: linear-gradient(135deg, #3ecfff, #0099cc); color: #fff; }
.proof-avatar.d { background: linear-gradient(135deg, #44ff88, #00bb55); color: #111; }
.proof-text { font-size: 0.8rem; color: var(--color-muted); margin-left: 16px; }

.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-card-stack { position: relative; width: 260px; height: 320px; }
.hcard {
  position: absolute;
  width: 180px; height: 240px;
  border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.hcard-1 { background: linear-gradient(135deg, #1e2840, #2a1a3a); top: 40px; left: 20px; z-index: 3; }
.hcard-2 { background: linear-gradient(135deg, #2a1a3a, #1a2a3a); top: 20px; left: 50px; z-index: 2; transform: rotate(5deg); }
.hcard-3 { background: linear-gradient(135deg, #1a2a1a, #2a2420); top: 60px; left: 70px; z-index: 1; transform: rotate(-5deg); }

/* ── Story Card ───────────────────────────────────────────── */
.scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-dim) transparent;
}
.scroll-row::-webkit-scrollbar { height: 4px; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }
.scroll-row::-webkit-scrollbar-thumb { background: var(--color-dim); border-radius: 2px; }

.story-card {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-cover {
  width: 160px; height: 210px;
  border-radius: var(--radius-card);
  background: var(--color-raise);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition);
}
.card-cover:hover { transform: scale(1.03); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }

.card-meta { padding: 0 2px; }
.card-genre { font-size: 0.7rem; color: var(--color-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.card-title { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text); line-height: 1.3; margin-top: 3px; text-decoration: none; }
.card-title:hover { text-decoration: underline; }

/* ── Custom Monogram Badges ───────────────────────────────── */
.cover-code {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800;
  color: rgba(255,255,255,0.18);
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--color-surface), var(--color-raise));
  user-select: none;
}

.story-cover-code {
  width: 220px; height: 280px;
  border-radius: var(--radius-card);
  font-size: 3rem;
}

.mono-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--color-raise);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  user-select: none;
}

.ti-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,107,53,0.12);
  border-radius: 6px;
  font-size: 0.55rem;
  font-weight: 800;
  color: var(--color-accent);
}

.avatar-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.author-code {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-purple), #8822cc);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: -0.02em;
  user-select: none;
}

/* ── Authors Row / Grid ───────────────────────────────────── */
.authors-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.author-chip a {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 40px;
  padding: 8px 16px 8px 8px;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.author-chip a:hover { border-color: var(--color-accent); background: var(--color-raise); }
.chip-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 0.65rem;
}
.chip-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }

.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.author-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.author-card:hover { transform: translateY(-3px); border-color: rgba(255,107,53,0.3); }

.author-card-link {
  display: block;
  text-align: center;
  padding: 1.5rem 1rem;
  text-decoration: none;
  color: var(--color-text);
}
.author-card-link:hover { text-decoration: none; color: var(--color-text); }

.author-card-avatar {
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.1rem;
}
.author-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.author-bio { font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; }
.author-story-count { display: inline-block; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--color-accent); }

/* ── Story Banner ─────────────────────────────────────────── */
.story-banner {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 1.5rem;
}
.story-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
.story-cover {
  flex-shrink: 0;
  width: 220px; height: 280px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-raise);
  display: flex; align-items: center; justify-content: center;
}
.story-cover img { width: 100%; height: 100%; object-fit: cover; }

.story-genres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.genre-tag {
  background: rgba(201,79,255,0.1);
  border: 1px solid rgba(201,79,255,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-purple);
  text-decoration: none;
}
.genre-tag:hover { background: rgba(201,79,255,0.18); text-decoration: none; color: var(--color-purple); }

.story-title { margin: 0.75rem 0; }

.story-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.story-author .author-code { width: 28px; height: 28px; border-radius: 50%; font-size: 0.55rem; }
.story-author a { color: var(--color-text); font-weight: 600; }

.story-info-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-raise);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.story-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Episode List ─────────────────────────────────────────── */
.episode-section h2 { margin-bottom: 1.25rem; }

.episode-list { display: flex; flex-direction: column; gap: 0.5rem; }

.episode-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  transition: background var(--transition);
  cursor: pointer;
}
.episode-item:hover:not(.episode-locked) { background: var(--color-raise); }
.episode-locked { opacity: 0.5; cursor: default; }

.ep-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-raise);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ep-info { flex: 1; }
.ep-info strong { display: block; font-size: 0.9rem; font-weight: 600; }
.ep-dur { font-size: 0.75rem; color: var(--color-muted); margin-top: 2px; }
.ep-play-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.ep-play-btn:hover { opacity: 0.85; }
.ep-lock { color: var(--color-dim); }

.locked-cta {
  margin-top: 1.5rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

/* ── Page hero ────────────────────────────────────────────── */
.page-hero {
  text-align: center;
  padding: 4rem 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border);
}
.page-hero p { color: var(--color-muted); margin-top: 0.5rem; }

/* ── CTA section ──────────────────────────────────────────── */
.cta-section { text-align: center; }
.cta-inner {
  background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(201,79,255,0.08));
  border: 1px solid rgba(255,107,53,0.2);
  border-radius: 24px;
  padding: 4rem 2rem;
}
.cta-inner h2 { margin-bottom: 0.5rem; }
.cta-inner p { color: var(--color-muted); margin-bottom: 2rem; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { color: var(--color-muted); font-size: 0.9rem; padding: 2rem 0; }

/* ── Dashboard ────────────────────────────────────────────── */
.dashboard-page { padding-top: 0; }
.dashboard-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--nav-h));
}

.dash-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 2rem 1.25rem;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}

.dash-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.dash-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dash-profile-info strong { display: block; font-size: 0.92rem; }

.plan-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}
.plan-badge--free    { background: rgba(255,255,255,0.08); color: var(--color-muted); }
.plan-badge--premium { background: linear-gradient(135deg, var(--color-accent), var(--color-purple)); color: #fff; }
.plan-badge--pending { background: rgba(255,200,50,0.15); color: #ffc832; }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-link {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.dash-nav-link:hover,
.dash-nav-link.active { background: var(--color-raise); color: var(--color-text); text-decoration: none; }
.dash-nav-upgrade { color: var(--color-accent) !important; }
.dash-nav-logout  { color: var(--color-dim) !important; margin-top: 1rem; }
.dash-nav-logout:hover { color: #ff5555 !important; }

.dash-content { padding: 2.5rem; }
.dash-heading { margin-bottom: 1.75rem; }
.dash-tab { display: none; }
.dash-tab.active { display: block; }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num  { font-size: 1.6rem; font-weight: 700; }
.stat-label{ font-size: 0.78rem; color: var(--color-muted); }

.dash-section { margin-bottom: 2.5rem; }
.dash-section h3 { margin-bottom: 1rem; }

.membership-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.membership-card--premium { border-color: rgba(255,107,53,0.3); background: rgba(255,107,53,0.04); }
.membership-card p { font-size: 0.85rem; color: var(--color-muted); margin-top: 4px; }
.membership-icon .mono-icon { width: 40px; height: 40px; font-size: 0.7rem; flex-shrink: 0; }

.continue-list { display: flex; flex-direction: column; gap: 0.75rem; }
.continue-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.continue-item .cover-code {
  width: 44px; height: 56px;
  border-radius: 8px;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.continue-info { flex: 1; }
.continue-info a { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.progress-bar { height: 3px; background: var(--color-raise); border-radius: 2px; margin-top: 6px; }
.progress-bar span { display: block; height: 100%; background: var(--color-accent); border-radius: 2px; }

.profile-info-grid { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.88rem;
}
.info-row span { color: var(--color-muted); }
.info-row strong { color: var(--color-text); }

.upgrade-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2rem;
  max-width: 400px;
}
.upgrade-features { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.upgrade-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.upgrade-price { text-align: center; margin-bottom: 1.5rem; }
.price-amount { font-size: 2.5rem; font-weight: 700; color: var(--color-accent); }
.price-period { font-size: 0.9rem; color: var(--color-muted); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 3rem 1.5rem 0;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.75rem;
  max-width: 280px;
}

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.footer-col a {
  font-size: 0.85rem;
  color: var(--color-muted);
  transition: color var(--transition);
  text-decoration: none;
}
.footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-bottom p { font-size: 0.8rem; color: var(--color-dim); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dashboard-wrap { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--color-border); }
  .dash-nav { flex-direction: row; flex-wrap: wrap; }
  .dash-stats { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding: 3rem 1rem 2rem; gap: 2rem; }
  .hero-visual { display: none; }
  .hero-actions { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .nav-links { display: none; }
  .nav-right { display: none; }
  .hamburger { display: flex; }
  .story-banner-inner { flex-direction: column; }
  .story-cover { width: 100%; height: 220px; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-content { padding: 1.5rem 1rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  * { transition: none !important; animation: none !important; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 480px) {
  .section { padding: 2rem 1rem; }
  .dash-stats { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .story-actions { flex-direction: column; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   ANIPLAY — ADDITIONS: Player, Cards, Author Pages, Hero
   ============================================================= */

/* ── CSS Custom Icon Helpers ──────────────────────────────────── */
.icon-chip { vertical-align: -1px; opacity: .75; flex-shrink: 0; }

/* ── Story Card Improvements ─────────────────────────────────── */
.story-card { flex-shrink:0; width:160px; display:flex; flex-direction:column; gap:8px; }
@media (min-width:768px) { .story-card { width:180px; } }
.card-cover {
  position:relative; display:block; aspect-ratio:2/3;
  border-radius:var(--radius); overflow:hidden;
  background:var(--color-surface); text-decoration:none; color:inherit;
}
.card-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.story-card:hover .card-cover img { transform:scale(1.04); }
.card-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.story-card:hover .card-overlay { opacity:1; }
.card-play-btn {
  width:44px; height:44px; border-radius:50%;
  background:var(--color-accent); display:flex; align-items:center; justify-content:center;
  padding-left:3px;
}
.card-meta { display:flex; flex-direction:column; gap:3px; padding:0 2px; }
.card-genre { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent); }
.card-title {
  font-size:.9rem; font-weight:700; line-height:1.3; color:var(--color-text);
  text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-title:hover { color:var(--color-accent); }
.card-eps { font-size:.7rem; color:var(--color-text-muted); }

/* story-card-grid: for author profile page grid */
.stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; }
.story-card-grid { width:auto; }
@media (min-width:640px)  { .stories-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }
@media (min-width:1024px) { .stories-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }

/* ── Genre Pills Section ─────────────────────────────────────── */
.genre-pills { display:flex; flex-wrap:wrap; gap:10px; }
.genre-pill {
  display:inline-block; padding:8px 18px; border-radius:100px;
  border:1px solid rgba(255,255,255,.12); color:var(--color-text);
  text-decoration:none; font-size:.85rem; font-weight:600;
  transition:background .2s, border-color .2s, color .2s;
}
.genre-pill:hover { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }

/* ── Hero Improvements ───────────────────────────────────────── */
.hero-has-bg { position:relative; }
.hero-bg-overlay {
  pointer-events:none;
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--color-void) 45%, transparent 100%);
  z-index:1;
}
.hero-inner { position:relative; z-index:2; }
.hero-text-col { flex:1; }
.hero-now-playing { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); margin-bottom:6px; }
.hero-story-meta { display:flex; gap:8px; flex-wrap:wrap; margin:.6rem 0 1.2rem; }
.hero-cover-card {
  position:relative; width:220px; flex-shrink:0;
  border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.hero-cover-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-cover-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s;
}
.hero-cover-card:hover .hero-cover-play { opacity:1; }
.hero-cover-play a {
  width:56px; height:56px; border-radius:50%; background:var(--color-accent);
  display:flex; align-items:center; justify-content:center; padding-left:3px; text-decoration:none;
}
.hero-cover-play svg { color:#fff; }

/* ── Story Banner tagline ────────────────────────────────────── */
.story-tagline { font-size:1rem; color:var(--color-text-muted); margin:.3rem 0 .8rem; font-style:italic; }
.story-author-chip { display:flex; align-items:center; gap:8px; margin-bottom:.8rem; }
.story-author-chip .author-code.sm { width:28px; height:28px; font-size:.65rem; }
.story-author-chip a { color:var(--color-text); text-decoration:none; font-size:.9rem; font-weight:600; }
.story-author-chip a:hover { color:var(--color-accent); }
.icon-chip { margin-right:3px; }

/* ── Episode Item (Playing state) ────────────────────────────── */
.episode-item.episode-playing { background:rgba(255,107,53,.08); border-color:var(--color-accent) !important; }
.episode-item.episode-playing .ep-num { color:var(--color-accent); }
.ep-dur { display:inline-flex; align-items:center; gap:3px; }
.ep-dur svg { opacity:.6; }

/* ── Author Card Improvements ────────────────────────────────── */
.author-card { background:var(--color-surface); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s; }
.author-card:hover { transform:translateY(-3px); }
.author-card-link { display:flex; flex-direction:column; text-decoration:none; color:var(--color-text); height:100%; }
.author-card-avatar { aspect-ratio:1; overflow:hidden; background:var(--color-surface-2); display:flex; align-items:center; justify-content:center; }
.author-card-avatar img { width:100%; height:100%; object-fit:cover; }
.author-code { background:linear-gradient(135deg,var(--color-accent),var(--color-purple)); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; }
.author-card-body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.author-card-name { font-size:1rem; font-weight:700; margin:0; }
.author-card-tagline { font-size:.8rem; color:var(--color-text-muted); margin:0; line-height:1.4; }
.author-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-block; padding:2px 9px; border-radius:100px; font-size:.7rem; font-weight:600; border:1px solid rgba(255,255,255,.14); }
.tag-genre { border-color:rgba(255,107,53,.4); color:var(--color-accent); }
.tag-lang  { border-color:rgba(201,79,255,.4); color:var(--color-purple); }
.author-story-count { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; color:var(--color-text-muted); margin-top:auto; }
.author-story-count svg { opacity:.7; }

/* ── Author Chip (homepage row) ──────────────────────────────── */
.author-chip a { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--color-text); }
.chip-avatar { width:68px; height:68px; font-size:1.1rem; }
.chip-avatar.has-img { border-radius:50%; overflow:hidden; }
.chip-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chip-name { font-size:.85rem; font-weight:700; text-align:center; }
.chip-genre { font-size:.7rem; color:var(--color-accent); text-align:center; }

/* ── Author Profile Page ─────────────────────────────────────── */
.author-profile-hero { padding:60px 0 40px; }
.author-profile-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;
}
.author-profile-avatar {
  width:140px; height:140px; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:var(--color-surface-2); display:flex; align-items:center; justify-content:center;
}
.author-profile-avatar .apt-img { width:100%; height:100%; object-fit:cover; }
.apt-code { width:100%; height:100%; font-size:2.5rem; font-weight:800; background:linear-gradient(135deg,var(--color-accent),var(--color-purple)); color:#fff; display:flex; align-items:center; justify-content:center; }
.author-profile-text { flex:1; min-width:220px; }
.author-profile-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.author-profile-name { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; margin:0 0 6px; }
.author-profile-tagline { font-size:1.05rem; color:var(--color-accent); font-style:italic; margin-bottom:14px; }
.author-profile-bio { font-size:.95rem; line-height:1.7; color:var(--color-text-muted); margin-bottom:20px; max-width:600px; }
.author-profile-stats { display:flex; gap:28px; margin-bottom:20px; }
.stat-item { display:flex; flex-direction:column; gap:2px; }
.stat-num { font-size:1.8rem; font-weight:800; color:var(--color-accent); line-height:1; }
.stat-label { font-size:.78rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; }
.author-profile-social { display:flex; gap:14px; flex-wrap:wrap; }
.social-link { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--color-text-muted); font-size:.88rem; padding:6px 14px; border-radius:100px; border:1px solid rgba(255,255,255,.12); transition:all .2s; }
.social-link:hover { border-color:var(--color-accent); color:var(--color-accent); }
@media (max-width:640px) {
  .author-profile-inner { flex-direction:column; align-items:center; text-align:center; }
  .author-profile-tags, .author-profile-stats, .author-profile-social { justify-content:center; }
  .author-profile-bio { text-align:left; }
  .author-profile-avatar { width:110px; height:110px; }
}

/* ── Authors Grid ─────────────────────────────────────────────── */
.authors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
@media (min-width:640px)  { .authors-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }
@media (min-width:1024px) { .authors-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }

/* ── Authors Row (homepage) ───────────────────────────────────── */
.authors-row { display:flex; gap:24px; flex-wrap:wrap; }

/* ── Locked CTA ───────────────────────────────────────────────── */
.locked-cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px; border-radius:var(--radius); background:var(--color-surface); border:1px solid rgba(255,255,255,.08); margin-top:16px; }
.locked-cta p { margin:0; font-size:.9rem; color:var(--color-text-muted); flex:1; }
.locked-cta svg { opacity:.6; flex-shrink:0; }

/* ── Sticky Audio Player ──────────────────────────────────────── */
.an-player {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:rgba(12,15,22,.96); backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:12px var(--gutter);
}
.an-player.visible { transform:translateY(0); }
.an-player-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid; align-items:center; gap:16px;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
@media (max-width:640px) {
  .an-player-inner { grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:8px; }
  .an-player-info { order:1; }
  .an-player-controls { order:2; justify-self:center; }
  .an-player-progress { order:3; }
}
.an-player-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.an-player-ep-num { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); }
.an-player-title { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color-text); }
.an-player-controls { display:flex; align-items:center; gap:10px; }
.an-player-btn {
  background:none; border:none; cursor:pointer; color:var(--color-text);
  display:flex; align-items:center; justify-content:center; padding:4px;
  opacity:.75; transition:opacity .2s, transform .15s; border-radius:50%;
}
.an-player-btn:hover { opacity:1; transform:scale(1.1); }
.an-play-pause {
  width:44px; height:44px; background:var(--color-accent) !important;
  border-radius:50%; opacity:1 !important; padding-left:2px;
}
.an-play-pause:hover { transform:scale(1.08) !important; background:var(--color-accent-dark,#e55a25) !important; }
.an-skip-btn { opacity:.6; }
.an-player-progress { display:flex; align-items:center; gap:10px; }
.an-time { font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--color-text-muted); white-space:nowrap; min-width:34px; }
.an-time:last-child { text-align:right; }
.an-seek {
  flex:1; -webkit-appearance:none; appearance:none;
  height:3px; border-radius:99px; background:rgba(255,255,255,.15); cursor:pointer; outline:none;
}
.an-seek::-webkit-slider-runnable-track { height:3px; border-radius:99px; }
.an-seek::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--color-accent);
  margin-top:-5.5px; cursor:pointer; transition:transform .15s;
}
.an-seek:hover::-webkit-slider-thumb { transform:scale(1.3); }
.an-seek::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--color-accent); border:none; cursor:pointer; }
.an-seek::-moz-range-track { height:3px; border-radius:99px; background:rgba(255,255,255,.15); }

/* Push content up so player doesn't obscure bottom episodes */
body:has(.an-player.visible) .episode-section { padding-bottom:90px; }
body:has(.an-player.visible) footer { margin-bottom:72px; }

/* =============================================================
   ANIPLAY — ADDITIONS: Player, Cards, Author Pages, Hero
   ============================================================= */

/* ── CSS Custom Icon Helpers ──────────────────────────────────── */
.icon-chip { vertical-align: -1px; opacity: .75; flex-shrink: 0; }

/* ── Story Card Improvements ─────────────────────────────────── */
.story-card { flex-shrink:0; width:160px; display:flex; flex-direction:column; gap:8px; }
@media (min-width:768px) { .story-card { width:180px; } }
.card-cover {
  position:relative; display:block; aspect-ratio:2/3;
  border-radius:var(--radius); overflow:hidden;
  background:var(--color-surface); text-decoration:none; color:inherit;
}
.card-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.story-card:hover .card-cover img { transform:scale(1.04); }
.card-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s;
}
.story-card:hover .card-overlay { opacity:1; }
.card-play-btn {
  width:44px; height:44px; border-radius:50%;
  background:var(--color-accent); display:flex; align-items:center; justify-content:center;
  padding-left:3px;
}
.card-meta { display:flex; flex-direction:column; gap:3px; padding:0 2px; }
.card-genre { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--color-accent); }
.card-title {
  font-size:.9rem; font-weight:700; line-height:1.3; color:var(--color-text);
  text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-title:hover { color:var(--color-accent); }
.card-eps { font-size:.7rem; color:var(--color-text-muted); }

/* story-card-grid: for author profile page grid */
.stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; }
.story-card-grid { width:auto; }
@media (min-width:640px)  { .stories-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } }
@media (min-width:1024px) { .stories-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } }

/* ── Genre Pills Section ─────────────────────────────────────── */
.genre-pills { display:flex; flex-wrap:wrap; gap:10px; }
.genre-pill {
  display:inline-block; padding:8px 18px; border-radius:100px;
  border:1px solid rgba(255,255,255,.12); color:var(--color-text);
  text-decoration:none; font-size:.85rem; font-weight:600;
  transition:background .2s, border-color .2s, color .2s;
}
.genre-pill:hover { background:var(--color-accent); border-color:var(--color-accent); color:#fff; }

/* ── Hero Improvements ───────────────────────────────────────── */
.hero-has-bg { position:relative; }
.hero-bg-overlay {
  pointer-events:none;
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--color-void) 45%, transparent 100%);
  z-index:1;
}
.hero-inner { position:relative; z-index:2; }
.hero-text-col { flex:1; }
.hero-now-playing { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-accent); margin-bottom:6px; }
.hero-story-meta { display:flex; gap:8px; flex-wrap:wrap; margin:.6rem 0 1.2rem; }
.hero-cover-card {
  position:relative; width:220px; flex-shrink:0;
  border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.hero-cover-card img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-cover-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); opacity:0; transition:opacity .25s;
}
.hero-cover-card:hover .hero-cover-play { opacity:1; }
.hero-cover-play a {
  width:56px; height:56px; border-radius:50%; background:var(--color-accent);
  display:flex; align-items:center; justify-content:center; padding-left:3px; text-decoration:none;
}
.hero-cover-play svg { color:#fff; }

/* ── Story Banner tagline ────────────────────────────────────── */
.story-tagline { font-size:1rem; color:var(--color-text-muted); margin:.3rem 0 .8rem; font-style:italic; }
.story-author-chip { display:flex; align-items:center; gap:8px; margin-bottom:.8rem; }
.story-author-chip .author-code.sm { width:28px; height:28px; font-size:.65rem; }
.story-author-chip a { color:var(--color-text); text-decoration:none; font-size:.9rem; font-weight:600; }
.story-author-chip a:hover { color:var(--color-accent); }
.icon-chip { margin-right:3px; }

/* ── Episode Item (Playing state) ────────────────────────────── */
.episode-item.episode-playing { background:rgba(255,107,53,.08); border-color:var(--color-accent) !important; }
.episode-item.episode-playing .ep-num { color:var(--color-accent); }
.ep-dur { display:inline-flex; align-items:center; gap:3px; }
.ep-dur svg { opacity:.6; }

/* ── Author Card Improvements ────────────────────────────────── */
.author-card { background:var(--color-surface); border-radius:var(--radius-lg); overflow:hidden; transition:transform .25s; }
.author-card:hover { transform:translateY(-3px); }
.author-card-link { display:flex; flex-direction:column; text-decoration:none; color:var(--color-text); height:100%; }
.author-card-avatar { aspect-ratio:1; overflow:hidden; background:var(--color-surface-2); display:flex; align-items:center; justify-content:center; }
.author-card-avatar img { width:100%; height:100%; object-fit:cover; }
.author-code { background:linear-gradient(135deg,var(--color-accent),var(--color-purple)); color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; }
.author-card-body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.author-card-name { font-size:1rem; font-weight:700; margin:0; }
.author-card-tagline { font-size:.8rem; color:var(--color-text-muted); margin:0; line-height:1.4; }
.author-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.tag { display:inline-block; padding:2px 9px; border-radius:100px; font-size:.7rem; font-weight:600; border:1px solid rgba(255,255,255,.14); }
.tag-genre { border-color:rgba(255,107,53,.4); color:var(--color-accent); }
.tag-lang  { border-color:rgba(201,79,255,.4); color:var(--color-purple); }
.author-story-count { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; color:var(--color-text-muted); margin-top:auto; }
.author-story-count svg { opacity:.7; }

/* ── Author Chip (homepage row) ──────────────────────────────── */
.author-chip a { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--color-text); }
.chip-avatar { width:68px; height:68px; font-size:1.1rem; }
.chip-avatar.has-img { border-radius:50%; overflow:hidden; }
.chip-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.chip-name { font-size:.85rem; font-weight:700; text-align:center; }
.chip-genre { font-size:.7rem; color:var(--color-accent); text-align:center; }

/* ── Author Profile Page ─────────────────────────────────────── */
.author-profile-hero { padding:60px 0 40px; }
.author-profile-inner {
  max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap;
}
.author-profile-avatar {
  width:140px; height:140px; flex-shrink:0; border-radius:50%; overflow:hidden;
  background:var(--color-surface-2); display:flex; align-items:center; justify-content:center;
}
.author-profile-avatar .apt-img { width:100%; height:100%; object-fit:cover; }
.apt-code { width:100%; height:100%; font-size:2.5rem; font-weight:800; background:linear-gradient(135deg,var(--color-accent),var(--color-purple)); color:#fff; display:flex; align-items:center; justify-content:center; }
.author-profile-text { flex:1; min-width:220px; }
.author-profile-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.author-profile-name { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; margin:0 0 6px; }
.author-profile-tagline { font-size:1.05rem; color:var(--color-accent); font-style:italic; margin-bottom:14px; }
.author-profile-bio { font-size:.95rem; line-height:1.7; color:var(--color-text-muted); margin-bottom:20px; max-width:600px; }
.author-profile-stats { display:flex; gap:28px; margin-bottom:20px; }
.stat-item { display:flex; flex-direction:column; gap:2px; }
.stat-num { font-size:1.8rem; font-weight:800; color:var(--color-accent); line-height:1; }
.stat-label { font-size:.78rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.06em; }
.author-profile-social { display:flex; gap:14px; flex-wrap:wrap; }
.social-link { display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--color-text-muted); font-size:.88rem; padding:6px 14px; border-radius:100px; border:1px solid rgba(255,255,255,.12); transition:all .2s; }
.social-link:hover { border-color:var(--color-accent); color:var(--color-accent); }
@media (max-width:640px) {
  .author-profile-inner { flex-direction:column; align-items:center; text-align:center; }
  .author-profile-tags, .author-profile-stats, .author-profile-social { justify-content:center; }
  .author-profile-bio { text-align:left; }
  .author-profile-avatar { width:110px; height:110px; }
}

/* ── Authors Grid ─────────────────────────────────────────────── */
.authors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; }
@media (min-width:640px)  { .authors-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } }
@media (min-width:1024px) { .authors-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }

/* ── Authors Row (homepage) ───────────────────────────────────── */
.authors-row { display:flex; gap:24px; flex-wrap:wrap; }

/* ── Locked CTA ───────────────────────────────────────────────── */
.locked-cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:20px; border-radius:var(--radius); background:var(--color-surface); border:1px solid rgba(255,255,255,.08); margin-top:16px; }
.locked-cta p { margin:0; font-size:.9rem; color:var(--color-text-muted); flex:1; }
.locked-cta svg { opacity:.6; flex-shrink:0; }

/* ── Sticky Audio Player ──────────────────────────────────────── */
.an-player {
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  background:rgba(12,15,22,.96); backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:12px var(--gutter);
}
.an-player.visible { transform:translateY(0); }
.an-player-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid; align-items:center; gap:16px;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
@media (max-width:640px) {
  .an-player-inner { grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:8px; }
  .an-player-info { order:1; }
  .an-player-controls { order:2; justify-self:center; }
  .an-player-progress { order:3; }
}
.an-player-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.an-player-ep-num { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); }
.an-player-title { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color-text); }
.an-player-controls { display:flex; align-items:center; gap:10px; }
.an-player-btn {
  background:none; border:none; cursor:pointer; color:var(--color-text);
  display:flex; align-items:center; justify-content:center; padding:4px;
  opacity:.75; transition:opacity .2s, transform .15s; border-radius:50%;
}
.an-player-btn:hover { opacity:1; transform:scale(1.1); }
.an-play-pause {
  width:44px; height:44px; background:var(--color-accent) !important;
  border-radius:50%; opacity:1 !important; padding-left:2px;
}
.an-play-pause:hover { transform:scale(1.08) !important; background:var(--color-accent-dark,#e55a25) !important; }
.an-skip-btn { opacity:.6; }
.an-player-progress { display:flex; align-items:center; gap:10px; }
.an-time { font-size:.72rem; font-variant-numeric:tabular-nums; color:var(--color-text-muted); white-space:nowrap; min-width:34px; }
.an-time:last-child { text-align:right; }
.an-seek {
  flex:1; -webkit-appearance:none; appearance:none;
  height:3px; border-radius:99px; background:rgba(255,255,255,.15); cursor:pointer; outline:none;
}
.an-seek::-webkit-slider-runnable-track { height:3px; border-radius:99px; }
.an-seek::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--color-accent);
  margin-top:-5.5px; cursor:pointer; transition:transform .15s;
}
.an-seek:hover::-webkit-slider-thumb { transform:scale(1.3); }
.an-seek::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--color-accent); border:none; cursor:pointer; }
.an-seek::-moz-range-track { height:3px; border-radius:99px; background:rgba(255,255,255,.15); }

/* Push content up so player doesn't obscure bottom episodes */
body:has(.an-player.visible) .episode-section { padding-bottom:90px; }
body:has(.an-player.visible) footer { margin-bottom:72px; }

/* =============================================================
   ANIPLAY � v2 FIXES: Variables, Hero, Player, Author Chip
   ============================================================= */

/* -- 1. Missing CSS variable definitions ------------------------ */
:root {
  --color-text:        #E8EAF0;
  --color-text-muted:  #6B7A8D;
  --color-surface-2:   #161C2A;
  --radius:            16px;
  --radius-lg:         20px;
  --max-w:             1200px;
  --gutter:            1.5rem;
}

/* -- 2. Hero layout fix: .hero is grid(1fr 1fr) but now has    --
        .hero-bg-overlay + .hero-inner as children, pushing text
        to right column. Fix: make .hero block, .hero-inner grid. */
.hero {
  display: block !important;
  padding: 0 !important;
  max-width: none !important;
  position: relative;
}
.hero-has-bg {
  min-height: 520px;
}
.hero-bg-overlay {
  position: absolute !important;
  inset: 0;
  background: linear-gradient(90deg, var(--color-void) 40%, rgba(8,11,18,.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  display: flex !important;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.hero-text-col {
  flex: 1;
  min-width: 260px;
}
.hero-visual { flex-shrink: 0; }

/* -- 3. Hero with no cover: keep card-stack visible -------------- */
.hero:not(.hero-has-bg) .hero-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* -- 4. Author chip on story page: force 32�32 circle ------------ */
.story-author-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: .8rem !important;
}
.story-author-chip .author-code,
.story-author-chip span.author-code {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  border-radius: 50% !important;
  font-size: 0.6rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple)) !important;
  color: #fff !important;
}

/* -- 5. Player: triple-hidden until .visible ---------------------- */
.an-player {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(8,11,18,.97) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding: 14px 1.5rem !important;
  transform: translateY(100%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .3s ease,
              visibility 0s linear .35s !important;
}
.an-player.visible {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .3s ease,
              visibility 0s linear 0s !important;
}
.an-player-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  align-items: center !important;
  gap: 20px !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1.2fr) !important;
}
@media (max-width:600px) {
  .an-player-inner {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
  }
  .an-player-info    { order: 1 !important; }
  .an-player-controls{ order: 2 !important; justify-self: center !important; }
  .an-player-progress{ order: 3 !important; }
}
.an-player-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
.an-player-ep-num {
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--color-accent) !important;
}
.an-player-title {
  font-size: .9rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #E8EAF0 !important;
}
.an-player-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.an-player-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #E8EAF0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  opacity: .7 !important;
  transition: opacity .2s, transform .15s !important;
  border-radius: 50% !important;
}
.an-player-btn:hover { opacity: 1 !important; transform: scale(1.1) !important; }
.an-play-pause {
  width: 46px !important;
  height: 46px !important;
  background: var(--color-accent) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  padding: 0 !important;
  padding-left: 3px !important;
}
.an-play-pause:hover {
  transform: scale(1.08) !important;
  background: #e55a22 !important;
}
.an-player-progress {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.an-time {
  font-size: .72rem !important;
  font-variant-numeric: tabular-nums !important;
  color: #6B7A8D !important;
  white-space: nowrap !important;
  min-width: 34px !important;
}
.an-time:last-child { text-align: right !important; }
.an-seek {
  flex: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.18) !important;
  cursor: pointer !important;
  outline: none !important;
}
.an-seek::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 99px !important;
}
.an-seek::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--color-accent) !important;
  margin-top: -5px !important;
  cursor: pointer !important;
  transition: transform .15s !important;
}
.an-seek:hover::-webkit-slider-thumb { transform: scale(1.3) !important; }
.an-seek::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--color-accent) !important;
  border: none !important;
}

/* -- 6. Story card: ensure titles are visible --------------------- */
.card-title {
  color: #E8EAF0 !important;
  text-decoration: none !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-top: 3px !important;
}
.card-title:hover { color: var(--color-accent) !important; }
.card-genre {
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--color-accent) !important;
}
.card-eps { font-size: .7rem !important; color: #6B7A8D !important; }
.card-cover {
  position: relative !important;
  aspect-ratio: 2/3 !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #161C2A !important;
}
.card-cover img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; border-radius:12px !important; }

/* -- 7. Author cards fix ------------------------------------------ */
.author-card-avatar {
  aspect-ratio: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #161C2A !important;
}
.author-card-avatar .author-code {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  font-size: 1.8rem !important;
  max-width: none !important;
}
.author-card-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.author-card-name { font-size: 1rem !important; font-weight: 700 !important; }
.author-card-tagline { font-size: .8rem !important; color: #6B7A8D !important; line-height: 1.45 !important; }

/* -- 8. Body padding for fixed player ------------------------------ */
body:has(.an-player.visible) { padding-bottom: 82px; }

/* =============================================================
   ANIPLAY — v3 HOME PAGE REDESIGN
   ============================================================= */

/* ── Cinematic Full-Bleed Hero ───────────────────────────────── */
.home-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-void);
}

/* Blurred full-bleed background from cover art */
.home-hero__blur {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center top;
  filter: blur(60px) saturate(0.6);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  transform: scale(1.12);
}

/* Gradient overlay: strong on left, fades right */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(8,11,18,0.98) 0%,
    rgba(8,11,18,0.92) 40%,
    rgba(8,11,18,0.60) 70%,
    rgba(8,11,18,0.30) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Bottom fade — blends hero into next section */
.home-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-void));
  z-index: 2;
  pointer-events: none;
}

.home-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 4.5rem 2rem 5rem;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.home-hero__text {
  flex: 1;
  min-width: 0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.hero-eyebrow svg { color: var(--color-accent); flex-shrink: 0; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }

.home-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  color: #fff;
}

.home-hero__tagline {
  font-size: 1.05rem;
  color: rgba(232,234,240,0.75);
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.hchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(232,234,240,0.8);
  backdrop-filter: blur(4px);
}
.hchip--orange { border-color: rgba(255,107,53,0.5); color: var(--color-accent); }
.hchip--purple { border-color: rgba(201,79,255,0.5); color: var(--color-purple); }

.home-hero__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ── Cover card: 3D book-like styling ───────────────────────── */
.home-hero__visual {
  flex-shrink: 0;
}

.home-cover-card {
  display: block;
  position: relative;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    -6px 6px 0px rgba(0,0,0,0.5),
    0 24px 60px rgba(0,0,0,0.7),
    0 8px 20px rgba(0,0,0,0.5);
  transform: perspective(800px) rotateY(-10deg) rotateX(2deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
}
.home-cover-card:hover {
  transform: perspective(800px) rotateY(-3deg) rotateX(0deg) scale(1.03);
  box-shadow:
    -4px 4px 0px rgba(0,0,0,0.4),
    0 32px 80px rgba(0,0,0,0.6),
    0 12px 30px rgba(0,0,0,0.4);
  text-decoration: none;
}
.home-cover-card img {
  width: 200px;
  height: 280px;
  object-fit: cover;
  display: block;
}
.home-cover-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.25s;
  color: #fff;
}
.home-cover-card:hover .home-cover-card__play { opacity: 1; }
.home-cover-card__play > * { padding-left: 3px; }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,0.25);
  animation: bounce-down 2s ease-in-out infinite;
}
@keyframes bounce-down { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* Hero responsive */
@media (max-width: 768px) {
  .home-hero__inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: 2rem;
    padding: 3rem 1.5rem 4rem;
  }
  .home-hero__text { display: flex; flex-direction: column; align-items: center; }
  .home-hero__tagline { max-width: 100%; }
  .hero-chips { justify-content: center; }
  .home-hero__actions { justify-content: center; }
  .hero-proof { justify-content: center; }
  .home-cover-card {
    width: 140px;
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  }
  .home-cover-card img { width: 140px; height: 196px; }
  .home-hero { min-height: 500px; }
}

/* ── Stats Bar ───────────────────────────────────────────────── */
.home-stats-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.home-stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.hstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0.6rem 2.5rem;
  flex: 1;
  min-width: 120px;
}
.hstat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hstat-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.hstat-divider {
  width: 1px;
  height: 36px;
  background: var(--color-border);
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hstat-divider { display: none; }
  .hstat { min-width: 50%; border-bottom: 1px solid var(--color-border); }
  .hstat:nth-child(n+5) { border-bottom: none; }
}

/* ── How it Works Section ────────────────────────────────────── */
.how-section {}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 640px) {
  .how-grid { grid-template-columns: 1fr; }
}

.how-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: border-color 0.25s, transform 0.25s;
}
.how-step:hover {
  border-color: rgba(255,107,53,0.35);
  transform: translateY(-3px);
}
.how-num {
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(255,107,53,0.18);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1rem;
}
.how-step h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--color-text);
}
.how-step p {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── App Promo Section ───────────────────────────────────────── */
.app-promo-section {}
.app-promo-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,107,53,0.07) 0%, rgba(201,79,255,0.07) 100%);
  border: 1px solid rgba(255,107,53,0.18);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .app-promo-inner { grid-template-columns: 1fr; gap: 2rem; }
  .app-promo-visual { display: none; }
}
.app-promo-text h2 { margin-bottom: 0.75rem; }
.app-promo-text p { color: var(--color-muted); font-size: 0.95rem; max-width: 480px; line-height: 1.65; }

.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-raise);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: default;
  opacity: 0.7;
}

/* Phone mock illustration */
.phone-mock {
  width: 140px;
  background: #0d1117;
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,0.1);
  padding: 16px 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.phone-screen {
  background: var(--color-surface);
  border-radius: 16px;
  overflow: hidden;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phone-mini-player {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--color-raise);
  border-radius: 8px;
  padding: 6px;
}
.pmp-cover {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  flex-shrink: 0;
}
.pmp-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pmp-title {
  font-size: 0.55rem; font-weight: 700;
  color: var(--color-text); white-space: nowrap; overflow: hidden;
}
.pmp-bar {
  height: 2px; background: var(--color-border); border-radius: 1px;
  position: relative;
}
.pmp-bar::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 45%; height: 100%; background: var(--color-accent); border-radius: 1px;
}
.pmp-play { font-size: 0.6rem; color: var(--color-accent); flex-shrink: 0; }
.phone-mini-list { display: flex; flex-direction: column; gap: 5px; }
.pml-row {
  height: 7px; border-radius: 4px; background: var(--color-raise);
}
.pml-row--1 { width: 100%; }
.pml-row--2 { width: 80%; }
.pml-row--3 { width: 90%; }
.pml-row--4 { width: 65%; }

/* ============================================================
   ANIPLAY — Homepage v4 "Kahani Duniya"
   All classes prefixed hp- for zero conflict
   ============================================================ */

/* ── Base helpers ─────────────────────────────────────────── */
.hp { display: block; }
.hp-accent { color: var(--color-accent); font-style: normal; }
.hp-h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.hp-sub  { font-size: 0.87rem; color: var(--color-muted); margin: 5px 0 0; }
.hp-see-all {
  font-size: 0.84rem; font-weight: 700;
  color: var(--color-accent); text-decoration: none; flex-shrink: 0;
}
.hp-see-all:hover { text-decoration: underline; }

/* ── § 1  SOUNDSCAPE HERO ─────────────────────────────────── */
.hp-sc {
  position: relative;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-void);
}

/* Blurred ambient art BG */
.hp-sc-blur {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(90px) saturate(0.45);
  opacity: 0.26;
  transform: scale(1.12);
  pointer-events: none;
}

/* Animated wave strip at bottom */
.hp-sc-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.hp-wave-svg {
  width: 200%; height: 100%;
  animation: hpWaveScroll 24s linear infinite;
}
@keyframes hpWaveScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Dark ink overlay */
.hp-sc-ink {
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(8,11,18,0.97) 0%, rgba(8,11,18,0.72) 55%, rgba(8,11,18,0.28) 100%),
    linear-gradient(180deg, transparent 45%, rgba(8,11,18,0.96) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom void fade */
.hp-sc-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 100px;
  background: linear-gradient(to bottom, transparent, var(--color-void));
  z-index: 3; pointer-events: none;
}

/* Inner layout */
.hp-sc-inner {
  position: relative; z-index: 4;
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 5rem 2rem 7rem;
  flex: 1;
}

/* ── Kicker badge ── */
.hp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,53,0.08);
  border: 1px solid rgba(255,107,53,0.22);
  border-radius: 100px;
  padding: 6px 14px 6px 10px;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.4rem;
}
.hp-kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: hpPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hpPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.35; transform:scale(0.55); }
}

/* ── Hero text ── */
.hp-sc-text { flex: 1; min-width: 0; }
.hp-sc-title {
  font-size: clamp(2.1rem, 5.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 0.9rem;
}
.hp-sc-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: rgba(232,234,240,0.68);
  line-height: 1.68;
  max-width: 480px;
  margin: 0 0 1.2rem;
}

/* ── Tags ── */
.hp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1.8rem; }
.hp-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--color-muted);
}
.hp-tag--o { border-color:rgba(255,107,53,.5); color:var(--color-accent); background:rgba(255,107,53,.08); }
.hp-tag--p { border-color:rgba(201,79,255,.5); color:var(--color-purple); background:rgba(201,79,255,.08); }

/* ── Action buttons ── */
.hp-sc-btns { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.hp-btn-play {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-accent); color: #fff;
  font-weight: 700; font-size: 0.95rem;
  padding: 12px 26px; border-radius: 12px; border: none;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 22px rgba(255,107,53,0.42);
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.hp-btn-play:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,107,53,.52); text-decoration:none; color:#fff; }
.hp-btn-play--lg { padding:15px 32px; font-size:1rem; border-radius:14px; }

.hp-btn-play__ring {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.hp-btn-ghost {
  display: inline-flex; align-items: center;
  color: rgba(232,234,240,.75); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; transition: color .2s;
}
.hp-btn-ghost:hover { color: #fff; text-decoration: none; }

/* ── Proof bar ── */
.hp-proof { display: flex; align-items: center; gap: 12px; }
.hp-proof-faces { display: flex; }
.hp-proof-faces span {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800; color: #fff;
  border: 2px solid var(--color-void);
  margin-right: -8px; flex-shrink: 0;
}
.hp-proof p { font-size: 0.8rem; color: var(--color-muted); margin: 0; padding-left: 16px; }
.hp-proof strong { color: var(--color-text); }

/* ── Vinyl record visual ── */
.hp-vinyl {
  position: relative;
  flex-shrink: 0;
  width: 250px; height: 310px;
  display: flex; align-items: center; justify-content: center;
}
.hp-vinyl__disc {
  position: absolute;
  right: -44px; top: 50%;
  transform: translateY(-50%);
  width: 210px; height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 28%, #222 29%, #111 55%, #1c1c1c 56%, #0e0e0e 100%);
  animation: hpVinyl 12s linear infinite;
  box-shadow: 0 0 50px rgba(0,0,0,0.9);
}
@keyframes hpVinyl {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
.hp-vinyl__groove,
.hp-vinyl__groove--2 {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.04);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.hp-vinyl__groove    { width: 60%; height: 60%; }
.hp-vinyl__groove--2 { width: 82%; height: 82%; }
.hp-vinyl__label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900; color: #fff; letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(255,107,53,0.6);
}

/* Cover art on vinyl */
.hp-vinyl__cover {
  position: relative; z-index: 2; display: block;
  width: 200px; height: 264px; border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07);
  transform: perspective(700px) rotateY(-8deg);
  transition: transform .4s ease;
  text-decoration: none;
}
.hp-vinyl__cover:hover { transform: perspective(700px) rotateY(0deg) scale(1.02); }
.hp-vinyl__cover img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-vinyl__play {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
}
.hp-vinyl__cover:hover .hp-vinyl__play { opacity: 1; }

/* Ep1 chip */
.hp-ep1 {
  position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.3);
  color: var(--color-accent);
  font-size: 0.7rem; font-weight: 700;
  padding: 5px 13px; border-radius: 100px; white-space: nowrap;
}

/* Placeholder card stack (no cover) */
.hp-stack {
  position: relative; flex-shrink: 0;
  width: 220px; height: 280px;
}
.hp-stack__card {
  position: absolute;
  width: 170px; height: 220px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.hp-stack__card--1 { top: 30px; left: 25px; z-index: 3; display:flex; align-items:center; justify-content:center; }
.hp-stack__card--2 { top: 16px; left: 44px; z-index: 2; transform: rotate(5deg); opacity: .6; }
.hp-stack__card--3 { top: 44px; left: 10px; z-index: 1; transform: rotate(-4deg); opacity: .4; }

/* ── § 2  TICKER STRIP ────────────────────────────────────── */
.hp-ticker {
  background: var(--color-surface);
  border-top: 1px solid rgba(255,107,53,0.12);
  border-bottom: 1px solid var(--color-border);
  padding: 0.7rem 2rem;
}
.hp-ticker__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.hp-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22cc88;
  box-shadow: 0 0 7px rgba(34,204,136,.8);
  animation: hpPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hp-ticker__text {
  font-size: 0.8rem; color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-ticker__text strong { color: var(--color-text); }

/* ── § 3  STORY REEL ──────────────────────────────────────── */
.hp-reel { padding: 3rem 0 2rem; }
.hp-reel__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 2rem 1.25rem; max-width: 1200px; margin: 0 auto;
}
.hp-reel__wrap { position: relative; padding-left: 2rem; }
.hp-reel__row {
  display: flex; gap: 0.875rem;
  overflow-x: auto; padding-bottom: 1.25rem; padding-right: 2rem;
  scrollbar-width: thin; scrollbar-color: var(--color-dim) transparent;
  -webkit-overflow-scrolling: touch;
}
.hp-reel__row::-webkit-scrollbar       { height: 3px; }
.hp-reel__row::-webkit-scrollbar-thumb { background: var(--color-dim); border-radius: 2px; }
.hp-reel__fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 80px;
  background: linear-gradient(to right, transparent, var(--color-void));
  pointer-events: none; z-index: 2;
}

/* Story card */
.hp-card { flex: 0 0 148px; display: flex; flex-direction: column; gap: 0.6rem; }
.hp-card__cover {
  position: relative; display: block;
  width: 148px; height: 198px; border-radius: 12px;
  overflow: hidden; background: var(--color-surface);
  text-decoration: none;
  transition: transform .25s;
}
.hp-card__cover:hover { transform: translateY(-4px); }
.hp-card__cover img  { width:100%; height:100%; object-fit:cover; display:block; }
.hp-card__mono {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:900; color:rgba(255,255,255,.13);
  background: linear-gradient(135deg, var(--color-surface), var(--color-raise));
}
.hp-card__overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.44);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .22s;
}
.hp-card__cover:hover .hp-card__overlay { opacity:1; }
.hp-card__free {
  position:absolute; top:7px; left:7px;
  background:rgba(34,204,136,.88); color:#fff;
  font-size:.58rem; font-weight:800;
  padding:2px 7px; border-radius:4px; letter-spacing:.07em;
}
.hp-card__meta  { padding: 0 2px; }
.hp-card__genre {
  font-size:.63rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--color-accent); display:block; margin-bottom:3px;
}
.hp-card__title {
  display:block; font-size:.85rem; font-weight:700;
  color:var(--color-text); line-height:1.3; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* =============================================================
   LANGUAGE TOGGLE
   ============================================================= */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--color-raise, rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-muted, #8899aa);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: var(--color-accent, #FF6B35);
  color: var(--color-text, #e8eaf0);
}
.lang-toggle-sep {
  opacity: 0.4;
  margin: 0 1px;
}
/* Highlight active language segment */
body.lang-hi .lang-toggle-hi,
body:not(.lang-hi) .lang-toggle-en {
  color: var(--color-accent, #FF6B35);
}

/* Bilingual strings — smooth swap */
.lang-str {
  transition: opacity 0.12s ease;
}

/* =============================================================
   DESCRIPTION COLLAPSE / READ MORE
   ============================================================= */
.story-desc-wrap {
  position: relative;
}
.story-desc-content {
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-desc-wrap.expanded .story-desc-content {
  max-height: 4000px;
}
.story-desc-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--color-void, #080B12));
  pointer-events: none;
  transition: opacity 0.3s;
}
.story-desc-wrap.expanded .story-desc-fade {
  opacity: 0;
  pointer-events: none;
}
.story-desc-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--color-accent, #FF6B35);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.story-desc-expand-btn:hover {
  background: rgba(255,107,53,0.08);
  border-color: var(--color-accent, #FF6B35);
}
/* On desktop, description is readable enough — only collapse on mobile */
@media (min-width: 768px) {
  .story-desc-content { max-height: none; }
  .story-desc-fade    { display: none; }
  .story-desc-expand-btn { display: none; }
}

/* =============================================================
   EPISODE FILTER BAR
   ============================================================= */
.ep-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}
.ep-jump-input {
  width: 130px;
  background: var(--color-surface, #111826);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--color-text, #e8eaf0);
  padding: 7px 12px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
  /* hide browser number spinner arrows */
  -moz-appearance: textfield;
}
.ep-jump-input::-webkit-outer-spin-button,
.ep-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ep-jump-input:focus {
  border-color: var(--color-accent, #FF6B35);
}
.ep-filter-hint {
  font-size: 0.78rem;
  color: var(--color-muted, #8899aa);
  min-width: 80px;
}
/* Highlight the scrolled-to episode */
.episode-item.ep-highlight {
  border-color: var(--color-accent, #FF6B35) !important;
  box-shadow: 0 0 0 2px rgba(255,107,53,0.25);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.hp-card__title:hover { color:var(--color-accent); }
.hp-card__eps { font-size:.68rem; color:var(--color-muted); display:block; margin-top:2px; }

/* ── § 4  GENRE UNIVERSE ──────────────────────────────────── */
.hp-genres {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3.5rem 2rem;
}
.hp-genres__inner { max-width: 1200px; margin: 0 auto; }
.hp-genres__head  { text-align: center; margin-bottom: 2rem; }
.hp-genres__grid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.875rem;
}
.hp-orb {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 1.2rem 0.75rem;
  background: var(--color-raise);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
  position: relative; overflow: hidden;
}
.hp-orb::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,107,53,.14) 0%, transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.hp-orb:hover { border-color:rgba(255,107,53,.4); transform:translateY(-3px); text-decoration:none; }
.hp-orb:hover::before { opacity: 1; }
.hp-orb__icon  { font-size: 1.75rem; line-height: 1; }
.hp-orb__name  { font-size:.82rem; font-weight:700; color:var(--color-text); text-align:center; }
.hp-orb__count { font-size:.66rem; color:var(--color-muted); }

/* ── § 5  HOW IT WORKS ────────────────────────────────────── */
.hp-how { padding: 4rem 2rem; }
.hp-how__inner { max-width: 1100px; margin: 0 auto; }
.hp-how__inner > .hp-h2 { margin-bottom: 2.5rem; }
.hp-how__steps {
  display: flex; align-items: flex-start; gap: 0;
}
.hp-step {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  transition: border-color .2s, transform .2s;
}
.hp-step:hover { border-color:rgba(255,107,53,.25); transform:translateY(-3px); }
.hp-step__bubble {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,107,53,.14), rgba(201,79,255,.1));
  border: 2px solid rgba(255,107,53,.28);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; position: relative;
}
.hp-step__num {
  font-size: 0.7rem; font-weight: 900; color: var(--color-accent);
  position: absolute; top: -6px; right: -6px;
  background: var(--color-void);
  border: 1px solid rgba(255,107,53,.3);
  border-radius: 100px; padding: 1px 6px;
  line-height: 1.5;
}
.hp-step__icon { color: rgba(255,255,255,.55); }
.hp-step h3 { font-size:.98rem; font-weight:700; margin-bottom:.5rem; }
.hp-step p  { font-size:.86rem; color:var(--color-muted); line-height:1.65; margin:0; }

.hp-step__connector {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 0 0.25rem; margin-top: 26px;
}

/* ── § 6  LEKHAK / AUTHORS ────────────────────────────────── */
.hp-lekhak {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 3.5rem 2rem;
}
.hp-lekhak__inner { max-width: 1200px; margin: 0 auto; }
.hp-lekhak__head  {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 2rem;
}
.hp-lekhak__head .hp-sub { flex-basis:100%; }
.hp-lekhak__row { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.hp-author {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; width: 88px;
  transition: transform .2s;
}
.hp-author:hover { transform: translateY(-3px); text-decoration: none; }
.hp-author__ring {
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
}
.hp-author__avatar {
  width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
  background: var(--color-raise);
  border: 2px solid var(--color-void);
  display: flex; align-items: center; justify-content: center;
}
.hp-author__avatar img { width:100%; height:100%; object-fit:cover; }
.hp-author__avatar span {
  font-size:.95rem; font-weight:900;
  color: var(--color-accent); letter-spacing:-.02em;
}
.hp-author__name  { font-size:.8rem; font-weight:700; color:var(--color-text); text-align:center; display:block; line-height:1.3; }
.hp-author__genre { font-size:.68rem; color:var(--color-accent); text-align:center; display:block; }

/* ── § 7  CTA ─────────────────────────────────────────────── */
.hp-cta {
  position: relative; padding: 5.5rem 2rem;
  text-align: center; overflow: hidden;
  background: var(--color-void);
}
.hp-cta__ring {
  position: absolute; border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.hp-cta__ring--1 { width:500px; height:500px; border:1px solid rgba(255,107,53,.07); }
.hp-cta__ring--2 { width:780px; height:780px; border:1px solid rgba(201,79,255,.05); }
.hp-cta__ring--3 { width:1060px; height:1060px; border:1px solid rgba(255,107,53,.03); }
.hp-cta__body   { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.hp-cta__eyebrow {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--color-accent); margin-bottom:1rem;
}
.hp-cta__title {
  font-size:clamp(1.8rem, 4vw, 2.9rem); font-weight:900;
  letter-spacing:-.04em; line-height:1.15; margin-bottom:.9rem;
}
.hp-cta__sub { font-size:1rem; color:var(--color-muted); line-height:1.65; margin-bottom:2rem; }
.hp-cta__btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hp-sc-inner { flex-direction: column; text-align: center; padding: 3rem 1.5rem 5rem; gap: 2.5rem; }
  .hp-sc-text  { display:flex; flex-direction:column; align-items:center; }
  .hp-sc-sub   { margin-left:auto; margin-right:auto; }
  .hp-sc-btns  { justify-content:center; }
  .hp-proof    { justify-content:center; }
  .hp-vinyl    { order:-1; width:200px; height:240px; }
  .hp-vinyl__cover { width:170px; height:220px; }
  .hp-vinyl__disc  { width:170px; height:170px; right:-34px; }
  .hp-how__steps { flex-direction:column; gap:1rem; }
  .hp-step__connector { transform:rotate(90deg); margin:0 auto -0.5rem; }
  .hp-genres__grid { grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); }
}
@media (max-width: 640px) {
  .hp-sc { min-height: auto; }
  .hp-sc-title { font-size:2rem; }
  .hp-reel__head  { padding:0 1rem 1rem; }
  .hp-reel__wrap  { padding-left:1rem; }
  .hp-reel__row   { padding-right:1rem; }
  .hp-card        { flex:0 0 132px; }
  .hp-card__cover { width:132px; height:176px; }
  .hp-genres { padding:3rem 1.25rem; }
  .hp-genres__grid { grid-template-columns:repeat(3,1fr); gap:.65rem; }
  .hp-orb__icon { font-size:1.5rem; }
  .hp-how  { padding:2.5rem 1.25rem; }
  .hp-lekhak { padding:2.5rem 1.25rem; }
  .hp-lekhak__row { gap:1rem; }
  .hp-author { width:76px; }
  .hp-author__avatar { width:58px; height:58px; }
  .hp-cta { padding:4rem 1.25rem; }
  .hp-cta__ring { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-vinyl__disc, .hp-wave-svg, .hp-kicker-dot, .hp-live-dot { animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES — Privacy, Terms, Copyright
 ══════════════════════════════════════════════════════════════ */
.legal-main { background: var(--bg, #0d0d0f); min-height: 80vh; padding: 40px 16px 80px; }
.legal-wrap { max-width: 820px; margin: 0 auto; }

.legal-header { margin-bottom: 36px; }
.legal-badge  { display: inline-block; background: rgba(255,107,53,.12); color: #FF6B35;
                font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                padding: 4px 10px; border-radius: 20px; margin-bottom: 12px; }
.legal-header h1 { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.legal-meta  { font-size: 13px; color: #64748b; }

.legal-body  { color: #cbd5e1; line-height: 1.8; font-size: 15px; }
.legal-body section { margin-bottom: 36px; }
.legal-body h2 { font-size: 18px; font-weight: 700; color: #f1f5f9; margin: 0 0 14px;
                 padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.legal-body h3 { font-size: 15px; font-weight: 600; color: #e2e8f0; margin: 16px 0 8px; }
.legal-body p  { margin: 0 0 14px; }
.legal-body ul,
.legal-body ol { padding-left: 20px; margin: 0 0 14px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: #f1f5f9; }
.legal-body a  { color: #FF6B35; text-decoration: underline; }
.legal-body a:hover { color: #ff9966; }
.legal-body address { font-style: normal; background: rgba(255,107,53,.06); border: 1px solid rgba(255,107,53,.2);
                      border-radius: 8px; padding: 16px 20px; margin-top: 12px; line-height: 1.9; }

.legal-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
             margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07);
             font-size: 13px; color: #64748b; }
.legal-nav a { color: #FF6B35; text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-nav span { opacity: .4; }


/* ══════════════════════════════════════════════════════════════
   PREMIUM / PAYMENT PAGE  (.pay-*)
 ══════════════════════════════════════════════════════════════ */

/* layout */
.pay-main { max-width: 880px; margin: 0 auto; padding: 60px 20px 80px; }
.pay-hero  { text-align: center; margin-bottom: 48px; }
.pay-hero__inner h1 { font-size: 2rem; font-weight: 700; margin: 0 0 10px; }
.pay-hero__inner p  { color: #94a3b8; font-size: 1rem; margin: 0; }

/* premium-already badge */
.pay-badge         { display: inline-block; background: #1e293b; border: 1px solid #334155;
                     border-radius: 999px; padding: 4px 16px; font-size: .8rem;
                     margin-bottom: 14px; color: #94a3b8; }
.pay-badge--gold   { border-color: #f59e0b; color: #f59e0b; }
.pay-active-until  { font-size: .85rem; color: #64748b; margin-top: 6px; }
.pay-autopay-on    { color: #22c55e; font-size: .85rem; font-weight: 600; margin-top: 6px; }
.pay-autopay-note  { color: #64748b; font-size: .8rem; margin-top: 4px; }

/* plan cards */
.pay-plans { display: flex; gap: 24px; justify-content: center;
             flex-wrap: wrap; margin-bottom: 56px; }
.pay-plan  { background: #0f172a; border: 1px solid #1e293b; border-radius: 16px;
             padding: 32px 28px; width: 340px; position: relative; }
.pay-plan--premium { border-color: #FF6B35; }
.pay-plan__rec     { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
                     background: #FF6B35; color: #fff; font-size: .72rem; font-weight: 700;
                     padding: 3px 14px; border-radius: 999px; white-space: nowrap; }
.pay-plan__head    { text-align: center; margin-bottom: 20px; }
.pay-plan__head h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 6px; }
.pay-plan__price   { display: flex; align-items: baseline; gap: 4px;
                     justify-content: center; }
.pay-price-num     { font-size: 2.4rem; font-weight: 800; }
.pay-price-period  { font-size: .85rem; color: #64748b; }

/* feature list */
.pay-features      { list-style: none; padding: 0; margin: 0 0 24px; }
.pay-features li   { padding: 8px 0; border-bottom: 1px solid #1e293b;
                     font-size: .9rem; color: #94a3b8; }
.pay-features li:last-child { border-bottom: none; }
.pay-features li.ok::before { content: '✓  '; color: #22c55e; font-weight: 700; }
.pay-features li.no::before { content: '✗  '; color: #ef4444; font-weight: 700; }

/* buttons */
.pay-btn           { display: block; width: 100%; padding: 13px 0;
                     font-size: 1rem; font-weight: 600; border: none;
                     border-radius: 10px; cursor: pointer; transition: opacity .15s; }
.pay-btn:disabled  { opacity: .6; cursor: not-allowed; }
.pay-btn--primary  { background: #FF6B35; color: #fff; }
.pay-btn--primary:hover:not(:disabled) { opacity: .85; }
.pay-btn--outline  { background: transparent; border: 1px solid #334155;
                     color: #94a3b8; }
.pay-current       { text-align: center; color: #64748b; font-size: .85rem;
                     padding: 13px 0; }
.pay-hint          { text-align: center; font-size: .75rem; color: #475569;
                     margin-top: 10px; }
.pay-status        { text-align: center; margin-top: 12px; font-size: .85rem;
                     color: #f59e0b; min-height: 20px; }

/* generic section wrapper */
.pay-section          { margin-bottom: 64px; }
.pay-section__inner   { max-width: 780px; margin: 0 auto; }
.pay-section h2       { font-size: 1.4rem; font-weight: 700; margin: 0 0 28px;
                        text-align: center; }

/* autopay steps */
.pay-steps           { display: flex; gap: 16px; align-items: flex-start;
                       flex-wrap: wrap; justify-content: center; }
.pay-step            { flex: 1; min-width: 180px; max-width: 220px;
                       text-align: center; }
.pay-step__num       { width: 40px; height: 40px; border-radius: 50%;
                       background: #FF6B35; color: #fff; font-weight: 700;
                       font-size: 1rem; display: flex; align-items: center;
                       justify-content: center; margin: 0 auto 10px; }
.pay-step strong     { display: block; font-size: .9rem; margin-bottom: 4px; }
.pay-step p          { font-size: .8rem; color: #64748b; margin: 0; }
.pay-step__arrow     { color: #334155; font-size: 1.4rem; margin-top: 6px;
                       align-self: center; }

/* FAQ */
.pay-faq          { max-width: 640px; margin: 0 auto; }
.pay-faq__item    { border-bottom: 1px solid #1e293b; }
.pay-faq__q       { display: flex; justify-content: space-between;
                   align-items: center; padding: 16px 4px; cursor: pointer;
                   font-size: .95rem; font-weight: 500; user-select: none; }
.pay-faq__icon    { font-size: 1.2rem; color: #FF6B35; transition: transform .2s; }
.pay-faq__item.open .pay-faq__icon { transform: rotate(45deg); }
.pay-faq__a       { display: none; padding: 0 4px 16px;
                    font-size: .85rem; color: #94a3b8; line-height: 1.65; }
.pay-faq__item.open .pay-faq__a { display: block; }

/* contact section */
.pay-contact-section { text-align: center; }
.pay-contact-section p { color: #64748b; font-size: .9rem; margin: 0 0 10px; }
.pay-contact-section a { color: #FF6B35; text-decoration: none; }
.pay-contact-section a:hover { text-decoration: underline; }

/* responsive */
@media (max-width: 640px) {
  .pay-plans  { flex-direction: column; align-items: center; }
  .pay-plan   { width: 100%; max-width: 380px; }
  .pay-steps  { flex-direction: column; align-items: center; }
  .pay-step__arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   GLASSMORPHISM DESIGN SYSTEM  — Dashboard, Auth, Premium
   Mobile-first. No API keys or secrets in CSS.
 ══════════════════════════════════════════════════════════════ */

/* ── Glass tokens ──────────────────────────────────────────── */
:root {
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-bg-mid:  rgba(255,255,255,0.07);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-border-hover: rgba(255,255,255,0.14);
  --glass-blur:    blur(20px);
  --gold:          #f59e0b;
  --gold-dim:      rgba(245,158,11,0.15);
  --gold-border:   rgba(245,158,11,0.35);
  --green-ok:      #22c55e;
  --radius-glass:  18px;
  --shadow-glass:  0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow:   0 0 24px rgba(255,107,53,0.12);
}

/* ── Premium top banner ──────────────────────────────────────── */
.dash-premium-bar {
  background: linear-gradient(90deg, rgba(245,158,11,0.15) 0%, rgba(251,191,36,0.08) 100%);
  border-bottom: 1px solid var(--gold-border);
  padding: 10px 20px;
}
.dash-premium-bar__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: .82rem; color: #fbbf24;
}
.dash-premium-bar__star { display: flex; align-items: center; }
.dash-premium-bar__until { color: rgba(251,191,36,0.7); }
.dash-premium-bar__badge {
  background: rgba(245,158,11,0.2); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 2px 10px; font-size: .74rem;
}

/* ── Dashboard layout ────────────────────────────────────────── */
.dash-main { min-height: calc(100vh - var(--nav-h)); }

.dash-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

@media (min-width: 768px) {
  .dash-layout {
    flex-direction: row;
    gap: 24px;
    padding: 32px 24px 80px;
    align-items: flex-start;
  }
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.dash-sidebar {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .dash-sidebar { width: 240px; position: sticky; top: calc(var(--nav-h) + 16px); }
}

/* ── Profile card ─────────────────────────────────────────────── */
.dash-profile-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 20px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color var(--transition);
}
.dash-profile-card--premium {
  border-color: var(--gold-border);
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, var(--glass-bg) 100%);
  box-shadow: 0 0 32px var(--gold-dim);
}

.dash-avatar-wrap { position: relative; flex-shrink: 0; }

.dash-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#FF6B35,#C94FFF);
  font-weight: 700; font-size: 1rem; color: #fff;
  letter-spacing: .04em;
}

.dash-avatar-crown {
  position: absolute; bottom: -4px; right: -4px;
  background: #1a1228; border: 1px solid var(--gold-border);
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}

.dash-profile-info { min-width: 0; }
.dash-profile-info strong { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-plan-badge {
  display: inline-block; margin-top: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
}
.dash-plan-badge--free     { background: rgba(107,122,141,0.2); color: #94a3b8; border: 1px solid rgba(107,122,141,0.3); }
.dash-plan-badge--premium  { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold-border); }

/* ── Dashboard nav ────────────────────────────────────────────── */
.dash-nav {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Horizontal scrollable on mobile */
@media (max-width: 767px) {
  .dash-nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    padding: 8px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
}

.dash-nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 10px;
  font-size: .85rem; color: var(--color-muted);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap; text-decoration: none;
}
.dash-nav-link:hover { background: var(--glass-bg-mid); color: var(--color-text); text-decoration: none; }
.dash-nav-link.active { background: rgba(255,107,53,0.12); color: var(--color-accent); }
.dash-nav-link svg { flex-shrink: 0; opacity: .7; }
.dash-nav-link.active svg { opacity: 1; }

.dash-nav-upgrade { color: var(--color-accent) !important; }
.dash-nav-upgrade:hover { background: rgba(255,107,53,0.15) !important; }

.dash-nav-logout { margin-top: 4px; }
.dash-nav-logout:hover { background: rgba(239,68,68,0.1) !important; color: #ef4444 !important; }

@media (max-width: 767px) {
  .dash-nav-logout { margin-top: 0; }
}

/* ── Content area ─────────────────────────────────────────────── */
.dash-content { flex: 1; min-width: 0; }

.dash-tab { display: none; }
.dash-tab.active { display: block; }

.dash-heading {
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700; margin: 0 0 24px;
  color: var(--color-text);
}
.dash-name { color: var(--color-accent); }

.dash-section {
  margin-bottom: 28px;
}
.dash-section__title {
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted); margin: 0 0 12px;
}

/* ── Stat cards ───────────────────────────────────────────────── */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 20px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition), transform var(--transition);
}
.stat-card:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }

.stat-card__icon {
  width: 36px; height: 36px;
  background: rgba(255,107,53,0.1); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent); margin-bottom: 2px;
}

.stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .78rem; color: var(--color-muted); }

/* ── Membership card ─────────────────────────────────────────── */
.membership-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 20px;
  display: flex; align-items: flex-start; gap: 16px;
}
.membership-card--premium {
  border-color: var(--gold-border);
  background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, var(--glass-bg) 100%);
}
.membership-card__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255,107,53,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
}
.membership-card__icon--gold {
  background: var(--gold-dim); color: var(--gold);
}
.membership-card strong { display: block; margin-bottom: 4px; font-size: .95rem; }
.membership-card p { font-size: .83rem; color: var(--color-muted); line-height: 1.55; }
.membership-card a { color: var(--color-accent); }

/* ── Continue listening ───────────────────────────────────────── */
.continue-list { display: flex; flex-direction: column; gap: 12px; }

.continue-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 12px 14px;
  transition: border-color var(--transition);
}
.continue-item:hover { border-color: var(--glass-border-hover); }

.cover-code {
  width: 40px; height: 40px; flex-shrink: 0;
  background: linear-gradient(135deg,#FF6B35,#C94FFF);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem; color: #fff;
}

.continue-info { flex: 1; min-width: 0; }
.continue-info a {
  display: block; font-size: .88rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--color-text); text-decoration: none;
  margin-bottom: 6px;
}
.continue-info a:hover { color: var(--color-accent); }

.progress-bar {
  height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}
.progress-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #FF6B35, #C94FFF);
  border-radius: 2px;
}

/* ── Profile info grid ───────────────────────────────────────── */
.profile-info-grid {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  overflow: hidden; margin-bottom: 20px;
}
.info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--glass-border);
  font-size: .87rem;
}
.info-row:last-child { border-bottom: none; }
.info-row span { color: var(--color-muted); flex-shrink: 0; }
.info-row strong { text-align: right; word-break: break-all; }

/* ── Upgrade card glass ─────────────────────────────────────── */
.upgrade-card--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 28px 24px; max-width: 440px;
}

.upgrade-features--check {
  list-style: none; padding: 0; margin: 0 0 24px;
}
.upgrade-features--check li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--glass-border);
  font-size: .9rem; color: var(--color-text);
}
.upgrade-features--check li:last-child { border-bottom: none; }
.upgrade-features--check svg { flex-shrink: 0; }

.upgrade-price {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 20px;
}
.upgrade-btn-glass {
  background: linear-gradient(135deg, #FF6B35, #e85d25);
  box-shadow: 0 4px 20px rgba(255,107,53,0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}
.upgrade-btn-glass:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255,107,53,0.35);
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { color: var(--color-muted); font-size: .88rem; }
.empty-state a { color: var(--color-accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUTH CARDS — glassmorphism
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.auth-main {
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,107,53,0.1) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 100% 80%, rgba(201,79,255,0.06) 0%, transparent 60%),
              var(--color-void);
}

.auth-container { width: 100%; max-width: 420px; }

.auth-card {
  background: var(--glass-bg-mid);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 36px 28px;
  box-shadow: var(--shadow-glass);
}

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; border-radius: 20px; }
}

.auth-logo { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 20px; }
.auth-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--color-muted); font-size: .9rem; margin-bottom: 24px; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; font-weight: 500; color: #94a3b8; margin-bottom: 6px;
}

.form-group input, .form-group select {
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px; color: var(--color-text);
  font-size: .9rem; font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: rgba(255,107,53,0.5);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.1);
  background: rgba(255,255,255,0.07);
}
.form-group input::placeholder { color: var(--color-dim); }

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 44px; }
.pass-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; color: var(--color-muted);
  line-height: 1; display: flex;
}
.pass-toggle:hover { color: var(--color-text); }

.phone-row { display: flex; gap: 8px; }
.phone-row .country-select { flex-shrink: 0; width: auto; min-width: 90px; }
.phone-row input { flex: 1; }

.btn-full { width: 100%; padding: 13px; font-size: .95rem; font-weight: 600; border-radius: 12px; border: none; }
.btn-primary { background: #FF6B35; color: #fff; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,107,53,0.3); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.form-alert { margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: .84rem; min-height: 0; }
.form-alert:empty { display: none; }
.form-alert--error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; }

.field-error { font-size: .78rem; color: #f87171; margin-top: 4px; display: block; }

.auth-switch { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--color-muted); }
.auth-switch a { color: var(--color-accent); font-weight: 500; }

.auth-terms { text-align: center; font-size: .76rem; color: var(--color-dim); margin-top: 12px; }
.auth-terms a { color: var(--color-muted); }

.forgot-link { font-size: .8rem; color: var(--color-accent); font-weight: 400; }

.remember-row { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--color-muted); cursor: pointer; margin-bottom: 16px; user-select: none; }
.remember-row input[type=checkbox] { accent-color: var(--color-accent); }

.pass-strength { margin-top: 6px; }
.strength-bar { height: 3px; background: var(--glass-border); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.strength-bar span { display: block; height: 100%; border-radius: 2px; transition: width .3s; }
#strength-label { font-size: .75rem; color: var(--color-muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AD SLOTS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ad-slot {
  text-align: center;
  padding: 16px;
  overflow: hidden;
}
.ad-slot--home_banner {
  max-width: 980px; margin: 0 auto 40px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 12px;
}
.ad-slot--story_top,
.ad-slot--story_bottom { max-width: 760px; margin: 24px auto; }
.ad-slot--sidebar { margin-bottom: 20px; }
.ad-slot ins { display: block !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE-FIRST FIXES & TOUCH IMPROVEMENTS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Minimum 44px tap targets */
.dash-nav-link,
.btn-primary,
.btn-ghost,
.btn-full,
.hp-btn-play,
.pay-btn { min-height: 44px; }

/* Better touch on mobile nav */
@media (max-width: 600px) {
  .nav-inner { padding: 0 12px; gap: 8px; }
  .nav-logo .logo-text { font-size: 1rem; }
  .nav-links { display: none; } /* always hidden on mobile, use drawer */

  .site-footer .footer-inner { flex-direction: column; gap: 24px; }
  .footer-cols { flex-direction: column; gap: 20px; }

  /* Homepage reel - larger cards on small screens */
  .hp-reel__row { gap: 10px; }
  .hp-card { width: 140px; }

  /* Better hero headline */
  .hp-sc-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }

  /* Dashboard stats: 2 columns on small mobile */
  .dash-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .dash-stats { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 16px; }
}

/* Prevent horizontal scroll */
body { overflow-x: hidden; }

/* Better scrollbar on webkit */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Homepage mobile improvements */
@media (max-width: 640px) {
  .hp-how__steps { flex-direction: column; align-items: center; gap: 24px; }
  .hp-step__connector { display: none; }
  .hp-step { max-width: 280px; }

  .hp-genres__grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .hp-orb { padding: 14px 6px; }
  .hp-orb__name { font-size: .72rem; }

  .hp-cta__title { font-size: clamp(1.6rem,6vw,2.8rem); }

  .hp-lekhak__row { gap: 16px; }
  .hp-author { min-width: 80px; }
}

/* ── Glassmorphism glow for premium nav badge ─── */
.badge-premium {
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .04em;
}

/* ── Focus ring accessibility ─────────────────── */
:focus-visible {
  outline: 2px solid rgba(255,107,53,0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================================
   STORIES ARCHIVE � archive-story.php
   ================================================================ */

.arc-main {
  min-height: 70vh;
  padding-bottom: 80px;
}

/* -- Archive page header ---------------------------------------- */
.arc-head {
  background: linear-gradient(160deg, #111 0%, #0d0d0d 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 56px 16px 40px;
}
.arc-head__inner {
  max-width: 1160px;
  margin: 0 auto;
}
.arc-head__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 8px;
}
.arc-head__sub {
  color: rgba(255,255,255,0.5);
  font-size: 0.95rem;
  margin: 0 0 28px;
}

/* -- Genre filter chips ----------------------------------------- */
.arc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arc-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s;
  min-height: 36px;
}
.arc-filter__chip:hover,
.arc-filter__chip.active {
  background: rgba(255,107,53,0.15);
  border-color: rgba(255,107,53,0.5);
  color: #FF6B35;
}
.arc-filter__num {
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 0.72rem;
}

/* -- Stories grid ----------------------------------------------- */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
  max-width: 1160px;
  margin: 48px auto 0;
  padding: 0 16px;
}
@media (max-width: 480px) {
  .arc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 12px; }
}

/* -- Story card ------------------------------------------------- */
.sc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc__cover {
  position: relative;
  display: block;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: #1c1c1e;
}
.sc__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.sc__cover:hover img { transform: scale(1.04); }
.sc__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}
.sc__placeholder span {
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(255,107,53,0.4);
  letter-spacing: -0.05em;
}
.sc__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.sc__cover:hover .sc__overlay { opacity: 1; }
.sc__free-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #FF6B35;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .05em;
}
.sc__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc__genre {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #FF6B35;
}
.sc__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.sc__title a {
  color: #fff;
  text-decoration: none;
}
.sc__title a:hover { color: #FF6B35; }
.sc__tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.4;
}
.sc__eps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}
.sc__eps svg { color: rgba(255,107,53,0.6); }

/* -- Pagination ------------------------------------------------- */
.arc-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 1160px;
  margin: 56px auto 0;
  padding: 0 16px;
}
.arc-pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.85rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: all .18s;
}
.arc-pagination .page-numbers.current,
.arc-pagination .page-numbers:hover {
  background: rgba(255,107,53,0.15);
  border-color: rgba(255,107,53,0.4);
  color: #FF6B35;
}

/* -- Empty state ------------------------------------------------ */
.arc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 16px;
  text-align: center;
  color: rgba(255,255,255,0.4);
}
.arc-empty p { font-size: 1rem; margin: 0; }


/* ================================================================
   HOMEPAGE � Genre category chips  (.hp-cat)
   Replaces old .hp-orb emoji grid
   ================================================================ */

.hp-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hp-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 44px;
  transition: all .18s;
}
.hp-cat:hover {
  background: rgba(255,107,53,0.15);
  border-color: rgba(255,107,53,0.5);
  color: #FF6B35;
  transform: translateY(-1px);
}
.hp-cat--all {
  background: rgba(255,107,53,0.1);
  border-color: rgba(255,107,53,0.35);
  color: #FF6B35;
}
.hp-cat__name { font-weight: 600; }
.hp-cat__ct {
  font-size: 0.72rem;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  padding: 2px 8px;
  color: rgba(255,255,255,0.5);
}


/* ================================================================
   HOMEPAGE � How it works redesign  (.hp-step2)
   ================================================================ */

.hp-how__head {
  text-align: center;
  margin-bottom: 48px;
}
.hp-how__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
}
.hp-step2 {
  flex: 1;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}
.hp-step2__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.hp-step2__n {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35, #C94FFF);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(255,107,53,0.35);
}
.hp-step2__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
}
.hp-step2__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.hp-step2__desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0;
}
.hp-step2__arrow {
  flex-shrink: 0;
  padding: 0 4px;
  margin-top: 22px;
  opacity: 0.7;
}
.hp-how__cta {
  text-align: center;
  margin-top: 48px;
}
@media (max-width: 640px) {
  .hp-how__row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hp-step2 { max-width: 320px; }
  .hp-step2__arrow { transform: rotate(90deg); margin: 0; }
}


/* ================================================================
   PREMIUM PAGE � page-premium.php
   ================================================================ */

.prem-main {
  min-height: 70vh;
}

/* -- Premium hero ----------------------------------------------- */
.prem-hero {
  position: relative;
  overflow: hidden;
  padding: 100px 16px 80px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,107,53,0.12) 0%, transparent 70%),
              radial-gradient(ellipse 60% 40% at 80% 50%, rgba(201,79,255,0.08) 0%, transparent 60%),
              #0d0d0d;
  text-align: center;
}
.prem-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.prem-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #FF6B35;
  background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.25);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}
.prem-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 18px;
}
.prem-title br { display: block; }
.prem-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
  max-width: 500px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.prem-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FF6B35, #C94FFF);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(255,107,53,0.3);
  transition: transform .18s, box-shadow .18s;
  min-height: 48px;
}
.prem-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,107,53,0.4); }
.prem-hero__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.prem-hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,107,53,0.08);
}
.prem-hero__ring--1 { width: 500px; height: 500px; top: -200px; left: 50%; transform: translateX(-50%); }
.prem-hero__ring--2 { width: 800px; height: 800px; top: -380px; left: 50%; transform: translateX(-50%); }

/* -- Section wrapper -------------------------------------------- */
.prem-section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 16px;
}
.prem-sh {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
  margin: 0 0 48px;
}

/* -- Features grid ---------------------------------------------- */
.prem-features {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.prem-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.prem-feat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.prem-feat__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,107,53,0.12);
  border: 1px solid rgba(255,107,53,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B35;
}
.prem-feat span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  padding-top: 8px;
}

/* -- Pricing plans ---------------------------------------------- */
.prem-pricing { background: #0d0d0d; }
.prem-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 720px;
  margin: 0 auto 24px;
}
@media (max-width: 600px) { .prem-plans { grid-template-columns: 1fr; } }
.prem-plan {
  border-radius: 16px;
  padding: 32px 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.prem-plan--premium {
  background: rgba(255,107,53,0.04);
  border-color: rgba(255,107,53,0.35);
  box-shadow: 0 0 0 1px rgba(255,107,53,0.1);
}
.prem-plan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #FF6B35, #C94FFF);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.prem-plan__head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.prem-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.prem-price-num { font-size: 2.4rem; font-weight: 900; color: #fff; letter-spacing: -0.04em; }
.prem-price-per { font-size: 0.85rem; color: rgba(255,255,255,0.4); }
.prem-plan__billed { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin: 4px 0 0; }
.prem-plan__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.prem-plan__list li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.prem-plan__list li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}
.prem-plan__list li.ok { color: rgba(255,255,255,0.85); }
.prem-plan__list li.ok::before {
  background-color: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.prem-plan__list li.no { color: rgba(255,255,255,0.3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.15); }
.prem-plan__list li.no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.prem-pay-btn {
  background: linear-gradient(135deg, #FF6B35, #C94FFF) !important;
  box-shadow: 0 6px 20px rgba(255,107,53,0.3) !important;
}
.prem-pay-status {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.prem-razorpay-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.prem-razorpay-note svg { color: rgba(34,197,94,0.6); flex-shrink: 0; }

/* -- FAQ -------------------------------------------------------- */
.prem-faq {
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.prem-faq__list {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prem-faq__item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.prem-faq__q {
  padding: 16px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
}
.prem-faq__q::-webkit-details-marker { display: none; }
.prem-faq__q::after {
  content: '+';
  font-size: 1.1rem;
  color: #FF6B35;
  flex-shrink: 0;
}
.prem-faq__item[open] .prem-faq__q::after { content: '-'; }
.prem-faq__a {
  padding: 0 20px 16px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin: 0;
}

/* -- Already premium state -------------------------------------- */
.prem-already {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 80px 16px;
}
.prem-already__inner {
  text-align: center;
  max-width: 480px;
}
.prem-already__icon { margin-bottom: 16px; }
.prem-already__inner h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}
.prem-already__inner p { color: rgba(255,255,255,0.5); margin: 0 0 8px; }
.prem-until { font-size: 0.88rem; color: rgba(255,255,255,0.4); }
.prem-until strong { color: rgba(255,255,255,0.7); }
.prem-autorenew {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(34,197,94,0.8);
  margin-top: 8px !important;
}
.prem-already__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

/* -- Legal pages ------------------------------------------------ */
.legal-main {
  padding: 48px 0 80px;
}
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
.legal-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.legal-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #FF6B35;
  background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.2);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.legal-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 10px;
}
.legal-meta {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.legal-body section { margin-bottom: 40px; }
.legal-body h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.legal-body h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin: 16px 0 8px;
}
.legal-body p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  margin: 0 0 12px;
}
.legal-body ul, .legal-body ol {
  padding-left: 20px;
  margin: 8px 0 12px;
}
.legal-body li {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  margin-bottom: 6px;
}
.legal-body strong { color: rgba(255,255,255,0.8); }
.legal-body a { color: #FF6B35; }
.legal-contact {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 24px;
  margin-top: 40px;
}
.legal-contact h2 { border-top: none; padding-top: 0; }


/* ================================================================
   USER MANAGEMENT PAGE  (.um-*)
   Frontend admin page at /user-management/
   ================================================================ */

.um-page { padding: 40px 0; min-height: 80vh; }
.um-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 16px; }
.um-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.um-sub { color: rgba(255,255,255,0.4); font-size: 14px; margin: 0; }
.um-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.notice-success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.4); color: #10b981; }
.notice-error   { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.4); color: #ef4444; }

/* Analytics cards */
.um-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 14px; margin-bottom: 28px; }
.um-card  { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 16px; text-align: center; }
.um-card__icon  { font-size: 22px; margin-bottom: 6px; }
.um-card__count { font-size: 28px; font-weight: 700; line-height: 1; }
.um-card__label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* Filter bar */
.um-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.um-search  { padding: 9px 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #E8EAF0; font-size: 13px; width: 220px; outline: none; }
.um-search:focus { border-color: rgba(255,107,53,0.5); }
.um-select  { padding: 9px 13px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #E8EAF0; font-size: 13px; outline: none; }

/* Table */
.um-table-wrap { overflow-x: auto; background: rgba(255,255,255,0.03); border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); margin-bottom: 16px; }
.um-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.um-table thead tr { background: rgba(255,255,255,0.04); border-bottom: 2px solid rgba(255,255,255,0.08); }
.um-table th { padding: 11px 14px; text-align: left; font-weight: 600; color: rgba(255,255,255,0.4); white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.um-row { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background .15s; }
.um-row:hover { background: rgba(255,107,53,0.05); }
.um-row:last-child { border-bottom: none; }
.um-table td { padding: 11px 14px; vertical-align: middle; }
.um-td-num  { color: rgba(255,255,255,0.3); font-size: 12px; width: 36px; }
.um-td-email, .um-td-mob, .um-td-date { color: rgba(255,255,255,0.5); white-space: nowrap; }
.um-name-link { font-weight: 600; color: #E8EAF0; text-decoration: none; }
.um-name-link:hover { color: #FF6B35; }

/* Plan badges */
.um-plan-badge   { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.um-plan-free    { background: rgba(16,185,129,0.15);  color: #10b981; }
.um-plan-premium { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.um-plan-pending { background: rgba(148,163,184,0.15); color: #94a3b8; }
.um-plan-guest   { background: rgba(148,163,184,0.1);  color: #64748b; }

/* Verified */
.um-verify-yes { color: #10b981; font-weight: 700; }
.um-verify-no  { color: #ef4444; font-weight: 700; }

/* Action buttons */
.um-action-btn  { border: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: opacity .2s; }
.um-promote     { background: #f59e0b; color: #fff; }
.um-downgrade   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.um-action-btn:hover { opacity: .82; }

/* Footer / pagination */
.um-footer-row  { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.um-count       { font-size: 12px; color: rgba(255,255,255,0.4); }
.um-pagination  { display: flex; gap: 6px; }
.um-page-btn    { padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); text-decoration: none; font-size: 13px; transition: background .15s; }
.um-page-btn:hover, .um-page-btn.active { background: #FF6B35; color: #fff; border-color: #FF6B35; text-decoration: none; }
.um-empty { padding: 32px; text-align: center; color: rgba(255,255,255,0.35); }

@media (max-width: 768px) {
  .um-table { min-width: 700px; }
  .um-header { flex-direction: column; }
  .um-filter-bar { flex-direction: column; align-items: stretch; }
  .um-search { width: 100%; }
}