/* MediaVault fixed palette: 深海钴蓝 */
:root {
  color-scheme: dark;
  --bg: #0c1526;
  --panel: #17243a;
  --panel-2: #22324c;
  --text: #f3f6fc;
  --muted: #acbad0;
  --accent: #8bafff;
  --accent-2: #9ad7d0;
  --accent-ink: #101b30;
  --line: #3b4d68;
  --edge: #829abc;
  --aura: rgba(105, 150, 255, .17);
  --aura-2: rgba(120, 213, 216, .11);
  --thumb-a: #293e65;
  --thumb-b: #153c4a;
  --shadow: rgba(2, 8, 25, .36);
}

html { background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--muted);
}
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 410px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 43% 67% at 13% 0%, var(--aura), transparent 75%),
    radial-gradient(ellipse 49% 64% at 88% 4%, var(--aura-2), transparent 78%);
}
::selection { background: var(--accent); color: var(--accent-ink); }
a, button, select, input { -webkit-tap-highlight-color: transparent; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Quiet two-tone header glow, with an edge that remains visible in every skin. */
.site-header {
  position: relative;
  max-width: 1320px;
  grid-template-columns: minmax(175px, 1fr) auto minmax(230px, 320px) minmax(112px, 140px);
  gap: 14px;
  margin-top: 9px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(110deg, var(--aura), transparent 37%, var(--aura-2)),
    var(--panel);
  box-shadow: 0 14px 36px var(--shadow);
}
.brand-main {
  color: var(--accent);
  text-shadow: 0 5px 25px var(--aura);
}
.brand-sub { color: var(--accent-2); }
.nav-item, .nav-icon { color: var(--muted); }
.nav-item:hover, .nav-item.is-active,
.nav-item:hover .nav-icon, .nav-item.is-active .nav-icon { color: var(--accent); }
.nav-home { color: var(--text); }
.nav-sponsor .nav-icon { color: var(--accent-2); }
.search {
  height: 48px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--panel-2);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--aura);
}
.search-icon { line-height: 46px; color: var(--muted); }
.search input { min-width: 0; padding: 0 10px 0 38px; color: var(--text); }
.search input::placeholder { color: var(--muted); opacity: .8; }
.search button {
  flex: 0 0 74px;
  width: 74px;
  color: var(--accent-ink);
  background: var(--accent);
  transition: filter .18s ease;
}
.search button:hover { color: var(--accent-ink); background: var(--accent); filter: brightness(1.09); }
.theme-control {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
}
.theme-control-label { padding-left: 2px; font-size: 11px; line-height: 1; letter-spacing: .12em; }
.theme-select {
  width: 100%;
  height: 34px;
  padding: 3px 22px 3px 8px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
}
.theme-select:hover { border-color: var(--accent); }

/* Site-wide navigation and discovery surfaces. */
.category-panel, .link-panel, .content-section, .catalog-section,
.content-page, .detail-page, .player-page, .icon-panel, .banner-panel, footer {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
.category-row { border-bottom-color: var(--line); }
.category-row:first-child { border-top-color: var(--edge); }
.category-row dt { color: var(--accent); text-shadow: none; }
.category-row dd { color: var(--text); }
.category-row a:hover { color: var(--accent-2); }
.block-title, .section-head h2 { color: var(--text); font-weight: 650; letter-spacing: .02em; }
.link-panel .link-grid .link-card {
  min-height: 44px;
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--panel);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.sponsor-links .link-grid .link-card:nth-child(n),
.partner-links .link-grid .link-card:nth-child(n) { color: var(--accent); }
.sponsor-links .link-grid .link-card:nth-child(3n + 2),
.partner-links .link-grid .link-card:nth-child(3n + 2) { color: var(--accent-2); }
.sponsor-links .link-grid .link-card:nth-child(3n),
.partner-links .link-grid .link-card:nth-child(3n) { color: var(--text); }
.link-panel .link-grid .link-card:hover {
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
}
.tag {
  border-color: var(--edge);
  color: var(--text);
  background: var(--panel);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.tag:hover, .tag.is-selected {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
  transform: translateY(-1px);
}
.icon-card { color: var(--text); }
.icon-card img { background: var(--panel-2); box-shadow: 0 5px 16px var(--shadow); }
.icon-card:hover { color: var(--accent); }
.banner-card { border: 1px solid var(--line); background: var(--panel-2); }
.notice { border-color: var(--line); color: var(--muted); background: var(--panel); }
.notice strong, .more { color: var(--accent); }
.slot-note { color: var(--muted); }

/* Cards carry the visual rhythm; effects use only opacity and transforms. */
.section-title-row { border-bottom-color: var(--line); }
.section-title-row h2, .section-title-row h1,
.content-page h1, .detail-page h1, .player-page h1 { color: var(--text); }
.card-grid { row-gap: 22px; }
.media-card { transition: transform .2s ease; }
.thumb {
  border-color: var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--thumb-a), var(--thumb-b));
  box-shadow: 0 10px 24px var(--shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.thumb::after {
  content: "";
  display: block;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .35));
}
.thumb span {
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 5px;
  color: #fff;
  background: rgba(8, 12, 16, .76);
}
.media-card h3 { color: var(--text); font-weight: 500; }
.media-card:hover h3 { color: var(--accent); }
.media-card:hover .thumb { border-color: var(--accent); box-shadow: 0 16px 34px var(--shadow), 0 0 0 2px var(--aura); }
.media-card:hover .thumb img { transform: scale(1.045); filter: brightness(1.06); }
.media-card.is-opening .thumb { transform: scale(.965); border-color: var(--accent); }
.media-card.is-opening .thumb img { transform: scale(1.095); filter: brightness(1.22); }
.poster-flight {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 12px var(--aura), 0 22px 65px var(--shadow);
  pointer-events: none;
  opacity: 1;
  transform-origin: center center;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
}
.poster-flight img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-flight.is-moving { opacity: 0; }
.empty { border-color: var(--line); color: var(--muted); background: var(--panel); }

