/* 潮汐青绿主题：配色差异化 + 对齐与细节修正 */

:root {
  --tide-ink: #10221c;
  --tide-pine: #16483b;
  --tide-sea: #0d7377;
  --tide-sea-deep: #0a585b;
  --tide-foam: #e7f4f0;
  --tide-sand: #f4efe4;
  --tide-paper: #fffdf8;
  --tide-line: #d8cfc0;
  --tide-coral: #c44b24;
  --tide-muted: #5b6a64;
  --tide-soft: #3d4f48;
}

/* 编译 CSS 缺 .md:flex，头部搜索会被 hidden 永久藏掉 */
@media (min-width: 640px) {
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

html,
body,
#root,
#root > div.min-h-screen {
  background: var(--tide-sand) !important;
  color: var(--tide-ink);
}

.skip-link:focus {
  background: var(--tide-ink);
  color: #f3e6c8;
  border-radius: 2px;
}

/* ── 头部：垂直居中，搜索回中间，避免左右空一截 ── */

#root header.sticky {
  background: var(--tide-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--tide-sea);
}

#root header .max-w-7xl > .flex {
  min-height: 4.25rem;
  align-items: center !important;
  gap: 0.75rem 1rem;
}

#root header a[aria-label$="首页"] {
  padding: 0;
  gap: 0.65rem !important;
  flex-shrink: 0;
}

#root header a[aria-label$="首页"] > span.bg-gradient-to-br,
#root header a[aria-label$="首页"] > span.p-2 {
  background: var(--tide-sea) !important;
  background-image: none !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: #fff;
}

#root header a[aria-label$="首页"] .text-transparent,
#root header a[aria-label$="首页"] span.bg-clip-text {
  background: none !important;
  -webkit-text-fill-color: var(--tide-ink);
  color: var(--tide-ink) !important;
  letter-spacing: 0.02em;
}

#root header a[aria-label$="首页"] .text-gray-300 {
  color: var(--tide-muted) !important;
  letter-spacing: 0.04em;
}

#root header nav {
  flex-shrink: 0;
  order: 3;
}

#root header nav a {
  color: var(--tide-soft) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

#root header nav a:hover,
#root header nav a.text-yellow-400,
#root header nav a[aria-current="page"] {
  color: var(--tide-sea) !important;
  border-bottom-color: var(--tide-coral);
}

#root header nav a span.absolute {
  display: none !important;
}

#root header .max-w-7xl > .flex > form[role="search"] {
  order: 2;
  min-width: 0;
}

@media (min-width: 768px) {
  #root header .max-w-7xl > .flex > form[role="search"] {
    display: flex !important;
    flex: 1 1 16rem;
    max-width: 36rem;
    margin: 0 0.5rem !important;
  }
}

#root header form[role="search"] input[type="search"] {
  border-radius: 2px !important;
  background: var(--tide-sand) !important;
  color: var(--tide-ink) !important;
  border: 1px solid var(--tide-line) !important;
  box-shadow: none !important;
  height: 2.5rem;
}

#root header form[role="search"] input[type="search"]::placeholder {
  color: var(--tide-muted) !important;
}

#root header form[role="search"] input[type="search"]:focus {
  border-color: var(--tide-sea) !important;
  box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.16) !important;
}

#root header form[role="search"] svg {
  color: var(--tide-sea) !important;
}

#root header button[data-menu-toggle] {
  color: var(--tide-ink) !important;
  border-radius: 2px !important;
  flex-shrink: 0;
}

#root header button[data-menu-toggle]:hover {
  background: var(--tide-foam) !important;
  color: var(--tide-sea) !important;
}

#root [data-mobile-panel] a {
  color: var(--tide-soft) !important;
  border-radius: 2px !important;
}

#root [data-mobile-panel] a:hover,
#root [data-mobile-panel] a.text-yellow-400 {
  color: var(--tide-sea) !important;
  background: var(--tide-foam) !important;
}

#root [data-mobile-panel] input[type="search"] {
  border-radius: 2px !important;
  background: var(--tide-sand) !important;
  color: var(--tide-ink) !important;
  border: 1px solid var(--tide-line) !important;
}

/* ── 首页 Hero：正常折行，不再压成窄竖条 ── */

#root main > section.relative.overflow-hidden.text-white {
  background: var(--tide-pine) !important;
  background-image:
    linear-gradient(90deg, var(--tide-coral) 0 6px, transparent 6px),
    linear-gradient(160deg, #12362d 0%, #0d7377 58%, #16483b 100%) !important;
  text-align: left !important;
}

#root main > section.relative.overflow-hidden.text-white .absolute.inset-0 {
  opacity: 0.2;
}

#root main > section.relative.overflow-hidden.text-white .relative.max-w-7xl {
  text-align: left !important;
}

#root .hero-emblem {
  margin: 0 0 1.1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 2px;
  background: var(--tide-coral);
  box-shadow: none;
}

#root .hero-title {
  max-width: 46rem;
  letter-spacing: 0.02em;
  font-size: 1.75rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  #root .hero-title {
    font-size: 2.75rem;
    line-height: 1.22;
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  #root .hero-title {
    font-size: 3.05rem;
    line-height: 1.18;
  }
}

