/* ========================================================================
   AEON BETA Cinema — Interactive UI/UX Demo
   Design tokens mapped 1:1 from aeon-beta-ui-v3-sprint5.pen
   ======================================================================== */

/* ---------- ABC Diatype (official AEON BETA brand typeface) ---------- */
@font-face {
  font-family: 'ABC Diatype';
  src: url('assets/fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype';
  src: url('assets/fonts/ABCDiatype-Bold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABC Diatype';
  src: url('assets/fonts/ABCDiatype-Heavy.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'ABC Diatype', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- Design Tokens (Dark default) ---------- */
:root {
  /* Brand */
  --primary: #FA6E66;
  --primary-fg: #FFFFFF;

  /* Accents */
  --accent-cyan: #73E5EA;
  --accent-green: #61E883;
  --accent-lime: #CEFA69;
  --accent-magenta: #E476FA;
  --accent-peach: #FAAB67;
  --accent-purple: #707EFA;
  --accent-yellow: #FADC65;
  --accent-light-blue: #EBF5FC;

  /* Status */
  --success: #4CAF50;
  --warning: #FAAB67;
  --error: #EF4444;

  /* Radii */
  --r-sm: 4px;
  --r-m: 8px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Theme-dependent (dark default) */
  --bg: #0D0D0D;
  --bg-pure: #000000;
  --card: #1A1A1A;
  --surface-deep: #111111;
  --surface-glass: rgba(26, 26, 26, 0.7);
  --border: #333333;
  --fg: #FFFFFF;
  --muted-fg: #666666;
  --light-gray: #F2F2F2;
  --star-inactive: rgba(255, 255, 255, 0.15);
}
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-pure: #FFFFFF;
  --card: #F8F8F8;
  --surface-deep: #F0F0F0;
  --surface-glass: rgba(255, 255, 255, 0.7);
  --border: #E5E5E5;
  --fg: #0D0D0D;
  --muted-fg: #666666;
  --star-inactive: rgba(0, 0, 0, 0.15);
}

/* ========================================================================
   App Shell
   ======================================================================== */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
  width: 100vw;
  background: #0a0a0a;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: #111;
  border-right: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.sidebar__brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar__brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FA6E66, #FAAB67);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar__brand-name { font-weight: 700; font-size: 14px; color: #fff; letter-spacing: 0.02em; }
.sidebar__brand-tag { font-size: 11px; color: #888; }

.sidebar__controls {
  display: flex; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #1f1f1f;
}
.theme-switch {
  display: flex;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 3px;
  flex: 1;
}
.theme-switch button {
  flex: 1;
  padding: 6px 10px;
  font-size: 11px;
  color: #888;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s ease;
}
.theme-switch button.is-active {
  background: #FA6E66;
  color: #fff;
}
.theme-switch svg { width: 12px; height: 12px; }

.sidebar__search {
  padding: 12px 16px 8px;
  position: relative;
}
.sidebar__search input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 10px 8px 30px;
  color: #fff;
  font-size: 12px;
  outline: none;
}
.sidebar__search input:focus { border-color: #FA6E66; }
.sidebar__search svg {
  position: absolute;
  left: 26px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #555;
  pointer-events: none;
}

.sidebar__group-label {
  padding: 12px 20px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  font-weight: 600;
}

.sidebar__list {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 16px;
}
.sidebar__list::-webkit-scrollbar { width: 6px; }
.sidebar__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: #aaa;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: #1a1a1a; color: #fff; }
.nav-item.is-active {
  background: #1f1f1f;
  color: #fff;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: #FA6E66;
  border-radius: 0 3px 3px 0;
}
.nav-item__num {
  width: 22px;
  font-size: 10px;
  color: #555;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nav-item.is-active .nav-item__num { color: #FA6E66; }
.nav-item__icon { width: 14px; height: 14px; flex-shrink: 0; color: inherit; }
.nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Stage (Phone area) ---------- */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(250,110,102,0.08), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(115,229,234,0.06), transparent 50%),
    #0a0a0a;
}

.toolbar {
  position: absolute;
  top: 16px;
  left: 50%; transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 6px;
  z-index: 10;
}
.toolbar button {
  height: 32px;
  padding: 0 14px;
  display: flex; align-items: center; gap: 6px;
  color: #aaa;
  border-radius: 999px;
  font-size: 12px;
  transition: all 0.15s;
}
.toolbar button:hover { background: #2a2a2a; color: #fff; }
.toolbar button.is-icon { width: 32px; padding: 0; justify-content: center; }
.toolbar svg { width: 14px; height: 14px; }

.toolbar__divider { width: 1px; background: #2a2a2a; margin: 4px 2px; }

.toolbar__title {
  display: flex; flex-direction: column;
  padding: 0 12px;
  min-width: 180px;
  text-align: center;
}
.toolbar__title-main { font-size: 12px; color: #fff; font-weight: 600; }
.toolbar__title-sub { font-size: 10px; color: #666; }

/* ---------- Phone Frame ---------- */
.phone {
  width: 440px;
  height: 880px;
  border-radius: 60px;
  background: #1a1a1a;
  padding: 16px;
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 30px 80px rgba(0,0,0,0.7),
    0 0 120px rgba(250,110,102,0.08);
  position: relative;
}
.phone::before {
  /* Side buttons */
  content: "";
  position: absolute;
  left: -3px;
  top: 110px;
  width: 3px;
  height: 30px;
  background: #2a2a2a;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 50px 0 #2a2a2a, 0 90px 0 #2a2a2a;
}
.phone::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 140px;
  width: 3px;
  height: 60px;
  background: #2a2a2a;
  border-radius: 0 2px 2px 0;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 46px;
  overflow: hidden;
}

/* Dynamic Island */
.phone__island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 35px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
  pointer-events: none;
}

/* ========================================================================
   Mobile Screen Base
   ======================================================================== */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.screen::-webkit-scrollbar { width: 4px; }
.screen::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.screen[hidden] { display: none; }

/* Status Bar (iOS-ish) */
.status-bar {
  height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.status-bar__icons { display: flex; align-items: center; gap: 6px; }
.status-bar__icons svg { width: 16px; height: 16px; }
.status-bar__battery {
  width: 26px; height: 12px;
  border: 1px solid var(--fg);
  border-radius: 3px;
  padding: 1px;
  position: relative;
  opacity: 0.95;
}
.status-bar__battery::after {
  content: ""; position: absolute;
  right: -3px; top: 3px; height: 6px; width: 2px;
  background: var(--fg);
  border-radius: 0 1px 1px 0;
}
.status-bar__battery-fill {
  height: 100%; width: 80%;
  background: var(--fg);
  border-radius: 1px;
}

/* Home indicator */
.home-indicator {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 134px; height: 5px;
  background: var(--fg);
  opacity: 0.85;
  border-radius: 999px;
  z-index: 50;
}

/* ========================================================================
   Reusable Mobile Components
   ======================================================================== */

/* Top bar */
.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 14px 20px;
  gap: 14px;
  color: var(--fg);
}
.topbar__back {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--fg);
}
.topbar__back svg { width: 24px; height: 24px; }
.topbar__title { font-size: 14px; font-weight: 600; }
.topbar__spacer { flex: 1; }
.topbar__action { color: var(--fg); display: grid; place-items: center; width: 28px; height: 28px; }
.topbar__action svg { width: 22px; height: 22px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
  cursor: pointer;
  width: 100%;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { opacity: 0.9; }
.btn--secondary { background: var(--card); color: var(--fg); border: 1px solid var(--border); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--signup {
  height: 54px;
  font-size: 15px;
  font-weight: 700;
  border-width: 2px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(250, 110, 102, 0.05);
}
.btn--signup:hover {
  background: rgba(250, 110, 102, 0.08);
}
.btn--sm { height: 38px; font-size: 13px; padding: 0 14px; }
.btn--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* Inputs */
.input-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.input-group__label { font-size: 12px; font-weight: 500; color: var(--fg); }
.input-group__field {
  height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.input-group__field input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  color: var(--fg);
}
.input-group__field input::placeholder { color: var(--muted-fg); }
.input-group__field--focus { border-color: var(--primary); }
.input-group__field svg { width: 18px; height: 18px; color: var(--muted-fg); }

/* Checkbox */
.checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted-fg);
}
.checkbox__box {
  width: 20px; height: 20px;
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.checkbox__box svg { width: 12px; height: 12px; color: var(--primary); opacity: 0; }
.checkbox.is-checked .checkbox__box { background: var(--primary); }
.checkbox.is-checked .checkbox__box svg { color: #fff; opacity: 1; }

/* Cards */
.card {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
}

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-size: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}
.chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Bottom tab bar */
.bottom-tabs {
  height: 72px;
  flex-shrink: 0;
  display: flex;
  background: var(--card);
  padding: 10px 12px 18px;
  border-top: 1px solid var(--border);
}
.bottom-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  color: var(--muted-fg);
  font-size: 10px;
  cursor: pointer;
}
.bottom-tab svg { width: 22px; height: 22px; }
.bottom-tab.is-active { color: var(--primary); }

/* ========================================================================
   Screen-specific Styles
   ======================================================================== */

/* ---------- Poster image helper ---------- */
.poster {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--card);
}

/* ----- Splash ----- */
.splash {
  background: #000000;
  align-items: center;
  overflow: hidden;
}
.splash::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 30%, rgba(250,110,102,0.15), transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(115,229,234,0.08), transparent 40%);
  animation: splash-glow 6s ease-in-out infinite alternate;
}
@keyframes splash-glow {
  to { transform: scale(1.1) rotate(20deg); }
}
.splash__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 40px;
  position: relative;
  z-index: 1;
  width: 100%;
}
.splash__logo-img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(250, 110, 102, 0.4));
  animation: splash-logo-in 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes splash-logo-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.splash__tagline {
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0.85;
  letter-spacing: 0.02em;
  animation: splash-tag-in 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes splash-tag-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}
.splash__actions {
  padding: 0 24px 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
  animation: splash-actions-in 1.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes splash-actions-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.splash__signin {
  font-size: 14px;
  color: #999;
  cursor: pointer;
}
.splash__signin span { color: var(--primary); }

/* ----- Auth (Login / Register / OTP / Forgot) ----- */
.auth-screen { padding-bottom: 24px; }
.auth-header { padding: 40px 24px 0; }
.auth-header__title { font-size: 22px; font-weight: 700; color: var(--fg); margin-bottom: 8px; }
.auth-header__subtitle { font-size: 14px; color: var(--muted-fg); }
.auth-form { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.auth-forgot-link { font-size: 11px; color: var(--primary); text-align: right; cursor: pointer; }
.auth-actions { padding: 16px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.auth-bottom-link {
  padding: 16px 24px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--muted-fg);
  cursor: pointer;
}
.auth-bottom-link span { color: var(--primary); }

/* OTP / Forgot icon circle */
.auth-icon-circle {
  width: 80px; height: 80px;
  border-radius: 999px;
  background: var(--primary);
  display: grid; place-items: center;
  margin: 40px auto 0;
}
.auth-icon-circle--gray { background: var(--border); }
.auth-icon-circle svg { width: 36px; height: 36px; color: #fff; }
.auth-icon-circle--gray svg { color: var(--primary); }

.auth-centered { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 24px; }
.auth-centered h2 { font-size: 22px; font-weight: 700; color: var(--fg); }
.auth-centered p { font-size: 14px; color: var(--muted-fg); text-align: center; line-height: 1.5; white-space: pre-line; }

.otp-boxes { display: flex; gap: 10px; justify-content: center; width: 100%; }
.otp-box {
  width: 48px; height: 56px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--fg);
}
.otp-box.is-focus { border-color: var(--primary); }

/* ----- Register form ----- */
.reg-row { display: flex; gap: 12px; }
.reg-row > * { flex: 1; }
.reg-terms { display: flex; align-items: center; gap: 8px; padding-top: 4px; }

/* ----- Home ----- */
.home-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  position: relative;
}
.home-topbar__logo { font-size: 18px; font-weight: 800; letter-spacing: 0.06em; }
.home-topbar__logo span { color: var(--primary); }
.home-topbar__logo-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 26px;
  width: auto;
}
/* Theme-aware logo show/hide */
:root[data-theme="dark"] .dark-only-hide,
:root[data-theme="light"] .light-only-hide { display: none !important; }
.home-topbar__spacer { flex: 1; }
.home-topbar__icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--fg);
  cursor: pointer;
  position: relative;
}
.home-topbar__icon svg { width: 18px; height: 18px; }
.home-topbar__badge {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--card);
}