/* Detail page lands as a cinematic hero after a poster is selected. */
.detail-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  padding: 30px;
  border-color: var(--line);
  border-radius: 15px;
  background: var(--panel);
  box-shadow: 0 20px 52px var(--shadow);
  animation: detail-arrive .38s cubic-bezier(.2, .8, .2, 1) both;
}
.detail-ambient { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.detail-ambient img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .13; }
.detail-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--panel) 5%, transparent 48%, var(--panel) 98%);
}
.detail-image-wrapper, .detail-info-wrapper { position: relative; z-index: 1; }
.detail-image-wrapper { flex: 0 0 40%; max-width: 40%; }
.detail-image-wrapper img {
  width: min(100%, 390px);
  margin: 0 auto;
  aspect-ratio: 5 / 6;
  border: 1px solid var(--edge);
  border-radius: 11px;
  box-shadow: 0 22px 50px var(--shadow);
}
.detail-info-wrapper { flex: 1 1 auto; max-width: none; }
.detail-info-wrapper h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.22; letter-spacing: .01em; }
.detail-info-wrapper p { color: var(--muted); font-size: 15px; line-height: 1.75; }
.detail-info-type { border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel-2); }
.primary-play {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 10px 27px var(--aura);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.primary-play:hover {
  color: var(--accent-ink);
  filter: brightness(1.08);
  transform: translateY(-3px);
  box-shadow: 0 17px 37px var(--aura);
}
.primary-play:active { transform: scale(.96); }

/* Lists, controls, reading pages and player. */
.filter-strip, .play-list { border-color: var(--line); background: var(--panel); }
.filter-strip a, .play-list a, .play-list .play-link {
  color: var(--text);
  background: var(--panel-2);
}
.filter-strip a:hover, .play-list a:hover, .play-list .play-link:hover {
  color: var(--accent-ink);
  background: var(--accent);
}
.play-list strong { color: var(--accent); }
.page-nav a, .page-nav span { color: var(--text); border-color: var(--line); }
.page-nav a:hover, .page-nav .is-current { color: var(--accent-ink); background: var(--accent); }
.page-nav .page-meta { color: var(--muted); }
.player-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #080a0d;
  box-shadow: 0 20px 50px var(--shadow);
  animation: detail-arrive .36s cubic-bezier(.2, .8, .2, 1) both;
}
.player-refresh {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}
.player-refresh:hover { background: var(--accent); filter: brightness(1.08); }
.player-refresh.is-visible { box-shadow: 0 0 0 3px var(--aura); }
.player-nav, .text-row { border-color: var(--line); }
.text-row { color: var(--text); }
.text-row time { color: var(--muted); }
.article-content { color: var(--text); line-height: 1.8; }
.article-content a, .source-link { color: var(--accent); }
footer { border-color: var(--line); color: var(--muted); }

@keyframes detail-arrive {
  from { opacity: .45; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 1100px) {
  .site-header { grid-template-columns: minmax(135px, 1fr) auto minmax(190px, 280px) minmax(106px, 128px); gap: 10px; }
}
@media (max-width: 760px) {
  .site-header { gap: 12px; margin-top: 6px; padding: 14px; }
  .brand, .nav { width: 100%; }
  .search { flex: 1 1 55%; max-width: none; height: 46px; }
  .search-icon { line-height: 44px; }
  .search button { flex-basis: 64px; width: 64px; }
  .theme-control { flex: 0 0 120px; }
  .theme-control-label { display: none; }
  .theme-select { height: 46px; }
  .detail-wrapper { gap: 22px; padding: 18px; }
  .detail-image-wrapper, .detail-info-wrapper { flex: 1 1 auto; max-width: 100%; }
  .detail-image-wrapper img { max-width: 300px; }
  .detail-ambient::after { background: linear-gradient(180deg, transparent, var(--panel) 85%); }
}
@media (max-width: 375px) {
  .theme-control { flex-basis: 105px; }
  .theme-select { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .poster-flight { display: none; }
}

/* Fixed-theme package: three header columns and no theme picker. */
.site-header { grid-template-columns: minmax(190px, 1fr) auto minmax(280px, 360px); }
@media (max-width: 1100px) { .site-header { grid-template-columns: minmax(160px, 1fr) auto minmax(250px, 320px); } }
@media (max-width: 760px) { .search { flex: 1 1 100%; } }