#root main > section.relative.overflow-hidden.text-white .relative.max-w-7xl > p {
  color: #d7ebe6 !important;
  max-width: 42rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  #root main > section.relative.overflow-hidden.text-white .relative.max-w-7xl > p {
    font-size: 1.25rem;
  }
}

#root main > section.relative.overflow-hidden.text-white .grid.max-w-3xl {
  max-width: 36rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.1rem;
}

#root main > section.relative.overflow-hidden.text-white .grid.max-w-3xl > div {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid var(--tide-coral) !important;
  border-radius: 0 !important;
  text-align: left;
  padding: 0.1rem 0 0.1rem 0.85rem !important;
}

#root main > section.relative.overflow-hidden.text-white .text-yellow-400 {
  color: #f3e6c8 !important;
}

/* 内页顶栏（最新 / 热门 / 搜索 / 关于 / 分类总览） */

#root main > section.bg-gradient-to-r.from-indigo-900.text-white:not(.relative) {
  background: var(--tide-pine) !important;
  background-image: linear-gradient(160deg, #12362d 0%, #0d7377 70%) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

#root main > section.bg-gradient-to-r.from-indigo-900.text-white:not(.relative) .text-center {
  text-align: left !important;
}

#root main > section.bg-gradient-to-r.from-indigo-900.text-white:not(.relative) h1 {
  letter-spacing: 0.03em;
  max-width: 40rem;
}

#root main > section.bg-gradient-to-r.from-indigo-900 .text-white\/80 a:hover {
  color: #f3e6c8 !important;
}

/* ── 区块标题 ── */

#root .section-heading > div.bg-gradient-to-r,
#root .section-heading > div.p-2 {
  background: var(--tide-sea) !important;
  background-image: none !important;
  border-radius: 2px !important;
}

#root .section-heading h2 {
  letter-spacing: 0.03em;
  color: var(--tide-ink) !important;
}

#root .section-heading .h-px {
  background: var(--tide-line) !important;
  background-image: none !important;
}

/* ── 影片卡片：不偏移，避免整排错位 ── */

#root article.group.cursor-pointer {
  background: var(--tide-paper) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid var(--tide-line);
  transform: none !important;
  overflow: hidden;
}

#root article.group.cursor-pointer:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--tide-sea);
}

#root article.group .rounded-full {
  border-radius: 2px !important;
}

#root article.group:hover h3 {
  color: var(--tide-sea) !important;
}

#root article.group .bg-indigo-50 {
  background: var(--tide-foam) !important;
  color: var(--tide-sea-deep) !important;
}

#root article.group .text-yellow-500 {
  color: var(--tide-coral) !important;
}

#root article.group .text-indigo-600 {
  color: var(--tide-sea) !important;
}

#root article.group .bg-gradient-to-r.from-indigo-500 {
  background: var(--tide-sea) !important;
  background-image: none !important;
}

/* 排行角标收回图内，不再探出卡片造成错位 */
#root .relative > .absolute.-top-2.-left-2,
#root .relative > .absolute.-top-2.z-10 {
  top: 0.55rem !important;
  left: 0.55rem !important;
  background: var(--tide-coral) !important;
  background-image: none !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* 分类封面卡 */

#root a.group.relative.block.overflow-hidden {
  border-radius: 2px !important;
  box-shadow: none !important;
  transform: none !important;
  border: 1px solid var(--tide-ink);
}

#root a.group.relative.block.overflow-hidden:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--tide-sea);
}

#root a.group.relative.block .text-yellow-400 {
  color: #f3e6c8 !important;
}

/* 只改筛选条，不动排行/列表卡片网格 */
#root .bg-white.rounded-xl.p-6 > .grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

#root .bg-white.rounded-xl.p-6 > .grid > a {
  width: auto !important;
  min-width: 4.25rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.95rem !important;
  text-align: center;
  border-radius: 2px !important;
}

#root a.bg-gradient-to-r.from-indigo-500.to-purple-600,
#root button.bg-gradient-to-r.from-indigo-500 {
  background: var(--tide-sea) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

#root a.bg-gray-100.text-gray-700 {
  background: var(--tide-paper) !important;
  color: var(--tide-soft) !important;
  border: 1px solid var(--tide-line);
}

#root a.bg-gray-100.text-gray-700:hover {
  background: var(--tide-foam) !important;
  color: var(--tide-sea) !important;
}

#root .bg-white.rounded-xl.shadow-lg,
#root .bg-white.rounded-lg.shadow-lg,
#root .bg-white.rounded-lg.shadow-md,
#root .bg-white.rounded-2xl.shadow-2xl {
  background: var(--tide-paper) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid var(--tide-line);
}

/* ── 分类页 Hero ── */

.category-hero {
  padding-top: 2rem;
}

.category-hero__overlay {
  background: linear-gradient(115deg, rgba(16, 34, 28, 0.94) 0%, rgba(13, 115, 119, 0.88) 62%, rgba(22, 72, 59, 0.9) 100%);
}

