/* ============================================================
   Theme 3 — "Ember": structural / component overrides.

   Everything here is scoped under [data-theme="ember"] and layered after
   every Theme-1 and Theme-2 stylesheet, so neither Classic nor Nova is ever
   touched. theme-ember-tokens.css already re-colours and re-shapes most of
   the app for free (every component reads var(--color-*)/var(--radius-*)/
   var(--shadow-*)); what's left here is either

     (a) a genuine structural difference from the reference design — a pinned
         top bar with circular outline buttons instead of an overlay bar, a
         peeking hero *deck* instead of one full-bleed slide, a two-line
         section head with a glyph and a strapline, always-labelled bottom-nav
         tabs with a wide active pill, page-position dots under every rail;

     (b) an element that only this theme renders at all, emitted by the shared
         components for every theme and hidden elsewhere — `.section-icon`,
         `.section-sub`, `.section-link-chevron`, `.home-tab-icon`,
         `.card-fav`, `.card-poster-rating`, `.row-dots`; or

     (c) an accent tint that the base stylesheets hardcoded as a literal
         rgba() rather than a token, so a token swap alone can't reach it
         (search "215, 163, 92" / "236, 194, 127" in the other css/*.css files
         for the Classic originals being re-tinted here).

   Two colours do all the work, and which one applies where is not arbitrary:
   a muted brick red fills a surface, a warm antique gold draws a line or a
   glyph. Keep new rules on that side of the split and they'll read as part
   of the same system.

   **Colour pass, 2026-08-30:** every literal rgba()/hex value in this file
   was re-tuned against the reference screenshots (`screenshots/1.jpg`–
   `3.jpg`), which read far more muted/dark than an initial pass — deep brick
   red rather than saturated crimson, warm antique gold rather than bright
   yellow-gold, and a much fainter ambient glow that barely bleeds past the
   status bar. Nothing structural changed in that pass — same selectors, same
   layout, same which-element-gets-which-treatment; only the colour values
   themselves moved. */

/* ============================================================
   Ground
   ============================================================ */

/* The ember glow itself: a faint brick-red wash bleeding down from the top of
   the viewport, barely past the status bar, plus two very soft pools at the
   sides — the reference reads as almost pure black once you're a short
   distance below the top edge, not a glowing screen. `fixed` attachment keeps
   it pinned to the viewport rather than scrolling with a page, so the glow
   stays a property of the *screen*, the way it reads in the reference,
   instead of sliding away with the first rail. */