/* =================== Hero Promo (swipeable carousel) =================== */
.hero-promo {
  padding: 0;
  flex-shrink: 0;
}
.hero-promo__scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px;
  gap: 12px;
}
.hero-promo__scroller::-webkit-scrollbar { display: none; }
.hero-promo__card {
  flex: 0 0 calc(100% - 40px);
  scroll-snap-align: center;
  background: var(--card);
  border-radius: 10px;
  padding: 16px 20px;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.hero-promo__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(250,110,102,0.15), transparent 60%);
  pointer-events: none;
}
.hero-promo__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.hero-promo__big {
  font-size: 28px;
  font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.hero-promo__sub {
  font-size: 11px;
  color: var(--muted-fg);
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.hero-promo__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
}
.hero-promo__dots span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}
:root[data-theme="light"] .hero-promo__dots span { background: rgba(0,0,0,0.2); }
.hero-promo__dots span.is-active {
  width: 18px;
  background: var(--primary);
}

/* =================== Now Showing 3D Coverflow =================== */
.now-showing {
  position: relative;
  margin-bottom: 8px;
  overflow: visible;
}
.ns-scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  height: 320px;
  align-items: center;
  perspective: 1200px;
  /* Padding to allow first/last card to center */
  padding: 0 calc(50% - 90px);
}
.ns-scroller::-webkit-scrollbar { display: none; }

.ns-card {
  flex: 0 0 180px;
  width: 180px;
  height: 270px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
  scroll-snap-align: center;
  position: relative;
  cursor: pointer;
  margin: 0 -20px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s, box-shadow 0.3s;
  transform: scale(0.7) rotateY(0deg);
  opacity: 0.55;
  transform-origin: center center;
  will-change: transform, opacity;
}
.ns-card.is-active {
  transform: scale(1) rotateY(0deg);
  opacity: 1;
  z-index: 2;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.ns-card.is-left { transform: scale(0.72) rotateY(18deg); transform-origin: right center; }
.ns-card.is-right { transform: scale(0.72) rotateY(-18deg); transform-origin: left center; }

.ns-card__rank {
  position: absolute;
  left: -8px;
  bottom: -10px;
  font-size: 150px;
  font-weight: 900;
  color: #fff;
  opacity: 0.18;
  line-height: 0.85;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.ns-card.is-active .ns-card__rank {
  opacity: 0.25;
}
.ns-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column;
  gap: 4px;
  z-index: 3;
}
.ns-card__badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.ns-card__badge--imax { background: #fff; color: #000; }
.ns-card__badge--4dx { background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); }
.ns-card__badge--2d, .ns-card__badge--3d { background: #666; color: #fff; }
.ns-card__badge--hot { background: var(--primary); color: #fff; }

/* Tab strip (categories) */
.tab-strip {
  display: flex;
  gap: 24px;
  padding: 12px 40px;
  justify-content: center;
}
.tab-strip__item {
  font-size: 14px;
  color: var(--muted-fg);
  padding-bottom: 6px;
  position: relative;
  cursor: pointer;
}
.tab-strip__item.is-active {
  color: var(--fg);
  font-weight: 600;
}
.tab-strip__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 24px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(-50%);
}

/* Section header */
.section { padding: 12px 0; }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 12px;
}
.section__title { font-size: 16px; font-weight: 700; color: var(--fg); }
.section__more { font-size: 12px; color: var(--muted-fg); cursor: pointer; }
.section__more::after { content: " ›"; }

/* Movie card */
.movie-rail {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
  scroll-snap-type: x mandatory;
}
.movie-rail::-webkit-scrollbar { display: none; }
.movie-card {
  flex-shrink: 0;
  width: 130px;
  cursor: pointer;
  scroll-snap-align: start;
}
.movie-card__poster {
  width: 130px;
  height: 190px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.movie-card__badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
}
.movie-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.movie-card__meta { font-size: 10px; color: var(--muted-fg); margin-top: 2px; }

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px 20px;
}
.service-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--fg);
  text-align: center;
  cursor: pointer;
}
.service-item__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--primary);
}
.service-item__icon svg { width: 24px; height: 24px; }

/* Top5 */
.top5-rail {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 0 20px;
}
.top5-rail::-webkit-scrollbar { display: none; }
.top5-card {
  flex-shrink: 0;
  width: 168px;
  position: relative;
  cursor: pointer;
}
.top5-card__rank {
  position: absolute;
  left: -10px; bottom: 35px;
  font-size: 96px;
  font-weight: 800;
  color: var(--fg);
  -webkit-text-stroke: 2px var(--primary);
  -webkit-text-fill-color: transparent;
  line-height: 0.85;
  z-index: 1;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.top5-card__poster {
  margin-left: 40px;
  width: 128px;
  height: 180px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: var(--card);
}
.top5-card__title {
  margin-left: 40px;
  margin-top: 8px;
  width: 128px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top5-card__meta {
  margin-left: 40px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-fg);
}

/* Movie List */
.filter-row {
  display: flex; gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  flex-shrink: 0;
  flex-basis: auto;
  min-height: 52px;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .chip { flex-shrink: 0; }
.list-meta {
  padding: 4px 20px 8px;
  font-size: 12px;
  color: var(--muted-fg);
  flex-shrink: 0;
}
.list-meta strong { color: var(--fg); }
.movie-list-card {
  display: flex; gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.movie-list-card__poster {
  width: 88px; height: 120px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: var(--card);
  flex-shrink: 0;
}
.movie-list-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.movie-list-card__title { font-size: 15px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.movie-list-card__rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--accent-yellow); }
.movie-list-card__rating svg { width: 14px; height: 14px; }
.movie-list-card__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--muted-fg);
}
.movie-list-card__meta { font-size: 11px; color: var(--muted-fg); margin-top: 2px; }
.movie-list-card__cta {
  align-self: flex-start;
  margin-top: 6px;
  background: var(--primary);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* Movie Detail */
.detail-hero {
  height: 320px;
  position: relative;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 95%);
}
.detail-top-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.detail-top-overlay__btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  color: #fff;
  cursor: pointer;
}
.detail-top-overlay__btn svg { width: 18px; height: 18px; }
.detail-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  border: 2px solid #fff;
  display: grid; place-items: center;
  color: #fff;
  z-index: 5;
  cursor: pointer;
}
.detail-play svg { width: 24px; height: 24px; margin-left: 3px; }
.detail-title-block {
  padding: 0 20px;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: -40px;
  position: relative;
  z-index: 5;
}
.detail-title { font-size: 26px; font-weight: 700; color: var(--fg); line-height: 1.15; }
.detail-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted-fg); align-items: center; }
.detail-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-fg); }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-quick-actions {
  display: flex; gap: 8px;
  padding: 8px 20px;
}
.detail-quick-actions .chip { flex: 1; justify-content: center; }
.detail-quick-actions .btn--primary { flex: 2; height: 38px; font-size: 13px; }
.detail-tabs {
  display: flex;
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
}
.detail-tabs__item {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--muted-fg);
  padding: 8px 0;
  position: relative;
  cursor: pointer;
}
.detail-tabs__item.is-active { color: var(--fg); font-weight: 600; }
.detail-tabs__item.is-active::after {
  content: ""; position: absolute;
  left: 25%; right: 25%; bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}
.synopsis { padding: 14px 20px; }
.synopsis__title { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--fg); }
.synopsis__body { font-size: 13px; color: var(--muted-fg); line-height: 1.55; }
.detail-bottom-cta {
  padding: 12px 20px 20px;
  background: var(--card);
  position: sticky;
  bottom: 0;
}

/* Seat Map */
.countdown-bar {
  background: rgba(250,110,102,0.12);
  border-bottom: 1px solid rgba(250,110,102,0.3);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.countdown-bar__label { font-size: 12px; color: var(--muted-fg); }
.countdown-bar__time {
  font-size: 16px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.stepper {
  display: flex; justify-content: center; align-items: center;
  padding: 12px 20px;
  gap: 4px;
  flex-shrink: 0;
}
.stepper__step {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--muted-fg);
}
.stepper__step .dot {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--border);
  color: var(--muted-fg);
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.stepper__step.is-active .dot { background: var(--primary); color: #fff; }
.stepper__step.is-done .dot { background: var(--success); color: #fff; }
.stepper__bar { width: 24px; height: 1px; background: var(--border); }

.date-strip {
  display: flex; gap: 4px;
  padding: 0 20px;
  overflow-x: auto;
  flex-shrink: 0;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-pill {
  flex-shrink: 0;
  min-width: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  display: flex; flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--muted-fg);
  cursor: pointer;
  position: relative;
}
.date-pill strong { font-size: 16px; color: var(--muted-fg); margin: 2px 0; font-weight: 500; }
.date-pill.is-active strong { color: var(--fg); font-weight: 700; }
.date-pill.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.screen-curve {
  margin: 16px auto;
  width: 80%;
  height: 14px;
  background: linear-gradient(180deg, var(--primary) 0%, transparent 90%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.5;
  position: relative;
}
.screen-curve__label {
  position: absolute; bottom: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted-fg);
}

.seat-grid {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  align-items: center;
}
.seat-row { display: flex; gap: 8px; align-items: center; }
.seat-row__label {
  width: 16px; font-size: 11px; color: var(--muted-fg); text-align: center; font-weight: 500;
  flex-shrink: 0;
}

/* Theater-chair shape: cushion (main rounded body) + backrest (thin bar above) */
.seat {
  position: relative;
  width: 32px;
  height: 24px;             /* cushion height */
  margin-top: 7px;          /* reserve room for backrest + gap */
  border-radius: 8px 8px 4px 4px;
  background: var(--surface-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--fg);
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
/* Backrest — thin rounded bar above the cushion, inherits the seat color */
.seat::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 3px; right: 3px;
  height: 4px;
  background: inherit;
  border-radius: 3px 3px 1px 1px;
}
.seat:hover:not(.is-occupied):not(.is-aisle) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* State: occupied/booked — darker, dim */
.seat.is-occupied {
  background: var(--card);
  color: var(--muted-fg);
  cursor: not-allowed;
  opacity: 0.45;
}

/* State: selected — coral with glow */
.seat.is-selected {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(250,110,102,0.5);
}

/* State: VIP — lime accent */
.seat.is-vip {
  background: rgba(206,250,105,0.16);
  color: var(--accent-lime);
  outline: 1px solid var(--accent-lime);
}

/* State: Waku — purple */
.seat.is-waku {
  background: rgba(112,126,250,0.22);
  color: var(--accent-purple);
  outline: 1px solid rgba(112,126,250,0.6);
}

/* State: Sweetbox (Doki) — double-wide magenta for couples */
.seat.is-doki {
  background: rgba(228,118,250,0.18);
  color: var(--accent-magenta);
  outline: 1px solid rgba(228,118,250,0.55);
  width: 76px;             /* double-wide for couples */
  letter-spacing: 0.5px;
}

/* State: Kira — premium coral */
.seat.is-kira {
  background: rgba(250,110,102,0.16);
  color: var(--primary);
  outline: 1px solid rgba(250,110,102,0.6);
  width: 76px;
}

/* State: wheelchair — accent yellow icon, dashed outline */
.seat.is-wheel {
  background: rgba(250,220,101,0.1);
  outline: 1px dashed var(--accent-yellow);
  color: var(--accent-yellow);
}

/* State: aisle — invisible spacer */
.seat.is-aisle { background: transparent; cursor: default; visibility: hidden; }
.seat.is-aisle::before { display: none; }

.legend {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 10px 20px 12px;
  flex-shrink: 0;
}
.legend__row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted-fg); }

/* Mini chair-shaped swatch matching real seats */
.legend__swatch {
  position: relative;
  width: 16px;
  height: 12px;
  margin-top: 4px;
  background: var(--surface-deep);
  border-radius: 4px 4px 2px 2px;
  flex-shrink: 0;
}
.legend__swatch::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px; right: 2px;
  height: 2px;
  background: inherit;
  border-radius: 2px 2px 1px 1px;
}
.legend__swatch.s-selected { background: var(--primary); }
.legend__swatch.s-occupied { background: var(--card); opacity: 0.45; }
.legend__swatch.s-vip { background: rgba(206,250,105,0.3); outline: 1px solid var(--accent-lime); }
.legend__swatch.s-waku { background: rgba(112,126,250,0.3); outline: 1px solid var(--accent-purple); }
.legend__swatch.s-doki { background: rgba(228,118,250,0.3); outline: 1px solid var(--accent-magenta); }
.legend__swatch.s-kira { background: rgba(250,110,102,0.3); outline: 1px solid var(--primary); }
.legend__swatch.s-wheel { background: rgba(250,220,101,0.2); outline: 1px dashed var(--accent-yellow); }

