/* ==========================================================================
   懂片帝 · 应用下载页 (dongpian17.com/download) replica
   Design tokens and component rules ported from the original bundle
   (main-*.css). Utility classes mirror the Tailwind utilities the original
   React components compose.
   ========================================================================== */

/* ---------- 1. Design tokens -------------------------------------------------
   Original values, verbatim. Note: the original never defines
   --movie-surface-muted / --movie-surface-soft / --movie-primary-border, so
   those references fall back to `transparent` / the current border colour.
   Declared here so computed styles match the original exactly.
   -------------------------------------------------------------------------- */

:root {
  --radius: 0.625rem;

  --movie-sidebar-expanded: 17rem;
  --movie-sidebar-collapsed: 4.5rem;
  --movie-sidebar-width: var(--movie-sidebar-expanded);
  --movie-page-edge: 0.75rem;
  --movie-sidebar-content-gap: 1rem;
  --movie-header-control-size: 2.25rem;
  --movie-header-icon-size: 1rem;
  --movie-header-row-height: 3.5rem;

  /* dark (default) theme */
  --movie-bg: #0d0e10;
  --movie-bg-elevated: #151619;
  --movie-surface: rgba(255, 255, 255, 0.06);
  --movie-surface-strong: rgba(255, 255, 255, 0.09);
  --movie-border: rgba(255, 255, 255, 0.12);
  --movie-border-soft: rgba(255, 255, 255, 0.086);
  --movie-primary-rgb: 255 207 50;
  --movie-primary-strong-rgb: 243 185 19;
  --movie-surface-deep-rgb: 20 20 18;
  --movie-surface-bright-rgb: 255 255 255;
  --movie-primary: #ffcf32;
  --movie-primary-strong: #f3b913;
  --movie-primary-soft: #ffe07a;
  --movie-primary-foreground: #17130a;
  --movie-primary-muted: rgb(var(--movie-primary-rgb) / 0.14);
  --movie-share-button-background: #ffcf32;
  --movie-share-icon-color: #17130a;
  --movie-accent: #ffcf32;
  --movie-accent-muted: rgb(var(--movie-primary-rgb) / 0.1);
  --movie-legacy-bg-rgb: 13, 14, 16;
  --movie-legacy-bg-elevated-rgb: 21, 22, 25;
  --movie-legacy-surface-rgb: 255, 255, 255;
  --movie-legacy-border-soft-rgb: 255, 255, 255;
  --movie-legacy-primary-rgb: 255, 207, 50;
  --movie-legacy-primary-strong-rgb: 243, 185, 19;
  --movie-legacy-accent-rgb: 255, 207, 50;
  --movie-legacy-text-rgb: 255, 255, 255;
  --movie-legacy-text-subtle-rgb: 255, 255, 255;

  --movie-text: rgba(255, 255, 255, 0.9);
  --movie-text-muted: rgba(255, 255, 255, 0.54);
  --movie-text-subtle: rgba(255, 255, 255, 0.38);

  --movie-danger: #fecaca;
  --movie-danger-strong: #fca5a5;
  --movie-danger-bg: rgba(239, 68, 68, 0.12);
  --movie-danger-border: rgba(252, 165, 165, 0.3);
  --movie-warning: #fde68a;
  --movie-warning-bg: rgba(251, 191, 36, 0.12);
  --movie-warning-border: rgba(253, 230, 138, 0.3);
  --movie-success: #a7f3d0;
  --movie-success-bg: rgba(52, 211, 153, 0.12);
  --movie-success-border: rgba(167, 243, 208, 0.24);
  --movie-info: #f3b913;
  --movie-info-bg: rgb(var(--movie-primary-rgb) / 0.1);
  --movie-info-border: rgb(var(--movie-primary-rgb) / 0.22);

  /* fallbacks for the tokens the original references but never declares */
  --movie-surface-muted: transparent;
  --movie-surface-soft: transparent;
  --movie-primary-border: var(--movie-border-soft);

  /* app safe areas / shell */
  --app-native-safe-area-top: 0px;
  --app-native-safe-area-right: 0px;
  --app-native-safe-area-bottom: 0px;
  --app-native-safe-area-left: 0px;
  --app-safe-area-top: max(env(safe-area-inset-top, 0px), var(--app-native-safe-area-top));
  --app-safe-area-right: max(env(safe-area-inset-right, 0px), var(--app-native-safe-area-right));
  --app-safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-native-safe-area-bottom));
  --app-safe-area-left: max(env(safe-area-inset-left, 0px), var(--app-native-safe-area-left));
  --app-page-shell-padding-top: 0.5rem;
  --app-sticky-top: var(--app-safe-area-top);

  --default-font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "STHeiti",
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --background: #0d0e10;
  --foreground: #f7f7f5;
  --card: #151619;
  --card-foreground: #f7f7f5;
  --popover: #18191c;
  --popover-foreground: #f7f7f5;
  --primary: #ffcf32;
  --primary-foreground: #17130a;
  --secondary: #202125;
  --secondary-foreground: #f7f7f5;
  --muted: #202125;
  --muted-foreground: rgba(255, 255, 255, 0.58);
  --accent: rgba(255, 207, 50, 0.14);
  --accent-foreground: #f7f7f5;
  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.14);
  --ring: rgba(255, 207, 50, 0.44);
}

