/* Frontend quality layer: layout stability, cleaner cards, safer mobile behavior */
:root {
  --fq-card-radius: 0.75rem;
  --fq-focus: #f59e0b;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 15px;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 12% 0%, rgba(245, 158, 11, .10), transparent 30rem),
    radial-gradient(circle at 86% 6%, rgba(251, 191, 36, .12), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #eef2f7 100%) !important;
  color: var(--fq-text) !important;
  font-family: var(--fq-font) !important;
  font-size: 15px !important;
  letter-spacing: .01em;
}

/* Visual tuning: white background + orange accent, slide fixed */
:root {
  --fq-bg: #ffffff;
  --fq-bg-soft: #f8fafc;
  --fq-panel: rgba(255, 255, 255, .92);
  --fq-panel-strong: rgba(255, 255, 255, .98);
  --fq-border: rgba(15, 23, 42, .12);
  --fq-text: #1e293b;
  --fq-title: #0f172a;
  --fq-muted: #64748b;
  --fq-muted-soft: #94a3b8;
  --fq-accent: #f59e0b;
  --fq-accent-hover: #d97706;
  --fq-cyan: #fbbf24;
  --fq-gold: #b45309;
  --fq-shadow: 0 14px 36px rgba(15, 23, 42, .12);
  --fq-font: Inter, "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", Arial, sans-serif;
}

body, button, input, select, textarea { font-family: var(--fq-font) !important; }
body, p, li, span, div, small { line-height: 1.65; }

img, video, iframe { max-width: 100%; }
img {
  height: auto;
  background-color: rgba(15,23,42,.04);
}

img[data-src], img.is-loading { opacity: .85; }
img.is-loaded { opacity: 1; transition: opacity .2s ease; }

.thumbnail,
.issuer-box,
.photo-two,
[class*="rounded"] { contain: layout paint; }

.thumbnail img,
.thumbnail video,
.aspect-w-16.aspect-h-9 img,
.aspect-w-16.aspect-h-9 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*display: block;*/
}
.aspect-w-16.aspect-h-9 { aspect-ratio: 16 / 9; }

.thumbnail a,
.issuer-box,
#header a,
footer a {
  transition: color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease;
}

.thumbnail:hover img,
.issuer-box:hover { transform: translateY(-1px); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fq-focus);
  outline-offset: 3px;
}

.content-without-search,
.content-with-search { transition: padding-top .18s ease; }

.container-title,
.navh2,
h1,
h2,
h3 { overflow-wrap: anywhere; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
.navh2,
.container-title,
.video-title .title,
.stui-pannel__head .title,
.list-title,
.brand {
  color: var(--fq-title) !important;
  font-family: var(--fq-font) !important;
  font-weight: 700 !important;
  letter-spacing: .015em;
}

h1, .container-title {
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  line-height: 1.35 !important;
}

h2, .navh2, .list-title {
  font-size: clamp(1.18rem, 1.6vw, 1.55rem) !important;
  line-height: 1.35 !important;
}

h3, .stui-pannel__head .title {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
}

.text-sm,
.thumbnail .my-2,
.thumbnail small,
.text-secondary,
.text-muted,
.text-dark,
small,
.small { font-size: .94rem !important; }

.text-xs,
.absolute.bottom-1.right-1,
.pic-text { font-size: .78rem !important; }

.text-nord4,
.text-nord5,
.text-nord6,
.text-white,
.vod_desc,
.prose,
article,
.video-info,
.text-group,
#footer { color: var(--fq-text) !important; }

.text-secondary,
.text-muted,
.text-dark,
.text-gray-500,
.text-sub-title,
small,
.small,
.total,
.vod_desc + li,
.breadcrumb,
nav[aria-label="breadcrumb"] li { color: var(--fq-muted) !important; }

.text-nord10,
.text-nord9 { color: var(--fq-cyan) !important; }

.text-nord13,
.text-nord14 { color: var(--fq-gold) !important; }

.text-pink,
.text-primary,
.hover\:text-primary:hover,
a:hover,
a:focus,
.navh2:hover,
.masterhavorli a { color: var(--fq-accent-hover) !important; }

a,
.thumbnail a,
footer a,
.font-medium a { color: inherit; }

.text-pink,
.text-primary,
.thumbnail .text-pink,
.container-title.text-pink,
a.text-pink,
.font-medium.text-pink { color: var(--fq-accent) !important; }

.bg-primary,
button.plyr__control--overlaid,
.submit_btn,
.verify_submit {
  background: linear-gradient(135deg, var(--fq-accent), #fbbf24) !important;
  color: #fff !important;
}

.bg-nord1,
.bg-nord2,
.bg-gray-800,
.dropdown-menu,
#desktopMoreDropdown,
#mobileMoreContent,
.text-group > div,
.prose,
article.prose,
.max-w-full.bg-nord1,
.under_player > div {
  background-color: var(--fq-panel) !important;
  border-color: var(--fq-border) !important;
}

#header,
.stui-header__menu,
.from-darkest,
.Menu,
.BrandMenu,
.phone_version_header,
.z-max.w-full.bg-gradient-to-b {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--fq-border) !important;
  backdrop-filter: blur(14px);
}

.brand {
  font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
  color: var(--fq-title) !important;
}

.brand span,
.brand span.flag,
nav[aria-label="breadcrumb"] li + li::before { color: var(--fq-accent) !important; }

.brand span.flag {
  background: rgba(245, 158, 11, .14) !important;
  border: 1px solid rgba(245, 158, 11, .32);
  padding: 0 .45rem;
}

.navContainer,
.flex.items-center.justify-between,
.stui-pannel,
.video-title,
.video-info,
.type-list-fl,
.rank-list,
.el-container,
.max-w-full.rounded-lg { background: transparent !important; }

.navh2,
.container-title,
.list-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.navh2::before,
.container-title::before,
.list-title::before {
  content: "";
  width: .3rem;
  height: 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fq-accent), var(--fq-cyan));
  box-shadow: 0 0 18px rgba(245, 158, 11, .34);
}

