:root {
  --veekl-bg: #0b0c10;
  --veekl-card: #14161c;
  --veekl-card-2: #1a1d24;
  --veekl-line: #23262e;
  --veekl-text: #f2f3f5;
  --veekl-muted: #9ba0ab;
  --veekl-disabled: #565b66;
  --veekl-accent: #ff3b5c;
  --veekl-gold: #f5c451;
  --veekl-ai: #7b6cff;
  --veekl-radius: 14px;
}

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

html {
  background: var(--veekl-bg);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--veekl-text) !important;
  background: var(--veekl-bg) !important;
  letter-spacing: -0.01em !important;
}

button,
input,
select {
  font: inherit;
}

.veekle-main-nav {
  background: rgba(11, 12, 16, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.veekle-main-nav-inner {
  width: min(100%, 1280px) !important;
  min-height: 64px !important;
  padding: 0 24px !important;
}

.veekle-main-nav-brand {
  min-width: 112px;
}

.veekle-main-nav-logo {
  display: none !important;
}

.veekle-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--veekl-text);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.veekle-wordmark strong {
  color: var(--veekl-accent);
}

.veekle-wordmark span {
  margin-left: 4px;
}

.veekle-main-nav-menu {
  justify-content: flex-start !important;
  gap: 2px !important;
}

.veekle-nav-link {
  color: var(--veekl-muted) !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
}

.veekle-nav-link:hover,
.veekle-nav-link.is-active {
  color: var(--veekl-text) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.veekle-nav-link.ai-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-ai-badge {
  padding: 2px 5px;
  color: white;
  background: var(--veekl-ai);
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 800;
}

.veekle-main-nav-actions {
  flex-wrap: nowrap !important;
  gap: 7px !important;
}

.veekle-nav-btn,
.language-btn {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border-color: transparent !important;
  background: transparent !important;
}

.veekle-nav-btn:hover,
.language-btn:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

.veekle-nav-btn-primary {
  color: var(--veekl-text) !important;
}

.account-icon-btn {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  background: var(--veekl-card) !important;
}

.account-icon-btn i {
  color: var(--veekl-accent) !important;
  font-size: 0.82rem !important;
}

.nav-btn-label,
.account-text-link,
#current-lang-text,
.language-btn .fa-chevron-down {
  display: none !important;
}

.veekl-bottom-nav {
  display: none;
}

.veekl-mobile-play {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-top: -19px;
  color: #fff;
  background: var(--veekl-accent);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(255, 59, 92, 0.32);
}

.veekl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: white;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 800;
}

.veekl-badge.new { background: var(--veekl-accent); }
.veekl-badge.free { border-color: rgba(255, 255, 255, 0.68); background: rgba(11, 12, 16, 0.42); }
.veekl-badge.exclusive { color: #121318; background: var(--veekl-gold); }
.veekl-badge.ai { background: var(--veekl-ai); }

/* Home */
.page-shell {
  width: min(100%, 1280px) !important;
  padding: 0 24px 96px !important;
}

.home-hero {
  position: relative;
  min-height: clamp(420px, 52vw, 640px);
  margin: 0 -24px 34px;
  overflow: hidden;
  background: #130b12;
}

.home-hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.home-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.home-hero-visual {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}

.home-hero-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(0.86) contrast(1.04);
}

.home-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.home-hero-slide.has-text-shade .home-hero-visual::after {
  background: linear-gradient(
    90deg,
    rgba(11, 12, 16, 0.98) 0%,
    rgba(11, 12, 16, 0.83) 30%,
    rgba(11, 12, 16, 0.16) 70%,
    rgba(11, 12, 16, 0.35) 100%
  );
}

.home-hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: min(540px, 100%);
  padding: 54px clamp(28px, 5vw, 72px);
}

.home-hero-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--veekl-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.home-hero-copy h1 {
  margin: 0;
  color: var(--veekl-text);
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  line-height: 0.96;
  font-weight: 900 !important;
  letter-spacing: -0.055em;
}

.home-hero-copy p {
  display: -webkit-box;
  margin: 17px 0 0;
  overflow: hidden;
  color: #d6d8dd;
  line-height: 1.65;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 23px;
}

.home-hero-actions .cta {
  min-height: 42px !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  font-size: 0.86rem;
}

.hero-dots {
  position: absolute;
  z-index: 4;
  right: 26px;
  bottom: 24px;
  display: flex;
  gap: 5px;
}