/* dark theme re-declaration (matches `:root.dark, [data-theme=movie-dark]`) */
:root.dark,
[data-theme="movie-dark"] {
  --movie-primary-rgb: 255 207 50;
  --movie-primary-strong-rgb: 243 185 19;
  --movie-bg: #0d0e10;
  --movie-bg-elevated: #151619;
  --movie-surface: rgba(255, 255, 255, 0.06);
  --movie-surface-strong: rgba(255, 255, 255, 0.1);
  --movie-border: rgba(255, 255, 255, 0.13);
  --movie-border-soft: rgba(255, 255, 255, 0.08);
  --movie-primary: #ffcf32;
  --movie-primary-strong: #f3b913;
  --movie-primary-foreground: #17130a;
  --movie-primary-muted: rgba(255, 207, 50, 0.14);
  --movie-share-button-background: #ffcf32;
  --movie-share-icon-color: #17130a;
  --movie-accent: #ffcf32;
  --movie-accent-muted: rgba(255, 207, 50, 0.1);
  --movie-text: rgba(255, 255, 255, 0.93);
  --movie-text-muted: rgba(255, 255, 255, 0.58);
  --movie-text-subtle: rgba(255, 255, 255, 0.4);
}

/* light theme (selectable through the persisted theme preset) */
[data-theme="movie-light"] {
  --movie-primary-rgb: 255 207 50;
  --movie-primary-strong-rgb: 216 148 0;
  --movie-legacy-bg-rgb: 243, 243, 240;
  --movie-legacy-bg-elevated-rgb: 255, 255, 255;
  --movie-legacy-surface-rgb: 20, 20, 18;
  --movie-legacy-border-soft-rgb: 20, 20, 18;
  --movie-legacy-primary-rgb: 255, 207, 50;
  --movie-legacy-primary-strong-rgb: 216, 148, 0;
  --movie-legacy-accent-rgb: 189, 123, 0;
  --movie-legacy-text-rgb: 22, 22, 20;
  --movie-legacy-text-subtle-rgb: 22, 22, 20;
  --movie-surface-deep-rgb: 20 20 18;
  --movie-surface-bright-rgb: 255 255 255;
  --movie-bg: #f3f3f0;
  --movie-bg-elevated: #fff;
  --movie-surface: rgba(20, 20, 18, 0.04);
  --movie-surface-strong: rgba(20, 20, 18, 0.08);
  --movie-border: rgba(20, 20, 18, 0.14);
  --movie-border-soft: rgba(20, 20, 18, 0.08);
  --movie-primary: #ffcf32;
  --movie-primary-strong: #d89400;
  --movie-primary-soft: #ffe07a;
  --movie-primary-foreground: #17130a;
  --movie-primary-muted: rgba(255, 207, 50, 0.2);
  --movie-share-button-background: #d89400;
  --movie-share-icon-color: #fff;
  --movie-accent: #bd7b00;
  --movie-accent-muted: rgba(189, 123, 0, 0.1);
  --movie-text: #161614;
  --movie-text-muted: rgba(22, 22, 20, 0.64);
  --movie-text-subtle: rgba(22, 22, 20, 0.44);
  --background: #f3f3f0;
  --foreground: #161614;
  --card: #fff;
  --card-foreground: #161614;
  --popover: #fff;
  --popover-foreground: #161614;
  --primary: #d89400;
  --primary-foreground: #fff;
  --secondary: #e8e7e2;
  --secondary-foreground: #161614;
  --muted: #e8e7e2;
  --muted-foreground: rgba(22, 22, 20, 0.62);
  --accent: rgba(255, 207, 50, 0.18);
  --accent-foreground: #161614;
  --border: rgba(20, 20, 18, 0.12);
  --input: rgba(20, 20, 18, 0.13);
  --ring: rgba(216, 148, 0, 0.38);
}