:root[data-theme='ember'] body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(125% 42% at 50% -8%, rgba(96, 19, 14, 0.34) 0%, rgba(96, 19, 14, 0) 62%),
    radial-gradient(70% 34% at 2% 26%, rgba(96, 19, 14, 0.08) 0%, transparent 70%),
    radial-gradient(70% 34% at 98% 72%, rgba(96, 19, 14, 0.08) 0%, transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* `.page` and `.app-shell` are transparent by default, so the body wash above
   shows through every tab — but a *pushed* screen (title detail, actor,
   settings…) is opaque, and would otherwise lose the glow entirely. Give the
   same treatment to the pushed layer's own ground. */
[data-theme='ember'] .detail-view {
  background-color: var(--color-bg);
  background-image: radial-gradient(120% 36% at 50% -6%, rgba(96, 19, 14, 0.26) 0%, rgba(96, 19, 14, 0) 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ============================================================
   Buttons
   ============================================================ */

[data-theme='ember'] .btn {
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: -0.005em;
}

[data-theme='ember'] .btn-primary {
  background: var(--gradient-accent);
  border: 1px solid rgba(221, 178, 110, 0.5);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow), var(--shadow-inset-hairline);
}

[data-theme='ember'] .btn-primary:hover,
[data-theme='ember'] .btn-primary:focus-visible {
  background: var(--gradient-accent);
  filter: brightness(1.08);
}

[data-theme='ember'] .btn-secondary {
  background: rgba(20, 19, 18, 0.72);
  border: 1px solid rgba(211, 164, 99, 0.42);
  color: var(--ember-gold);
}

[data-theme='ember'] .btn-secondary:hover,
[data-theme='ember'] .btn-secondary:focus-visible {
  background: rgba(30, 27, 25, 0.85);
  border-color: rgba(211, 164, 99, 0.65);
  color: var(--ember-gold-bright);
}

/* Circular outline buttons — the top bar's bookmark/download/search set, and
   every other `.icon-btn` in the app, so the language is consistent on the
   detail screen's back/share/follow row too. */
/* Fill sampled directly (a clean scanline through the top bar's bookmark
   button, avoiding the glyph): rgb(22–26, 22–26, 18–26), genuinely neutral
   charcoal — the first pass's warm reddish-dark tint wasn't real. */
[data-theme='ember'] .icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: radial-gradient(120% 120% at 50% 0%, #201e1c 0%, #121110 100%);
  border: 1px solid rgba(214, 165, 108, 0.34);
  color: var(--ember-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), var(--shadow-inset-hairline);
}

[data-theme='ember'] .icon-btn:hover,
[data-theme='ember'] .icon-btn:focus-visible {
  background: radial-gradient(120% 120% at 50% 0%, #2b2825 0%, #191715 100%);
  border-color: rgba(214, 165, 108, 0.58);
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .icon-btn svg {
  width: 20px;
  height: 20px;
}

[data-theme='ember'] .btn-danger {
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.34);
  color: #ff8f8f;
}

[data-theme='ember'] .btn-danger:hover,
[data-theme='ember'] .btn-danger:focus-visible {
  background: rgba(255, 107, 107, 0.2);
}

/* ============================================================
   Top bar
   ============================================================ */

/* The reference pins this bar on its own dark-crimson band *above* the hero
   rather than floating it over the artwork the way Classic does — the hero is
   an inset card in this theme, so there's nothing to overlay. */
[data-theme='ember'] .site-nav {
  position: sticky;
  top: 0;
  padding-top: calc(env(safe-area-inset-top) + var(--space-2));
  background: linear-gradient(180deg, #200a0c 0%, rgba(11, 7, 8, 0.92) 72%, rgba(9, 6, 7, 0.88) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(211, 164, 99, 0.12);
}

[data-theme='ember'] .site-nav::before {
  content: none;
}

[data-theme='ember'] .site-nav .nav-logo,
[data-theme='ember'] .site-nav .icon-btn {
  filter: none;
}

/* The brand mark is a solid crimson disc with a gold play glyph. The logo SVG
   is inline in the DOM (icons.js -> innerHTML), so its own outline circle can
   simply be hidden and the disc drawn by the anchor itself — no second asset
   and no JS change needed. */
/* This disc IS the reference's top-right circle — sampled directly (a clean
   scanline through it, well away from the gold play glyph): a flat
   rgb(107–121, 17–27, 16–24) across its whole face, no real gradient. */
[data-theme='ember'] .nav-logo {
  width: 2.9rem;
  height: 2.9rem;
  justify-content: center;
  border-radius: var(--radius-full);
  background: linear-gradient(158deg, #7e1c15 0%, #55110c 100%);
  border: 1px solid rgba(224, 181, 116, 0.5);
  color: var(--ember-gold-bright);
  box-shadow: 0 6px 16px rgba(116, 22, 15, 0.4), var(--shadow-inset-hairline);
}

/* `color` has to be set on the svg itself, not inherited from the anchor —
   components.css's own `.nav-logo svg` rule pins it to `--color-accent`
   (crimson here), which on a crimson disc renders the glyph invisible. */
[data-theme='ember'] .nav-logo svg {
  width: 22px;
  height: 22px;
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .nav-logo svg circle {
  display: none;
}

/* The wordmark is dropped at every width here — the disc alone is the mark in
   the reference, and the row is otherwise four evenly-weighted circles. */
[data-theme='ember'] .nav-logo span {
  display: none;
}

[data-theme='ember'] .nav-actions {
  gap: var(--space-3);
}

/* ============================================================
   Hero
   ============================================================ */

/* A swipeable deck of inset cards with the next one peeking at the edge —
   structurally the same idea as Nova's hero, but gilded and squarer, and with
   its dots sitting *below* the deck on the page ground rather than floating
   over the artwork. `.hero-slide.is-current` is toggled by hero.js's existing
   scroll tracking (a harmless no-op class under Classic). */
[data-theme='ember'] .hero-carousel {
  margin: var(--space-4) 0 0;
  padding: 0;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-theme='ember'] .hero-track {
  height: auto;
  gap: var(--space-3);
  padding-inline: var(--container-padding);
  scroll-padding-inline: var(--container-padding);
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

[data-theme='ember'] .hero-slide {
  flex: 0 0 86%;
  width: auto;
  max-width: 27rem;
  height: clamp(21rem, 64vw, 27rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid rgba(211, 164, 99, 0.3);
  box-shadow: var(--shadow-elevated);
  opacity: 0.5;
  transform: scale(0.95);
  transition: transform var(--duration-base) var(--ease-flat), opacity var(--duration-base) var(--ease-flat);
}

[data-theme='ember'] .hero-slide.is-current {
  opacity: 1;
  transform: scale(1);
}

/* One vertical scrim only — the side scrim Classic uses to anchor copy over a
   full-bleed backdrop just muddies a narrow card. */
[data-theme='ember'] .hero-slide-media::before {
  content: none;
}

[data-theme='ember'] .hero-slide-media::after {
  background: linear-gradient(
    180deg,
    rgba(9, 4, 6, 0.18) 0%,
    rgba(9, 4, 6, 0.05) 30%,
    rgba(9, 4, 6, 0.42) 58%,
    rgba(9, 4, 6, 0.94) 84%,
    rgba(9, 4, 6, 0.99) 100%
  );
}

[data-theme='ember'] .hero-slide-content {
  max-width: none;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
}

/* The badge row collapses to a single crimson capsule carrying the type — the
   reference has no second "Trending" word next to it. The clapperboard glyph
   is a masked inline data-URI so it takes the capsule's own gold `color`
   rather than shipping a fixed-colour emoji. */
[data-theme='ember'] .hero-badge {
  gap: 0;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme='ember'] .hero-badge > span:not(.hero-badge-type) {
  display: none;
}

/* Sampled directly (a clean patch inside the "فیلم" capsule, away from its
   icon/text): rgb(54–56, 10–12, 8–9) — a distinctly darker maroon than the
   CTA-button/active-pill red above (`--ember-red`), not the same colour. */
[data-theme='ember'] .hero-badge-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #431310 0%, #300a06 100%);
  border: 1px solid rgba(224, 181, 116, 0.42);
  color: var(--color-accent-contrast);
  font-size: 11px;
  font-weight: 700;
}

[data-theme='ember'] .hero-badge-type::before {
  content: '';
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--ember-mask-clapper) center / contain no-repeat;
  mask: var(--ember-mask-clapper) center / contain no-repeat;
}

[data-theme='ember'] .hero-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
}

[data-theme='ember'] .hero-fa-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ember-gold);
}

[data-theme='ember'] .hero-meta {
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
}

[data-theme='ember'] .hero-actions {
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* The reference inverts Classic's emphasis: Download is the filled crimson
   pill and Watch Now is the gold outline one. Doing it here rather than by
   swapping the classes in hero.js keeps the other two themes' hierarchy —
   and hero.js's markup — exactly as they were. */
[data-theme='ember'] .hero-actions .btn-primary {
  background: rgba(18, 11, 12, 0.66);
  border: 1px solid rgba(211, 164, 99, 0.55);
  color: var(--ember-gold);
  box-shadow: none;
  flex-direction: row-reverse;
}

[data-theme='ember'] .hero-actions .btn-primary:hover,
[data-theme='ember'] .hero-actions .btn-primary:focus-visible {
  background: rgba(33, 19, 21, 0.85);
  filter: none;
  color: var(--ember-gold-bright);
}

/* The play glyph sits inside its own thin ring in the reference. */
[data-theme='ember'] .hero-actions .btn-primary svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
}

[data-theme='ember'] .hero-actions .btn-secondary {
  background: var(--gradient-accent);
  border: 1px solid rgba(221, 178, 110, 0.44);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow), var(--shadow-inset-hairline);
}

[data-theme='ember'] .hero-actions .btn-secondary:hover,
[data-theme='ember'] .hero-actions .btn-secondary:focus-visible {
  background: var(--gradient-accent);
  border-color: rgba(221, 178, 110, 0.65);
  color: var(--color-accent-contrast);
  filter: brightness(1.08);
}

/* Dots move out of the artwork and onto the page ground below the deck. */
[data-theme='ember'] .hero-dots {
  position: static;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-1);
}

[data-theme='ember'] .hero-dot {
  width: 7px;
  height: 7px;
  background: rgba(211, 164, 99, 0.24);
}

[data-theme='ember'] .hero-dot.is-active {
  width: 1.75rem;
  height: 8px;
  background: var(--ember-red);
  box-shadow: 0 0 10px rgba(116, 22, 15, 0.48);
}

[data-theme='ember'] .hero-carousel.is-loading .hero-track,
[data-theme='ember'] .hero-skeleton,
[data-theme='ember'] .hero-state {
  flex: 0 0 86%;
  width: 86%;
  max-width: 27rem;
  height: clamp(21rem, 64vw, 27rem);
  border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
  [data-theme='ember'] .hero-slide,
  [data-theme='ember'] .hero-carousel.is-loading .hero-track,
  [data-theme='ember'] .hero-skeleton,
  [data-theme='ember'] .hero-state {
    flex-basis: 47%;
    width: 47%;
    max-width: 33rem;
    height: clamp(23rem, 44vw, 29rem);
  }
}

@media (min-width: 1200px) {
  [data-theme='ember'] .hero-slide,
  [data-theme='ember'] .hero-carousel.is-loading .hero-track,
  [data-theme='ember'] .hero-skeleton,
  [data-theme='ember'] .hero-state {
    flex-basis: 33%;
    width: 33%;
  }
}

@media (orientation: landscape) and (max-height: 34rem) {
  [data-theme='ember'] .hero-slide,
  [data-theme='ember'] .hero-carousel.is-loading .hero-track,
  [data-theme='ember'] .hero-skeleton,
  [data-theme='ember'] .hero-state {
    height: 14rem;
  }
}

/* ============================================================
   Section heads
   ============================================================ */

/* Two-line head: a glyph + bold title over a muted one-line strapline on the
   reading-start side, and a gold outline "All …" capsule on the other. The
   glyph and strapline exist in the DOM for every theme (see
   section.js#createSectionHead) and are revealed only here. */
[data-theme='ember'] .section-head {
  align-items: flex-start;
  padding-inline: var(--container-padding);
  gap: var(--space-4);
}

[data-theme='ember'] .section-headings {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

[data-theme='ember'] .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-start: 0;
  font-size: calc(var(--fs-xl) * 0.92);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* No leading accent bar — the glyph is what marks a section here. */
[data-theme='ember'] .section-title::before {
  content: none;
}

[data-theme='ember'] .section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--ember-gold);
  filter: drop-shadow(0 0 8px rgba(211, 164, 99, 0.28));
}