.hero-dot {
  width: 20px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.hero-dot.is-active { background: var(--veekl-accent); }

.rail {
  margin-top: 34px !important;
}

.rail-head {
  align-items: center !important;
  margin-bottom: 14px !important;
}

.rail-title {
  font-size: clamp(1.15rem, 2.2vw, 1.52rem) !important;
  letter-spacing: -0.035em !important;
}

.rail-subtitle {
  color: var(--veekl-muted) !important;
  font-size: 0.82rem !important;
}

.rail-more {
  color: var(--veekl-muted);
  font-size: 0.76rem;
}

.poster-row {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.poster-card {
  min-width: 0;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.poster-card:hover {
  transform: translateY(-3px) scale(1.015) !important;
}

.poster-art {
  aspect-ratio: 2 / 3 !important;
  overflow: hidden;
  border-radius: 8px;
  background: var(--veekl-card) !important;
}

.poster-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.poster-art::after {
  inset: 68% 0 0 !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent) !important;
}

.poster-badge {
  left: 8px !important;
  top: 8px !important;
  border: 0 !important;
  border-radius: 5px !important;
  padding: 4px 6px !important;
  background: var(--veekl-accent) !important;
  font-size: 0.58rem !important;
}

.poster-play {
  right: 8px !important;
  bottom: 8px !important;
  width: 31px !important;
  height: 31px !important;
  color: #fff !important;
  background: var(--veekl-accent) !important;
  opacity: 0;
  transform: scale(0.8);
  transition: 0.18s ease;
}

.poster-card:hover .poster-play {
  opacity: 1;
  transform: scale(1);
}

.poster-info {
  min-height: 0 !important;
  padding: 9px 1px 0 !important;
}

.poster-title {
  overflow: hidden;
  font-size: 0.88rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-desc,
.poster-meta .content-pill:not(:first-child) {
  display: none !important;
}

.poster-meta {
  margin-top: 4px !important;
}

.poster-meta .content-pill:first-child {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--veekl-muted) !important;
  background: transparent !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
}

.explore-block {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--veekl-line);
}

.explore-page-shell {
  padding-top: 0 !important;
}

.explore-page-block {
  margin: 0 -24px 34px;
  padding: 56px 24px 28px;
  border-top: 0;
  border-bottom: 1px solid var(--veekl-line);
  background:
    radial-gradient(circle at 82% 0, rgba(255, 59, 92, 0.1), transparent 34%),
    linear-gradient(180deg, #11131a, var(--veekl-bg));
}

.explore-page-heading {
  max-width: 620px;
}

.explore-page-heading h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.explore-page-heading > p:last-child {
  margin: 13px 0 0;
  color: var(--veekl-muted);
  font-size: 0.92rem;
}

.explore-page-block .home-tools {
  margin-top: 30px !important;
}

.explore-kicker {
  margin: 0 0 7px;
  color: var(--veekl-accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.home-tools {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-tools input {
  min-height: 42px !important;
  border-color: var(--veekl-line) !important;
  border-radius: 8px !important;
  background: var(--veekl-card) !important;
}

.home-tools select {
  min-height: 42px !important;
  border-color: var(--veekl-line) !important;
  border-radius: 8px !important;
  background: var(--veekl-card) !important;
}

.filter-selects-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.filter-label {
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--veekl-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.filter-chip {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--veekl-line);
  border-radius: 999px;
  color: var(--veekl-muted);
  background: var(--veekl-card);
  font-size: 0.74rem;
  cursor: pointer;
}

.filter-chip:hover,
.filter-chip.is-active {
  color: white;
  border-color: var(--veekl-accent);
  background: rgba(255, 59, 92, 0.14);
}

.empty-filter {
  min-height: 230px !important;
  padding: 28px;
  border-color: var(--veekl-line) !important;
  background: var(--veekl-card) !important;
  text-align: center;
}

.empty-filter strong {
  display: block;
  margin-bottom: 6px;
  color: var(--veekl-text);
  font-size: 1.06rem;
}

.empty-filter a {
  display: inline-block;
  margin-top: 13px;
  color: var(--veekl-accent);
  font-size: 0.78rem;
}

.originals-rail {
  padding: 28px;
  border: 1px solid rgba(123, 108, 255, 0.25);
  border-radius: var(--veekl-radius);
  background: linear-gradient(135deg, rgba(123, 108, 255, 0.11), transparent 52%), var(--veekl-card);
}

.originals-rail .rail-title::before {
  content: "AI";
  padding: 3px 6px;
  border-radius: 5px;
  color: white;
  background: var(--veekl-ai);
  font-size: 0.62rem;
  letter-spacing: 0;
}

.originals-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed rgba(123,108,255,.32);
  border-radius: 10px;
  text-align: center;
}

.originals-empty strong { margin-top:4px; font-size:1rem; }
.originals-empty p { margin:0; color:var(--veekl-muted); font-size:.76rem; }

.atlas-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid var(--veekl-line);
  border-radius: 12px;
  background: linear-gradient(100deg, #181a22, #11131a);
}

.atlas-banner small {
  color: var(--veekl-ai);
  font-weight: 800;
}

.atlas-banner h3 {
  margin: 5px 0 4px;
  font-size: 1.2rem;
}

.atlas-banner p {
  margin: 0;
  color: var(--veekl-muted);
  font-size: 0.8rem;
}

.atlas-banner a {
  padding: 10px 14px;
  border-radius: 8px;
  color: white;
  background: var(--veekl-ai);
  font-size: 0.78rem;
  font-weight: 700;
}

.preview-overlay {
  background: rgba(0, 0, 0, 0.82) !important;
}

.preview-modal {
  background: var(--veekl-card) !important;
  border-color: var(--veekl-line) !important;
}

.preview-hero::after {
  background:
    linear-gradient(90deg, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.48) 55%, transparent 100%),
    linear-gradient(0deg, var(--veekl-card) 0%, transparent 52%) !important;
}

.preview-body #previewEpisodes {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.episode-chip {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--veekl-line);
  border-radius: 8px;
  color: var(--veekl-text);
  background: #101217;
  cursor: pointer;
}

.episode-chip.is-free { border-color: rgba(255, 59, 92, 0.64); }
.episode-chip.is-locked { color: var(--veekl-gold); }
.episode-chip small { display: block; color: var(--veekl-muted); font-size: 0.56rem; }

.purchase-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
}

.purchase-sheet-backdrop.open { display: flex; }

.purchase-sheet {
  width: min(100%, 520px);
  padding: 22px;
  border: 1px solid var(--veekl-line);
  border-radius: 18px 18px 10px 10px;
  background: var(--veekl-card-2);
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.48);
}

