/* Hard layout fixes for portal sections that break without @scope support */
.ktv-portal {
  --p-primary: var(--primary, #00bb61);
  --p-text: var(--text-dark, #1a1a2e);
  --p-muted: var(--text-medium, #4a4a5a);
  --p-light: var(--text-light, #8a8a9a);
  --p-bg: var(--bg-section, #f7f8fa);
  --p-border: var(--border, #e8e8ee);
  --p-soft: var(--primary-light, #e8faf1);
  width: 100%;
  color: var(--p-text);
  background: var(--bg-white, #fff);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  isolation: isolate;
}
.ktv-portal .container {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  position: static !important;
  box-sizing: border-box !important;
  /* container-type 在部分环境下会搞乱 flex 分栏，禁用 */
  container-type: normal !important;
}

/* ===== Hero：强制左文右图，禁止大图铺满盖住文案 ===== */
.ktv-portal .hero {
  background: var(--bg-white, #fff) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 64px 0 56px !important;
}
.ktv-portal .hero-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}
.ktv-portal .hero-content {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 560px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  padding: 8px 12px 8px 0 !important;
}
.ktv-portal .hero-content h1 {
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--text-dark, #1a1a2e) !important;
  margin: 0 0 16px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: 0 !important;
}
.ktv-portal .hero-content h1 span {
  color: var(--primary, #00bb61) !important;
}
.ktv-portal .hero-subtitle {
  color: var(--primary-dark, #087a44) !important;
  font-weight: 600 !important;
}
.ktv-portal .hero-desc {
  color: var(--text-medium, #4a4a5a) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}
.ktv-portal .hero-image {
  flex: 0 0 480px !important;
  width: 480px !important;
  max-width: min(480px, 42vw) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  align-self: center !important;
}
.ktv-portal .hero-image .img-wrap {
  width: 100% !important;
  max-width: 480px !important;
  aspect-ratio: 540 / 304 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: #f7f8fa !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}
.ktv-portal .hero-image .img-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 1024px) {
.ktv-portal .hero-inner {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 28px !important;
}

.ktv-portal .hero-content {
  max-width: 100% !important;
  padding: 0 !important;
}

.ktv-portal .hero-content h1 {
  font-size: 30px !important;
}

.ktv-portal .hero-image {
  flex: none !important;
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}
}

/* Title → subtitle(s) → green accent, always stacked (never side-by-side) */
.ktv-portal .section-header {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  margin-bottom: 40px !important;
  gap: 0 !important;
}
.ktv-portal .section-header > h2 {
  display: block !important;
  order: 1 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 12px !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  line-height: 1.3 !important;
  text-align: center !important;
}
.ktv-portal .section-header > p {
  display: block !important;
  order: 2 !important;
  width: 100% !important;
  max-width: 680px !important;
  float: none !important;
  margin: 0 auto !important;
  font-size: 17px !important;
  color: #4a4a5a !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
.ktv-portal .section-header > p + p {
  order: 2 !important;
  margin-top: 8px !important;
}
.ktv-portal .section-header > .accent-line {
  display: block !important;
  order: 3 !important;
  float: none !important;
  width: 48px !important;
  height: 4px !important;
  background: var(--primary, #00bb61) !important;
  border-radius: 3px !important;
  margin: 16px auto 0 !important;
  flex: 0 0 auto !important;
}

/* Always show all 4 brand compare thumbs (扬声2 + 瑞影2) */
.ktv-portal #brandCompareThumbs,
.ktv-portal .brand .compare-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.ktv-portal #brandCompareThumbs .compare-thumb,
.ktv-portal .brand .compare-thumbs .compare-thumb,
.ktv-portal .brand .compare-thumbs .compare-thumb[data-brand],
.ktv-portal .brand .compare-thumbs .compare-thumb[data-brand="ruiying"],
.ktv-portal .brand .compare-thumbs .compare-thumb[data-brand="yangsheng"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ktv-portal.is-ruiying #brandCompareThumbs .compare-thumb[data-brand="yangsheng"],
.ktv-portal.is-ruiying #brandCompareThumbs .compare-thumb[data-brand="ruiying"] {
  display: block !important;
}

/* platform */
.ktv-portal .platform { padding: 72px 0; }
.ktv-portal .platform-content { text-align: center; }
.ktv-portal .platform-desc { font-size: 17px; color: var(--p-muted); margin: 0 0 8px; }
.ktv-portal .devices-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 28px 0 36px !important;
}
.ktv-portal .device-card {
  background: var(--p-bg) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 3px !important;
  padding: 36px 16px !important;
  text-align: center !important;
}
.ktv-portal .device-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--p-soft); color: var(--p-primary);
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 28px;
}
.ktv-portal .device-name { font-size: 16px; font-weight: 600; color: var(--p-text); margin-bottom: 4px; }
.ktv-portal .device-sub { font-size: 13px; color: var(--p-light); }
.ktv-portal .platform-format {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 28px;
}
.ktv-portal .format-tag {
  padding: 8px 20px; background: var(--p-soft); color: var(--p-primary);
  border-radius: 3px; font-size: 14px; font-weight: 600;
}
.ktv-portal .platform-note {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  color: var(--p-muted); font-size: 15px; margin: 0;
}
.ktv-portal .platform-note i { color: var(--p-primary); }

/* brand / compare */
.ktv-portal .brand { padding: 72px 0; background: var(--p-bg); }
.ktv-portal .brand-desc {
  text-align: center; max-width: 640px; margin: 0 auto 28px;
  color: var(--p-muted); font-size: 16px; line-height: 1.7;
}
.ktv-portal .brand .tab-nav,
.ktv-portal #brandTabNav {
  display: flex; justify-content: center; gap: 12px; margin: 0 0 24px; flex-wrap: wrap;
}
.ktv-portal .brand .tab-btn,
.ktv-portal #brandTabNav .tab-btn {
  height: 40px; padding: 0 18px; border-radius: 3px; border: 1px solid var(--p-border);
  background: #fff; color: var(--p-muted); cursor: pointer; font-size: 14px; font-weight: 600;
}
.ktv-portal .brand .tab-btn.active,
.ktv-portal #brandTabNav .tab-btn.active {
  background: var(--p-primary); border-color: var(--p-primary); color: #fff;
}
.ktv-portal .brand-tab-content { width: 100%; }
.ktv-portal .compare-wrapper { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
.ktv-portal .compare-container {
  position: relative !important; width: 100%; aspect-ratio: 1100 / 619;
  overflow: hidden !important; border-radius: 3px; background: #111; user-select: none;
  isolation: isolate; contain: layout paint; z-index: 1;
}
.ktv-portal .compare-container > .compare-after,
.ktv-portal .compare-container > .compare-before {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important;
}
.ktv-portal .compare-container > .compare-after img,
.ktv-portal .compare-container > .compare-before img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  border-radius: 0 !important; position: static !important; max-width: none !important;
}
.ktv-portal .compare-before { clip-path: inset(0 50% 0 0); z-index: 2; }
.ktv-portal .compare-divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-50%); cursor: ew-resize; z-index: 3;
}
.ktv-portal .compare-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: var(--p-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.ktv-portal .compare-label {
  position: absolute; top: 12px; z-index: 4; padding: 4px 10px; border-radius: 3px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
}
.ktv-portal .compare-label.before { left: 12px; }
.ktv-portal .compare-label.after { right: 12px; }
.ktv-portal .compare-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}
.ktv-portal .compare-thumb {
  border: 2px solid var(--p-border); border-radius: 3px; overflow: hidden;
  cursor: pointer; background: #fff;
}
.ktv-portal .compare-thumb.active { border-color: var(--p-primary); }
.ktv-portal .compare-thumb img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 0 !important;
}
.ktv-portal .compare-thumb-label {
  display: block; padding: 8px; font-size: 12px; color: var(--p-muted); text-align: center;
}
.ktv-portal .section-actions--center {
  display: flex; justify-content: center; margin-top: 24px;
}

/* show reveal content even without JS */
.ktv-portal .reveal { opacity: 1 !important; transform: none !important; }

/* Desktop row layouts without relying on JS layout-row class */
@media (min-width: 1025px) {
.ktv-portal .hero-inner,
  .ktv-portal .tracks .tab-inner,
  .ktv-portal .pitch .pitch-inner,
  .ktv-portal .subtitle-inner,
  .ktv-portal .transparent-lyrics .transparent-inner {
  flex-direction: row !important;
  align-items: center !important;
  gap: 48px !important;
}

.ktv-portal .stats-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.ktv-portal .stats-grid .stat-card {
  flex: 1;
}

.ktv-portal .hero-content,
  .ktv-portal .tab-text,
  .ktv-portal .pitch-text,
  .ktv-portal .subtitle-text,
  .ktv-portal .transparent-text  flex: 1; width: auto !important;

.ktv-portal .hero-image,
  .ktv-portal .tab-image,
  .ktv-portal .pitch-image,
  .ktv-portal .subtitle-image,
  .ktv-portal .transparent-image {
  flex: 0 0 480px !important;
  max-width: 480px !important;
  margin: 0 !important;
}
}

@media (max-width: 900px) {
.ktv-portal .devices-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 4 thumbs → 2x2 on small screens (still all visible) */
  .ktv-portal #brandCompareThumbs,
  .ktv-portal .brand .compare-thumbs,
  .ktv-portal .compare-thumbs  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

.ktv-portal .container {
  padding: 0 16px !important;
}
}

@media (min-width: 901px) {
.ktv-portal #brandCompareThumbs,
  .ktv-portal .brand .compare-thumbs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}

/* ===== 20260904f: 后半段图文区防裁切、多平台四列 ===== */
.ktv-portal .container {
  overflow: visible !important;
}
.ktv-portal .hero-inner.layout-row,
.ktv-portal .hero-inner.layout-stack,
.ktv-portal .tab-inner.layout-row,
.ktv-portal .tab-inner.layout-stack,
.ktv-portal .pitch-inner.layout-row,
.ktv-portal .pitch-inner.layout-stack,
.ktv-portal .subtitle-inner.layout-row,
.ktv-portal .subtitle-inner.layout-stack,
.ktv-portal .transparent-inner.layout-row,
.ktv-portal .transparent-inner.layout-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 40px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.ktv-portal .tab-inner.layout-stack,
.ktv-portal .pitch-inner.layout-stack,
.ktv-portal .subtitle-inner.layout-stack,
.ktv-portal .transparent-inner.layout-stack,
.ktv-portal .hero-inner.layout-stack {
  flex-direction: column !important;
}
.ktv-portal .layout-row .tab-text,
.ktv-portal .layout-row .pitch-text,
.ktv-portal .layout-row .subtitle-text,
.ktv-portal .layout-row .transparent-text,
.ktv-portal .layout-row .hero-content,
.ktv-portal .tab-text,
.ktv-portal .pitch-text,
.ktv-portal .subtitle-text,
.ktv-portal .transparent-text {
  flex: 1 1 300px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.ktv-portal .layout-row .tab-image,
.ktv-portal .layout-row .pitch-image,
.ktv-portal .layout-row .subtitle-image,
.ktv-portal .layout-row .transparent-image,
.ktv-portal .tab-image,
.ktv-portal .pitch-image,
.ktv-portal .subtitle-image,
.ktv-portal .transparent-image {
  flex: 0 1 480px !important;
  width: min(480px, 100%) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}
.ktv-portal .devices-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}
.ktv-portal .platform-format {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.ktv-portal .format-tag {
  display: inline-block !important;
  padding: 8px 20px !important;
  background: var(--p-soft, #e6f9ef) !important;
  color: var(--p-primary, #00bb61) !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}
.ktv-portal .brand .compare-wrapper,
.ktv-portal .repair .compare-wrapper {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
.ktv-portal .devices-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

/* ===== 深色模式：扬声/瑞影等 portal-fix 硬编码浅色覆盖 ===== */
html.dark .ktv-portal {
  --p-text: #f3f4f6;
  --p-muted: #d1d5db;
  --p-light: #9ca3af;
  --p-bg: #111111;
  --p-border: #2a2a2a;
  --p-soft: color-mix(in srgb, var(--primary, #00bb61) 16%, transparent);
  background: #0a0a0a;
  color: var(--p-text);
}

html.dark .ktv-portal .brand {
  background: var(--p-bg) !important;
}

html.dark .ktv-portal .section-header h2 {
  color: #f3f4f6 !important;
}

html.dark .ktv-portal .section-header p,
html.dark .ktv-portal .brand-desc {
  color: #d1d5db !important;
}

html.dark .ktv-portal .brand .tab-btn,
html.dark .ktv-portal #brandTabNav .tab-btn {
  background: #161616;
  border-color: var(--p-border);
  color: var(--p-muted);
}

html.dark .ktv-portal .brand .tab-btn:not(.active),
html.dark .ktv-portal #brandTabNav .tab-btn:not(.active) {
  background: #161616 !important;
  border-color: #2a2a2a !important;
  color: #d1d5db !important;
}

html.dark .ktv-portal .brand .tab-btn.active,
html.dark .ktv-portal #brandTabNav .tab-btn.active {
  background: var(--p-primary, var(--primary, #00bb61)) !important;
  border-color: var(--p-primary, var(--primary, #00bb61)) !important;
  color: #fff !important;
}

html.dark .ktv-portal .compare-thumb {
  background: #161616 !important;
  border-color: #2a2a2a !important;
}

html.dark .ktv-portal .compare-thumb.active {
  border-color: var(--p-primary, var(--primary, #00bb61)) !important;
}

html.dark .ktv-portal .compare-thumb-label {
  color: #9ca3af !important;
}

html.dark .ktv-portal .compare-container {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

html.dark .ktv-portal .compare-label.before {
  background: rgba(40, 40, 40, 0.85);
}

html.dark .ktv-portal .compare-label.after {
  background: color-mix(in srgb, var(--primary, #00bb61) 85%, #000);
}