[data-theme='ember'] .section-icon svg {
  width: 100%;
  height: 100%;
}

[data-theme='ember'] .section-sub {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* Deliberately small and tight: the pill has to spell the whole section name
   out *and* leave the title a single line on a 390px phone, which is what the
   reference shows. `--fs-xs` with the standard `--space-4` inline padding
   pushed the title to two lines there. */
[data-theme='ember'] .section-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 7px var(--space-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: var(--radius-full);
  border: 1px solid rgba(211, 164, 99, 0.4);
  background: linear-gradient(180deg, rgba(34, 32, 30, 0.6) 0%, rgba(16, 15, 14, 0.6) 100%);
  color: var(--ember-gold);
}

[data-theme='ember'] .section-link:hover,
[data-theme='ember'] .section-link:focus-visible {
  border-color: rgba(211, 164, 99, 0.7);
  background: linear-gradient(180deg, rgba(46, 42, 39, 0.7) 0%, rgba(23, 21, 20, 0.7) 100%);
  color: var(--ember-gold-bright);
}

/* Ember spells the destination out — "All Hottest This Week" — rather than a
   bare "All". Below ~26rem that phrase plus a two-line title no longer fit
   side by side, so the section name drops back out and the pill returns to
   the bare word; it's a separate span precisely so this is possible (see
   section.js#createSectionHead). */
[data-theme='ember'] .section-link-detail {
  display: inline;
}

@media (max-width: 23rem) {
  [data-theme='ember'] .section-link-detail {
    display: none;
  }
}

[data-theme='ember'] .section-link-chevron {
  display: inline-flex;
  width: 12px;
  height: 12px;
}

[data-theme='ember'] .section-link-chevron svg {
  width: 100%;
  height: 100%;
}

/* Section seams: a gilded hairline, and a crimson pool instead of Classic's
   neutral white wash on alternating bands. */
[data-theme='ember'] .section:not(:first-of-type)::before {
  background: var(--gradient-gold-line);
  opacity: 0.55;
}

[data-theme='ember'] .section:nth-of-type(even)::after {
  background: radial-gradient(90% 100% at 50% 50%, rgba(96, 19, 14, 0.1) 0%, transparent 72%);
}

/* ============================================================
   Home filter pills
   ============================================================ */

/* Inactive fill sampled directly (a clean scanline through the "سریال"
   toggle pill, away from its text): rgb(24–30, 24–30, 20–28), the same
   genuinely neutral charcoal the icon buttons use — not the warm
   reddish-dark the first pass had. */
[data-theme='ember'] .home-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2.6rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(214, 165, 108, 0.34);
  background: linear-gradient(180deg, rgba(38, 36, 34, 0.55) 0%, rgba(18, 17, 16, 0.68) 100%);
  font-weight: 700;
  box-shadow: none;
}

