/* Noir Studio — ink black + coral, cleaner layout than the gold/brown skin */
:root {
  --bg: #08090d;
  --bg-2: #0e1016;
  --panel: #161922;
  --panel-2: #1d2130;
  --line: #2c3344;
  --text: #f5f2eb;
  --muted: #9aa3b5;
  --muted-2: #6f788a;
  --accent: #ff5c4d;
  --accent-2: #ff8a7a;
  --mint: #6ed8c2;
  --rate: #f0c36a;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 80;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
}
.skip-link:focus { top: calc(0.75rem + env(safe-area-inset-top, 0px)); }

.min-h-screen > section.px-4,
.min-h-screen.py-8.px-4 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body {
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(255, 92, 77, 0.16), transparent 58%),
    radial-gradient(720px 360px at 92% 6%, rgba(110, 216, 194, 0.08), transparent 52%),
    linear-gradient(180deg, #0c0e14 0%, #08090d 38%, #07080b 100%) !important;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0b0c10 !important; }
::-webkit-scrollbar-thumb {
  background: #3a4154 !important;
  border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent) !important; }

.gradient-text {
  background: linear-gradient(115deg, #fff6f1 10%, #ff8a7a 48%, #ff5c4d) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(255, 92, 77, 0.28) !important;
}
.btn-primary:hover {
  background: #ff6f61 !important;
  transform: translateY(-1px) !important;
}

/* ---------- Header: one slim studio bar ---------- */
header.sticky,
header.bg-gray-900\/95 {
  background: rgba(8, 9, 13, 0.78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  box-shadow: none !important;
}
header.sticky::before,
header.bg-gray-900\/95::before { display: none !important; }
header > .container > .flex.items-center.justify-between.h-16 {
  height: 4.25rem !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  min-width: 0;
}
header .header-bar .site-search {
  order: 0 !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  min-width: 0;
}
header nav {
  order: 0 !important;
  gap: 0.2rem !important;
  flex-shrink: 0;
}
header nav.space-x-6 > :not([hidden]) ~ :not([hidden]),
header .space-x-4 > :not([hidden]) ~ :not([hidden]) {
  margin-left: 0 !important;
}
header .flex.items-center.space-x-4 {
  gap: 0.65rem !important;
}
header nav a {
  padding: 0.4rem 0.7rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
  color: var(--muted) !important;
}
header nav a:hover,
header nav a.text-white {
  color: var(--text) !important;
  background: rgba(255, 92, 77, 0.14) !important;
}
header nav a span.absolute { display: none !important; }
header form input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  height: 2.5rem;
}
header form input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 77, 0.16);
}
header .text-blue-500,
header .text-blue-400 { color: var(--accent) !important; }
header a[href="/login/"],
header a[href="/login"] { color: var(--muted) !important; }
header a[href="/register/"],
header a[href="/register"] {
  color: #fff !important;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.32rem 0.9rem;
}