.purchase-sheet-handle {
  width: 40px;
  height: 4px;
  margin: -8px auto 18px;
  border-radius: 999px;
  background: var(--veekl-disabled);
}

.purchase-sheet-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.purchase-sheet h2 { margin: 0; font-size: 1.2rem; }
.purchase-sheet p { margin: 5px 0 0; color: var(--veekl-muted); font-size: 0.78rem; }
.purchase-sheet-close { border: 0; color: var(--veekl-muted); background: transparent; }

.purchase-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--veekl-line);
  border-radius: 10px;
  color: var(--veekl-text);
  background: #111319;
  text-align: left;
}

.purchase-option.recommended { border-color: var(--veekl-gold); }
.purchase-option strong { display: block; font-size: 0.9rem; }
.purchase-option span { color: var(--veekl-gold); font-weight: 800; }

.auto-unlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--veekl-muted);
  font-size: 0.76rem;
}

.auto-unlock input { accent-color: var(--veekl-accent); }

/* Membership */
.subscription-shell {
  width: min(100%, 1180px) !important;
  padding: 42px 28px 96px !important;
}

.membership-intro {
  max-width: 1080px;
  margin: 0 auto 28px;
  text-align: left;
}

.membership-intro small {
  color: var(--veekl-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.membership-intro h1 {
  margin: 9px 0 0;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.subscription-hero {
  grid-template-columns: minmax(0, 1fr) 310px !important;
  gap: clamp(34px, 5vw, 64px) !important;
  align-items: stretch !important;
  padding: clamp(34px, 5vw, 52px) !important;
  border-color: rgba(245, 196, 81, 0.5) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(245,196,81,.12), transparent 48%), #121419 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
}

.subscription-hero > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.subscription-hero .kicker { color: var(--veekl-gold) !important; }
.subscription-hero h2 { max-width: 650px; margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -.05em; }
.subscription-hero p { color: var(--veekl-muted) !important; }

.vip-benefit-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 32px;
}

.vip-benefit-list span {
  padding: 10px;
  border: 1px solid var(--veekl-line);
  border-radius: 8px;
  color: #d6d8dd;
  background: rgba(255,255,255,.025);
  font-size: .72rem;
}

.plan-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 318px;
  padding: 28px !important;
  border-color: rgba(245, 196, 81, .28) !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, rgba(245,196,81,.08), transparent 44%), #0d0f14 !important;
}