.thumbnail {
  padding: .55rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(148, 163, 184, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.thumbnail:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .98);
  border-color: rgba(245, 158, 11, .34);
  box-shadow: var(--fq-shadow);
}

.thumbnail .relative,
.thumbnail .rounded-lg,
.issuer-box,
.photo-two,
.stui-vodlist__thumb,
img { border-radius: .85rem; }

.thumbnail img,
.stui-vodlist__thumb,
.issuer-box img,
.photo-two img { background-color: #f1f5f9 !important; }

.thumbnail .my-2 a,
.stui-vodlist__title a,
.text-secondary.group-hover\:text-primary {
  color: #0f172a !important;
  font-weight: 600 !important;
}

.thumbnail:hover .my-2 a,
.stui-vodlist__item:hover,
.group:hover .group-hover\:text-primary { color: var(--fq-accent-hover) !important; }

.absolute.bottom-1.right-1,
.pic-text {
  background: rgba(15, 23, 42, .72) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
}

input,
select,
textarea,
#searchForm input,
#mobileSearchForm input,
.text-group > div > input {
  background-color: rgba(255, 255, 255, .96) !important;
  color: var(--fq-title) !important;
  border-color: var(--fq-border) !important;
}

input::placeholder,
textarea::placeholder { color: var(--fq-muted-soft) !important; }

button,
.btn,
#filterToggle,
#filterToggleSort,
#searchToggle,
#desktopMoreBtn,
#mobileMoreBtn,
.pagination a,
.stui-page a { color: var(--fq-text) !important; }

button:hover,
.btn:hover,
#filterToggle:hover,
#filterToggleSort:hover,
#searchToggle:hover,
#desktopMoreBtn:hover,
#mobileMoreBtn:hover,
.pagination a:hover,
.stui-page a:hover { color: var(--fq-accent-hover) !important; }

#desktopMoreDropdown a,
#mobileMoreContent a,
.dropdown-menu a,
.navbar-links ul li a {
  background: transparent !important;
  color: var(--fq-text) !important;
  font-size: .96rem !important;
}

#desktopMoreDropdown a:hover,
#mobileMoreContent a:hover,
.dropdown-menu a:hover,
.navbar-links ul li:hover,
.navbar-links ul li a:hover {
  background: rgba(245, 158, 11, .12) !important;
  color: var(--fq-accent-hover) !important;
}

footer,
#footer {
  margin-top: 2rem;
  background: rgba(255, 255, 255, .86) !important;
  border-top: 1px solid var(--fq-border);
  color: var(--fq-muted) !important;
}

footer a,
#footer a,
#footer a[style] { color: var(--fq-accent) !important; }

hr,
.border-nord3,
.ring-white,
.ring-gray-900\/10 { border-color: var(--fq-border) !important; }

.fq-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .28) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--fq-title) !important;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.fq-back-to-top.is-visible { display: inline-flex; }

