/*
 * 2026-09-09 soft visual refresh
 * 小幅調整：只覆蓋色系、字級、卡片/按鈕細節；不改版型、不改播放器結構。
 */
:root,
:host {
  --color-primary-50: #eef7ff;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary: light-dark(#2563eb, #60a5fa);
  --color-primary-hover: light-dark(#1d4ed8, #93c5fd);
  --color-background: light-dark(#f3f6f8, #0f172a);
  --color-surface: light-dark(#ffffff, #111827);
  --color-surface-muted: light-dark(#f7f9fb, #182235);
  --color-surface-subtle: light-dark(#f1f5f9, rgba(255,255,255,.06));
  --color-border: light-dark(#dbe4ee, rgba(255,255,255,.14));
  --color-border-subtle: light-dark(#e8eef5, rgba(255,255,255,.09));
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --text-section: clamp(1.08rem, 1rem + .35vw, 1.28rem);
  --text-page: clamp(1.38rem, 1.18rem + .9vw, 2rem);
  --space-row: clamp(.8rem, .65rem + .45vw, 1.12rem);
  --space-section: clamp(1.15rem, .95rem + .95vw, 1.8rem);
}

html,
body {
  font-family: var(--font-body) !important;
  letter-spacing: .01em;
}

body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 28rem),
    var(--color-background);
}

#main-header {
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.brand-wordmark,
.page-heading,
h1,
h2,
h3 {
  letter-spacing: -.015em;
}

.page-heading {
  font-weight: 700;
}

.section-label {
  color: var(--color-foreground-muted);
  letter-spacing: .08em;
}

.search-hero,
.detail-primary,
.home-section,
.rounded-md,
.rounded-lg {
  border-radius: .7rem;
}

.search-hero input,
input[type="search"],
input[type="text"] {
  font-size: 15px;
}

button,
.button,
[type="submit"],
.filter-chip,
.rounded-full {
  border-radius: 999px;
}

.filter-chip,
.filter-chip-idle {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.filter-chip:hover,
.filter-chip-idle:hover {
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
}

.detail-meta,
.text-muted-foreground,
.text-foreground-secondary {
  color: var(--color-foreground-muted);
}

/* 播放器保護：不要讓視覺覆蓋影響 ArtPlayer / iframe / video */
.detail-player,
.player-wrap,
.row-play,
.pl-box,
.pl-l,
.stui-player__video {
  width: 100%;
}

.detail-player iframe,
.detail-player video,
.detail-player object,
.detail-player embed,
.stui-player__video iframe,
.stui-player__video video,
.artplayer-app,
.art-video-player {
  width: 100% !important;
  max-width: 100% !important;
}

.detail-player iframe,
.stui-player__video iframe {
  aspect-ratio: 16 / 9;
  min-height: 220px;
  background: #000;
}

@media (max-width: 768px) {
  #main-header {
    box-shadow: 0 3px 12px rgba(15, 23, 42, .05);
  }

  .page-heading {
    font-size: clamp(1.18rem, 1rem + 1.2vw, 1.45rem) !important;
  }

  .detail-player iframe,
  .stui-player__video iframe {
    min-height: 190px;
  }
}

/*
 * 2026-09-09 slider + contrast polish
 * 中幅加強視覺：修正淺色模式白字、增加首頁 slider、提升卡片層次；不更動播放模板。
 */
:root,
:host {
  --color-primary-50: #edfdfb;
  --color-primary-100: #d1faf4;
  --color-primary-200: #99f6e4;
  --color-primary-300: #5eead4;
  --color-primary-400: #2dd4bf;
  --color-primary-500: #0f766e;
  --color-primary-700: #0f5f59;
  --color-primary-750: #0f5f59;
  --color-primary-800: #134e4a;
  --color-primary: light-dark(#0f766e, #5eead4);
  --color-primary-hover: light-dark(#0f5f59, #99f6e4);
  --color-background: light-dark(#eef5f4, #0b1220);
  --color-surface: light-dark(#ffffff, #111827);
  --color-surface-muted: light-dark(#f4faf9, #162033);
  --color-surface-subtle: light-dark(#e8f3f1, rgba(255,255,255,.07));
  --color-foreground: light-dark(#152033, #f8fafc);
  --color-foreground-secondary: light-dark(#334155, #cbd5e1);
  --color-foreground-muted: light-dark(#64748b, #94a3b8);
  --color-on-primary: light-dark(#ffffff, #06201e);
  --color-border: light-dark(#cddeda, rgba(255,255,255,.16));
  --color-border-subtle: light-dark(#dde9e6, rgba(255,255,255,.10));
}

html:not(.dark) body {
  color: #152033;
  background:
    radial-gradient(circle at 12% -10%, rgba(20, 184, 166, .20), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(59, 130, 246, .13), transparent 24rem),
    linear-gradient(180deg, #f4fbfa 0%, #edf5f3 48%, #f7faf9 100%);
}

html:not(.dark) .text-foreground,
html:not(.dark) .brand-wordmark,
html:not(.dark) .page-heading,
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) .line-clamp-2 {
  color: #152033 !important;
}

html:not(.dark) .text-foreground-secondary,
html:not(.dark) .text-muted-foreground,
html:not(.dark) .detail-meta,
html:not(.dark) .section-label {
  color: #64748b !important;
}

html:not(.dark) .text-foreground\/60 { color: rgba(21, 32, 51, .60) !important; }
html:not(.dark) .text-foreground\/70 { color: rgba(21, 32, 51, .72) !important; }
html:not(.dark) .text-foreground\/80 { color: rgba(21, 32, 51, .82) !important; }
html:not(.dark) .text-on-primary { color: #ffffff !important; }
html:not(.dark) .text-overlay-text { color: #ffffff !important; }
html:not(.dark) .bg-primary { background-color: #0f766e !important; }
html:not(.dark) .hover-primary-fill:hover { background-color: #0f5f59 !important; }

#main-header {
  background: light-dark(rgba(255,255,255,.82), rgba(15,23,42,.88));
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

#main-header nav a {
  border-radius: 999px !important;
  padding-left: .65rem !important;
  padding-right: .65rem !important;
}

html:not(.dark) #main-header nav a:hover,
html:not(.dark) footer nav a:hover {
  background: rgba(15, 118, 110, .10) !important;
  color: #0f5f59 !important;
}

.home-section {
  padding: clamp(1rem, .7rem + .8vw, 1.45rem);
  border: 1px solid rgba(15, 118, 110, .08);
  background: light-dark(rgba(255,255,255,.70), rgba(17,24,39,.42));
  box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
  backdrop-filter: blur(10px);
}

.home-section:first-of-type {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-top: .6rem;
}

.search-hero input,
input[type="search"],
input[type="text"] {
  background: light-dark(#ffffff, #111827) !important;
  border-color: light-dark(#bdd7d3, rgba(255,255,255,.16)) !important;
  color: var(--color-foreground) !important;
  box-shadow: 0 10px 28px rgba(15, 118, 110, .10);
}

.search-hero input::placeholder,
input::placeholder {
  color: light-dark(#7b8a9a, #94a3b8) !important;
}

.js-lm-item .group > .relative.aspect-video,
.grid-stagger > .min-w-0 .relative.aspect-video,
.grid-stagger .relative.aspect-video {
  border-radius: 1rem !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.js-lm-item .group:hover > .relative.aspect-video,
.grid-stagger .group:hover > .relative.aspect-video {
  box-shadow: 0 16px 34px rgba(15, 118, 110, .20);
}

/* Home slider */
.home-top-slider {
  margin: .25rem 0 clamp(1rem, .7rem + 1vw, 1.65rem);
}

.home-slider-shell {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(15, 118, 110, .15);
  background:
    light-dark(rgba(255,255,255,.70), rgba(17,24,39,.42))
  /*box-shadow: 0 18px 44px rgba(15, 23, 42, .20);*/
}

.home-slider-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*background:*/
  /*  radial-gradient(circle at 18% 10%, rgba(255,255,255,.24), transparent 18rem),*/
  /*  linear-gradient(90deg, rgba(3,7,18,.22), transparent 42%);*/
  z-index: 1;
}

.home-slider-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem .6rem;
  color: #fff;
}

.home-slider-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  border-radius: 999px;
  padding: .2rem .65rem;
  background: rgba(255,255,255,.16);
  color: #ffffff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-slider-heading {
  margin-top: .45rem;
  color: #ffffff !important;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

.home-slider-controls {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.home-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.home-slider-btn:hover {
  background: rgba(255,255,255,.26);
  transform: translateY(-1px);
}

.home-slider-viewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: .2rem 1rem 1rem;
}

.home-slider-track {
  display: flex;
  gap: .9rem;
  transition: transform .38s ease;
  will-change: transform;
}

.home-slide {
  flex: 0 0 min(78vw, 520px);
  min-width: 0;
}

.home-slide-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 8.2;
  border-radius: 1rem;
  background: #07131f;
  /*box-shadow: 0 12px 30px rgba(2, 6, 23, .28);*/
}

.home-slide-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .45s ease, opacity .3s ease;
  opacity: .88;
}

.home-slide-link:hover img {
  transform: scale(1.07);
  opacity: 1;
}

.home-slide-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.02) 10%, rgba(2,6,23,.42) 58%, rgba(2,6,23,.88) 100%);
}

.home-slide-meta {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .8rem;
  color: #fff;
}

.home-slide-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .17rem .5rem;
  background: rgba(20, 184, 166, .88);
  color: #ffffff;
  font-size: .66rem;
  font-weight: 700;
}

.home-slide-title {
  margin-top: .4rem;
  color: #ffffff !important;
  font-size: clamp(.95rem, .86rem + .45vw, 1.22rem);
  font-weight: 800;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-slide-sub {
  margin-top: .28rem;
  color: rgba(255,255,255,.82) !important;
  font-size: .72rem;
}

@media (min-width: 768px) {
  .home-slider-head {
    padding: 1.15rem 1.25rem .75rem;
  }
  .home-slider-viewport {
    padding: .25rem 1.25rem 1.25rem;
  }
  .home-slide {
    flex-basis: min(44vw, 530px);
  }
}

@media (min-width: 1180px) {
  .home-slide {
    flex-basis: 31.5%;
  }
}

@media (max-width: 640px) {
  .home-slider-shell {
    border-radius: 1rem;
  }
  .home-slider-head {
    align-items: flex-start;
  }
  .home-slider-controls {
    padding-top: .25rem;
  }
  .home-slider-btn {
    width: 2rem;
    height: 2rem;
  }
  .home-slide {
    flex-basis: 82vw;
  }
  .home-slide-link {
    aspect-ratio: 16 / 9.5;
  }
}