.plan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-card-label {
  color: var(--veekl-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.plan-card h2 {
  margin: 24px 0 0 !important;
  font-size: 2.35rem !important;
  letter-spacing: -0.05em;
}

.plan-price {
  margin: 28px 0 20px !important;
}

.plan-price strong {
  color: var(--veekl-gold);
  font-size: 2rem !important;
  letter-spacing: -0.045em;
}

.plan-button {
  min-height: 50px !important;
  border-radius: 10px !important;
  color: #121318 !important;
  background: var(--veekl-gold) !important;
}

.plan-caption {
  margin-top: 11px;
  color: var(--veekl-muted);
  font-size: 0.68rem;
  text-align: center;
}

.coin-section { margin-top: 48px; }
.coin-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:14px; }
.coin-section-head h2 { margin:0; font-size:1.5rem; }
.coin-section-head p { margin:5px 0 0; color:var(--veekl-muted); font-size:.8rem; }
.coin-section-head span { color:var(--veekl-gold); font-size:.76rem; }
.coin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.coin-pack { position:relative; min-height:170px; padding:18px; border:1px solid var(--veekl-line); border-radius:12px; color:var(--veekl-text); background:var(--veekl-card); text-align:left; }
.coin-pack.popular { border-color:var(--veekl-gold); background:linear-gradient(145deg,rgba(245,196,81,.12),transparent 60%),var(--veekl-card); }
.coin-pack-badge { position:absolute; right:12px; top:12px; color:#121318; background:var(--veekl-gold); border-radius:5px; padding:3px 6px; font-size:.58rem; font-weight:800; }
.coin-pack i { color:var(--veekl-gold); }
.coin-pack strong { display:block; margin-top:18px; font-size:1.35rem; }
.coin-pack small { display:block; margin-top:5px; color:var(--veekl-muted); }
.coin-pack b { position:absolute; left:18px; bottom:16px; font-size:.84rem; }

/* MY */
.veekle-auth-shell {
  width: min(100%, 980px) !important;
  padding: 26px 24px 90px !important;
}

.my-vip-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 14px;
  padding: 22px;
  border: 1px solid var(--veekl-gold);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(245,196,81,.17), transparent 54%), var(--veekl-card);
}

.my-vip-card small { color:var(--veekl-gold); font-weight:800; }
.my-vip-card h2 { margin:5px 0 4px; font-size:1.35rem; }
.my-vip-card p { margin:0; color:var(--veekl-muted); font-size:.78rem; }
.my-vip-card a { padding:10px 14px; border-radius:8px; color:#121318; background:var(--veekl-gold); font-size:.76rem; font-weight:800; }

.account-hero {
  min-height: 150px !important;
  padding: 24px !important;
  border-color: var(--veekl-line) !important;
  border-radius: 14px !important;
  background: var(--veekl-card) !important;
  box-shadow: none !important;
}

.account-copy h1 { font-size: clamp(1.65rem,4vw,2.5rem) !important; }
.account-edit-btn { min-height:38px !important; color:var(--veekl-text) !important; background:var(--veekl-card-2) !important; border:1px solid var(--veekl-line) !important; }

.my-stat-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:14px 0 24px;
}

.my-stat {
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:14px;
  border:1px solid var(--veekl-line);
  border-radius:11px;
  background:var(--veekl-card);
}

.my-stat span { color:var(--veekl-muted); font-size:.7rem; }
.my-stat strong { margin-top:4px; font-size:1.18rem; font-variant-numeric:tabular-nums; }
.my-stat:first-child strong { color:var(--veekl-gold); }

.my-favorites,.account-watch-rail { scroll-margin-top:82px; }
.my-favorites { margin-bottom:24px; }
.my-favorites-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.my-favorites-head h2 { margin:0; font-size:1rem; }
.my-favorites-head span { color:var(--veekl-muted); font-size:.7rem; }
.my-favorite-row { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.my-favorite-card { position:relative; min-width:0; }
.my-favorite-card > a { display:block; text-decoration:none; }
.my-favorite-card img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:7px; background:var(--veekl-card); }
.my-favorite-card strong { display:block; margin-top:6px; overflow:hidden; color:var(--veekl-text); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.my-favorite-card > button { position:absolute; right:6px; top:6px; width:27px; height:27px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:50%; color:white; background:rgba(8,10,14,.76); font-size:.64rem; backdrop-filter:blur(8px); }
.my-favorites-empty { padding:20px; border:1px dashed var(--veekl-line); border-radius:10px; color:var(--veekl-muted); font-size:.76rem; text-align:center; }

.account-section-title { border-color:var(--veekl-line) !important; background:var(--veekl-card) !important; }
.account-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.account-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.account-service-card,.account-action { border-color:var(--veekl-line) !important; background:var(--veekl-card) !important; }

/* Authentication */
#loginPage {
  min-height: calc(100vh - 110px) !important;
}

#loginPage .login-experience {
  width: min(100%, 940px) !important;
  min-height: 660px !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  margin: 18px auto 0 !important;
  overflow: hidden;
  border: 1px solid var(--veekl-line) !important;
  border-radius: 18px !important;
  background: var(--veekl-card) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