.summary-bar {
  background: var(--card);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.summary-bar__info { flex: 1; display: flex; flex-direction: column; }
.summary-bar__label { font-size: 11px; color: var(--muted-fg); }
.summary-bar__total { font-size: 18px; font-weight: 700; color: var(--fg); }
.summary-bar__cta {
  background: var(--primary); color: #fff;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}

/* Checkout */
.checkout-section { padding: 12px 20px; }
.checkout-section__title { font-size: 13px; font-weight: 700; color: var(--fg); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.checkout-card {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  display: flex; gap: 12px;
}
.checkout-poster { width: 60px; height: 80px; border-radius: 6px; background-size: cover; background-color: var(--surface-deep); }
.checkout-info { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted-fg); }
.checkout-info__title { font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.checkout-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; color: var(--fg); }
.checkout-row__label { color: var(--muted-fg); }
.checkout-row__sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Voucher */
.voucher {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.voucher svg { width: 18px; height: 18px; color: var(--primary); }
.voucher__label { font-size: 13px; flex: 1; color: var(--fg); }
.voucher__arrow svg { width: 14px; color: var(--muted-fg); }

/* Payment */
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; }
.payment-option {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  cursor: pointer;
  position: relative;
}
.payment-option.is-selected { border-color: var(--primary); }
.payment-option.is-selected::after {
  content: "✓";
  position: absolute; top: 8px; right: 10px;
  width: 18px; height: 18px;
  background: var(--primary); color: #fff;
  border-radius: 999px;
  font-size: 11px;
  display: grid; place-items: center;
}
.payment-option__icon {
  width: 40px; height: 28px;
  border-radius: 6px;
  background: var(--surface-deep);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.payment-option__name { font-size: 13px; font-weight: 600; color: var(--fg); }
.payment-option__sub { font-size: 11px; color: var(--muted-fg); }

/* Confirmation */
.confirm {
  flex: 1; display: flex; flex-direction: column;
  align-items: center;
  padding: 32px 24px 16px;
  text-align: center;
}
.confirm__check {
  width: 96px; height: 96px;
  border-radius: 999px;
  background: var(--success);
  display: grid; place-items: center;
  margin-bottom: 16px;
  position: relative;
}
.confirm__check svg { width: 48px; height: 48px; color: #fff; stroke-width: 3; }
.confirm__check::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  background: var(--success);
  opacity: 0.2;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}
.confirm__title { font-size: 22px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.confirm__sub { font-size: 14px; color: var(--muted-fg); }
.confirm__card { width: 100%; }

/* QR Ticket */
.qr-wrap {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 20px;
  gap: 16px;
}
.qr-mhead {
  width: 100%;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
}
.qr-canvas {
  width: 220px; height: 220px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: grid; place-items: center;
}
.qr-canvas__inner {
  width: 100%; height: 100%;
  background-image:
    radial-gradient(circle at 30% 30%, #000 8px, transparent 8px),
    radial-gradient(circle at 70% 30%, #000 8px, transparent 8px),
    radial-gradient(circle at 30% 70%, #000 8px, transparent 8px),
    repeating-conic-gradient(from 0deg, #000 0% 5%, #fff 5% 10%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 12px 12px;
  border-radius: 4px;
}
.qr-info { width: 100%; background: var(--card); border-radius: 12px; padding: 14px; }

/* ===================== User Profile (EN_23) ===================== */

/* Avatar row: avatar + name/handle/followers + edit btn */
.pf-avatar-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 20px 16px;
  flex-shrink: 0;
}
.pf-avatar {
  width: 72px; height: 72px;
  border-radius: 999px;
  background: #333;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.pf-avatar svg { width: 36px; height: 36px; color: #fff; }
.pf-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-name { font-size: 18px; font-weight: 900; color: var(--fg); line-height: 1.15; }
.pf-handle { font-size: 12px; color: var(--muted-fg); }
.pf-followers {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg); font-weight: 500;
  margin-top: 2px;
}
.pf-followers strong { font-weight: 700; }
.pf-dot { color: var(--muted-fg); }
.pf-edit {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--fg);
  flex-shrink: 0;
}
.pf-edit:hover { background: var(--card); }
.pf-edit svg { width: 16px; height: 16px; }

/* Stats: 3 columns separated by vertical dividers */
.pf-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  gap: 8px;
  flex-shrink: 0;
}
.pf-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
}
.pf-stat strong {
  font-size: 22px;
  font-weight: 900;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pf-stat span {
  font-size: 11px;
  color: var(--muted-fg);
}
.pf-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
  flex-shrink: 0;
}

.pf-section {
  padding: 0 20px;
  flex-shrink: 0;
}
.pf-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 10px;
}
.pf-dev-note {
  font-size: 9px;
  color: var(--muted-fg);
  margin-top: 8px;
  font-style: italic;
}

/* WAON Point card — purple bordered, gradient accent */
.waon-card {
  background: var(--card);
  border-radius: 10px;
  border: 1.5px solid var(--accent-purple);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.waon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(112,126,250,0.12), transparent 60%);
  pointer-events: none;
}
.waon-card > * { position: relative; z-index: 1; }
.waon-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.waon-card__icon {
  width: 28px; height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.waon-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.waon-card__tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-purple);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.waon-card__balance {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.waon-card__balance strong {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent-purple);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.waon-card__unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-purple);
  margin-bottom: 4px;
}
.waon-card__sub {
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: -4px;
}
.waon-card__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(76,175,80,0.08);
  border: 1px solid var(--success);
  color: var(--success);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.waon-card__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.waon-card__progress-lbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted-fg);
}
.waon-card__progress-lbl strong { color: var(--fg); font-weight: 700; }
.waon-card__progress-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-purple);
}
.waon-card__progress-bar {
  height: 6px;
  background: var(--surface-deep);
  border-radius: 999px;
  overflow: hidden;
}
.waon-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-purple), var(--primary));
  border-radius: 999px;
}
.waon-card__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

/* Genres Watched */
.genres-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 0;
}
.genres-pie {
  width: 100px; height: 100px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      #FA6E66 0% 35%,
      #73E5EA 35% 63%,
      #FADC65 63% 85%,
      #707EFA 85% 100%
    );
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.genres-pie::before {
  content: "";
  position: absolute;
  inset: 22%;
  background: var(--card);
  border-radius: 50%;
}
.genres-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.genres-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg);
}
.genres-legend__item .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.genres-legend__item strong {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Badges */
.badges-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.badge-circle {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface-deep);
  display: grid;
  place-items: center;
  color: var(--muted-fg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.badge-circle svg { width: 20px; height: 20px; }
.badge-circle.is-earned {
  background: rgba(250,220,101,0.12);
  border-color: var(--accent-yellow);
  box-shadow: 0 0 0 1px rgba(250,220,101,0.2), 0 4px 12px rgba(250,220,101,0.15);
}

/* Refer Friends */
.refer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.refer-code {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  font-family: 'ABC Diatype', monospace;
  letter-spacing: 0.02em;
}
.refer-stats {
  font-size: 11px;
  color: var(--muted-fg);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.refer-stats strong { color: var(--fg); font-weight: 700; }

.settings-section { padding: 8px 16px; }
.settings-section__title { font-size: 12px; color: var(--muted-fg); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 4px; }
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px;
  background: var(--card);
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.settings-section .settings-row:first-of-type { border-radius: 12px 12px 0 0; }
.settings-section .settings-row:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; }
.settings-section .settings-row:only-of-type { border-radius: 12px; }
.settings-row__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-deep); display: grid; place-items: center; color: var(--primary); }
.settings-row__icon svg { width: 16px; height: 16px; }
.settings-row__main { flex: 1; }
.settings-row__title { font-size: 14px; color: var(--fg); }
.settings-row__sub { font-size: 11px; color: var(--muted-fg); }
.toggle-switch {
  width: 40px; height: 24px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.toggle-switch.is-on { background: var(--primary); }
.toggle-switch.is-on::after { transform: translateX(16px); }

/* News & Offer Hub */
.news-tabs {
  display: flex; gap: 24px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.news-tabs__item { font-size: 14px; color: var(--muted-fg); padding-bottom: 6px; position: relative; cursor: pointer; }
.news-tabs__item.is-active { color: var(--fg); font-weight: 600; }
.news-tabs__item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }

.news-card {
  background: var(--card); border-radius: 12px; overflow: hidden;
  margin: 0 20px 12px;
  display: flex; gap: 12px;
}
.news-card__img {
  width: 100px; height: 80px;
  background-size: cover; background-position: center;
  background-color: var(--surface-deep);
  flex-shrink: 0;
}
.news-card__body { padding: 8px 12px 8px 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.news-card__cat { font-size: 10px; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.news-card__title { font-size: 13px; color: var(--fg); font-weight: 600; line-height: 1.3; }
.news-card__date { font-size: 10px; color: var(--muted-fg); }

/* ===================== Showtime (nYst1) ===================== */
.st-movie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 16px;
  flex-shrink: 0;
}
.st-movie__poster {
  width: 50px; height: 70px;
  border-radius: 8px;
  flex-shrink: 0;
}
.st-movie__info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.st-movie__title { font-size: 16px; font-weight: 600; color: var(--fg); }
.st-movie__meta { font-size: 13px; color: var(--muted-fg); }
.st-movie__rating {
  display: flex; align-items: center; gap: 4px;
  background: var(--card);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}

.st-section {
  padding: 0 20px 16px;
  flex-shrink: 0;
}
.st-section__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-fg);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

/* Date row — 5 day pills with cornerRadius 8 */
.st-dates { display: flex; gap: 8px; }
.st-date {
  flex: 1;
  height: 64px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.st-date span { font-size: 11px; color: var(--muted-fg); }
.st-date strong { font-size: 18px; font-weight: 600; color: var(--fg); }
.st-date.is-active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(250,110,102,0.35);
}
.st-date.is-active span { color: rgba(255,255,255,0.85); }
.st-date.is-active strong { color: #fff; font-weight: 700; }
.st-date:hover:not(.is-active) { border-color: var(--muted-fg); }

/* Theater + format + times */
.st-theater__name {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 14px;
}
.st-format {
  margin-bottom: 14px;
}
.st-format__label {
  font-size: 13px;
  color: var(--muted-fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.st-format__tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-peach);
  background: rgba(250,171,103,0.12);
  padding: 2px 8px;
  border-radius: 999px;
}
.st-times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-time {
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s;
}
.st-time:hover { border-color: var(--muted-fg); }
.st-time.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(250,110,102,0.08);
}

/* Price bar at bottom */
.st-price {
  margin: 16px 20px 20px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.st-price > div { display: flex; flex-direction: column; gap: 2px; }
.st-price__lbl { font-size: 12px; color: var(--muted-fg); }
.st-price__imax { font-size: 15px; font-weight: 600; color: var(--accent-peach); }

/* ===================== Age Confirm Modal T18 (Y9RFl) ===================== */
.age-modal {
  padding: 24px 20px 20px;
  gap: 16px;
  text-align: left;
  align-items: stretch;
}
.age-modal__header {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
}
.age-modal__header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.age-modal__close {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--muted-fg);
  border-radius: 999px;
}
.age-modal__close:hover { color: var(--fg); background: rgba(255,255,255,0.05); }
.age-modal__close svg { width: 20px; height: 20px; }

.age-modal__badge {
  align-self: flex-start;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.age-modal__body {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.55;
  white-space: pre-line;
}

.age-modal__notes {
  background: var(--surface-deep);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted-fg);
}
.age-modal__notes-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.age-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.age-modal__btn {
  flex: 1;
  height: 48px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.age-modal__btn:active { transform: scale(0.98); }
.age-modal__btn--cancel {
  background: var(--border);
  color: var(--fg);
}
.age-modal__btn--confirm {
  background: var(--primary);
  color: #fff;
}
.age-modal__btn--confirm:hover { opacity: 0.92; }

/* Modal overlay — sits above the current screen */
.modal-screen {
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  z-index: 100;
}
.modal-screen[hidden] { display: none; }
.modal-screen .modal-card,
.modal-screen .age-modal {
  animation: modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card {
  background: var(--card);
  color: var(--fg);
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: center;
  width: 100%;
  display: flex; flex-direction: column;
  gap: 14px;
  align-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.modal-card__icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(239,68,68,0.15);
  display: grid; place-items: center;
  color: var(--error);
}
.modal-card__icon svg { width: 32px; height: 32px; }
.modal-card h3 { font-size: 18px; font-weight: 700; color: var(--fg); }
.modal-card p { font-size: 13px; color: var(--muted-fg); line-height: 1.5; }

/* ===================== Genre Selection (M2 / eGJGf) ===================== */
.genre-topbar {
  display: flex;
  align-items: center;
  padding: 16px;
  flex-shrink: 0;
}
.genre-skip {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-fg);
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s;
}
.genre-skip:hover { color: var(--fg); }

.genre-title-block {
  padding: 8px 20px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.genre-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.genre-subtitle {
  font-size: 13px;
  color: var(--muted-fg);
  font-weight: 400;
  line-height: 1.4;
}

/* 3×3 grid — 104×104 tiles, gap 10, centered */
.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 104px);
  justify-content: center;
  gap: 10px;
  padding: 16px;
  flex-shrink: 0;
}

.genre-tile {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  cursor: pointer;
  color: var(--fg);
  transition: all 0.15s ease;
}
.genre-tile svg:first-child { width: 22px; height: 22px; }
.genre-tile__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  text-align: center;
  line-height: 1.2;
}
.genre-tile__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 14px !important;
  height: 14px !important;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}