.fq-section { padding-top: 1.5rem; }
.fq-page-hero {
  border: 1px solid var(--fq-border);
  background: linear-gradient(135deg, rgba(18,35,59,.78), rgba(11,23,40,.6));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--fq-shadow);
}
.fq-link-grid .fq-link-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-height: 76px;
  padding: 1rem;
  border-radius: .85rem;
  border: 1px solid var(--fq-border);
  background: var(--fq-panel);
  text-decoration: none;
}
.fq-link-grid .fq-link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,.36);
  background: var(--fq-panel-strong);
}
.fq-link-card-title { color: var(--fq-title); font-weight: 700; font-size: 1rem; }
.fq-link-card small { color: var(--fq-muted); line-height: 1.4; }
.fq-panel { border: 1px solid var(--fq-border); background: var(--fq-panel) !important; box-shadow: var(--fq-shadow); }
.fq-actor-card { text-decoration: none; transition: transform .2s ease, color .2s ease; }
.fq-actor-card:hover { transform: translateY(-2px); }
.fq-avatar { border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.fq-cpa-placeholder, .fq-ad-placeholder { min-height: 0; }
.fq-standalone-page { margin: 0; background: #ffffff; color: #1e293b; }
.fq-standalone-page .row-play { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 12px; }
.fq-standalone-page .pl-box, .fq-standalone-page .pl-l { width: 100%; }
.fq-standalone-page img.w-full { display: block; width: 100%; min-height: 260px; object-fit: contain; background: #f1f5f9; }

@media (max-width: 768px) {
  html { font-size: 14px; }
  body { font-size: 14px !important; }
  .sm\:container, .container, .mx-auto { max-width: 100%; }
  .grid { gap: .75rem !important; }
  .thumbnail { padding: .42rem; border-radius: .85rem; }
  .thumbnail .my-2, .thumbnail small { line-height: 1.45; }
  .text-sm,
  .thumbnail .my-2,
  .thumbnail small,
  .text-secondary,
  .text-muted,
  .text-dark,
  small,
  .small {
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }
  h1, .container-title { font-size: 1.28rem !important; }
  h2, .navh2, .list-title { font-size: 1.1rem !important; }
  .stui-player__video {
    height: auto !important;
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }
  footer p {
    display: block !important;
    padding-left: 0 !important;
  }
  .fq-page-hero { padding: 1rem; }
  .fq-link-grid .fq-link-card { min-height: 64px; padding: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* White background final overrides */
body {
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 158, 11, .08), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(251, 191, 36, .12), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #eef2f7 100%) !important;
  color: var(--fq-text) !important;
}

#header,
.stui-header__menu,
.from-darkest,
.Menu,
.BrandMenu,
.phone_version_header,
.z-max.w-full.bg-gradient-to-b {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--fq-border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.text-zinc-50,
.text-white,
.text-nord4,
.text-nord5,
.text-nord6 {
  color: var(--fq-text) !important;
}

.thumbnail,
.fq-link-grid .fq-link-card,
.fq-page-hero,
.bg-nord1,
.bg-nord2,
.bg-gray-800,
.dropdown-menu,
#desktopMoreDropdown,
#mobileMoreContent,
.text-group > div,
.prose,
article.prose,
.max-w-full.bg-nord1,
.under_player > div {
  background: rgba(255, 255, 255, .94) !important;
  color: var(--fq-text) !important;
  border-color: var(--fq-border) !important;
}

.thumbnail:hover {
  background: #fff !important;
  border-color: rgba(245, 158, 11, .34) !important;
}

footer,
#footer {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--fq-muted) !important;
}

/* Slide / homepage carousel fix */
.slider {
  width: min(100%, 1180px) !important;
  margin: 1rem auto 1.5rem !important;
  display: flex !important;
  gap: 1rem !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1rem !important;
  cursor: grab;
  user-select: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fq-border);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--fq-shadow);
}

.slider:active {
  cursor: grabbing;
}

.slider::-webkit-scrollbar {
  height: 8px;
}

.slider::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 999px;
}

.slider::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, .55);
  border-radius: 999px;
}

.slide {
  flex: 0 0 clamp(180px, 24vw, 280px) !important;
  min-width: clamp(180px, 24vw, 280px) !important;
  width: clamp(180px, 24vw, 280px) !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  scroll-snap-align: start;
  border-radius: 1rem !important;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

.slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 768px) {
  .slider {
    width: calc(100% - 1rem) !important;
    margin: .75rem .5rem 1rem !important;
    gap: .75rem !important;
    padding: .75rem !important;
    border-radius: 1rem;
  }

  .slide {
    flex-basis: 42vw !important;
    min-width: 42vw !important;
    width: 42vw !important;
    border-radius: .85rem !important;
  }
}

@media (max-width: 420px) {
  .slide {
    flex-basis: 58vw !important;
    min-width: 58vw !important;
    width: 58vw !important;
  }
}


/* More orange accent layer */
:root {
  --fq-accent: #f97316;
  --fq-accent-hover: #ea580c;
  --fq-cyan: #fb923c;
  --fq-gold: #c2410c;
  --fq-orange-soft: rgba(249, 115, 22, .10);
  --fq-orange-mid: rgba(249, 115, 22, .20);
  --fq-orange-strong: rgba(249, 115, 22, .34);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(249, 115, 22, .14), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(251, 146, 60, .16), transparent 26rem),
    linear-gradient(180deg, #fffaf3 0%, #ffffff 42%, #fff7ed 100%) !important;
}

