/* =========================================================
   m18 · 赤铜胶片 Copper Reel (layout-safe pass)
   Keep brand look, restore alignment with template grid
   ========================================================= */
:root {
  --m18-ink: #1a2430;
  --m18-ink-soft: #3d4a59;
  --m18-mute: #6b7785;
  --m18-paper: #e8eef2;
  --m18-paper-2: #f4f7f9;
  --m18-surface: #ffffff;
  --m18-line: #d0d8e0;
  --m18-copper: #b85c38;
  --m18-copper-deep: #8f4224;
  --m18-copper-soft: #f3e2d8;
  --m18-teal: #1f6f78;
  --m18-teal-soft: #d7ecee;
  --m18-amber: #c9782a;
  --m18-footer: #141c26;
  --m18-footer-2: #1c2733;
  --m18-radius: 6px;
  --m18-radius-lg: 10px;
  --m18-shadow: 0 8px 24px rgba(26, 36, 48, 0.08);
  --m18-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --m18-display: "Noto Serif SC", "Songti SC", "Noto Sans SC", serif;
}

html {
  color-scheme: light;
}

body {
  font-family: var(--m18-font) !important;
  background: var(--m18-paper) !important;
  color: var(--m18-ink);
}

.daphne-shell.bg-gray-100,
.daphne-shell {
  background:
    radial-gradient(900px 360px at 10% -8%, rgba(184, 92, 56, 0.1), transparent 55%),
    radial-gradient(720px 300px at 90% 0%, rgba(31, 111, 120, 0.08), transparent 50%),
    linear-gradient(180deg, #eef3f6 0%, var(--m18-paper) 42%, #e4ebf0 100%) !important;
  color: var(--m18-ink);
}

.daphne-shell .fixed.inset-0.overflow-hidden.pointer-events-none {
  opacity: 0.28;
  filter: saturate(0.5) hue-rotate(-12deg);
}

.daphne-shell .fixed.inset-0 .bg-blue-400 { background: var(--m18-copper) !important; opacity: 0.1 !important; }
.daphne-shell .fixed.inset-0 .bg-purple-400 { background: var(--m18-teal) !important; opacity: 0.1 !important; }
.daphne-shell .fixed.inset-0 .bg-pink-400 { background: var(--m18-amber) !important; opacity: 0.1 !important; }

.daphne-shell .min-h-screen.bg-gray-100 {
  background: transparent !important;
}

/* ========== HEADER ========== */
.daphne-shell > header,
.daphne-shell header.sticky {
  background: rgba(247, 249, 251, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--m18-line);
  box-shadow: none !important;
  /* top accent without breaking sticky height math */
  box-shadow: inset 0 3px 0 0 var(--m18-copper) !important;
}

.daphne-shell > header::before,
.daphne-shell header.m18-header::before {
  content: none !important;
  display: none !important;
}

.daphne-shell > header .h-16 {
  height: 4rem !important;
}

.daphne-shell > header a > span.text-xl {
  font-family: var(--m18-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--m18-ink) !important;
  white-space: nowrap;
}

.daphne-shell > header .text-blue-600,
.daphne-shell > header svg.text-blue-600 {
  color: var(--m18-copper) !important;
}

.daphne-shell > header .bg-red-500 {
  background: var(--m18-teal) !important;
}

.daphne-shell > header nav a,
.daphne-shell > header nav button {
  color: var(--m18-ink-soft) !important;
  font-weight: 500;
}

.daphne-shell > header nav a.text-blue-600,
.daphne-shell > header nav a.font-semibold {
  color: var(--m18-copper) !important;
}

.daphne-shell > header nav a:hover,
.daphne-shell > header nav button:hover {
  color: var(--m18-copper) !important;
}

.daphne-shell > header nav a.font-semibold {
  box-shadow: inset 0 -2px 0 0 var(--m18-copper);
}

.daphne-shell > header .absolute.left-0.mt-2.w-64 {
  border: 1px solid var(--m18-line);
  border-radius: var(--m18-radius) !important;
  box-shadow: var(--m18-shadow) !important;
  background: var(--m18-surface) !important;
}

.daphne-shell > header .absolute.left-0.mt-2 a:hover {
  background: var(--m18-copper-soft) !important;
  color: var(--m18-copper-deep) !important;
}

.daphne-header-search input {
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line) !important;
  border-radius: 999px !important;
  color: var(--m18-ink);
}