#loginPage .login-story {
  position: relative;
  display: block;
  background:
    linear-gradient(90deg, rgba(11,12,16,.08), var(--veekl-card) 100%),
    linear-gradient(0deg, rgba(11,12,16,.8), transparent 55%),
    url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1100&q=82") center/cover !important;
}

#loginPage .login-story::before {
  content: "짧은 순간,\A깊게 빠지는 이야기";
  position: absolute;
  left: 38px;
  bottom: 44px;
  z-index: 2;
  color: var(--veekl-text);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.055em;
  white-space: pre-line;
}

#loginPage .login-story::after {
  background: linear-gradient(90deg, transparent 58%, var(--veekl-card) 100%) !important;
}

#loginPage .auth-column {
  padding: 38px !important;
  align-items: flex-start !important;
}

#loginPage .auth-form {
  width: 100% !important;
  max-width: 380px;
  margin: auto;
}

#loginPage #signupForm {
  max-width: 430px;
}

#loginPage .auth-card {
  padding: 0 !important;
  color: var(--veekl-text) !important;
  background: transparent !important;
}

#loginPage .auth-logo {
  display: none !important;
}

#loginPage .auth-brand {
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 24px;
  color: var(--veekl-text);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

#loginPage .auth-brand strong { color: var(--veekl-accent); }
#loginPage .auth-brand span { margin-left: 4px; }

#loginPage .auth-kicker {
  margin: 0 0 7px;
  color: var(--veekl-accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

#loginPage .auth-heading {
  margin: 0 !important;
  color: var(--veekl-text) !important;
  font-size: 1.55rem !important;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

#loginPage .auth-copy {
  margin-top: 8px;
  color: var(--veekl-muted) !important;
  font-size: 0.78rem;
  line-height: 1.55;
}

#loginPage .form-label {
  margin-bottom: 6px;
  color: #c8cbd2 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

#loginPage .mb-4 { margin-bottom: 16px !important; }
#loginPage .mb-3 { margin-bottom: 12px !important; }

#loginPage .input-group {
  min-height: 46px;
  flex-wrap: nowrap;
}

#loginPage .input-group-text,
#loginPage .form-control {
  min-height: 46px;
  color: var(--veekl-text) !important;
  border-color: var(--veekl-line) !important;
  background: #101218 !important;
  box-shadow: none !important;
}

#loginPage .input-group-text {
  width: 43px;
  justify-content: center;
  border-radius: 10px 0 0 10px !important;
  border-right: 0 !important;
}

#loginPage .input-group-text i { color: var(--veekl-disabled) !important; }

#loginPage .form-control {
  border-radius: 0 10px 10px 0 !important;
  font-size: 0.82rem;
}

#loginPage .form-control::placeholder { color: #666b76 !important; }

#loginPage .input-group:focus-within .input-group-text,
#loginPage .input-group:focus-within .form-control {
  border-color: rgba(255,59,92,.72) !important;
  box-shadow: none !important;
}

#loginPage .phone-auth-group .form-control { border-radius: 0 !important; }
#loginPage .phone-auth-group .btn-outline-danger,
#loginPage .input-group > .btn-outline-danger {
  min-width: 104px;
  padding: 0 11px;
  border-color: rgba(255,59,92,.55) !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--veekl-accent) !important;
  background: rgba(255,59,92,.08) !important;
  font-size: 0.68rem;
  font-weight: 800;
}

#loginPage .auth-primary,
#loginPage .auth-secondary,
#loginPage .social-auth-btn {
  min-height: 46px !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
}

#loginPage .auth-primary {
  color: #fff !important;
  background: var(--veekl-accent) !important;
  box-shadow: 0 12px 28px rgba(255,59,92,.2);
}

#loginPage .auth-primary:hover { background: #ff526e !important; }

#loginPage .auth-secondary {
  color: var(--veekl-text) !important;
  border-color: var(--veekl-line) !important;
  background: transparent !important;
}

#loginPage .auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 17px 0;
  color: var(--veekl-disabled);
  font-size: 0.62rem;
}

#loginPage .auth-divider::before,
#loginPage .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--veekl-line);
}

#loginPage .social-auth-stack {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#loginPage .social-auth-btn {
  min-width: 0;
  border-color: var(--veekl-line) !important;
  color: #d8dae0 !important;
  background: #101218 !important;
  font-weight: 700 !important;
}

#loginPage .social-auth-btn.kakao i { color: #f5dd41; }
#loginPage .social-auth-btn.google i { color: #fff; }

