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

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  background-color: rgba(255,255,255,.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;
}

.fq-back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.72);
  color: #fff;
  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;
}

@media (max-width: 768px) {
  .sm\:container,
  .container,
  .mx-auto {
    max-width: 100%;
  }

  .grid {
    gap: .875rem;
  }

  .thumbnail .my-2,
  .thumbnail small {
    line-height: 1.45;
  }

  .stui-player__video {
    height: auto !important;
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  footer p {
    display: block !important;
    padding-left: 0 !important;
  }
}

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

/* Visual tuning v3: typography, font size, color system */
:root {
  --fq-bg: #07111f;
  --fq-bg-soft: #0b1728;
  --fq-panel: rgba(14, 27, 46, .82);
  --fq-panel-strong: rgba(18, 35, 59, .94);
  --fq-border: rgba(148, 163, 184, .18);
  --fq-text: #e7eefc;
  --fq-title: #f8fbff;
  --fq-muted: #9fb0ca;
  --fq-muted-soft: #7f8ea8;
  --fq-accent: #ff4fa3;
  --fq-accent-hover: #ff7abb;
  --fq-cyan: #7dd3fc;
  --fq-gold: #f6c96f;
  --fq-shadow: 0 18px 45px rgba(0, 0, 0, .34);
  --fq-font: Inter, "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", Arial, sans-serif;
}

html {
  font-size: 15px;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(125, 211, 252, .13), transparent 30rem),
    radial-gradient(circle at 86% 6%, rgba(255, 79, 163, .12), transparent 28rem),
    linear-gradient(180deg, #07111f 0%, #081322 42%, #0b1020 100%) !important;
  color: var(--fq-text) !important;
  font-family: var(--fq-font) !important;
  font-size: 15px !important;
  letter-spacing: .01em;
}

body,
button,
input,
select,
textarea {
  font-family: var(--fq-font) !important;
}

body,
p,
li,
span,
div,
small {
  line-height: 1.65;
}

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), #ff7abb) !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 {
  background: rgba(7, 17, 31, .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(255, 79, 163, .14) !important;
  border: 1px solid rgba(255, 79, 163, .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(255, 79, 163, .34);
}

.thumbnail {
  padding: .55rem;
  border-radius: 1rem;
  background: rgba(12, 24, 42, .72);
  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(18, 35, 59, .88);
  border-color: rgba(255, 79, 163, .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: #0f1b2e !important;
}

.thumbnail .my-2 a,
.stui-vodlist__title a,
.text-secondary.group-hover\:text-primary {
  color: #eef5ff !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(7, 17, 31, .78) !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(8, 19, 34, .94) !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(255, 79, 163, .12) !important;
  color: var(--fq-accent-hover) !important;
}

footer,
#footer {
  margin-top: 2rem;
  background: rgba(4, 10, 20, .72) !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 {
  background: rgba(14, 27, 46, .9) !important;
  border-color: rgba(255, 79, 163, .28) !important;
  color: var(--fq-title) !important;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }

  body {
    font-size: 14px !important;
  }

  .thumbnail {
    padding: .42rem;
    border-radius: .85rem;
  }

  .grid {
    gap: .75rem !important;
  }

  .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;
  }
}