[data-theme='ember'] .home-tab:hover,
[data-theme='ember'] .home-tab:focus-visible {
  border-color: rgba(214, 165, 108, 0.58);
}

[data-theme='ember'] .home-tab.is-active {
  background: var(--gradient-accent);
  border-color: rgba(224, 181, 116, 0.62);
  box-shadow: var(--shadow-glow);
}

/* The icon and the label are two different colours in the reference — gold
   glyph, white label — in *both* the active (red-filled) and inactive
   pill, confirmed by sampling a filled "اکشن" pill directly: its lightning
   bolt reads gold, its text reads pure near-white (R≈G≈B, no gold cast at
   all). Neither state changes either color — only the pill's own
   background changes between them — so both rules are unconditional rather
   than nested under `.is-active`. */
[data-theme='ember'] .home-tab-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--ember-gold);
}

[data-theme='ember'] .home-tab-label {
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .home-tab-icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Cards
   ============================================================ */

[data-theme='ember'] .card-poster {
  border-radius: var(--radius-md);
  border: 1px solid rgba(211, 164, 99, 0.2);
}

[data-theme='ember'] .card:hover .card-poster,
[data-theme='ember'] .card:focus-visible .card-poster {
  border-color: rgba(211, 164, 99, 0.5);
}

[data-theme='ember'] .card:hover,
[data-theme='ember'] .card:focus-visible {
  transform: translateY(-4px);
}

/* The reference labels a poster with its rating, not its type — the type is
   already established by whichever rail or filter pill you're looking at. */
[data-theme='ember'] .card-type-badge {
  display: none;
}

[data-theme='ember'] .card-poster-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: rgba(10, 6, 7, 0.76);
  border: 1px solid rgba(214, 165, 108, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 800;
  /* Sampled off a card's own "9.0 ★" badge — the number is the same gold as
     the star beside it, not the near-white text color the first pass used. */
  color: var(--color-rating);
  /* A bare number next to a star glyph is weak-direction text — without this
     it reorders under RTL and paints as "★ 9.0" reversed into the wrong
     visual order. Same fix as gotcha #42's quota/duration strings. */
  direction: ltr;
  unicode-bidi: embed;
}

[data-theme='ember'] .card-poster-rating-star {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: var(--color-rating);
}

[data-theme='ember'] .card-poster-rating-star svg {
  width: 100%;
  height: 100%;
}

/* The watchlist heart. It's a sibling of the card button inside `.card-tile`
   (see card.js) — never a child, since a button can't nest in a button. */
[data-theme='ember'] .card-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  inset-inline-start: var(--space-2);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: rgba(10, 5, 7, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

[data-theme='ember'] .card-fav svg {
  width: 15px;
  height: 15px;
}

/* Enlarges the hit area to ~44px without visual bulk — the same technique
   `.hero-dot::after` already uses for the carousel dots. */
[data-theme='ember'] .card-fav::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}

[data-theme='ember'] .card-fav:hover,
[data-theme='ember'] .card-fav:focus-visible {
  border-color: rgba(211, 164, 99, 0.5);
}

[data-theme='ember'] .card-fav:active {
  transform: scale(0.88);
}

[data-theme='ember'] .card-fav.is-saved {
  color: var(--color-accent-2);
  border-color: rgba(189, 49, 56, 0.5);
}

/* Rating already sits on the poster, so the meta line carries year (and, for
   the calendar rail, the network) alone. */
[data-theme='ember'] .card-body .card-meta .card-rating {
  display: none;
}

[data-theme='ember'] .card-title {
  font-size: var(--fs-base);
  font-weight: 700;
}

[data-theme='ember'] .card-fa-title {
  color: var(--color-text-tertiary);
}

[data-theme='ember'] .card-meta {
  gap: 6px;
  color: var(--color-text-tertiary);
}

/* Calendar cards keep their own on-poster episode chip — recentred as a
   crimson capsule at the poster's foot, as in the reference. */
[data-theme='ember'] .card-ep-badge,
[data-theme='ember'] .card-schedule-badge {
  left: 50%;
  right: auto;
  bottom: var(--space-2);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - var(--space-4));
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #431310 0%, #300a06 100%);
  border: 1px solid rgba(224, 181, 116, 0.38);
  color: var(--color-accent-contrast);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: embed;
}