/* Hover: subtle lift */
.genre-tile:hover:not(.is-selected) {
  border-color: var(--muted-fg);
  background: rgba(255, 255, 255, 0.03);
}

/* Selected state: solid coral background, check icon visible, label heavier */
.genre-tile.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(250,110,102,0.35);
}
.genre-tile.is-selected .genre-tile__label {
  color: #fff;
  font-weight: 600;
}
.genre-tile.is-selected .genre-tile__check { opacity: 1; }

/* Footer: counter + button stacked */
.genre-footer {
  margin-top: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.genre-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.genre-counter__main {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
}
.genre-counter__min {
  font-size: 11px;
  color: var(--muted-fg);
}

/* Loyalty Card */
.loyalty-card {
  margin: 8px 16px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FA6E66 0%, #FAAB67 60%, #FADC65 100%);
  color: #000;
}
.loyalty-card__tier { font-size: 11px; letter-spacing: 0.15em; opacity: 0.85; font-weight: 600; }
.loyalty-card__name { font-size: 22px; font-weight: 800; margin-top: 4px; }
.loyalty-card__points { font-size: 12px; margin-top: 16px; opacity: 0.7; }
.loyalty-card__count { font-size: 28px; font-weight: 700; }
.loyalty-progress {
  margin: 16px 16px 8px;
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
}
.progress-bar {
  height: 6px;
  background: var(--surface-deep);
  border-radius: 999px;
  margin: 8px 0;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent-yellow));
  border-radius: 999px;
}

/* Helpers */
.flex-1 { flex: 1; }
.text-muted { color: var(--muted-fg); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }

/* Responsive: hide sidebar on small screens */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .phone { transform: scale(0.85); transform-origin: center; }
}

/* ========================================================================
   HOME — Sprint 5 additions (theaterPill, tab panels, Special, Coming Soon,
   Events, AEON MALL TODAY)
   ======================================================================== */

/* Theater pill row (under top bar) */
.theater-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 20px 12px;
}
.theater-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--fg);
}
.theater-pill__pin { width: 14px; height: 14px; color: var(--primary); }
.theater-pill__name { font-weight: 700; }
.theater-pill__dist { color: var(--muted-fg); font-weight: 400; font-size: 11px; }
.theater-pill__chev { width: 14px; height: 14px; color: var(--muted-fg); margin-left: 2px; }
.theater-pill__search {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.theater-pill__search svg { width: 18px; height: 18px; color: var(--fg); }

/* Hero promo card variants */
.hero-promo__card--flat {
  background: var(--primary);
}
.hero-promo__card--dark {
  background: var(--card);
}
.hero-promo__card--green {
  background: #62D7A9;
}
.hero-promo__card--image {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 0;
}
.hero-promo__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
}
.hero-promo__content {
  position: relative;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}

/* Home tab panels */
.home-tabs__panels { position: relative; }
.home-tabs__panel { display: none; }
.home-tabs__panel.is-active { display: block; }

/* ---- SPECIAL panel ---- */
.special-spotlight {
  margin: 0 20px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 200px;
}
.special-spotlight__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
}
.special-spotlight__content {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 200px;
  justify-content: flex-end;
}
.special-spotlight__pill {
  display: inline-block;
  align-self: flex-start;
  background: var(--primary);
  color: #0D0D0D;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.special-spotlight__title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.special-spotlight__sub {
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
}
.special-spotlight__ctaRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.special-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #0D0D0D;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.special-spotlight__valid {
  font-size: 11px;
  color: #fff;
  opacity: 0.8;
}

.special-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 10px;
}
.special-subhead__ttl {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.special-subhead__see {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.deals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px;
}
.deal-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
}
.deal-card__top {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.deal-card__price {
  font-size: 32px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.1;
  margin-top: 4px;
}
.deal-card__name {
  font-size: 11px;
  color: var(--fg);
  opacity: 0.8;
}

.perks-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
}
.perks-row::-webkit-scrollbar { display: none; }
.perk-card {
  flex-shrink: 0;
  width: 240px;
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.perk-card__poster {
  width: 56px; height: 76px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.perk-card__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.perk-card__tag {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.perk-card__ttl {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
}
.perk-card__sub {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.7;
}

.screening-banner {
  margin: 0 20px;
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 140px;
}
.screening-banner__poster {
  width: 80px; height: 110px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.screening-banner__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.screening-banner__tag {
  font-size: 9px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: 0.06em;
}
.screening-banner__ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.screening-banner__when {
  font-size: 11px;
  color: var(--fg);
  opacity: 0.8;
}
.screening-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  margin-top: 4px;
  align-self: flex-start;
  cursor: pointer;
}

/* ---- COMING SOON panel ---- */
.cs-date-chips {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  overflow-x: auto;
}
.cs-date-chips::-webkit-scrollbar { display: none; }
.cs-date-chip {
  flex-shrink: 0;
  width: 48px;
  height: 56px;
  border-radius: 999px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.cs-date-chip.is-active {
  background: var(--primary);
}
.cs-date-chip .d {
  font-size: 14px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1;
}
.cs-date-chip.is-active .d { color: #fff; }
.cs-date-chip .m {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted-fg);
  letter-spacing: 0.04em;
}
.cs-date-chip.is-active .m { color: #fff; opacity: 0.9; }

.cs-hero {
  margin: 0 20px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  cursor: pointer;
}
.cs-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
}
.cs-hero__content {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 220px;
  justify-content: flex-end;
}
.cs-hero__top {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.cs-hero__countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #0D0D0D;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 999px;
}
.cs-hero__fmt {
  background: #fff;
  color: #0D0D0D;
  font-size: 9px;
  font-weight: 900;
  padding: 4px 6px;
  border-radius: 4px;
}
.cs-hero__title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
}
.cs-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: #fff;
  opacity: 0.85;
}
.cs-hero__cta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.cs-hero__primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.cs-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.cs-month {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 10px;
}
.cs-month__name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.cs-month__line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
}
:root[data-theme="light"] .cs-month__line { background: rgba(0,0,0,0.1); }
.cs-month__cnt {
  font-size: 11px;
  color: var(--muted-fg);
}

.cs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--card);
  border-radius: 12px;
  cursor: pointer;
}
.cs-row__poster {
  width: 60px;
  height: 80px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.cs-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.cs-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cs-row__date {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
}
.cs-row__genre {
  font-size: 11px;
  color: var(--muted-fg);
}
.cs-row__age,
.cs-row__fmt {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
}
.cs-row__age {
  background: rgba(255,255,255,0.15);
  color: var(--fg);
}
:root[data-theme="light"] .cs-row__age { background: rgba(0,0,0,0.08); }
.cs-row__fmt {
  background: #fff;
  color: #0D0D0D;
}
.cs-row__tx {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.6;
}
.cs-row__bell {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
:root[data-theme="light"] .cs-row__bell { background: rgba(0,0,0,0.05); }
.cs-row__bell.is-on {
  background: rgba(250,110,102,0.2);
  color: var(--primary);
}

.cs-later-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
}
.cs-later-row::-webkit-scrollbar { display: none; }
.cs-later-card {
  flex-shrink: 0;
  width: 130px;
  cursor: pointer;
}
.cs-later-card__poster {
  width: 130px;
  height: 180px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  margin-bottom: 8px;
}
.cs-later-card__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
}
.cs-later-card__date {
  font-size: 10px;
  font-weight: 900;
  color: var(--primary);
}

/* ---- EVENTS section ---- */
.events-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
}
.events-row::-webkit-scrollbar { display: none; }
.event-card {
  flex-shrink: 0;
  width: 280px;
  min-height: 150px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.event-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
}
.event-card__content {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-height: 150px;
  justify-content: flex-end;
}
.event-card__tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.event-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.event-card__sub {
  font-size: 11px;
  color: #fff;
  opacity: 0.85;
}
.event-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  margin-top: 6px;
  backdrop-filter: blur(8px);
  cursor: pointer;
}