#header,
.stui-header__menu,
.from-darkest,
.Menu,
.BrandMenu,
.phone_version_header,
.z-max.w-full.bg-gradient-to-b {
  background:
    linear-gradient(180deg, rgba(255, 247, 237, .98), rgba(255, 255, 255, .94)) !important;
  border-bottom: 1px solid rgba(249, 115, 22, .22) !important;
  box-shadow: 0 10px 28px rgba(249, 115, 22, .09);
}

#header a:hover,
.stui-header__menu a:hover,
.navbar-links ul li a:hover {
  color: var(--fq-accent-hover) !important;
}

.container-title,
.navh2,
.list-title,
h1,
h2 {
  color: #9a3412 !important;
}

.navh2::before,
.container-title::before,
.list-title::before {
  width: .42rem;
  background: linear-gradient(180deg, #fb923c, #f97316 55%, #c2410c);
  box-shadow: 0 0 20px rgba(249, 115, 22, .38);
}

.fq-page-hero {
  background:
    linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(255, 255, 255, .92)) !important;
  border-color: rgba(249, 115, 22, .26) !important;
  box-shadow: 0 16px 38px rgba(249, 115, 22, .11);
}

.thumbnail,
.fq-link-grid .fq-link-card {
  border-color: rgba(249, 115, 22, .16) !important;
  box-shadow: 0 10px 26px rgba(154, 52, 18, .06);
}

.thumbnail:hover,
.fq-link-grid .fq-link-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 247, 237, .92), rgba(255, 255, 255, .98)) !important;
  border-color: rgba(249, 115, 22, .42) !important;
  box-shadow: 0 18px 42px rgba(249, 115, 22, .15);
}

.thumbnail .my-2 a,
.stui-vodlist__title a,
.fq-link-card-title {
  color: #7c2d12 !important;
}

.thumbnail:hover .my-2 a,
.thumbnail:hover .text-secondary.group-hover\:text-primary,
.group:hover .group-hover\:text-primary {
  color: #ea580c !important;
}

.bg-primary,
button.plyr__control--overlaid,
.submit_btn,
.verify_submit {
  background: linear-gradient(135deg, #f97316, #fb923c 55%, #fbbf24) !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, .24);
}

.text-pink,
.text-primary,
.thumbnail .text-pink,
.container-title.text-pink,
a.text-pink,
.font-medium.text-pink,
footer a,
#footer a,
#footer a[style] {
  color: #f97316 !important;
}

button:hover,
.btn:hover,
#filterToggle:hover,
#filterToggleSort:hover,
#searchToggle:hover,
#desktopMoreBtn:hover,
#mobileMoreBtn:hover,
.pagination a:hover,
.stui-page a:hover {
  color: #ea580c !important;
}

input:focus,
select:focus,
textarea:focus,
#searchForm input:focus,
#mobileSearchForm input:focus {
  border-color: rgba(249, 115, 22, .45) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}

.absolute.bottom-1.right-1,
.pic-text {
  background: rgba(154, 52, 18, .82) !important;
  border-color: rgba(251, 146, 60, .36) !important;
}

footer,
#footer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 247, 237, .96)) !important;
  border-top-color: rgba(249, 115, 22, .24) !important;
}

.fq-back-to-top {
  border-color: rgba(249, 115, 22, .38) !important;
  color: #f97316 !important;
  box-shadow: 0 12px 30px rgba(249, 115, 22, .18);
}

/* Make homepage slide more orange */
.slider {
  background:
    linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(255, 255, 255, .90)) !important;
  border: 1px solid rgba(249, 115, 22, .30) !important;
  box-shadow: 0 18px 46px rgba(249, 115, 22, .15);
}

.slider::before {
  content: "精选推荐";
  flex: 0 0 auto;
  align-self: center;
  writing-mode: vertical-rl;
  letter-spacing: .2em;
  color: #c2410c;
  font-weight: 800;
  font-size: .9rem;
  padding: .75rem .35rem;
  border-radius: 999px;
  background: rgba(249, 115, 22, .12);
  border: 1px solid rgba(249, 115, 22, .22);
}

.slider::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #fb923c, #f97316) !important;
}

.slide {
  border-color: rgba(249, 115, 22, .22) !important;
  box-shadow: 0 12px 28px rgba(154, 52, 18, .13);
}

.slide:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 115, 22, .46) !important;
  box-shadow: 0 18px 36px rgba(249, 115, 22, .20);
}

@media (max-width: 768px) {
  .slider::before {
    writing-mode: initial;
    position: sticky;
    left: 0;
    z-index: 2;
    padding: .45rem .65rem;
    margin-right: .1rem;
    letter-spacing: .08em;
    background: rgba(255, 247, 237, .96);
  }
}