[data-theme='ember'] .card-flag {
  background: var(--gradient-accent);
  border: 1px solid rgba(224, 181, 116, 0.4);
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .card-collection-title {
  background: linear-gradient(0deg, rgba(9, 4, 6, 0.95) 8%, rgba(9, 4, 6, 0.6) 52%, transparent 100%);
  font-weight: 800;
}

/* Every progress bar in the app. `.lw-*` (the title page's own Continue
   Watching card) reads `--color-accent-strong` rather than `--color-accent`,
   which is gold in this theme — so it needs naming explicitly here rather
   than picking the fill up from the token swap like the other two do. */
[data-theme='ember'] .progress-fill,
[data-theme='ember'] .card-cw-progress-fill,
[data-theme='ember'] .lw-progress-fill {
  background: var(--ember-red);
  box-shadow: 0 0 6px rgba(116, 22, 15, 0.48);
}

/* Same shape as `.card-cw-play` above — a full-poster scrim with a centred
   glyph, so only the glyph gets the crimson disc. */
[data-theme='ember'] .lw-play-badge {
  background: rgba(4, 5, 7, 0.36);
}

[data-theme='ember'] .lw-play-badge svg {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-gold-ring), var(--shadow-glow-soft);
  color: var(--color-accent-contrast);
}

/* This is a full-poster scrim with a centred glyph (see components.css), not a
   badge — so only the *glyph* takes the crimson treatment; filling the whole
   element would paint over the artwork. */
[data-theme='ember'] .card-cw-play {
  background: rgba(4, 5, 7, 0.36);
}

[data-theme='ember'] .card-cw-play svg {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-gold-ring), var(--shadow-glow-soft);
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .row-state {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(30, 28, 26, 0.4) 0%, rgba(15, 14, 13, 0.55) 100%);
}

/* ============================================================
   Rail page dots
   ============================================================ */

[data-theme='ember'] .row-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-top: var(--space-3);
}