/* ---- AEON MALL TODAY ---- */
.amt-head {
  padding: 0 20px 8px;
}
.amt-head__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.amt-head__title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--fg);
}
.amt-head__mall {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.amt-head__sub {
  font-size: 11px;
  color: var(--muted-fg);
}
.amt-tabs {
  display: flex;
  gap: 6px;
  padding: 0 20px;
  overflow-x: auto;
  margin-bottom: 10px;
}
.amt-tabs::-webkit-scrollbar { display: none; }
.amt-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.amt-tab.is-active {
  background: var(--primary);
  color: #fff;
}
.amt-tab.is-active svg { color: #fff !important; }

.amt-coupons {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
  margin-bottom: 12px;
}
.amt-coupons::-webkit-scrollbar { display: none; }
.amt-coupon {
  flex-shrink: 0;
  width: 220px;
  height: 140px;
  background: var(--card);
  border-radius: 14px;
  display: flex;
  overflow: hidden;
}
.amt-coupon__stripe { width: 6px; }
.amt-coupon__content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.amt-coupon__brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.amt-coupon__logo {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.amt-coupon__brand-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
}
.amt-coupon__off {
  font-size: 24px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.1;
}
.amt-coupon__desc {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.6;
}
.amt-coupon__claim {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  margin-top: 4px;
  cursor: pointer;
}

.amt-event-strip {
  padding: 0 20px;
  margin-bottom: 10px;
}
.amt-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border-radius: 12px;
  min-height: 92px;
}
.amt-event__date {
  width: 56px;
  height: 70px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}
.amt-event__d {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.amt-event__m {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}
.amt-event__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.amt-event__tag {
  font-size: 9px;
  font-weight: 900;
  color: var(--accent-yellow);
  letter-spacing: 0.06em;
}
.amt-event__t {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}
.amt-event__loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted-fg);
}
.amt-event__rsvp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(250,110,102,0.2);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

.amt-see-all {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px;
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
}

/* Recommend: taste chips + quick action icons (Node 7Ba46) */
.taste-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px 10px;
  flex-wrap: wrap;
}
.taste-chips__based {
  font-size: 11px;
  color: var(--muted-fg);
}
.taste-chip {
  background: rgba(250, 110, 102, 0.2);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.movie-card__qa {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

/* Events: full-width single card variant (Node 7Ba46) */
.event-card--wide {
  width: calc(100% - 40px) !important;
  min-height: 140px;
}

/* ========================================================================
   Services — At the cinema (Node 7Ba46 section-Services)
   ======================================================================== */
.svc-section { padding-top: 16px; }

.svc-head {
  padding: 0 20px 12px;
}
.svc-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.svc-head__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}
.svc-head__more {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}
.svc-head__sub {
  font-size: 11px;
  color: var(--muted-fg);
}

/* Seat cards (horizontal scroll) */
.svc-seats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 20px 16px;
}
.svc-seats::-webkit-scrollbar { display: none; }
.svc-seat-card {
  flex-shrink: 0;
  width: 138px;
  height: 146px;
  background: var(--card);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.svc-seat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: auto;
}
.svc-seat-card__icon svg { width: 22px; height: 22px; }
.svc-seat-card__title {
  font-size: 14px;
  font-weight: 900;
  color: var(--fg);
  margin-top: 12px;
}
.svc-seat-card__sub {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.7;
  margin-top: 2px;
}

/* Amenities chips */
.svc-amenities-head {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--fg);
  padding: 4px 20px 8px;
}
.svc-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 20px 14px;
}
.svc-chips::-webkit-scrollbar { display: none; }
.svc-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  color: var(--fg);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Format pills */
.svc-formats {
  display: flex;
  gap: 6px;
  padding: 0 20px 16px;
  flex-wrap: wrap;
}
.svc-fmt {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 6px;
}
.svc-fmt--2d {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
}
:root[data-theme="light"] .svc-fmt--2d { background: rgba(0, 0, 0, 0.06); }
.svc-fmt--imax {
  background: #FFFFFF;
  color: #0D0D0D;
}
.svc-fmt--4dx {
  background: var(--primary);
  color: #FFFFFF;
}
.svc-fmt--sweetbox {
  background: #FFC857;
  color: #0D0D0D;
}
.svc-fmt--rent {
  background: rgba(98, 215, 169, 0.2);
  color: #62D7A9;
}

/* Member benefits */
.svc-benefits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 10px;
}
.svc-benefits-head__ttl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.svc-benefits-head__more {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}
.svc-benefits {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px 4px;
}
.svc-benefits::-webkit-scrollbar { display: none; }
.svc-benefit {
  flex-shrink: 0;
  width: 240px;
  height: 300px;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-benefit__visual {
  height: 140px;
  position: relative;
  overflow: hidden;
}
.svc-benefit__visual--brand {
  background: #0D0D0D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-benefit__logoBig {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.1;
}
.svc-benefit__waon {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFD166;
  color: #0D0D0D;
  font-size: 9px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.svc-benefit__visual--japan {
  background: #0F1320;
  position: relative;
}
.svc-benefit__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.7;
}
.svc-benefit__orb--1 {
  top: -10px; left: 12px;
  width: 70px; height: 70px;
  background: var(--primary);
}
.svc-benefit__orb--2 {
  bottom: 12px; right: 30px;
  width: 50px; height: 50px;
  background: #62D7A9;
}
.svc-benefit__orb--3 {
  top: 50%; right: 12px;
  width: 40px; height: 40px;
  background: #9EA8FF;
}
.svc-benefit__kanji {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.svc-benefit__visual--drinks {
  background: linear-gradient(135deg, #FFB088 0%, #FFD166 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
}
.svc-benefit__drink {
  width: 60px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.svc-benefit__drink span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.svc-benefit__churros {
  font-size: 40px;
  line-height: 1;
}
.svc-benefit__content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-benefit__tag {
  align-self: flex-start;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
}
.svc-benefit__title {
  font-size: 14px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.2;
}
.svc-benefit__desc {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.75;
  line-height: 1.4;
}

/* Services sub-tabs (3 tab: Tiện ích / Ưu đãi / Quyền lợi) */
.svc-subtabs {
  display: flex;
  gap: 6px;
  padding: 0 20px 14px;
}
.svc-subtab {
  flex: 1;
  background: var(--card);
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms;
}
.svc-subtab.is-active {
  background: var(--primary);
  color: #fff;
}
.svc-panels { position: relative; }
.svc-panel { display: none; }
.svc-panel.is-active { display: block; }

/* Real cinema features (Tiện ích panel) — photo + Vietnamese description */
.svc-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 0;
}
.svc-feature {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  min-height: 96px;
}
.svc-feature__img {
  width: 110px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #0D0D0D;
}
.svc-feature__body {
  flex: 1;
  min-width: 0;
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.svc-feature__body h5 {
  font-size: 13px;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.2;
}
.svc-feature__body p {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.7;
  line-height: 1.45;
}

/* Offers panel — promo cards row */
.svc-offers {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 20px 4px;
}
.svc-offers::-webkit-scrollbar { display: none; }
.svc-offer-card {
  flex-shrink: 0;
  width: 200px;
  height: 110px;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.svc-offer-card__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  opacity: 0.95;
}
.svc-offer-card__big {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.svc-offer-card__sub {
  font-size: 10px;
  opacity: 0.85;
}

/* Home — News & Promotions hub (2-tab toggle, in-place swap) */
.hub-tabs {
  display: flex;
  gap: 20px;
  padding: 0 20px 12px;
  font-size: 13px;
}
.hub-tab {
  color: var(--muted-fg);
  font-weight: 400;
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.hub-tab.is-active {
  color: var(--fg);
  font-weight: 700;
  border-bottom-color: var(--primary);
}
.hub-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 20px;
}
.hub-row::-webkit-scrollbar { display: none; }
.hub-panel { display: none; }
.hub-panel.is-active { display: flex; }
.hub-card {
  flex-shrink: 0;
  width: 200px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.hub-card__thumb {
  position: relative;
  width: 200px;
  height: 112px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
  margin-bottom: 8px;
}
.hub-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
}
.hub-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-card__date {
  font-size: 11px;
  color: var(--muted-fg);
  margin-top: 2px;
}

/* ========================================================================
   News / Promotions / Events — View All screens (H2/H3/H4)
   ======================================================================== */

/* Tab strip (3 tab: News / Promotions / Events) */
.pn-tabstrip {
  display: flex;
  padding: 0 20px;
  gap: 28px;
  border-bottom: 1px solid var(--border);
}
.pn-tab {
  position: relative;
  padding: 14px 0;
  font-size: 14px;
  line-height: 1;
  color: var(--muted-fg);
  cursor: pointer;
  background: transparent;
}
.pn-tab.is-active {
  color: var(--fg);
  font-weight: 700;
}
.pn-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 32px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(-50%);
}

/* Filter chips row */
.pn-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.pn-filters::-webkit-scrollbar { display: none; }
.pn-chip {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  background: var(--card);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pn-chip.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.pn-divider {
  height: 1px;
  background: var(--border);
  margin: 0 20px;
}

/* News list (H2) */
.pn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 0;
}
.news-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.news-row__thumb {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  background-size: cover;
  background-position: center;
  background-color: #0D0D0D;
  border-radius: 10px;
  margin: 8px 0 8px 8px;
}
.news-row__body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.news-row__tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.news-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-row__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-fg);
}

/* Promotions grid (H3) — 2 columns */
.pn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 20px 0;
}
.promo-card {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.promo-card__image {
  position: relative;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: #0D0D0D;
}
.promo-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
}
.promo-card__info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promo-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.promo-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted-fg);
}