/* ---------- Hero: featured stage card ---------- */
.min-h-screen > section.relative.py-20 {
  text-align: left !important;
  padding: 1.5rem 0 0.25rem !important;
  background: none !important;
}
.min-h-screen > section.relative.py-20 > .container {
  text-align: left !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2.25rem 1.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(720px 280px at 88% 20%, rgba(255, 92, 77, 0.22), transparent 58%),
    radial-gradient(520px 240px at 8% 80%, rgba(110, 216, 194, 0.1), transparent 55%),
    linear-gradient(135deg, #151821 0%, #10131b 58%, #1a1520 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
@media (min-width: 900px) {
  .min-h-screen > section.relative.py-20 > .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    column-gap: 2rem;
    align-items: center;
  }
  .min-h-screen > section.relative.py-20 > .container > * {
    grid-column: 1;
  }
  .min-h-screen > section.relative.py-20 > .container::after {
    content: "国产热播\A 全集连播\A 高清畅看";
    grid-column: 2;
    grid-row: 1 / 8;
    align-self: center;
    white-space: pre;
    text-align: right;
    font-size: 0.92rem;
    letter-spacing: 0.22em;
    line-height: 2.55;
    color: rgba(245, 242, 235, 0.48);
    border-right: 2px solid var(--accent);
    padding: 0.2rem 1.15rem 0.2rem 0;
  }
}
.min-h-screen > section.relative.py-20 h1 {
  font-family: Georgia, "Songti SC", "Noto Serif SC", serif !important;
  font-size: clamp(2.1rem, 5vw, 3.6rem) !important;
  line-height: 1.12 !important;
  max-width: 14ch;
}
.min-h-screen > section.relative.py-20 p {
  color: var(--muted) !important;
  max-width: 38rem !important;
  margin-left: 0 !important;
  font-size: 1.05rem !important;
}
.min-h-screen > section.relative.py-20 .justify-center {
  justify-content: flex-start !important;
}
.min-h-screen > section.relative.py-20 a.border {
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.min-h-screen > section.relative.py-20 a.border:hover {
  border-color: var(--mint) !important;
  color: var(--mint) !important;
}

/* ---------- Section titles ---------- */
.min-h-screen section.py-12 {
  padding-top: 2rem !important;
  padding-bottom: 1.25rem !important;
}
.min-h-screen section h2 {
  letter-spacing: 0.04em;
  font-size: 1.35rem !important;
}
.min-h-screen section h2 svg,
.min-h-screen h2 .text-blue-500,
.min-h-screen h2 .text-yellow-500,
.min-h-screen h2 .text-red-500,
.min-h-screen h2 .text-green-500 {
  color: var(--accent) !important;
}
a.text-blue-400,
.text-blue-400,
.hover\:text-blue-300:hover,
.group:hover .group-hover\:text-blue-400 {
  color: var(--accent-2) !important;
}

/* ---------- Category tiles ---------- */
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 {
  gap: 1rem !important;
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a.bg-gradient-to-br {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  text-align: left !important;
  padding: 1.5rem 1.3rem 1.3rem !important;
  min-height: 8.2rem;
  position: relative;
  overflow: hidden;
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a.bg-gradient-to-br::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: rgba(255, 92, 77, 0.12);
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(2)::after { background: rgba(240, 195, 106, 0.12); }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(3)::after { background: rgba(110, 216, 194, 0.14); }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(4)::after { background: rgba(167, 139, 250, 0.16); }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a.bg-gradient-to-br::before {
  content: "01";
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(2)::before { content: "02"; }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(3)::before { content: "03"; }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a:nth-child(4)::before { content: "04"; }
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a h3 {
  font-size: 1.25rem !important;
  margin-bottom: 0.35rem !important;
  padding-right: 2.2rem;
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a > svg {
  display: none !important;
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a p,
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a .text-blue-100 {
  color: var(--muted) !important;
}
.min-h-screen > section .grid.grid-cols-2.md\:grid-cols-4 > a svg {
  color: var(--accent) !important;
  margin-left: 0 !important;
}

/* ---------- Video cards: poster + overlay title ---------- */
.group.relative.bg-gray-800.rounded-lg,
.card-hover.bg-gray-800 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.card-hover:hover {
  transform: translateY(-8px) !important;
  box-shadow: none !important;
}
.group.relative.bg-gray-800 .aspect-video,
.card-hover .aspect-video {
  aspect-ratio: 3 / 4 !important;
  border-radius: 16px !important;
}
.group.relative.bg-gray-800,
.card-hover.bg-gray-800 {
  min-width: 0;
}
.group.relative.bg-gray-800 .p-4 {
  padding: 0.65rem 0.1rem 0 !important;
  min-height: 2.1rem;
}
.group.relative.bg-gray-800 .p-4 h3 {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  -webkit-line-clamp: unset !important;
  height: 1.4em;
  margin-bottom: 0 !important;
}
.bg-blue-500\/20,
span.bg-blue-500\/20 {
  background: rgba(255, 92, 77, 0.12) !important;
  color: var(--accent-2) !important;
  border-radius: 999px !important;
}
.bg-yellow-500\/90 {
  background: var(--rate) !important;
  color: #2a1d08 !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.bg-blue-500\/90 {
  background: rgba(255, 92, 77, 0.92) !important;
  color: #fff !important;
}
.min-h-screen section .grid {
  gap: 1rem !important;
}
@media (min-width: 640px) {
  .min-h-screen section .grid.sm\:grid-cols-2,
  .min-h-screen section .grid.xl\:grid-cols-3,
  .min-h-screen section .grid.xl\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .min-h-screen section .grid.xl\:grid-cols-3,
  .min-h-screen section .grid.xl\:grid-cols-4,
  .min-h-screen .grid.xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---------- Category / play / info pages ---------- */
.min-h-screen.py-8,
.min-h-screen { background: transparent !important; }
.min-h-screen.py-8 h1 {
  color: var(--text) !important;
  font-family: Georgia, "Songti SC", serif !important;
}
aside a.flex {
  align-items: center !important;
  gap: 0.75rem !important;
}
aside a .w-24.h-16 {
  width: 4.5rem !important;
  height: 6rem !important;
  border-radius: 10px !important;
  flex-shrink: 0;
}
aside a h3,
aside a h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.min-h-screen.py-8 .bg-gray-800.rounded-lg.p-4.mb-8,
.min-h-screen.py-8 .bg-gray-800.rounded-lg.p-6,
aside .bg-gray-800,
.bg-gray-800.rounded-lg {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
}
.min-h-screen.py-8 button.bg-blue-500,
nav[aria-label="分页导航"] a.bg-blue-500,
.bg-blue-500.text-white {
  background: var(--accent) !important;
  color: #fff !important;
}
.min-h-screen.py-8 button.bg-gray-700,
.min-h-screen.py-8 select.bg-gray-700,
.min-h-screen.py-8 .bg-gray-700 {
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
}
nav[aria-label="分页导航"] a { border-radius: 999px !important; }
nav[aria-label="分页导航"] a.bg-gray-800 {
  background: var(--panel) !important;
  border: 1px solid var(--line);
}

.bg-gradient-to-r.from-blue-600.to-purple-600 {
  background: linear-gradient(90deg, #3a1c1c, #4a2228 50%, #24161c) !important;
  border: 1px solid rgba(255, 92, 77, 0.28) !important;
  border-radius: 16px !important;
}
.bg-gradient-to-r.from-blue-600.to-purple-600 .text-blue-100 { color: var(--muted) !important; }
.bg-gradient-to-r.from-blue-600.to-purple-600 button.bg-white {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.min-h-screen.py-8 video.aspect-video,
.min-h-screen.py-8 .relative.bg-black .aspect-video,
.min-h-screen.py-8 video {
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px;
}
input[type="range"].accent-blue-500 { accent-color: var(--accent) !important; }

/* ---------- Footer ---------- */
footer.bg-gray-900,
footer {
  background: #07080b !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 2.5rem !important;
  box-shadow: inset 0 2px 0 var(--accent);
}
footer .py-12 { padding-top: 2.2rem !important; padding-bottom: 1.6rem !important; }
footer .text-blue-500 { color: var(--accent) !important; }
footer a:hover { color: var(--accent-2) !important; }
footer .border-gray-800 { border-color: var(--line) !important; }
footer h3 {
  color: var(--text) !important;
  letter-spacing: 0.08em;
  font-size: 0.78rem !important;
  text-transform: uppercase;
}

.bg-gray-900 { background-color: var(--bg-2) !important; }
.bg-gray-800 { background-color: var(--panel) !important; }
.border-gray-800,
.border-gray-700,
.border-gray-600 { border-color: var(--line) !important; }
.text-gray-300 { color: #d5d8e0 !important; }
.text-gray-400 { color: var(--muted) !important; }
.text-gray-500 { color: var(--muted-2) !important; }
.text-blue-500,
.text-blue-600 { color: var(--accent) !important; }
.focus\:border-blue-500:focus { border-color: var(--accent) !important; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

.min-h-screen.py-8 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.min-h-screen.py-8 .bg-gray-800.rounded-lg.p-4.mb-8 {
  display: flex;
}
.min-h-screen.py-8 .bg-gray-800.rounded-lg.p-4.mb-8 > .flex {
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.header-msearch { display: none; }
@media (max-width: 767px) {
  header .header-bar .site-search { display: none !important; }
  .header-msearch { display: block; padding: 0 0 0.75rem; }
  .header-msearch .site-search { display: flex !important; width: 100%; }
  .min-h-screen > section.relative.py-20 > .container {
    padding: 1.75rem 1.25rem !important;
    border-radius: 20px;
  }
  input, select, textarea, button { font-size: 16px; }
}
@media (pointer: coarse) {
  header a, header summary, .btn-primary, .ep-btn { min-height: 44px; }
}
@supports (padding: env(safe-area-inset-top)) {
  header.sticky { padding-top: env(safe-area-inset-top); }
  footer { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Play page: real video + episode chips */
.player-box video {
  display: block;
  width: 100%;
  background: #000;
}
.ep-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .ep-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.ep-btn {
  display: block;
  text-align: center;
  padding: 0.45rem 0.25rem;
  border-radius: 0.5rem;
  background: #1f2433;
  color: #d7dce8;
  font-size: 0.8rem;
  text-decoration: none;
}
.ep-btn:hover,
.ep-btn.is-on {
  background: var(--accent);
  color: #fff;
}

/* Auth cards */
.auth-card input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: #11141c;
  border: 1px solid var(--line);
  color: var(--text);
}
.auth-card label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.875rem;
}

header details.site-menu { position: relative; }
header details summary { list-style: none; }
header details summary::-webkit-details-marker { display: none; }