/* ---------- 2. Reset ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: var(--movie-bg);
  color: var(--movie-text);
  text-size-adjust: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  overflow-x: clip;
}

html,
body,
#root,
* {
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  font-family: var(--default-font-family);
  font-size: 1rem;
  line-height: 1.5;
}

svg {
  display: block;
  flex-shrink: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

/* ---------- 3. Shell ------------------------------------------------------- */

.min-h-dvh {
  min-height: 100dvh;
}

.movie-app-bg,
.movie-page-bg {
  background:
    radial-gradient(circle at 16% 0%, rgb(var(--movie-primary-rgb, 255 207 50) / 0.12), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(243, 201, 105, 0.07), transparent 28%),
    linear-gradient(180deg, var(--movie-bg-elevated) 0%, var(--movie-bg) 48%, var(--movie-bg) 100%);
  max-width: 100vw;
  overflow-x: clip;
}

[data-theme="movie-light"] .movie-app-bg,
[data-theme="movie-light"] .movie-page-bg {
  background:
    radial-gradient(circle at 16% 0%, rgb(var(--movie-primary-strong-rgb, 243 185 19) / 0.2), transparent 34%),
    radial-gradient(circle at 90% 6%, rgba(167, 102, 22, 0.16), transparent 32%),
    linear-gradient(180deg, var(--movie-bg-elevated) 0%, var(--movie-bg) 48%, var(--movie-bg) 100%);
}

.movie-app-bg img,
.movie-app-bg a,
.movie-page-bg img,
.movie-page-bg a {
  -webkit-user-drag: none;
}

.movie-atmosphere {
  pointer-events: none;
  background:
    linear-gradient(115deg, rgb(var(--movie-primary-rgb, 255 207 50) / 0.1), transparent 34%),
    linear-gradient(245deg, rgba(250, 204, 21, 0.055), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.01) 0,
      rgba(255, 255, 255, 0.01) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity: 0.72;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.78) 42%, transparent 78%);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.78) 42%, transparent 78%);
}

[data-theme="movie-light"] .movie-atmosphere {
  background:
    linear-gradient(115deg, rgb(var(--movie-primary-strong-rgb, 243 185 19) / 0.18), transparent 36%),
    linear-gradient(245deg, rgba(167, 102, 22, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 24%),
    repeating-linear-gradient(
      90deg,
      rgb(var(--movie-surface-deep-rgb, 20 20 18) / 0.018) 0,
      rgb(var(--movie-surface-deep-rgb, 20 20 18) / 0.018) 1px,
      transparent 1px,
      transparent 7px
    );
  opacity: 0.9;
}

.movie-page-shell {
  padding-top: var(--app-page-shell-padding-top);
}

.movie-content-page-shell {
  --app-page-shell-padding-top: var(--app-safe-area-top);
  padding-right: var(--movie-page-edge) !important;
  padding-left: var(--movie-page-edge) !important;
}

/* ---------- 4. Header ------------------------------------------------------ */

.movie-app-header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.dpd-page-top-nav {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dpd-page-top-nav .movie-app-header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--movie-text);
}

.dpd-page-top-nav .movie-button-secondary {
  border-color: var(--movie-border-soft);
  background: var(--movie-surface-soft);
  width: 2.75rem;
  height: 2.75rem;
  color: var(--movie-text);
  box-shadow: none;
  border-radius: 50%;
}

.dpd-page-top-nav .movie-button-secondary:is(:hover, :focus-visible) {
  border-color: var(--movie-border);
  background: var(--movie-surface-strong);
}