/* Events list (H4) */
.pn-events {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 20px 0;
}
.event-row {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
}
.event-row__banner {
  position: relative;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: #0D0D0D;
}
.event-row__date {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(13, 13, 13, 0.9);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.event-row__d {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.event-row__m {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
}
.event-row__status {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.event-row__info {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-row__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
}
.event-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted-fg);
}
.event-row__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.event-row__rsvp,
.event-row__share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.event-row__rsvp {
  background: var(--primary);
  color: #0D0D0D;
}
.event-row__share {
  background: #262626;
  color: #fff;
}
:root[data-theme="light"] .event-row__share { background: var(--card); color: var(--fg); }

/* Pagination row */
.pn-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
}
.pn-page,
.pn-page-next {
  min-width: 32px;
  height: 32px;
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.pn-page.is-active {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   Theater List (11) — location + tabs + theater cards
   ============================================================ */
.thl-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}
.thl-topbar__back, .thl-topbar__action {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.thl-topbar__back i, .thl-topbar__action i { width: 18px; height: 18px; color: var(--fg); }
.thl-topbar__title { flex: 1; font-size: 17px; font-weight: 700; color: var(--fg); }

.thl-location {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 12px;
}
.thl-location__ic { width: 14px; height: 14px; color: var(--primary); flex-shrink: 0; }
.thl-location__lbl { color: var(--muted-fg); }
.thl-location__val { color: var(--fg); font-weight: 600; flex: 1; }
.thl-location__change { color: var(--primary); font-weight: 700; cursor: pointer; }

.thl-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 20px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thl-tabs::-webkit-scrollbar { display: none; }
.thl-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.thl-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.thl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 20px 16px;
}
.thl-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.thl-card__thumb {
  width: 56px; height: 56px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.thl-card__thumb i { width: 24px; height: 24px; }
.thl-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.thl-card__name { font-size: 14px; font-weight: 700; color: var(--fg); }
.thl-card__addr {
  font-size: 11px;
  color: var(--muted-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thl-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thl-card__dist {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--primary);
  font-weight: 700;
}
.thl-card__dist i { width: 10px; height: 10px; }
.thl-card__rooms { font-size: 10px; color: var(--muted-fg); }
.thl-card__badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  color: var(--fg);
  letter-spacing: 0.04em;
}
.thl-card__badge--imax {
  background: var(--accent-yellow);
  border-color: transparent;
  color: #0D0D0D;
}
.thl-card__chev { width: 16px; height: 16px; color: var(--muted-fg); flex-shrink: 0; }

/* ============================================================
   Theater Detail (12) — info rows + CTAs + movies grid + facilities
   ============================================================ */
.thd-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}
.thd-topbar__back, .thd-topbar__heart {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.thd-topbar__back i, .thd-topbar__heart i { width: 18px; height: 18px; color: var(--fg); }
.thd-topbar__title { flex: 1; font-size: 15px; font-weight: 700; color: var(--fg); }

.thd-hero {
  height: 100px;
  margin: 0 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #73E5EA 0%, #707EFA 100%);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.8);
}
.thd-hero i { width: 48px; height: 48px; }

.thd-info {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 20px 8px;
}
.thd-info__row { display: flex; align-items: center; gap: 12px; }
.thd-info__ic { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.thd-info__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.thd-info__title { font-size: 13px; font-weight: 700; color: var(--fg); }
.thd-info__sub { font-size: 11px; color: var(--muted-fg); }

.thd-cta {
  display: flex;
  gap: 10px;
  padding: 8px 20px 16px;
}
.thd-cta__primary, .thd-cta__secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.thd-cta__primary { background: var(--primary); color: #fff; }
.thd-cta__secondary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.thd-cta__primary i, .thd-cta__secondary i { width: 14px; height: 14px; }

.thd-section { padding: 8px 20px 12px; }
.thd-section__title { font-size: 14px; font-weight: 700; color: var(--fg); margin-bottom: 10px; }
.thd-movies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.thd-movie { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.thd-movie__poster {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
}
.thd-movie__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thd-movie__meta {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  font-size: 9px;
  color: var(--muted-fg);
}
.thd-movie__badge {
  background: var(--primary);
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
}

.thd-facilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.thd-facility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--fg);
  text-align: center;
}
.thd-facility i { width: 18px; height: 18px; color: var(--primary); }

/* ============================================================
   Map View (33) — faux map canvas with pins + route + sticky card
   ============================================================ */
.mapv-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  position: relative;
  z-index: 2;
}
.mapv-topbar__back, .mapv-topbar__action {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.mapv-topbar__back i, .mapv-topbar__action i { width: 18px; height: 18px; color: var(--fg); }
.mapv-topbar__title { flex: 1; font-size: 17px; font-weight: 700; color: var(--fg); }

.mapv-canvas {
  position: relative;
  flex: 1;
  margin: 0 20px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(115,229,234,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(112,126,250,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0F1418 0%, #1A1F26 100%);
  min-height: 380px;
}
.mapv-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.mapv-route {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

.mapv-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.mapv-pin__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--fg);
  background: var(--card);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.mapv-pin--user .mapv-pin__dot {
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--accent-cyan);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(115,229,234,0.25);
}
.mapv-pin--theater i {
  width: 24px; height: 24px;
  color: var(--primary);
  fill: var(--primary);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.mapv-pin--theater.is-active i {
  width: 32px; height: 32px;
  color: var(--accent-yellow);
  fill: var(--accent-yellow);
}

.mapv-zoom {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mapv-zoom__btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.mapv-zoom__btn i { width: 16px; height: 16px; color: var(--fg); }
.mapv-zoom__btn--locate { margin-top: 6px; }
.mapv-zoom__btn--locate i { color: var(--accent-cyan); }

.mapv-card {
  margin: 12px 20px 0;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mapv-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mapv-card__name { font-size: 14px; font-weight: 700; color: var(--fg); }
.mapv-card__dist {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(250,110,102,0.15);
  padding: 2px 8px;
  border-radius: 999px;
}
.mapv-card__addr { font-size: 11px; color: var(--muted-fg); }
.mapv-card__meta {
  display: flex; gap: 14px;
  font-size: 11px;
  color: var(--muted-fg);
  padding: 4px 0;
}
.mapv-card__meta i { width: 11px; height: 11px; vertical-align: middle; margin-right: 3px; }
.mapv-card__actions { display: flex; gap: 8px; padding-top: 4px; }
.mapv-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mapv-card__btn i { width: 12px; height: 12px; }
.mapv-card__btn--primary {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

/* ============================================================
   Search screen (10) — top bar + recent + trending
   ============================================================ */
.search-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
}
.search-top__back {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.search-top__back i { width: 18px; height: 18px; color: var(--fg); }

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.search-box__ic { width: 16px; height: 16px; color: var(--muted-fg); }
.search-box__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-size: 13px;
}
.search-box__input::placeholder { color: var(--muted-fg); }
.search-box__clear { width: 16px; height: 16px; color: var(--muted-fg); cursor: pointer; }

.search-section { padding: 16px 20px 4px; }
.search-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.search-section__title { font-size: 15px; font-weight: 700; color: var(--fg); }
.search-section__clear,
.search-section__count {
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
}
.search-section__count { color: var(--muted-fg); cursor: default; }

.search-recent { display: flex; flex-direction: column; }
.search-recent__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.search-recent__row:last-child { border-bottom: none; }
.search-recent__ic { width: 14px; height: 14px; color: var(--muted-fg); flex-shrink: 0; }
.search-recent__text { flex: 1; font-size: 13px; color: var(--fg); }
.search-recent__remove { width: 14px; height: 14px; color: var(--muted-fg); cursor: pointer; }

.search-trending {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.search-trend-card {
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.search-trend-card__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  background-size: cover;
  background-position: center;
}
.search-trend-card__rank {
  position: absolute;
  top: 8px; left: 8px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  display: grid; place-items: center;
}
.search-trend-card__info { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.search-trend-card__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-trend-card__meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px;
  color: var(--muted-fg);
}
.search-trend-card__badge {
  background: var(--primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  margin-right: 2px;
}

/* ============================================================
   Favorites screen (47) — tabs + sort + grid
   ============================================================ */
.fav-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}
.fav-topbar__back, .fav-topbar__action {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.fav-topbar__back i, .fav-topbar__action i { width: 18px; height: 18px; color: var(--fg); }
.fav-topbar__title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}

.fav-tabs {
  display: flex;
  gap: 0;
  padding: 4px;
  margin: 0 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.fav-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.fav-tab i { width: 14px; height: 14px; }
.fav-tab.is-active { background: var(--primary); color: #fff; }

.fav-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 4px;
}
.fav-meta__count { font-size: 11px; color: var(--muted-fg); }
.fav-meta__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
}
.fav-meta__sort i { width: 12px; height: 12px; color: var(--muted-fg); }

.fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 8px 20px 16px;
}
.fav-card { cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.fav-card__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
}
.fav-card__heart {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: rgba(0,0,0,0.7);
  display: grid; place-items: center;
  cursor: pointer;
  border: 0;
}
.fav-card__heart i {
  width: 14px; height: 14px;
  color: var(--primary);
  fill: var(--primary);
}
.fav-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-card__meta {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px;
  color: var(--muted-fg);
}
.fav-card__meta i {
  width: 11px; height: 11px;
  color: var(--accent-yellow);
}
.fav-card__meta span:nth-child(2) { color: var(--accent-yellow); font-weight: 700; }

/* ============================================================
   Settings (EN_31 redesign) — User card / Theme switcher /
   Notifications / Account / Support / Legal / Sign Out / Footer
   ============================================================ */
.stg-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
}
.stg-user-card__avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FA6E66 0%, #707EFA 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.stg-user-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.stg-user-card__name-row { display: flex; align-items: center; gap: 8px; }
.stg-user-card__name { font-size: 16px; font-weight: 700; color: var(--fg); }
.stg-user-card__badge {
  background: var(--accent-yellow);
  color: #0D0D0D;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.stg-user-card__email { font-size: 12px; color: var(--muted-fg); }
.stg-user-card__waon { font-size: 11px; color: var(--accent-cyan); font-weight: 700; }
.stg-user-card__chevron {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  color: var(--muted-fg);
  flex-shrink: 0;
}
.stg-user-card__chevron i { width: 18px; height: 18px; }

.stg-section-label {
  padding: 16px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted-fg);
  text-transform: uppercase;
}

/* Theme segmented control */
.stg-theme-wrap { padding: 0 20px; }
.stg-theme {
  display: flex;
  gap: 0;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.stg-theme__opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.stg-theme__opt i { width: 14px; height: 14px; }
.stg-theme__opt.is-active {
  background: var(--primary);
  color: #fff;
}

/* Generic settings list */
.stg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
}
.stg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 10px;
  cursor: pointer;
}
.stg-row__ic { width: 18px; height: 18px; color: var(--fg); flex-shrink: 0; }
.stg-row__label { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg); }
.stg-row__value { font-size: 11px; color: var(--muted-fg); }
.stg-row__chev { width: 16px; height: 16px; color: var(--muted-fg); flex-shrink: 0; }

/* Notification row variant — icon-in-circle + main + toggle */
.stg-row--notif { padding: 12px 16px; }
.stg-row__ic-circle {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.stg-row__ic-circle i { width: 16px; height: 16px; }
.stg-row__ic-circle--primary { background: rgba(250, 110, 102, 0.18); color: var(--primary); }
.stg-row__ic-circle--yellow  { background: rgba(250, 220, 101, 0.18); color: var(--accent-yellow); }
.stg-row__ic-circle--cyan    { background: rgba(115, 229, 234, 0.18); color: var(--accent-cyan); }
.stg-row__ic-circle--lime    { background: rgba(206, 250, 105, 0.18); color: var(--accent-lime); }
.stg-row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.stg-row__title { font-size: 13px; font-weight: 700; color: var(--fg); }
.stg-row__sub { font-size: 11px; color: var(--muted-fg); }

.stg-toggle {
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.stg-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--muted-fg);
  transition: left .2s, background .2s;
}
.stg-toggle.is-on {
  background: var(--primary);
  border-color: var(--primary);
}
.stg-toggle.is-on::after { left: 19px; background: #fff; }

/* Sign Out destructive button */
.stg-signout-wrap { padding: 20px 20px 4px; }
.stg-signout {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(250, 110, 102, 0.10);
  border: 1px solid rgba(250, 110, 102, 0.30);
  border-radius: 10px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.stg-signout i { width: 16px; height: 16px; }

.stg-footer {
  padding: 20px 20px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.stg-footer__brand { font-size: 11px; font-weight: 700; color: var(--muted-fg); }
.stg-footer__version { font-size: 10px; color: var(--muted-fg); }

/* ============================================================
   Seat Map — Zoom Out variant (14b)
   ============================================================ */
.zoom-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: rgba(115, 229, 234, 0.10);
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 700;
}
.zoom-hint i { width: 14px; height: 14px; flex-shrink: 0; }

.mini-screen {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 40px;
}
.mini-screen__bar {
  width: 100%; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.55);
}
.mini-screen__lbl { font-size: 9px; letter-spacing: 0.12em; color: var(--muted-fg); }

.mini-grid {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 30px;
  align-items: center;
}
.mini-row {
  display: flex; align-items: center; gap: 3px;
}
.mini-row__lbl {
  width: 14px; font-size: 9px; color: var(--muted-fg); text-align: right;
}
.mini-row__lbl + .mini-row__lbl { text-align: left; }
.mini-row__lbl--active { color: var(--primary); font-weight: 700; }
.mini-seat {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent-cyan);
  opacity: 0.85;
}
.mini-seat--vip { background: var(--accent-lime); opacity: 0.95; }
.mini-seat--waku { background: var(--accent-purple); }
.mini-seat--doki { background: var(--accent-magenta); }
.mini-seat--kira { background: #FA8989; opacity: 1; }
.mini-seat--occ { background: #444; }
.mini-seat--sel { background: var(--primary); opacity: 1; }

.mini-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}
.mini-legend__item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; color: var(--muted-fg);
}
.mini-legend__sw {
  width: 8px; height: 8px; border-radius: 2px;
}

.zoom-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 20px;
}
.zoom-controls__primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.zoom-controls__primary i { width: 14px; height: 14px; }
.zoom-controls__icon-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
}
.zoom-controls__icon-btn i { width: 14px; height: 14px; color: var(--fg); }

/* ============================================================
   Social Login — Login / Register screens
   ============================================================ */
.social-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 6px;
  color: var(--muted-fg);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.social-divider::before,
.social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px 8px;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  transition: all .15s ease;
  width: 100%;
}
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.social-btn:active { transform: translateY(0); }
.social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.social-btn--google { background: #fff; color: #111; border-color: rgba(0,0,0,0.1); }
:root[data-theme="dark"] .social-btn--google { background: #2a2a2a; color: #fff; border-color: #444; }
.social-btn--facebook { background: #1877F2; color: #fff; border-color: #1877F2; }
.social-btn--facebook svg path { fill: #fff !important; }
.social-btn--apple { background: #000; color: #fff; border-color: #000; }
:root[data-theme="dark"] .social-btn--apple { background: #111; color: #fff; border-color: #333; }
.social-btn--zalo { background: #0068FF; color: #fff; border-color: #0068FF; }
:root[data-theme="dark"] .social-btn--zalo { background: #0050c7; color: #fff; border-color: #0050c7; }
.social-btn__zalo-mark {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: #fff;
  color: #0068FF;
  font-size: 12px;
  font-weight: 800;
  display: grid; place-items: center;
  line-height: 1;
}

/* ============================================================
   Booking Flow v2 — Sprint 5 additions
   Modal: Bảng giá vé · 15a Gán loại vé · M4 Cảnh báo
   15b F&B · M5 Combo customize · 15c Chi tiết · Payoo Gateway
   ============================================================ */

/* ---- Generic modal close button ---- */
.modal-close-btn {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--surface-deep);
  display: grid; place-items: center;
  color: var(--muted-fg);
  cursor: pointer;
  flex-shrink: 0;
}
.modal-close-btn i { width: 16px; height: 16px; }

/* ---- M3 — Age Pricing Modal ---- */
.pricing-modal {
  width: 100%;
  background: var(--card);
  border-radius: 16px;
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.pricing-modal__header {
  display: flex; justify-content: space-between; align-items: center;
}
.pricing-modal__title { font-size: 18px; font-weight: 700; color: var(--fg); }
.pricing-modal__subtitle { font-size: 12px; color: var(--muted-fg); line-height: 1.5; }
.pricing-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--surface-deep);
  border-radius: 10px;
}
.pricing-row__left { display: flex; flex-direction: column; gap: 2px; }
.pricing-row__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.pricing-row__title-row { display: flex; align-items: center; gap: 6px; }
.pricing-row__age { font-size: 11px; color: var(--muted-fg); }
.pricing-row__price { font-size: 14px; font-weight: 700; color: var(--primary); }
.pricing-row__badge {
  background: var(--accent-yellow);
  color: #0D0D0D;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.pricing-modal__note {
  display: flex; gap: 8px;
  padding: 10px 12px;
  background: rgba(250, 220, 101, 0.12);
  border-radius: 8px;
  align-items: flex-start;
}
.pricing-modal__note i { width: 14px; height: 14px; color: var(--accent-yellow); flex-shrink: 0; }
.pricing-modal__note-text { font-size: 11px; color: var(--muted-fg); line-height: 1.5; }
.pricing-modal__actions { display: flex; gap: 10px; }
.pricing-modal__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.pricing-modal__btn--cancel { background: var(--surface-deep); color: var(--fg); }
.pricing-modal__btn--continue { background: var(--primary); color: #fff; }

/* ---- 15a Ticket Assignment ---- */
.ta-countdown {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
}
.ta-countdown__back {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.ta-countdown__title-col { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ta-countdown__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.ta-countdown__sub { font-size: 11px; color: var(--muted-fg); }
.ta-countdown__timer {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--card);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.ta-countdown__timer i { width: 14px; height: 14px; }

.ta-stepper {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px;
}
.ta-step { display: flex; align-items: center; gap: 6px; }
.ta-step__dot {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--border);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-fg);
}
.ta-step__dot--active { background: var(--primary); color: #fff; }
.ta-step__dot--done { background: var(--primary); color: #fff; }
.ta-step__dot--done i { width: 12px; height: 12px; }
.ta-step__lbl { font-size: 11px; font-weight: 700; color: var(--fg); }
.ta-step__lbl--inactive { color: var(--muted-fg); font-weight: 400; }
.ta-step__bar { flex: 1; height: 2px; background: var(--border); border-radius: 1px; }
.ta-step__bar--done { background: var(--primary); }

.ta-heading {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px 4px;
}
.ta-heading__title { font-size: 20px; font-weight: 700; color: var(--fg); }
.ta-heading__sub { font-size: 12px; color: var(--muted-fg); line-height: 1.5; }

.ta-seat-list { display: flex; flex-direction: column; gap: 12px; padding: 8px 20px; }
.ta-seat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ta-seat-card__head { display: flex; align-items: center; gap: 10px; }
.ta-seat-card__chip {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--accent-lime);
  color: #0D0D0D;
  font-size: 14px;
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ta-seat-card__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ta-seat-card__type { font-size: 14px; font-weight: 700; color: var(--fg); }
.ta-seat-card__loc { font-size: 11px; color: var(--muted-fg); }
.ta-seat-card__price { font-size: 14px; font-weight: 700; color: var(--primary); }
.ta-seat-card__opts { display: flex; gap: 8px; }
.ta-opt {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px;
  border-radius: 8px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  text-align: center;
  cursor: pointer;
}
.ta-opt.is-selected {
  background: var(--primary);
  border-color: transparent;
}
.ta-opt__name { font-size: 11px; font-weight: 700; color: var(--fg); }
.ta-opt__price { font-size: 10px; color: var(--muted-fg); }
.ta-opt.is-selected .ta-opt__name,
.ta-opt.is-selected .ta-opt__price { color: #fff; }

/* ---- M4 — Pre-payment Warning Modal ---- */
.warn-modal {
  width: 100%;
  background: var(--card);
  border-radius: 16px;
  padding: 24px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
  align-items: center;
}
.warn-modal__icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(250, 110, 102, 0.12);
  display: grid; place-items: center;
  color: var(--primary);
}
.warn-modal__icon i { width: 28px; height: 28px; }
.warn-modal__title {
  font-size: 18px; font-weight: 700; color: var(--fg);
  text-align: center;
}
.warn-modal__bullet {
  display: flex; gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--surface-deep);
  border-radius: 10px;
  align-items: flex-start;
}
.warn-modal__bullet-ic {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.warn-modal__bullet-ic i { width: 16px; height: 16px; }
.warn-modal__bullet-ic--p { background: rgba(250, 110, 102, 0.15); color: var(--primary); }
.warn-modal__bullet-ic--y { background: rgba(250, 220, 101, 0.15); color: var(--accent-yellow); }
.warn-modal__bullet-ic--c { background: rgba(115, 229, 234, 0.15); color: var(--accent-cyan); }
.warn-modal__bullet-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.warn-modal__bullet-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.warn-modal__bullet-body { font-size: 11px; color: var(--muted-fg); line-height: 1.5; }

/* ---- 15b F&B Combo & A La Carte ---- */
.fnb-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
}
.fnb-topbar__back {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.fnb-topbar__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fnb-topbar__title { font-size: 15px; font-weight: 700; color: var(--fg); }
.fnb-topbar__sub { font-size: 11px; color: var(--muted-fg); }
.fnb-topbar__timer {
  padding: 6px 12px;
  background: var(--card);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.fnb-heading { padding: 12px 20px 4px; font-size: 18px; font-weight: 700; color: var(--fg); }
.fnb-combos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 20px;
}
.fnb-combo {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.fnb-combo__img {
  width: 100%; height: 120px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FA6E66 0%, #FADC65 100%);
  display: grid; place-items: center;
  font-size: 36px;
}
.fnb-combo--2 .fnb-combo__img {
  background: linear-gradient(135deg, #73E5EA 0%, #707EFA 100%);
  font-size: 32px;
}
.fnb-combo__head { display: flex; justify-content: space-between; align-items: center; }
.fnb-combo__title { font-size: 14px; font-weight: 700; color: var(--fg); }
.fnb-combo__plus {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
}
.fnb-combo__plus--active {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.fnb-combo__plus i { width: 14px; height: 14px; }
.fnb-combo__desc { font-size: 11px; color: var(--muted-fg); line-height: 1.4; }
.fnb-combo__price { font-size: 14px; font-weight: 700; color: var(--primary); }

.fnb-ala { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px; }
.fnb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fnb-row__img {
  width: 48px; height: 48px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.fnb-row__img--y { background: rgba(250, 220, 101, 0.18); }
.fnb-row__img--c { background: rgba(115, 229, 234, 0.18); }
.fnb-row__img--l { background: rgba(206, 250, 105, 0.18); }
.fnb-row__txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fnb-row__title { font-size: 13px; font-weight: 700; color: var(--fg); }
.fnb-row__sub { font-size: 11px; color: var(--muted-fg); }
.fnb-row__price { font-size: 13px; font-weight: 700; color: var(--primary); }
.fnb-row__plus {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
}
.fnb-row__plus i { width: 14px; height: 14px; }

/* ---- M5 — Combo Customize Modal ---- */
.combo-modal {
  width: 100%;
  background: var(--card);
  border-radius: 16px;
  padding: 20px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.combo-modal__top { display: flex; justify-content: flex-end; }
.combo-modal__hero {
  width: 100%; height: 140px;
  border-radius: 10px;
  background: linear-gradient(135deg, #73E5EA 0%, #707EFA 100%);
  display: grid; place-items: center;
  font-size: 42px;
}
.combo-modal__title-row {
  display: flex; justify-content: space-between; align-items: center;
}
.combo-modal__name { font-size: 18px; font-weight: 700; color: var(--fg); }
.combo-modal__price { font-size: 18px; font-weight: 700; color: var(--fg); }
.combo-modal__sec-lbl { font-size: 13px; font-weight: 700; color: var(--fg); }
.combo-opts { display: flex; flex-direction: column; gap: 8px; }
.combo-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
}
.combo-opt__radio {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.combo-opt.is-selected .combo-opt__radio { border-color: var(--primary); }
.combo-opt.is-selected .combo-opt__radio::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--primary);
}
.combo-opt__name { flex: 1; font-size: 13px; color: var(--fg); }
.combo-opt__price { font-size: 13px; color: var(--muted-fg); }
.combo-modal__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 6px;
}
.combo-modal__total { font-size: 18px; font-weight: 700; color: var(--fg); }
.combo-qty {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.combo-qty__btn {
  width: 24px; height: 24px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
}
.combo-qty__btn--del { color: var(--muted-fg); }
.combo-qty__btn--add { background: var(--primary); color: #fff; }
.combo-qty__btn i { width: 14px; height: 14px; }
.combo-qty__n { font-size: 14px; font-weight: 700; color: var(--fg); }
.combo-modal__cta {
  background: #0D0D0D;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
}
:root[data-theme="light"] .combo-modal__cta { background: #0D0D0D; color: #fff; }

/* ---- 15c Booking Detail ---- */
.bd-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; }
.bd-topbar__back {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--card);
  display: grid; place-items: center;
  cursor: pointer;
}
.bd-topbar__mid { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: var(--fg); }
.bd-topbar__timer {
  padding: 6px 12px;
  background: var(--card);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.bd-banner-wrap { padding: 4px 20px; }
.bd-banner {
  background: linear-gradient(135deg, #707EFA 0%, #FA6E66 100%);
  padding: 14px;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
}
.bd-banner__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bd-banner__title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.bd-banner__pbadge {
  background: var(--accent-lime);
  color: #0D0D0D;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.bd-banner__detail { display: flex; flex-direction: column; gap: 4px; }
.bd-banner__cinema { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); }
.bd-banner__sub { font-size: 11px; color: rgba(255,255,255,0.7); }
.bd-section {
  display: flex; gap: 14px;
  padding: 14px 20px;
}
.bd-section__lbl-col {
  width: 80px; display: flex; flex-direction: column; gap: 6px;
}
.bd-section__lbl { font-size: 18px; font-weight: 700; color: var(--fg); }
.bd-section__edit {
  font-size: 11px; font-weight: 700; color: var(--primary);
  text-decoration: underline; cursor: pointer;
}
.bd-section__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bd-row { display: flex; justify-content: space-between; align-items: center; }
.bd-row__left { display: flex; flex-direction: column; gap: 2px; }
.bd-row__title { font-size: 13px; font-weight: 700; color: var(--fg); }
.bd-row__sub { font-size: 11px; color: var(--muted-fg); }
.bd-row__price { font-size: 13px; font-weight: 700; color: var(--fg); }
.bd-xrow { display: flex; justify-content: space-between; align-items: flex-start; }
.bd-xrow__left { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bd-xrow__detail { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted-fg); }
.bd-xrow__right { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.bd-xrow__qty { font-size: 11px; color: var(--muted-fg); }

.bd-divider { padding: 0 20px; }
.bd-divider hr { border: none; border-top: 1px solid var(--border); height: 0; }

.bd-terms { display: flex; align-items: center; gap: 10px; padding: 8px 20px; }
.bd-terms__chk {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--surface-deep);
  border: 1.5px solid var(--border);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bd-terms__chk.is-checked { background: var(--primary); border-color: var(--primary); }
.bd-terms__chk.is-checked::after {
  content: '✓'; color: #fff; font-size: 12px; line-height: 1;
}
.bd-terms__txt { font-size: 12px; color: var(--fg); }
.bd-terms__link { color: var(--primary); font-weight: 700; text-decoration: underline; }

.bd-invoice { display: flex; align-items: center; gap: 10px; padding: 12px 20px; }
.bd-invoice__lbl { flex: 1; font-size: 13px; font-weight: 700; color: var(--fg); }
.bd-toggle {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.bd-toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--muted-fg);
  top: 2px; left: 3px;
  transition: all .2s;
}
.bd-toggle.is-on { background: var(--primary); border-color: var(--primary); }
.bd-toggle.is-on::after { left: 21px; background: #fff; }

.bd-total {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  background: var(--card);
  border-top: 1px solid var(--border);
}
.bd-total__left { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bd-total__lbl { font-size: 12px; color: var(--muted-fg); }
.bd-total__amt { font-size: 22px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.bd-total__cta {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bd-total__cta i { width: 14px; height: 14px; }
.bd-total__cta.is-disabled {
  background: var(--surface-deep);
  color: var(--muted-fg);
  cursor: not-allowed;
}

/* ---- 18a Payoo Gateway ---- */
.payoo-warn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(250, 220, 101, 0.12);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-yellow);
}
.payoo-warn i { width: 16px; height: 16px; }
.payoo-hero-wrap { padding: 20px 20px 8px; }
.payoo-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.payoo-hero__logo {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B00 0%, #FA6E66 100%);
  display: grid; place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}
.payoo-hero__title { font-size: 18px; font-weight: 700; color: var(--fg); }
.payoo-hero__sub {
  font-size: 12px; color: var(--muted-fg); line-height: 1.5; text-align: center;
}

.payoo-methods-wrap {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 20px;
}
.payoo-methods-lbl {
  font-size: 11px; font-weight: 700; color: var(--muted-fg);
  letter-spacing: 0.04em;
}
.payoo-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.payoo-method {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.payoo-method__ic {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #fff;
}
.payoo-method__ic i { width: 16px; height: 16px; }
.payoo-method__ic--qr { background: #1F4FAE; }
.payoo-method__ic--cardx { background: #1A1F71; }
.payoo-method__ic--cardn { background: #06A89D; }
.payoo-method__ic--apple { background: #000; }
.payoo-method__ic--google { background: #4285F4; font-size: 14px; font-weight: 700; }
.payoo-method__ic--wallet { background: #1428A0; }
.payoo-method__lbl { font-size: 11px; font-weight: 700; color: var(--fg); }

.payoo-cta-wrap { padding: 14px 20px; }
.payoo-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.payoo-cta i { width: 14px; height: 14px; }


/* ========================================================================
   CUSTOM STYLES FOR CLIENT FEEDBACK (No. 53 - 64)
   ======================================================================== */

/* No. 56: Splash Logo zoom-out animation transition */
.splash--zooming .splash__logo-img {
  transform: scale(8);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.splash--zooming .splash__tagline,
.splash--zooming .splash__actions {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* No. 57: Login visual enhancements */
.auth-card {
  margin: 16px 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .auth-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.auth-header-strip {
  height: 4px;
  background: var(--primary);
  width: 60px;
  border-radius: 2px;
  margin-bottom: 24px;
}
.auth-signup-wrap {
  margin: 24px 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
}
[data-theme="light"] .auth-signup-wrap {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.auth-signup-wrap p {
  font-size: 13px;
  color: var(--muted-fg);
  margin-bottom: 12px;
}

/* No. 61: Floating Promo FAB */
.floating-promo-fab {
  position: absolute;
  bottom: 84px;
  right: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(250, 110, 102, 0.4);
  cursor: pointer;
  z-index: 99;
  animation: float-pulse 2s infinite ease-in-out;
  border: none;
}
.floating-promo-fab svg {
  width: 20px;
  height: 20px;
}
.floating-promo-fab__badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2px;
}
@keyframes float-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}

/* No. 60: Showtime button badges for SNEAK and FAN screenings */
.st-time--has-badges {
  height: auto !important;
  padding: 8px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.st-time__text {
  font-weight: 600;
}
.st-time__badges {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: center;
}
.st-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  text-transform: uppercase;
}
.st-badge--sneak {
  background: var(--primary);
  color: #FFFFFF;
}
.st-badge--fan {
  background: var(--accent-yellow);
  color: #000000;
}

/* No. 63: Ticket price table styling */
.price-table-wrap {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .price-table-wrap {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.price-table th, .price-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .price-table th, [data-theme="light"] .price-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.price-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  color: var(--muted-fg);
}
[data-theme="light"] .price-table th {
  background: rgba(0, 0, 0, 0.03);
}
.price-table tr:last-child td {
  border-bottom: none;
}
.price-type strong {
  display: block;
  font-size: 11px;
  color: var(--fg);
}
.price-type span {
  display: block;
  font-size: 9px;
  color: var(--muted-fg);
}

/* No. 64: Embedded map styling in Theater Detail */
.thd-map-card {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .thd-map-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.thd-map-canvas {
  height: 120px;
  position: relative;
  background: var(--bg-pure);
  overflow: hidden;
}
.thd-map-footer {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .thd-map-footer {
  background: rgba(0, 0, 0, 0.01);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.thd-map-footer__txt strong {
  display: block;
  font-size: 11px;
}
.thd-map-footer__txt span {
  font-size: 9px;
  color: var(--muted-fg);
}
.thd-map-footer__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.thd-map-footer__btn svg {
  width: 14px;
  height: 14px;
}

/* No. 54: Interactive star rating styling */
.user-star-rating {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .user-star-rating {
  background: rgba(0, 0, 0, 0.01);
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.user-star-rating__stars {
  display: flex;
  gap: 8px;
}
.user-star-rating__star {
  cursor: pointer;
  color: #555;
  transition: transform 0.2s, color 0.2s;
}
.user-star-rating__star:hover {
  transform: scale(1.15);
}
.user-star-rating__star.is-active {
  color: var(--accent-yellow);
}
.user-star-rating__text {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted-fg);
  margin-top: 2px;
}

/* No. 53: Community feed styles */
.comm-feed {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.comm-post {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}
[data-theme="light"] .comm-post {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.comm-post__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.comm-post__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #333;
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
}
.comm-post__user {
  flex: 1;
}
.comm-post__username {
  font-size: 12px;
  font-weight: 600;
  display: block;
}
.comm-post__time {
  font-size: 9px;
  color: var(--muted-fg);
}
.comm-post__badge {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
}
.comm-post__content {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--fg);
}
.comm-post__actions {
  display: flex;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  font-size: 11px;
  color: var(--muted-fg);
}
[data-theme="light"] .comm-post__actions {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.comm-post__action {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
}
.comm-post__action:hover {
  color: var(--primary);
}
.comm-post__action.is-active {
  color: var(--primary);
}
.comm-post__action.is-active svg {
  fill: var(--primary);
}

/* ========================================================================
   AEON BETA — Community & Engagement Upgrades (Sprint 5)
   ======================================================================== */

/* Laser Sweep for Barcode Scanner */
@keyframes laserSweep {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}
.laser-sweep {
  animation: laserSweep 2s infinite ease-in-out;
}

/* Review Card Hover Effects and Details */
.review-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .review-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Comment Item Style & Interactions */
.comment-item {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.comment-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] .comment-item {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .comment-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Notification Item style & interactions */
.notification-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--primary) !important;
}
[data-theme="light"] .notification-item {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .notification-item:hover {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: var(--primary) !important;
}

/* Voucher Card Layout & Interactions */
.voucher-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.voucher-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .voucher-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .voucher-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Form Visibility Adjustments & Input Fixes in Light Theme */
.form-control {
  width: 100%;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-control::placeholder {
  color: var(--muted-fg);
  opacity: 0.7;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(250, 110, 102, 0.15);
  background: rgba(255, 255, 255, 0.02);
}
select.form-control {
  height: 38px;
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 28px;
}
select.form-control option {
  background: var(--card);
  color: var(--fg);
}
textarea.form-control {
  resize: none;
  line-height: 1.5;
  padding: 10px 12px;
}
[data-theme="light"] .form-control {
  background: #ffffff;
  border-color: var(--border);
  color: var(--fg);
}
[data-theme="light"] .form-control:focus {
  background: #ffffff;
  border-color: var(--primary);
}
[data-theme="light"] select.form-control option {
  background: #ffffff;
  color: #000000;
}
[data-theme="light"] #newCommentInput {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}

/* Quick Opinion Chips */
.opinion-chip {
  padding: 6px 12px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--fg);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.opinion-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="light"] .opinion-chip {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--fg);
}
[data-theme="light"] .opinion-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Light Theme Modal Styling */
[data-theme="light"] .modal-card {
  background: #ffffff !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Community Tabs Styling fixes in Light mode */
[data-theme="light"] #commPanels .review-card p,
[data-theme="light"] #commPanels .review-card span {
  color: var(--fg);
}
[data-theme="light"] .review-card .rev-card-user span,
[data-theme="light"] .review-card .rev-card-content {
  color: var(--fg) !important;
}

[data-theme="light"] .screen[data-id="review-detail"] div[style*="background:rgba(255,255,255,0.02)"] {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .review-card span[style*="border-top:1px solid rgba(255,255,255,0.04)"],
[data-theme="light"] .review-card div[style*="border-top:1px solid rgba(255,255,255,0.04)"] {
  border-top-color: rgba(0, 0, 0, 0.05) !important;
}

/* Redesigned Review Movie Block and Likes Pill */
.rev-movie-block {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
  text-align: left;
}
[data-theme="light"] .rev-movie-block {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
.rev-movie-poster {
  width: 48px;
  height: 72px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.rev-movie-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.rev-movie-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-movie-stars {
  font-size: 10px;
  color: var(--accent-yellow);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.rev-movie-meta {
  font-size: 10px;
  color: var(--muted-fg);
  margin-bottom: 2px;
}
.rev-movie-genres {
  font-size: 9px;
  color: var(--primary);
  font-weight: 500;
}

/* Like Pill Button in Review Detail */
.rd-like-pill {
  transition: transform 0.15s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.rd-like-pill:hover {
  transform: scale(1.03);
  opacity: 0.95;
}
.rd-like-pill:active {
  transform: scale(0.97);
}

/* Cast Profiles Grid */
.cast-grid-item {
  text-align: center;
  transition: transform 0.2s ease;
}
.cast-grid-item:hover {
  transform: translateY(-2px);
}
.cast-avatar-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
  background-image: url('assets/brand/aeon-beta-logotype-white.svg');
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
}
[data-theme="light"] .cast-avatar-circle {
  background-image: url('assets/brand/aeon-beta-logotype-black.svg');
  background-color: rgba(0, 0, 0, 0.02);
}
.cast-grid-item:hover .cast-avatar-circle {
  border-color: var(--primary);
}