#loginPage .privacy-scroll {
  height: 78px !important;
  padding: 12px !important;
  border-color: var(--veekl-line) !important;
  border-radius: 10px !important;
  color: var(--veekl-muted);
  background: #101218 !important;
  font-size: 0.68rem !important;
}

#loginPage .form-check { display: flex; align-items: flex-start; gap: 7px; }
#loginPage .form-check-input { flex: 0 0 auto; margin-top: 3px; border-color: var(--veekl-disabled); background-color: #101218; }
#loginPage .form-check-input:checked { border-color: var(--veekl-accent); background-color: var(--veekl-accent); }
#loginPage .form-check-label { color: var(--veekl-muted) !important; font-size: 0.68rem !important; line-height: 1.45; }

#loginPage #find-id-pw {
  padding: 4px 0 0 !important;
}

#loginPage #find-id-pw > div {
  margin: 0 !important;
  gap: 9px !important;
}

#loginPage #find-id-pw a,
#loginPage #find-id-pw a i {
  color: var(--veekl-muted) !important;
  font-size: 0.68rem;
}

#loginPage #find-id-pw a:hover,
#loginPage #find-id-pw a:hover i { color: var(--veekl-accent) !important; }

#loginPage .modal-content {
  color: var(--veekl-text) !important;
  border: 1px solid var(--veekl-line) !important;
  background: var(--veekl-card-2) !important;
}

#loginPage .modal-title,
#loginPage .modal-title i { color: var(--veekl-accent) !important; }