.dpd-page-top-nav .movie-button-secondary svg {
  width: 1.25rem;
  height: 1.25rem;
}

.movie-button-secondary {
  border-color: var(--movie-border);
  background: var(--movie-surface);
  color: var(--movie-text);
}

@media (max-width: 639px) {
  .dpd-app-header {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }
}

/* ---------- 5. Surfaces ---------------------------------------------------- */

.movie-surface {
  border-color: var(--movie-border-soft);
  background: var(--movie-surface);
}

[data-theme="movie-light"] .movie-surface {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgb(var(--movie-surface-bright-rgb, 255 255 255) / 0.48)),
    var(--movie-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62), 0 8px 18px rgba(15, 23, 42, 0.043);
}

.movie-button-primary {
  border-color: rgb(var(--movie-primary-rgb, 255 207 50) / 0.32);
  background: var(--movie-primary);
  color: var(--movie-primary-foreground);
}

.movie-button-primary:hover {
  background: var(--movie-primary-strong);
}

[data-theme="movie-light"] .movie-button-primary,
[data-theme="movie-dark"] .movie-button-primary {
  border-color: var(--movie-primary) !important;
  background: var(--movie-primary) !important;
  color: #17130a !important;
}

/* ---------- 6. Utilities used by the download route ------------------------ */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.relative { position: relative; }
.absolute { position: absolute; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-5 { gap: 1.25rem; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.w-full { width: 100%; }
.h-dvh { height: 100dvh; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-11 { height: 2.75rem; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.size-4 { width: 1rem; height: 1rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.size-12 { width: 3rem; height: 3rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-3 { padding: 0 0.75rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.px-2\.5 { padding: 0 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.px-4 { padding: 0 1rem; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: calc(infinity * 1px); }
.border { border-width: 1px; border-style: solid; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overscroll-y-contain { overscroll-behavior-y: contain; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-tight { line-height: 1.25; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.tracking-normal { letter-spacing: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-words { overflow-wrap: break-word; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.transition { transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.space-y-2 > * + * { margin-top: 0.5rem; }

.text-\[var\(--movie-text\)\] { color: var(--movie-text); }
.text-\[var\(--movie-text-muted\)\] { color: var(--movie-text-muted); }
.text-\[var\(--movie-text-subtle\)\] { color: var(--movie-text-subtle); }
.text-\[var\(--movie-primary-strong\)\] { color: var(--movie-primary-strong); }
.bg-\[var\(--movie-surface-muted\)\] { background-color: var(--movie-surface-muted); }
.bg-\[var\(--movie-primary-muted\)\] { background-color: var(--movie-primary-muted); }
.border-\[var\(--movie-border-soft\)\] { border-color: var(--movie-border-soft); }
.border-\[var\(--movie-primary-strong\)\] { border-color: var(--movie-primary-strong); }
.bg-black\/15 { background: rgba(0, 0, 0, 0.15); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-black\/10 { --tw-shadow-color: rgba(0, 0, 0, 0.1); }

.hover\:border-\[var\(--movie-primary-strong\)\]:hover { border-color: var(--movie-primary-strong); }
.hover\:underline:hover { text-decoration: underline; }
.underline-offset-4 { text-underline-offset: 4px; }

.movie-surface.rounded-lg.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ---------- 7. Download route composition ---------------------------------- */

.download-shell {
  position: relative;
  display: flex;
  height: 100dvh;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: max(1rem, var(--app-safe-area-bottom));
}

.download-body {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  min-height: 0;
  width: 100%;
  max-width: 64rem;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
}

.download-body::-webkit-scrollbar {
  display: none;
}

.download-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.download-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--movie-border-soft);
  background: var(--movie-surface-muted);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 900;
  color: var(--movie-primary-strong);
}

.download-title {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--movie-text);
}

.download-grid {
  display: grid;
  gap: 0.75rem;
}

.download-card {
  display: flex;
  min-height: 28rem;
  min-width: 0;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--movie-border-soft);
  padding: 1rem;
  transition: border-color 0.15s;
}

.download-card[data-available="true"]:hover {
  border-color: var(--movie-primary-strong);
}

.download-card[data-available="false"] {
  opacity: 0.8;
}

.download-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.download-card-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.download-card-icon {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--movie-border);
  background: var(--movie-surface);
  color: var(--movie-text);
}

.download-card-eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--movie-text-subtle);
}

.download-card-label {
  margin-top: 0.125rem;
  overflow-wrap: break-word;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 900;
  color: var(--movie-text);
}

.download-status {
  display: inline-flex;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  border-radius: calc(infinity * 1px);
  border: 1px solid;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 900;
}

.download-status[data-state="available"] {
  border-color: var(--movie-primary-strong);
  background: var(--movie-primary-muted);
  color: var(--movie-primary-strong);
}

.download-status[data-state="idle"] {
  border-color: var(--movie-border-soft);
  background: var(--movie-surface-muted);
  color: var(--movie-text-subtle);
}

.download-card-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 900;
  color: var(--movie-text);
}

.download-card-summary {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--movie-text-muted);
}

.download-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.download-tag {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: calc(infinity * 1px);
  border: 1px solid var(--movie-border-soft);
  background: var(--movie-surface-muted);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--movie-text-muted);
}

.download-instructions {
  margin-top: 1rem;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 0.25rem;
  border: 1px solid var(--movie-border-soft);
  background: rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
}

.download-instructions p {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--movie-text-muted);
}

.download-instructions .empty {
  color: var(--movie-text-subtle);
}

.download-instructions h2,
.download-instructions h3,
.download-instructions h4 {
  color: var(--movie-text);
  font-weight: 900;
  padding-top: 0.25rem;
}

.download-instructions h2 { font-size: 1.125rem; line-height: 1.75rem; }
.download-instructions h3 { font-size: 1rem; line-height: 1.5rem; }
.download-instructions h4 { font-size: 0.875rem; line-height: 1.25rem; }

.download-instructions .bullet {
  display: flex;
  gap: 0.5rem;
}

.download-instructions .bullet-dot {
  margin-top: 0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  background: var(--movie-primary-strong);
}

.download-instructions a {
  font-weight: 600;
  color: var(--movie-primary-strong);
  text-underline-offset: 4px;
}

.download-instructions a:hover {
  text-decoration: underline;
}

.download-instructions .spacer {
  height: 0.5rem;
}

.download-activation {
  margin-top: 0.75rem;
  display: inline-flex;
  height: 2.75rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--movie-border);
  background: var(--movie-surface);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}

.download-activation > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.download-activation b {
  font-weight: 900;
  color: var(--movie-primary-strong);
}

.download-cta {
  margin-top: 0.75rem;
  display: inline-flex;
  height: 2.75rem;
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgb(var(--movie-primary-rgb) / 0.32);
  background: var(--movie-primary);
  color: var(--movie-primary-foreground);
  font-size: 0.875rem;
  font-weight: 900;
  transition: background-color 0.15s;
}

.download-cta:hover {
  background: var(--movie-primary-strong);
}

.download-cta-disabled {
  margin-top: 0.75rem;
  display: inline-flex;
  height: 2.75rem;
  width: 100%;
  flex-shrink: 0;
  cursor: not-allowed;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--movie-border);
  background: var(--movie-surface);
  color: var(--movie-text);
  font-size: 0.875rem;
  font-weight: 900;
  opacity: 0.7;
}

.download-error {
  border-radius: 0.5rem;
  border: 1px solid rgba(252, 165, 165, 0.35);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--movie-text);
}

.download-error-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.download-error p {
  line-height: 1.5rem;
}

.download-retry {
  display: inline-flex;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--movie-border);
  background: var(--movie-surface);
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--movie-text);
}

.download-retry:hover {
  border-color: var(--movie-border-strong, var(--movie-border));
  background: var(--movie-surface-strong);
}

.is-busy {
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- 8. Responsive breakpoints ------------------------------------- */

@media (min-width: 640px) {
  .download-body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .movie-app-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .download-shell {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
  }

  .download-title {
    font-size: 3rem;
    line-height: 1;
  }

  .dpd-page-top-nav .movie-app-header-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .download-error-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .movie-content-page-shell {
    padding-right: var(--movie-page-edge) !important;
    padding-left: var(--movie-page-edge) !important;
  }
}

@media (min-width: 1280px) {
  .download-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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