.category-hero__glow--tl {
  background: rgba(196, 75, 36, 0.14);
}

.category-hero__glow--br {
  background: rgba(13, 115, 119, 0.18);
}

.category-hero__breadcrumb a:hover,
.category-hero__back:hover,
.category-hero__breadcrumb span[aria-current="page"] {
  color: #f3e6c8;
}

.category-hero__title {
  letter-spacing: 0.03em;
}

.category-hero__stat {
  border-radius: 2px;
  background: rgba(255, 253, 248, 0.08);
  border: 1px solid rgba(243, 230, 200, 0.28);
  min-width: 6.5rem;
}

.category-hero__stat-num {
  color: #f3e6c8;
}

/* ── 播放页 ── */

#root #player,
#root #player video,
#root .target-player-video {
  background: #081410 !important;
}

#root .bg-gradient-to-r.from-indigo-900.via-purple-900.to-pink-900.p-4 {
  background: var(--tide-ink) !important;
  background-image: none !important;
}

#root aside .bg-indigo-50 {
  background: var(--tide-foam) !important;
}

#root aside .text-indigo-700,
#root aside a.text-indigo-600 {
  color: var(--tide-sea-deep) !important;
}

#root aside .bg-yellow-50,
#root aside .bg-yellow-100 {
  background: #f8ead8 !important;
}

#root aside .text-yellow-600 {
  color: var(--tide-coral) !important;
}

#root aside .bg-purple-50 {
  background: #e8f0ee !important;
}

#root aside .text-purple-600 {
  color: var(--tide-pine) !important;
}

#root aside .bg-green-50 {
  background: var(--tide-foam) !important;
}

#root aside .text-green-700 {
  color: var(--tide-sea-deep) !important;
}

#root aside .bg-indigo-100 {
  background: var(--tide-foam) !important;
  color: var(--tide-sea-deep) !important;
}

#root a.text-gray-600.hover\:text-indigo-600:hover {
  color: var(--tide-sea) !important;
}

.related-card__thumb {
  border-radius: 2px;
  border: 1px solid var(--tide-line);
}

.related-card:hover .related-card__title {
  color: var(--tide-sea);
}

/* ── 搜索 / 登录 / 注册 / 静态页 ── */

#root main form input[type="search"],
#root main form input[type="password"],
#root main form input:not([type]),
#root main form input[type="text"] {
  border-radius: 2px !important;
}

#root main form input:focus {
  --tw-ring-color: rgba(13, 115, 119, 0.45);
  border-color: var(--tide-sea) !important;
}

#root button.bg-indigo-600,
#root a.bg-indigo-600,
#root a.inline-flex.bg-indigo-600 {
  background: var(--tide-sea) !important;
  border-radius: 2px !important;
}

#root button.bg-indigo-600:hover,
#root a.bg-indigo-600:hover {
  background: var(--tide-sea-deep) !important;
}

#root a.text-indigo-600,
#root p a.text-indigo-600,
#root .text-indigo-600 {
  color: var(--tide-sea);
}

#root h1.text-6xl.font-bold.text-indigo-600 {
  color: var(--tide-sea) !important;
}

/* ── 页脚 ── */

.site-footer {
  margin-top: 3.5rem;
  background: var(--tide-ink);
  color: #e7f4f0;
  border-top: 6px solid var(--tide-sea);
}

.site-footer__logo-icon {
  border-radius: 2px;
  background: var(--tide-sea);
  box-shadow: none;
}

.site-footer__logo-text {
  background: none;
  -webkit-text-fill-color: #f4efe4;
  color: #f4efe4;
  letter-spacing: 0.04em;
}

.site-footer__desc {
  color: #b7c9c3;
}

.site-footer__title {
  color: #f4efe4;
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  text-transform: none;
}

.site-footer__links a,
.site-footer__bottom-links a,
.site-footer__copy {
  color: #9db0aa;
}

.site-footer__links a:hover,
.site-footer__bottom-links a:hover {
  color: #f3e6c8;
}

.site-footer__heart {
  color: var(--tide-coral);
}

.site-footer__bottom {
  border-top-color: rgba(231, 244, 240, 0.12);
}

.ababseo-fly__badge {
  border-radius: 2px;
  background: linear-gradient(160deg, rgba(16, 34, 28, 0.92) 0%, rgba(13, 115, 119, 0.86) 100%);
}

.ababseo-fly__label {
  background: linear-gradient(180deg, #f4efe4 0%, #e7c9a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#root .from-indigo-900,
#root .via-purple-900,
#root .to-pink-900 {
  --tw-gradient-from: #12362d;
  --tw-gradient-to: #0d7377;
  --tw-gradient-stops: #12362d, #0d7377, #16483b;
}

#root .hover\:text-yellow-400:hover {
  color: var(--tide-coral) !important;
}

#root .focus\:ring-yellow-400:focus {
  --tw-ring-color: rgba(13, 115, 119, 0.45);
}

@media (max-width: 767px) {
  #root header .max-w-7xl > .flex {
    min-height: 3.75rem;
  }

  #root header nav {
    order: 0;
  }

  #root .hero-title {
    max-width: none;
  }
}