[data-theme='ember'] .row-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(211, 164, 99, 0.2);
  transition: width var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

[data-theme='ember'] .row-dot.is-active {
  width: 1.35rem;
  background: var(--ember-red);
  box-shadow: 0 0 8px rgba(116, 22, 15, 0.42);
}

/* Row arrows read as part of the gilded system rather than plain glass. */
[data-theme='ember'] .row-arrow {
  border: 1px solid rgba(211, 164, 99, 0.28);
  background: rgba(13, 8, 9, 0.82);
  color: var(--ember-gold);
}

/* ============================================================
   Airing calendar
   ============================================================ */

/* Day chips become fixed-size gilded discs, with today's crimson-filled —
   the single most recognisable element of the reference's calendar band. */
[data-theme='ember'] .cal-day {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid rgba(211, 164, 99, 0.32);
  background: radial-gradient(120% 120% at 50% 0%, #221315 0%, #110a0b 100%);
  color: var(--ember-gold);
}

[data-theme='ember'] .cal-day-name {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

/* `dir` and `data-theme` both live on <html>, so this is one compound
   selector, not a descendant pair. */
html[dir='rtl'][data-theme='ember'] .cal-day-name {
  font-size: 11px;
}

[data-theme='ember'] .cal-day-num {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.1;
  color: inherit;
}

[data-theme='ember'] .cal-day:hover,
[data-theme='ember'] .cal-day:focus-visible {
  border-color: rgba(211, 164, 99, 0.65);
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .cal-day.is-today {
  border-color: rgba(211, 164, 99, 0.52);
}

[data-theme='ember'] .cal-day.is-active {
  background: var(--gradient-accent);
  border-color: rgba(221, 178, 110, 0.72);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow);
}

[data-theme='ember'] .cal-day.is-active .cal-day-num,
[data-theme='ember'] .cal-day.is-active .cal-day-name {
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .cal-day-dot {
  display: none;
}

[data-theme='ember'] .cal-month {
  color: var(--color-text-tertiary);
  font-weight: 600;
}

/* ============================================================
   Bottom navigation dock
   ============================================================ */

/* Per the reference (screenshot 1): a gilded rounded-rect dock, a label under
   every icon, and a *wider* crimson pill behind the active tab rather than a
   same-width tint. The label markup is always in the DOM (bottomNav.js) and
   hidden by a base rule in components.css — this reveals it, exactly as Nova
   does. */
[data-theme='ember'] .bottom-nav::before {
  background: linear-gradient(180deg, rgba(7, 5, 7, 0) 0%, rgba(7, 5, 7, 0.82) 52%, var(--color-bg) 100%);
}

/* Sampled directly (a clean patch of the dock between the "کاوش"/"منو" tabs):
   genuinely neutral dark charcoal, not the warm reddish-brown the first pass
   used — same correction as the icon buttons and filter pills above. */
[data-theme='ember'] .bottom-nav-inner {
  max-width: 30rem;
  gap: var(--space-1);
  padding: 7px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(30, 28, 26, 0.95) 0%, rgba(11, 10, 9, 0.97) 100%);
  border: 1px solid rgba(214, 165, 108, 0.34);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(240, 224, 200, 0.08);
}

[data-theme='ember'] .bottom-nav-item {
  flex-direction: column;
  gap: 3px;
  height: 3.4rem;
  border-radius: 15px;
  color: var(--ember-gold);
  transition: color var(--duration-base) var(--ease-standard),
    flex-grow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* The active tab takes noticeably more of the dock than its three siblings —
   a Material-3-style expressive selection, and what the reference shows. */
[data-theme='ember'] .bottom-nav-item.is-active {
  flex-grow: 1.6;
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .bn-label {
  display: block;
  position: relative;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

[data-theme='ember'] .bottom-nav-item .bn-icon {
  width: 22px;
  height: 22px;
}

[data-theme='ember'] .bottom-nav-item::before {
  inset: 0;
  border-radius: 15px;
  background: var(--gradient-accent);
  box-shadow: var(--shadow-gold-ring), 0 6px 16px rgba(116, 22, 15, 0.36);
}

[data-theme='ember'] .bottom-nav-item.is-active::before {
  opacity: 1;
}

[data-theme='ember'] .bottom-nav-item.is-active .bn-icon {
  transform: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

[data-theme='ember'] .bottom-nav-item:hover,
[data-theme='ember'] .bottom-nav-item:focus-visible {
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .bottom-nav-item:active {
  transform: scale(0.94);
}

/* ============================================================
   Explore
   ============================================================ */

/* Both tab rows become the same gilded capsules the Home filter pills use, so
   the two surfaces read as one system; the sliding underline indicator the
   base tab bar draws has nothing left to indicate and is dropped. */
[data-theme='ember'] .ex-tabbar-track {
  gap: var(--space-2);
  padding-block: 2px var(--space-2);
}

/* `.ex-tab` has no icon (Explore's pills are plain text) — same neutral fill
   as `.home-tab` above, and its label follows the same "white, not gold"
   rule the filter pills' labels sampled. */
[data-theme='ember'] .ex-tab {
  min-height: 2.4rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid rgba(214, 165, 108, 0.34);
  background: linear-gradient(180deg, rgba(38, 36, 34, 0.55) 0%, rgba(18, 17, 16, 0.68) 100%);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .ex-tab:hover,
[data-theme='ember'] .ex-tab:focus-visible {
  border-color: rgba(214, 165, 108, 0.58);
}

[data-theme='ember'] .ex-tab.is-active,
[data-theme='ember'] .ex-subtabbar .ex-tab.is-active {
  background: var(--gradient-accent);
  border-color: rgba(224, 181, 116, 0.62);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow);
}

[data-theme='ember'] .ex-tab-indicator {
  display: none;
}

[data-theme='ember'] .ex-card-poster {
  border-radius: var(--radius-md);
  border: 1px solid rgba(211, 164, 99, 0.2);
}

[data-theme='ember'] .ex-card:hover .ex-card-poster,
[data-theme='ember'] .ex-card:focus-visible .ex-card-poster {
  border-color: rgba(211, 164, 99, 0.5);
}

[data-theme='ember'] .ex-badge {
  border-radius: var(--radius-full);
  background: rgba(10, 6, 7, 0.76);
  border: 1px solid rgba(211, 164, 99, 0.26);
  color: var(--color-text);
}

[data-theme='ember'] .ex-mode {
  background: rgba(18, 17, 16, 0.8);
  border: 1px solid var(--color-border);
}

[data-theme='ember'] .ex-mode-btn.is-active {
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .ex-mode-thumb {
  background: var(--gradient-accent);
  box-shadow: var(--shadow-glow-soft);
}

[data-theme='ember'] .ex-pull {
  background: var(--gradient-accent);
  border: 1px solid rgba(221, 178, 110, 0.44);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow);
}

[data-theme='ember'] .ex-state-ring {
  background: radial-gradient(circle at 50% 35%, rgba(96, 19, 14, 0.14), transparent 68%);
}

[data-theme='ember'] .ex-state-art {
  background: linear-gradient(140deg, rgba(96, 19, 14, 0.16), rgba(211, 164, 99, 0.07));
}

/* ============================================================
   Search overlay
   ============================================================ */

[data-theme='ember'] .search-input-row:focus-within {
  border-color: rgba(211, 164, 99, 0.52);
  box-shadow: var(--shadow-glow-soft);
}

[data-theme='ember'] .search-segmented-thumb {
  background: var(--gradient-accent);
  box-shadow: var(--shadow-gold-ring);
}

[data-theme='ember'] .search-segmented-btn.is-active {
  color: var(--color-accent-contrast);
}

[data-theme='ember'] .search-filters-toggle.is-open {
  color: var(--ember-gold);
  border-color: rgba(211, 164, 99, 0.48);
}

[data-theme='ember'] .search-chip.is-active,
[data-theme='ember'] .ac-filter.is-active {
  background: linear-gradient(180deg, rgba(116, 22, 15, 0.26) 0%, rgba(70, 14, 10, 0.12) 100%);
  border-color: rgba(211, 164, 99, 0.54);
  color: var(--ember-gold-bright);
  box-shadow: 0 6px 16px rgba(116, 22, 15, 0.14);
}

/* ============================================================
   Login
   ============================================================ */

[data-theme='ember'] .login-screen {
  background: radial-gradient(ellipse 135% 60% at 50% -12%, #310a0d 0%, var(--color-bg) 58%);
}

[data-theme='ember'] .glow-a {
  background: var(--ember-red);
}

[data-theme='ember'] .glow-b {
  background: var(--ember-gold);
  opacity: 0.13;
}

[data-theme='ember'] .login-card {
  background: rgba(26, 14, 16, 0.6);
  border-color: rgba(211, 164, 99, 0.28);
}

[data-theme='ember'] .qr-frame {
  border: 1px solid rgba(211, 164, 99, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
}

[data-theme='ember'] .status-dot {
  background: var(--ember-gold);
  box-shadow: 0 0 8px var(--ember-gold);
}

[data-theme='ember'] .login-card.is-success .status-dot {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}

/* ============================================================
   Profile / settings / subscription / devices / downloads
   ============================================================ */

[data-theme='ember'] .profile-card {
  border-radius: var(--radius-lg);
  background:
    var(--gradient-surface-sheen),
    linear-gradient(140deg, rgba(96, 19, 14, 0.16) 0%, rgba(211, 164, 99, 0.04) 100%),
    var(--color-bg-elevated);
  border: 1px solid rgba(211, 164, 99, 0.3);
  box-shadow: var(--shadow-card);
}

[data-theme='ember'] .profile-avatar {
  background: var(--gradient-accent);
  border: 1px solid rgba(221, 178, 110, 0.44);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-glow);
}

[data-theme='ember'] .profile-plan {
  color: var(--ember-gold);
}

/* Detached rows rather than one hairline-divided block — matches the card
   language the rest of this theme uses. */
[data-theme='ember'] .profile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}

[data-theme='ember'] .profile-row {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(30, 28, 26, 0.45) 0%, rgba(15, 14, 13, 0.6) 100%);
  box-shadow: var(--shadow-inset-hairline);
}

[data-theme='ember'] .profile-row + .profile-row {
  border-top: 1px solid var(--color-border);
}

[data-theme='ember'] .profile-row:hover,
[data-theme='ember'] .profile-row:focus-visible {
  border-color: var(--color-border-strong);
  background: linear-gradient(180deg, rgba(42, 39, 36, 0.55) 0%, rgba(21, 20, 18, 0.68) 100%);
}

[data-theme='ember'] .profile-row-icon {
  color: var(--ember-gold);
}

[data-theme='ember'] .theme-option.is-active,
[data-theme='ember'] .lang-option.is-active {
  border-color: rgba(211, 164, 99, 0.52);
  background: linear-gradient(180deg, rgba(116, 22, 15, 0.18) 0%, rgba(70, 14, 10, 0.08) 100%);
  color: var(--ember-gold-bright);
}

/* ============================================================
   Title detail / actor / collection
   ============================================================ */

[data-theme='ember'] .dt-hero,
[data-theme='ember'] .dt-poster {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(211, 164, 99, 0.22);
}

[data-theme='ember'] .dt-back,
[data-theme='ember'] .dt-top-actions .icon-btn {
  border-radius: var(--radius-full);
}

[data-theme='ember'] .dt-genre {
  border: 1px solid rgba(211, 164, 99, 0.3);
  background: rgba(27, 15, 17, 0.6);
  color: var(--ember-gold);
}

[data-theme='ember'] .dt-follow.is-following,
[data-theme='ember'] .dt-watchlist.is-saved {
  border-color: rgba(211, 164, 99, 0.48);
  background: linear-gradient(180deg, rgba(116, 22, 15, 0.2) 0%, rgba(70, 14, 10, 0.1) 100%);
  color: var(--ember-gold-bright);
}

[data-theme='ember'] .dt-cast-item:hover .dt-cast-photo,
[data-theme='ember'] .dt-cast-item:focus-visible .dt-cast-photo {
  border-color: rgba(211, 164, 99, 0.5);
  box-shadow: 0 0 0 3px rgba(96, 19, 14, 0.16);
}

[data-theme='ember'] .ac-filter.is-active {
  background: linear-gradient(180deg, rgba(116, 22, 15, 0.22) 0%, rgba(70, 14, 10, 0.1) 100%);
  border-color: rgba(211, 164, 99, 0.48);
}

[data-theme='ember'] .ac-list .ac-row::after {
  background: linear-gradient(105deg, transparent 32%, rgba(211, 164, 99, 0.18) 47%, rgba(240, 224, 200, 0.1) 53%, transparent 68%);
}

/* ============================================================
   Downloads panel / manager
   ============================================================ */

/* downloads.css already reads `var(--gradient-accent, …)`/`color-mix()` and so
   picks the crimson up for free (see theme-nova.css's note on the same
   panel) — `.dlf-mode-opt` in downloadManager.css is the one control there
   still carrying a hardcoded gold tint. */
[data-theme='ember'] .dlf-mode-opt.is-active {
  border-color: rgba(211, 164, 99, 0.48);
  background: linear-gradient(180deg, rgba(116, 22, 15, 0.18) 0%, rgba(70, 14, 10, 0.08) 100%);
  color: var(--ember-gold-bright);
}

/* ============================================================
   Player
   ============================================================ */

[data-theme='ember'] .pl-layer {
  --plyr-color-main: var(--ember-red);
}

/* ============================================================
   Toast
   ============================================================ */

[data-theme='ember'] .mm-toast {
  border-color: var(--color-border-strong);
  background: linear-gradient(180deg, rgba(30, 28, 26, 0.92) 0%, rgba(11, 10, 9, 0.95) 100%);
}

/* ============================================================
   Masks used above — kept at the end so the rules that consume them read
   without a wall of base64 in the middle of the file.
   ============================================================ */
:root[data-theme='ember'] {
  /* Clapperboard, for the hero's type capsule. */
  --ember-mask-clapper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2.6 9.1h18.8v9.6a2 2 0 0 1-2 2H4.6a2 2 0 0 1-2-2V9.1Zm.6-1.4.7-3.4 17 1.6-.4 2.4L3.2 7.7Zm5.1-2.3 1.7 3.3 2-.2-1.7-3.3-2 .2Zm5.1.5 1.7 3.3 2-.2-1.7-3.3-2 .2Z'/%3E%3C/svg%3E");
}