/* Vertical player */
.watch-shell { width:min(100%,1180px) !important; padding:24px 24px 84px !important; }
.watch-layout { grid-template-columns:minmax(420px, .95fr) minmax(320px, 380px) !important; gap:24px !important; }
.player-panel,.episodes-panel { border-color:var(--veekl-line) !important; background:var(--veekl-card) !important; box-shadow:none !important; }
.player-panel { width:min(100%,620px) !important; }
.player-stage { position:relative; background:#050507; }
.video-player { padding:14px !important; background:#050507 !important; }
.player-frame { width:min(100%,410px) !important; border-radius:10px !important; }
.player-actions {
  position:absolute;
  z-index:5;
  right:18px;
  bottom:26px;
  display:grid;
  gap:12px;
}
.player-action {
  width:44px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0;
  border:0;
  color:#fff;
  background:rgba(11,12,16,.56);
  border-radius:50%;
  backdrop-filter:blur(8px);
}
.player-action span { font-size:.52rem; }
.player-action.is-active { color:var(--veekl-accent); }
.player-swipe-hint { position:absolute; z-index:4; top:50%; right:21px; display:grid; gap:4px; color:rgba(255,255,255,.7); font-size:.62rem; text-align:center; transform:translateY(-50%); }
.player-meta { background:var(--veekl-card) !important; }
.player-meta .eyebrow { color:var(--veekl-accent) !important; }
.player-meta h1 { font-size:clamp(1.7rem,4vw,2.6rem) !important; }
.episodes-panel { top:78px !important; }
.episodes-head { border-color:var(--veekl-line) !important; }
.episodes-panel .episode-list { grid-template-columns:1fr !important; }
.episode-item { border-color:var(--veekl-line) !important; background:#101217 !important; }
.episode-item.active { border-color:var(--veekl-accent) !important; background:rgba(255,59,92,.1) !important; }
.episode-item.locked { border-color:rgba(245,196,81,.28) !important; }
.episode-item.locked .episode-index { color:#121318 !important; background:var(--veekl-gold) !important; }
.episode-index { background:var(--veekl-accent) !important; }
.season-upsell { margin:16px 16px 0; padding:14px; border:1px solid rgba(245,196,81,.4); border-radius:10px; background:rgba(245,196,81,.08); }
.season-upsell small { color:var(--veekl-gold); font-weight:800; }
.season-upsell strong { display:block; margin-top:4px; font-size:.88rem; }
.season-upsell button { width:100%; min-height:34px; margin-top:10px; border:0; border-radius:7px; color:#121318; background:var(--veekl-gold); font-size:.72rem; font-weight:800; }

@media (max-width: 980px) {
  .poster-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .coin-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body {
    padding-bottom: 68px;
  }

  .veekle-main-nav-inner {
    min-height: 54px !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
  }

  .veekle-main-nav-brand {
    min-width: auto;
  }

  .veekle-main-nav-menu {
    display: none !important;
  }

  .veekle-main-nav-actions {
    margin-left: auto;
    gap: 5px !important;
  }

  #user-status .language-btn {
    width: 38px !important;
    height: 34px !important;
    border: 1px solid var(--veekl-line) !important;
    border-radius: 9px !important;
    background: var(--veekl-card) !important;
  }

  #user-status .veekle-nav-btn-primary {
    width: auto !important;
    min-width: 68px !important;
    height: 34px !important;
    gap: 6px;
    padding: 0 11px !important;
    border: 1px solid rgba(255, 59, 92, 0.7) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: var(--veekl-accent) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
  }

  #user-status .veekle-nav-btn-primary .nav-btn-label {
    display: inline !important;
  }

  #user-status .veekle-nav-btn-primary i {
    font-size: 0.72rem !important;
  }

  #user-status .account-icon-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: var(--veekl-card) !important;
  }

  #user-status .account-icon-btn i {
    color: var(--veekl-accent) !important;
    font-size: 0.82rem !important;
  }

  .veekl-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 2200;
    min-height: 62px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 5px 10px max(5px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(11, 12, 16, 0.96);
    backdrop-filter: blur(18px);
  }

  .veekl-bottom-nav a {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--veekl-muted);
    font-size: 0.61rem;
    text-decoration: none;
  }

  .veekl-bottom-nav i {
    font-size: 0.9rem;
  }

  .veekl-bottom-nav a:first-child,
  .veekl-bottom-nav a:hover {
    color: var(--veekl-accent);
  }

  .page-shell {
    padding: 0 14px 42px !important;
  }

  .home-hero {
    min-height: min(122vw, 630px);
    margin: 0 -14px 24px;
  }

  .home-hero-slide {
    display: block;
  }

  .home-hero-visual img {
    object-position: center;
  }

  .home-hero-slide.has-text-shade .home-hero-visual::after {
    background: linear-gradient(
      90deg,
      rgba(11, 12, 16, 0.34),
      transparent 65%
    );
  }

  .home-hero-copy {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    padding: 30px 18px 34px;
  }

  .home-hero-copy h1 {
    max-width: 310px;
    font-size: clamp(2.35rem, 12vw, 3.8rem);
  }

  .home-hero-copy p {
    max-width: 340px;
    margin-top: 11px;
    font-size: 0.78rem;
  }

  .hero-dots {
    right: 16px;
    bottom: 17px;
  }

  .rail { margin-top: 28px !important; }
  .rail-head {
    min-height: 44px;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .rail-head > div { min-width: 0; text-align: left; }
  .rail-head .rail-title { font-size: 1.05rem !important; }
  .rail-head .rail-subtitle { margin-top: 4px !important; font-size: 0.68rem !important; }
  .rail-more { flex: 0 0 auto; padding-bottom: 1px; font-size: 0.66rem; }
  .poster-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .poster-title { font-size: 0.75rem !important; }
  .poster-meta .content-pill:first-child { font-size: 0.61rem !important; }
  .poster-play { display: none !important; }
  .explore-block {
    margin-top: 34px;
    padding-top: 24px;
  }
  .explore-page-block {
    margin: 0 -14px 26px;
    padding: 34px 14px 22px;
  }
  .explore-page-heading h1 { font-size: 2rem; }
  .explore-page-heading > p:last-child { max-width: 310px; font-size: 0.74rem; line-height: 1.6; }
  .explore-page-block .home-tools { margin-top: 22px !important; }
  .explore-block > .rail-title { font-size: 1.12rem !important; }
  .home-tools { display: block !important; margin: 14px 0 14px !important; }
  .home-tools input { width: 100%; min-height: 44px !important; }
  .filter-chips {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 -14px 5px;
    padding: 3px 14px 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-label { position: sticky; left: 0; z-index: 2; flex: 0 0 34px; min-width: 34px; min-height: 30px; background: var(--veekl-bg); }
  .filter-chip { flex: 0 0 auto; }
  .sort-chips { margin-top: -2px; }
  .originals-rail {
    margin-left: -14px;
    margin-right: -14px;
    padding: 20px 14px;
    border-width: 1px 0;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(123, 108, 255, 0.08), transparent 55%), var(--veekl-card);
  }
  .originals-rail .rail-head { margin-bottom: 12px !important; }
  .originals-rail .rail-title::before { padding: 3px 5px; font-size: 0.52rem; }
  .originals-empty {
    min-height: 74px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px;
    border-style: solid;
    border-color: rgba(123, 108, 255, 0.2);
    background: rgba(11, 12, 16, 0.3);
    text-align: left;
  }
  .originals-empty strong { margin: 0; font-size: 0.84rem; }
  .atlas-banner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    margin-top: 10px;
    padding: 15px;
    border-color: rgba(255, 255, 255, 0.07);
    background: #101218;
  }
  .atlas-banner small { font-size: 0.58rem; }
  .atlas-banner h3 { margin-top: 4px; font-size: 0.9rem; line-height: 1.35; }
  .atlas-banner p { display: none; }
  .atlas-banner a {
    min-width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.65rem;
  }
  .preview-modal { border-radius: 0 !important; }
  .preview-body { padding: 18px !important; }
  .preview-body #previewEpisodes { grid-template-columns: minmax(0, 1fr) !important; }
  .subscription-shell { padding: 22px 14px 50px !important; }
  .subscription-hero { grid-template-columns: 1fr !important; gap: 26px !important; padding: 24px !important; border-radius: 16px !important; }
  .vip-benefit-list { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; padding: 22px !important; }
  .plan-card h2 { margin-top: 20px !important; font-size: 1.8rem !important; }
  .plan-price { margin: 20px 0 16px !important; }
  .plan-price strong { font-size: 1.75rem !important; }
  .coin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .coin-pack { min-height: 140px; padding: 15px; }
  .coin-pack i { font-size: .78rem; }
  .coin-pack strong { margin-top: 17px; font-size: 1.08rem; line-height: 1.18; white-space: nowrap; }
  .coin-pack small { margin-top: 8px; font-size: .67rem; line-height: 1.25; }
  .coin-pack b { position: static; display: block; margin-top: 3px; font-size: .76rem; line-height: 1.2; }
  .veekle-auth-shell { padding: 16px 14px 40px !important; }
  .my-vip-card { grid-template-columns:1fr; }
  .my-vip-card a { justify-self:start; }
  .my-stat-grid { gap:6px; }
  .my-stat { min-height:76px; padding:10px; }
  .my-favorite-row { grid-template-columns:repeat(4,1fr); overflow:hidden; }
  .account-card-grid { grid-template-columns:1fr !important; }
  .account-service-grid { grid-template-columns:1fr !important; }
  #loginPage { min-height: auto !important; }
  #loginPage .login-experience {
    min-height: auto !important;
    display: block !important;
    margin: 8px 0 18px !important;
    border-radius: 14px !important;
  }
  #loginPage .login-story { display: none !important; }
  #loginPage .auth-column { padding: 24px 18px 28px !important; }
  #loginPage .auth-form,
  #loginPage #signupForm { max-width: none; }
  #loginPage .auth-brand { margin-bottom: 19px; }
  #loginPage .auth-heading { font-size: 1.35rem !important; }
  #loginPage .auth-copy { margin-bottom: 20px !important; }
  #loginPage .social-auth-btn { padding: 0 8px; font-size: 0.7rem !important; }
  #loginPage .phone-auth-group .btn-outline-danger,
  #loginPage .input-group > .btn-outline-danger { min-width: 96px; padding: 0 8px; }
  #loginPage .privacy-scroll { height: 70px !important; }
  .watch-shell { padding:0 0 20px !important; }
  .watch-layout { grid-template-columns:1fr !important; gap:0 !important; }
  /*
   * Keep the full vertical video visible between the fixed mobile header and
   * bottom navigation. On tall screens the 9:16 ratio limits the player;
   * on short screens the available viewport height takes priority.
   */
  .player-stage {
    height:min(177.7778vw, calc(100dvh - 122px));
    min-height:0;
    max-height:none;
  }
  .video-player { height:100%; padding:0 !important; }
  .player-frame { width:100% !important; max-width:none !important; height:100% !important; border-radius:0 !important; }
  .player-actions { right:12px; bottom:18px; }
  .player-action { width:40px; min-height:40px; background:rgba(0,0,0,.36); }
  .player-swipe-hint { display:none; }
  .player-meta {
    z-index:7 !important;
    margin:0 !important;
    padding:14px 16px 12px !important;
    border-top:1px solid var(--veekl-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .player-meta h1 {
    margin:5px 0 7px !important;
    font-size:clamp(1.1rem,5.2vw,1.4rem) !important;
    line-height:1.22 !important;
  }
  .player-meta .meta-chips { margin-top:8px !important; }
  .episodes-panel { margin:0 10px !important; width:calc(100% - 20px) !important; }
  .episodes-panel .episode-list {
    grid-template-columns:1fr !important;
    overflow:visible !important;
    max-height:none !important;
  }
  .episode-item {
    min-width:0;
    min-height:76px !important;
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) auto !important;
    place-items:initial !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px !important;
  }
  .episode-item .episode-copy {
    display:flex !important;
    min-width:0;
  }
  .episode-item .episode-duration {
    display:block !important;
    align-self:center;
  }
  .episode-index { width:36px !important; height:36px !important; font-size:.72rem; }
  .season-upsell { margin:12px; }
}

@media (max-width: 420px) {
  .poster-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .preview-body #previewEpisodes { grid-template-columns: minmax(0, 1fr) !important; }
}