.daphne-header-search input:focus {
  outline: none !important;
  border-color: var(--m18-copper) !important;
  box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.16) !important;
}

.daphne-header-search__icon {
  color: var(--m18-mute) !important;
}

/* ========== HERO (home) ========== */
/* Keep section full-bleed; DO NOT shrink the max-w-7xl rail */
.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type,
.daphne-shell section.m18-hero {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  padding: 3.25rem 0 3rem !important;
  background:
    linear-gradient(115deg, rgba(20, 28, 38, 0.9) 0%, rgba(20, 28, 38, 0.7) 48%, rgba(184, 92, 56, 0.5) 100%),
    url("/img/1.jpg") center/cover no-repeat !important;
  border-bottom: 3px solid var(--m18-copper);
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type::before,
.daphne-shell section.m18-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-12deg, transparent 0 16px, rgba(255, 255, 255, 0.025) 16px 17px);
  pointer-events: none;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type > .max-w-7xl,
.daphne-shell section.m18-hero > .max-w-7xl {
  position: relative;
  z-index: 1;
  text-align: left !important;
  display: block;
  min-height: 0;
  /* keep template rail: max-w-7xl + horizontal padding */
  width: 100%;
  max-width: 80rem; /* matches Tailwind max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.daphne-shell section.m18-hero .m18-hero__copy {
  max-width: 40rem;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type h1,
.daphne-shell section.m18-hero h1 {
  font-family: var(--m18-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.85rem !important;
  max-width: 18ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type p,
.daphne-shell section.m18-hero p {
  color: rgba(255, 245, 238, 0.9) !important;
  max-width: 34rem;
  font-size: 1rem !important;
  line-height: 1.65;
  margin-bottom: 1.35rem !important;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type .flex.justify-center,
.daphne-shell section.m18-hero .flex.justify-center {
  justify-content: flex-start !important;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.bg-white,
.daphne-shell section.m18-hero a.bg-white {
  background: var(--m18-copper) !important;
  color: #fff !important;
  border-radius: var(--m18-radius) !important;
  box-shadow: 0 6px 16px rgba(184, 92, 56, 0.3);
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.bg-white:hover,
.daphne-shell section.m18-hero a.bg-white:hover {
  background: var(--m18-copper-deep) !important;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.border-white,
.daphne-shell section.m18-hero a.border-white {
  border-color: rgba(255, 255, 255, 0.75) !important;
  border-radius: var(--m18-radius) !important;
  color: #fff !important;
  background: transparent !important;
}

.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.border-white:hover,
.daphne-shell section.m18-hero a.border-white:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* COPPER REEL mark only on home hero (avoid double mark) */
.daphne-shell section.m18-hero .m18-hero__copy::after,
.daphne-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type > .max-w-7xl:not(:has(.m18-hero__copy))::after {
  content: "COPPER REEL";
  display: block;
  margin-top: 1.1rem;
  font-family: var(--m18-display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: rgba(255, 236, 220, 0.5);
}

.daphne-shell section.m18-hero > .max-w-7xl:has(.m18-hero__copy)::after {
  content: none !important;
  display: none !important;
}

/* ========== CATEGORY / OTHER BANNERS ========== */
.daphne-shell section.bg-gradient-to-r.from-blue-600:not(.m18-hero) {
  background: linear-gradient(120deg, #1c2733 0%, #2a3a3d 55%, #8f4224 100%) !important;
  border-bottom: 3px solid var(--m18-copper);
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.daphne-shell section.bg-gradient-to-r.from-blue-600:not(.m18-hero)::before,
.daphne-shell section.bg-gradient-to-r.from-blue-600:not(.m18-hero)::after {
  content: none !important;
  display: none !important;
}

.daphne-shell section.bg-gradient-to-r.from-blue-600:not(.m18-hero) > .max-w-7xl {
  display: block !important;
  min-height: 0 !important;
  text-align: left !important;
}

.daphne-shell section.bg-gradient-to-r.from-blue-600:not(.m18-hero) h1 {
  font-family: var(--m18-display);
  letter-spacing: 0.03em;
}

/* ========== SECTION CHROME ========== */
.daphne-shell main section.py-8.bg-white,
.daphne-shell main section.bg-white.shadow-sm {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.daphne-shell main section.py-12 {
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important;
}

.daphne-shell main section.py-12.bg-gray-100,
.daphne-shell main section.bg-gradient-to-r.from-purple-50 {
  background: var(--m18-paper-2) !important;
}

.daphne-shell h2.text-2xl,
.daphne-shell h2.text-3xl {
  font-family: var(--m18-display);
  letter-spacing: 0.03em;
  color: var(--m18-ink) !important;
}

/* Only section titles: accent under the heading text, not a left bar on the whole flex row */
.daphne-shell main section h2.text-2xl {
  position: relative;
  padding-bottom: 0.15rem;
}

.daphne-shell main section .flex.items-center > svg.h-6.w-6,
.daphne-shell main section .flex.items-center > .h-6.w-6 {
  color: var(--m18-copper) !important;
  flex-shrink: 0;
}

.daphne-shell main section a.text-blue-600.hover\:text-blue-700,
.daphne-shell main section .flex.items-center.justify-between > a.text-blue-600 {
  color: var(--m18-teal) !important;
  font-weight: 600;
  white-space: nowrap;
}

.daphne-shell main section a.text-blue-600.hover\:text-blue-700:hover {
  color: var(--m18-copper) !important;
}

.daphne-shell .text-yellow-500,
.daphne-shell .text-red-500,
.daphne-shell .text-green-500 {
  color: var(--m18-copper) !important;
}

/* ========== CATEGORY TILES ========== */
.daphne-cat-grid {
  gap: 0.85rem !important;
}

@media (min-width: 1280px) {
  .daphne-cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.daphne-cat-grid > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line) !important;
  border-radius: var(--m18-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.daphne-cat-grid > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--m18-copper);
  opacity: 0.85;
}

.daphne-cat-grid > a:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 92, 56, 0.55) !important;
  box-shadow: var(--m18-shadow);
}

.daphne-cat-grid > a .text-blue-500,
.daphne-cat-grid > a svg {
  color: var(--m18-teal) !important;
}

.daphne-cat-grid > a .text-gray-700,
.daphne-cat-grid > a .text-sm {
  color: var(--m18-ink) !important;
  font-weight: 600;
}

/* ========== VIDEO CARDS ========== */
.daphne-grid-3,
.daphne-grid-4 {
  align-items: stretch;
}

.daphne-grid-3 > div.bg-white,
.daphne-grid-4 > div.bg-white,
.daphne-video-related-grid > div.bg-white {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line);
  border-radius: var(--m18-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.daphne-grid-3 > div.bg-white:hover,
.daphne-grid-4 > div.bg-white:hover,
.daphne-video-related-grid > div.bg-white:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 92, 56, 0.4);
  box-shadow: var(--m18-shadow) !important;
}

.daphne-grid-3 > div.bg-white > .p-4,
.daphne-grid-4 > div.bg-white > .p-4,
.daphne-video-related-grid > div.bg-white > .p-4 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.daphne-grid-3 .aspect-video,
.daphne-grid-4 .aspect-video,
.daphne-video-related-grid .aspect-video {
  background: #0f1620;
}

.daphne-grid-3 .absolute.top-2.right-2.bg-yellow-500,
.daphne-grid-4 .absolute.top-2.right-2.bg-yellow-500,
.daphne-video-related-grid .absolute.top-2.right-2.bg-yellow-500 {
  top: 0.55rem !important;
  right: 0.55rem !important;
  left: auto !important;
  background: var(--m18-copper) !important;
  border-radius: 4px !important;
  padding: 0.15rem 0.4rem !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.daphne-grid-3 .p-4 > a.font-semibold,
.daphne-grid-4 .p-4 > a.font-semibold,
.daphne-video-related-grid .p-4 > a.font-semibold {
  color: var(--m18-ink) !important;
  font-weight: 700;
}

.daphne-grid-3 .p-4 > a.font-semibold:hover,
.daphne-grid-4 .p-4 > a.font-semibold:hover {
  color: var(--m18-copper) !important;
}

.daphne-shell .daphne-grid-3 a.bg-blue-100.text-blue-600,
.daphne-shell .daphne-grid-4 a.bg-blue-100.text-blue-600,
.daphne-shell .daphne-video-related-grid a.bg-blue-100.text-blue-600 {
  background: var(--m18-teal-soft) !important;
  color: var(--m18-teal) !important;
  border-radius: 4px !important;
}

/* ========== WHY US ========== */
.daphne-shell section.py-12.bg-white .w-16.h-16.rounded-full {
  border-radius: var(--m18-radius) !important;
  background: var(--m18-copper-soft) !important;
}

.daphne-shell section.py-12.bg-white .bg-blue-100,
.daphne-shell section.py-12.bg-white .bg-green-100,
.daphne-shell section.py-12.bg-white .bg-purple-100 {
  background: var(--m18-copper-soft) !important;
}

.daphne-shell section.py-12.bg-white .text-blue-600,
.daphne-shell section.py-12.bg-white .text-green-600,
.daphne-shell section.py-12.bg-white .text-purple-600 {
  color: var(--m18-copper) !important;
}

/* ========== CATEGORY LIST ========== */
.daphne-shell .bg-white.rounded-lg.shadow-sm {
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line);
  border-radius: var(--m18-radius-lg) !important;
  box-shadow: none !important;
}

.daphne-shell .bg-white.rounded-lg.shadow-md.flex.flex-row {
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line);
  border-radius: var(--m18-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.daphne-category-list-cover-wrap {
  border-right: 1px solid var(--m18-line);
}

.daphne-pagination-link {
  border-color: var(--m18-line) !important;
  color: var(--m18-ink) !important;
  border-radius: var(--m18-radius) !important;
  background: var(--m18-surface);
}

.daphne-pagination-link:hover {
  background: var(--m18-copper-soft) !important;
  border-color: var(--m18-copper) !important;
  color: var(--m18-copper-deep) !important;
}

/* ========== PLAY ========== */
.daphne-video-body {
  background: transparent !important;
}

.daphne-player-card {
  background: var(--m18-footer) !important;
  border: 1px solid #243140;
  border-radius: var(--m18-radius-lg) !important;
  box-shadow: 0 14px 32px rgba(20, 28, 38, 0.22) !important;
  overflow: hidden;
}

.daphne-player__retry {
  background: var(--m18-copper) !important;
}

.daphne-player__retry:hover {
  background: var(--m18-copper-deep) !important;
}

.daphne-slider::-webkit-slider-thumb {
  background: var(--m18-copper) !important;
}

.daphne-shell .daphne-video-layout > div > .bg-white,
.daphne-shell aside .bg-white {
  background: var(--m18-surface) !important;
  border: 1px solid var(--m18-line);
  border-radius: var(--m18-radius-lg) !important;
  box-shadow: none !important;
}

.daphne-shell .bg-red-600 {
  background: var(--m18-copper) !important;
}

.daphne-shell .hover\:bg-red-700:hover {
  background: var(--m18-copper-deep) !important;
}

.daphne-side-rec-item:hover {
  background: var(--m18-copper-soft) !important;
}

.daphne-side-rec-item:hover .daphne-side-rec-title {
  color: var(--m18-copper-deep) !important;
}

.daphne-side-rec-title {
  color: var(--m18-ink) !important;
}

/* ========== FOOTER ========== */
.daphne-shell > footer,
.daphne-shell footer.m18-footer {
  background: linear-gradient(180deg, var(--m18-footer-2), var(--m18-footer)) !important;
  color: #e7eef3 !important;
  box-shadow: inset 0 3px 0 0 var(--m18-copper);
}

.daphne-shell > footer::before,
.daphne-shell footer.m18-footer::before {
  content: none !important;
  display: none !important;
}

.daphne-footer-grid {
  gap: 2rem !important;
}

.daphne-shell footer .text-xl.font-bold {
  font-family: var(--m18-display);
  letter-spacing: 0.04em;
}

.daphne-shell footer .text-blue-400,
.daphne-shell footer svg.text-blue-400 {
  color: #e0a07a !important;
}

.daphne-shell footer a.text-gray-300:hover,
.daphne-shell footer .hover\:text-blue-400:hover {
  color: #f0c3a8 !important;
}

.daphne-shell footer .border-gray-800 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.daphne-ababseo {
  background: rgba(184, 92, 56, 0.16) !important;
  border-color: rgba(184, 92, 56, 0.35) !important;
  border-radius: var(--m18-radius) !important;
}

.daphne-ababseo__icon {
  background: linear-gradient(135deg, var(--m18-copper), var(--m18-amber)) !important;
  border-radius: var(--m18-radius) !important;
}

.daphne-ababseo__text {
  background: linear-gradient(90deg, #f0c3a8, #f6d59a, #9fd4d8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Motion: subtle, no layout thrash */
@media (prefers-reduced-motion: no-preference) {
  .daphne-cat-grid > a,
  .daphne-grid-3 > div.bg-white,
  .daphne-grid-4 > div.bg-white,
  .daphne-grid-3 > article.bg-white,
  .daphne-grid-4 > article.bg-white {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
}

.daphne-shell a:focus-visible,
.daphne-shell button:focus-visible,
.daphne-shell input:focus-visible {
  outline: 2px solid var(--m18-copper) !important;
  outline-offset: 2px;
}

.daphne-shell .text-gray-900 { color: var(--m18-ink) !important; }
.daphne-shell .text-gray-700 { color: var(--m18-ink-soft) !important; }
.daphne-shell .text-gray-600 { color: var(--m18-mute) !important; }

.daphne-not-found-title {
  background: linear-gradient(90deg, var(--m18-copper), var(--m18-teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Cross-platform / a11y polish */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.m18-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--m18-copper);
  color: #fff;
  border-radius: var(--m18-radius);
}

.m18-skip:focus {
  left: 0.75rem;
  top: 0.75rem;
}

.m18-header nav a.is-active,
.m18-nav-scroll__link.is-active {
  color: var(--m18-copper) !important;
  font-weight: 600;
}

.m18-nav-scroll {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 0.65rem;
  margin: 0 -0.15rem;
}

.m18-nav-scroll::-webkit-scrollbar {
  display: none;
}

.m18-nav-scroll__link {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--m18-line);
  border-radius: 999px;
  background: var(--m18-surface);
  color: var(--m18-ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
}

.m18-nav-scroll__link:hover {
  border-color: var(--m18-copper);
  color: var(--m18-copper);
}

@media (min-width: 768px) {
  .m18-nav-scroll {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daphne-shell *,
  .daphne-shell *::before,
  .daphne-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile polish */
@media (max-width: 767px) {
  .daphne-shell > header a > span.text-xl {
    font-size: 1.05rem;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .daphne-shell section.m18-hero {
    padding: 2.25rem 0 2rem !important;
  }

  .daphne-shell .m18-hero .px-8.py-3 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}