@import url('/assets/css/watch_addon.css?v=stage39a3_20260627');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif}body{overflow-x:hidden}.app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;background:#050505;padding-bottom:150px}.top{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,#050505 82%,rgba(5,5,5,.88));padding:calc(12px + env(safe-area-inset-top)) 14px 8px}.search-row{display:flex;align-items:center;gap:9px}.search{flex:1;height:42px;border-radius:8px;background:#1b1b1b;color:#9b9b9b;display:flex;align-items:center;padding:0 13px;font-size:15px}.top-icon{width:42px;height:42px;border-radius:12px;background:#151515;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;flex:0 0 auto}.gift-dot,.nav-reward{position:absolute;background:#ff2f6d;color:#fff;border-radius:999px;font-size:12px;font-weight:900;padding:2px 7px}.gift-dot{top:-7px;right:-6px}.tabs,.subtabs{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}.tabs{gap:25px;padding:17px 2px 8px}.tab{color:#8a8a8a;font-size:19px;font-weight:800}.tab.active{color:#fff}.tab.vip{color:#d8b36a}.subtabs{gap:16px;padding:8px 0 10px}.subtab{color:#8b8b8b;font-size:15px;padding:8px 13px;border-radius:999px;flex:0 0 auto}.subtab.active{background:#222;color:#fff;font-weight:700}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 9px;padding:0 12px 22px}.card{min-width:0;text-decoration:none;color:inherit}.poster{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#1e1e1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 26%),linear-gradient(to bottom,rgba(255,255,255,.02),rgba(0,0,0,.45));z-index:1}.poster:after{content:attr(data-title);position:absolute;left:8px;right:8px;bottom:28px;z-index:2;color:rgba(255,255,255,.86);font-size:17px;font-weight:900;line-height:1.12;text-shadow:0 2px 8px rgba(0,0,0,.75)}.p1{background:linear-gradient(145deg,#4b1d1d,#130707 62%,#000)}.p2{background:linear-gradient(145deg,#7a3b21,#19100d 58%,#000)}.p3{background:linear-gradient(145deg,#4e3c92,#11162e 60%,#000)}.p4{background:linear-gradient(145deg,#37517a,#15191f 60%,#000)}.p5{background:linear-gradient(145deg,#8a3d66,#170d15 62%,#000)}.p6{background:linear-gradient(145deg,#856328,#17140b 60%,#000)}.p7{background:linear-gradient(145deg,#2d6247,#0b1712 62%,#000)}.p8{background:linear-gradient(145deg,#5a2d62,#130b17 62%,#000)}.p9{background:linear-gradient(145deg,#314d67,#0b1217 62%,#000)}.badge{position:absolute;top:0;right:0;z-index:3;background:#ff344e;color:#fff;font-size:12px;font-weight:800;padding:4px 6px;border-bottom-left-radius:6px}.badge.new{background:#5b6bff}.heat{position:absolute;right:7px;bottom:7px;z-index:3;color:#fff;font-size:13px;font-weight:700;text-shadow:0 2px 7px rgba(0,0,0,.9)}.title{margin-top:8px;color:#fff;font-size:15.5px;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tags{margin-top:4px;color:#777;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue{position:fixed;left:10px;right:10px;bottom:calc(68px + env(safe-area-inset-bottom));max-width:500px;margin:0 auto;z-index:80;display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;background:rgba(43,43,43,.94);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px)}.continue-cover{width:55px;height:55px;border-radius:6px;flex:0 0 auto;background:linear-gradient(145deg,#2d6247,#0b1712 62%,#000);position:relative;overflow:hidden}.continue-cover:after{content:"短劇";position:absolute;inset:auto 5px 6px 5px;font-size:13px;font-weight:900}.continue-info{flex:1;min-width:0}.continue-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue-ep{margin-top:3px;color:#aaa;font-size:13px}.continue-btn{border:0;border-radius:999px;background:#6b5f66;color:#fff;padding:10px 17px;font-size:14px;font-weight:700;flex:0 0 auto}.bottom-nav{position:fixed;left:0;right:0;bottom:0;max-width:520px;height:calc(64px + env(safe-area-inset-bottom));margin:0 auto;z-index:90;background:#050505;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.nav{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#858585;font-size:12px;gap:3px;position:relative}.nav.active{color:#fff}.nav-icon{font-size:22px;line-height:1}.nav-reward{top:3px;transform:translateY(-8px)}.detail,.watch{max-width:520px;margin:0 auto;min-height:100vh;background:#050505;padding:16px 14px 100px}.back{display:inline-flex;text-decoration:none;color:#fff;background:#1b1b1b;border-radius:12px;padding:10px 14px;margin-bottom:14px}.detail-hero{display:flex;gap:14px}.detail-poster{width:130px;flex:0 0 auto}.detail-info h1{font-size:24px;margin:0 0 8px}.muted{color:#aaa}.primary-btn{display:block;text-align:center;text-decoration:none;color:#fff;background:#6d5cff;border-radius:999px;padding:14px;font-weight:800;margin:18px 0}.episodes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ep{background:#1d1d1d;color:#fff;text-decoration:none;text-align:center;border-radius:10px;padding:10px}.player{height:265px;border:1px solid rgba(255,255,255,.12);background:#151515;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#777;margin:20px 0}.watch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.watch-actions a{background:#242424;color:#fff;text-decoration:none;text-align:center;border-radius:999px;padding:14px;font-weight:800}.watch-actions a.next{background:#6d5cff}@media(min-width:800px){.app{border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}
.poster.has-cover::before{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.55));z-index:1}.poster.has-cover::after{display:none}.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}.poster.has-cover .badge,.poster.has-cover .heat{z-index:3}.detail-poster.has-cover .poster-img{object-fit:cover}
.hint{color:#999;font-size:13px;margin-top:6px;line-height:1.5}
/* 封面圖片顯示修正：避免圖片只顯示中間局部 */
.poster img,
.detail-poster img,
.cover-card img,
.cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 如果封面圖不是直式海報，至少優先顯示上半部 */
.poster.has-cover,
.poster:has(img) {
  background-position: center top;
}

/* =========================================================
   前台首頁 / 詳情頁 UI 收尾 v1
   目標：讓首頁、詳情頁更接近短劇 App 視覺
   ========================================================= */

/* 首頁頂部更有 App 霧面感 */
.top {
  border-bottom: 1px solid rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}

.search {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.top-icon {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* 分類目前選中狀態增加底線，像 App tab */
.tab.active {
  position: relative;
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 3px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: #fff;
}

/* 卡片加一點觸控回饋 */
.card {
  transition: transform .16s ease, opacity .16s ease;
}

.card:active {
  transform: scale(.97);
  opacity: .86;
}

.poster {
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
}

.poster.has-cover::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.58) 100%);
}

.poster-img {
  object-position: center top;
}

.badge {
  box-shadow: 0 4px 10px rgba(255,52,78,.28);
}

/* 詳情頁 App 化 */
.detail {
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
}

.detail .back {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 20;
  width: fit-content;
  background: rgba(28,28,28,.92);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}

.detail-hero {
  margin-top: 4px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.detail-poster {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.36);
}

.detail-info h1 {
  font-size: 23px;
  line-height: 1.15;
  margin-bottom: 9px;
}

.detail-info p {
  margin: 10px 0 0;
  color: #c7c7c7;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muted {
  font-size: 13px;
  line-height: 1.5;
}

.primary-btn {
  box-shadow: 0 8px 20px rgba(109,92,255,.28);
}

.detail h2 {
  font-size: 18px;
  margin: 20px 0 12px;
}

.episodes {
  grid-template-columns: repeat(6, 1fr);
}

.ep {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171717;
  border: 1px solid rgba(255,255,255,.06);
  font-weight: 800;
  transition: transform .16s ease, background .16s ease;
}

.ep:active {
  transform: scale(.95);
  background: #2a2a2a;
}

/* 詳情頁手機小寬度優化 */
@media (max-width: 420px) {
  .detail-hero {
    gap: 12px;
  }

  .detail-poster {
    width: 118px;
  }

  .detail-info h1 {
    font-size: 21px;
  }

  .episodes {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* =========================================================
   階段 10：觀看紀錄 v1（localStorage）
   ========================================================= */
.is-hidden {
  display: none !important;
}

.continue {
  cursor: pointer;
}

.continue-cover.has-image {
  background-size: cover;
  background-position: center top;
}

.continue-cover.has-image::after {
  display: none;
}

.detail-progress {
  margin: -8px 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(109,92,255,.14);
  border: 1px solid rgba(109,92,255,.25);
  color: #d8d4ff;
  font-size: 14px;
  font-weight: 700;
}

.primary-btn.is-continue {
  background: linear-gradient(135deg, #7a6cff, #5b4bff);
}

.ep.watched {
  color: #fff;
  background: #171717;
  border-color: rgba(255,255,255,.06);
}

.ep.last-watched {
  color: #fff;
  background: rgba(109,92,255,.24);
  border-color: rgba(109,92,255,.55);
  box-shadow: 0 0 0 1px rgba(109,92,255,.18), 0 8px 18px rgba(109,92,255,.16);
}

.watch-progress-hint {
  margin-top: 10px;
  color: #b9b4ff;
  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   階段 11：收藏 / 追劇 v1（localStorage）
   ========================================================= */
.detail-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin: 16px 0;
}

.detail-action-row .primary-btn {
  margin: 0;
}

.favorite-btn {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 0 14px;
  min-width: 118px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.favorite-btn.is-favorited {
  background: rgba(255, 196, 71, .18);
  border-color: rgba(255, 196, 71, .46);
  color: #ffd77a;
}

.favorite-section {
  padding: 0 14px 108px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 12px;
}

.section-kicker {
  color: #9f98ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.section-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.section-more {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  color: #aaa;
  font-size: 12px;
  font-weight: 800;
}

.favorite-list {
  display: grid;
  gap: 10px;
}

.favorite-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  color: #fff;
}

.favorite-cover {
  width: 54px;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(145deg, #5147d9, #ff4670);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}

.favorite-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.favorite-meta {
  margin-top: 5px;
  color: #aaa;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .detail-action-row {
    grid-template-columns: 1fr;
  }

  .favorite-btn {
    min-height: 46px;
  }
}

/* =========================================================
   階段 11：追劇按鈕樣式修正 v1b
   目的：避免瀏覽器預設白色按鈕，統一成 App 風格
   ========================================================= */
.detail-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 16px 0 10px !important;
}

.detail-action-row .primary-btn {
  margin: 0 !important;
}

.favorite-btn,
button.favorite-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 13px 16px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 22px rgba(0,0,0,.22) !important;
}

.favorite-btn.is-favorited,
button.favorite-btn.is-favorited {
  background: linear-gradient(135deg, rgba(255, 202, 84, .24), rgba(255, 133, 64, .14)) !important;
  border-color: rgba(255, 202, 84, .48) !important;
  color: #ffd77a !important;
}

.favorite-btn:active {
  transform: scale(.985);
}


/* =========================================================
   階段 11：我的追劇頁 v1
   ========================================================= */
.nav {
  text-decoration: none;
}

.follow-page {
  padding-bottom: 96px;
}

.follow-top {
  padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
}

.follow-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.follow-title-row h1 {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 1.12;
}

.follow-subtitle {
  margin: 12px 0 0;
  color: #9d9d9d;
  font-size: 13px;
  line-height: 1.55;
}

.follow-empty {
  margin: 24px 14px 0;
  padding: 28px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.follow-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(109,92,255,.16);
  color: #d9d4ff;
  font-size: 30px;
  font-weight: 900;
}

.follow-empty-title {
  font-size: 18px;
  font-weight: 900;
}

.follow-empty-text {
  margin-top: 8px;
  color: #aaa;
  font-size: 13px;
  line-height: 1.55;
}

.follow-list {
  display: grid;
  gap: 12px;
  padding: 10px 14px 20px;
}

.follow-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

.follow-cover {
  width: 82px;
  aspect-ratio: 2/3;
  border-radius: 12px;
  background: linear-gradient(145deg, #5147d9, #ff4670);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}

.follow-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.follow-card-title {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.follow-card-meta {
  margin-top: 4px;
  color: #999;
  font-size: 12px;
  line-height: 1.45;
}

.follow-card-progress {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(109,92,255,.13);
  color: #d8d4ff;
  font-size: 12px;
  font-weight: 800;
}

.follow-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.follow-action {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.follow-action.primary {
  background: linear-gradient(135deg, #7a6cff, #5b4bff);
  border-color: rgba(255,255,255,.08);
}

.follow-action.danger {
  color: #ffb4c4;
}

@media (max-width: 390px) {
  .follow-card {
    grid-template-columns: 72px 1fr;
  }

  .follow-card-actions {
    gap: 6px;
  }

  .follow-action {
    padding: 8px 9px;
  }
}

/* Stage 12 member system v1 */
.auth-page,.member-page{padding:16px 14px 110px}.auth-card,.member-card,.guest-card,.member-menu,.member-note{border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.28)}.auth-card{padding:22px 16px;margin-top:18px}.auth-card h1,.member-hero h1{margin:4px 0 8px;font-size:30px;line-height:1.1}.auth-subtitle,.guest-text,.member-note-text{color:#aaa;line-height:1.55;font-size:14px}.auth-form{display:grid;gap:13px;margin-top:18px}.auth-form label{display:grid;gap:7px;color:#ddd;font-size:14px;font-weight:800}.auth-form input{width:100%;border:1px solid rgba(255,255,255,.12);background:#151515;color:#fff;border-radius:13px;padding:14px 13px;font-size:16px;outline:none}.auth-form input:focus{border-color:#7a63ff;box-shadow:0 0 0 3px rgba(122,99,255,.18)}.auth-submit{border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:15px;font-size:16px;font-weight:900;box-shadow:0 12px 28px rgba(93,73,255,.28)}.form-error{margin-top:14px;border:1px solid rgba(255,73,110,.38);background:rgba(255,73,110,.13);color:#ffd0d9;border-radius:13px;padding:11px 12px;font-weight:800}.auth-switch{text-align:center;color:#aaa;margin-top:16px}.auth-switch a{color:#fff;font-weight:900}.member-hero{padding:18px 14px 6px}.member-card{display:flex;gap:13px;padding:14px;margin-top:16px}.member-avatar{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#7b61ff,#ff3f9b);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;flex:0 0 auto}.member-info{min-width:0}.member-name{font-size:20px;font-weight:900}.member-email,.member-meta{color:#aaa;font-size:13px;margin-top:4px;overflow:hidden;text-overflow:ellipsis}.guest-card{padding:16px;margin-top:16px}.guest-title{font-size:22px;font-weight:900}.guest-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.primary-btn.compact{margin:0;padding:13px}.secondary-btn{display:block;text-align:center;text-decoration:none;color:#fff;background:#232323;border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:13px;font-weight:900}.member-menu{margin:14px;padding:4px}.member-menu a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;padding:15px 13px;border-bottom:1px solid rgba(255,255,255,.07);font-weight:850}.member-menu a:last-child{border-bottom:0}.member-menu em{font-style:normal;color:#777;font-size:24px;line-height:1}.member-menu .danger-link{color:#ffb4c2}.member-note{margin:14px;padding:14px}.member-note-title{font-weight:900;margin-bottom:5px;color:#b7a8ff}.nav[href="/member.php"]{text-decoration:none}.section-kicker{letter-spacing:.12em;color:#a995ff;font-size:12px;font-weight:900}


/* Stage 13.5 PWA install guide */
.top-install{display:flex;align-items:center;justify-content:center;height:36px;padding:0 10px;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#ff4fa3);color:#fff;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 10px 24px rgba(123,97,255,.22);flex:0 0 auto}.install-page{padding:16px 14px 120px}.install-hero{padding:calc(12px + env(safe-area-inset-top)) 0 8px;text-align:center}.install-hero .back{float:left;margin-bottom:10px}.install-app-icon{width:86px;height:86px;margin:16px auto 14px;border-radius:24px;overflow:hidden;box-shadow:0 18px 42px rgba(123,97,255,.28),0 0 0 1px rgba(255,255,255,.12)}.install-app-icon img{width:100%;height:100%;display:block}.install-hero h1{clear:both;margin:8px 0 8px;font-size:30px;line-height:1.1}.install-hero p{margin:0 auto;color:#aaa;line-height:1.55;max-width:390px}.install-card{margin:14px 0;padding:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.26)}.install-card h2{font-size:22px;margin:8px 0 8px}.install-card p{color:#aaa;line-height:1.55;margin:0}.install-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(123,97,255,.18);border:1px solid rgba(166,144,255,.25);color:#cdbfff;font-size:12px;font-weight:900;letter-spacing:.06em}.install-ready{background:linear-gradient(145deg,rgba(88,255,164,.12),rgba(255,255,255,.025))}.install-primary{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;padding:15px;margin-top:14px;font-size:16px;font-weight:950;box-shadow:0 14px 30px rgba(93,73,255,.28)}.install-primary:disabled{opacity:.58;box-shadow:none}.install-primary.is-ready{background:linear-gradient(135deg,#7b61ff,#ff4fa3)}.install-hint{border-radius:14px;background:rgba(255,255,255,.055);padding:11px 12px;margin-top:10px!important}.install-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}.install-steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;color:#eee;line-height:1.5}.install-steps span{width:34px;height:34px;border-radius:12px;background:#242424;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:950}.install-steps.compact li{font-size:14px}.install-note{margin-top:12px;border:1px solid rgba(255,204,92,.22);background:rgba(255,204,92,.1);color:#ffe5a5;border-radius:14px;padding:11px 12px;line-height:1.5;font-size:14px}.install-note.is-emphasis{box-shadow:0 0 0 3px rgba(255,204,92,.14)}.install-qr{background:#fff;border-radius:18px;padding:14px;width:min(260px,100%);margin:14px auto 8px}.install-qr img{display:block;width:100%;height:auto}.install-url{text-align:center;color:#aaa;font-size:13px}.install-feature-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.install-feature-grid div{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:15px;padding:12px}.install-feature-grid strong{display:block;font-size:16px}.install-feature-grid span{display:block;color:#aaa;margin-top:4px;font-size:13px}.member-menu a[href="/install.php"] span:before{content:"📲 ";}.is-hidden{display:none!important}@media(max-width:390px){.top-install{padding:0 8px;font-size:11px}.search-row{gap:7px}.install-hero h1{font-size:27px}}


/* Stage 13.5 install header alignment fix */
.install-page{padding-top:12px;padding-bottom:calc(138px + env(safe-area-inset-bottom));}
.install-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 12px;}
.install-hero .back{float:none;align-self:flex-start;margin:0 0 10px 0;}
.install-app-icon{width:82px;height:82px;margin:0 auto 12px;border-radius:24px;flex:0 0 auto;}
.install-hero .section-kicker{margin-top:2px;}
.install-hero h1{clear:none;margin:10px 0 8px;font-size:30px;line-height:1.12;}
.install-hero p{max-width:380px;}
@media(max-width:430px){.install-page{padding-top:10px}.install-hero{padding-top:8px}.install-hero .back{margin-bottom:8px}.install-app-icon{width:78px;height:78px;border-radius:22px;margin-bottom:10px}.install-hero h1{font-size:29px}}
@media(max-width:380px){.install-hero h1{font-size:27px}.install-app-icon{width:74px;height:74px}}


/* Stage 13.5 install safe-area touch fix */
.install-page{
  padding-top:0;
  padding-bottom:calc(150px + env(safe-area-inset-bottom));
}
.install-hero{
  padding-top:calc(24px + env(safe-area-inset-top));
}
.install-hero .back{
  min-height:46px;
  padding:12px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:5;
  touch-action:manipulation;
}
@supports (padding-top: env(safe-area-inset-top)){
  body:has(.install-page){
    padding-top:0;
  }
}
@media(max-width:430px){
  .install-hero{
    padding-top:calc(22px + env(safe-area-inset-top));
  }
  .install-hero .back{
    margin-bottom:14px;
  }
}


/* Stage 14 ads / rewards v1 */
.top-icon[href]{color:#fff;text-decoration:none}.bottom-nav .nav[href="/reward.php"]{text-decoration:none}.reward-page{padding:18px 14px calc(122px + env(safe-area-inset-bottom))}.reward-hero{padding:10px 0 8px}.reward-hero h1{font-size:34px;line-height:1.08;margin:6px 0 8px}.reward-hero p{color:#aaa;line-height:1.55;margin:0}.reward-card,.reward-result{border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border-radius:22px;box-shadow:0 18px 45px rgba(0,0,0,.28)}.reward-main-card{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:16px;margin-top:14px}.reward-gift{width:74px;height:74px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:36px;box-shadow:0 14px 32px rgba(123,97,255,.28)}.reward-label{display:inline-flex;height:27px;align-items:center;padding:0 10px;border-radius:999px;background:rgba(255,64,128,.16);border:1px solid rgba(255,64,128,.25);color:#ffb8cc;font-size:12px;font-weight:950}.reward-main-content h2{font-size:24px;margin:9px 0 6px}.reward-main-content p,.reward-ad-note p{color:#aaa;line-height:1.55;margin:0}.reward-primary{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:14px 16px;margin-top:13px;font-size:16px;font-weight:950;box-shadow:0 14px 30px rgba(93,73,255,.28)}.reward-primary:disabled{opacity:.62;box-shadow:none}.reward-result{margin-top:12px;padding:14px;text-align:center;border-color:rgba(123,97,255,.28);background:linear-gradient(145deg,rgba(123,97,255,.14),rgba(255,255,255,.025))}.reward-countdown{font-size:28px;font-weight:950;color:#fff}.reward-message{margin-top:5px;color:#bbb;line-height:1.5}.reward-task-card,.reward-ad-note{padding:16px;margin-top:14px}.reward-section-title{font-size:18px;font-weight:950;margin-bottom:12px}.reward-task-list{display:grid;gap:10px}.reward-task{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff}.reward-task span{font-size:26px}.reward-task strong{display:block;font-size:16px}.reward-task em{display:block;font-style:normal;color:#999;font-size:13px;margin-top:3px}.reward-task.disabled{opacity:.72}.reward-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.reward-status-grid div{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:15px;padding:12px}.reward-status-grid strong{display:block}.reward-status-grid span{display:block;color:#b8aaff;margin-top:4px;font-weight:900}.reward-ad-note code{color:#d8d0ff;background:rgba(123,97,255,.12);border-radius:8px;padding:2px 5px}.watch-player-card{position:relative;overflow:hidden}.watch-player-card.has-preroll-ad .watch-video{filter:brightness(.38);pointer-events:none}.watch-player-card.has-preroll-ad .watch-video.is-ad-unlocked{filter:none;pointer-events:auto}.preroll-ad{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle at center,rgba(123,97,255,.2),rgba(0,0,0,.82) 62%);backdrop-filter:blur(3px)}.preroll-badge{height:28px;padding:0 10px;border-radius:999px;background:rgba(255,204,92,.14);border:1px solid rgba(255,204,92,.28);color:#ffe0a3;display:flex;align-items:center;font-weight:950;font-size:12px;letter-spacing:.12em}.preroll-title{margin-top:10px;font-size:22px;font-weight:950}.preroll-text{max-width:320px;margin-top:7px;color:#bbb;line-height:1.55;font-size:14px}.preroll-countdown{margin-top:12px;font-size:30px;font-weight:950;color:#fff}.preroll-button{margin-top:12px;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:12px 24px;font-size:15px;font-weight:950;min-width:160px}.preroll-button:disabled{opacity:.6;background:#333}@media(max-width:390px){.reward-main-card{grid-template-columns:1fr}.reward-gift{width:64px;height:64px;border-radius:20px}.reward-status-grid{grid-template-columns:1fr}.preroll-title{font-size:20px}.preroll-text{font-size:13px}}


/* Stage 14.5 entrance cleanup */
a.top-icon{color:#fff;text-decoration:none}
.home-entry-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:2px 12px 16px;margin-top:-2px}
.wb-ad-slot{max-width:496px;margin:0 auto 16px;padding:0 12px;overflow:hidden;min-width:0;color:#fff}
.wb-ad-slot--home-banner{margin-top:0}
.wb-ad-frame{display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;min-width:0;overflow:hidden}
.wb-ad-frame .wb-ad-inner{display:flex;flex:0 1 auto;align-items:center;min-width:0;max-width:var(--wb-ad-custom-max-width,100%);text-align:center}
.wb-ad-frame .wb-ad-inner>iframe,.wb-ad-frame .wb-ad-inner>ins,.wb-ad-frame .wb-ad-inner>div{flex:0 1 auto;max-width:100%}
.wb-ad-frame .wb-ad-inner iframe,.wb-ad-frame .wb-ad-inner ins{display:block;max-width:100%}
.wb-ad-render-wrap,.wb-ad-render-inner{min-width:0}.wb-ad-render-inner>iframe,.wb-ad-render-inner>ins,.wb-ad-render-inner>div,.wb-ad-render-inner iframe,.wb-ad-render-inner ins{max-width:100%;margin-left:auto;margin-right:auto}.wb-ad-render-inner iframe,.wb-ad-render-inner ins{display:block}
.wb-ad-align-left{justify-content:flex-start;text-align:left}.wb-ad-align-left .wb-ad-inner{justify-content:flex-start;margin-left:0;margin-right:auto}.wb-ad-align-left .wb-ad-inner>iframe,.wb-ad-align-left .wb-ad-inner>ins,.wb-ad-align-left .wb-ad-inner>div,.wb-ad-align-left .wb-ad-inner iframe,.wb-ad-align-left .wb-ad-inner ins{margin-left:0;margin-right:auto}
.wb-ad-align-center{justify-content:center;text-align:center}.wb-ad-align-center .wb-ad-inner{justify-content:center;margin-left:auto;margin-right:auto}.wb-ad-align-center .wb-ad-inner>iframe,.wb-ad-align-center .wb-ad-inner>ins,.wb-ad-align-center .wb-ad-inner>div,.wb-ad-align-center .wb-ad-inner iframe,.wb-ad-align-center .wb-ad-inner ins{margin-left:auto;margin-right:auto}
.wb-ad-align-right{justify-content:flex-end;text-align:right}.wb-ad-align-right .wb-ad-inner{justify-content:flex-end;margin-left:auto;margin-right:0}.wb-ad-align-right .wb-ad-inner>iframe,.wb-ad-align-right .wb-ad-inner>ins,.wb-ad-align-right .wb-ad-inner>div,.wb-ad-align-right .wb-ad-inner iframe,.wb-ad-align-right .wb-ad-inner ins{margin-left:auto;margin-right:0}
.wb-ad-wrap-plain{padding:0;background:transparent;border:0;box-shadow:none}.wb-ad-wrap-transparent{padding:10px 0;background:transparent;border:0;box-shadow:none}.wb-ad-wrap-card{padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));box-shadow:0 12px 28px rgba(0,0,0,.2)}.wb-ad-wrap-full{padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}
.wb-ad-spacing-compact{margin:8px auto}.wb-ad-spacing-normal{margin:14px auto 22px}.wb-ad-spacing-loose{margin:24px auto 32px}
.wb-ad-width-ad .wb-ad-inner{width:auto}.wb-ad-width-content .wb-ad-inner,.wb-ad-width-full .wb-ad-inner{width:100%}.wb-ad-width-full{max-width:none}
.wb-ad-slot--watch-banner{display:none}
.wb-ad-slot iframe,.wb-ad-slot img,.wb-ad-slot ins{max-width:100%}
.home-entry-panel a{min-width:0;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border-radius:16px;padding:12px 9px;display:grid;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.home-entry-panel span{font-size:22px;line-height:1}
.home-entry-panel strong{font-size:13px;font-weight:900;line-height:1.1}
.home-entry-panel em{font-style:normal;color:#aaa;font-size:11px;line-height:1.25}
.reward-page .reward-hero p,.install-hint,.follow-subtitle{line-height:1.6}
.member-menu a span{display:flex;align-items:center;gap:6px}
@media (max-width:360px){.home-entry-panel{gap:7px}.home-entry-panel a{padding:10px 7px}.home-entry-panel strong{font-size:12px}.home-entry-panel em{font-size:10px}}


/* 14.5-3 福利入口暫停開放提示 */
a[data-reward-soon]{cursor:pointer}.wb-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:22px}.wb-modal.is-hidden{display:none}.wb-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.wb-modal-card{position:relative;width:min(420px,100%);border-radius:24px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(32,32,32,.98),rgba(10,10,10,.98));box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 45px rgba(123,97,255,.16);padding:22px;text-align:center}.wb-modal-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:36px;box-shadow:0 14px 32px rgba(123,97,255,.32)}.wb-modal-title{font-size:24px;font-weight:950;line-height:1.2}.wb-modal-text{color:#bbb;line-height:1.55;margin-top:10px}.wb-modal-list{display:grid;gap:8px;margin:16px 0;text-align:left}.wb-modal-list div{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:14px;padding:11px 12px;color:#eee;font-weight:750}.wb-modal-button{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:14px 18px;font-size:16px;font-weight:950}.reward-coming-card{padding:22px;text-align:center}.reward-coming-icon{width:78px;height:78px;border-radius:24px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:38px;box-shadow:0 14px 32px rgba(123,97,255,.3)}.reward-coming-card h2{font-size:26px;margin:10px 0 8px}.reward-coming-card p{color:#aaa;line-height:1.6;margin:0 auto;max-width:360px}.reward-coming-actions{display:grid;gap:10px;margin-top:16px}.reward-coming-actions .reward-primary{margin:0}.reward-coming-actions .secondary-btn{background:#222}@media(max-width:390px){.wb-modal{padding:16px}.wb-modal-card{padding:18px}.wb-modal-title{font-size:22px}.reward-coming-card h2{font-size:24px}}


/* Home UX v1: PWA installed state + pull refresh */
body.is-pwa-installed .top-install,
body.is-pwa-installed [data-install-prompt-link]{display:none!important}
.home-pull-refresh{max-width:496px;margin:0 12px 10px;padding:10px 12px;border:1px solid rgba(123,97,255,.24);background:rgba(123,97,255,.12);color:#d9d2ff;border-radius:14px;text-align:center;font-size:13px;font-weight:800;transition:opacity .18s ease,transform .18s ease}.home-pull-refresh.is-hidden{display:none!important}.home-pull-refresh.is-ready{background:rgba(88,255,164,.12);border-color:rgba(88,255,164,.28);color:#b8ffd5}.home-pull-refresh.is-loading{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);color:#fff}.home-pull-refresh.is-error{background:rgba(255,72,104,.14);border-color:rgba(255,72,104,.28);color:#ffd0d9}.grid.is-refreshing{opacity:.62;pointer-events:none;transition:opacity .16s ease}


/* =========================================================
   Stage 34-A-1: 首頁分區短劇牆 + 底部全部短劇
   ========================================================= */
.home-wall{padding:0 0 26px}.home-wall.is-refreshing{opacity:.62;pointer-events:none;transition:opacity .16s ease}.home-drama-section{padding:0 0 22px}.home-drama-section+.home-drama-section{margin-top:2px}.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 14px 10px}.home-section-head h2{margin:3px 0 0;font-size:21px;line-height:1.16;font-weight:950}.home-section-head p{margin:4px 0 0;color:#888;font-size:12.5px;line-height:1.35}.home-section-grid.grid{padding-bottom:4px}.home-section-row{display:grid;grid-auto-flow:column;grid-auto-columns:31.5%;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 12px 4px}.home-section-row::-webkit-scrollbar{display:none}.home-section-row .card{scroll-snap-align:start}.home-section-row .title{font-size:14.5px}.home-section-row .tags{font-size:12px}.home-drama-section-hot{padding-top:0}.home-drama-section-hot .home-section-head{padding-top:2px}.home-drama-section-latest,.home-drama-section-love,.home-drama-section-all{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));padding-top:12px;border-top:1px solid rgba(255,255,255,.035)}.home-drama-section-all{padding-bottom:32px}.home-drama-section-all .home-section-grid.grid{padding-bottom:18px}@media(max-width:390px){.home-section-row{grid-auto-columns:32.5%;gap:8px}.home-section-head h2{font-size:20px}.home-section-head p{font-size:12px}}


/* Stage 32-B: 動態角標樣式 */
.badge.hot{background:#ff344e}
.badge.ai{background:#ff3f8e}
.badge.type{background:#7b61ff}


/* =========================================================
   Stage 35-B：前台分類頁 v1
   ========================================================= */
.tabs a.tab,
.subtabs a.subtab {
  text-decoration: none;
  color: inherit;
}

.home-section-head .section-more {
  flex: 0 0 auto;
  text-decoration: none;
  color: #d8d4ff;
  border-color: rgba(159,152,255,.26);
  background: rgba(109,92,255,.12);
}

.category-page {
  padding-bottom: 102px;
}

.category-top {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.back-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.category-top h1 {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 1.14;
  font-weight: 950;
}

.category-top p {
  margin: 5px 0 0;
  color: #999;
  font-size: 13px;
  line-height: 1.35;
}

.category-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 14px 16px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tabs a {
  text-decoration: none;
  color: #aaa;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

.category-tabs a.active {
  color: #fff;
  background: rgba(109,92,255,.22);
  border-color: rgba(159,152,255,.35);
  box-shadow: 0 8px 18px rgba(109,92,255,.12);
}

.category-grid.grid {
  padding-bottom: 24px;
}

.category-empty {
  margin: 20px 14px;
  padding: 24px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #aaa;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
}

.category-empty a {
  display: inline-flex;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(109,92,255,.24);
  font-weight: 900;
}

/* Stage 35-B-1: top category horizontal scroll + search restore */
.search-form{border:0;margin:0;min-width:0;gap:8px;overflow:hidden}.search-icon{flex:0 0 auto;line-height:1}.search-input{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#fff;min-width:0;width:100%;height:100%;font:inherit;font-size:15px}.search-input::placeholder{color:#9b9b9b;opacity:1}.search-submit{border:0;border-radius:999px;background:#2a2a2a;color:#fff;padding:8px 13px;font-weight:900;white-space:nowrap}.search-panel{padding:0 14px 14px}.search-form-large{height:48px;border-radius:14px;background:#151515;border:1px solid rgba(255,255,255,.1)}
.tabs,.subtabs,.category-tabs,.home-section-row{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x;align-items:center;max-width:100%}.tabs,.subtabs{flex-wrap:nowrap;min-height:0}.tab,.subtab,.category-tabs a{flex:0 0 auto}.top{overflow:hidden}.search-row{min-width:0}.search-row .search{min-width:0}


/* Stage 35-D-1: robust landscape guard for iPhone/PWA */
.orientation-guard {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: #050505;
  color: #fff;
  text-align: center;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.orientation-guard__box {
  width: min(82vw, 420px);
  padding: 26px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.orientation-guard__icon {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 12px;
}
.orientation-guard__title {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 950;
  letter-spacing: .02em;
}
.orientation-guard__hint {
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}
html.is-landscape-locked,
html.is-landscape-locked body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
html.is-landscape-locked .orientation-guard {
  display: flex !important;
}
@media (orientation: landscape) {
  html:not(.orientation-js-ready) .orientation-guard {
    display: flex !important;
  }
}


/* =========================================================
   Stage 36-A：推薦頁 v1
   ========================================================= */
.recommend-page{padding-bottom:112px}.recommend-top{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:max(14px,env(safe-area-inset-top)) 14px 14px;position:sticky;top:0;z-index:20;background:rgba(5,5,5,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.recommend-top h1{margin:2px 0 0;font-size:24px;line-height:1.14;font-weight:950}.recommend-top p{margin:5px 0 0;color:#aaa;font-size:13px;line-height:1.45}.recommend-tabs{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;padding:12px 14px 10px;scrollbar-width:none}.recommend-tabs::-webkit-scrollbar{display:none}.recommend-tabs a{flex:0 0 auto;text-decoration:none;color:#e8e8e8;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:9px 13px;font-size:13px;font-weight:850}.recommend-tabs a:first-child{background:rgba(123,97,255,.18);border-color:rgba(123,97,255,.26);color:#fff}.recommend-note{margin:0 14px 16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(123,97,255,.16),rgba(255,63,142,.08));border-radius:18px;padding:13px 14px;display:grid;gap:4px}.recommend-note strong{font-size:15px}.recommend-note span{color:#aaa;font-size:12.5px;line-height:1.45}.recommend-wall{padding-top:2px}.recommend-drama-section-guess .section-kicker{color:#ff77b1}.recommend-drama-section-ai .section-kicker{color:#ff77b1}@media(max-width:390px){.recommend-top h1{font-size:23px}.recommend-tabs{gap:8px;padding-left:12px;padding-right:12px}.recommend-tabs a{padding:8px 12px}}


/* =========================================================
   Stage 37-B：Android PWA 底部白條修正 v1
   目標：讓 Android 安裝成 App 後，系統手勢列背景盡量維持黑色，
   並讓底部導航預留手勢操作區，避免白底與導航重疊。
   ========================================================= */
html {
  background: #000 !important;
  color-scheme: dark;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000 !important;
}
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(24px + env(safe-area-inset-bottom));
  background: #000;
  pointer-events: none;
  z-index: 88;
}
.app,
.detail,
.watch,
.auth-page,
.member-page,
.follow-page,
.reward-page,
.recommend-page,
.category-page,
.search-page {
  background: #050505;
}
.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(168px + max(env(safe-area-inset-bottom), 14px));
}
.bottom-nav {
  background: #050505 !important;
  height: calc(68px + max(env(safe-area-inset-bottom), 14px));
  padding-bottom: max(env(safe-area-inset-bottom), 14px);
  box-shadow: 0 -10px 24px rgba(0,0,0,.55);
}
.continue {
  bottom: calc(76px + max(env(safe-area-inset-bottom), 14px));
}
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
}


/* =========================================================
   Stage 37-B-1：Android PWA 底部白條強化修正
   說明：Android 已安裝 PWA 的系統導覽列顏色主要由 manifest/theme-color
   與安裝時快取決定；CSS 這裡把所有可控區域補滿黑底。
   ========================================================= */
:root {
  --android-nav-bg: #000000;
  background: #000000 !important;
  color-scheme: only dark;
}
html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  background-color: #000000 !important;
  background-image: none !important;
}
body {
  margin: 0;
  overflow-x: hidden;
}
@supports (min-height: 100svh) {
  body { min-height: 100svh; }
}
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}
.bottom-nav::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(env(safe-area-inset-bottom), 24px);
  background: #000000;
  pointer-events: none;
  z-index: -1;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  html,
  body {
    background: #000000 !important;
  }
  body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: #000000;
    pointer-events: none;
    z-index: 1;
  }
  .bottom-nav { z-index: 90; }
  .continue { z-index: 91; }
}

/* stage37C: PWA no-zoom + iOS input focus zoom fix */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  touch-action: pan-x pan-y;
}
input,
textarea,
select,
button {
  font-size: 16px;
}
.search-input,
.search-form input,
.search-form-large input,
.auth-card input,
.member-page input,
.member-page textarea,
.member-page select,
.reward-page input,
.reward-page textarea,
.reward-page select {
  font-size: 16px !important;
}
.search {
  font-size: 16px;
}


/* =========================================================
   Stage 37-C-1：首頁橫向短劇分區觸控修正
   只把 pan-x 鎖定留給頂部分類列；中間短劇橫向列可左右滑，
   也允許手勢從卡片開始時交回整頁上下滑。
   ========================================================= */
.tabs,
.subtabs,
.category-tabs,
.recommend-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.home-section-row {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y !important;
}
.home-section-row .card,
.home-section-row .poster,
.home-section-row .poster-img,
.home-section-row .title,
.home-section-row .tags {
  touch-action: pan-x pan-y !important;
}


/* =========================================================
   Stage 37-F-2：我的頁底部版面高度修正
   iPhone PWA 在短內容頁剛載入時可能先抓錯 visual viewport，
   造成底部導航被往上頂；用 JS 注入 --wb-vh，並讓我的頁用穩定高度。
   ========================================================= */
html {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
body {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
.member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  padding-bottom: calc(112px + max(env(safe-area-inset-bottom), 14px));
  overflow-x: hidden;
}
.member-page + .bottom-nav,
.bottom-nav {
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  will-change: transform;
}
@supports (height: 100svh) {
  .member-page.app { min-height: 100svh; }
}
html.wb-viewport-ready .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}


/* =========================================================
   Stage 37-F-4：我的頁底部導航固定修復
   撤回 37-F-3 的 sticky/文流做法，底部導航維持 fixed。
   只針對「我的」短內容頁補足內容高度與底部安全區，並配合 JS
   多次重算 viewport，避免 iPhone PWA 初始進頁時把 fixed nav 吸上來。
   ========================================================= */
body.member-body {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  background: #000 !important;
  overflow-x: hidden;
}
body.member-body .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  padding-bottom: calc(170px + max(env(safe-area-inset-bottom), 18px)) !important;
  overflow-x: hidden;
}
body.member-body .member-page.app::after {
  content: "";
  display: block;
  height: calc(28px + max(env(safe-area-inset-bottom), 14px));
}
body.member-body .bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  will-change: transform;
  z-index: 90;
}
body.member-body .bottom-nav::after {
  position: fixed;
  z-index: -1;
}
html.wb-member-page-ready body.member-body .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
html.wb-member-page-ready body.member-body .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
}
@supports (height: 100dvh) {
  body.member-body .member-page.app {
    min-height: 100dvh;
  }
}
@supports (height: 100svh) {
  body.member-body .member-page.app {
    min-height: 100svh;
  }
}


/* =========================================================
   Stage 37-F-5：我的頁版面重新校正
   內容下移，底部導航仍維持 fixed；在 iPhone PWA 視窗初始高度
   尚未穩定時，用 JS 計算的 --wb-vv-bottom-gap 微調底部位置。
   ========================================================= */
body.member-body .member-page.app {
  padding-top: calc(34px + env(safe-area-inset-top)) !important;
  min-height: calc(var(--wb-vh, 1vh) * 100 + 1px) !important;
  padding-bottom: calc(190px + max(env(safe-area-inset-bottom), 18px)) !important;
}
body.member-body .member-hero {
  padding-top: 10px !important;
}
body.member-body .member-hero h1 {
  margin-top: 6px !important;
  margin-bottom: 18px !important;
}
body.member-body .member-card {
  margin-top: 18px !important;
}
body.member-body .bottom-nav {
  position: fixed !important;
  bottom: calc(-1 * var(--wb-vv-bottom-gap, 0px)) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
}
html.wb-member-page-ready body.member-body .bottom-nav {
  bottom: calc(-1 * var(--wb-vv-bottom-gap, 0px)) !important;
}
@supports (height: 100dvh) {
  body.member-body .member-page.app {
    min-height: calc(100dvh + 1px) !important;
  }
}


/* =========================================================
   Stage 37-F-6：我的頁下拉 overscroll 修正
   保留 37-F-5 的初始位置校正，但禁止「我的」短內容頁
   在 iPhone PWA 被橡皮筋下拉時把 fixed 底部導航一起帶動。
   ========================================================= */
body.member-body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: auto;
}
body.member-body .member-page.app {
  overscroll-behavior-y: none;
}
body.member-body .bottom-nav,
html.wb-member-page-ready body.member-body .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
}
body.member-body .bottom-nav::after {
  bottom: 0 !important;
}

/* stage37D: follow requires member login */
.wb-modal-actions{display:grid;gap:10px;margin-top:16px}.wb-modal-actions .wb-modal-button{display:block;text-decoration:none}.wb-modal-secondary,.wb-modal-ghost{display:block;width:100%;border-radius:999px;padding:13px 18px;font-size:15px;font-weight:900;text-align:center;text-decoration:none}.wb-modal-secondary{color:#fff;background:#232323;border:1px solid rgba(255,255,255,.12)}.wb-modal-ghost{color:#aaa;background:transparent;border:0}.follow-login-card .primary-btn{margin:16px 0 10px}.follow-login-card .secondary-btn{margin:0}


/* stage37E: member browse history */
.member-browse-history {
  margin: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.member-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.member-section-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.1;
}
.member-section-desc {
  margin: 10px 0 12px;
  color: #aaa;
  font-size: 13.5px;
  line-height: 1.55;
}
.browse-history-empty {
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #aaa;
  border-radius: 15px;
  padding: 15px;
  line-height: 1.55;
  font-size: 14px;
}
.browse-history-list {
  display: grid;
  gap: 10px;
}
.browse-history-card {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  border-radius: 16px;
  padding: 9px;
}
.browse-history-cover {
  width: 62px;
  height: 82px;
  border-radius: 11px;
  background: linear-gradient(145deg,#4e3c92,#11162e 60%,#000);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  overflow: hidden;
}
.browse-history-body { min-width: 0; }
.browse-history-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}
.browse-history-meta {
  margin-top: 6px;
  color: #aaa;
  font-size: 13px;
}
.browse-history-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.browse-history-action {
  text-decoration: none;
  color: #fff;
  background: #242424;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}
.browse-history-action.primary {
  background: linear-gradient(135deg,#7b61ff,#ff4fa3);
  border-color: transparent;
}


/* Stage 37-G: 播放頁允許橫向觀看；其他頁仍維持直向提示 */
html.orientation-watch-allowed,
html.orientation-watch-allowed body {
  overflow: auto !important;
  overscroll-behavior: auto !important;
}
html.orientation-watch-allowed .orientation-guard {
  display: none !important;
}


/* Stage 39-A: swipe explore page */
body.swipe-body{background:#000;overscroll-behavior:none}.swipe-page{position:relative;width:100%;max-width:520px;height:100svh;min-height:100svh;margin:0 auto;background:#000;overflow:hidden;touch-action:pan-y}.swipe-video-wrap{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.swipe-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:2}.swipe-cover{position:absolute;inset:0;background:#080808 center/cover no-repeat;opacity:.28;filter:blur(18px) saturate(1.1);transform:scale(1.08);z-index:1}.swipe-video.is-ready+.swipe-cover{opacity:.16}.swipe-video-wrap:after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,.48),rgba(0,0,0,.02) 28%,rgba(0,0,0,.06) 54%,rgba(0,0,0,.78));pointer-events:none}.swipe-topbar{position:absolute;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 10px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}.swipe-topbar a{width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:28px;backdrop-filter:blur(10px)}.swipe-topbar strong{font-size:18px;font-weight:950}.swipe-topbar span{margin-left:auto;color:rgba(255,255,255,.72);font-size:12px}.swipe-info{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:12;padding:0 16px 16px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85);pointer-events:none}.swipe-info h1{margin:6px 0 6px;font-size:24px;line-height:1.18;font-weight:950;letter-spacing:-.02em}.swipe-info p{margin:0;max-width:92%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgba(255,255,255,.82);font-size:14px;line-height:1.45}.swipe-meta,.swipe-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.swipe-meta span,.swipe-tags span{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);font-size:12px;font-weight:850;color:rgba(255,255,255,.88);backdrop-filter:blur(8px)}.swipe-tags{margin-top:9px}.swipe-actions{display:flex;gap:10px;margin-top:14px;pointer-events:auto}.swipe-action{border:0;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;padding:12px 18px;font-size:15px;font-weight:950;backdrop-filter:blur(12px)}.swipe-action.primary{background:linear-gradient(135deg,#7b61ff,#ff3f8e);border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(123,97,255,.28)}.swipe-action.is-followed{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.22)}.swipe-center-control{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);z-index:18;width:78px;height:78px;border:0;border-radius:999px;background:rgba(0,0,0,.46);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);transition:opacity .2s ease,transform .2s ease}.swipe-center-control.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.92)}.swipe-sound-toggle{position:absolute;right:16px;top:calc(72px + env(safe-area-inset-top));z-index:18;width:46px;height:46px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(0,0,0,.28)}.swipe-sound-toggle.is-on{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}.swipe-hint{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:14;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:12px;font-weight:850;opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}.swipe-hint.is-show{opacity:1;transform:translateX(-50%) translateY(-6px)}.swipe-empty{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:26px 18px 120px;color:#fff}.swipe-empty h1{font-size:28px;margin:10px 0 8px}.swipe-empty p{color:#aaa;line-height:1.6}.swipe-bottom-nav{background:linear-gradient(to top,#050505 74%,rgba(5,5,5,.78));border-top-color:rgba(255,255,255,.06)}@media(orientation:landscape){body.swipe-body .swipe-page{height:100vh;min-height:100vh}.swipe-sound-toggle{top:62px;right:calc(16px + env(safe-area-inset-right))}.swipe-info{bottom:18px;left:calc(12px + env(safe-area-inset-left));right:calc(78px + env(safe-area-inset-right));padding-bottom:0}.swipe-bottom-nav{display:none}.swipe-info h1{font-size:22px}.swipe-topbar{padding-top:12px}}


/* stage 39-A-2: swipe immersive mode and first-use hint */
body.swipe-immersive-body{background:#000;overflow:hidden;padding-bottom:0;}
body.swipe-immersive-body .bottom-nav,
body.swipe-immersive-body .swipe-bottom-nav{display:none!important;}
body.swipe-immersive-body .continue{display:none!important;}
body.swipe-immersive-body .swipe-page{height:100svh;min-height:100svh;padding-bottom:0;}
.swipe-onboarding{position:absolute;left:50%;top:50%;z-index:26;transform:translate(-50%,-50%) scale(.98);width:min(82%,320px);padding:20px 18px;border-radius:24px;background:rgba(0,0,0,.54);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.42);backdrop-filter:blur(16px);text-align:center;color:#fff;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;}
.swipe-onboarding.is-show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.swipe-onboarding-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:999px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:950;}
.swipe-onboarding-title{font-size:17px;font-weight:950;line-height:1.35;}
.swipe-onboarding-subtitle{margin-top:7px;color:rgba(255,255,255,.76);font-size:13px;font-weight:800;}
@media(orientation:landscape){body.swipe-immersive-body .swipe-info{bottom:18px;}}


/* stage 39-A-3: swipe immersive layout tuning */
body.swipe-immersive-body{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
body.swipe-immersive-body .swipe-page{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  background:#000;
}
body.swipe-immersive-body .swipe-video-wrap{
  inset:0;
  align-items:stretch;
  justify-content:stretch;
}
body.swipe-immersive-body .swipe-video{
  object-fit:cover;
  object-position:center center;
}
body.swipe-immersive-body .swipe-cover{
  opacity:.34;
  filter:blur(24px) saturate(1.18) brightness(.82);
  transform:scale(1.16);
}
body.swipe-immersive-body .swipe-video.is-ready+.swipe-cover{
  opacity:.18;
}
body.swipe-immersive-body .swipe-video-wrap:after{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 18%, rgba(0,0,0,0) 42%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.30) 58%, rgba(0,0,0,0) 78%);
}
body.swipe-immersive-body .swipe-topbar{
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
}
body.swipe-immersive-body .swipe-topbar a{
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
}
body.swipe-immersive-body .swipe-topbar span{
  color:rgba(255,255,255,.42);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}
body.swipe-immersive-body .swipe-sound-toggle{
  right:18px;
  top:calc(92px + env(safe-area-inset-top));
  width:44px;
  height:44px;
  background:rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
body.swipe-immersive-body .swipe-info{
  left:0;
  right:0;
  bottom:0;
  padding:94px 18px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.28) 70%, rgba(0,0,0,0) 100%);
}
body.swipe-immersive-body .swipe-info h1{
  font-size:25px;
  line-height:1.13;
  margin:8px 0 7px;
  max-width:94%;
}
body.swipe-immersive-body .swipe-info p{
  max-width:94%;
  color:rgba(255,255,255,.78);
}
body.swipe-immersive-body .swipe-actions{
  margin-top:16px;
  gap:12px;
}
body.swipe-immersive-body .swipe-action{
  padding:13px 20px;
}
body.swipe-immersive-body .swipe-hint{
  bottom:calc(122px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.58);
  border-color:rgba(255,255,255,.08);
}
@media(orientation:landscape){
  body.swipe-immersive-body .swipe-page{
    height:100dvh;
    min-height:100dvh;
  }
  body.swipe-immersive-body .swipe-info{
    left:calc(10px + env(safe-area-inset-left));
    right:calc(86px + env(safe-area-inset-right));
    bottom:0;
    padding:72px 18px calc(18px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:70px;
    right:calc(18px + env(safe-area-inset-right));
  }
}

/* stage 39-A-4: swipe mobile/desktop layout separation */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-info{
    padding:88px 18px calc(12px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:14px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(104px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 700px) {
  body.swipe-immersive-body{
    background:#000;
  }
  body.swipe-immersive-body .swipe-page{
    width:min(420px, 100vw);
    max-width:420px;
    height:100vh;
    min-height:100vh;
    max-height:100vh;
    overflow:hidden;
  }
  body.swipe-immersive-body .swipe-topbar{
    padding:14px 14px 8px;
  }
  body.swipe-immersive-body .swipe-topbar a{
    width:34px;
    height:34px;
    font-size:24px;
  }
  body.swipe-immersive-body .swipe-topbar strong{
    font-size:15px;
  }
  body.swipe-immersive-body .swipe-topbar span{
    font-size:10px;
    opacity:.72;
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:64px;
    right:14px;
    width:38px;
    height:38px;
    font-size:18px;
  }
  body.swipe-immersive-body .swipe-info{
    left:0;
    right:0;
    bottom:0;
    padding:58px 16px 44px;
    background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.26) 76%, rgba(0,0,0,0) 100%);
  }
  body.swipe-immersive-body .swipe-meta span,
  body.swipe-immersive-body .swipe-tags span{
    min-height:21px;
    padding:0 8px;
    font-size:10px;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:18px;
    line-height:1.16;
    margin:6px 0 5px;
    max-width:94%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:11px;
    line-height:1.42;
    max-width:94%;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-tags{
    margin-top:7px;
    gap:6px;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px;
    gap:9px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:10px 15px;
    font-size:12px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:96px;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-immersive-body .swipe-info{
    left:0;
    right:0;
    bottom:0;
    padding:54px 16px 44px;
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:64px;
    right:14px;
  }
}

/* stage 39-A-5: swipe layout stabilization for mobile and desktop */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    width:100vw;
    max-width:none;
  }
  body.swipe-immersive-body .swipe-info{
    /* Keep the action buttons inside the visible area on iPhone PWA. */
    padding:76px 18px calc(44px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:24px;
    line-height:1.14;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 19px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(132px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 700px) {
  body.swipe-immersive-body .swipe-page{
    width:min(520px, 100vw);
    max-width:520px;
  }
  body.swipe-immersive-body .swipe-info{
    padding:56px 22px 28px;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:20px;
    line-height:1.16;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:12px;
    line-height:1.42;
  }
  body.swipe-immersive-body .swipe-action{
    padding:10px 16px;
    font-size:13px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:112px;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-immersive-body .swipe-page{
    width:min(520px, 100vw);
    max-width:520px;
  }
  body.swipe-immersive-body .swipe-info{
    padding:52px 22px 28px;
  }
}

/* stage 39-A-6: swipe mobile viewport bottom alignment */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:none;
    height:calc(var(--wb-vh, 1vh) * 100);
    min-height:calc(var(--wb-vh, 1vh) * 100);
    max-height:calc(var(--wb-vh, 1vh) * 100);
    margin:0;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    inset:0;
  }
  body.swipe-immersive-body .swipe-info{
    bottom:0;
    padding:74px 18px calc(22px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(118px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:60px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:22px;
    line-height:1.12;
    margin:6px 0 5px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px;
    line-height:1.38;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-tags{
    margin-top:7px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px;
  }
}


/* stage 39-A-7: swipe mobile fixed viewport reset
   Keep desktop rules from 39-A-5, but make iPhone/Android portrait swipe use
   the real screen edges instead of the visualViewport height variable. */
@media (max-width: 699px) and (orientation: portrait) {
  html:has(body.swipe-immersive-body),
  body.swipe-immersive-body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    background:#000;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  body.swipe-immersive-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute;
    inset:0 !important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    padding:70px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    transform:none !important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:23px;
    line-height:1.14;
    margin:7px 0 6px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:14px;
    line-height:1.42;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 18px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:54px !important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px;
  }
}


/* stage 39-A-8: swipe page remove bottom-nav reserve and align info to actual mobile visual bottom */
@media (max-width: 699px) and (orientation: portrait) {
  html:has(body.swipe-immersive-body),
  body.swipe-immersive-body{
    margin:0!important;
    padding:0!important;
    width:100vw!important;
    min-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .app,
  body.swipe-immersive-body .page-wrap,
  body.swipe-immersive-body main{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  body.swipe-immersive-body .bottom-nav,
  body.swipe-immersive-body .continue,
  body.swipe-immersive-body .swipe-bottom-nav{
    display:none!important;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:calc(-1 * var(--swipe-bottom-gap, 0px))!important;
    padding:64px 18px calc(12px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    transform:none!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(104px + env(safe-area-inset-bottom) - var(--swipe-bottom-gap, 0px))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:48px!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px!important;
  }
}


/* stage 39-A-9: swipe mobile video-to-bottom and safe action buttons
   Keep desktop rules stable. On mobile, do not create a pure black bottom block;
   video remains underneath and the info layer uses only a light readability gradient. */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body,
  html:has(body.swipe-immersive-body){
    background:#000!important;
    overflow:hidden!important;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    background:#000!important;
    overflow:hidden!important;
  }
  body.swipe-immersive-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.swipe-immersive-body .swipe-video{
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-immersive-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.48) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 82%)!important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:0!important;
    margin:0!important;
    transform:none!important;
    padding:58px 18px calc(30px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top, rgba(0,0,0,.44) 0%, rgba(0,0,0,.27) 40%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 18px!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(116px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:46px!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px!important;
  }
}


/* stage 39-A-10: extend swipe video behind iPhone bottom safe-area, keep controls safe */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:calc(-1 * max(34px, env(safe-area-inset-bottom)))!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100% + max(34px, env(safe-area-inset-bottom)))!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-immersive-body .swipe-video-wrap:after{
    position:absolute!important;
    inset:0!important;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.38) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 84%)!important;
  }
  body.swipe-immersive-body .swipe-info{
    bottom:0!important;
    padding:54px 18px calc(22px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top, rgba(0,0,0,.36) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.07) 74%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(110px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:44px!important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
}


/* stage 39-A-11: restore bottom nav on swipe page for stable iPhone safe-area */
body.swipe-nav-restored-body{
  --swipe-restored-nav-height: calc(68px + max(env(safe-area-inset-bottom), 14px));
  background:#000!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}
body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
  display:grid!important;
  z-index:120!important;
}
body.swipe-nav-restored-body .continue{display:none!important;}
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    bottom:0!important;
    background:#000!important;
  }
  body.swipe-nav-restored-body .swipe-video,
  body.swipe-nav-restored-body .swipe-cover{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 30%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 84%)!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:calc(var(--swipe-restored-nav-height) + 10px)!important;
    padding:52px 18px 0!important;
    margin:0!important;
    transform:none!important;
    background:linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.08) 74%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-action{
    padding:12px 18px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 118px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    padding-top:42px!important;
  }
  body.swipe-nav-restored-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-nav-restored-body .swipe-action{
    padding:11px 17px!important;
  }
}
@media (orientation:landscape){
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{display:none!important;}
}

/* stage 39-A-12: swipe right controls order adjustment
   Put the real sound control above, and keep the swipe hint as lighter text below it. */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:calc(72px + env(safe-area-inset-top))!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    z-index:22!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    position:fixed!important;
    top:calc(128px + env(safe-area-inset-top))!important;
    right:18px!important;
    margin:0!important;
    color:rgba(255,255,255,.42)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
    text-shadow:0 2px 10px rgba(0,0,0,.7)!important;
    z-index:21!important;
    pointer-events:none!important;
  }
}

@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:58px!important;
    right:16px!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    position:fixed!important;
    top:112px!important;
    right:16px!important;
    margin:0!important;
    color:rgba(255,255,255,.38)!important;
    font-size:10px!important;
    font-weight:800!important;
    z-index:21!important;
    pointer-events:none!important;
  }
}


/* stage 39-A-13: align swipe sound button with topbar */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:calc(12px + env(safe-area-inset-top))!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    z-index:24!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    top:calc(66px + env(safe-area-inset-top))!important;
    right:18px!important;
  }
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:16px!important;
    right:16px!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    top:70px!important;
    right:16px!important;
  }
}


/* stage 39-A-14: swipe operation tip is temporary, centered, and not a right-side persistent label */
body.swipe-nav-restored-body .swipe-topbar span{
  display:none!important;
}
body.swipe-nav-restored-body .swipe-onboarding{
  top:38%!important;
  width:auto!important;
  min-width:210px!important;
  max-width:82vw!important;
  padding:14px 18px!important;
  border-radius:18px!important;
  background:rgba(0,0,0,.50)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(14px)!important;
}
body.swipe-nav-restored-body .swipe-onboarding-title{
  font-size:16px!important;
  font-weight:950!important;
  line-height:1.35!important;
}
body.swipe-nav-restored-body .swipe-onboarding-subtitle{
  margin-top:6px!important;
  font-size:13px!important;
  font-weight:850!important;
  color:rgba(255,255,255,.78)!important;
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-onboarding{
    top:40%!important;
  }
}


/* stage 39-A-15: swipe tip copy and bottom seam cleanup */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:var(--swipe-restored-nav-height)!important;
    padding-bottom:10px!important;
    margin-bottom:-10px!important;
    background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.10) 76%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
    border-top:0!important;
    background:linear-gradient(to top,#050505 82%,rgba(5,5,5,.92) 100%)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.36)!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.13) 62%, rgba(0,0,0,0) 84%)!important;
  }
}


/* stage 39-A-16: longer swipe onboarding and landscape video full view */
body.swipe-nav-restored-body .swipe-onboarding{
  transition:opacity .38s ease,transform .38s ease!important;
}
body.swipe-nav-restored-body .swipe-video.is-landscape{
  object-fit:contain!important;
  background:#000!important;
}
body.swipe-nav-restored-body .swipe-video.is-landscape + .swipe-cover{
  opacity:.42!important;
  filter:blur(26px) saturate(1.12) brightness(.62)!important;
  transform:scale(1.18)!important;
}
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video.is-landscape{
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* stage 39-A-17: split swipe onboarding into gesture hint and sound coach */
body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe{
  top:34%!important;
  min-width:220px!important;
  padding:18px 22px 17px!important;
  border-radius:22px!important;
  background:rgba(0,0,0,.54)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.38)!important;
}
body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe.is-show{
  transform:translate(-50%,-50%) scale(1)!important;
}
body.swipe-nav-restored-body .swipe-gesture-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin-bottom:8px;
  animation:wbSwipeGestureFloat 1.05s ease-in-out infinite;
}
body.swipe-nav-restored-body .swipe-gesture-arrow{
  display:block;
  height:18px;
  line-height:18px;
  font-size:22px;
  font-weight:950;
  color:rgba(255,255,255,.92);
  text-shadow:0 3px 12px rgba(0,0,0,.55);
}
body.swipe-nav-restored-body .swipe-gesture-pill{
  display:block;
  width:34px;
  height:48px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.78);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.28);
}
body.swipe-nav-restored-body .swipe-gesture-pill:after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  animation:wbSwipeDotMove 1.05s ease-in-out infinite;
}
body.swipe-nav-restored-body .swipe-onboarding-title{
  font-size:20px!important;
  letter-spacing:.02em!important;
}
body.swipe-nav-restored-body .swipe-onboarding-subtitle{display:none!important;}
body.swipe-nav-restored-body .swipe-sound-coach{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  right:72px;
  z-index:25;
  opacity:0;
  transform:translateX(12px) scale(.96);
  transform-origin:right center;
  pointer-events:none;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.56);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.94);
  font-size:14px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
  transition:opacity .28s ease,transform .28s ease;
}
body.swipe-nav-restored-body .swipe-sound-coach.is-show{
  opacity:1;
  transform:translateX(0) scale(1);
  animation:wbSoundCoachPop .46s cubic-bezier(.2,1.35,.35,1) both, wbSoundCoachBreath 1.16s ease-in-out .48s infinite;
}
body.swipe-nav-restored-body .swipe-sound-coach.is-show span{
  display:inline-block;
  animation:wbSoundCoachArrow .78s ease-in-out .18s infinite;
}
@keyframes wbSoundCoachPop{
  0%{transform:translateX(14px) scale(.88);opacity:0;}
  62%{transform:translateX(-3px) scale(1.06);opacity:1;}
  100%{transform:translateX(0) scale(1);opacity:1;}
}
@keyframes wbSoundCoachBreath{
  0%,100%{transform:translateX(0) scale(1);box-shadow:0 12px 36px rgba(0,0,0,.32);}
  50%{transform:translateX(-2px) scale(1.025);box-shadow:0 16px 44px rgba(0,0,0,.42);}
}
@keyframes wbSoundCoachArrow{
  0%,100%{transform:translateX(0);opacity:.72;}
  50%{transform:translateX(5px);opacity:1;}
}
@keyframes wbSwipeGestureFloat{
  0%,100%{transform:translateY(-3px);}
  50%{transform:translateY(5px);}
}
@keyframes wbSwipeDotMove{
  0%,100%{transform:translateY(0);opacity:.95;}
  50%{transform:translateY(22px);opacity:.55;}
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe{top:36%!important;}
  body.swipe-nav-restored-body .swipe-sound-coach{top:24px;right:70px;}
}
@media (max-width:380px){
  body.swipe-nav-restored-body .swipe-sound-coach{
    right:68px;
    font-size:13px;
    padding:9px 10px;
  }
  body.swipe-nav-restored-body .swipe-onboarding-title{font-size:19px!important;}
}


/* Stage 38-B3：底部導航 icon 精緻化 v1
   只用 CSS 重新繪製底部 icon，不改連結與功能。 */
.bottom-nav{
  background:linear-gradient(180deg,rgba(5,5,5,.92),#050505 36%,#030303);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -18px 42px rgba(0,0,0,.46);
}
.bottom-nav .nav{
  gap:4px;
  color:#8b8b93;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}
.bottom-nav .nav:active{transform:scale(.94)}
.bottom-nav .nav-icon{
  width:30px;
  height:26px;
  font-size:0!important;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin-bottom:1px;
}
.bottom-nav .nav-icon::before{
  content:"";
  width:25px;
  height:25px;
  display:block;
  background:currentColor;
  opacity:.9;
  transform:translateZ(0);
  transition:background .18s ease, opacity .18s ease, transform .18s ease, filter .18s ease;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.bottom-nav .nav::before{
  content:"";
  position:absolute;
  top:6px;
  width:42px;
  height:28px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%,rgba(168,104,255,.26),rgba(255,57,142,.08) 46%,transparent 72%);
  opacity:0;
  transform:scale(.76);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.bottom-nav .nav.active{
  color:#fff;
  text-shadow:0 0 18px rgba(174,126,255,.42);
}
.bottom-nav .nav.active::before{
  opacity:1;
  transform:scale(1);
}
.bottom-nav .nav.active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#f3edff 42%,#ff4ea3 100%);
  opacity:1;
  transform:translateY(-1px) scale(1.08);
  filter:drop-shadow(0 0 10px rgba(151,91,255,.52)) drop-shadow(0 0 16px rgba(255,57,142,.22));
}
.bottom-nav .nav.active .nav-icon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cff,#ff4ea3);
  transform:translateX(-50%);
  box-shadow:0 0 12px rgba(157,99,255,.75);
}

/* 首頁：圓潤房子 */
.bottom-nav .nav:nth-child(1) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.7 12 3l9 7.7v8.7c0 .9-.7 1.6-1.6 1.6h-4.5v-5.8c0-.6-.5-1.1-1.1-1.1h-3.6c-.6 0-1.1.5-1.1 1.1V21H4.6c-.9 0-1.6-.7-1.6-1.6v-8.7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.7 12 3l9 7.7v8.7c0 .9-.7 1.6-1.6 1.6h-4.5v-5.8c0-.6-.5-1.1-1.1-1.1h-3.6c-.6 0-1.1.5-1.1 1.1V21H4.6c-.9 0-1.6-.7-1.6-1.6v-8.7Z'/%3E%3C/svg%3E");
}

/* 推薦：閃光星卡 */
.bottom-nav .nav:nth-child(2) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 4.2h15.2c1 0 1.8.8 1.8 1.8v12c0 1-.8 1.8-1.8 1.8H4.4c-1 0-1.8-.8-1.8-1.8V6c0-1 .8-1.8 1.8-1.8Zm7.7 3.3 1.1 2.5 2.7.2-2.1 1.8.7 2.7-2.4-1.4-2.3 1.4.6-2.7-2.1-1.8 2.8-.2 1-2.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 4.2h15.2c1 0 1.8.8 1.8 1.8v12c0 1-.8 1.8-1.8 1.8H4.4c-1 0-1.8-.8-1.8-1.8V6c0-1 .8-1.8 1.8-1.8Zm7.7 3.3 1.1 2.5 2.7.2-2.1 1.8.7 2.7-2.4-1.4-2.3 1.4.6-2.7-2.1-1.8 2.8-.2 1-2.5Z'/%3E%3C/svg%3E");
}

/* 刷劇：播放鍵 */
.bottom-nav .nav:nth-child(3) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 4.9c0-1.4 1.6-2.2 2.8-1.4l11.5 7.1c1.1.7 1.1 2.2 0 2.9L8 20.6c-1.2.7-2.8-.1-2.8-1.5V4.9Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 4.9c0-1.4 1.6-2.2 2.8-1.4l11.5 7.1c1.1.7 1.1 2.2 0 2.9L8 20.6c-1.2.7-2.8-.1-2.8-1.5V4.9Z'/%3E%3C/svg%3E");
}

/* 追劇：書籤收藏 */
.bottom-nav .nav:nth-child(4) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 3.2h11.6c1 0 1.8.8 1.8 1.8v15.2c0 1.2-1.3 1.9-2.3 1.2L12 17.8l-5.3 3.6c-1 .7-2.3 0-2.3-1.2V5c0-1 .8-1.8 1.8-1.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 3.2h11.6c1 0 1.8.8 1.8 1.8v15.2c0 1.2-1.3 1.9-2.3 1.2L12 17.8l-5.3 3.6c-1 .7-2.3 0-2.3-1.2V5c0-1 .8-1.8 1.8-1.8Z'/%3E%3C/svg%3E");
}

/* 我的：人像 */
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.7 4.7 0 1 0 0-9.4 4.7 4.7 0 0 0 0 9.4Zm0 2.1c-4.3 0-7.8 2.2-8.8 5.2-.3.9.4 1.7 1.3 1.7h15c.9 0 1.6-.9 1.3-1.7-1-3-4.5-5.2-8.8-5.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.7 4.7 0 1 0 0-9.4 4.7 4.7 0 0 0 0 9.4Zm0 2.1c-4.3 0-7.8 2.2-8.8 5.2-.3.9.4 1.7 1.3 1.7h15c.9 0 1.6-.9 1.3-1.7-1-3-4.5-5.2-8.8-5.2Z'/%3E%3C/svg%3E");
}

/* Stage 38-B3b：底部導航 icon 明顯精緻版
   改用純 CSS 文字圖標，避免手機瀏覽器快取或 mask 顯示不明顯。 */
.bottom-nav{
  height:calc(72px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(8,8,10,.72),rgba(0,0,0,.98) 34%,#000);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -16px 46px rgba(0,0,0,.68),0 -1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.bottom-nav .nav{
  color:#85858f;
  font-size:12px;
  font-weight:800;
  gap:5px;
  padding-top:6px;
  text-decoration:none;
  letter-spacing:.01em;
}
.bottom-nav .nav-icon{
  width:42px!important;
  height:34px!important;
  margin-bottom:0!important;
  font-size:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  line-height:1!important;
}
.bottom-nav .nav-icon::before{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  height:32px!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:950!important;
  color:#8d8d98!important;
  -webkit-text-fill-color:#8d8d98!important;
  background:none!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  transition:transform .18s ease,color .18s ease,filter .18s ease;
}
.bottom-nav .nav-icon::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:42px!important;
  height:42px!important;
  border-radius:16px!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),rgba(162,101,255,.26) 36%,rgba(255,53,139,.14) 58%,transparent 76%)!important;
  box-shadow:0 0 0 rgba(0,0,0,0)!important;
  opacity:0!important;
  z-index:1!important;
  transition:opacity .18s ease,transform .18s ease;
}
.bottom-nav .nav::before{display:none!important;}
.bottom-nav .nav::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(5px + env(safe-area-inset-bottom));
  width:22px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cff,#ff4fa3);
  box-shadow:0 0 16px rgba(172,105,255,.8);
  opacity:0;
  transform:translateX(-50%) scaleX(.62);
  transition:opacity .18s ease,transform .18s ease;
}
.bottom-nav .nav.active{
  color:#fff!important;
  text-shadow:0 0 16px rgba(255,255,255,.22),0 0 22px rgba(164,104,255,.32);
}
.bottom-nav .nav.active .nav-icon::before{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:translateY(-2px) scale(1.13)!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.36)) drop-shadow(0 0 18px rgba(178,111,255,.58)) drop-shadow(0 0 20px rgba(255,71,155,.24));
}
.bottom-nav .nav.active .nav-icon::after{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.bottom-nav .nav.active::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}
.bottom-nav .nav:active .nav-icon::before{transform:scale(.92)!important;}

/* 明顯版圖標 */
.bottom-nav .nav:nth-child(1) .nav-icon::before{content:"⌂"!important;font-size:30px!important;}
.bottom-nav .nav:nth-child(2) .nav-icon::before{content:"✦"!important;font-size:31px!important;}
.bottom-nav .nav:nth-child(3) .nav-icon::before{content:"▶"!important;font-size:27px!important;padding-left:3px;}
.bottom-nav .nav:nth-child(4) .nav-icon::before{content:"◆"!important;font-size:25px!important;transform:skewX(-12deg) scaleX(1.08)!important;}
.bottom-nav .nav:nth-child(5) .nav-icon::before{content:"♟"!important;font-size:28px!important;}
.bottom-nav .nav:nth-child(4).active .nav-icon::before{transform:translateY(-2px) skewX(-12deg) scale(1.13,1.13)!important;}


/* =========================================================
   38-B3c：導航 icon 定稿版
   - 底部五個 icon 統一：首頁 / 推薦 / 刷劇 / 追劇 / 我的
   - 右上角「我的」入口統一人像風格
   ========================================================= */
.bottom-nav{
  background:linear-gradient(180deg,rgba(5,5,7,.92),rgba(0,0,0,.98))!important;
  box-shadow:0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.bottom-nav .nav{
  gap:4px!important;
  color:#888394!important;
  font-weight:800!important;
}
.bottom-nav .nav.active{
  color:#fff!important;
  text-shadow:0 0 14px rgba(255,255,255,.22),0 0 22px rgba(185,102,255,.35)!important;
}
.bottom-nav .nav-icon{
  width:32px!important;
  height:30px!important;
  font-size:0!important;
  line-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  color:inherit!important;
  transform:none!important;
}
.bottom-nav .nav-icon::before{
  content:""!important;
  display:block!important;
  width:27px!important;
  height:27px!important;
  padding:0!important;
  transform:translateY(0) scale(1)!important;
  background:linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%)!important;
  opacity:.9!important;
  -webkit-mask:var(--wb-nav-mask) center/contain no-repeat!important;
  mask:var(--wb-nav-mask) center/contain no-repeat!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.08))!important;
  transition:transform .18s ease,filter .18s ease,opacity .18s ease!important;
}
.bottom-nav .nav-icon::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%) scale(.64)!important;
  opacity:0!important;
  background:radial-gradient(circle,rgba(255,83,198,.32) 0%,rgba(139,92,255,.22) 42%,rgba(139,92,255,0) 72%)!important;
  filter:blur(1px)!important;
  z-index:-1!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
.bottom-nav .nav.active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%)!important;
  opacity:1!important;
  transform:translateY(-2px) scale(1.12)!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.5)) drop-shadow(0 0 24px rgba(139,92,255,.46))!important;
}
.bottom-nav .nav.active .nav-icon::after{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.bottom-nav .nav:active .nav-icon::before{
  transform:translateY(0) scale(.94)!important;
}
.bottom-nav .nav:nth-child(1){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.5%2010.8%2012%203.8l8.5%207v8.7a1.7%201.7%200%200%201-1.7%201.7h-4.2v-5.7a2.6%202.6%200%200%200-5.2%200v5.7H5.2a1.7%201.7%200%200%201-1.7-1.7z%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(2){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%203.3%202.55%205.16%205.7.83-4.12%204.02.97%205.67L12%2016.3%206.9%2018.98l.97-5.67L3.75%209.29l5.7-.83z%22/%3E%3Cpath%20d=%22M18.5%203.8v3.1M17%205.35h3.1%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(3){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%225.2%22%20y=%224.6%22%20width=%2213.6%22%20height=%2214.8%22%20rx=%223.1%22/%3E%3Cpath%20d=%22M10.5%209.2v5.6l4.6-2.8z%22%20fill=%22black%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M2.8%208.2v7.6M21.2%208.2v7.6%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(4){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%204.2h10a1.6%201.6%200%200%201%201.6%201.6v15l-6.6-4.1-6.6%204.1v-15A1.6%201.6%200%200%201%207%204.2z%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(5){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(3) .nav-icon::before{
  width:30px!important;
  height:30px!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:28px!important;
  height:28px!important;
}

/* 右上角「我的」入口：與底部我的使用同一套人像圖示 */
.top-icon[href="/member.php"]{
  font-size:0!important;
  color:transparent!important;
  overflow:visible!important;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.28)!important;
}
.top-icon[href="/member.php"]::before{
  content:""!important;
  display:block!important;
  width:25px!important;
  height:25px!important;
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 45%,#8b5cff 100%)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E") center/contain no-repeat!important;
  filter:drop-shadow(0 0 8px rgba(255,99,207,.35)) drop-shadow(0 0 14px rgba(139,92,255,.28))!important;
}
.top-icon[href="/member.php"]:active::before{
  transform:scale(.92);
}


/* =========================================================
   38-B3d：底部「我的」icon 修正版
   - 只修底部我的圖示，避免小尺寸時像棋子或變形
   - 右上角我的與其他導航不動
   ========================================================= */
.bottom-nav .nav:nth-child(5){
  --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22black%22%20d=%22M12%202.8a4.35%204.35%200%201%201%200%208.7%204.35%204.35%200%200%201%200-8.7Zm0%2011.05c4.55%200%207.75%202.35%208.55%205.85.2.88-.48%201.7-1.4%201.7H4.85c-.92%200-1.6-.82-1.4-1.7.8-3.5%204-5.85%208.55-5.85Z%22/%3E%3C/svg%3E")!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:26px!important;
  height:26px!important;
  transform:translateY(0) scale(1)!important;
}
.bottom-nav .nav:nth-child(5).active .nav-icon::before{
  transform:translateY(-2px) scale(1.12)!important;
}

/* =========================================================
   38-B3f：底部導航 icon 最終修正
   - 移除前一版文字符號殘留（尤其「我的」♟）
   - 強制五個底部 icon 全部使用 SVG mask
   ========================================================= */
.bottom-nav .nav:nth-child(1) .nav-icon::before,
.bottom-nav .nav:nth-child(2) .nav-icon::before,
.bottom-nav .nav:nth-child(3) .nav-icon::before,
.bottom-nav .nav:nth-child(4) .nav-icon::before,
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  content:""!important;
  font-size:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%)!important;
  -webkit-mask:var(--wb-nav-mask) center/contain no-repeat!important;
  mask:var(--wb-nav-mask) center/contain no-repeat!important;
}
.bottom-nav .nav:nth-child(5){
  --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.8%22/%3E%3Cpath%20d=%22M4.8%2020.2c.8-4.15%203.5-6.35%207.2-6.35s6.4%202.2%207.2%206.35%22/%3E%3C/svg%3E")!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:27px!important;
  height:27px!important;
  transform:translateY(0) scale(1)!important;
}
.bottom-nav .nav:nth-child(5).active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%)!important;
  transform:translateY(-2px) scale(1.12)!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.5)) drop-shadow(0 0 24px rgba(139,92,255,.46))!important;
}

/* =========================================================
   39-A-19b：刷劇頁底部按鈕安全距離修正
   - 底部導航 icon 改版後，刷劇頁按鈕需要再往上避開導航列
   - 只影響刷劇頁直式手機版，不改播放/滑動/隨機池邏輯
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height) + 30px)!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:8px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 138px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height) + 24px)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
    padding-bottom:6px!important;
  }
}


/* =========================================================
   39-A-19c：刷劇頁底部縫隙修正
   - 39-A-19b 將內容整塊上移，造成按鈕與底部導航中間露出縫隙
   - 這版改成：背景遮罩貼到導航上緣，只有按鈕本身用 padding 往上避開
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:var(--swipe-restored-nav-height)!important;
    padding:58px 18px 22px!important;
    margin-bottom:0!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 36%, rgba(0,0,0,.16) 72%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 126px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    padding-top:46px!important;
    padding-bottom:17px!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 116px)!important;
  }
}


/* =========================================================
   39-A-19d：刷劇頁 Android 底部高度穩定修正
   - Android WebView / Chrome 對 100vh 可能會把內容算到可視區外
   - 改用動態視窗高度，並讓資訊背景向下延伸，避免按鈕被底部導航吃掉或露縫
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body{
    --swipe-action-safe-gap: 14px;
  }
  body.swipe-nav-restored-body .swipe-page{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap{
    inset:0!important;
    height:100%!important;
    min-height:100%!important;
    bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    position:absolute!important;
    bottom:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap))!important;
    padding:54px 18px 0!important;
    margin:0!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 122px)!important;
    overflow:visible!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.14) 76%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-info::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:calc(-1 * (var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap)));
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap) + 46px);
    background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 46%, rgba(0,0,0,.38) 78%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:-1;
  }
  body.swipe-nav-restored-body .swipe-info h1{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body .swipe-tags{
    flex-wrap:nowrap!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
    position:relative!important;
    z-index:2!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 132px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body{
    --swipe-action-safe-gap: 18px;
  }
  body.swipe-nav-restored-body .swipe-info{
    padding-top:42px!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 104px)!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    -webkit-line-clamp:2!important;
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-nav-restored-body .swipe-tags{
    margin-top:8px!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
  }
}
@supports not (height:100dvh){
  @media (max-width:699px) and (orientation:portrait){
    body.swipe-nav-restored-body .swipe-page{
      height:100svh!important;
      min-height:100svh!important;
      max-height:100svh!important;
    }
    body.swipe-nav-restored-body .swipe-info{
      max-height:calc(100svh - var(--swipe-restored-nav-height) - 122px)!important;
    }
  }
}

/* =========================================================
   39-A-19g：刷劇頁底部遮罩縫隙修正
   只補底部漸層銜接，不再調整資訊區高度或按鈕位置。
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--swipe-restored-nav-height) + 86px);
    z-index:10;
    pointer-events:none;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.94) 38%,
      rgba(0,0,0,.70) 68%,
      rgba(0,0,0,.28) 88%,
      rgba(0,0,0,0) 100%
    );
  }
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
    border-top:0!important;
    background:linear-gradient(
      to top,
      #050505 0%,
      rgba(5,5,5,.99) 58%,
      rgba(5,5,5,.86) 82%,
      rgba(5,5,5,.66) 100%
    )!important;
    box-shadow:0 -18px 36px rgba(0,0,0,.42)!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    z-index:12!important;
  }
}

/* =========================================================
   39-A-19h：Android 刷劇頁資訊欄重繪修正
   只在 Android 觸發 repaint，不改高度、不改按鈕位置。
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page.wb-android-info-repaint-page,
  body.swipe-nav-restored-body .swipe-info.wb-android-info-repaint{
    transform:translateZ(0) translateY(-0.01px)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform!important;
  }
}

/* =========================================================
   39-A-19i：Android 刷劇資訊欄定位基準修正
   - 只在 Android 刷劇頁啟用
   - 資訊欄改用 fixed，跟底部導航使用同一個視窗底部基準
   - 不重算整頁高度、不動影片、不動 iPhone
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info{
    --swipe-action-safe-gap: 14px;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap))!important;
    width:100vw!important;
    max-width:520px!important;
    margin:0!important;
    padding:54px 18px 0!important;
    transform:translateX(-50%)!important;
    z-index:86!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 112px)!important;
    overflow:visible!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.14) 76%, rgba(0,0,0,0) 100%)!important;
    contain:layout paint style!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:calc(-1 * (var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap)))!important;
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap) + 58px)!important;
    background:linear-gradient(to top, rgba(0,0,0,.98) 0%, rgba(0,0,0,.86) 48%, rgba(0,0,0,.38) 78%, rgba(0,0,0,0) 100%)!important;
    pointer-events:none!important;
    z-index:-1!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
    position:relative!important;
    z-index:2!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info h1{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 132px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info{
    --swipe-action-safe-gap: 18px;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    padding-top:42px!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 104px)!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
}

/* =========================================================
   39-A-19j：Android 刷劇底部遮罩固定修正
   - 只在 Android 刷劇頁啟用
   - 底部遮罩改用 fixed，與底部導航/資訊欄使用同一個視窗基準
   - 不動資訊欄位置、不動按鈕、不動 iPhone
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-page::after{
    content:""!important;
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:520px!important;
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap, 14px) + 96px)!important;
    transform:translateX(-50%)!important;
    z-index:84!important;
    pointer-events:none!important;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.99) 0%,
      rgba(0,0,0,.96) 34%,
      rgba(0,0,0,.78) 62%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,0) 100%
    )!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .bottom-nav.swipe-bottom-nav{
    z-index:90!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    z-index:86!important;
  }
}


/* 39-A-21：刷劇頁下一部影片預載用，隱藏背景 video，不影響畫面與點擊 */
.swipe-preload-video{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  left:-9999px!important;
  top:-9999px!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:-1!important;
}

/* 39-A-24 刷劇頁取消追劇確認 */
.wb-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-confirm-actions .wb-modal-secondary,.wb-confirm-actions .wb-modal-button{margin:0}
.wb-confirm-danger{background:linear-gradient(135deg,#ff3f8e,#7b61ff)}
.wb-swipe-unfollow-modal .wb-modal-icon{font-size:30px}

/* 39-S2：iPhone 安裝引導頁優化 */
.install-page-v2 .install-hero h1{max-width:420px}.install-page-v2 .install-card{border-color:rgba(255,255,255,.11)}.install-browser-warning{border-color:rgba(255,204,92,.22);background:linear-gradient(145deg,rgba(255,204,92,.11),rgba(255,255,255,.025))}.install-browser-warning.is-soft{opacity:.88}.install-browser-warning.is-important{border-color:rgba(255,204,92,.42);box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 3px rgba(255,204,92,.1)}.install-hint-strong{background:rgba(123,97,255,.14);border:1px solid rgba(166,144,255,.22);color:#ded7ff!important}.install-path-card{margin-top:13px;padding:14px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2);border-radius:18px}.install-path-card.important{border-color:rgba(255,204,92,.26);background:linear-gradient(145deg,rgba(255,204,92,.1),rgba(0,0,0,.18))}.install-path-title{font-size:16px;font-weight:950;color:#fff}.install-steps-v2 li{grid-template-columns:38px 1fr;padding:10px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.install-steps-v2 span{background:linear-gradient(135deg,#7b61ff,#ff4fa3);box-shadow:0 8px 18px rgba(123,97,255,.22)}.install-mini-note{margin-top:13px;border-radius:15px;padding:12px 13px;background:rgba(255,255,255,.055);color:#aaa;line-height:1.55;font-size:14px}.install-page-v2 .install-feature-grid div{min-height:74px}@media(max-width:390px){.install-page-v2 .install-hero h1{font-size:27px}.install-path-card{padding:12px}.install-steps-v2 li{grid-template-columns:34px 1fr;padding:9px}.install-steps-v2 span{width:34px;height:34px}.install-path-title{font-size:15px}}

/* 39-S3 PWA installed-state polish */
.install-secondary{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#ddd;display:flex;align-items:center;justify-content:center;padding:13px 14px;margin-top:10px;font-size:14px;font-weight:850;line-height:1.35}
.install-secondary:active{transform:scale(.99)}
body.is-pwa-installed .home-entry-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
body.is-pwa-installed .member-menu a[href="/install.php"]{display:none!important}
.pwa-welcome-toast{position:fixed;left:14px;right:14px;top:calc(12px + env(safe-area-inset-top));z-index:9999;display:grid;gap:3px;padding:13px 15px;border-radius:18px;background:rgba(24,24,28,.94);border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 45px rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.pwa-welcome-toast.is-show{opacity:1;transform:translateY(0)}
.pwa-welcome-toast strong{color:#fff;font-size:15px;font-weight:950}.pwa-welcome-toast span{color:#bbb;font-size:13px;line-height:1.35}
body.is-pwa-standalone .install-ready .install-badge::after{content:" · App 模式"}
body.is-pwa-remembered-installed .install-ready .install-badge::after{content:" · 已記住"}
@media(max-width:360px){.install-secondary{font-size:13px;padding:12px}.pwa-welcome-toast{left:10px;right:10px}}

/* 39-S4 PWA App mode immersion polish */
html.is-pwa-app-mode,
html.is-pwa-app-mode body,
body.is-pwa-standalone{
  background:#000!important;
  overscroll-behavior-y:none;
}
body.is-pwa-standalone{
  -webkit-user-select:none;
  user-select:none;
}
body.is-pwa-standalone input,
body.is-pwa-standalone textarea,
body.is-pwa-standalone [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
body.is-pwa-standalone .app,
body.is-pwa-standalone .detail,
body.is-pwa-standalone .watch,
body.is-pwa-standalone .member-page,
body.is-pwa-standalone .auth-page,
body.is-pwa-standalone .install-page,
body.is-pwa-standalone .reward-page{
  min-height:100svh;
  background:#050505;
}
@supports (min-height:100dvh){
  body.is-pwa-standalone .app,
  body.is-pwa-standalone .detail,
  body.is-pwa-standalone .watch,
  body.is-pwa-standalone .member-page,
  body.is-pwa-standalone .auth-page,
  body.is-pwa-standalone .install-page,
  body.is-pwa-standalone .reward-page{min-height:100dvh;}
}
body.is-pwa-standalone .top{
  padding-top:calc(8px + env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(5,5,5,.98) 0%,rgba(5,5,5,.93) 82%,rgba(5,5,5,.84));
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
body.is-pwa-standalone .bottom-nav{
  height:calc(70px + env(safe-area-inset-bottom));
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  background:rgba(5,5,5,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.is-pwa-standalone .nav{
  padding-top:4px;
  justify-content:flex-start;
}
body.is-pwa-standalone .continue{
  bottom:calc(78px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .detail,
body.is-pwa-standalone .watch{
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .back{
  background:rgba(22,22,24,.82);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.is-pwa-standalone .install-hero .section-kicker,
body.is-pwa-standalone .install-browser-warning,
body.is-pwa-standalone .install-tips{
  display:none!important;
}
body.is-pwa-standalone .install-page{
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .install-ready{
  margin-top:10px;
}
.pwa-mode-mini-home{
  position:fixed;
  left:50%;
  bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:92;
  transform:translateX(-50%) translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  background:rgba(28,28,32,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.is-pwa-standalone .pwa-mode-mini-home.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
body.is-pwa-standalone.has-bottom-nav .pwa-mode-mini-home,
body.is-pwa-standalone.is-watch-page .pwa-mode-mini-home,
body.is-pwa-standalone.is-home-page .pwa-mode-mini-home{
  display:none!important;
}
.pwa-app-ready-chip{
  position:fixed;
  right:12px;
  top:calc(10px + env(safe-area-inset-top));
  z-index:9998;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ddd;
  background:rgba(28,28,32,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:12px;
  font-weight:900;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}
.pwa-app-ready-chip.is-show{opacity:1;transform:translateY(0)}
@media(max-width:380px){
  body.is-pwa-standalone .bottom-nav{height:calc(66px + env(safe-area-inset-bottom));}
  .pwa-mode-mini-home{bottom:calc(74px + env(safe-area-inset-bottom));font-size:12px;height:32px;}
}

/* 39-S5 Home install nudge: gentle, delayed, dismissible */
.home-install-nudge{
  position:relative;
  margin:10px 14px 12px;
  border-radius:20px;
  border:1px solid rgba(166,144,255,.20);
  background:linear-gradient(145deg,rgba(123,97,255,.18),rgba(255,79,163,.10) 48%,rgba(255,255,255,.045));
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.035) inset;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .24s ease,transform .24s ease;
}
.home-install-nudge::before{
  content:"";
  position:absolute;
  inset:-55% auto auto -18%;
  width:170px;
  height:170px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.home-install-nudge.is-visible{opacity:1;transform:translateY(0)}
.home-install-nudge-main{
  position:relative;
  min-height:72px;
  padding:13px 46px 13px 13px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
}
.home-install-nudge-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  font-size:22px;
}
.home-install-nudge-copy{display:grid;gap:4px;min-width:0}
.home-install-nudge-copy strong{font-size:15px;font-weight:950;line-height:1.2;color:#fff}
.home-install-nudge-copy em{font-style:normal;font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}
.home-install-nudge-cta{
  height:32px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}
.home-install-nudge-close{
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.78);
  font-size:20px;
  line-height:1;
}
.home-install-nudge-close:active{transform:scale(.96)}
body.is-pwa-installed .home-install-nudge,
body.is-pwa-standalone .home-install-nudge{display:none!important}
@media(max-width:390px){
  .home-install-nudge{margin-left:12px;margin-right:12px;border-radius:18px}
  .home-install-nudge-main{grid-template-columns:38px 1fr;gap:9px;padding:12px 40px 12px 12px}
  .home-install-nudge-icon{width:38px;height:38px;border-radius:14px;font-size:20px}
  .home-install-nudge-cta{grid-column:2;justify-self:start;height:28px;font-size:11px;margin-top:1px}
}


/* =========================================================
   39-S7：追劇 / 觀看紀錄同步狀態提示
   ========================================================= */

.follow-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-right: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(123,97,255,.18), rgba(255,63,142,.14));
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.follow-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #bdbdbd;
  font-size: 12px;
  line-height: 1.35;
}

.follow-sync-status::before,
.member-note-text[data-sync-state]::before {
  content: "●";
  font-size: 9px;
  color: #aaa;
}

.follow-sync-status[data-sync-state="syncing"]::before,
.member-note-text[data-sync-state="syncing"]::before,
.follow-sync-status[data-sync-state="pending"]::before,
.member-note-text[data-sync-state="pending"]::before {
  color: #ffd36b;
}

.follow-sync-status[data-sync-state="ok"]::before,
.member-note-text[data-sync-state="ok"]::before {
  color: #65e6a8;
}

.follow-sync-status[data-sync-state="failed"]::before,
.member-note-text[data-sync-state="failed"]::before {
  color: #ff7f9a;
}

.member-note-text[data-sync-state] {
  display: flex;
  align-items: center;
  gap: 7px;
}

.member-sync-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 9999;
  width: min(330px, calc(100vw - 28px));
  transform: translateX(-50%) translateY(14px);
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(20,20,24,.94);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(14px);
}

.member-sync-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.member-sync-toast[data-sync-state="ok"] {
  border-color: rgba(101,230,168,.35);
}

.member-sync-toast[data-sync-state="failed"] {
  border-color: rgba(255,127,154,.4);
}

.member-sync-toast[data-sync-state="syncing"],
.member-sync-toast[data-sync-state="pending"] {
  border-color: rgba(255,211,107,.32);
}

body.wb-pwa-mode .member-sync-toast {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

/* =========================================================
   39-S10：會員頁同步診斷面板＋版本顯示
   ========================================================= */
.member-note-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.member-note-head .member-note-title{margin-bottom:0}
.member-version{
  flex:0 0 auto;
  color:rgba(255,255,255,.46);
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}
.member-sync-actions{
  margin-top:11px;
  display:flex;
  justify-content:flex-end;
}
.member-debug-link{
  border:1px solid rgba(166,144,255,.22);
  background:rgba(123,97,255,.10);
  color:#dcd6ff;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
}
.member-debug-link:active{transform:scale(.97)}
.member-debug-panel{
  margin:14px;
  padding:14px;
  border:1px solid rgba(166,144,255,.20);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(123,97,255,.13),rgba(255,255,255,.035));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.member-debug-panel.is-hidden{display:none!important}
.member-debug-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.member-debug-head h2{
  margin:3px 0 0;
  font-size:20px;
  line-height:1.15;
}
.member-debug-close{
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
}
.member-debug-body{
  display:grid;
  gap:10px;
}
.member-debug-summary{
  display:grid;
  gap:7px;
  padding:11px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  color:#d8d8d8;
  font-size:12px;
  line-height:1.45;
  word-break:break-word;
}
.member-debug-details{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.member-debug-details summary{
  padding:10px 11px;
  color:#cfc7ff;
  font-size:12px;
  font-weight:900;
}
.member-debug-details pre{
  margin:0;
  padding:11px;
  max-height:260px;
  overflow:auto;
  border-top:1px solid rgba(255,255,255,.08);
  color:#ddd;
  background:rgba(0,0,0,.28);
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
.member-debug-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.member-debug-actions button{
  min-height:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.member-debug-actions button:last-child{grid-column:1/-1;background:rgba(123,97,255,.16);border-color:rgba(166,144,255,.22)}
.member-debug-actions button:active{transform:scale(.985)}
@media(max-width:380px){
  .member-note-head{align-items:flex-start;flex-direction:column;gap:4px}
  .member-sync-actions{justify-content:flex-start}
  .member-debug-panel{margin-left:12px;margin-right:12px;padding:12px}
}


/* =========================================================
   Stage 39-S11：首頁「全部短劇」載入更多
   ========================================================= */
.home-all-more {
  padding: 2px 14px 12px;
  text-align: center;
}

.home-all-more-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.home-all-more-btn:disabled {
  opacity: .72;
}

.home-all-more-btn.is-loading {
  background: rgba(109,92,255,.16);
  border-color: rgba(159,152,255,.28);
}

.home-all-more-btn.is-complete {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.62);
}

.home-all-more-note {
  margin-top: 8px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  line-height: 1.35;
}

.home-all-more.is-complete {
  padding-top: 0;
}


/* =========================================================
   Stage 39-S12：首頁短劇欄位分隔與標題層級優化
   只調整首頁中間短劇展示欄位：熱門短劇 / 最新上架 / 類型欄位 / 全部短劇。
   ========================================================= */
.home-wall{
  padding-top:4px;
}
.home-drama-section{
  position:relative;
  padding:18px 0 28px;
  margin-top:14px;
}
.home-drama-section:first-child{
  margin-top:2px;
  padding-top:6px;
}
.home-drama-section:not(:first-child){
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 72%);
}
.home-drama-section:not(:first-child)::before{
  content:"";
  position:absolute;
  top:0;
  left:14px;
  right:14px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12),rgba(123,97,255,.18),rgba(255,255,255,0));
  pointer-events:none;
}
.home-section-head{
  padding:0 14px 13px;
  align-items:flex-end;
}
.home-section-head h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:22px;
  letter-spacing:.01em;
}
.home-section-head h2::before{
  content:"";
  width:4px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#8f74ff,#ff4f9a);
  box-shadow:0 0 16px rgba(123,97,255,.42);
  flex:0 0 auto;
}
.home-section-head p{
  margin-top:5px;
  color:#9b9b9b;
}
.home-section-head .section-kicker{
  margin-left:12px;
  color:#b4a5ff;
}
.home-section-row{
  padding-bottom:9px;
}
.home-section-grid.grid{
  padding-top:2px;
}
.home-drama-section-all{
  margin-top:22px;
  padding-top:24px;
  padding-bottom:38px;
}
.home-drama-section-all::before{
  left:12px;
  right:12px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(180,165,255,.28),rgba(255,79,154,.18),rgba(255,255,255,0));
}
.home-drama-section-all .home-section-head{
  padding-bottom:14px;
}
.home-all-more{
  margin-top:4px;
}
@media(max-width:390px){
  .home-drama-section{
    padding-top:16px;
    padding-bottom:26px;
    margin-top:12px;
  }
  .home-section-head h2{
    font-size:21px;
  }
  .home-section-head h2::before{
    height:17px;
  }
  .home-drama-section-all{
    margin-top:20px;
    padding-top:22px;
  }
}

/* Stage 39-S13-fix: search recent history floating layer */
.search-form.has-search-history{position:relative;z-index:62}.search-history-panel{display:none;position:relative;z-index:61;margin:8px 0 0;border-radius:16px;background:rgba(24,24,26,.98);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 42px rgba(0,0,0,.38);overflow:hidden;backdrop-filter:blur(18px)}.search-history-panel.is-open{display:block}.search-row .search-history-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0}.search-row{position:relative}.search-history-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 7px;color:#9a9a9a;font-size:12px;font-weight:900;letter-spacing:.06em}.search-history-head button{border:0;background:transparent;color:#bcaeff;font-size:12px;font-weight:900;padding:5px 2px}.search-history-list{display:grid;padding:0 6px 6px}.search-history-item{display:flex;align-items:center;min-height:42px;border-radius:12px}.search-history-item:active{background:rgba(255,255,255,.06)}.search-history-query{flex:1;min-width:0;height:42px;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:10px;text-align:left;padding:0 8px;font:inherit}.search-history-query span{color:#8f8f95;font-size:15px;flex:0 0 auto}.search-history-query strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:750}.search-history-remove{width:38px;height:38px;border:0;border-radius:999px;background:transparent;color:#777;font-size:20px;line-height:1}.search-history-remove:active{background:rgba(255,255,255,.08);color:#fff}.search-panel .search-history-panel{margin:10px 0 0}.top .search-history-panel{max-height:292px;overflow:auto}.search-page .search-history-panel{margin-left:0;margin-right:0}@media(max-width:390px){.search-history-query strong{font-size:13.5px}.search-history-head{padding-top:10px}}


/* Stage 39-S13-fix: search history should float above home cards */
.search-history-panel.is-floating{
  position:fixed;
  left:14px;
  top:86px;
  right:auto;
  width:calc(100vw - 28px);
  margin:0;
  z-index:2147483000;
  max-height:min(292px, 45vh);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.search-row .search-history-panel.is-floating{
  position:fixed;
  left:14px;
  right:auto;
  top:86px;
  margin:0;
}
.search-form.has-search-history{
  z-index:2147482000;
}

/* Stage 39-S13-fix6: search page bottom navigation alignment
   Search page now intentionally has no search-body class and no bottom-nav override.
   Its nav uses the exact same global .bottom-nav rules as the home page. */
.app.search-page{
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom), 14px));
}


/* Stage 39-S13-fix7: search.php is a short-content PWA page, so anchor its bottom nav with the same short-page stabilization used by member.php. */
body.search-body{
  min-height:calc(var(--wb-vh, 1vh) * 100);
  background:#000!important;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:auto;
}
body.search-body .search-page.app{
  min-height:calc(var(--wb-vh, 1vh) * 100 + 1px)!important;
  padding-bottom:calc(190px + max(env(safe-area-inset-bottom), 18px))!important;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
body.search-body .search-page.app::after{
  content:"";
  display:block;
  height:calc(28px + max(env(safe-area-inset-bottom), 14px));
}
body.search-body .bottom-nav,
html.wb-search-page-ready body.search-body .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:translate3d(0,0,0)!important;
  -webkit-transform:translate3d(0,0,0)!important;
  will-change:transform;
  z-index:90;
}
body.search-body .bottom-nav::after{
  bottom:0!important;
}
html.wb-search-page-ready body.search-body .search-page.app{
  min-height:calc(var(--wb-vh, 1vh) * 100 + 1px)!important;
}
@supports (height:100dvh){
  body.search-body .search-page.app{min-height:calc(100dvh + 1px)!important;}
}
@supports (height:100svh){
  body.search-body .search-page.app{min-height:calc(100svh + 1px)!important;}
}

/* Stage 39-S13-fix10: search page bottom-nav hard reset.
   Root cause found in current package: search.php still had search-body + autofocus,
   and old fix7 search-body CSS/JS rules were still active. Search now uses the same
   page shell as category pages and explicitly cancels any legacy search-specific nav rules. */
body:not(.search-body) .search-page.app,
.app.category-page.search-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom),14px))!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}
body:not(.search-body) .search-page.app::after,
.app.category-page.search-page::after{
  content:none!important;
  display:none!important;
  height:0!important;
}
body:not(.search-body) .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
}


/* Stage 39-S13-fix11: search result page bottom nav real-time visual-viewport alignment.
   Only search.php uses page-search. It measures the actual rendered gap and moves the nav down by that exact gap. */
body.page-search .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:calc(-1 * var(--wb-search-nav-gap, 0px))!important;
  max-width:520px!important;
  width:100%!important;
  margin:0 auto!important;
}
body.page-search.wb-search-nav-calibrating .bottom-nav{
  opacity:0;
}
body.page-search.wb-search-nav-ready .bottom-nav{
  opacity:1;
}
body.page-search .search-page.app{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom),14px))!important;
}


/* =========================================================
   39-S13-fix12：搜尋頁外殼重做 + 桌機底部導航背景收斂
   原因：search.php 是短內容頁，iPhone PWA 對 fixed bottom 在短頁的可視底部計算會偏移。
   解法：搜尋頁改成 flex 外殼 + sticky bottom-nav；其他頁維持 fixed bottom-nav。
   同時把桌機版 bottom-nav / body safe-area 背景限制在 520px App 容器內。
   ========================================================= */
.bottom-nav{
  left:50%!important;
  right:auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:hidden;
}
body::after{
  left:50%!important;
  right:auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
}
body.search-page-body{
  min-height:100vh!important;
  min-height:100dvh!important;
  background:#000!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  overflow-x:hidden!important;
}
body.search-page-body::after{
  display:none!important;
  content:none!important;
}
body.search-page-body .search-page.app,
body.search-page-body .search-page-shell{
  flex:1 0 auto!important;
  width:100%!important;
  max-width:520px!important;
  min-height:auto!important;
  padding-bottom:24px!important;
  margin:0 auto!important;
  overflow:visible!important;
}
body.search-page-body .search-page.app::after,
body.search-page-body .search-page-shell::after{
  content:none!important;
  display:none!important;
}
body.search-page-body .bottom-nav,
body.search-page-body .bottom-nav.search-bottom-nav{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
  flex:0 0 auto!important;
  z-index:90!important;
}
body.search-page-body .bottom-nav::after{
  content:none!important;
  display:none!important;
}
@supports (-webkit-touch-callout:none){
  body.search-page-body{
    min-height:-webkit-fill-available!important;
  }
}


/* stage39s21afix22c_20260702: clean rebuilt search page shell.
   search.php no longer uses search-page/search-body/page-search/search-page-body/search-bottom-nav.
   This reset makes the rebuilt page behave like normal category/recommend pages. */
.search-clean-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}
.search-clean-page::after{
  content:none!important;
  display:none!important;
}
.search-clean-panel{
  position:relative;
  z-index:65;
}
body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  -webkit-transform:translateX(-50%)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* =========================================================
   39-S13-fix14：搜尋頁 flex body + sticky bottom-nav
   原因：iPhone PWA 在短內容頁使用 fixed bottom nav 時，layout viewport / visual viewport
   可能計算不同，導致只有 search.php 的底部功能列偏高。
   解法：搜尋頁不再依賴 fixed bottom，改用 body flex column，main flex-grow 撐滿剩餘空間，
   bottom nav 回到文流並 sticky bottom，避開 fixed bottom 的短頁計算問題。
   ========================================================= */
body.search-body-v2{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  min-height:-webkit-fill-available!important;
  overflow-x:hidden!important;
  background:#000!important;
}

body.search-body-v2::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  transform:none!important;
}

body.search-body-v2 .search-clean-page{
  flex:1 0 auto!important;
  min-height:0!important;
  height:auto!important;
  padding-bottom:24px!important;
  margin:0 auto!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}

body.search-body-v2 .search-clean-page::after{
  display:none!important;
  content:none!important;
  height:0!important;
}

body.search-body-v2 .bottom-nav,
body.search-body-v2 .bottom-nav.bottom-nav--sticky{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
  flex:0 0 auto!important;
  align-self:center!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
  box-sizing:border-box!important;
  z-index:90!important;
  overflow:hidden!important;
}

body.search-body-v2 .bottom-nav::after,
body.search-body-v2 .bottom-nav.bottom-nav--sticky::after{
  display:none!important;
  content:none!important;
}

body.search-body-v2 .search-history-panel{
  z-index:120!important;
}

@supports (-webkit-touch-callout:none){
  html{
    min-height:-webkit-fill-available;
  }
  body.search-body-v2{
    min-height:-webkit-fill-available!important;
  }
}



/* =========================================================
   39-S13-fix15：搜尋頁增加延伸推薦並回到全站 fixed bottom-nav
   說明：搜尋頁不再使用 sticky/flex 導航；用實際推薦內容把短頁撐長，
   避免 iPhone PWA 在短內容頁誤算 fixed bottom nav。
   ========================================================= */
.search-clean-page{
  min-height:calc(100dvh + 160px)!important;
  padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
}
.search-related-section{
  margin-top:28px;
  padding-top:26px;
}
.search-related-section .home-section-head{
  padding-left:14px;
  padding-right:14px;
}
.search-related-section .grid{
  padding-bottom:36px;
}
body:not(.search-body-v2) .search-clean-page ~ .bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  -webkit-transform:translateX(-50%)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* =========================================================
   39-S13-fix16：桌機底部導航背景高度修正
   - 桌機寬螢幕下，底部導航背景高度完整包住 icon + 文字
   - 移除桌機不需要的 body safe-area 黑色覆蓋層，避免背景/分隔線視覺外溢
   - 手機與 PWA safe-area 不動
   ========================================================= */
@media (min-width: 700px) and (hover: hover) {
  body::after{
    display:none!important;
    content:none!important;
  }
  .bottom-nav{
    height:86px!important;
    min-height:86px!important;
    padding-top:10px!important;
    padding-bottom:12px!important;
    background:linear-gradient(180deg,rgba(5,5,7,.96),rgba(0,0,0,.99) 42%,#000)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .bottom-nav .nav{
    min-height:64px!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .bottom-nav .nav::after{
    bottom:7px!important;
  }
}


/* 39-S15-fix1: member language switch */
.member-lang-card {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.member-lang-main { min-width: 0; }
.member-lang-title { font-size: 15px; font-weight: 800; color: #fff; }
.member-lang-desc { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.35; }
.member-lang-actions {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.member-lang-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  min-width: 74px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
}
.member-lang-btn.is-active {
  background: rgba(255,255,255,.92);
  color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 360px) {
  .member-lang-card { align-items: stretch; flex-direction: column; }
  .member-lang-actions { align-self: flex-start; }
}


/* stage39-S15-fix5: 追劇愛心狀態色優化 */
.wb-heart,
.wb-heart-empty {
  color: #ff5fa2;
  text-shadow: 0 0 14px rgba(255, 95, 162, .38);
}

.wb-heart-entry {
  font-weight: 950;
}

.member-menu .wb-heart-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff6bba;
  text-shadow: 0 0 14px rgba(255, 95, 162, .34);
}

.favorite-btn.is-favorited,
button.favorite-btn.is-favorited {
  background: linear-gradient(135deg, rgba(255, 95, 162, .26), rgba(123, 97, 255, .18)) !important;
  border-color: rgba(255, 95, 162, .58) !important;
  color: #ff8ec7 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(255, 79, 163, .18) !important;
}

.follow-empty-icon.wb-heart-empty {
  background: rgba(255, 95, 162, .13);
  border: 1px solid rgba(255, 95, 162, .22);
}

.swipe-action.is-followed {
  background: linear-gradient(135deg, rgba(255, 95, 162, .26), rgba(123, 97, 255, .18)) !important;
  border-color: rgba(255, 95, 162, .55) !important;
  color: #ff8ec7 !important;
  box-shadow: 0 12px 28px rgba(255, 79, 163, .2) !important;
}

/* =========================================================
   39-S16-A：iPad / 平板基礎容器與底部導航適配
   - 只在觸控平板寬度以上生效，手機版原樣保留
   - 先只處理容器置中與底部導航寬度，不改播放/上傳/資料邏輯
   ========================================================= */
@media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 760px;
    --wb-tablet-nav-max: 720px;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: 100%;
    max-width: var(--wb-tablet-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.045);
    border-right: 1px solid rgba(255,255,255,.045);
    box-shadow: 0 0 42px rgba(0,0,0,.34);
  }

  .app {
    padding-left: 0;
    padding-right: 0;
  }

  .top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 18px;
    padding-right: 18px;
    gap: 20px 12px;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card {
    margin-left: 18px;
    margin-right: 18px;
  }

  .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky {
    left: 50% !important;
    right: auto !important;
    width: min(100%, var(--wb-tablet-nav-max)) !important;
    max-width: var(--wb-tablet-nav-max) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-left: 1px solid rgba(255,255,255,.045) !important;
    border-right: 1px solid rgba(255,255,255,.045) !important;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: hidden;
  }

  .continue {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100% - 32px), 690px) !important;
    max-width: 690px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}

@media (min-width: 1024px) and (hover: none), (min-width: 1024px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 840px;
    --wb-tablet-nav-max: 760px;
  }
}


/* =========================================================
   39-S16-A-fix1：iPad mini / 平板版面補強
   - 下修平板判斷，但排除手機橫式低高度場景
   - iPad mini 橫式加寬內容區，避免看起來仍像手機版
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 920px;
    --wb-tablet-nav-max: 820px;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: min(calc(100vw - 48px), var(--wb-tablet-content-max)) !important;
    max-width: var(--wb-tablet-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .top {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 22px 14px !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky {
    width: min(calc(100vw - 48px), var(--wb-tablet-nav-max)) !important;
    max-width: var(--wb-tablet-nav-max) !important;
  }

  .continue {
    width: min(calc(100vw - 80px), 820px) !important;
    max-width: 820px !important;
  }
}

@media (min-width: 900px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 960px;
    --wb-tablet-nav-max: 840px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
  }

  .title {
    font-size: 16px;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 1080px;
    --wb-tablet-nav-max: 880px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   39-S16-A-fix2：iPad 內容寬度與底部 Dock 修正
   - iPad mini 橫式減少左右黑邊
   - 底部導航改成置中浮動 Dock
   - 繼續觀看浮層上移，避免貼住導航列
   - iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-edge: 10px;
    --wb-tablet-content-max: 1160px;
    --wb-tablet-nav-max: 640px;
    --wb-tablet-continue-max: 900px;
  }

  html,
  body {
    background: #000 !important;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: min(calc(100vw - (var(--wb-tablet-edge) * 2)), var(--wb-tablet-content-max)) !important;
    max-width: var(--wb-tablet-content-max) !important;
    border-left: 1px solid rgba(255,255,255,.035) !important;
    border-right: 1px solid rgba(255,255,255,.035) !important;
    box-shadow: none !important;
  }

  .top {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card,
  .search-panel,
  .search-related-section,
  .category-head {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .home-section-head {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 22px 14px !important;
  }

  .home-section-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 14px !important;
    grid-auto-columns: calc((100% - 42px) / 4) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 180px), var(--wb-tablet-nav-max)) !important;
    min-width: 560px !important;
    max-width: var(--wb-tablet-nav-max) !important;
    height: 72px !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.82) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    overflow: hidden !important;
  }

  body.is-pwa-standalone .nav,
  .bottom-nav .nav {
    justify-content: center !important;
    padding-top: 0 !important;
    gap: 4px !important;
  }

  .bottom-nav .nav-icon {
    font-size: 23px !important;
  }

  .nav-reward {
    top: 6px !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: 50% !important;
    right: auto !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 96px), var(--wb-tablet-continue-max)) !important;
    max-width: var(--wb-tablet-continue-max) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app {
    padding-bottom: 178px !important;
  }
}

@media (min-width: 700px) and (max-width: 899px) and (min-height: 700px) {
  :root {
    --wb-tablet-edge: 12px;
    --wb-tablet-nav-max: 620px;
    --wb-tablet-continue-max: 760px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 28px) / 3) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav {
    width: min(calc(100vw - 120px), var(--wb-tablet-nav-max)) !important;
    min-width: 560px !important;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-edge: 18px;
    --wb-tablet-content-max: 1280px;
    --wb-tablet-nav-max: 700px;
    --wb-tablet-continue-max: 980px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 64px) / 5) !important;
    gap: 16px !important;
  }
}


/* =========================================================
   39-S16-A-fix3：iPad 滿版與底部導航圖示修正
   - 平板寬度以上改成真正吃滿 PWA 視窗
   - 修正 iPad 底部導航 icon / 文字過小
   - iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 28px;
    --wb-tablet-bottom-nav-h: 86px;
    --wb-tablet-continue-bottom: calc(98px + env(safe-area-inset-bottom));
  }

  html,
  body {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: #050505 !important;
    overflow-x: hidden !important;
  }

  body::before,
  body::after {
    background: #050505 !important;
  }

  .app,
  .detail,
  .watch,
  .watch-app,
  .search-clean-page {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background: #050505 !important;
  }

  .app,
  .search-clean-page {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
  }

  .top {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card,
  .search-panel,
  .search-related-section,
  .category-head,
  .detail-card,
  .episode-panel,
  .watch-panel {
    margin-left: var(--wb-tablet-page-pad) !important;
    margin-right: var(--wb-tablet-page-pad) !important;
  }

  .home-section-head {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
    gap: 24px 18px !important;
  }

  .home-section-row {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
    gap: 18px !important;
    grid-auto-columns: calc((100% - 36px) / 3) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 8px max(38px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(38px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(12,12,16,.92), rgba(3,3,5,.98)) !important;
    box-shadow: 0 -18px 46px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    font-size: 30px !important;
    line-height: 1 !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1px !important;
  }

  .bottom-nav .nav.active::after {
    bottom: -4px !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad) !important;
    right: var(--wb-tablet-page-pad) !important;
    bottom: var(--wb-tablet-continue-bottom) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app {
    padding-bottom: calc(205px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 900px) and (min-height: 700px), (min-width: 1024px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 24px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 54px) / 4) !important;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 32px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 72px) / 5) !important;
  }
}

/* =========================================================
   39-S16-A-fix4：iPad 底部導航 icon 實際尺寸修正
   - 修正平板版只放大 nav-icon 容器、沒有放大 SVG mask ::before 的問題
   - 只在平板寬度生效，iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    font-size: 15px !important;
    gap: 7px !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    min-height: 42px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    display: block !important;
    transform: translateY(0) scale(1) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    transform: translateY(-2px) scale(1.12) !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   39-S16-A-fix5：iPad 底部導航恢復固定貼底版
   - 移除平板浮動 Dock 感，改回穩定貼底滿版導航
   - 修正 icon / 文字對位與 active 光暈被蓋住的問題
   - 保留 iPad 內容滿版與左右黑邊修正
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-bottom-nav-h: 72px;
    --wb-tablet-continue-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 6px max(28px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(10,10,14,.94), rgba(2,2,4,.99)) !important;
    box-shadow: 0 -14px 38px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 0 0 !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    width: 38px !important;
    height: 32px !important;
    min-width: 38px !important;
    min-height: 32px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(0) scale(1) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.70) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    transform: translateY(-1px) scale(1.10) !important;
  }

  .bottom-nav .nav.active .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after {
    bottom: 0 !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after {
    bottom: 0 !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: var(--wb-tablet-continue-bottom) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   39-S16-A-fix6：還原浮動 Dock 後的底部導航光暈層級
   - 保留 iPad 內容滿版
   - 不再讓平板版底部導航使用浮動 Dock 殘留層級
   - 光暈改回在導航列上方、icon 後方，不被背景遮罩壓暗
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 5px max(24px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-right)) !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(5,5,7,.90), #050505 42%, #030303) !important;
    box-shadow: 0 -18px 42px rgba(0,0,0,.46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    color: #888394 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .bottom-nav .nav.active,
  body.is-pwa-standalone .bottom-nav .nav.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 22px rgba(185,102,255,.35) !important;
  }

  .bottom-nav .nav::before,
  body.is-pwa-standalone .bottom-nav .nav::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 9px !important;
    width: 58px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 48%, rgba(255,83,198,.42) 0%, rgba(139,92,255,.30) 42%, rgba(139,92,255,0) 74%) !important;
    filter: blur(1px) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scale(.74) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  .bottom-nav .nav.active::before,
  body.is-pwa-standalone .bottom-nav .nav.active::before {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 0 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    content: none !important;
    display: none !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   39-S16-A-fix7：還原底部導航原始光暈 + 修正刷劇頁導航貼底
   - 清掉平板浮動 Dock 殘留對 bottom-nav 的覆蓋
   - 底部導航保留貼底滿版，但 active 光暈回到 icon 後方
   - 刷劇頁平板版導航固定貼底，不再被往上拉
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-nav-height: calc(72px + max(env(safe-area-inset-bottom), 18px));
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--wb-tablet-nav-height) !important;
    min-height: var(--wb-tablet-nav-height) !important;
    margin: 0 !important;
    padding: 4px max(28px, env(safe-area-inset-left)) max(env(safe-area-inset-bottom), 18px) max(28px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #020202) !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 3px !important;
    color: #888394 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    isolation: auto !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .bottom-nav .nav.active,
  body.is-pwa-standalone .bottom-nav .nav.active,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 22px rgba(185,102,255,.35) !important;
  }

  .bottom-nav .nav::before,
  body.is-pwa-standalone .bottom-nav .nav::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 0 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    content: "" !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease, background .18s ease !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.24), rgba(162,101,255,.32) 38%, rgba(255,53,139,.18) 60%, transparent 78%) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(.5px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    display: block !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  .bottom-nav .nav.active .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: max(4px, calc(env(safe-area-inset-bottom) + 4px)) !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: calc(var(--wb-tablet-nav-height) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(var(--wb-tablet-nav-height) + 92px) !important;
  }

  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: var(--wb-tablet-nav-height) !important;
    padding-bottom: 0 !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    padding-bottom: 0 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: calc(var(--wb-tablet-nav-height) + 10px) !important;
  }
}

/* =========================================================
   39-S16-A-fix8：刷劇頁 iPad 底部導航強制貼底
   - iPad / 平板的刷劇頁會因 visualViewport 底部 gap 讓 fixed nav 看起來被往上拉
   - 只針對 swipe.php 的 .swipe-bottom-nav，把導航背景向下延伸到實際螢幕底部
   - 不改一般頁面的底部導航、不改手機直式主版面
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: calc(72px + env(safe-area-inset-bottom));
    --wb-swipe-tablet-nav-base: 72px;
    --wb-swipe-tablet-gap: var(--swipe-bottom-gap, 0px);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(-1 * var(--wb-swipe-tablet-gap)) !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(var(--wb-swipe-tablet-nav-base) + env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) !important;
    min-height: calc(var(--wb-swipe-tablet-nav-base) + env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) !important;
    margin: 0 !important;
    padding: 4px max(28px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) max(28px, env(safe-area-inset-right)) !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #000) !important;
    z-index: 999 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    bottom: calc(env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap) + 4px) !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: calc(var(--swipe-restored-nav-height) + 10px) !important;
  }
}

/* =========================================================
   39-S16-A-fix9：iPad PWA 底部 safe-area 導航貼底修正
   - 導航背景吃到 home indicator 區域
   - icon / 文字仍留在安全區上方
   - 不再依賴 swipe visualViewport gap 把整條導航推上去
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-nav-core-h: 72px;
    --wb-tablet-safe-fill: max(env(safe-area-inset-bottom), 36px);
    --wb-tablet-nav-total-h: calc(var(--wb-tablet-nav-core-h) + var(--wb-tablet-safe-fill));
  }

  html,
  body {
    background:#000!important;
  }

  body::after {
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    height:var(--wb-tablet-safe-fill)!important;
    transform:none!important;
    background:linear-gradient(180deg, rgba(5,5,7,.96), #000)!important;
    z-index:89!important;
    pointer-events:none!important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    min-width:0!important;
    height:var(--wb-tablet-nav-total-h)!important;
    min-height:var(--wb-tablet-nav-total-h)!important;
    margin:0!important;
    padding:4px max(28px, env(safe-area-inset-left)) var(--wb-tablet-safe-fill) max(28px, env(safe-area-inset-right))!important;
    transform:none!important;
    -webkit-transform:none!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #000)!important;
    box-shadow:0 -16px 40px rgba(0,0,0,.48), 0 80px 0 80px #000!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    z-index:120!important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    z-index:999!important;
  }

  .bottom-nav::after,
  body.is-pwa-standalone .bottom-nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content:""!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:var(--wb-tablet-safe-fill)!important;
    background:linear-gradient(180deg, rgba(5,5,7,.96), #000)!important;
    z-index:-1!important;
    pointer-events:none!important;
    display:block!important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:visible!important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    bottom:4px!important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    bottom:calc(var(--wb-tablet-nav-total-h) + 10px)!important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom:calc(var(--wb-tablet-nav-total-h) + 92px)!important;
  }

  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: var(--wb-tablet-nav-total-h)!important;
    --wb-swipe-tablet-gap: 0px!important;
    --swipe-bottom-gap: 0px!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
    background:#000!important;
  }

  body.swipe-nav-restored-body .swipe-page {
    bottom:0!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom:calc(var(--wb-tablet-nav-total-h) + 10px)!important;
  }
}


/* =========================================================
   39-S16-A-fix10：刷劇頁底部導航規則重整
   - 只針對 swipe.php 的 swipe-bottom-nav
   - 清掉前面 iPad 浮動 Dock / safe-area 把內容往上推的殘留
   - 一般頁面的 bottom-nav 不受影響
   ========================================================= */
@media (min-width: 700px) and (min-height: 520px) {
  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: 68px !important;
    --wb-swipe-tablet-gap: 0px !important;
    --swipe-bottom-gap: 0px !important;
    background:#000 !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:68px !important;
    min-height:68px !important;
    margin:0 !important;
    padding:0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)) !important;
    transform:none !important;
    -webkit-transform:none !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    background:#050505 !important;
    box-shadow:0 -10px 32px rgba(0,0,0,.38) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    z-index:999 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content:none !important;
    display:none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    height:68px !important;
    min-height:68px !important;
    padding:0 !important;
    gap:3px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    position:relative !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    width:28px !important;
    height:28px !important;
    font-size:22px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:2 !important;
    margin:0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width:27px !important;
    height:27px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    font-size:12px !important;
    line-height:1.1 !important;
    position:relative !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::before {
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:18px !important;
    width:44px !important;
    height:36px !important;
    transform:translateX(-50%) !important;
    border-radius:999px !important;
    background:radial-gradient(circle, rgba(255,79,163,.42) 0%, rgba(123,97,255,.25) 45%, rgba(255,79,163,0) 74%) !important;
    filter:blur(7px) !important;
    z-index:0 !important;
    pointer-events:none !important;
    display:block !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    bottom:4px !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom:calc(68px + 10px) !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom:calc(68px + 118px) !important;
  }
}

/* =========================================================
   39-S16-A-fix11：刷劇頁 iPad 影片比例與導航對位修正
   - 只針對 swipe.php 的 iPad / 平板橫式
   - 影片改回完整顯示，不再用 cover 裁切放大
   - swipe-bottom-nav 內部 icon / 文字 / 光暈重新置中
   ========================================================= */
@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-nav-restored-body .swipe-video-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 68px !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .swipe-cover {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: .22 !important;
    filter: blur(22px) saturate(1.05) brightness(.52) !important;
    transform: scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 68px !important;
    min-height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 32px 15px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 3px !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    position: relative !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    height: 15px !important;
    display: block !important;
    text-align: center !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    display: none !important;
    content: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.78) !important;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.24), rgba(172,105,255,.32) 36%, rgba(255,65,154,.16) 58%, transparent 76%) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(1) !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 78px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 186px !important;
  }
}

/* =========================================================
   39-S16-A-fix12：iPad mini 直式刷劇頁影片比例與導航對位修正
   - 只針對 swipe.php 的平板直式刷劇頁
   - 影片改為 contain，避免在 iPad mini 直式被 cover 過度放大裁切
   - swipe-bottom-nav 內部 icon / 文字 / 光暈重新對齊
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap {
    position: absolute !important;
    inset: 0 0 68px 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .swipe-cover {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: .24 !important;
    filter: blur(24px) saturate(1.08) brightness(.52) !important;
    transform: scale(1.1) !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap::after {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,0) 46%),
      linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 28%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 84%) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    background: #050505 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 -10px 32px rgba(0,0,0,.38) !important;
    overflow: visible !important;
    z-index: 999 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 31px 15px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 4px !important;
    overflow: visible !important;
    color: #8c8798 !important;
    text-decoration: none !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    color: #fff !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    grid-row: 1 !important;
    position: relative !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 18px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.78) !important;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.24), rgba(172,105,255,.34) 36%, rgba(255,65,154,.20) 58%, transparent 76%) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(.3px) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    grid-row: 2 !important;
    display: block !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 78px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 186px !important;
  }
}

/* =========================================================
   39-S16-A-fix13：刷劇頁底部導航圖示對位修正
   - 只針對 iPad mini / 平板直式的 swipe-bottom-nav
   - 不再改影片比例與一般頁 bottom-nav
   - 用固定座標重排 icon / 文字 / 光暈 / 底線，避免 grid/flex 疊加錯位
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 72px !important;
    min-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: block !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: absolute !important;
    left: 50% !important;
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translate(-50%, -50%) scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 45px !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    opacity: 0 !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 82px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 190px !important;
  }
}

/* =========================================================
   39-S16-A-fix14：刷劇頁底部導航全圖示對位修正
   - 修正 fix13 只讓 active 圖示看起來正常，非 active 圖示仍錯位
   - 只針對 iPad mini / 平板直式的 swipe-bottom-nav
   - 不動影片比例與一般頁 bottom-nav
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 5px 0 8px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    content: "" !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translateY(-1px) scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    opacity: 0 !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 82px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 190px !important;
  }
}

/* =========================================================
   39-S16-A-fix15：刷劇頁 iPad 頂部控制列位置優化
   - 只針對平板 / iPad 的刷劇頁頂部控制
   - 左上返回與標題避開狀態列，稍微往下、往內
   - 右上靜音按鈕避開電量區，稍微往下、往內
   ========================================================= */
@media (min-width: 700px) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 54px !important;
    padding: calc(20px + env(safe-area-inset-top)) calc(34px + env(safe-area-inset-right)) 8px calc(30px + env(safe-area-inset-left)) !important;
    gap: 10px !important;
    align-items: center !important;
    z-index: 28 !important;
  }

  body.swipe-nav-restored-body .swipe-topbar a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 25px !important;
    line-height: 1 !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  }

  body.swipe-nav-restored-body .swipe-topbar strong {
    font-size: 17px !important;
    line-height: 36px !important;
    font-weight: 950 !important;
  }

  body.swipe-nav-restored-body .swipe-sound-toggle {
    top: calc(20px + env(safe-area-inset-top)) !important;
    right: calc(34px + env(safe-area-inset-right)) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 19px !important;
    z-index: 30 !important;
    background: rgba(0,0,0,.38) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.32) !important;
  }
}


/* =========================================================
   39-S16-A-fix16：刷劇頁 iPad 音效提示對位修正
   - 只調整「點擊靜音可開聲音」提示
   - 與右上靜音按鈕保持同一條視覺基準線
   - 不動影片比例與底部導航
   ========================================================= */
@media (min-width: 700px) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-sound-coach {
    top: calc(20px + env(safe-area-inset-top)) !important;
    right: calc(84px + env(safe-area-inset-right)) !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;
    z-index: 29 !important;
  }
}


/* =========================================================
   39-S16-B：iPad Safari 瀏覽器模式一般頁底部導航修正
   - 只套用在 iPad 瀏覽器模式，不影響加入主畫面的 PWA App 模式
   - 不動刷劇頁 swipe-bottom-nav，因刷劇頁在瀏覽器模式已可接受
   - 修正一般頁 bottom-nav 左右黑塊、寬度被平板 Dock 歷史規則限制的問題
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px) {
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav),
  body.is-ipad-safari-browser.search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body.is-ipad-safari-browser.page-search .bottom-nav:not(.swipe-bottom-nav),
  html.wb-ipad-safari-browser.wb-search-page-ready body.search-body .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 8px max(30px, env(safe-area-inset-left)) 8px max(30px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(12,12,16,.92), rgba(3,3,5,.98)) !important;
    box-shadow: 0 -18px 46px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 120 !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    overflow: visible !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 31px !important;
    min-width: 32px !important;
    min-height: 31px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .continue {
    left: 36px !important;
    right: 36px !important;
    bottom: 96px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
    z-index: 110 !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body).has-bottom-nav .app,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .search-clean-page,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .member-page,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .follow-page {
    padding-bottom: 178px !important;
  }
}

/* stage39-S18: 刷劇頁首次點擊開始刷劇 */
.swipe-start-gate{
  position:absolute;
  left:50%;
  top:50%;
  z-index:32;
  transform:translate(-50%,-50%) scale(1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(123,97,255,.88),rgba(255,63,142,.88));
  color:#fff;
  font-size:18px;
  font-weight:950;
  letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  box-shadow:0 20px 54px rgba(255,63,142,.22),0 12px 42px rgba(123,97,255,.26);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:opacity .2s ease,transform .2s ease;
}
.swipe-start-gate .swipe-start-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:14px;
  line-height:1;
  padding-left:2px;
}
.swipe-start-gate.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.94);
}
body.swipe-immersive-body .swipe-sound-coach,
body.swipe-nav-restored-body .swipe-sound-coach{
  display:none!important;
}
@media (max-width:420px){
  .swipe-start-gate{font-size:17px;min-height:54px;padding:0 20px;}
}

/* stage39-S20: 刷劇頁桌機操作優化 */
.swipe-desktop-controls{
  display:none;
}
@media (hover:hover) and (pointer:fine){
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls{
    position:absolute;
    right:26px;
    top:50%;
    z-index:34;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:14px;
    pointer-events:auto;
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control{
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(10,10,18,.52);
    color:#fff;
    font-size:25px;
    font-weight:950;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    cursor:pointer;
    transition:transform .16s ease, background .16s ease, border-color .16s ease;
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control:hover{
    transform:scale(1.06);
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.34);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control:active{
    transform:scale(.96);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-onboarding{
    width:min(86%,420px);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-onboarding-title{
    font-size:18px;
  }
}


/* =========================================================
   39-S20-fix1：桌機版誤套平板樣式修正
   - 前面 iPad 適配有部分 min-width 條件同時命中桌機
   - 這裡只在滑鼠/觸控板桌機環境復原桌機版：平板規則仍保留給 iPad / 觸控平板
   - 不影響刷劇頁桌機滾輪 / 鍵盤切換功能
   ========================================================= */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  html,
  body {
    background: #000 !important;
    overflow-x: hidden !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app,
  body:not(.swipe-immersive-body) .search-clean-page {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.04) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    box-shadow: none !important;
    background: #050505 !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 150px !important;
  }

  body:not(.swipe-immersive-body) .top {
    padding: calc(12px + env(safe-area-inset-top)) 14px 8px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: 31.5% !important;
    gap: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-section-head {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .detail-card,
  body:not(.swipe-immersive-body) .episode-panel,
  body:not(.swipe-immersive-body) .watch-panel {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) body.is-pwa-standalone .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav.bottom-nav--sticky:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(100%, 520px) !important;
    min-width: 0 !important;
    max-width: 520px !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 10px 0 12px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg,rgba(5,5,7,.96),rgba(0,0,0,.99) 42%,#000) !important;
    box-shadow: 0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 64px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #888394 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    overflow: visible !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    transform: translateY(0) scale(1) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(5) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav.active .nav-icon::before {
    transform: translateY(-2px) scale(1.12) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 7px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    bottom: 98px !important;
    width: min(calc(100% - 20px), 500px) !important;
    max-width: 500px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 9px !important;
    z-index: 80 !important;
  }
}

/* =========================================================
   39-S21-A：桌機版前臺正式適配 v1
   - 只套用滑鼠/觸控板桌機：避免影響 iPhone / iPad / 觸控平板
   - 先建立桌機版基礎容器、卡片欄位、會員頁與底部導航
   - 保留 39-S20 桌機刷劇滾輪 / 鍵盤操作
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-page-max: 1360px;
    --wb-desktop-narrow-max: 980px;
    --wb-desktop-edge: 28px;
    --wb-desktop-nav-max: 760px;
    --wb-desktop-nav-height: 78px;
  }

  html,
  body {
    background: #000 !important;
    min-width: 1024px !important;
    overflow-x: hidden !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app {
    width: min(calc(100vw - (var(--wb-desktop-edge) * 2)), var(--wb-desktop-page-max)) !important;
    max-width: var(--wb-desktop-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.04) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    background: #050505 !important;
    box-shadow: none !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 150px !important;
  }

  body:not(.swipe-immersive-body) .member-page,
  body:not(.swipe-immersive-body) .follow-page,
  body:not(.swipe-immersive-body) .auth-page {
    width: min(calc(100vw - 72px), var(--wb-desktop-narrow-max)) !important;
    max-width: var(--wb-desktop-narrow-max) !important;
  }

  body:not(.swipe-immersive-body) .top {
    padding: 18px 26px 12px !important;
    background: linear-gradient(to bottom,#050505 86%,rgba(5,5,5,.88)) !important;
  }

  body:not(.swipe-immersive-body) .search-row {
    gap: 14px !important;
  }

  body:not(.swipe-immersive-body) .search {
    height: 44px !important;
    border-radius: 10px !important;
  }

  body:not(.swipe-immersive-body) .tabs {
    gap: 28px !important;
    padding: 20px 2px 9px !important;
  }

  body:not(.swipe-immersive-body) .subtabs {
    gap: 22px !important;
    padding: 9px 0 12px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 26px 16px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: calc((100% - 80px) / 6) !important;
    gap: 16px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-section-head,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px !important;
    margin: 18px 26px 26px !important;
    padding: 0 !important;
  }

  body:not(.swipe-immersive-body) .title {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  body:not(.swipe-immersive-body) .tags {
    font-size: 13px !important;
  }

  /* 桌機會員/追劇頁：不要再像手機版窄欄，卡片寬度與底部導航對齊 */
  body:not(.swipe-immersive-body) .member-hero,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .member-card {
    padding: 20px !important;
    align-items: center !important;
  }

  body:not(.swipe-immersive-body) .member-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    font-size: 34px !important;
  }

  body:not(.swipe-immersive-body) .member-name {
    font-size: 24px !important;
  }

  body:not(.swipe-immersive-body) .member-email,
  body:not(.swipe-immersive-body) .member-meta {
    font-size: 15px !important;
  }

  /* 桌機一般底部導航：固定置中，不吃平板 Dock，不出現左右黑塊 */
  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(calc(100vw - 120px), var(--wb-desktop-nav-max)) !important;
    max-width: var(--wb-desktop-nav-max) !important;
    min-width: 620px !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 9px 0 10px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg,rgba(8,8,12,.94),rgba(0,0,0,.98)) !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    z-index: 90 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 56px !important;
    gap: 4px !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 30px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 26px !important;
    height: 26px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 29px !important;
    height: 29px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--wb-desktop-nav-height) + 18px) !important;
    width: min(calc(100vw - 120px), 1080px) !important;
    max-width: 1080px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: calc((100% - 96px) / 7) !important;
  }
}

/* 桌機刷劇頁基礎版：保留滾輪/鍵盤切換，但不要讓影片巨大裁切 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    background: #000 !important;
    overflow: hidden !important;
  }

  body.swipe-nav-restored-body .swipe-page,
  body.swipe-immersive-body .swipe-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video-wrap {
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(980px, calc(100vw - 320px)) !important;
    min-width: 620px !important;
    height: calc(100vh - 190px) !important;
    height: calc(100dvh - 190px) !important;
    max-height: 760px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    background: #000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.swipe-nav-restored-body .swipe-video,
  body.swipe-immersive-body .swipe-video,
  body.swipe-nav-restored-body .swipe-video.is-landscape,
  body.swipe-immersive-body .swipe-video.is-landscape {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-cover,
  body.swipe-immersive-body .swipe-cover {
    opacity: .18 !important;
    filter: blur(26px) saturate(1.05) brightness(.55) !important;
    transform: scale(1.08) !important;
  }

  body.swipe-nav-restored-body .swipe-info,
  body.swipe-immersive-body .swipe-info {
    left: max(32px, calc((100vw - 980px) / 2)) !important;
    right: max(32px, calc((100vw - 980px) / 2)) !important;
    bottom: 92px !important;
    padding: 0 !important;
    max-width: 980px !important;
  }

  body.swipe-nav-restored-body .swipe-info h1,
  body.swipe-immersive-body .swipe-info h1 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  body.swipe-nav-restored-body .swipe-info p,
  body.swipe-immersive-body .swipe-info p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;
  }

  body.swipe-nav-restored-body .swipe-bottom-nav,
  body.swipe-immersive-body .swipe-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px 10vw 8px !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg,rgba(7,7,10,.92),#000) !important;
    z-index: 90 !important;
  }
}

/* =========================================================
   39-S21-A-fix1：桌機版底部導航與繼續觀看浮層修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad 觸控版
   - 降低桌機底部導航遮擋感，縮窄繼續觀看浮層並拉開距離
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-nav-max: 660px;
    --wb-desktop-nav-height: 66px;
    --wb-desktop-continue-max: 920px;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 172px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    width: min(calc(100vw - 160px), var(--wb-desktop-nav-max)) !important;
    max-width: var(--wb-desktop-nav-max) !important;
    min-width: 560px !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    padding: 7px 0 8px !important;
    border-radius: 14px 14px 0 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 50px !important;
    height: 50px !important;
    gap: 3px !important;
    font-size: 11.5px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::after {
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    bottom: calc(var(--wb-desktop-nav-height) + 30px) !important;
    width: min(calc(100vw - 220px), var(--wb-desktop-continue-max)) !important;
    max-width: var(--wb-desktop-continue-max) !important;
    min-height: 66px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.34) !important;
  }

  body:not(.swipe-immersive-body) .continue-cover {
    width: 52px !important;
    height: 52px !important;
  }

  body:not(.swipe-immersive-body) .continue-title {
    font-size: 15px !important;
  }

  body:not(.swipe-immersive-body) .continue-ep {
    font-size: 12.5px !important;
  }

  body:not(.swipe-immersive-body) .continue-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   39-S21-A-fix2：桌機版統一內容寬度與底部導航對齊
   - 只套用桌機/筆電：不影響 iPhone 與 iPad/平板觸控版
   - 一般前臺頁面、底部導航、繼續觀看浮層使用同一個桌機寬度基準
   - 刷劇頁保留專用版面，不套用本段一般頁寬度
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-nav-height: 66px;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .member-page,
  body:not(.swipe-immersive-body) .follow-page,
  body:not(.swipe-immersive-body) .auth-page,
  body:not(.swipe-immersive-body) .search-clean-page,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app {
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 176px !important;
  }

  body:not(.swipe-immersive-body) .top,
  body:not(.swipe-immersive-body) .home-section-head,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section,
  body:not(.swipe-immersive-body) .recommend-head,
  body:not(.swipe-immersive-body) .follow-head {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel,
  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .member-hero,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card,
  body:not(.swipe-immersive-body) .follow-list,
  body:not(.swipe-immersive-body) .follow-item,
  body:not(.swipe-immersive-body) .detail-card,
  body:not(.swipe-immersive-body) .episode-panel,
  body:not(.swipe-immersive-body) .watch-panel {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav),
  body:not(.search-body-v2):not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    margin: 0 !important;
    bottom: calc(var(--wb-desktop-nav-height) + 22px) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix3：桌機會員頁底部導航定位修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 覆蓋早期 member-body 手機/PWA 專用 bottom-nav 規則，避免桌機會員頁導航被推到右側裁切
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body .bottom-nav:not(.swipe-bottom-nav),
  html.wb-member-page-ready body.member-body .bottom-nav:not(.swipe-bottom-nav),
  body.member-body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: visible !important;
    will-change: auto !important;
    z-index: 90 !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 50px !important;
    height: 50px !important;
    gap: 3px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
  }

  body.member-body .member-page.app {
    padding-bottom: 176px !important;
  }
}


/* =========================================================
   39-S21-A-fix4：桌機版底部導航右側黑塊修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 關閉早期 safe-area 補底層在桌機一般頁造成的右側黑色延伸塊
   - 保留 bottom-nav 本體與繼續觀看浮層的桌機寬度/置中設定
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body)::after,
  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav)::after,
  body.member-body .bottom-nav:not(.swipe-bottom-nav)::after,
  body.search-body-v2 .bottom-nav:not(.swipe-bottom-nav)::after,
  body.page-search .bottom-nav:not(.swipe-bottom-nav)::after,
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body.member-body .bottom-nav:not(.swipe-bottom-nav),
  body.search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body.page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    box-sizing: border-box !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
  }
}


/* =========================================================
   39-S21-A-fix5：桌機會員頁捲動修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 解除早期「我的頁」PWA 防彈跳規則在桌機造成的捲動鎖定
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html,
  body,
  body.member-body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: auto !important;
  }

  body.member-body .member-page.app {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    padding-bottom: 190px !important;
  }

  body.member-body .member-page.app::after {
    display: block !important;
    height: 96px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 90 !important;
  }
}


/* =========================================================
   39-S21-A-fix6：桌機刷劇頁寬度與底部導航統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 讓刷劇頁底部導航、資訊區與一般桌機頁使用同一寬度基準
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-nav-height: 66px;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe {
    background: #000 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(760px, calc(var(--wb-desktop-frame-width) - 420px)) !important;
    min-width: 520px !important;
    max-width: 760px !important;
    height: calc(100vh - 188px) !important;
    height: calc(100dvh - 188px) !important;
    max-height: 760px !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info {
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    bottom: calc(var(--wb-desktop-nav-height) + 28px) !important;
    padding: 0 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info p,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info p {
    max-width: var(--wb-desktop-frame-width) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
    z-index: 90 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav {
    height: 50px !important;
    min-height: 50px !important;
    gap: 3px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-label,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-label {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    right: max(28px, calc((100vw - var(--wb-desktop-frame-width)) / 2 - 74px)) !important;
  }
}

@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(820px, calc(var(--wb-desktop-frame-width) - 460px)) !important;
    max-width: 820px !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix7：桌機刷劇頁外層框架統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 刷劇頁的左上控制、右上聲音、右側切換、資訊區、底部導航統一限制在桌機框架內
   - 影片本體維持既有合理比例，不把「框架」誤改成影片滿版
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-frame-left: calc((100vw - var(--wb-desktop-frame-width)) / 2);
    --wb-desktop-frame-right: calc((100vw - var(--wb-desktop-frame-width)) / 2);
    --wb-desktop-nav-height: 66px;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar {
    position: fixed !important;
    left: var(--wb-desktop-frame-left) !important;
    right: auto !important;
    top: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    box-sizing: border-box !important;
    padding: 22px 0 10px !important;
    z-index: 40 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar a,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar a {
    width: 36px !important;
    height: 36px !important;
    font-size: 24px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar strong,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar strong {
    font-size: 15px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle {
    position: fixed !important;
    top: 26px !important;
    right: calc(var(--wb-desktop-frame-right) + 16px) !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 42 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    bottom: calc(var(--wb-desktop-nav-height) + 28px) !important;
    padding: 0 !important;
    z-index: 28 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info p,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info p {
    max-width: min(100%, var(--wb-desktop-frame-width)) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    z-index: 34 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 90 !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix8：桌機刷劇頁底部導航統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - swipe.php 的 nav 是 body 直屬，不在 .swipe-page 內；因此需直接鎖定 body > .swipe-bottom-nav
   - 讓刷劇頁底部導航寬度、置中、icon/文字/光暈對位回到一般桌機頁同一基準
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
    z-index: 90 !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content: none !important;
    display: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    color: rgba(232,225,255,.74) !important;
    text-decoration: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: relative !important;
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    left: 50% !important;
    right: auto !important;
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}


/* =========================================================
   39-S21-A-fix9：桌機刷劇頁影片尺寸放大
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 保持 contain 不裁切，只放大桌機刷劇頁影片顯示區
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(960px, calc(var(--wb-desktop-frame-width) - 300px), calc(100vw - 360px)) !important;
    min-width: 620px !important;
    max-width: 960px !important;
    height: calc(100vh - 164px) !important;
    height: calc(100dvh - 164px) !important;
    max-height: 820px !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video,
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video.is-landscape,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video.is-landscape {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(1060px, calc(var(--wb-desktop-frame-width) - 280px), calc(100vw - 420px)) !important;
    max-width: 1060px !important;
  }
}

/* =========================================================
   39-S21-A-fix14：桌機刷劇頁右側控制列整合
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 將靜音、上一部、下一部整合成同一組右側控制列視覺
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: calc(50% - 78px) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(10,10,18,.52) !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 44 !important;
    cursor: pointer !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:hover,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.34) !important;
    transform: scale(1.06) !important;
    -webkit-transform: scale(1.06) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:active,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:active {
    transform: scale(.96) !important;
    -webkit-transform: scale(.96) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: calc(50% - 22px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 43 !important;
    pointer-events: auto !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-control {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* =========================================================
   39-S21-A-fix15：桌機刷劇右側控制列定位修正
   - 將聲音按鈕移出影片 transform 容器後，三顆按鈕統一用 viewport / 桌機框架定位
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-control-size: 44px;
    --wb-desktop-control-gap: 12px;
    --wb-desktop-control-right: calc(var(--wb-desktop-frame-right) + 18px);
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe > .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe > .swipe-sound-toggle {
    position: fixed !important;
    right: var(--wb-desktop-control-right) !important;
    left: auto !important;
    top: calc(50% - (var(--wb-desktop-control-size) * 1.5) - var(--wb-desktop-control-gap)) !important;
    width: var(--wb-desktop-control-size) !important;
    height: var(--wb-desktop-control-size) !important;
    min-width: var(--wb-desktop-control-size) !important;
    min-height: var(--wb-desktop-control-size) !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 44 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: var(--wb-desktop-control-right) !important;
    left: auto !important;
    top: calc(50% - (var(--wb-desktop-control-size) / 2)) !important;
    width: var(--wb-desktop-control-size) !important;
    transform: none !important;
    -webkit-transform: none !important;
    gap: var(--wb-desktop-control-gap) !important;
    z-index: 43 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-control {
    width: var(--wb-desktop-control-size) !important;
    height: var(--wb-desktop-control-size) !important;
    min-width: var(--wb-desktop-control-size) !important;
    min-height: var(--wb-desktop-control-size) !important;
  }
}


/* =========================================================
   39-S21-A-fix16：平板刷劇頁底部資訊遮罩延伸
   - 只套用 iPad / 平板觸控版刷劇頁，不影響手機與桌機
   - 參照手機版先前修法：讓底部黑色遮罩延伸到導航後方，消除資訊區與底部導航間的亮色縫隙
   ========================================================= */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-page::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(var(--swipe-restored-nav-height, var(--wb-tablet-nav-total-h, 108px)) + 104px) !important;
    z-index: 84 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.99) 0%,
      rgba(0,0,0,.96) 32%,
      rgba(0,0,0,.78) 58%,
      rgba(0,0,0,.38) 82%,
      rgba(0,0,0,0) 100%
    ) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    z-index: 86 !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    z-index: 90 !important;
  }
}

/* =========================================================
   39-S21-A-fix18：會員頁帳號卡片寬度對齊
   - 只修電腦版與 iPad/平板版「我的」頁
   - 會員帳號卡片在 .member-hero 裡，外層已經有頁面寬度/margin，
     這裡移除卡片本身重複的左右 margin，讓它跟下面語言/選單/瀏覽記錄對齊
   - 手機版維持原狀
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* =========================================================
   39-S21-A-fix18b：會員頁帳號卡片寬度精準對齊
   - 修正 fix18：平板不能用桌機同一套歸零，桌機也需移除 hero 內距
   - 桌機：member-hero 與下面區塊同 margin，帳號卡片在 hero 內滿寬
   - 平板：帳號卡片使用與下面區塊相同的 --wb-tablet-page-pad
   - 手機版不套用
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: var(--wb-tablet-page-pad, 18px) !important;
    margin-right: var(--wb-tablet-page-pad, 18px) !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* fix21e: simplify install browser warning and make copy URL button a primary CTA */
.install-browser-short{font-size:15px;color:#ddd!important}
.install-copy-primary{margin-top:12px;background:linear-gradient(135deg,#7b61ff,#ff4fa3)!important;font-size:16px;letter-spacing:.01em;box-shadow:0 14px 30px rgba(255,79,163,.22),0 12px 24px rgba(123,97,255,.2)}
.install-copy-primary:before{content:"📋";margin-right:8px;font-size:17px}
.install-browser-warning .install-path-card .install-hint{font-size:14px}
@media(max-width:390px){.install-browser-short{font-size:14px}.install-copy-primary{font-size:15px;padding:14px 12px}}


/* fix22: swipe next/next-next preview and conservative preload */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-drag-y:0px;
  will-change:transform;
}
.swipe-video-wrap[data-swipe-stage] .swipe-video,
.swipe-video-wrap[data-swipe-stage] .swipe-cover{
  transform:translate3d(0,var(--swipe-drag-y),0);
  will-change:transform;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek{
  transition:transform .22s ease, opacity .22s ease;
}
.swipe-peek{
  position:absolute;
  left:0;
  right:0;
  height:100%;
  background:#050505 center/cover no-repeat;
  z-index:0;
  opacity:.92;
  transform:translate3d(0,0,0);
  pointer-events:none;
  overflow:hidden;
}
.swipe-peek::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  filter:blur(18px) saturate(1.08);
  transform:scale(1.08);
  opacity:.5;
}
.swipe-peek::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.24),rgba(0,0,0,.04) 35%,rgba(0,0,0,.72));
}
.swipe-peek-next{top:100%;transform:translate3d(0,var(--swipe-drag-y),0)}
.swipe-peek-prev{bottom:100%;transform:translate3d(0,var(--swipe-drag-y),0)}
.swipe-peek.has-cover{opacity:.96}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-peek.is-active{z-index:1}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-cover{z-index:2}
.swipe-video-wrap[data-swipe-stage].is-dragging::after{z-index:4}
.swipe-preload-video{position:absolute;width:1px;height:1px;left:-9999px;top:-9999px;opacity:0;pointer-events:none;background:#000;object-fit:contain;}
.swipe-preload-video.is-peek-next{left:0;right:0;top:100%;width:100%;height:100%;opacity:0;z-index:0;transform:translate3d(0,var(--swipe-drag-y),0);will-change:transform,opacity;}
.swipe-preload-video.is-peek-next.is-ready{opacity:1;}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-peek-next.is-active{z-index:1;}
.swipe-preload-video.is-transition-overlay{left:0!important;top:0!important;width:100%!important;height:100%!important;opacity:1!important;z-index:10!important;transform:translate3d(0,0,0)!important;background:#000;box-shadow:none;}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next{transition:transform .22s ease, opacity .22s ease;}
@media (prefers-reduced-motion: reduce){
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek{transition:none;}
}

/* fix22d：刷劇頁上一支 / 下一支 video 卡片對稱輪替 */
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:#000!important;
  object-fit:contain!important;
  will-change:transform,opacity!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next{
  top:100%!important;
  bottom:auto!important;
  transform:translate3d(0,var(--swipe-drag-y),0)!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  top:auto!important;
  bottom:100%!important;
  transform:translate3d(0,var(--swipe-drag-y),0)!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-ready,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-ready{
  opacity:1!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-active{
  z-index:1!important;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev{
  transition:transform .22s ease, opacity .22s ease!important;
}

/* fix22e：刷劇頁上一支保留 video 畫面與播放進度，回滑不退回封面 */
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-peek.has-video-card.is-video-ready{
  opacity:0!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-ready,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-ready{
  background:#000!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-active.is-ready{
  z-index:2!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-video{
  z-index:3!important;
}

/* fix22n：刷劇頁連續滑動動畫、速度慣性與多指接管 */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-anim-ms:220ms;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev{
  transition:transform var(--swipe-anim-ms) cubic-bezier(.2,.82,.2,1), opacity var(--swipe-anim-ms) ease!important;
}


/* fix22o：避免快滑切換動畫中段被影片 seek / 合成層重建打斷 */
.swipe-video-wrap[data-swipe-stage] .swipe-video,
.swipe-video-wrap[data-swipe-stage] .swipe-cover,
.swipe-video-wrap[data-swipe-stage] .swipe-peek,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.swipe-video-wrap[data-swipe-stage].is-animating{
  contain:layout paint;
}


/* fix22p：放開刷劇拖曳位移上限，讓卡片可跟手滑完整一屏 */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-drag-y:0px;
}


/* fix22q：刷劇頁拖曳末段卡住修正；拖曳可略超過一屏，切換仍吸附到一屏 */


/* fix22r：刷劇頁滑動中與正式播放中的影片裁切比例一致
   - 手機直式目前主播放器使用 cover；下一支/上一支 video 卡片也必須同樣 cover。
   - 避免滑動時看到一個比例，切換完成後又被放大一點。
   - 平板/桌機既有 contain 規則維持不動。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev {
    object-fit: cover !important;
    object-position: center center !important;
  }
}


/* fix22s：刷劇頁橫式影片滑動預覽比例一致
   - 直式影片維持 fix22r 的 cover 滿版。
   - 橫式影片在下一支/上一支滑動露出時，也跟正式播放一樣使用 contain。
   - 避免橫式影片滑動時先被放大，切換完成開始播放後又縮小。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape {
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* fix22u：刷劇頁可拖曳播放進度條 + 顯示位置修正
   - 外層提供 22px 觸控熱區，視覺線條仍維持細。
   - 位置固定在底部導航列正上方，避免被遮罩吃掉。
   - 左右拖曳只調影片時間，不觸發上下滑換劇。 */
.swipe-progress-track{
  position:fixed;
  left:18px;
  right:18px;
  bottom:calc(78px + env(safe-area-inset-bottom));
  height:22px;
  z-index:90;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.swipe-progress-track::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:3px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(255,255,255,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.16);
}
.swipe-progress-fill{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:3px;
  border-radius:999px;
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,79,163,.96),rgba(123,97,255,.98));
  transition:transform .08s linear,height .12s ease;
  will-change:transform;
  pointer-events:none;
}
.swipe-progress-track.is-scrubbing::before,
.swipe-progress-track.is-scrubbing .swipe-progress-fill{
  height:6px;
}
.swipe-page.is-progress-scrubbing .swipe-progress-fill{
  transition:none;
}
body.swipe-nav-restored-body .swipe-progress-track{
  bottom:calc(78px + env(safe-area-inset-bottom));
}
body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-progress-track,
body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-progress-track{
  bottom:18px;
}
@media(orientation:landscape){
  .swipe-progress-track,
  body.swipe-nav-restored-body .swipe-progress-track{
    bottom:14px;
  }
}
import url('/assets/css/watch_addon.css?v=stage39a3_20260627');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif}body{overflow-x:hidden}.app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;background:#050505;padding-bottom:150px}.top{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,#050505 82%,rgba(5,5,5,.88));padding:calc(12px + env(safe-area-inset-top)) 14px 8px}.search-row{display:flex;align-items:center;gap:9px}.search{flex:1;height:42px;border-radius:8px;background:#1b1b1b;color:#9b9b9b;display:flex;align-items:center;padding:0 13px;font-size:15px}.top-icon{width:42px;height:42px;border-radius:12px;background:#151515;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;flex:0 0 auto}.gift-dot,.nav-reward{position:absolute;background:#ff2f6d;color:#fff;border-radius:999px;font-size:12px;font-weight:900;padding:2px 7px}.gift-dot{top:-7px;right:-6px}.tabs,.subtabs{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}.tabs{gap:25px;padding:17px 2px 8px}.tab{color:#8a8a8a;font-size:19px;font-weight:800}.tab.active{color:#fff}.tab.vip{color:#d8b36a}.subtabs{gap:16px;padding:8px 0 10px}.subtab{color:#8b8b8b;font-size:15px;padding:8px 13px;border-radius:999px;flex:0 0 auto}.subtab.active{background:#222;color:#fff;font-weight:700}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 9px;padding:0 12px 22px}.card{min-width:0;text-decoration:none;color:inherit}.poster{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#1e1e1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.22),transparent 26%),linear-gradient(to bottom,rgba(255,255,255,.02),rgba(0,0,0,.45));z-index:1}.poster:after{content:attr(data-title);position:absolute;left:8px;right:8px;bottom:28px;z-index:2;color:rgba(255,255,255,.86);font-size:17px;font-weight:900;line-height:1.12;text-shadow:0 2px 8px rgba(0,0,0,.75)}.p1{background:linear-gradient(145deg,#4b1d1d,#130707 62%,#000)}.p2{background:linear-gradient(145deg,#7a3b21,#19100d 58%,#000)}.p3{background:linear-gradient(145deg,#4e3c92,#11162e 60%,#000)}.p4{background:linear-gradient(145deg,#37517a,#15191f 60%,#000)}.p5{background:linear-gradient(145deg,#8a3d66,#170d15 62%,#000)}.p6{background:linear-gradient(145deg,#856328,#17140b 60%,#000)}.p7{background:linear-gradient(145deg,#2d6247,#0b1712 62%,#000)}.p8{background:linear-gradient(145deg,#5a2d62,#130b17 62%,#000)}.p9{background:linear-gradient(145deg,#314d67,#0b1217 62%,#000)}.badge{position:absolute;top:0;right:0;z-index:3;background:#ff344e;color:#fff;font-size:12px;font-weight:800;padding:4px 6px;border-bottom-left-radius:6px}.badge.new{background:#5b6bff}.heat{position:absolute;right:7px;bottom:7px;z-index:3;color:#fff;font-size:13px;font-weight:700;text-shadow:0 2px 7px rgba(0,0,0,.9)}.title{margin-top:8px;color:#fff;font-size:15.5px;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tags{margin-top:4px;color:#777;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue{position:fixed;left:10px;right:10px;bottom:calc(68px + env(safe-area-inset-bottom));max-width:500px;margin:0 auto;z-index:80;display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;background:rgba(43,43,43,.94);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px)}.continue-cover{width:55px;height:55px;border-radius:6px;flex:0 0 auto;background:linear-gradient(145deg,#2d6247,#0b1712 62%,#000);position:relative;overflow:hidden}.continue-cover:after{content:"短劇";position:absolute;inset:auto 5px 6px 5px;font-size:13px;font-weight:900}.continue-info{flex:1;min-width:0}.continue-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue-ep{margin-top:3px;color:#aaa;font-size:13px}.continue-btn{border:0;border-radius:999px;background:#6b5f66;color:#fff;padding:10px 17px;font-size:14px;font-weight:700;flex:0 0 auto}.bottom-nav{position:fixed;left:0;right:0;bottom:0;max-width:520px;height:calc(64px + env(safe-area-inset-bottom));margin:0 auto;z-index:90;background:#050505;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}.nav{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#858585;font-size:12px;gap:3px;position:relative}.nav.active{color:#fff}.nav-icon{font-size:22px;line-height:1}.nav-reward{top:3px;transform:translateY(-8px)}.detail,.watch{max-width:520px;margin:0 auto;min-height:100vh;background:#050505;padding:16px 14px 100px}.back{display:inline-flex;text-decoration:none;color:#fff;background:#1b1b1b;border-radius:12px;padding:10px 14px;margin-bottom:14px}.detail-hero{display:flex;gap:14px}.detail-poster{width:130px;flex:0 0 auto}.detail-info h1{font-size:24px;margin:0 0 8px}.muted{color:#aaa}.primary-btn{display:block;text-align:center;text-decoration:none;color:#fff;background:#6d5cff;border-radius:999px;padding:14px;font-weight:800;margin:18px 0}.episodes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.ep{background:#1d1d1d;color:#fff;text-decoration:none;text-align:center;border-radius:10px;padding:10px}.player{height:265px;border:1px solid rgba(255,255,255,.12);background:#151515;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#777;margin:20px 0}.watch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.watch-actions a{background:#242424;color:#fff;text-decoration:none;text-align:center;border-radius:999px;padding:14px;font-weight:800}.watch-actions a.next{background:#6d5cff}@media(min-width:800px){.app{border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}
.poster.has-cover::before{background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.55));z-index:1}.poster.has-cover::after{display:none}.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}.poster.has-cover .badge,.poster.has-cover .heat{z-index:3}.detail-poster.has-cover .poster-img{object-fit:cover}
.hint{color:#999;font-size:13px;margin-top:6px;line-height:1.5}
/* 封面圖片顯示修正：避免圖片只顯示中間局部 */
.poster img,
.detail-poster img,
.cover-card img,
.cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 如果封面圖不是直式海報，至少優先顯示上半部 */
.poster.has-cover,
.poster:has(img) {
  background-position: center top;
}

/* =========================================================
   前台首頁 / 詳情頁 UI 收尾 v1
   目標：讓首頁、詳情頁更接近短劇 App 視覺
   ========================================================= */

/* 首頁頂部更有 App 霧面感 */
.top {
  border-bottom: 1px solid rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}

.search {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.top-icon {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* 分類目前選中狀態增加底線，像 App tab */
.tab.active {
  position: relative;
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 3px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: #fff;
}

/* 卡片加一點觸控回饋 */
.card {
  transition: transform .16s ease, opacity .16s ease;
}

.card:active {
  transform: scale(.97);
  opacity: .86;
}

.poster {
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
}

.poster.has-cover::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.58) 100%);
}

.poster-img {
  object-position: center top;
}

.badge {
  box-shadow: 0 4px 10px rgba(255,52,78,.28);
}

/* 詳情頁 App 化 */
.detail {
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
}

.detail .back {
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 20;
  width: fit-content;
  background: rgba(28,28,28,.92);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}

.detail-hero {
  margin-top: 4px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.detail-poster {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.36);
}

.detail-info h1 {
  font-size: 23px;
  line-height: 1.15;
  margin-bottom: 9px;
}

.detail-info p {
  margin: 10px 0 0;
  color: #c7c7c7;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muted {
  font-size: 13px;
  line-height: 1.5;
}

.primary-btn {
  box-shadow: 0 8px 20px rgba(109,92,255,.28);
}

.detail h2 {
  font-size: 18px;
  margin: 20px 0 12px;
}

.episodes {
  grid-template-columns: repeat(6, 1fr);
}

.ep {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171717;
  border: 1px solid rgba(255,255,255,.06);
  font-weight: 800;
  transition: transform .16s ease, background .16s ease;
}

.ep:active {
  transform: scale(.95);
  background: #2a2a2a;
}

/* 詳情頁手機小寬度優化 */
@media (max-width: 420px) {
  .detail-hero {
    gap: 12px;
  }

  .detail-poster {
    width: 118px;
  }

  .detail-info h1 {
    font-size: 21px;
  }

  .episodes {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* =========================================================
   階段 10：觀看紀錄 v1（localStorage）
   ========================================================= */
.is-hidden {
  display: none !important;
}

.continue {
  cursor: pointer;
}

.continue-cover.has-image {
  background-size: cover;
  background-position: center top;
}

.continue-cover.has-image::after {
  display: none;
}

.detail-progress {
  margin: -8px 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(109,92,255,.14);
  border: 1px solid rgba(109,92,255,.25);
  color: #d8d4ff;
  font-size: 14px;
  font-weight: 700;
}

.primary-btn.is-continue {
  background: linear-gradient(135deg, #7a6cff, #5b4bff);
}

.ep.watched {
  color: #fff;
  background: #171717;
  border-color: rgba(255,255,255,.06);
}

.ep.last-watched {
  color: #fff;
  background: rgba(109,92,255,.24);
  border-color: rgba(109,92,255,.55);
  box-shadow: 0 0 0 1px rgba(109,92,255,.18), 0 8px 18px rgba(109,92,255,.16);
}

.watch-progress-hint {
  margin-top: 10px;
  color: #b9b4ff;
  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   階段 11：收藏 / 追劇 v1（localStorage）
   ========================================================= */
.detail-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
  margin: 16px 0;
}

.detail-action-row .primary-btn {
  margin: 0;
}

.favorite-btn {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 0 14px;
  min-width: 118px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.favorite-btn.is-favorited {
  background: rgba(255, 196, 71, .18);
  border-color: rgba(255, 196, 71, .46);
  color: #ffd77a;
}

.favorite-section {
  padding: 0 14px 108px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 12px;
}

.section-kicker {
  color: #9f98ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.section-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.section-more {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.06);
  color: #aaa;
  font-size: 12px;
  font-weight: 800;
}

.favorite-list {
  display: grid;
  gap: 10px;
}

.favorite-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  color: #fff;
}

.favorite-cover {
  width: 54px;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(145deg, #5147d9, #ff4670);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}

.favorite-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.favorite-meta {
  margin-top: 5px;
  color: #aaa;
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .detail-action-row {
    grid-template-columns: 1fr;
  }

  .favorite-btn {
    min-height: 46px;
  }
}

/* =========================================================
   階段 11：追劇按鈕樣式修正 v1b
   目的：避免瀏覽器預設白色按鈕，統一成 App 風格
   ========================================================= */
.detail-action-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin: 16px 0 10px !important;
}

.detail-action-row .primary-btn {
  margin: 0 !important;
}

.favorite-btn,
button.favorite-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  padding: 13px 16px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 10px 22px rgba(0,0,0,.22) !important;
}

.favorite-btn.is-favorited,
button.favorite-btn.is-favorited {
  background: linear-gradient(135deg, rgba(255, 202, 84, .24), rgba(255, 133, 64, .14)) !important;
  border-color: rgba(255, 202, 84, .48) !important;
  color: #ffd77a !important;
}

.favorite-btn:active {
  transform: scale(.985);
}


/* =========================================================
   階段 11：我的追劇頁 v1
   ========================================================= */
.nav {
  text-decoration: none;
}

.follow-page {
  padding-bottom: 96px;
}

.follow-top {
  padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
}

.follow-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.follow-title-row h1 {
  margin: 2px 0 0;
  font-size: 28px;
  line-height: 1.12;
}

.follow-subtitle {
  margin: 12px 0 0;
  color: #9d9d9d;
  font-size: 13px;
  line-height: 1.55;
}

.follow-empty {
  margin: 24px 14px 0;
  padding: 28px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.follow-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(109,92,255,.16);
  color: #d9d4ff;
  font-size: 30px;
  font-weight: 900;
}

.follow-empty-title {
  font-size: 18px;
  font-weight: 900;
}

.follow-empty-text {
  margin-top: 8px;
  color: #aaa;
  font-size: 13px;
  line-height: 1.55;
}

.follow-list {
  display: grid;
  gap: 12px;
  padding: 10px 14px 20px;
}

.follow-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

.follow-cover {
  width: 82px;
  aspect-ratio: 2/3;
  border-radius: 12px;
  background: linear-gradient(145deg, #5147d9, #ff4670);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
}

.follow-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.follow-card-title {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.follow-card-meta {
  margin-top: 4px;
  color: #999;
  font-size: 12px;
  line-height: 1.45;
}

.follow-card-progress {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(109,92,255,.13);
  color: #d8d4ff;
  font-size: 12px;
  font-weight: 800;
}

.follow-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.follow-action {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.follow-action.primary {
  background: linear-gradient(135deg, #7a6cff, #5b4bff);
  border-color: rgba(255,255,255,.08);
}

.follow-action.danger {
  color: #ffb4c4;
}

@media (max-width: 390px) {
  .follow-card {
    grid-template-columns: 72px 1fr;
  }

  .follow-card-actions {
    gap: 6px;
  }

  .follow-action {
    padding: 8px 9px;
  }
}

/* Stage 12 member system v1 */
.auth-page,.member-page{padding:16px 14px 110px}.auth-card,.member-card,.guest-card,.member-menu,.member-note{border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.28)}.auth-card{padding:22px 16px;margin-top:18px}.auth-card h1,.member-hero h1{margin:4px 0 8px;font-size:30px;line-height:1.1}.auth-subtitle,.guest-text,.member-note-text{color:#aaa;line-height:1.55;font-size:14px}.auth-form{display:grid;gap:13px;margin-top:18px}.auth-form label{display:grid;gap:7px;color:#ddd;font-size:14px;font-weight:800}.auth-form input{width:100%;border:1px solid rgba(255,255,255,.12);background:#151515;color:#fff;border-radius:13px;padding:14px 13px;font-size:16px;outline:none}.auth-form input:focus{border-color:#7a63ff;box-shadow:0 0 0 3px rgba(122,99,255,.18)}.auth-submit{border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:15px;font-size:16px;font-weight:900;box-shadow:0 12px 28px rgba(93,73,255,.28)}.form-error{margin-top:14px;border:1px solid rgba(255,73,110,.38);background:rgba(255,73,110,.13);color:#ffd0d9;border-radius:13px;padding:11px 12px;font-weight:800}.auth-switch{text-align:center;color:#aaa;margin-top:16px}.auth-switch a{color:#fff;font-weight:900}.member-hero{padding:18px 14px 6px}.member-card{display:flex;gap:13px;padding:14px;margin-top:16px}.member-avatar{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#7b61ff,#ff3f9b);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;flex:0 0 auto}.member-info{min-width:0}.member-name{font-size:20px;font-weight:900}.member-email,.member-meta{color:#aaa;font-size:13px;margin-top:4px;overflow:hidden;text-overflow:ellipsis}.guest-card{padding:16px;margin-top:16px}.guest-title{font-size:22px;font-weight:900}.guest-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.primary-btn.compact{margin:0;padding:13px}.secondary-btn{display:block;text-align:center;text-decoration:none;color:#fff;background:#232323;border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:13px;font-weight:900}.member-menu{margin:14px;padding:4px}.member-menu a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;padding:15px 13px;border-bottom:1px solid rgba(255,255,255,.07);font-weight:850}.member-menu a:last-child{border-bottom:0}.member-menu em{font-style:normal;color:#777;font-size:24px;line-height:1}.member-menu .danger-link{color:#ffb4c2}.member-note{margin:14px;padding:14px}.member-note-title{font-weight:900;margin-bottom:5px;color:#b7a8ff}.nav[href="/member.php"]{text-decoration:none}.section-kicker{letter-spacing:.12em;color:#a995ff;font-size:12px;font-weight:900}


/* Stage 13.5 PWA install guide */
.top-install{display:flex;align-items:center;justify-content:center;height:36px;padding:0 10px;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#ff4fa3);color:#fff;text-decoration:none;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 10px 24px rgba(123,97,255,.22);flex:0 0 auto}.install-page{padding:16px 14px 120px}.install-hero{padding:calc(12px + env(safe-area-inset-top)) 0 8px;text-align:center}.install-hero .back{float:left;margin-bottom:10px}.install-app-icon{width:86px;height:86px;margin:16px auto 14px;border-radius:24px;overflow:hidden;box-shadow:0 18px 42px rgba(123,97,255,.28),0 0 0 1px rgba(255,255,255,.12)}.install-app-icon img{width:100%;height:100%;display:block}.install-hero h1{clear:both;margin:8px 0 8px;font-size:30px;line-height:1.1}.install-hero p{margin:0 auto;color:#aaa;line-height:1.55;max-width:390px}.install-card{margin:14px 0;padding:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.26)}.install-card h2{font-size:22px;margin:8px 0 8px}.install-card p{color:#aaa;line-height:1.55;margin:0}.install-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(123,97,255,.18);border:1px solid rgba(166,144,255,.25);color:#cdbfff;font-size:12px;font-weight:900;letter-spacing:.06em}.install-ready{background:linear-gradient(145deg,rgba(88,255,164,.12),rgba(255,255,255,.025))}.install-primary{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;padding:15px;margin-top:14px;font-size:16px;font-weight:950;box-shadow:0 14px 30px rgba(93,73,255,.28)}.install-primary:disabled{opacity:.58;box-shadow:none}.install-primary.is-ready{background:linear-gradient(135deg,#7b61ff,#ff4fa3)}.install-hint{border-radius:14px;background:rgba(255,255,255,.055);padding:11px 12px;margin-top:10px!important}.install-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}.install-steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;color:#eee;line-height:1.5}.install-steps span{width:34px;height:34px;border-radius:12px;background:#242424;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:950}.install-steps.compact li{font-size:14px}.install-note{margin-top:12px;border:1px solid rgba(255,204,92,.22);background:rgba(255,204,92,.1);color:#ffe5a5;border-radius:14px;padding:11px 12px;line-height:1.5;font-size:14px}.install-note.is-emphasis{box-shadow:0 0 0 3px rgba(255,204,92,.14)}.install-qr{background:#fff;border-radius:18px;padding:14px;width:min(260px,100%);margin:14px auto 8px}.install-qr img{display:block;width:100%;height:auto}.install-url{text-align:center;color:#aaa;font-size:13px}.install-feature-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.install-feature-grid div{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:15px;padding:12px}.install-feature-grid strong{display:block;font-size:16px}.install-feature-grid span{display:block;color:#aaa;margin-top:4px;font-size:13px}.member-menu a[href="/install.php"] span:before{content:"📲 ";}.is-hidden{display:none!important}@media(max-width:390px){.top-install{padding:0 8px;font-size:11px}.search-row{gap:7px}.install-hero h1{font-size:27px}}


/* Stage 13.5 install header alignment fix */
.install-page{padding-top:12px;padding-bottom:calc(138px + env(safe-area-inset-bottom));}
.install-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 12px;}
.install-hero .back{float:none;align-self:flex-start;margin:0 0 10px 0;}
.install-app-icon{width:82px;height:82px;margin:0 auto 12px;border-radius:24px;flex:0 0 auto;}
.install-hero .section-kicker{margin-top:2px;}
.install-hero h1{clear:none;margin:10px 0 8px;font-size:30px;line-height:1.12;}
.install-hero p{max-width:380px;}
@media(max-width:430px){.install-page{padding-top:10px}.install-hero{padding-top:8px}.install-hero .back{margin-bottom:8px}.install-app-icon{width:78px;height:78px;border-radius:22px;margin-bottom:10px}.install-hero h1{font-size:29px}}
@media(max-width:380px){.install-hero h1{font-size:27px}.install-app-icon{width:74px;height:74px}}


/* Stage 13.5 install safe-area touch fix */
.install-page{
  padding-top:0;
  padding-bottom:calc(150px + env(safe-area-inset-bottom));
}
.install-hero{
  padding-top:calc(24px + env(safe-area-inset-top));
}
.install-hero .back{
  min-height:46px;
  padding:12px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:5;
  touch-action:manipulation;
}
@supports (padding-top: env(safe-area-inset-top)){
  body:has(.install-page){
    padding-top:0;
  }
}
@media(max-width:430px){
  .install-hero{
    padding-top:calc(22px + env(safe-area-inset-top));
  }
  .install-hero .back{
    margin-bottom:14px;
  }
}


/* Stage 14 ads / rewards v1 */
.top-icon[href]{color:#fff;text-decoration:none}.bottom-nav .nav[href="/reward.php"]{text-decoration:none}.reward-page{padding:18px 14px calc(122px + env(safe-area-inset-bottom))}.reward-hero{padding:10px 0 8px}.reward-hero h1{font-size:34px;line-height:1.08;margin:6px 0 8px}.reward-hero p{color:#aaa;line-height:1.55;margin:0}.reward-card,.reward-result{border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border-radius:22px;box-shadow:0 18px 45px rgba(0,0,0,.28)}.reward-main-card{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:16px;margin-top:14px}.reward-gift{width:74px;height:74px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:36px;box-shadow:0 14px 32px rgba(123,97,255,.28)}.reward-label{display:inline-flex;height:27px;align-items:center;padding:0 10px;border-radius:999px;background:rgba(255,64,128,.16);border:1px solid rgba(255,64,128,.25);color:#ffb8cc;font-size:12px;font-weight:950}.reward-main-content h2{font-size:24px;margin:9px 0 6px}.reward-main-content p,.reward-ad-note p{color:#aaa;line-height:1.55;margin:0}.reward-primary{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:14px 16px;margin-top:13px;font-size:16px;font-weight:950;box-shadow:0 14px 30px rgba(93,73,255,.28)}.reward-primary:disabled{opacity:.62;box-shadow:none}.reward-result{margin-top:12px;padding:14px;text-align:center;border-color:rgba(123,97,255,.28);background:linear-gradient(145deg,rgba(123,97,255,.14),rgba(255,255,255,.025))}.reward-countdown{font-size:28px;font-weight:950;color:#fff}.reward-message{margin-top:5px;color:#bbb;line-height:1.5}.reward-task-card,.reward-ad-note{padding:16px;margin-top:14px}.reward-section-title{font-size:18px;font-weight:950;margin-bottom:12px}.reward-task-list{display:grid;gap:10px}.reward-task{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff}.reward-task span{font-size:26px}.reward-task strong{display:block;font-size:16px}.reward-task em{display:block;font-style:normal;color:#999;font-size:13px;margin-top:3px}.reward-task.disabled{opacity:.72}.reward-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.reward-status-grid div{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);border-radius:15px;padding:12px}.reward-status-grid strong{display:block}.reward-status-grid span{display:block;color:#b8aaff;margin-top:4px;font-weight:900}.reward-ad-note code{color:#d8d0ff;background:rgba(123,97,255,.12);border-radius:8px;padding:2px 5px}.watch-player-card{position:relative;overflow:hidden}.watch-player-card.has-preroll-ad .watch-video{filter:brightness(.38);pointer-events:none}.watch-player-card.has-preroll-ad .watch-video.is-ad-unlocked{filter:none;pointer-events:auto}.preroll-ad{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:radial-gradient(circle at center,rgba(123,97,255,.2),rgba(0,0,0,.82) 62%);backdrop-filter:blur(3px)}.preroll-badge{height:28px;padding:0 10px;border-radius:999px;background:rgba(255,204,92,.14);border:1px solid rgba(255,204,92,.28);color:#ffe0a3;display:flex;align-items:center;font-weight:950;font-size:12px;letter-spacing:.12em}.preroll-title{margin-top:10px;font-size:22px;font-weight:950}.preroll-text{max-width:320px;margin-top:7px;color:#bbb;line-height:1.55;font-size:14px}.preroll-countdown{margin-top:12px;font-size:30px;font-weight:950;color:#fff}.preroll-button{margin-top:12px;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:12px 24px;font-size:15px;font-weight:950;min-width:160px}.preroll-button:disabled{opacity:.6;background:#333}@media(max-width:390px){.reward-main-card{grid-template-columns:1fr}.reward-gift{width:64px;height:64px;border-radius:20px}.reward-status-grid{grid-template-columns:1fr}.preroll-title{font-size:20px}.preroll-text{font-size:13px}}


/* Stage 14.5 entrance cleanup */
a.top-icon{color:#fff;text-decoration:none}
.home-entry-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:2px 12px 16px;margin-top:-2px}
.home-entry-panel a{min-width:0;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border-radius:16px;padding:12px 9px;display:grid;gap:4px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.home-entry-panel span{font-size:22px;line-height:1}
.home-entry-panel strong{font-size:13px;font-weight:900;line-height:1.1}
.home-entry-panel em{font-style:normal;color:#aaa;font-size:11px;line-height:1.25}
.reward-page .reward-hero p,.install-hint,.follow-subtitle{line-height:1.6}
.member-menu a span{display:flex;align-items:center;gap:6px}
@media (max-width:360px){.home-entry-panel{gap:7px}.home-entry-panel a{padding:10px 7px}.home-entry-panel strong{font-size:12px}.home-entry-panel em{font-size:10px}}


/* 14.5-3 福利入口暫停開放提示 */
a[data-reward-soon]{cursor:pointer}.wb-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:22px}.wb-modal.is-hidden{display:none}.wb-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.wb-modal-card{position:relative;width:min(420px,100%);border-radius:24px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(32,32,32,.98),rgba(10,10,10,.98));box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 45px rgba(123,97,255,.16);padding:22px;text-align:center}.wb-modal-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:36px;box-shadow:0 14px 32px rgba(123,97,255,.32)}.wb-modal-title{font-size:24px;font-weight:950;line-height:1.2}.wb-modal-text{color:#bbb;line-height:1.55;margin-top:10px}.wb-modal-list{display:grid;gap:8px;margin:16px 0;text-align:left}.wb-modal-list div{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);border-radius:14px;padding:11px 12px;color:#eee;font-weight:750}.wb-modal-button{width:100%;border:0;border-radius:999px;background:linear-gradient(135deg,#7b61ff,#5d49ff);color:#fff;padding:14px 18px;font-size:16px;font-weight:950}.reward-coming-card{padding:22px;text-align:center}.reward-coming-icon{width:78px;height:78px;border-radius:24px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7b61ff,#ff3f8e);font-size:38px;box-shadow:0 14px 32px rgba(123,97,255,.3)}.reward-coming-card h2{font-size:26px;margin:10px 0 8px}.reward-coming-card p{color:#aaa;line-height:1.6;margin:0 auto;max-width:360px}.reward-coming-actions{display:grid;gap:10px;margin-top:16px}.reward-coming-actions .reward-primary{margin:0}.reward-coming-actions .secondary-btn{background:#222}@media(max-width:390px){.wb-modal{padding:16px}.wb-modal-card{padding:18px}.wb-modal-title{font-size:22px}.reward-coming-card h2{font-size:24px}}


/* Home UX v1: PWA installed state + pull refresh */
body.is-pwa-installed .top-install,
body.is-pwa-installed [data-install-prompt-link]{display:none!important}
.home-pull-refresh{max-width:496px;margin:0 12px 10px;padding:10px 12px;border:1px solid rgba(123,97,255,.24);background:rgba(123,97,255,.12);color:#d9d2ff;border-radius:14px;text-align:center;font-size:13px;font-weight:800;transition:opacity .18s ease,transform .18s ease}.home-pull-refresh.is-hidden{display:none!important}.home-pull-refresh.is-ready{background:rgba(88,255,164,.12);border-color:rgba(88,255,164,.28);color:#b8ffd5}.home-pull-refresh.is-loading{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);color:#fff}.home-pull-refresh.is-error{background:rgba(255,72,104,.14);border-color:rgba(255,72,104,.28);color:#ffd0d9}.grid.is-refreshing{opacity:.62;pointer-events:none;transition:opacity .16s ease}


/* =========================================================
   Stage 34-A-1: 首頁分區短劇牆 + 底部全部短劇
   ========================================================= */
.home-wall{padding:0 0 26px}.home-wall.is-refreshing{opacity:.62;pointer-events:none;transition:opacity .16s ease}.home-drama-section{padding:0 0 22px}.home-drama-section+.home-drama-section{margin-top:2px}.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 14px 10px}.home-section-head h2{margin:3px 0 0;font-size:21px;line-height:1.16;font-weight:950}.home-section-head p{margin:4px 0 0;color:#888;font-size:12.5px;line-height:1.35}.home-section-grid.grid{padding-bottom:4px}.home-section-row{display:grid;grid-auto-flow:column;grid-auto-columns:31.5%;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 12px 4px}.home-section-row::-webkit-scrollbar{display:none}.home-section-row .card{scroll-snap-align:start}.home-section-row .title{font-size:14.5px}.home-section-row .tags{font-size:12px}.home-drama-section-hot{padding-top:0}.home-drama-section-hot .home-section-head{padding-top:2px}.home-drama-section-latest,.home-drama-section-love,.home-drama-section-all{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));padding-top:12px;border-top:1px solid rgba(255,255,255,.035)}.home-drama-section-all{padding-bottom:32px}.home-drama-section-all .home-section-grid.grid{padding-bottom:18px}@media(max-width:390px){.home-section-row{grid-auto-columns:32.5%;gap:8px}.home-section-head h2{font-size:20px}.home-section-head p{font-size:12px}}


/* Stage 32-B: 動態角標樣式 */
.badge.hot{background:#ff344e}
.badge.ai{background:#ff3f8e}
.badge.type{background:#7b61ff}


/* =========================================================
   Stage 35-B：前台分類頁 v1
   ========================================================= */
.tabs a.tab,
.subtabs a.subtab {
  text-decoration: none;
  color: inherit;
}

.home-section-head .section-more {
  flex: 0 0 auto;
  text-decoration: none;
  color: #d8d4ff;
  border-color: rgba(159,152,255,.26);
  background: rgba(109,92,255,.12);
}

.category-page {
  padding-bottom: 102px;
}

.category-top {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.back-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.category-top h1 {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 1.14;
  font-weight: 950;
}

.category-top p {
  margin: 5px 0 0;
  color: #999;
  font-size: 13px;
  line-height: 1.35;
}

.category-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 14px 16px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tabs a {
  text-decoration: none;
  color: #aaa;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

.category-tabs a.active {
  color: #fff;
  background: rgba(109,92,255,.22);
  border-color: rgba(159,152,255,.35);
  box-shadow: 0 8px 18px rgba(109,92,255,.12);
}

.category-grid.grid {
  padding-bottom: 24px;
}

.category-empty {
  margin: 20px 14px;
  padding: 24px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #aaa;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
}

.category-empty a {
  display: inline-flex;
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(109,92,255,.24);
  font-weight: 900;
}

/* Stage 35-B-1: top category horizontal scroll + search restore */
.search-form{border:0;margin:0;min-width:0;gap:8px;overflow:hidden}.search-icon{flex:0 0 auto;line-height:1}.search-input{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:#fff;min-width:0;width:100%;height:100%;font:inherit;font-size:15px}.search-input::placeholder{color:#9b9b9b;opacity:1}.search-submit{border:0;border-radius:999px;background:#2a2a2a;color:#fff;padding:8px 13px;font-weight:900;white-space:nowrap}.search-panel{padding:0 14px 14px}.search-form-large{height:48px;border-radius:14px;background:#151515;border:1px solid rgba(255,255,255,.1)}
.tabs,.subtabs,.category-tabs,.home-section-row{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x;align-items:center;max-width:100%}.tabs,.subtabs{flex-wrap:nowrap;min-height:0}.tab,.subtab,.category-tabs a{flex:0 0 auto}.top{overflow:hidden}.search-row{min-width:0}.search-row .search{min-width:0}


/* Stage 35-D-1: robust landscape guard for iPhone/PWA */
.orientation-guard {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: #050505;
  color: #fff;
  text-align: center;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
.orientation-guard__box {
  width: min(82vw, 420px);
  padding: 26px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.orientation-guard__icon {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 12px;
}
.orientation-guard__title {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 950;
  letter-spacing: .02em;
}
.orientation-guard__hint {
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}
html.is-landscape-locked,
html.is-landscape-locked body {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
html.is-landscape-locked .orientation-guard {
  display: flex !important;
}
@media (orientation: landscape) {
  html:not(.orientation-js-ready) .orientation-guard {
    display: flex !important;
  }
}


/* =========================================================
   Stage 36-A：推薦頁 v1
   ========================================================= */
.recommend-page{padding-bottom:112px}.recommend-top{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:max(14px,env(safe-area-inset-top)) 14px 14px;position:sticky;top:0;z-index:20;background:rgba(5,5,5,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}.recommend-top h1{margin:2px 0 0;font-size:24px;line-height:1.14;font-weight:950}.recommend-top p{margin:5px 0 0;color:#aaa;font-size:13px;line-height:1.45}.recommend-tabs{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;padding:12px 14px 10px;scrollbar-width:none}.recommend-tabs::-webkit-scrollbar{display:none}.recommend-tabs a{flex:0 0 auto;text-decoration:none;color:#e8e8e8;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:9px 13px;font-size:13px;font-weight:850}.recommend-tabs a:first-child{background:rgba(123,97,255,.18);border-color:rgba(123,97,255,.26);color:#fff}.recommend-note{margin:0 14px 16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(123,97,255,.16),rgba(255,63,142,.08));border-radius:18px;padding:13px 14px;display:grid;gap:4px}.recommend-note strong{font-size:15px}.recommend-note span{color:#aaa;font-size:12.5px;line-height:1.45}.recommend-wall{padding-top:2px}.recommend-drama-section-guess .section-kicker{color:#ff77b1}.recommend-drama-section-ai .section-kicker{color:#ff77b1}@media(max-width:390px){.recommend-top h1{font-size:23px}.recommend-tabs{gap:8px;padding-left:12px;padding-right:12px}.recommend-tabs a{padding:8px 12px}}


/* =========================================================
   Stage 37-B：Android PWA 底部白條修正 v1
   目標：讓 Android 安裝成 App 後，系統手勢列背景盡量維持黑色，
   並讓底部導航預留手勢操作區，避免白底與導航重疊。
   ========================================================= */
html {
  background: #000 !important;
  color-scheme: dark;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: #000 !important;
}
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(24px + env(safe-area-inset-bottom));
  background: #000;
  pointer-events: none;
  z-index: 88;
}
.app,
.detail,
.watch,
.auth-page,
.member-page,
.follow-page,
.reward-page,
.recommend-page,
.category-page,
.search-page {
  background: #050505;
}
.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(168px + max(env(safe-area-inset-bottom), 14px));
}
.bottom-nav {
  background: #050505 !important;
  height: calc(68px + max(env(safe-area-inset-bottom), 14px));
  padding-bottom: max(env(safe-area-inset-bottom), 14px);
  box-shadow: 0 -10px 24px rgba(0,0,0,.55);
}
.continue {
  bottom: calc(76px + max(env(safe-area-inset-bottom), 14px));
}
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
}


/* =========================================================
   Stage 37-B-1：Android PWA 底部白條強化修正
   說明：Android 已安裝 PWA 的系統導覽列顏色主要由 manifest/theme-color
   與安裝時快取決定；CSS 這裡把所有可控區域補滿黑底。
   ========================================================= */
:root {
  --android-nav-bg: #000000;
  background: #000000 !important;
  color-scheme: only dark;
}
html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  background-color: #000000 !important;
  background-image: none !important;
}
body {
  margin: 0;
  overflow-x: hidden;
}
@supports (min-height: 100svh) {
  body { min-height: 100svh; }
}
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}
.bottom-nav::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(env(safe-area-inset-bottom), 24px);
  background: #000000;
  pointer-events: none;
  z-index: -1;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  html,
  body {
    background: #000000 !important;
  }
  body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: #000000;
    pointer-events: none;
    z-index: 1;
  }
  .bottom-nav { z-index: 90; }
  .continue { z-index: 91; }
}

/* stage37C: PWA no-zoom + iOS input focus zoom fix */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  touch-action: pan-x pan-y;
}
input,
textarea,
select,
button {
  font-size: 16px;
}
.search-input,
.search-form input,
.search-form-large input,
.auth-card input,
.member-page input,
.member-page textarea,
.member-page select,
.reward-page input,
.reward-page textarea,
.reward-page select {
  font-size: 16px !important;
}
.search {
  font-size: 16px;
}


/* =========================================================
   Stage 37-C-1：首頁橫向短劇分區觸控修正
   只把 pan-x 鎖定留給頂部分類列；中間短劇橫向列可左右滑，
   也允許手勢從卡片開始時交回整頁上下滑。
   ========================================================= */
.tabs,
.subtabs,
.category-tabs,
.recommend-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.home-section-row {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y !important;
}
.home-section-row .card,
.home-section-row .poster,
.home-section-row .poster-img,
.home-section-row .title,
.home-section-row .tags {
  touch-action: pan-x pan-y !important;
}


/* =========================================================
   Stage 37-F-2：我的頁底部版面高度修正
   iPhone PWA 在短內容頁剛載入時可能先抓錯 visual viewport，
   造成底部導航被往上頂；用 JS 注入 --wb-vh，並讓我的頁用穩定高度。
   ========================================================= */
html {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
body {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
.member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  padding-bottom: calc(112px + max(env(safe-area-inset-bottom), 14px));
  overflow-x: hidden;
}
.member-page + .bottom-nav,
.bottom-nav {
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  will-change: transform;
}
@supports (height: 100svh) {
  .member-page.app { min-height: 100svh; }
}
html.wb-viewport-ready .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}


/* =========================================================
   Stage 37-F-4：我的頁底部導航固定修復
   撤回 37-F-3 的 sticky/文流做法，底部導航維持 fixed。
   只針對「我的」短內容頁補足內容高度與底部安全區，並配合 JS
   多次重算 viewport，避免 iPhone PWA 初始進頁時把 fixed nav 吸上來。
   ========================================================= */
body.member-body {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  background: #000 !important;
  overflow-x: hidden;
}
body.member-body .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
  padding-bottom: calc(170px + max(env(safe-area-inset-bottom), 18px)) !important;
  overflow-x: hidden;
}
body.member-body .member-page.app::after {
  content: "";
  display: block;
  height: calc(28px + max(env(safe-area-inset-bottom), 14px));
}
body.member-body .bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  will-change: transform;
  z-index: 90;
}
body.member-body .bottom-nav::after {
  position: fixed;
  z-index: -1;
}
html.wb-member-page-ready body.member-body .member-page.app {
  min-height: calc(var(--wb-vh, 1vh) * 100);
}
html.wb-member-page-ready body.member-body .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
}
@supports (height: 100dvh) {
  body.member-body .member-page.app {
    min-height: 100dvh;
  }
}
@supports (height: 100svh) {
  body.member-body .member-page.app {
    min-height: 100svh;
  }
}


/* =========================================================
   Stage 37-F-5：我的頁版面重新校正
   內容下移，底部導航仍維持 fixed；在 iPhone PWA 視窗初始高度
   尚未穩定時，用 JS 計算的 --wb-vv-bottom-gap 微調底部位置。
   ========================================================= */
body.member-body .member-page.app {
  padding-top: calc(34px + env(safe-area-inset-top)) !important;
  min-height: calc(var(--wb-vh, 1vh) * 100 + 1px) !important;
  padding-bottom: calc(190px + max(env(safe-area-inset-bottom), 18px)) !important;
}
body.member-body .member-hero {
  padding-top: 10px !important;
}
body.member-body .member-hero h1 {
  margin-top: 6px !important;
  margin-bottom: 18px !important;
}
body.member-body .member-card {
  margin-top: 18px !important;
}
body.member-body .bottom-nav {
  position: fixed !important;
  bottom: calc(-1 * var(--wb-vv-bottom-gap, 0px)) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
}
html.wb-member-page-ready body.member-body .bottom-nav {
  bottom: calc(-1 * var(--wb-vv-bottom-gap, 0px)) !important;
}
@supports (height: 100dvh) {
  body.member-body .member-page.app {
    min-height: calc(100dvh + 1px) !important;
  }
}


/* =========================================================
   Stage 37-F-6：我的頁下拉 overscroll 修正
   保留 37-F-5 的初始位置校正，但禁止「我的」短內容頁
   在 iPhone PWA 被橡皮筋下拉時把 fixed 底部導航一起帶動。
   ========================================================= */
body.member-body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: auto;
}
body.member-body .member-page.app {
  overscroll-behavior-y: none;
}
body.member-body .bottom-nav,
html.wb-member-page-ready body.member-body .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
}
body.member-body .bottom-nav::after {
  bottom: 0 !important;
}

/* stage37D: follow requires member login */
.wb-modal-actions{display:grid;gap:10px;margin-top:16px}.wb-modal-actions .wb-modal-button{display:block;text-decoration:none}.wb-modal-secondary,.wb-modal-ghost{display:block;width:100%;border-radius:999px;padding:13px 18px;font-size:15px;font-weight:900;text-align:center;text-decoration:none}.wb-modal-secondary{color:#fff;background:#232323;border:1px solid rgba(255,255,255,.12)}.wb-modal-ghost{color:#aaa;background:transparent;border:0}.follow-login-card .primary-btn{margin:16px 0 10px}.follow-login-card .secondary-btn{margin:0}


/* stage37E: member browse history */
.member-browse-history {
  margin: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.member-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.member-section-head h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.1;
}
.member-section-desc {
  margin: 10px 0 12px;
  color: #aaa;
  font-size: 13.5px;
  line-height: 1.55;
}
.browse-history-empty {
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #aaa;
  border-radius: 15px;
  padding: 15px;
  line-height: 1.55;
  font-size: 14px;
}
.browse-history-list {
  display: grid;
  gap: 10px;
}
.browse-history-card {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 11px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  border-radius: 16px;
  padding: 9px;
}
.browse-history-cover {
  width: 62px;
  height: 82px;
  border-radius: 11px;
  background: linear-gradient(145deg,#4e3c92,#11162e 60%,#000);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  overflow: hidden;
}
.browse-history-body { min-width: 0; }
.browse-history-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}
.browse-history-meta {
  margin-top: 6px;
  color: #aaa;
  font-size: 13px;
}
.browse-history-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.browse-history-action {
  text-decoration: none;
  color: #fff;
  background: #242424;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}
.browse-history-action.primary {
  background: linear-gradient(135deg,#7b61ff,#ff4fa3);
  border-color: transparent;
}


/* Stage 37-G: 播放頁允許橫向觀看；其他頁仍維持直向提示 */
html.orientation-watch-allowed,
html.orientation-watch-allowed body {
  overflow: auto !important;
  overscroll-behavior: auto !important;
}
html.orientation-watch-allowed .orientation-guard {
  display: none !important;
}


/* Stage 39-A: swipe explore page */
body.swipe-body{background:#000;overscroll-behavior:none}.swipe-page{position:relative;width:100%;max-width:520px;height:100svh;min-height:100svh;margin:0 auto;background:#000;overflow:hidden;touch-action:pan-y}.swipe-video-wrap{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.swipe-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:2}.swipe-cover{position:absolute;inset:0;background:#080808 center/cover no-repeat;opacity:.28;filter:blur(18px) saturate(1.1);transform:scale(1.08);z-index:1}.swipe-video.is-ready+.swipe-cover{opacity:.16}.swipe-video-wrap:after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,.48),rgba(0,0,0,.02) 28%,rgba(0,0,0,.06) 54%,rgba(0,0,0,.78));pointer-events:none}.swipe-topbar{position:absolute;left:0;right:0;top:0;z-index:12;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 14px 10px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}.swipe-topbar a{width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:28px;backdrop-filter:blur(10px)}.swipe-topbar strong{font-size:18px;font-weight:950}.swipe-topbar span{margin-left:auto;color:rgba(255,255,255,.72);font-size:12px}.swipe-info{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:12;padding:0 16px 16px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85);pointer-events:none}.swipe-info h1{margin:6px 0 6px;font-size:24px;line-height:1.18;font-weight:950;letter-spacing:-.02em}.swipe-info p{margin:0;max-width:92%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgba(255,255,255,.82);font-size:14px;line-height:1.45}.swipe-meta,.swipe-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.swipe-meta span,.swipe-tags span{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);font-size:12px;font-weight:850;color:rgba(255,255,255,.88);backdrop-filter:blur(8px)}.swipe-tags{margin-top:9px}.swipe-actions{display:flex;gap:10px;margin-top:14px;pointer-events:auto}.swipe-action{border:0;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;padding:12px 18px;font-size:15px;font-weight:950;backdrop-filter:blur(12px)}.swipe-action.primary{background:linear-gradient(135deg,#7b61ff,#ff3f8e);border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(123,97,255,.28)}.swipe-action.is-followed{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.22)}.swipe-center-control{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);z-index:18;width:78px;height:78px;border:0;border-radius:999px;background:rgba(0,0,0,.46);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);transition:opacity .2s ease,transform .2s ease}.swipe-center-control.is-hidden{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.92)}.swipe-sound-toggle{position:absolute;right:16px;top:calc(72px + env(safe-area-inset-top));z-index:18;width:46px;height:46px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(0,0,0,.42);color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(0,0,0,.28)}.swipe-sound-toggle.is-on{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}.swipe-hint{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:14;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-size:12px;font-weight:850;opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}.swipe-hint.is-show{opacity:1;transform:translateX(-50%) translateY(-6px)}.swipe-empty{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:26px 18px 120px;color:#fff}.swipe-empty h1{font-size:28px;margin:10px 0 8px}.swipe-empty p{color:#aaa;line-height:1.6}.swipe-bottom-nav{background:linear-gradient(to top,#050505 74%,rgba(5,5,5,.78));border-top-color:rgba(255,255,255,.06)}@media(orientation:landscape){body.swipe-body .swipe-page{height:100vh;min-height:100vh}.swipe-sound-toggle{top:62px;right:calc(16px + env(safe-area-inset-right))}.swipe-info{bottom:18px;left:calc(12px + env(safe-area-inset-left));right:calc(78px + env(safe-area-inset-right));padding-bottom:0}.swipe-bottom-nav{display:none}.swipe-info h1{font-size:22px}.swipe-topbar{padding-top:12px}}


/* stage 39-A-2: swipe immersive mode and first-use hint */
body.swipe-immersive-body{background:#000;overflow:hidden;padding-bottom:0;}
body.swipe-immersive-body .bottom-nav,
body.swipe-immersive-body .swipe-bottom-nav{display:none!important;}
body.swipe-immersive-body .continue{display:none!important;}
body.swipe-immersive-body .swipe-page{height:100svh;min-height:100svh;padding-bottom:0;}
.swipe-onboarding{position:absolute;left:50%;top:50%;z-index:26;transform:translate(-50%,-50%) scale(.98);width:min(82%,320px);padding:20px 18px;border-radius:24px;background:rgba(0,0,0,.54);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 70px rgba(0,0,0,.42);backdrop-filter:blur(16px);text-align:center;color:#fff;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;}
.swipe-onboarding.is-show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.swipe-onboarding-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:999px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:950;}
.swipe-onboarding-title{font-size:17px;font-weight:950;line-height:1.35;}
.swipe-onboarding-subtitle{margin-top:7px;color:rgba(255,255,255,.76);font-size:13px;font-weight:800;}
@media(orientation:landscape){body.swipe-immersive-body .swipe-info{bottom:18px;}}


/* stage 39-A-3: swipe immersive layout tuning */
body.swipe-immersive-body{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
body.swipe-immersive-body .swipe-page{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  background:#000;
}
body.swipe-immersive-body .swipe-video-wrap{
  inset:0;
  align-items:stretch;
  justify-content:stretch;
}
body.swipe-immersive-body .swipe-video{
  object-fit:cover;
  object-position:center center;
}
body.swipe-immersive-body .swipe-cover{
  opacity:.34;
  filter:blur(24px) saturate(1.18) brightness(.82);
  transform:scale(1.16);
}
body.swipe-immersive-body .swipe-video.is-ready+.swipe-cover{
  opacity:.18;
}
body.swipe-immersive-body .swipe-video-wrap:after{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.20) 18%, rgba(0,0,0,0) 42%),
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.30) 58%, rgba(0,0,0,0) 78%);
}
body.swipe-immersive-body .swipe-topbar{
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
}
body.swipe-immersive-body .swipe-topbar a{
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(12px);
}
body.swipe-immersive-body .swipe-topbar span{
  color:rgba(255,255,255,.42);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}
body.swipe-immersive-body .swipe-sound-toggle{
  right:18px;
  top:calc(92px + env(safe-area-inset-top));
  width:44px;
  height:44px;
  background:rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
body.swipe-immersive-body .swipe-info{
  left:0;
  right:0;
  bottom:0;
  padding:94px 18px calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 38%, rgba(0,0,0,.28) 70%, rgba(0,0,0,0) 100%);
}
body.swipe-immersive-body .swipe-info h1{
  font-size:25px;
  line-height:1.13;
  margin:8px 0 7px;
  max-width:94%;
}
body.swipe-immersive-body .swipe-info p{
  max-width:94%;
  color:rgba(255,255,255,.78);
}
body.swipe-immersive-body .swipe-actions{
  margin-top:16px;
  gap:12px;
}
body.swipe-immersive-body .swipe-action{
  padding:13px 20px;
}
body.swipe-immersive-body .swipe-hint{
  bottom:calc(122px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.28);
  color:rgba(255,255,255,.58);
  border-color:rgba(255,255,255,.08);
}
@media(orientation:landscape){
  body.swipe-immersive-body .swipe-page{
    height:100dvh;
    min-height:100dvh;
  }
  body.swipe-immersive-body .swipe-info{
    left:calc(10px + env(safe-area-inset-left));
    right:calc(86px + env(safe-area-inset-right));
    bottom:0;
    padding:72px 18px calc(18px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:70px;
    right:calc(18px + env(safe-area-inset-right));
  }
}

/* stage 39-A-4: swipe mobile/desktop layout separation */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-info{
    padding:88px 18px calc(12px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:14px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(104px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 700px) {
  body.swipe-immersive-body{
    background:#000;
  }
  body.swipe-immersive-body .swipe-page{
    width:min(420px, 100vw);
    max-width:420px;
    height:100vh;
    min-height:100vh;
    max-height:100vh;
    overflow:hidden;
  }
  body.swipe-immersive-body .swipe-topbar{
    padding:14px 14px 8px;
  }
  body.swipe-immersive-body .swipe-topbar a{
    width:34px;
    height:34px;
    font-size:24px;
  }
  body.swipe-immersive-body .swipe-topbar strong{
    font-size:15px;
  }
  body.swipe-immersive-body .swipe-topbar span{
    font-size:10px;
    opacity:.72;
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:64px;
    right:14px;
    width:38px;
    height:38px;
    font-size:18px;
  }
  body.swipe-immersive-body .swipe-info{
    left:0;
    right:0;
    bottom:0;
    padding:58px 16px 44px;
    background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.26) 76%, rgba(0,0,0,0) 100%);
  }
  body.swipe-immersive-body .swipe-meta span,
  body.swipe-immersive-body .swipe-tags span{
    min-height:21px;
    padding:0 8px;
    font-size:10px;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:18px;
    line-height:1.16;
    margin:6px 0 5px;
    max-width:94%;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:11px;
    line-height:1.42;
    max-width:94%;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-tags{
    margin-top:7px;
    gap:6px;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px;
    gap:9px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:10px 15px;
    font-size:12px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:96px;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-immersive-body .swipe-info{
    left:0;
    right:0;
    bottom:0;
    padding:54px 16px 44px;
  }
  body.swipe-immersive-body .swipe-sound-toggle{
    top:64px;
    right:14px;
  }
}

/* stage 39-A-5: swipe layout stabilization for mobile and desktop */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    width:100vw;
    max-width:none;
  }
  body.swipe-immersive-body .swipe-info{
    /* Keep the action buttons inside the visible area on iPhone PWA. */
    padding:76px 18px calc(44px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:24px;
    line-height:1.14;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 19px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(132px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 700px) {
  body.swipe-immersive-body .swipe-page{
    width:min(520px, 100vw);
    max-width:520px;
  }
  body.swipe-immersive-body .swipe-info{
    padding:56px 22px 28px;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:20px;
    line-height:1.16;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:12px;
    line-height:1.42;
  }
  body.swipe-immersive-body .swipe-action{
    padding:10px 16px;
    font-size:13px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:112px;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-immersive-body .swipe-page{
    width:min(520px, 100vw);
    max-width:520px;
  }
  body.swipe-immersive-body .swipe-info{
    padding:52px 22px 28px;
  }
}

/* stage 39-A-6: swipe mobile viewport bottom alignment */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:none;
    height:calc(var(--wb-vh, 1vh) * 100);
    min-height:calc(var(--wb-vh, 1vh) * 100);
    max-height:calc(var(--wb-vh, 1vh) * 100);
    margin:0;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    inset:0;
  }
  body.swipe-immersive-body .swipe-info{
    bottom:0;
    padding:74px 18px calc(22px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(118px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:60px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:22px;
    line-height:1.12;
    margin:6px 0 5px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px;
    line-height:1.38;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-tags{
    margin-top:7px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px;
  }
}


/* stage 39-A-7: swipe mobile fixed viewport reset
   Keep desktop rules from 39-A-5, but make iPhone/Android portrait swipe use
   the real screen edges instead of the visualViewport height variable. */
@media (max-width: 699px) and (orientation: portrait) {
  html:has(body.swipe-immersive-body),
  body.swipe-immersive-body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    background:#000;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  body.swipe-immersive-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute;
    inset:0 !important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    padding:70px 18px calc(18px + env(safe-area-inset-bottom)) !important;
    transform:none !important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:23px;
    line-height:1.14;
    margin:7px 0 6px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:14px;
    line-height:1.42;
    -webkit-line-clamp:2;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 18px;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:54px !important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom)) !important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px;
  }
}


/* stage 39-A-8: swipe page remove bottom-nav reserve and align info to actual mobile visual bottom */
@media (max-width: 699px) and (orientation: portrait) {
  html:has(body.swipe-immersive-body),
  body.swipe-immersive-body{
    margin:0!important;
    padding:0!important;
    width:100vw!important;
    min-width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .app,
  body.swipe-immersive-body .page-wrap,
  body.swipe-immersive-body main{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  body.swipe-immersive-body .bottom-nav,
  body.swipe-immersive-body .continue,
  body.swipe-immersive-body .swipe-bottom-nav{
    display:none!important;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:calc(-1 * var(--swipe-bottom-gap, 0px))!important;
    padding:64px 18px calc(12px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    transform:none!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(104px + env(safe-area-inset-bottom) - var(--swipe-bottom-gap, 0px))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:48px!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px!important;
  }
}


/* stage 39-A-9: swipe mobile video-to-bottom and safe action buttons
   Keep desktop rules stable. On mobile, do not create a pure black bottom block;
   video remains underneath and the info layer uses only a light readability gradient. */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body,
  html:has(body.swipe-immersive-body){
    background:#000!important;
    overflow:hidden!important;
  }
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100%!important;
    min-height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    background:#000!important;
    overflow:hidden!important;
  }
  body.swipe-immersive-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
  }
  body.swipe-immersive-body .swipe-video{
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-immersive-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.48) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 82%)!important;
  }
  body.swipe-immersive-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:0!important;
    margin:0!important;
    transform:none!important;
    padding:58px 18px calc(30px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top, rgba(0,0,0,.44) 0%, rgba(0,0,0,.27) 40%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:12px 18px!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(116px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:46px!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }
  body.swipe-immersive-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-immersive-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-immersive-body .swipe-action{
    padding:11px 17px!important;
  }
}


/* stage 39-A-10: extend swipe video behind iPhone bottom safe-area, keep controls safe */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-page{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video-wrap{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:calc(-1 * max(34px, env(safe-area-inset-bottom)))!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(100% + max(34px, env(safe-area-inset-bottom)))!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-immersive-body .swipe-video,
  body.swipe-immersive-body .swipe-cover{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-immersive-body .swipe-video-wrap:after{
    position:absolute!important;
    inset:0!important;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.38) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 84%)!important;
  }
  body.swipe-immersive-body .swipe-info{
    bottom:0!important;
    padding:54px 18px calc(22px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(to top, rgba(0,0,0,.36) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.07) 74%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-immersive-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-immersive-body .swipe-hint{
    bottom:calc(110px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 760px) {
  body.swipe-immersive-body .swipe-info{
    padding-top:44px!important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
}


/* stage 39-A-11: restore bottom nav on swipe page for stable iPhone safe-area */
body.swipe-nav-restored-body{
  --swipe-restored-nav-height: calc(68px + max(env(safe-area-inset-bottom), 14px));
  background:#000!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}
body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
  display:grid!important;
  z-index:120!important;
}
body.swipe-nav-restored-body .continue{display:none!important;}
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#000!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    bottom:0!important;
    background:#000!important;
  }
  body.swipe-nav-restored-body .swipe-video,
  body.swipe-nav-restored-body .swipe-cover{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 30%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 84%)!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    left:0!important;
    right:0!important;
    bottom:calc(var(--swipe-restored-nav-height) + 10px)!important;
    padding:52px 18px 0!important;
    margin:0!important;
    transform:none!important;
    background:linear-gradient(to top, rgba(0,0,0,.50) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.08) 74%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-action{
    padding:12px 18px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 118px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    padding-top:42px!important;
  }
  body.swipe-nav-restored-body .swipe-info h1{
    font-size:21px!important;
    line-height:1.12!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-nav-restored-body .swipe-action{
    padding:11px 17px!important;
  }
}
@media (orientation:landscape){
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{display:none!important;}
}

/* stage 39-A-12: swipe right controls order adjustment
   Put the real sound control above, and keep the swipe hint as lighter text below it. */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:calc(72px + env(safe-area-inset-top))!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    z-index:22!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    position:fixed!important;
    top:calc(128px + env(safe-area-inset-top))!important;
    right:18px!important;
    margin:0!important;
    color:rgba(255,255,255,.42)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
    text-shadow:0 2px 10px rgba(0,0,0,.7)!important;
    z-index:21!important;
    pointer-events:none!important;
  }
}

@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:58px!important;
    right:16px!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    position:fixed!important;
    top:112px!important;
    right:16px!important;
    margin:0!important;
    color:rgba(255,255,255,.38)!important;
    font-size:10px!important;
    font-weight:800!important;
    z-index:21!important;
    pointer-events:none!important;
  }
}


/* stage 39-A-13: align swipe sound button with topbar */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:calc(12px + env(safe-area-inset-top))!important;
    right:18px!important;
    width:46px!important;
    height:46px!important;
    z-index:24!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    top:calc(66px + env(safe-area-inset-top))!important;
    right:18px!important;
  }
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-sound-toggle{
    top:16px!important;
    right:16px!important;
  }
  body.swipe-nav-restored-body .swipe-topbar span{
    top:70px!important;
    right:16px!important;
  }
}


/* stage 39-A-14: swipe operation tip is temporary, centered, and not a right-side persistent label */
body.swipe-nav-restored-body .swipe-topbar span{
  display:none!important;
}
body.swipe-nav-restored-body .swipe-onboarding{
  top:38%!important;
  width:auto!important;
  min-width:210px!important;
  max-width:82vw!important;
  padding:14px 18px!important;
  border-radius:18px!important;
  background:rgba(0,0,0,.50)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(14px)!important;
}
body.swipe-nav-restored-body .swipe-onboarding-title{
  font-size:16px!important;
  font-weight:950!important;
  line-height:1.35!important;
}
body.swipe-nav-restored-body .swipe-onboarding-subtitle{
  margin-top:6px!important;
  font-size:13px!important;
  font-weight:850!important;
  color:rgba(255,255,255,.78)!important;
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-onboarding{
    top:40%!important;
  }
}


/* stage 39-A-15: swipe tip copy and bottom seam cleanup */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:var(--swipe-restored-nav-height)!important;
    padding-bottom:10px!important;
    margin-bottom:-10px!important;
    background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.10) 76%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
    border-top:0!important;
    background:linear-gradient(to top,#050505 82%,rgba(5,5,5,.92) 100%)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.36)!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap:after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.13) 62%, rgba(0,0,0,0) 84%)!important;
  }
}


/* stage 39-A-16: longer swipe onboarding and landscape video full view */
body.swipe-nav-restored-body .swipe-onboarding{
  transition:opacity .38s ease,transform .38s ease!important;
}
body.swipe-nav-restored-body .swipe-video.is-landscape{
  object-fit:contain!important;
  background:#000!important;
}
body.swipe-nav-restored-body .swipe-video.is-landscape + .swipe-cover{
  opacity:.42!important;
  filter:blur(26px) saturate(1.12) brightness(.62)!important;
  transform:scale(1.18)!important;
}
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video.is-landscape{
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* stage 39-A-17: split swipe onboarding into gesture hint and sound coach */
body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe{
  top:34%!important;
  min-width:220px!important;
  padding:18px 22px 17px!important;
  border-radius:22px!important;
  background:rgba(0,0,0,.54)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.38)!important;
}
body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe.is-show{
  transform:translate(-50%,-50%) scale(1)!important;
}
body.swipe-nav-restored-body .swipe-gesture-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin-bottom:8px;
  animation:wbSwipeGestureFloat 1.05s ease-in-out infinite;
}
body.swipe-nav-restored-body .swipe-gesture-arrow{
  display:block;
  height:18px;
  line-height:18px;
  font-size:22px;
  font-weight:950;
  color:rgba(255,255,255,.92);
  text-shadow:0 3px 12px rgba(0,0,0,.55);
}
body.swipe-nav-restored-body .swipe-gesture-pill{
  display:block;
  width:34px;
  height:48px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.78);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px rgba(0,0,0,.28);
}
body.swipe-nav-restored-body .swipe-gesture-pill:after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  animation:wbSwipeDotMove 1.05s ease-in-out infinite;
}
body.swipe-nav-restored-body .swipe-onboarding-title{
  font-size:20px!important;
  letter-spacing:.02em!important;
}
body.swipe-nav-restored-body .swipe-onboarding-subtitle{display:none!important;}
body.swipe-nav-restored-body .swipe-sound-coach{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  right:72px;
  z-index:25;
  opacity:0;
  transform:translateX(12px) scale(.96);
  transform-origin:right center;
  pointer-events:none;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.56);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.94);
  font-size:14px;
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
  transition:opacity .28s ease,transform .28s ease;
}
body.swipe-nav-restored-body .swipe-sound-coach.is-show{
  opacity:1;
  transform:translateX(0) scale(1);
  animation:wbSoundCoachPop .46s cubic-bezier(.2,1.35,.35,1) both, wbSoundCoachBreath 1.16s ease-in-out .48s infinite;
}
body.swipe-nav-restored-body .swipe-sound-coach.is-show span{
  display:inline-block;
  animation:wbSoundCoachArrow .78s ease-in-out .18s infinite;
}
@keyframes wbSoundCoachPop{
  0%{transform:translateX(14px) scale(.88);opacity:0;}
  62%{transform:translateX(-3px) scale(1.06);opacity:1;}
  100%{transform:translateX(0) scale(1);opacity:1;}
}
@keyframes wbSoundCoachBreath{
  0%,100%{transform:translateX(0) scale(1);box-shadow:0 12px 36px rgba(0,0,0,.32);}
  50%{transform:translateX(-2px) scale(1.025);box-shadow:0 16px 44px rgba(0,0,0,.42);}
}
@keyframes wbSoundCoachArrow{
  0%,100%{transform:translateX(0);opacity:.72;}
  50%{transform:translateX(5px);opacity:1;}
}
@keyframes wbSwipeGestureFloat{
  0%,100%{transform:translateY(-3px);}
  50%{transform:translateY(5px);}
}
@keyframes wbSwipeDotMove{
  0%,100%{transform:translateY(0);opacity:.95;}
  50%{transform:translateY(22px);opacity:.55;}
}
@media (min-width:700px){
  body.swipe-nav-restored-body .swipe-onboarding.swipe-onboarding-swipe{top:36%!important;}
  body.swipe-nav-restored-body .swipe-sound-coach{top:24px;right:70px;}
}
@media (max-width:380px){
  body.swipe-nav-restored-body .swipe-sound-coach{
    right:68px;
    font-size:13px;
    padding:9px 10px;
  }
  body.swipe-nav-restored-body .swipe-onboarding-title{font-size:19px!important;}
}


/* Stage 38-B3：底部導航 icon 精緻化 v1
   只用 CSS 重新繪製底部 icon，不改連結與功能。 */
.bottom-nav{
  background:linear-gradient(180deg,rgba(5,5,5,.92),#050505 36%,#030303);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -18px 42px rgba(0,0,0,.46);
}
.bottom-nav .nav{
  gap:4px;
  color:#8b8b93;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  transition:color .18s ease, transform .18s ease, opacity .18s ease;
}
.bottom-nav .nav:active{transform:scale(.94)}
.bottom-nav .nav-icon{
  width:30px;
  height:26px;
  font-size:0!important;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin-bottom:1px;
}
.bottom-nav .nav-icon::before{
  content:"";
  width:25px;
  height:25px;
  display:block;
  background:currentColor;
  opacity:.9;
  transform:translateZ(0);
  transition:background .18s ease, opacity .18s ease, transform .18s ease, filter .18s ease;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.bottom-nav .nav::before{
  content:"";
  position:absolute;
  top:6px;
  width:42px;
  height:28px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%,rgba(168,104,255,.26),rgba(255,57,142,.08) 46%,transparent 72%);
  opacity:0;
  transform:scale(.76);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.bottom-nav .nav.active{
  color:#fff;
  text-shadow:0 0 18px rgba(174,126,255,.42);
}
.bottom-nav .nav.active::before{
  opacity:1;
  transform:scale(1);
}
.bottom-nav .nav.active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#f3edff 42%,#ff4ea3 100%);
  opacity:1;
  transform:translateY(-1px) scale(1.08);
  filter:drop-shadow(0 0 10px rgba(151,91,255,.52)) drop-shadow(0 0 16px rgba(255,57,142,.22));
}
.bottom-nav .nav.active .nav-icon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cff,#ff4ea3);
  transform:translateX(-50%);
  box-shadow:0 0 12px rgba(157,99,255,.75);
}

/* 首頁：圓潤房子 */
.bottom-nav .nav:nth-child(1) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.7 12 3l9 7.7v8.7c0 .9-.7 1.6-1.6 1.6h-4.5v-5.8c0-.6-.5-1.1-1.1-1.1h-3.6c-.6 0-1.1.5-1.1 1.1V21H4.6c-.9 0-1.6-.7-1.6-1.6v-8.7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.7 12 3l9 7.7v8.7c0 .9-.7 1.6-1.6 1.6h-4.5v-5.8c0-.6-.5-1.1-1.1-1.1h-3.6c-.6 0-1.1.5-1.1 1.1V21H4.6c-.9 0-1.6-.7-1.6-1.6v-8.7Z'/%3E%3C/svg%3E");
}

/* 推薦：閃光星卡 */
.bottom-nav .nav:nth-child(2) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 4.2h15.2c1 0 1.8.8 1.8 1.8v12c0 1-.8 1.8-1.8 1.8H4.4c-1 0-1.8-.8-1.8-1.8V6c0-1 .8-1.8 1.8-1.8Zm7.7 3.3 1.1 2.5 2.7.2-2.1 1.8.7 2.7-2.4-1.4-2.3 1.4.6-2.7-2.1-1.8 2.8-.2 1-2.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.4 4.2h15.2c1 0 1.8.8 1.8 1.8v12c0 1-.8 1.8-1.8 1.8H4.4c-1 0-1.8-.8-1.8-1.8V6c0-1 .8-1.8 1.8-1.8Zm7.7 3.3 1.1 2.5 2.7.2-2.1 1.8.7 2.7-2.4-1.4-2.3 1.4.6-2.7-2.1-1.8 2.8-.2 1-2.5Z'/%3E%3C/svg%3E");
}

/* 刷劇：播放鍵 */
.bottom-nav .nav:nth-child(3) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 4.9c0-1.4 1.6-2.2 2.8-1.4l11.5 7.1c1.1.7 1.1 2.2 0 2.9L8 20.6c-1.2.7-2.8-.1-2.8-1.5V4.9Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 4.9c0-1.4 1.6-2.2 2.8-1.4l11.5 7.1c1.1.7 1.1 2.2 0 2.9L8 20.6c-1.2.7-2.8-.1-2.8-1.5V4.9Z'/%3E%3C/svg%3E");
}

/* 追劇：書籤收藏 */
.bottom-nav .nav:nth-child(4) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 3.2h11.6c1 0 1.8.8 1.8 1.8v15.2c0 1.2-1.3 1.9-2.3 1.2L12 17.8l-5.3 3.6c-1 .7-2.3 0-2.3-1.2V5c0-1 .8-1.8 1.8-1.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.2 3.2h11.6c1 0 1.8.8 1.8 1.8v15.2c0 1.2-1.3 1.9-2.3 1.2L12 17.8l-5.3 3.6c-1 .7-2.3 0-2.3-1.2V5c0-1 .8-1.8 1.8-1.8Z'/%3E%3C/svg%3E");
}

/* 我的：人像 */
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.7 4.7 0 1 0 0-9.4 4.7 4.7 0 0 0 0 9.4Zm0 2.1c-4.3 0-7.8 2.2-8.8 5.2-.3.9.4 1.7 1.3 1.7h15c.9 0 1.6-.9 1.3-1.7-1-3-4.5-5.2-8.8-5.2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12.2a4.7 4.7 0 1 0 0-9.4 4.7 4.7 0 0 0 0 9.4Zm0 2.1c-4.3 0-7.8 2.2-8.8 5.2-.3.9.4 1.7 1.3 1.7h15c.9 0 1.6-.9 1.3-1.7-1-3-4.5-5.2-8.8-5.2Z'/%3E%3C/svg%3E");
}

/* Stage 38-B3b：底部導航 icon 明顯精緻版
   改用純 CSS 文字圖標，避免手機瀏覽器快取或 mask 顯示不明顯。 */
.bottom-nav{
  height:calc(72px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(8,8,10,.72),rgba(0,0,0,.98) 34%,#000);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -16px 46px rgba(0,0,0,.68),0 -1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.bottom-nav .nav{
  color:#85858f;
  font-size:12px;
  font-weight:800;
  gap:5px;
  padding-top:6px;
  text-decoration:none;
  letter-spacing:.01em;
}
.bottom-nav .nav-icon{
  width:42px!important;
  height:34px!important;
  margin-bottom:0!important;
  font-size:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  line-height:1!important;
}
.bottom-nav .nav-icon::before{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  height:32px!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:950!important;
  color:#8d8d98!important;
  -webkit-text-fill-color:#8d8d98!important;
  background:none!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  transition:transform .18s ease,color .18s ease,filter .18s ease;
}
.bottom-nav .nav-icon::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  bottom:auto!important;
  width:42px!important;
  height:42px!important;
  border-radius:16px!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.22),rgba(162,101,255,.26) 36%,rgba(255,53,139,.14) 58%,transparent 76%)!important;
  box-shadow:0 0 0 rgba(0,0,0,0)!important;
  opacity:0!important;
  z-index:1!important;
  transition:opacity .18s ease,transform .18s ease;
}
.bottom-nav .nav::before{display:none!important;}
.bottom-nav .nav::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(5px + env(safe-area-inset-bottom));
  width:22px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#8b5cff,#ff4fa3);
  box-shadow:0 0 16px rgba(172,105,255,.8);
  opacity:0;
  transform:translateX(-50%) scaleX(.62);
  transition:opacity .18s ease,transform .18s ease;
}
.bottom-nav .nav.active{
  color:#fff!important;
  text-shadow:0 0 16px rgba(255,255,255,.22),0 0 22px rgba(164,104,255,.32);
}
.bottom-nav .nav.active .nav-icon::before{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:translateY(-2px) scale(1.13)!important;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.36)) drop-shadow(0 0 18px rgba(178,111,255,.58)) drop-shadow(0 0 20px rgba(255,71,155,.24));
}
.bottom-nav .nav.active .nav-icon::after{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.bottom-nav .nav.active::after{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}
.bottom-nav .nav:active .nav-icon::before{transform:scale(.92)!important;}

/* 明顯版圖標 */
.bottom-nav .nav:nth-child(1) .nav-icon::before{content:"⌂"!important;font-size:30px!important;}
.bottom-nav .nav:nth-child(2) .nav-icon::before{content:"✦"!important;font-size:31px!important;}
.bottom-nav .nav:nth-child(3) .nav-icon::before{content:"▶"!important;font-size:27px!important;padding-left:3px;}
.bottom-nav .nav:nth-child(4) .nav-icon::before{content:"◆"!important;font-size:25px!important;transform:skewX(-12deg) scaleX(1.08)!important;}
.bottom-nav .nav:nth-child(5) .nav-icon::before{content:"♟"!important;font-size:28px!important;}
.bottom-nav .nav:nth-child(4).active .nav-icon::before{transform:translateY(-2px) skewX(-12deg) scale(1.13,1.13)!important;}


/* =========================================================
   38-B3c：導航 icon 定稿版
   - 底部五個 icon 統一：首頁 / 推薦 / 刷劇 / 追劇 / 我的
   - 右上角「我的」入口統一人像風格
   ========================================================= */
.bottom-nav{
  background:linear-gradient(180deg,rgba(5,5,7,.92),rgba(0,0,0,.98))!important;
  box-shadow:0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.bottom-nav .nav{
  gap:4px!important;
  color:#888394!important;
  font-weight:800!important;
}
.bottom-nav .nav.active{
  color:#fff!important;
  text-shadow:0 0 14px rgba(255,255,255,.22),0 0 22px rgba(185,102,255,.35)!important;
}
.bottom-nav .nav-icon{
  width:32px!important;
  height:30px!important;
  font-size:0!important;
  line-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  color:inherit!important;
  transform:none!important;
}
.bottom-nav .nav-icon::before{
  content:""!important;
  display:block!important;
  width:27px!important;
  height:27px!important;
  padding:0!important;
  transform:translateY(0) scale(1)!important;
  background:linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%)!important;
  opacity:.9!important;
  -webkit-mask:var(--wb-nav-mask) center/contain no-repeat!important;
  mask:var(--wb-nav-mask) center/contain no-repeat!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.08))!important;
  transition:transform .18s ease,filter .18s ease,opacity .18s ease!important;
}
.bottom-nav .nav-icon::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%) scale(.64)!important;
  opacity:0!important;
  background:radial-gradient(circle,rgba(255,83,198,.32) 0%,rgba(139,92,255,.22) 42%,rgba(139,92,255,0) 72%)!important;
  filter:blur(1px)!important;
  z-index:-1!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
.bottom-nav .nav.active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%)!important;
  opacity:1!important;
  transform:translateY(-2px) scale(1.12)!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.5)) drop-shadow(0 0 24px rgba(139,92,255,.46))!important;
}
.bottom-nav .nav.active .nav-icon::after{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.bottom-nav .nav:active .nav-icon::before{
  transform:translateY(0) scale(.94)!important;
}
.bottom-nav .nav:nth-child(1){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3.5%2010.8%2012%203.8l8.5%207v8.7a1.7%201.7%200%200%201-1.7%201.7h-4.2v-5.7a2.6%202.6%200%200%200-5.2%200v5.7H5.2a1.7%201.7%200%200%201-1.7-1.7z%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(2){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22m12%203.3%202.55%205.16%205.7.83-4.12%204.02.97%205.67L12%2016.3%206.9%2018.98l.97-5.67L3.75%209.29l5.7-.83z%22/%3E%3Cpath%20d=%22M18.5%203.8v3.1M17%205.35h3.1%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(3){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%225.2%22%20y=%224.6%22%20width=%2213.6%22%20height=%2214.8%22%20rx=%223.1%22/%3E%3Cpath%20d=%22M10.5%209.2v5.6l4.6-2.8z%22%20fill=%22black%22%20stroke=%22none%22/%3E%3Cpath%20d=%22M2.8%208.2v7.6M21.2%208.2v7.6%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(4){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%204.2h10a1.6%201.6%200%200%201%201.6%201.6v15l-6.6-4.1-6.6%204.1v-15A1.6%201.6%200%200%201%207%204.2z%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(5){ --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E"); }
.bottom-nav .nav:nth-child(3) .nav-icon::before{
  width:30px!important;
  height:30px!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:28px!important;
  height:28px!important;
}

/* 右上角「我的」入口：與底部我的使用同一套人像圖示 */
.top-icon[href="/member.php"]{
  font-size:0!important;
  color:transparent!important;
  overflow:visible!important;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.28)!important;
}
.top-icon[href="/member.php"]::before{
  content:""!important;
  display:block!important;
  width:25px!important;
  height:25px!important;
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 45%,#8b5cff 100%)!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.15%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228.2%22%20r=%223.9%22/%3E%3Cpath%20d=%22M4.7%2020.2c.9-4.1%203.3-6.1%207.3-6.1s6.4%202%207.3%206.1%22/%3E%3C/svg%3E") center/contain no-repeat!important;
  filter:drop-shadow(0 0 8px rgba(255,99,207,.35)) drop-shadow(0 0 14px rgba(139,92,255,.28))!important;
}
.top-icon[href="/member.php"]:active::before{
  transform:scale(.92);
}


/* =========================================================
   38-B3d：底部「我的」icon 修正版
   - 只修底部我的圖示，避免小尺寸時像棋子或變形
   - 右上角我的與其他導航不動
   ========================================================= */
.bottom-nav .nav:nth-child(5){
  --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22black%22%20d=%22M12%202.8a4.35%204.35%200%201%201%200%208.7%204.35%204.35%200%200%201%200-8.7Zm0%2011.05c4.55%200%207.75%202.35%208.55%205.85.2.88-.48%201.7-1.4%201.7H4.85c-.92%200-1.6-.82-1.4-1.7.8-3.5%204-5.85%208.55-5.85Z%22/%3E%3C/svg%3E")!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:26px!important;
  height:26px!important;
  transform:translateY(0) scale(1)!important;
}
.bottom-nav .nav:nth-child(5).active .nav-icon::before{
  transform:translateY(-2px) scale(1.12)!important;
}

/* =========================================================
   38-B3f：底部導航 icon 最終修正
   - 移除前一版文字符號殘留（尤其「我的」♟）
   - 強制五個底部 icon 全部使用 SVG mask
   ========================================================= */
.bottom-nav .nav:nth-child(1) .nav-icon::before,
.bottom-nav .nav:nth-child(2) .nav-icon::before,
.bottom-nav .nav:nth-child(3) .nav-icon::before,
.bottom-nav .nav:nth-child(4) .nav-icon::before,
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  content:""!important;
  font-size:0!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%)!important;
  -webkit-mask:var(--wb-nav-mask) center/contain no-repeat!important;
  mask:var(--wb-nav-mask) center/contain no-repeat!important;
}
.bottom-nav .nav:nth-child(5){
  --wb-nav-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%223.8%22/%3E%3Cpath%20d=%22M4.8%2020.2c.8-4.15%203.5-6.35%207.2-6.35s6.4%202.2%207.2%206.35%22/%3E%3C/svg%3E")!important;
}
.bottom-nav .nav:nth-child(5) .nav-icon::before{
  width:27px!important;
  height:27px!important;
  transform:translateY(0) scale(1)!important;
}
.bottom-nav .nav:nth-child(5).active .nav-icon::before{
  background:linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%)!important;
  transform:translateY(-2px) scale(1.12)!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.5)) drop-shadow(0 0 24px rgba(139,92,255,.46))!important;
}

/* =========================================================
   39-A-19b：刷劇頁底部按鈕安全距離修正
   - 底部導航 icon 改版後，刷劇頁按鈕需要再往上避開導航列
   - 只影響刷劇頁直式手機版，不改播放/滑動/隨機池邏輯
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height) + 30px)!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:8px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 138px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height) + 24px)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
    padding-bottom:6px!important;
  }
}


/* =========================================================
   39-A-19c：刷劇頁底部縫隙修正
   - 39-A-19b 將內容整塊上移，造成按鈕與底部導航中間露出縫隙
   - 這版改成：背景遮罩貼到導航上緣，只有按鈕本身用 padding 往上避開
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-info{
    bottom:var(--swipe-restored-nav-height)!important;
    padding:58px 18px 22px!important;
    margin-bottom:0!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 36%, rgba(0,0,0,.16) 72%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 126px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body .swipe-info{
    padding-top:46px!important;
    padding-bottom:17px!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 116px)!important;
  }
}


/* =========================================================
   39-A-19d：刷劇頁 Android 底部高度穩定修正
   - Android WebView / Chrome 對 100vh 可能會把內容算到可視區外
   - 改用動態視窗高度，並讓資訊背景向下延伸，避免按鈕被底部導航吃掉或露縫
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body{
    --swipe-action-safe-gap: 14px;
  }
  body.swipe-nav-restored-body .swipe-page{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap{
    inset:0!important;
    height:100%!important;
    min-height:100%!important;
    bottom:0!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    position:absolute!important;
    bottom:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap))!important;
    padding:54px 18px 0!important;
    margin:0!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 122px)!important;
    overflow:visible!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.14) 76%, rgba(0,0,0,0) 100%)!important;
  }
  body.swipe-nav-restored-body .swipe-info::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:calc(-1 * (var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap)));
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap) + 46px);
    background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 46%, rgba(0,0,0,.38) 78%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:-1;
  }
  body.swipe-nav-restored-body .swipe-info h1{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body .swipe-tags{
    flex-wrap:nowrap!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
    position:relative!important;
    z-index:2!important;
  }
  body.swipe-nav-restored-body .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 132px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body{
    --swipe-action-safe-gap: 18px;
  }
  body.swipe-nav-restored-body .swipe-info{
    padding-top:42px!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 104px)!important;
  }
  body.swipe-nav-restored-body .swipe-info p{
    -webkit-line-clamp:2!important;
    font-size:13px!important;
    line-height:1.36!important;
  }
  body.swipe-nav-restored-body .swipe-tags{
    margin-top:8px!important;
  }
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px!important;
  }
}
@supports not (height:100dvh){
  @media (max-width:699px) and (orientation:portrait){
    body.swipe-nav-restored-body .swipe-page{
      height:100svh!important;
      min-height:100svh!important;
      max-height:100svh!important;
    }
    body.swipe-nav-restored-body .swipe-info{
      max-height:calc(100svh - var(--swipe-restored-nav-height) - 122px)!important;
    }
  }
}

/* =========================================================
   39-A-19g：刷劇頁底部遮罩縫隙修正
   只補底部漸層銜接，不再調整資訊區高度或按鈕位置。
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:calc(var(--swipe-restored-nav-height) + 86px);
    z-index:10;
    pointer-events:none;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.94) 38%,
      rgba(0,0,0,.70) 68%,
      rgba(0,0,0,.28) 88%,
      rgba(0,0,0,0) 100%
    );
  }
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav{
    border-top:0!important;
    background:linear-gradient(
      to top,
      #050505 0%,
      rgba(5,5,5,.99) 58%,
      rgba(5,5,5,.86) 82%,
      rgba(5,5,5,.66) 100%
    )!important;
    box-shadow:0 -18px 36px rgba(0,0,0,.42)!important;
  }
  body.swipe-nav-restored-body .swipe-info{
    z-index:12!important;
  }
}

/* =========================================================
   39-A-19h：Android 刷劇頁資訊欄重繪修正
   只在 Android 觸發 repaint，不改高度、不改按鈕位置。
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-page.wb-android-info-repaint-page,
  body.swipe-nav-restored-body .swipe-info.wb-android-info-repaint{
    transform:translateZ(0) translateY(-0.01px)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform!important;
  }
}

/* =========================================================
   39-A-19i：Android 刷劇資訊欄定位基準修正
   - 只在 Android 刷劇頁啟用
   - 資訊欄改用 fixed，跟底部導航使用同一個視窗底部基準
   - 不重算整頁高度、不動影片、不動 iPhone
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info{
    --swipe-action-safe-gap: 14px;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap))!important;
    width:100vw!important;
    max-width:520px!important;
    margin:0!important;
    padding:54px 18px 0!important;
    transform:translateX(-50%)!important;
    z-index:86!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 112px)!important;
    overflow:visible!important;
    background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.14) 76%, rgba(0,0,0,0) 100%)!important;
    contain:layout paint style!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:calc(-1 * (var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap)))!important;
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap) + 58px)!important;
    background:linear-gradient(to top, rgba(0,0,0,.98) 0%, rgba(0,0,0,.86) 48%, rgba(0,0,0,.38) 78%, rgba(0,0,0,0) 100%)!important;
    pointer-events:none!important;
    z-index:-1!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-actions{
    margin-top:12px!important;
    padding-bottom:0!important;
    position:relative!important;
    z-index:2!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info h1{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:100%!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-hint{
    bottom:calc(var(--swipe-restored-nav-height) + 132px)!important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info{
    --swipe-action-safe-gap: 18px;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    padding-top:42px!important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height) - 104px)!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info p{
    font-size:13px!important;
    line-height:1.36!important;
  }
}

/* =========================================================
   39-A-19j：Android 刷劇底部遮罩固定修正
   - 只在 Android 刷劇頁啟用
   - 底部遮罩改用 fixed，與底部導航/資訊欄使用同一個視窗基準
   - 不動資訊欄位置、不動按鈕、不動 iPhone
   ========================================================= */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-page::after{
    content:""!important;
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:520px!important;
    height:calc(var(--swipe-restored-nav-height) + var(--swipe-action-safe-gap, 14px) + 96px)!important;
    transform:translateX(-50%)!important;
    z-index:84!important;
    pointer-events:none!important;
    background:linear-gradient(
      to top,
      rgba(0,0,0,.99) 0%,
      rgba(0,0,0,.96) 34%,
      rgba(0,0,0,.78) 62%,
      rgba(0,0,0,.38) 84%,
      rgba(0,0,0,0) 100%
    )!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    will-change:transform!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .bottom-nav.swipe-bottom-nav{
    z-index:90!important;
  }
  body.swipe-nav-restored-body.wb-android-swipe-fixed-info .swipe-info{
    z-index:86!important;
  }
}


/* 39-A-21：刷劇頁下一部影片預載用，隱藏背景 video，不影響畫面與點擊 */
.swipe-preload-video{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  left:-9999px!important;
  top:-9999px!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:-1!important;
}

/* 39-A-24 刷劇頁取消追劇確認 */
.wb-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-confirm-actions .wb-modal-secondary,.wb-confirm-actions .wb-modal-button{margin:0}
.wb-confirm-danger{background:linear-gradient(135deg,#ff3f8e,#7b61ff)}
.wb-swipe-unfollow-modal .wb-modal-icon{font-size:30px}

/* 39-S2：iPhone 安裝引導頁優化 */
.install-page-v2 .install-hero h1{max-width:420px}.install-page-v2 .install-card{border-color:rgba(255,255,255,.11)}.install-browser-warning{border-color:rgba(255,204,92,.22);background:linear-gradient(145deg,rgba(255,204,92,.11),rgba(255,255,255,.025))}.install-browser-warning.is-soft{opacity:.88}.install-browser-warning.is-important{border-color:rgba(255,204,92,.42);box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 3px rgba(255,204,92,.1)}.install-hint-strong{background:rgba(123,97,255,.14);border:1px solid rgba(166,144,255,.22);color:#ded7ff!important}.install-path-card{margin-top:13px;padding:14px;border:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2);border-radius:18px}.install-path-card.important{border-color:rgba(255,204,92,.26);background:linear-gradient(145deg,rgba(255,204,92,.1),rgba(0,0,0,.18))}.install-path-title{font-size:16px;font-weight:950;color:#fff}.install-steps-v2 li{grid-template-columns:38px 1fr;padding:10px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.install-steps-v2 span{background:linear-gradient(135deg,#7b61ff,#ff4fa3);box-shadow:0 8px 18px rgba(123,97,255,.22)}.install-mini-note{margin-top:13px;border-radius:15px;padding:12px 13px;background:rgba(255,255,255,.055);color:#aaa;line-height:1.55;font-size:14px}.install-page-v2 .install-feature-grid div{min-height:74px}@media(max-width:390px){.install-page-v2 .install-hero h1{font-size:27px}.install-path-card{padding:12px}.install-steps-v2 li{grid-template-columns:34px 1fr;padding:9px}.install-steps-v2 span{width:34px;height:34px}.install-path-title{font-size:15px}}

/* 39-S3 PWA installed-state polish */
.install-secondary{width:100%;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#ddd;display:flex;align-items:center;justify-content:center;padding:13px 14px;margin-top:10px;font-size:14px;font-weight:850;line-height:1.35}
.install-secondary:active{transform:scale(.99)}
body.is-pwa-installed .home-entry-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
body.is-pwa-installed .member-menu a[href="/install.php"]{display:none!important}
.pwa-welcome-toast{position:fixed;left:14px;right:14px;top:calc(12px + env(safe-area-inset-top));z-index:9999;display:grid;gap:3px;padding:13px 15px;border-radius:18px;background:rgba(24,24,28,.94);border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 45px rgba(0,0,0,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.pwa-welcome-toast.is-show{opacity:1;transform:translateY(0)}
.pwa-welcome-toast strong{color:#fff;font-size:15px;font-weight:950}.pwa-welcome-toast span{color:#bbb;font-size:13px;line-height:1.35}
body.is-pwa-standalone .install-ready .install-badge::after{content:" · App 模式"}
body.is-pwa-remembered-installed .install-ready .install-badge::after{content:" · 已記住"}
@media(max-width:360px){.install-secondary{font-size:13px;padding:12px}.pwa-welcome-toast{left:10px;right:10px}}

/* 39-S4 PWA App mode immersion polish */
html.is-pwa-app-mode,
html.is-pwa-app-mode body,
body.is-pwa-standalone{
  background:#000!important;
  overscroll-behavior-y:none;
}
body.is-pwa-standalone{
  -webkit-user-select:none;
  user-select:none;
}
body.is-pwa-standalone input,
body.is-pwa-standalone textarea,
body.is-pwa-standalone [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
body.is-pwa-standalone .app,
body.is-pwa-standalone .detail,
body.is-pwa-standalone .watch,
body.is-pwa-standalone .member-page,
body.is-pwa-standalone .auth-page,
body.is-pwa-standalone .install-page,
body.is-pwa-standalone .reward-page{
  min-height:100svh;
  background:#050505;
}
@supports (min-height:100dvh){
  body.is-pwa-standalone .app,
  body.is-pwa-standalone .detail,
  body.is-pwa-standalone .watch,
  body.is-pwa-standalone .member-page,
  body.is-pwa-standalone .auth-page,
  body.is-pwa-standalone .install-page,
  body.is-pwa-standalone .reward-page{min-height:100dvh;}
}
body.is-pwa-standalone .top{
  padding-top:calc(8px + env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(5,5,5,.98) 0%,rgba(5,5,5,.93) 82%,rgba(5,5,5,.84));
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
body.is-pwa-standalone .bottom-nav{
  height:calc(70px + env(safe-area-inset-bottom));
  padding-bottom:max(env(safe-area-inset-bottom),8px);
  background:rgba(5,5,5,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.is-pwa-standalone .nav{
  padding-top:4px;
  justify-content:flex-start;
}
body.is-pwa-standalone .continue{
  bottom:calc(78px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .detail,
body.is-pwa-standalone .watch{
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:calc(112px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .back{
  background:rgba(22,22,24,.82);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.is-pwa-standalone .install-hero .section-kicker,
body.is-pwa-standalone .install-browser-warning,
body.is-pwa-standalone .install-tips{
  display:none!important;
}
body.is-pwa-standalone .install-page{
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
}
body.is-pwa-standalone .install-ready{
  margin-top:10px;
}
.pwa-mode-mini-home{
  position:fixed;
  left:50%;
  bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:92;
  transform:translateX(-50%) translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  background:rgba(28,28,32,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
body.is-pwa-standalone .pwa-mode-mini-home.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
body.is-pwa-standalone.has-bottom-nav .pwa-mode-mini-home,
body.is-pwa-standalone.is-watch-page .pwa-mode-mini-home,
body.is-pwa-standalone.is-home-page .pwa-mode-mini-home{
  display:none!important;
}
.pwa-app-ready-chip{
  position:fixed;
  right:12px;
  top:calc(10px + env(safe-area-inset-top));
  z-index:9998;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ddd;
  background:rgba(28,28,32,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:12px;
  font-weight:900;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}
.pwa-app-ready-chip.is-show{opacity:1;transform:translateY(0)}
@media(max-width:380px){
  body.is-pwa-standalone .bottom-nav{height:calc(66px + env(safe-area-inset-bottom));}
  .pwa-mode-mini-home{bottom:calc(74px + env(safe-area-inset-bottom));font-size:12px;height:32px;}
}

/* 39-S5 Home install nudge: gentle, delayed, dismissible */
.home-install-nudge{
  position:relative;
  margin:10px 14px 12px;
  border-radius:20px;
  border:1px solid rgba(166,144,255,.20);
  background:linear-gradient(145deg,rgba(123,97,255,.18),rgba(255,79,163,.10) 48%,rgba(255,255,255,.045));
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.035) inset;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .24s ease,transform .24s ease;
}
.home-install-nudge::before{
  content:"";
  position:absolute;
  inset:-55% auto auto -18%;
  width:170px;
  height:170px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.home-install-nudge.is-visible{opacity:1;transform:translateY(0)}
.home-install-nudge-main{
  position:relative;
  min-height:72px;
  padding:13px 46px 13px 13px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
}
.home-install-nudge-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  font-size:22px;
}
.home-install-nudge-copy{display:grid;gap:4px;min-width:0}
.home-install-nudge-copy strong{font-size:15px;font-weight:950;line-height:1.2;color:#fff}
.home-install-nudge-copy em{font-style:normal;font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}
.home-install-nudge-cta{
  height:32px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}
.home-install-nudge-close{
  position:absolute;
  right:8px;
  top:8px;
  z-index:2;
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.78);
  font-size:20px;
  line-height:1;
}
.home-install-nudge-close:active{transform:scale(.96)}
body.is-pwa-installed .home-install-nudge,
body.is-pwa-standalone .home-install-nudge{display:none!important}
@media(max-width:390px){
  .home-install-nudge{margin-left:12px;margin-right:12px;border-radius:18px}
  .home-install-nudge-main{grid-template-columns:38px 1fr;gap:9px;padding:12px 40px 12px 12px}
  .home-install-nudge-icon{width:38px;height:38px;border-radius:14px;font-size:20px}
  .home-install-nudge-cta{grid-column:2;justify-self:start;height:28px;font-size:11px;margin-top:1px}
}


/* =========================================================
   39-S7：追劇 / 觀看紀錄同步狀態提示
   ========================================================= */

.follow-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-right: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(123,97,255,.18), rgba(255,63,142,.14));
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.follow-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #bdbdbd;
  font-size: 12px;
  line-height: 1.35;
}

.follow-sync-status::before,
.member-note-text[data-sync-state]::before {
  content: "●";
  font-size: 9px;
  color: #aaa;
}

.follow-sync-status[data-sync-state="syncing"]::before,
.member-note-text[data-sync-state="syncing"]::before,
.follow-sync-status[data-sync-state="pending"]::before,
.member-note-text[data-sync-state="pending"]::before {
  color: #ffd36b;
}

.follow-sync-status[data-sync-state="ok"]::before,
.member-note-text[data-sync-state="ok"]::before {
  color: #65e6a8;
}

.follow-sync-status[data-sync-state="failed"]::before,
.member-note-text[data-sync-state="failed"]::before {
  color: #ff7f9a;
}

.member-note-text[data-sync-state] {
  display: flex;
  align-items: center;
  gap: 7px;
}

.member-sync-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 9999;
  width: min(330px, calc(100vw - 28px));
  transform: translateX(-50%) translateY(14px);
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(20,20,24,.94);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  backdrop-filter: blur(14px);
}

.member-sync-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.member-sync-toast[data-sync-state="ok"] {
  border-color: rgba(101,230,168,.35);
}

.member-sync-toast[data-sync-state="failed"] {
  border-color: rgba(255,127,154,.4);
}

.member-sync-toast[data-sync-state="syncing"],
.member-sync-toast[data-sync-state="pending"] {
  border-color: rgba(255,211,107,.32);
}

body.wb-pwa-mode .member-sync-toast {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

/* =========================================================
   39-S10：會員頁同步診斷面板＋版本顯示
   ========================================================= */
.member-note-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.member-note-head .member-note-title{margin-bottom:0}
.member-version{
  flex:0 0 auto;
  color:rgba(255,255,255,.46);
  font-size:11px;
  font-weight:800;
  letter-spacing:.01em;
}
.member-sync-actions{
  margin-top:11px;
  display:flex;
  justify-content:flex-end;
}
.member-debug-link{
  border:1px solid rgba(166,144,255,.22);
  background:rgba(123,97,255,.10);
  color:#dcd6ff;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
}
.member-debug-link:active{transform:scale(.97)}
.member-debug-panel{
  margin:14px;
  padding:14px;
  border:1px solid rgba(166,144,255,.20);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(123,97,255,.13),rgba(255,255,255,.035));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.member-debug-panel.is-hidden{display:none!important}
.member-debug-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.member-debug-head h2{
  margin:3px 0 0;
  font-size:20px;
  line-height:1.15;
}
.member-debug-close{
  width:32px;
  height:32px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
}
.member-debug-body{
  display:grid;
  gap:10px;
}
.member-debug-summary{
  display:grid;
  gap:7px;
  padding:11px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  color:#d8d8d8;
  font-size:12px;
  line-height:1.45;
  word-break:break-word;
}
.member-debug-details{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  overflow:hidden;
}
.member-debug-details summary{
  padding:10px 11px;
  color:#cfc7ff;
  font-size:12px;
  font-weight:900;
}
.member-debug-details pre{
  margin:0;
  padding:11px;
  max-height:260px;
  overflow:auto;
  border-top:1px solid rgba(255,255,255,.08);
  color:#ddd;
  background:rgba(0,0,0,.28);
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
.member-debug-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.member-debug-actions button{
  min-height:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.member-debug-actions button:last-child{grid-column:1/-1;background:rgba(123,97,255,.16);border-color:rgba(166,144,255,.22)}
.member-debug-actions button:active{transform:scale(.985)}
@media(max-width:380px){
  .member-note-head{align-items:flex-start;flex-direction:column;gap:4px}
  .member-sync-actions{justify-content:flex-start}
  .member-debug-panel{margin-left:12px;margin-right:12px;padding:12px}
}


/* =========================================================
   Stage 39-S11：首頁「全部短劇」載入更多
   ========================================================= */
.home-all-more {
  padding: 2px 14px 12px;
  text-align: center;
}

.home-all-more-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.home-all-more-btn:disabled {
  opacity: .72;
}

.home-all-more-btn.is-loading {
  background: rgba(109,92,255,.16);
  border-color: rgba(159,152,255,.28);
}

.home-all-more-btn.is-complete {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.62);
}

.home-all-more-note {
  margin-top: 8px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  line-height: 1.35;
}

.home-all-more.is-complete {
  padding-top: 0;
}


/* =========================================================
   Stage 39-S12：首頁短劇欄位分隔與標題層級優化
   只調整首頁中間短劇展示欄位：熱門短劇 / 最新上架 / 類型欄位 / 全部短劇。
   ========================================================= */
.home-wall{
  padding-top:4px;
}
.home-drama-section{
  position:relative;
  padding:18px 0 28px;
  margin-top:14px;
}
.home-drama-section:first-child{
  margin-top:2px;
  padding-top:6px;
}
.home-drama-section:not(:first-child){
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 72%);
}
.home-drama-section:not(:first-child)::before{
  content:"";
  position:absolute;
  top:0;
  left:14px;
  right:14px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12),rgba(123,97,255,.18),rgba(255,255,255,0));
  pointer-events:none;
}
.home-section-head{
  padding:0 14px 13px;
  align-items:flex-end;
}
.home-section-head h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:22px;
  letter-spacing:.01em;
}
.home-section-head h2::before{
  content:"";
  width:4px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#8f74ff,#ff4f9a);
  box-shadow:0 0 16px rgba(123,97,255,.42);
  flex:0 0 auto;
}
.home-section-head p{
  margin-top:5px;
  color:#9b9b9b;
}
.home-section-head .section-kicker{
  margin-left:12px;
  color:#b4a5ff;
}
.home-section-row{
  padding-bottom:9px;
}
.home-section-grid.grid{
  padding-top:2px;
}
.home-drama-section-all{
  margin-top:22px;
  padding-top:24px;
  padding-bottom:38px;
}
.home-drama-section-all::before{
  left:12px;
  right:12px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(180,165,255,.28),rgba(255,79,154,.18),rgba(255,255,255,0));
}
.home-drama-section-all .home-section-head{
  padding-bottom:14px;
}
.home-all-more{
  margin-top:4px;
}
@media(max-width:390px){
  .home-drama-section{
    padding-top:16px;
    padding-bottom:26px;
    margin-top:12px;
  }
  .home-section-head h2{
    font-size:21px;
  }
  .home-section-head h2::before{
    height:17px;
  }
  .home-drama-section-all{
    margin-top:20px;
    padding-top:22px;
  }
}

/* Stage 39-S13-fix: search recent history floating layer */
.search-form.has-search-history{position:relative;z-index:62}.search-history-panel{display:none;position:relative;z-index:61;margin:8px 0 0;border-radius:16px;background:rgba(24,24,26,.98);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 42px rgba(0,0,0,.38);overflow:hidden;backdrop-filter:blur(18px)}.search-history-panel.is-open{display:block}.search-row .search-history-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0}.search-row{position:relative}.search-history-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 7px;color:#9a9a9a;font-size:12px;font-weight:900;letter-spacing:.06em}.search-history-head button{border:0;background:transparent;color:#bcaeff;font-size:12px;font-weight:900;padding:5px 2px}.search-history-list{display:grid;padding:0 6px 6px}.search-history-item{display:flex;align-items:center;min-height:42px;border-radius:12px}.search-history-item:active{background:rgba(255,255,255,.06)}.search-history-query{flex:1;min-width:0;height:42px;border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:10px;text-align:left;padding:0 8px;font:inherit}.search-history-query span{color:#8f8f95;font-size:15px;flex:0 0 auto}.search-history-query strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:750}.search-history-remove{width:38px;height:38px;border:0;border-radius:999px;background:transparent;color:#777;font-size:20px;line-height:1}.search-history-remove:active{background:rgba(255,255,255,.08);color:#fff}.search-panel .search-history-panel{margin:10px 0 0}.top .search-history-panel{max-height:292px;overflow:auto}.search-page .search-history-panel{margin-left:0;margin-right:0}@media(max-width:390px){.search-history-query strong{font-size:13.5px}.search-history-head{padding-top:10px}}


/* Stage 39-S13-fix: search history should float above home cards */
.search-history-panel.is-floating{
  position:fixed;
  left:14px;
  top:86px;
  right:auto;
  width:calc(100vw - 28px);
  margin:0;
  z-index:2147483000;
  max-height:min(292px, 45vh);
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.search-row .search-history-panel.is-floating{
  position:fixed;
  left:14px;
  right:auto;
  top:86px;
  margin:0;
}
.search-form.has-search-history{
  z-index:2147482000;
}

/* Stage 39-S13-fix6: search page bottom navigation alignment
   Search page now intentionally has no search-body class and no bottom-nav override.
   Its nav uses the exact same global .bottom-nav rules as the home page. */
.app.search-page{
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom), 14px));
}


/* Stage 39-S13-fix7: search.php is a short-content PWA page, so anchor its bottom nav with the same short-page stabilization used by member.php. */
body.search-body{
  min-height:calc(var(--wb-vh, 1vh) * 100);
  background:#000!important;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:auto;
}
body.search-body .search-page.app{
  min-height:calc(var(--wb-vh, 1vh) * 100 + 1px)!important;
  padding-bottom:calc(190px + max(env(safe-area-inset-bottom), 18px))!important;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
body.search-body .search-page.app::after{
  content:"";
  display:block;
  height:calc(28px + max(env(safe-area-inset-bottom), 14px));
}
body.search-body .bottom-nav,
html.wb-search-page-ready body.search-body .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:translate3d(0,0,0)!important;
  -webkit-transform:translate3d(0,0,0)!important;
  will-change:transform;
  z-index:90;
}
body.search-body .bottom-nav::after{
  bottom:0!important;
}
html.wb-search-page-ready body.search-body .search-page.app{
  min-height:calc(var(--wb-vh, 1vh) * 100 + 1px)!important;
}
@supports (height:100dvh){
  body.search-body .search-page.app{min-height:calc(100dvh + 1px)!important;}
}
@supports (height:100svh){
  body.search-body .search-page.app{min-height:calc(100svh + 1px)!important;}
}

/* Stage 39-S13-fix10: search page bottom-nav hard reset.
   Root cause found in current package: search.php still had search-body + autofocus,
   and old fix7 search-body CSS/JS rules were still active. Search now uses the same
   page shell as category pages and explicitly cancels any legacy search-specific nav rules. */
body:not(.search-body) .search-page.app,
.app.category-page.search-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom),14px))!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}
body:not(.search-body) .search-page.app::after,
.app.category-page.search-page::after{
  content:none!important;
  display:none!important;
  height:0!important;
}
body:not(.search-body) .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
}


/* Stage 39-S13-fix11: search result page bottom nav real-time visual-viewport alignment.
   Only search.php uses page-search. It measures the actual rendered gap and moves the nav down by that exact gap. */
body.page-search .bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:calc(-1 * var(--wb-search-nav-gap, 0px))!important;
  max-width:520px!important;
  width:100%!important;
  margin:0 auto!important;
}
body.page-search.wb-search-nav-calibrating .bottom-nav{
  opacity:0;
}
body.page-search.wb-search-nav-ready .bottom-nav{
  opacity:1;
}
body.page-search .search-page.app{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(168px + max(env(safe-area-inset-bottom),14px))!important;
}


/* =========================================================
   39-S13-fix12：搜尋頁外殼重做 + 桌機底部導航背景收斂
   原因：search.php 是短內容頁，iPhone PWA 對 fixed bottom 在短頁的可視底部計算會偏移。
   解法：搜尋頁改成 flex 外殼 + sticky bottom-nav；其他頁維持 fixed bottom-nav。
   同時把桌機版 bottom-nav / body safe-area 背景限制在 520px App 容器內。
   ========================================================= */
.bottom-nav{
  left:50%!important;
  right:auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:hidden;
}
body::after{
  left:50%!important;
  right:auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;
}
body.search-page-body{
  min-height:100vh!important;
  min-height:100dvh!important;
  background:#000!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  overflow-x:hidden!important;
}
body.search-page-body::after{
  display:none!important;
  content:none!important;
}
body.search-page-body .search-page.app,
body.search-page-body .search-page-shell{
  flex:1 0 auto!important;
  width:100%!important;
  max-width:520px!important;
  min-height:auto!important;
  padding-bottom:24px!important;
  margin:0 auto!important;
  overflow:visible!important;
}
body.search-page-body .search-page.app::after,
body.search-page-body .search-page-shell::after{
  content:none!important;
  display:none!important;
}
body.search-page-body .bottom-nav,
body.search-page-body .bottom-nav.search-bottom-nav{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
  flex:0 0 auto!important;
  z-index:90!important;
}
body.search-page-body .bottom-nav::after{
  content:none!important;
  display:none!important;
}
@supports (-webkit-touch-callout:none){
  body.search-page-body{
    min-height:-webkit-fill-available!important;
  }
}


/* stage39s21afix22c_20260702: clean rebuilt search page shell.
   search.php no longer uses search-page/search-body/page-search/search-page-body/search-bottom-nav.
   This reset makes the rebuilt page behave like normal category/recommend pages. */
.search-clean-page{
  min-height:100vh!important;
  min-height:100dvh!important;
  padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}
.search-clean-page::after{
  content:none!important;
  display:none!important;
}
.search-clean-panel{
  position:relative;
  z-index:65;
}
body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  -webkit-transform:translateX(-50%)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* =========================================================
   39-S13-fix14：搜尋頁 flex body + sticky bottom-nav
   原因：iPhone PWA 在短內容頁使用 fixed bottom nav 時，layout viewport / visual viewport
   可能計算不同，導致只有 search.php 的底部功能列偏高。
   解法：搜尋頁不再依賴 fixed bottom，改用 body flex column，main flex-grow 撐滿剩餘空間，
   bottom nav 回到文流並 sticky bottom，避開 fixed bottom 的短頁計算問題。
   ========================================================= */
body.search-body-v2{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  min-height:-webkit-fill-available!important;
  overflow-x:hidden!important;
  background:#000!important;
}

body.search-body-v2::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  transform:none!important;
}

body.search-body-v2 .search-clean-page{
  flex:1 0 auto!important;
  min-height:0!important;
  height:auto!important;
  padding-bottom:24px!important;
  margin:0 auto!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
}

body.search-body-v2 .search-clean-page::after{
  display:none!important;
  content:none!important;
  height:0!important;
}

body.search-body-v2 .bottom-nav,
body.search-body-v2 .bottom-nav.bottom-nav--sticky{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:0!important;
  width:100%!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0 auto!important;
  transform:none!important;
  -webkit-transform:none!important;
  flex:0 0 auto!important;
  align-self:center!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
  box-sizing:border-box!important;
  z-index:90!important;
  overflow:hidden!important;
}

body.search-body-v2 .bottom-nav::after,
body.search-body-v2 .bottom-nav.bottom-nav--sticky::after{
  display:none!important;
  content:none!important;
}

body.search-body-v2 .search-history-panel{
  z-index:120!important;
}

@supports (-webkit-touch-callout:none){
  html{
    min-height:-webkit-fill-available;
  }
  body.search-body-v2{
    min-height:-webkit-fill-available!important;
  }
}



/* =========================================================
   39-S13-fix15：搜尋頁增加延伸推薦並回到全站 fixed bottom-nav
   說明：搜尋頁不再使用 sticky/flex 導航；用實際推薦內容把短頁撐長，
   避免 iPhone PWA 在短內容頁誤算 fixed bottom nav。
   ========================================================= */
.search-clean-page{
  min-height:calc(100dvh + 160px)!important;
  padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
}
.search-related-section{
  margin-top:28px;
  padding-top:26px;
}
.search-related-section .home-section-head{
  padding-left:14px;
  padding-right:14px;
}
.search-related-section .grid{
  padding-bottom:36px;
}
body:not(.search-body-v2) .search-clean-page ~ .bottom-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  height:calc(64px + env(safe-area-inset-bottom))!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  -webkit-transform:translateX(-50%)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* =========================================================
   39-S13-fix16：桌機底部導航背景高度修正
   - 桌機寬螢幕下，底部導航背景高度完整包住 icon + 文字
   - 移除桌機不需要的 body safe-area 黑色覆蓋層，避免背景/分隔線視覺外溢
   - 手機與 PWA safe-area 不動
   ========================================================= */
@media (min-width: 700px) and (hover: hover) {
  body::after{
    display:none!important;
    content:none!important;
  }
  .bottom-nav{
    height:86px!important;
    min-height:86px!important;
    padding-top:10px!important;
    padding-bottom:12px!important;
    background:linear-gradient(180deg,rgba(5,5,7,.96),rgba(0,0,0,.99) 42%,#000)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .bottom-nav .nav{
    min-height:64px!important;
    height:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .bottom-nav .nav::after{
    bottom:7px!important;
  }
}


/* 39-S15-fix1: member language switch */
.member-lang-card {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.member-lang-main { min-width: 0; }
.member-lang-title { font-size: 15px; font-weight: 800; color: #fff; }
.member-lang-desc { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.35; }
.member-lang-actions {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.member-lang-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  min-width: 74px;
  background: transparent;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
}
.member-lang-btn.is-active {
  background: rgba(255,255,255,.92);
  color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
@media (max-width: 360px) {
  .member-lang-card { align-items: stretch; flex-direction: column; }
  .member-lang-actions { align-self: flex-start; }
}


/* stage39-S15-fix5: 追劇愛心狀態色優化 */
.wb-heart,
.wb-heart-empty {
  color: #ff5fa2;
  text-shadow: 0 0 14px rgba(255, 95, 162, .38);
}

.wb-heart-entry {
  font-weight: 950;
}

.member-menu .wb-heart-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff6bba;
  text-shadow: 0 0 14px rgba(255, 95, 162, .34);
}

.favorite-btn.is-favorited,
button.favorite-btn.is-favorited {
  background: linear-gradient(135deg, rgba(255, 95, 162, .26), rgba(123, 97, 255, .18)) !important;
  border-color: rgba(255, 95, 162, .58) !important;
  color: #ff8ec7 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 12px 28px rgba(255, 79, 163, .18) !important;
}

.follow-empty-icon.wb-heart-empty {
  background: rgba(255, 95, 162, .13);
  border: 1px solid rgba(255, 95, 162, .22);
}

.swipe-action.is-followed {
  background: linear-gradient(135deg, rgba(255, 95, 162, .26), rgba(123, 97, 255, .18)) !important;
  border-color: rgba(255, 95, 162, .55) !important;
  color: #ff8ec7 !important;
  box-shadow: 0 12px 28px rgba(255, 79, 163, .2) !important;
}

/* =========================================================
   39-S16-A：iPad / 平板基礎容器與底部導航適配
   - 只在觸控平板寬度以上生效，手機版原樣保留
   - 先只處理容器置中與底部導航寬度，不改播放/上傳/資料邏輯
   ========================================================= */
@media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 760px;
    --wb-tablet-nav-max: 720px;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: 100%;
    max-width: var(--wb-tablet-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.045);
    border-right: 1px solid rgba(255,255,255,.045);
    box-shadow: 0 0 42px rgba(0,0,0,.34);
  }

  .app {
    padding-left: 0;
    padding-right: 0;
  }

  .top {
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 18px;
    padding-right: 18px;
    gap: 20px 12px;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card {
    margin-left: 18px;
    margin-right: 18px;
  }

  .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky {
    left: 50% !important;
    right: auto !important;
    width: min(100%, var(--wb-tablet-nav-max)) !important;
    max-width: var(--wb-tablet-nav-max) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-left: 1px solid rgba(255,255,255,.045) !important;
    border-right: 1px solid rgba(255,255,255,.045) !important;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    overflow: hidden;
  }

  .continue {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100% - 32px), 690px) !important;
    max-width: 690px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}

@media (min-width: 1024px) and (hover: none), (min-width: 1024px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 840px;
    --wb-tablet-nav-max: 760px;
  }
}


/* =========================================================
   39-S16-A-fix1：iPad mini / 平板版面補強
   - 下修平板判斷，但排除手機橫式低高度場景
   - iPad mini 橫式加寬內容區，避免看起來仍像手機版
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 920px;
    --wb-tablet-nav-max: 820px;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: min(calc(100vw - 48px), var(--wb-tablet-content-max)) !important;
    max-width: var(--wb-tablet-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .top {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 22px 14px !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky {
    width: min(calc(100vw - 48px), var(--wb-tablet-nav-max)) !important;
    max-width: var(--wb-tablet-nav-max) !important;
  }

  .continue {
    width: min(calc(100vw - 80px), 820px) !important;
    max-width: 820px !important;
  }
}

@media (min-width: 900px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 960px;
    --wb-tablet-nav-max: 840px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px 16px !important;
  }

  .title {
    font-size: 16px;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-content-max: 1080px;
    --wb-tablet-nav-max: 880px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   39-S16-A-fix2：iPad 內容寬度與底部 Dock 修正
   - iPad mini 橫式減少左右黑邊
   - 底部導航改成置中浮動 Dock
   - 繼續觀看浮層上移，避免貼住導航列
   - iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-edge: 10px;
    --wb-tablet-content-max: 1160px;
    --wb-tablet-nav-max: 640px;
    --wb-tablet-continue-max: 900px;
  }

  html,
  body {
    background: #000 !important;
  }

  .app,
  .detail,
  .watch,
  .watch-app {
    width: min(calc(100vw - (var(--wb-tablet-edge) * 2)), var(--wb-tablet-content-max)) !important;
    max-width: var(--wb-tablet-content-max) !important;
    border-left: 1px solid rgba(255,255,255,.035) !important;
    border-right: 1px solid rgba(255,255,255,.035) !important;
    box-shadow: none !important;
  }

  .top {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card,
  .search-panel,
  .search-related-section,
  .category-head {
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .home-section-head {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 22px 14px !important;
  }

  .home-section-row {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 14px !important;
    grid-auto-columns: calc((100% - 42px) / 4) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 180px), var(--wb-tablet-nav-max)) !important;
    min-width: 560px !important;
    max-width: var(--wb-tablet-nav-max) !important;
    height: 72px !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 28px !important;
    background: rgba(8,8,12,.82) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    overflow: hidden !important;
  }

  body.is-pwa-standalone .nav,
  .bottom-nav .nav {
    justify-content: center !important;
    padding-top: 0 !important;
    gap: 4px !important;
  }

  .bottom-nav .nav-icon {
    font-size: 23px !important;
  }

  .nav-reward {
    top: 6px !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: 50% !important;
    right: auto !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 96px), var(--wb-tablet-continue-max)) !important;
    max-width: var(--wb-tablet-continue-max) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app {
    padding-bottom: 178px !important;
  }
}

@media (min-width: 700px) and (max-width: 899px) and (min-height: 700px) {
  :root {
    --wb-tablet-edge: 12px;
    --wb-tablet-nav-max: 620px;
    --wb-tablet-continue-max: 760px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 28px) / 3) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav {
    width: min(calc(100vw - 120px), var(--wb-tablet-nav-max)) !important;
    min-width: 560px !important;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-edge: 18px;
    --wb-tablet-content-max: 1280px;
    --wb-tablet-nav-max: 700px;
    --wb-tablet-continue-max: 980px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 64px) / 5) !important;
    gap: 16px !important;
  }
}


/* =========================================================
   39-S16-A-fix3：iPad 滿版與底部導航圖示修正
   - 平板寬度以上改成真正吃滿 PWA 視窗
   - 修正 iPad 底部導航 icon / 文字過小
   - iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 28px;
    --wb-tablet-bottom-nav-h: 86px;
    --wb-tablet-continue-bottom: calc(98px + env(safe-area-inset-bottom));
  }

  html,
  body {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: #050505 !important;
    overflow-x: hidden !important;
  }

  body::before,
  body::after {
    background: #050505 !important;
  }

  .app,
  .detail,
  .watch,
  .watch-app,
  .search-clean-page {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background: #050505 !important;
  }

  .app,
  .search-clean-page {
    padding-bottom: calc(190px + env(safe-area-inset-bottom)) !important;
  }

  .top {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
  }

  .home-entry-panel,
  .recommend-note,
  .member-menu,
  .member-note,
  .member-browse-history,
  .guest-card,
  .member-card,
  .auth-card,
  .install-card,
  .reward-card,
  .search-panel,
  .search-related-section,
  .category-head,
  .detail-card,
  .episode-panel,
  .watch-panel {
    margin-left: var(--wb-tablet-page-pad) !important;
    margin-right: var(--wb-tablet-page-pad) !important;
  }

  .home-section-head {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
    gap: 24px 18px !important;
  }

  .home-section-row {
    padding-left: var(--wb-tablet-page-pad) !important;
    padding-right: var(--wb-tablet-page-pad) !important;
    gap: 18px !important;
    grid-auto-columns: calc((100% - 36px) / 3) !important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 8px max(38px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(38px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(12,12,16,.92), rgba(3,3,5,.98)) !important;
    box-shadow: 0 -18px 46px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    font-size: 30px !important;
    line-height: 1 !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1px !important;
  }

  .bottom-nav .nav.active::after {
    bottom: -4px !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad) !important;
    right: var(--wb-tablet-page-pad) !important;
    bottom: var(--wb-tablet-continue-bottom) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app {
    padding-bottom: calc(205px + env(safe-area-inset-bottom)) !important;
  }
}

@media (min-width: 900px) and (min-height: 700px), (min-width: 1024px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 24px;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 54px) / 4) !important;
  }
}

@media (min-width: 1180px) and (min-height: 760px), (min-width: 1180px) and (pointer: coarse) {
  :root {
    --wb-tablet-page-pad: 32px;
  }

  .grid,
  .home-wall .grid,
  .category-grid.grid,
  .home-section-grid.grid,
  .search-related-section .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .home-section-row {
    grid-auto-columns: calc((100% - 72px) / 5) !important;
  }
}

/* =========================================================
   39-S16-A-fix4：iPad 底部導航 icon 實際尺寸修正
   - 修正平板版只放大 nav-icon 容器、沒有放大 SVG mask ::before 的問題
   - 只在平板寬度生效，iPhone 直式手機版不套用
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    font-size: 15px !important;
    gap: 7px !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    min-height: 42px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    display: block !important;
    transform: translateY(0) scale(1) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    transform: translateY(-2px) scale(1.12) !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
  }
}

/* =========================================================
   39-S16-A-fix5：iPad 底部導航恢復固定貼底版
   - 移除平板浮動 Dock 感，改回穩定貼底滿版導航
   - 修正 icon / 文字對位與 active 光暈被蓋住的問題
   - 保留 iPad 內容滿版與左右黑邊修正
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-bottom-nav-h: 72px;
    --wb-tablet-continue-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--wb-tablet-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 6px max(28px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(10,10,14,.94), rgba(2,2,4,.99)) !important;
    box-shadow: 0 -14px 38px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 0 0 !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    width: 38px !important;
    height: 32px !important;
    min-width: 38px !important;
    min-height: 32px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(0) scale(1) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.70) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    transform: translateY(-1px) scale(1.10) !important;
  }

  .bottom-nav .nav.active .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after {
    bottom: 0 !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after {
    bottom: 0 !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: var(--wb-tablet-continue-bottom) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }
}


/* =========================================================
   39-S16-A-fix6：還原浮動 Dock 後的底部導航光暈層級
   - 保留 iPad 內容滿版
   - 不再讓平板版底部導航使用浮動 Dock 殘留層級
   - 光暈改回在導航列上方、icon 後方，不被背景遮罩壓暗
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 5px max(24px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-right)) !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(5,5,7,.90), #050505 42%, #030303) !important;
    box-shadow: 0 -18px 42px rgba(0,0,0,.46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    color: #888394 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .bottom-nav .nav.active,
  body.is-pwa-standalone .bottom-nav .nav.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 22px rgba(185,102,255,.35) !important;
  }

  .bottom-nav .nav::before,
  body.is-pwa-standalone .bottom-nav .nav::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 9px !important;
    width: 58px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 48%, rgba(255,83,198,.42) 0%, rgba(139,92,255,.30) 42%, rgba(139,92,255,0) 74%) !important;
    filter: blur(1px) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scale(.74) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  .bottom-nav .nav.active::before,
  body.is-pwa-standalone .bottom-nav .nav.active::before {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 0 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after {
    content: none !important;
    display: none !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   39-S16-A-fix7：還原底部導航原始光暈 + 修正刷劇頁導航貼底
   - 清掉平板浮動 Dock 殘留對 bottom-nav 的覆蓋
   - 底部導航保留貼底滿版，但 active 光暈回到 icon 後方
   - 刷劇頁平板版導航固定貼底，不再被往上拉
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-nav-height: calc(72px + max(env(safe-area-inset-bottom), 18px));
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--wb-tablet-nav-height) !important;
    min-height: var(--wb-tablet-nav-height) !important;
    margin: 0 !important;
    padding: 4px max(28px, env(safe-area-inset-left)) max(env(safe-area-inset-bottom), 18px) max(28px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #020202) !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 3px !important;
    color: #888394 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    isolation: auto !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 1 !important;
  }

  .bottom-nav .nav.active,
  body.is-pwa-standalone .bottom-nav .nav.active,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 22px rgba(185,102,255,.35) !important;
  }

  .bottom-nav .nav::before,
  body.is-pwa-standalone .bottom-nav .nav::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  .bottom-nav .nav-icon,
  body.is-pwa-standalone .bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 0 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom-nav .nav:nth-child(1) .nav-icon::before,
  .bottom-nav .nav:nth-child(2) .nav-icon::before,
  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  .bottom-nav .nav:nth-child(4) .nav-icon::before,
  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    content: "" !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease, background .18s ease !important;
  }

  .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .bottom-nav .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.24), rgba(162,101,255,.32) 38%, rgba(255,53,139,.18) 60%, transparent 78%) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(.5px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    display: block !important;
  }

  .bottom-nav .nav.active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::before,
  .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.is-pwa-standalone .bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  .bottom-nav .nav.active .nav-icon::after,
  body.is-pwa-standalone .bottom-nav .nav.active .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: max(4px, calc(env(safe-area-inset-bottom) + 4px)) !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none !important;
  }

  .bottom-nav .nav.active::after,
  body.is-pwa-standalone .bottom-nav .nav.active::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .bottom-nav .nav-reward {
    top: 5px !important;
    right: 22% !important;
    transform: none !important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: var(--wb-tablet-page-pad, 28px) !important;
    bottom: calc(var(--wb-tablet-nav-height) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom: calc(var(--wb-tablet-nav-height) + 92px) !important;
  }

  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: var(--wb-tablet-nav-height) !important;
    padding-bottom: 0 !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    padding-bottom: 0 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: calc(var(--wb-tablet-nav-height) + 10px) !important;
  }
}

/* =========================================================
   39-S16-A-fix8：刷劇頁 iPad 底部導航強制貼底
   - iPad / 平板的刷劇頁會因 visualViewport 底部 gap 讓 fixed nav 看起來被往上拉
   - 只針對 swipe.php 的 .swipe-bottom-nav，把導航背景向下延伸到實際螢幕底部
   - 不改一般頁面的底部導航、不改手機直式主版面
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: calc(72px + env(safe-area-inset-bottom));
    --wb-swipe-tablet-nav-base: 72px;
    --wb-swipe-tablet-gap: var(--swipe-bottom-gap, 0px);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(-1 * var(--wb-swipe-tablet-gap)) !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(var(--wb-swipe-tablet-nav-base) + env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) !important;
    min-height: calc(var(--wb-swipe-tablet-nav-base) + env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) !important;
    margin: 0 !important;
    padding: 4px max(28px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap)) max(28px, env(safe-area-inset-right)) !important;
    transform: translate3d(0,0,0) !important;
    -webkit-transform: translate3d(0,0,0) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #000) !important;
    z-index: 999 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    bottom: calc(env(safe-area-inset-bottom) + var(--wb-swipe-tablet-gap) + 4px) !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: calc(var(--swipe-restored-nav-height) + 10px) !important;
  }
}

/* =========================================================
   39-S16-A-fix9：iPad PWA 底部 safe-area 導航貼底修正
   - 導航背景吃到 home indicator 區域
   - icon / 文字仍留在安全區上方
   - 不再依賴 swipe visualViewport gap 把整條導航推上去
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  :root {
    --wb-tablet-nav-core-h: 72px;
    --wb-tablet-safe-fill: max(env(safe-area-inset-bottom), 36px);
    --wb-tablet-nav-total-h: calc(var(--wb-tablet-nav-core-h) + var(--wb-tablet-safe-fill));
  }

  html,
  body {
    background:#000!important;
  }

  body::after {
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    height:var(--wb-tablet-safe-fill)!important;
    transform:none!important;
    background:linear-gradient(180deg, rgba(5,5,7,.96), #000)!important;
    z-index:89!important;
    pointer-events:none!important;
  }

  .bottom-nav,
  body.is-pwa-standalone .bottom-nav,
  body:not(.search-body-v2) .search-clean-page ~ .bottom-nav,
  body:not(.search-body):not(.search-page-body):not(.page-search) .search-clean-page ~ .bottom-nav,
  body.search-body-v2 .bottom-nav,
  body.search-body-v2 .bottom-nav.bottom-nav--sticky,
  body.page-search .bottom-nav,
  html.wb-search-page-ready body.search-body .bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100vw!important;
    max-width:none!important;
    min-width:0!important;
    height:var(--wb-tablet-nav-total-h)!important;
    min-height:var(--wb-tablet-nav-total-h)!important;
    margin:0!important;
    padding:4px max(28px, env(safe-area-inset-left)) var(--wb-tablet-safe-fill) max(28px, env(safe-area-inset-right))!important;
    transform:none!important;
    -webkit-transform:none!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(180deg, rgba(7,7,10,.94), #050505 55%, #000)!important;
    box-shadow:0 -16px 40px rgba(0,0,0,.48), 0 80px 0 80px #000!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    z-index:120!important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    z-index:999!important;
  }

  .bottom-nav::after,
  body.is-pwa-standalone .bottom-nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content:""!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:var(--wb-tablet-safe-fill)!important;
    background:linear-gradient(180deg, rgba(5,5,7,.96), #000)!important;
    z-index:-1!important;
    pointer-events:none!important;
    display:block!important;
  }

  .bottom-nav .nav,
  body.is-pwa-standalone .bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:visible!important;
  }

  .bottom-nav .nav::after,
  body.is-pwa-standalone .bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    bottom:4px!important;
  }

  .continue,
  body.is-pwa-standalone .continue {
    bottom:calc(var(--wb-tablet-nav-total-h) + 10px)!important;
  }

  body.has-bottom-nav .app,
  body.is-pwa-standalone .app,
  .app,
  .search-clean-page {
    padding-bottom:calc(var(--wb-tablet-nav-total-h) + 92px)!important;
  }

  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: var(--wb-tablet-nav-total-h)!important;
    --wb-swipe-tablet-gap: 0px!important;
    --swipe-bottom-gap: 0px!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
    background:#000!important;
  }

  body.swipe-nav-restored-body .swipe-page {
    bottom:0!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom:calc(var(--wb-tablet-nav-total-h) + 10px)!important;
  }
}


/* =========================================================
   39-S16-A-fix10：刷劇頁底部導航規則重整
   - 只針對 swipe.php 的 swipe-bottom-nav
   - 清掉前面 iPad 浮動 Dock / safe-area 把內容往上推的殘留
   - 一般頁面的 bottom-nav 不受影響
   ========================================================= */
@media (min-width: 700px) and (min-height: 520px) {
  body.swipe-nav-restored-body {
    --swipe-restored-nav-height: 68px !important;
    --wb-swipe-tablet-gap: 0px !important;
    --swipe-bottom-gap: 0px !important;
    background:#000 !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
  }

  body.swipe-nav-restored-body .swipe-page {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:68px !important;
    min-height:68px !important;
    margin:0 !important;
    padding:0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)) !important;
    transform:none !important;
    -webkit-transform:none !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    background:#050505 !important;
    box-shadow:0 -10px 32px rgba(0,0,0,.38) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    z-index:999 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content:none !important;
    display:none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    height:68px !important;
    min-height:68px !important;
    padding:0 !important;
    gap:3px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    position:relative !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    width:28px !important;
    height:28px !important;
    font-size:22px !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:2 !important;
    margin:0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width:27px !important;
    height:27px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    font-size:12px !important;
    line-height:1.1 !important;
    position:relative !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::before {
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:18px !important;
    width:44px !important;
    height:36px !important;
    transform:translateX(-50%) !important;
    border-radius:999px !important;
    background:radial-gradient(circle, rgba(255,79,163,.42) 0%, rgba(123,97,255,.25) 45%, rgba(255,79,163,0) 74%) !important;
    filter:blur(7px) !important;
    z-index:0 !important;
    pointer-events:none !important;
    display:block !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    bottom:4px !important;
    z-index:2 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom:calc(68px + 10px) !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom:calc(68px + 118px) !important;
  }
}

/* =========================================================
   39-S16-A-fix11：刷劇頁 iPad 影片比例與導航對位修正
   - 只針對 swipe.php 的 iPad / 平板橫式
   - 影片改回完整顯示，不再用 cover 裁切放大
   - swipe-bottom-nav 內部 icon / 文字 / 光暈重新置中
   ========================================================= */
@media (min-width: 700px) and (orientation: landscape) {
  body.swipe-nav-restored-body .swipe-video-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 68px !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .swipe-cover {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: .22 !important;
    filter: blur(22px) saturate(1.05) brightness(.52) !important;
    transform: scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 68px !important;
    min-height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 32px 15px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 3px !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    position: relative !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    height: 15px !important;
    display: block !important;
    text-align: center !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    display: none !important;
    content: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.78) !important;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.24), rgba(172,105,255,.32) 36%, rgba(255,65,154,.16) 58%, transparent 76%) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    bottom: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(1) !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 78px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 186px !important;
  }
}

/* =========================================================
   39-S16-A-fix12：iPad mini 直式刷劇頁影片比例與導航對位修正
   - 只針對 swipe.php 的平板直式刷劇頁
   - 影片改為 contain，避免在 iPad mini 直式被 cover 過度放大裁切
   - swipe-bottom-nav 內部 icon / 文字 / 光暈重新對齊
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap {
    position: absolute !important;
    inset: 0 0 68px 0 !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #000 !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .swipe-cover {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: .24 !important;
    filter: blur(24px) saturate(1.08) brightness(.52) !important;
    transform: scale(1.1) !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap::after {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,0) 46%),
      linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.42) 28%, rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 84%) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    background: #050505 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 -10px 32px rgba(0,0,0,.38) !important;
    overflow: visible !important;
    z-index: 999 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: 31px 15px !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 4px !important;
    overflow: visible !important;
    color: #8c8798 !important;
    text-decoration: none !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    color: #fff !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    grid-row: 1 !important;
    position: relative !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 18px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    transform: translate(-50%, -50%) scale(.78) !important;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.24), rgba(172,105,255,.34) 36%, rgba(255,65,154,.20) 58%, transparent 76%) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter: blur(.3px) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    grid-row: 2 !important;
    display: block !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 78px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 186px !important;
  }
}

/* =========================================================
   39-S16-A-fix13：刷劇頁底部導航圖示對位修正
   - 只針對 iPad mini / 平板直式的 swipe-bottom-nav
   - 不再改影片比例與一般頁 bottom-nav
   - 用固定座標重排 icon / 文字 / 光暈 / 底線，避免 grid/flex 疊加錯位
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 72px !important;
    min-height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: block !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: absolute !important;
    left: 50% !important;
    top: 10px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translate(-50%, -50%) scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 45px !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    opacity: 0 !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 82px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 190px !important;
  }
}

/* =========================================================
   39-S16-A-fix14：刷劇頁底部導航全圖示對位修正
   - 修正 fix13 只讓 active 圖示看起來正常，非 active 圖示仍錯位
   - 只針對 iPad mini / 平板直式的 swipe-bottom-nav
   - 不動影片比例與一般頁 bottom-nav
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 5px 0 8px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    content: "" !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    z-index: 2 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translateY(-1px) scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: none !important;
    display: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    opacity: 0 !important;
    z-index: 3 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    bottom: 82px !important;
  }

  body.swipe-nav-restored-body .swipe-hint {
    bottom: 190px !important;
  }
}

/* =========================================================
   39-S16-A-fix15：刷劇頁 iPad 頂部控制列位置優化
   - 只針對平板 / iPad 的刷劇頁頂部控制
   - 左上返回與標題避開狀態列，稍微往下、往內
   - 右上靜音按鈕避開電量區，稍微往下、往內
   ========================================================= */
@media (min-width: 700px) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 54px !important;
    padding: calc(20px + env(safe-area-inset-top)) calc(34px + env(safe-area-inset-right)) 8px calc(30px + env(safe-area-inset-left)) !important;
    gap: 10px !important;
    align-items: center !important;
    z-index: 28 !important;
  }

  body.swipe-nav-restored-body .swipe-topbar a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 25px !important;
    line-height: 1 !important;
    background: rgba(0,0,0,.34) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  }

  body.swipe-nav-restored-body .swipe-topbar strong {
    font-size: 17px !important;
    line-height: 36px !important;
    font-weight: 950 !important;
  }

  body.swipe-nav-restored-body .swipe-sound-toggle {
    top: calc(20px + env(safe-area-inset-top)) !important;
    right: calc(34px + env(safe-area-inset-right)) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 19px !important;
    z-index: 30 !important;
    background: rgba(0,0,0,.38) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.32) !important;
  }
}


/* =========================================================
   39-S16-A-fix16：刷劇頁 iPad 音效提示對位修正
   - 只調整「點擊靜音可開聲音」提示
   - 與右上靜音按鈕保持同一條視覺基準線
   - 不動影片比例與底部導航
   ========================================================= */
@media (min-width: 700px) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-sound-coach {
    top: calc(20px + env(safe-area-inset-top)) !important;
    right: calc(84px + env(safe-area-inset-right)) !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 14px !important;
    z-index: 29 !important;
  }
}


/* =========================================================
   39-S16-B：iPad Safari 瀏覽器模式一般頁底部導航修正
   - 只套用在 iPad 瀏覽器模式，不影響加入主畫面的 PWA App 模式
   - 不動刷劇頁 swipe-bottom-nav，因刷劇頁在瀏覽器模式已可接受
   - 修正一般頁 bottom-nav 左右黑塊、寬度被平板 Dock 歷史規則限制的問題
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px) {
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav),
  body.is-ipad-safari-browser.search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body.is-ipad-safari-browser.page-search .bottom-nav:not(.swipe-bottom-nav),
  html.wb-ipad-safari-browser.wb-search-page-ready body.search-body .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 8px max(30px, env(safe-area-inset-left)) 8px max(30px, env(safe-area-inset-right)) !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(12,12,16,.92), rgba(3,3,5,.98)) !important;
    box-shadow: 0 -18px 46px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 120 !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    overflow: visible !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 31px !important;
    min-width: 32px !important;
    min-height: 31px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(5) .nav-icon::before {
    width: 28px !important;
    height: 28px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .continue {
    left: 36px !important;
    right: 36px !important;
    bottom: 96px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 14px !important;
    z-index: 110 !important;
  }

  body.is-ipad-safari-browser:not(.swipe-nav-restored-body).has-bottom-nav .app,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .search-clean-page,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .member-page,
  body.is-ipad-safari-browser:not(.swipe-nav-restored-body) .follow-page {
    padding-bottom: 178px !important;
  }
}

/* stage39-S18: 刷劇頁首次點擊開始刷劇 */
.swipe-start-gate{
  position:absolute;
  left:50%;
  top:50%;
  z-index:32;
  transform:translate(-50%,-50%) scale(1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(123,97,255,.88),rgba(255,63,142,.88));
  color:#fff;
  font-size:18px;
  font-weight:950;
  letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  box-shadow:0 20px 54px rgba(255,63,142,.22),0 12px 42px rgba(123,97,255,.26);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:opacity .2s ease,transform .2s ease;
}
.swipe-start-gate .swipe-start-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:14px;
  line-height:1;
  padding-left:2px;
}
.swipe-start-gate.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.94);
}
body.swipe-immersive-body .swipe-sound-coach,
body.swipe-nav-restored-body .swipe-sound-coach{
  display:none!important;
}
@media (max-width:420px){
  .swipe-start-gate{font-size:17px;min-height:54px;padding:0 20px;}
}

/* stage39-S20: 刷劇頁桌機操作優化 */
.swipe-desktop-controls{
  display:none;
}
@media (hover:hover) and (pointer:fine){
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls{
    position:absolute;
    right:26px;
    top:50%;
    z-index:34;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:14px;
    pointer-events:auto;
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control{
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(10,10,18,.52);
    color:#fff;
    font-size:25px;
    font-weight:950;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    cursor:pointer;
    transition:transform .16s ease, background .16s ease, border-color .16s ease;
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control:hover{
    transform:scale(1.06);
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.34);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control:active{
    transform:scale(.96);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-onboarding{
    width:min(86%,420px);
  }
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-onboarding-title{
    font-size:18px;
  }
}


/* =========================================================
   39-S20-fix1：桌機版誤套平板樣式修正
   - 前面 iPad 適配有部分 min-width 條件同時命中桌機
   - 這裡只在滑鼠/觸控板桌機環境復原桌機版：平板規則仍保留給 iPad / 觸控平板
   - 不影響刷劇頁桌機滾輪 / 鍵盤切換功能
   ========================================================= */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  html,
  body {
    background: #000 !important;
    overflow-x: hidden !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app,
  body:not(.swipe-immersive-body) .search-clean-page {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.04) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    box-shadow: none !important;
    background: #050505 !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 150px !important;
  }

  body:not(.swipe-immersive-body) .top {
    padding: calc(12px + env(safe-area-inset-top)) 14px 8px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: 31.5% !important;
    gap: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-section-head {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .detail-card,
  body:not(.swipe-immersive-body) .episode-panel,
  body:not(.swipe-immersive-body) .watch-panel {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) body.is-pwa-standalone .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav.bottom-nav--sticky:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(100%, 520px) !important;
    min-width: 0 !important;
    max-width: 520px !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 10px 0 12px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background: linear-gradient(180deg,rgba(5,5,7,.96),rgba(0,0,0,.99) 42%,#000) !important;
    box-shadow: 0 -14px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 64px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #888394 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    overflow: visible !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    transform: translateY(0) scale(1) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(5) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav.active .nav-icon::before {
    transform: translateY(-2px) scale(1.12) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 7px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    bottom: 98px !important;
    width: min(calc(100% - 20px), 500px) !important;
    max-width: 500px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 9px !important;
    z-index: 80 !important;
  }
}

/* =========================================================
   39-S21-A：桌機版前臺正式適配 v1
   - 只套用滑鼠/觸控板桌機：避免影響 iPhone / iPad / 觸控平板
   - 先建立桌機版基礎容器、卡片欄位、會員頁與底部導航
   - 保留 39-S20 桌機刷劇滾輪 / 鍵盤操作
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-page-max: 1360px;
    --wb-desktop-narrow-max: 980px;
    --wb-desktop-edge: 28px;
    --wb-desktop-nav-max: 760px;
    --wb-desktop-nav-height: 78px;
  }

  html,
  body {
    background: #000 !important;
    min-width: 1024px !important;
    overflow-x: hidden !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app {
    width: min(calc(100vw - (var(--wb-desktop-edge) * 2)), var(--wb-desktop-page-max)) !important;
    max-width: var(--wb-desktop-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-left: 1px solid rgba(255,255,255,.04) !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
    background: #050505 !important;
    box-shadow: none !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 150px !important;
  }

  body:not(.swipe-immersive-body) .member-page,
  body:not(.swipe-immersive-body) .follow-page,
  body:not(.swipe-immersive-body) .auth-page {
    width: min(calc(100vw - 72px), var(--wb-desktop-narrow-max)) !important;
    max-width: var(--wb-desktop-narrow-max) !important;
  }

  body:not(.swipe-immersive-body) .top {
    padding: 18px 26px 12px !important;
    background: linear-gradient(to bottom,#050505 86%,rgba(5,5,5,.88)) !important;
  }

  body:not(.swipe-immersive-body) .search-row {
    gap: 14px !important;
  }

  body:not(.swipe-immersive-body) .search {
    height: 44px !important;
    border-radius: 10px !important;
  }

  body:not(.swipe-immersive-body) .tabs {
    gap: 28px !important;
    padding: 20px 2px 9px !important;
  }

  body:not(.swipe-immersive-body) .subtabs {
    gap: 22px !important;
    padding: 9px 0 12px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 26px 16px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: calc((100% - 80px) / 6) !important;
    gap: 16px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-section-head,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 14px !important;
    margin: 18px 26px 26px !important;
    padding: 0 !important;
  }

  body:not(.swipe-immersive-body) .title {
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  body:not(.swipe-immersive-body) .tags {
    font-size: 13px !important;
  }

  /* 桌機會員/追劇頁：不要再像手機版窄欄，卡片寬度與底部導航對齊 */
  body:not(.swipe-immersive-body) .member-hero,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .member-card {
    padding: 20px !important;
    align-items: center !important;
  }

  body:not(.swipe-immersive-body) .member-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    font-size: 34px !important;
  }

  body:not(.swipe-immersive-body) .member-name {
    font-size: 24px !important;
  }

  body:not(.swipe-immersive-body) .member-email,
  body:not(.swipe-immersive-body) .member-meta {
    font-size: 15px !important;
  }

  /* 桌機一般底部導航：固定置中，不吃平板 Dock，不出現左右黑塊 */
  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(calc(100vw - 120px), var(--wb-desktop-nav-max)) !important;
    max-width: var(--wb-desktop-nav-max) !important;
    min-width: 620px !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 9px 0 10px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg,rgba(8,8,12,.94),rgba(0,0,0,.98)) !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    z-index: 90 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 56px !important;
    gap: 4px !important;
    justify-content: center !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 32px !important;
    height: 30px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 26px !important;
    height: 26px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 29px !important;
    height: 29px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--wb-desktop-nav-height) + 18px) !important;
    width: min(calc(100vw - 120px), 1080px) !important;
    max-width: 1080px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    grid-auto-columns: calc((100% - 96px) / 7) !important;
  }
}

/* 桌機刷劇頁基礎版：保留滾輪/鍵盤切換，但不要讓影片巨大裁切 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    background: #000 !important;
    overflow: hidden !important;
  }

  body.swipe-nav-restored-body .swipe-page,
  body.swipe-immersive-body .swipe-page {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap,
  body.swipe-immersive-body .swipe-video-wrap {
    position: absolute !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(980px, calc(100vw - 320px)) !important;
    min-width: 620px !important;
    height: calc(100vh - 190px) !important;
    height: calc(100dvh - 190px) !important;
    max-height: 760px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    background: #000 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.swipe-nav-restored-body .swipe-video,
  body.swipe-immersive-body .swipe-video,
  body.swipe-nav-restored-body .swipe-video.is-landscape,
  body.swipe-immersive-body .swipe-video.is-landscape {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    background: #000 !important;
  }

  body.swipe-nav-restored-body .swipe-cover,
  body.swipe-immersive-body .swipe-cover {
    opacity: .18 !important;
    filter: blur(26px) saturate(1.05) brightness(.55) !important;
    transform: scale(1.08) !important;
  }

  body.swipe-nav-restored-body .swipe-info,
  body.swipe-immersive-body .swipe-info {
    left: max(32px, calc((100vw - 980px) / 2)) !important;
    right: max(32px, calc((100vw - 980px) / 2)) !important;
    bottom: 92px !important;
    padding: 0 !important;
    max-width: 980px !important;
  }

  body.swipe-nav-restored-body .swipe-info h1,
  body.swipe-immersive-body .swipe-info h1 {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  body.swipe-nav-restored-body .swipe-info p,
  body.swipe-immersive-body .swipe-info p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 2 !important;
  }

  body.swipe-nav-restored-body .swipe-bottom-nav,
  body.swipe-immersive-body .swipe-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px 10vw 8px !important;
    transform: none !important;
    -webkit-transform: none !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg,rgba(7,7,10,.92),#000) !important;
    z-index: 90 !important;
  }
}

/* =========================================================
   39-S21-A-fix1：桌機版底部導航與繼續觀看浮層修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad 觸控版
   - 降低桌機底部導航遮擋感，縮窄繼續觀看浮層並拉開距離
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-nav-max: 660px;
    --wb-desktop-nav-height: 66px;
    --wb-desktop-continue-max: 920px;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 172px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    width: min(calc(100vw - 160px), var(--wb-desktop-nav-max)) !important;
    max-width: var(--wb-desktop-nav-max) !important;
    min-width: 560px !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    padding: 7px 0 8px !important;
    border-radius: 14px 14px 0 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 50px !important;
    height: 50px !important;
    gap: 3px !important;
    font-size: 11.5px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav-icon::after {
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
  }

  body:not(.swipe-immersive-body) .continue {
    bottom: calc(var(--wb-desktop-nav-height) + 30px) !important;
    width: min(calc(100vw - 220px), var(--wb-desktop-continue-max)) !important;
    max-width: var(--wb-desktop-continue-max) !important;
    min-height: 66px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.34) !important;
  }

  body:not(.swipe-immersive-body) .continue-cover {
    width: 52px !important;
    height: 52px !important;
  }

  body:not(.swipe-immersive-body) .continue-title {
    font-size: 15px !important;
  }

  body:not(.swipe-immersive-body) .continue-ep {
    font-size: 12.5px !important;
  }

  body:not(.swipe-immersive-body) .continue-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   39-S21-A-fix2：桌機版統一內容寬度與底部導航對齊
   - 只套用桌機/筆電：不影響 iPhone 與 iPad/平板觸控版
   - 一般前臺頁面、底部導航、繼續觀看浮層使用同一個桌機寬度基準
   - 刷劇頁保留專用版面，不套用本段一般頁寬度
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-nav-height: 66px;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .member-page,
  body:not(.swipe-immersive-body) .follow-page,
  body:not(.swipe-immersive-body) .auth-page,
  body:not(.swipe-immersive-body) .search-clean-page,
  body:not(.swipe-immersive-body) .detail,
  body:not(.swipe-immersive-body) .watch,
  body:not(.swipe-immersive-body) .watch-app {
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:not(.swipe-immersive-body) .app,
  body:not(.swipe-immersive-body) .search-clean-page {
    padding-bottom: 176px !important;
  }

  body:not(.swipe-immersive-body) .top,
  body:not(.swipe-immersive-body) .home-section-head,
  body:not(.swipe-immersive-body) .category-head,
  body:not(.swipe-immersive-body) .search-panel,
  body:not(.swipe-immersive-body) .search-related-section,
  body:not(.swipe-immersive-body) .recommend-head,
  body:not(.swipe-immersive-body) .follow-head {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel,
  body:not(.swipe-immersive-body) .recommend-note,
  body:not(.swipe-immersive-body) .member-hero,
  body:not(.swipe-immersive-body) .member-menu,
  body:not(.swipe-immersive-body) .member-note,
  body:not(.swipe-immersive-body) .member-browse-history,
  body:not(.swipe-immersive-body) .guest-card,
  body:not(.swipe-immersive-body) .member-card,
  body:not(.swipe-immersive-body) .auth-card,
  body:not(.swipe-immersive-body) .install-card,
  body:not(.swipe-immersive-body) .reward-card,
  body:not(.swipe-immersive-body) .follow-list,
  body:not(.swipe-immersive-body) .follow-item,
  body:not(.swipe-immersive-body) .detail-card,
  body:not(.swipe-immersive-body) .episode-panel,
  body:not(.swipe-immersive-body) .watch-panel {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .grid,
  body:not(.swipe-immersive-body) .home-wall .grid,
  body:not(.swipe-immersive-body) .category-grid.grid,
  body:not(.swipe-immersive-body) .home-section-grid.grid,
  body:not(.swipe-immersive-body) .search-related-section .grid {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .home-section-row {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body).page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav),
  body:not(.search-body-v2):not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
  }

  body:not(.swipe-immersive-body) .continue {
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    margin: 0 !important;
    bottom: calc(var(--wb-desktop-nav-height) + 22px) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  :root {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix3：桌機會員頁底部導航定位修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 覆蓋早期 member-body 手機/PWA 專用 bottom-nav 規則，避免桌機會員頁導航被推到右側裁切
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body .bottom-nav:not(.swipe-bottom-nav),
  html.wb-member-page-ready body.member-body .bottom-nav:not(.swipe-bottom-nav),
  body.member-body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: visible !important;
    will-change: auto !important;
    z-index: 90 !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav {
    min-height: 50px !important;
    height: 50px !important;
    gap: 3px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) .nav::after {
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
  }

  body.member-body .member-page.app {
    padding-bottom: 176px !important;
  }
}


/* =========================================================
   39-S21-A-fix4：桌機版底部導航右側黑塊修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 關閉早期 safe-area 補底層在桌機一般頁造成的右側黑色延伸塊
   - 保留 bottom-nav 本體與繼續觀看浮層的桌機寬度/置中設定
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body)::after,
  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav)::after,
  body.member-body .bottom-nav:not(.swipe-bottom-nav)::after,
  body.search-body-v2 .bottom-nav:not(.swipe-bottom-nav)::after,
  body.page-search .bottom-nav:not(.swipe-bottom-nav)::after,
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav)::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body:not(.swipe-immersive-body) .bottom-nav:not(.swipe-bottom-nav),
  body.member-body .bottom-nav:not(.swipe-bottom-nav),
  body.search-body-v2 .bottom-nav:not(.swipe-bottom-nav),
  body.page-search .bottom-nav:not(.swipe-bottom-nav),
  body:not(.swipe-immersive-body) .search-clean-page ~ .bottom-nav:not(.swipe-bottom-nav) {
    box-sizing: border-box !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
  }
}


/* =========================================================
   39-S21-A-fix5：桌機會員頁捲動修正
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 解除早期「我的頁」PWA 防彈跳規則在桌機造成的捲動鎖定
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html,
  body,
  body.member-body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: auto !important;
  }

  body.member-body .member-page.app {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    padding-bottom: 190px !important;
  }

  body.member-body .member-page.app::after {
    display: block !important;
    height: 96px !important;
  }

  body.member-body .bottom-nav:not(.swipe-bottom-nav) {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 90 !important;
  }
}


/* =========================================================
   39-S21-A-fix6：桌機刷劇頁寬度與底部導航統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 讓刷劇頁底部導航、資訊區與一般桌機頁使用同一寬度基準
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-nav-height: 66px;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe {
    background: #000 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(760px, calc(var(--wb-desktop-frame-width) - 420px)) !important;
    min-width: 520px !important;
    max-width: 760px !important;
    height: calc(100vh - 188px) !important;
    height: calc(100dvh - 188px) !important;
    max-height: 760px !important;
    top: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info {
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    bottom: calc(var(--wb-desktop-nav-height) + 28px) !important;
    padding: 0 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info p,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info p {
    max-width: var(--wb-desktop-frame-width) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
    z-index: 90 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav {
    height: 50px !important;
    min-height: 50px !important;
    gap: 3px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon {
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-label,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav .nav-label {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    right: max(28px, calc((100vw - var(--wb-desktop-frame-width)) / 2 - 74px)) !important;
  }
}

@media (min-width: 1440px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(820px, calc(var(--wb-desktop-frame-width) - 460px)) !important;
    max-width: 820px !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix7：桌機刷劇頁外層框架統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 刷劇頁的左上控制、右上聲音、右側切換、資訊區、底部導航統一限制在桌機框架內
   - 影片本體維持既有合理比例，不把「框架」誤改成影片滿版
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1280px;
    --wb-desktop-frame-edge: 96px;
    --wb-desktop-frame-width: min(calc(100vw - var(--wb-desktop-frame-edge)), var(--wb-desktop-frame-max));
    --wb-desktop-frame-left: calc((100vw - var(--wb-desktop-frame-width)) / 2);
    --wb-desktop-frame-right: calc((100vw - var(--wb-desktop-frame-width)) / 2);
    --wb-desktop-nav-height: 66px;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar {
    position: fixed !important;
    left: var(--wb-desktop-frame-left) !important;
    right: auto !important;
    top: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    box-sizing: border-box !important;
    padding: 22px 0 10px !important;
    z-index: 40 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar a,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar a {
    width: 36px !important;
    height: 36px !important;
    font-size: 24px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-topbar strong,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-topbar strong {
    font-size: 15px !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle {
    position: fixed !important;
    top: 26px !important;
    right: calc(var(--wb-desktop-frame-right) + 16px) !important;
    left: auto !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 42 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    bottom: calc(var(--wb-desktop-nav-height) + 28px) !important;
    padding: 0 !important;
    z-index: 28 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-info p,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-info p {
    max-width: min(100%, var(--wb-desktop-frame-width)) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    z-index: 34 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-bottom-nav,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 90 !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-frame-max: 1360px;
  }
}

/* =========================================================
   39-S21-A-fix8：桌機刷劇頁底部導航統一
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - swipe.php 的 nav 是 body 直屬，不在 .swipe-page 內；因此需直接鎖定 body > .swipe-bottom-nav
   - 讓刷劇頁底部導航寬度、置中、icon/文字/光暈對位回到一般桌機頁同一基準
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--wb-desktop-frame-width) !important;
    max-width: var(--wb-desktop-frame-max) !important;
    min-width: 0 !important;
    height: var(--wb-desktop-nav-height) !important;
    min-height: var(--wb-desktop-nav-height) !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(8,8,12,.90), rgba(0,0,0,.96)) !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0) !important;
    z-index: 90 !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav::after {
    content: none !important;
    display: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    gap: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    color: rgba(232,225,255,.74) !important;
    text-decoration: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon {
    position: relative !important;
    width: 30px !important;
    height: 27px !important;
    min-width: 30px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
  }

  body.swipe-immersive-body > .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body > .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after {
    left: 50% !important;
    right: auto !important;
    bottom: 2px !important;
    width: 20px !important;
    height: 3px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }
}


/* =========================================================
   39-S21-A-fix9：桌機刷劇頁影片尺寸放大
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 保持 contain 不裁切，只放大桌機刷劇頁影片顯示區
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(960px, calc(var(--wb-desktop-frame-width) - 300px), calc(100vw - 360px)) !important;
    min-width: 620px !important;
    max-width: 960px !important;
    height: calc(100vh - 164px) !important;
    height: calc(100dvh - 164px) !important;
    max-height: 820px !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video,
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video.is-landscape,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video.is-landscape {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

@media (min-width: 1600px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-video-wrap,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-video-wrap {
    width: min(1060px, calc(var(--wb-desktop-frame-width) - 280px), calc(100vw - 420px)) !important;
    max-width: 1060px !important;
  }
}

/* =========================================================
   39-S21-A-fix14：桌機刷劇頁右側控制列整合
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   - 將靜音、上一部、下一部整合成同一組右側控制列視覺
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: calc(50% - 78px) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(10,10,18,.52) !important;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    z-index: 44 !important;
    cursor: pointer !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:hover,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.34) !important;
    transform: scale(1.06) !important;
    -webkit-transform: scale(1.06) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:active,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-sound-toggle:active {
    transform: scale(.96) !important;
    -webkit-transform: scale(.96) !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: calc(var(--wb-desktop-frame-right) + 18px) !important;
    left: auto !important;
    top: calc(50% - 22px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    z-index: 43 !important;
    pointer-events: auto !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-control {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* =========================================================
   39-S21-A-fix15：桌機刷劇右側控制列定位修正
   - 將聲音按鈕移出影片 transform 容器後，三顆按鈕統一用 viewport / 桌機框架定位
   - 只套用桌機/筆電，不影響 iPhone 與 iPad/平板觸控版
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.swipe-immersive-body,
  body.swipe-nav-restored-body {
    --wb-desktop-control-size: 44px;
    --wb-desktop-control-gap: 12px;
    --wb-desktop-control-right: calc(var(--wb-desktop-frame-right) + 18px);
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe > .swipe-sound-toggle,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe > .swipe-sound-toggle {
    position: fixed !important;
    right: var(--wb-desktop-control-right) !important;
    left: auto !important;
    top: calc(50% - (var(--wb-desktop-control-size) * 1.5) - var(--wb-desktop-control-gap)) !important;
    width: var(--wb-desktop-control-size) !important;
    height: var(--wb-desktop-control-size) !important;
    min-width: var(--wb-desktop-control-size) !important;
    min-height: var(--wb-desktop-control-size) !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 44 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-controls,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-controls {
    position: fixed !important;
    right: var(--wb-desktop-control-right) !important;
    left: auto !important;
    top: calc(50% - (var(--wb-desktop-control-size) / 2)) !important;
    width: var(--wb-desktop-control-size) !important;
    transform: none !important;
    -webkit-transform: none !important;
    gap: var(--wb-desktop-control-gap) !important;
    z-index: 43 !important;
  }

  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-desktop-control,
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-desktop-control {
    width: var(--wb-desktop-control-size) !important;
    height: var(--wb-desktop-control-size) !important;
    min-width: var(--wb-desktop-control-size) !important;
    min-height: var(--wb-desktop-control-size) !important;
  }
}


/* =========================================================
   39-S21-A-fix16：平板刷劇頁底部資訊遮罩延伸
   - 只套用 iPad / 平板觸控版刷劇頁，不影響手機與桌機
   - 參照手機版先前修法：讓底部黑色遮罩延伸到導航後方，消除資訊區與底部導航間的亮色縫隙
   ========================================================= */
@media (hover: none) and (pointer: coarse) and (min-width: 700px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-page::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(var(--swipe-restored-nav-height, var(--wb-tablet-nav-total-h, 108px)) + 104px) !important;
    z-index: 84 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to top,
      rgba(0,0,0,.99) 0%,
      rgba(0,0,0,.96) 32%,
      rgba(0,0,0,.78) 58%,
      rgba(0,0,0,.38) 82%,
      rgba(0,0,0,0) 100%
    ) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  body.swipe-nav-restored-body .swipe-info {
    z-index: 86 !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav {
    z-index: 90 !important;
  }
}

/* =========================================================
   39-S21-A-fix18：會員頁帳號卡片寬度對齊
   - 只修電腦版與 iPad/平板版「我的」頁
   - 會員帳號卡片在 .member-hero 裡，外層已經有頁面寬度/margin，
     這裡移除卡片本身重複的左右 margin，讓它跟下面語言/選單/瀏覽記錄對齊
   - 手機版維持原狀
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* =========================================================
   39-S21-A-fix18b：會員頁帳號卡片寬度精準對齊
   - 修正 fix18：平板不能用桌機同一套歸零，桌機也需移除 hero 內距
   - 桌機：member-hero 與下面區塊同 margin，帳號卡片在 hero 內滿寬
   - 平板：帳號卡片使用與下面區塊相同的 --wb-tablet-page-pad
   - 手機版不套用
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (min-width: 700px) and (hover: none) and (pointer: coarse) {
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: var(--wb-tablet-page-pad, 18px) !important;
    margin-right: var(--wb-tablet-page-pad, 18px) !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* fix21e: simplify install browser warning and make copy URL button a primary CTA */
.install-browser-short{font-size:15px;color:#ddd!important}
.install-copy-primary{margin-top:12px;background:linear-gradient(135deg,#7b61ff,#ff4fa3)!important;font-size:16px;letter-spacing:.01em;box-shadow:0 14px 30px rgba(255,79,163,.22),0 12px 24px rgba(123,97,255,.2)}
.install-copy-primary:before{content:"📋";margin-right:8px;font-size:17px}
.install-browser-warning .install-path-card .install-hint{font-size:14px}
@media(max-width:390px){.install-browser-short{font-size:14px}.install-copy-primary{font-size:15px;padding:14px 12px}}


/* fix22: swipe next/next-next preview and conservative preload */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-drag-y:0px;
  will-change:transform;
}
.swipe-video-wrap[data-swipe-stage] .swipe-video,
.swipe-video-wrap[data-swipe-stage] .swipe-cover{
  transform:translate3d(0,var(--swipe-drag-y),0);
  will-change:transform;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek{
  transition:transform .22s ease, opacity .22s ease;
}
.swipe-peek{
  position:absolute;
  left:0;
  right:0;
  height:100%;
  background:#050505 center/cover no-repeat;
  z-index:0;
  opacity:.92;
  transform:translate3d(0,0,0);
  pointer-events:none;
  overflow:hidden;
}
.swipe-peek::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  filter:blur(18px) saturate(1.08);
  transform:scale(1.08);
  opacity:.5;
}
.swipe-peek::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.24),rgba(0,0,0,.04) 35%,rgba(0,0,0,.72));
}
.swipe-peek-next{top:100%;transform:translate3d(0,var(--swipe-drag-y),0)}
.swipe-peek-prev{bottom:100%;transform:translate3d(0,var(--swipe-drag-y),0)}
.swipe-peek.has-cover{opacity:.96}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-peek.is-active{z-index:1}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-cover{z-index:2}
.swipe-video-wrap[data-swipe-stage].is-dragging::after{z-index:4}
.swipe-preload-video{position:absolute;width:1px;height:1px;left:-9999px;top:-9999px;opacity:0;pointer-events:none;background:#000;object-fit:contain;}
.swipe-preload-video.is-peek-next{left:0;right:0;top:100%;width:100%;height:100%;opacity:0;z-index:0;transform:translate3d(0,var(--swipe-drag-y),0);will-change:transform,opacity;}
.swipe-preload-video.is-peek-next.is-ready{opacity:1;}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-peek-next.is-active{z-index:1;}
.swipe-preload-video.is-transition-overlay{left:0!important;top:0!important;width:100%!important;height:100%!important;opacity:1!important;z-index:10!important;transform:translate3d(0,0,0)!important;background:#000;box-shadow:none;}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next{transition:transform .22s ease, opacity .22s ease;}
@media (prefers-reduced-motion: reduce){
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
  .swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek{transition:none;}
}

/* fix22d：刷劇頁上一支 / 下一支 video 卡片對稱輪替 */
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  position:absolute!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:#000!important;
  object-fit:contain!important;
  will-change:transform,opacity!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next{
  top:100%!important;
  bottom:auto!important;
  transform:translate3d(0,var(--swipe-drag-y),0)!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  top:auto!important;
  bottom:100%!important;
  transform:translate3d(0,var(--swipe-drag-y),0)!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-ready,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-ready{
  opacity:1!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-active{
  z-index:1!important;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev{
  transition:transform .22s ease, opacity .22s ease!important;
}

/* fix22e：刷劇頁上一支保留 video 畫面與播放進度，回滑不退回封面 */
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-peek.has-video-card.is-video-ready{
  opacity:0!important;
}
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-ready,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-ready{
  background:#000!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-preload-video.is-active.is-ready{
  z-index:2!important;
}
.swipe-video-wrap[data-swipe-stage].is-dragging .swipe-video{
  z-index:3!important;
}

/* fix22n：刷劇頁連續滑動動畫、速度慣性與多指接管 */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-anim-ms:220ms;
}
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-video,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-peek,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev{
  transition:transform var(--swipe-anim-ms) cubic-bezier(.2,.82,.2,1), opacity var(--swipe-anim-ms) ease!important;
}


/* fix22o：避免快滑切換動畫中段被影片 seek / 合成層重建打斷 */
.swipe-video-wrap[data-swipe-stage] .swipe-video,
.swipe-video-wrap[data-swipe-stage] .swipe-cover,
.swipe-video-wrap[data-swipe-stage] .swipe-peek,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
.swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}
.swipe-video-wrap[data-swipe-stage].is-animating{
  contain:layout paint;
}


/* fix22p：放開刷劇拖曳位移上限，讓卡片可跟手滑完整一屏 */
.swipe-video-wrap[data-swipe-stage]{
  --swipe-drag-y:0px;
}


/* fix22q：刷劇頁拖曳末段卡住修正；拖曳可略超過一屏，切換仍吸附到一屏 */


/* fix22r：刷劇頁滑動中與正式播放中的影片裁切比例一致
   - 手機直式目前主播放器使用 cover；下一支/上一支 video 卡片也必須同樣 cover。
   - 避免滑動時看到一個比例，切換完成後又被放大一點。
   - 平板/桌機既有 contain 規則維持不動。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev {
    object-fit: cover !important;
    object-position: center center !important;
  }
}


/* fix22s：刷劇頁橫式影片滑動預覽比例一致
   - 直式影片維持 fix22r 的 cover 滿版。
   - 橫式影片在下一支/上一支滑動露出時，也跟正式播放一樣使用 contain。
   - 避免橫式影片滑動時先被放大，切換完成開始播放後又縮小。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape {
    object-fit: contain !important;
    object-position: center center !important;
  }
}


/* fix22t：刷劇頁底部超細播放進度條 */
.swipe-progress-track{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--swipe-bottom-gap, 0px) + env(safe-area-inset-bottom));
  height:2px;
  z-index:16;
  background:rgba(255,255,255,.16);
  pointer-events:none;
  overflow:hidden;
}
.swipe-progress-fill{
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,79,163,.92),rgba(123,97,255,.95));
  transition:transform .12s linear;
  will-change:transform;
}
body.swipe-nav-restored-body .swipe-progress-track{
  bottom:calc(64px + var(--swipe-bottom-gap, 0px) + env(safe-area-inset-bottom));
}
body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-progress-track,
body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-progress-track{
  bottom:0;
}
@media(orientation:landscape){
  .swipe-progress-track,
  body.swipe-nav-restored-body .swipe-progress-track{
    bottom:0;
  }
}


/* fix22v：刷劇頁進度條強制固定顯示 + 可拖曳保留
   - 之前 fix22t 舊 CSS 在檔案後段覆蓋了 fix22u，導致進度條又回到影片容器內或被遮住。
   - 這段放在檔案最後，用 !important 強制固定在底部導航列上方。
   - 保留 22px 觸控熱區與拖曳功能，視覺線條加明顯一點方便確認。 */
body.swipe-nav-restored-body .swipe-progress-track,
body.swipe-immersive-body .swipe-progress-track,
.swipe-progress-track{
  position:fixed !important;
  left:18px !important;
  right:18px !important;
  bottom:calc(74px + env(safe-area-inset-bottom)) !important;
  height:24px !important;
  z-index:160 !important;
  pointer-events:auto !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  overflow:visible !important;
  background:transparent !important;
}
body.swipe-nav-restored-body .swipe-progress-track::before,
body.swipe-immersive-body .swipe-progress-track::before,
.swipe-progress-track::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:3px !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 1px 8px rgba(0,0,0,.25) !important;
}
body.swipe-nav-restored-body .swipe-progress-fill,
body.swipe-immersive-body .swipe-progress-fill,
.swipe-progress-fill{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:100% !important;
  height:3px !important;
  border-radius:999px !important;
  transform:translateY(-50%) scaleX(0) !important;
  transform-origin:left center !important;
  background:linear-gradient(90deg,#ffffff,#ff4fa3,#7b61ff) !important;
  transition:transform .08s linear,height .12s ease !important;
  will-change:transform !important;
  pointer-events:none !important;
}
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing::before,
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing .swipe-progress-fill,
.swipe-progress-track.is-scrubbing::before,
.swipe-progress-track.is-scrubbing .swipe-progress-fill{
  height:7px !important;
}
.swipe-page.is-progress-scrubbing .swipe-progress-fill{
  transition:none !important;
}
body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-progress-track,
body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-progress-track{
  bottom:18px !important;
}
@media(orientation:landscape){
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track,
  .swipe-progress-track{
    bottom:14px !important;
  }
}


/* fix22w：刷劇頁進度條視覺線條強制顯示
   - fix22v 觸控熱區可用但線條不可見，主因是舊 transform !important 讓 fill 維持 scaleX(0)，且底線可能融入遮罩。
   - 這段強制讓軌道本體也畫出 4px 明顯底線，fill 由 JS 以 inline !important 更新 transform。 */
body.swipe-nav-restored-body .swipe-progress-track,
body.swipe-immersive-body .swipe-progress-track,
.swipe-progress-track{
  position:fixed !important;
  left:18px !important;
  right:18px !important;
  bottom:calc(76px + env(safe-area-inset-bottom)) !important;
  height:28px !important;
  z-index:9999 !important;
  pointer-events:auto !important;
  touch-action:none !important;
  overflow:visible !important;
  opacity:1 !important;
  background:linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.58)) center/100% 4px no-repeat !important;
  box-shadow:none !important;
}
body.swipe-nav-restored-body .swipe-progress-track::before,
body.swipe-immersive-body .swipe-progress-track::before,
.swipe-progress-track::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.32),0 2px 10px rgba(0,0,0,.34) !important;
  opacity:1 !important;
}
body.swipe-nav-restored-body .swipe-progress-fill,
body.swipe-immersive-body .swipe-progress-fill,
.swipe-progress-fill{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:100% !important;
  height:4px !important;
  border-radius:999px !important;
  transform:translateY(-50%) scaleX(0) !important;
  transform-origin:left center !important;
  background:linear-gradient(90deg,#ffffff 0%,#ff4fa3 54%,#7b61ff 100%) !important;
  box-shadow:0 0 12px rgba(255,79,163,.48) !important;
  opacity:1 !important;
  transition:transform .08s linear,height .12s ease !important;
  will-change:transform !important;
  pointer-events:none !important;
}
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing::before,
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing .swipe-progress-fill,
body.swipe-immersive-body .swipe-progress-track.is-scrubbing::before,
body.swipe-immersive-body .swipe-progress-track.is-scrubbing .swipe-progress-fill,
.swipe-progress-track.is-scrubbing::before,
.swipe-progress-track.is-scrubbing .swipe-progress-fill{
  height:8px !important;
}
@media(orientation:landscape){
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track,
  .swipe-progress-track{
    bottom:14px !important;
  }
}


/* fix22x：刷劇頁進度條移出影片遮罩層
   - 進度條 DOM 已從 .swipe-video-wrap 移到外層，避免 position:fixed 被影片容器 transform/overflow 影響。
   - 這段強制讓進度條浮在底部導航上方、黑色遮罩之上。 */
body.swipe-nav-restored-body .swipe-progress-track,
body.swipe-immersive-body .swipe-progress-track,
.swipe-progress-track{
  position:fixed !important;
  left:20px !important;
  right:20px !important;
  bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  height:30px !important;
  z-index:2147483000 !important;
  pointer-events:auto !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  overflow:visible !important;
  opacity:1 !important;
  background:transparent !important;
  isolation:isolate !important;
  transform:none !important;
}
body.swipe-nav-restored-body .swipe-progress-track::before,
body.swipe-immersive-body .swipe-progress-track::before,
.swipe-progress-track::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:50% !important;
  height:4px !important;
  transform:translateY(-50%) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 12px rgba(0,0,0,.55) !important;
  opacity:1 !important;
  z-index:1 !important;
}
body.swipe-nav-restored-body .swipe-progress-fill,
body.swipe-immersive-body .swipe-progress-fill,
.swipe-progress-fill{
  display:block !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:100% !important;
  height:4px !important;
  border-radius:999px !important;
  transform:translateY(-50%) scaleX(0) !important;
  transform-origin:left center !important;
  background:linear-gradient(90deg,#ffffff 0%,#ff4fa3 48%,#8b5cff 100%) !important;
  box-shadow:0 0 10px rgba(255,79,163,.55),0 0 18px rgba(139,92,255,.28) !important;
  opacity:1 !important;
  transition:transform .08s linear,height .12s ease !important;
  will-change:transform !important;
  pointer-events:none !important;
  z-index:2 !important;
}
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing::before,
body.swipe-nav-restored-body .swipe-progress-track.is-scrubbing .swipe-progress-fill,
body.swipe-immersive-body .swipe-progress-track.is-scrubbing::before,
body.swipe-immersive-body .swipe-progress-track.is-scrubbing .swipe-progress-fill,
.swipe-progress-track.is-scrubbing::before,
.swipe-progress-track.is-scrubbing .swipe-progress-fill{
  height:8px !important;
}
@media(orientation:landscape){
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track,
  .swipe-progress-track{
    bottom:18px !important;
  }
}

/* fix22y：刷劇頁底部按鈕上移到右側，避開可拖曳進度條
   - fix22x 讓進度條顯示成功，但與「看全集 / 追劇」按鈕重疊。
   - 手機直式刷劇頁中，將兩顆主要按鈕往右上移，保留進度條在底部導航上方。
   - 不調整滑動手感、影片比例、播放進度與拖曳功能。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-actions,
  body.swipe-nav-restored-body .swipe-actions{
    position:relative !important;
    z-index:2147483100 !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:10px !important;
    padding-right:8px !important;
    margin-top:14px !important;
    margin-bottom:-34px !important;
    transform:translateY(-46px) !important;
    pointer-events:auto !important;
  }
  body.swipe-immersive-body .swipe-action,
  body.swipe-nav-restored-body .swipe-action{
    min-height:42px !important;
    padding:10px 17px !important;
    font-size:15px !important;
    line-height:1 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.26) !important;
  }
  body.swipe-immersive-body .swipe-action.primary,
  body.swipe-nav-restored-body .swipe-action.primary{
    box-shadow:0 12px 28px rgba(123,97,255,.30),0 10px 24px rgba(0,0,0,.24) !important;
  }
}


/* fix22z：刷劇頁底部按鈕再上移，完整避開可拖曳進度條
   - fix22y 已將按鈕往右移，但仍太貼近進度條。
   - 手機直式刷劇頁改用固定定位，把「看全集 / 追劇」浮到進度條上方的右側空位。
   - 進度條位置與刷劇切換手感不變。 */
@media (max-width: 699px) and (orientation: portrait) {
  body.swipe-immersive-body .swipe-actions,
  body.swipe-nav-restored-body .swipe-actions{
    position:fixed !important;
    left:auto !important;
    right:24px !important;
    bottom:calc(122px + env(safe-area-inset-bottom)) !important;
    z-index:2147483300 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:10px !important;
    width:auto !important;
    max-width:calc(100vw - 48px) !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  body.swipe-immersive-body .swipe-action,
  body.swipe-nav-restored-body .swipe-action{
    min-height:42px !important;
    padding:10px 17px !important;
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 12px 26px rgba(0,0,0,.30) !important;
  }
  body.swipe-immersive-body .swipe-action.primary,
  body.swipe-nav-restored-body .swipe-action.primary{
    box-shadow:0 14px 30px rgba(123,97,255,.34),0 12px 26px rgba(0,0,0,.28) !important;
  }
}


/* fix22aa：刷劇頁資訊區排版復原 + 預留進度條空間
   - 取消 fix22z 將「看全集 / 追劇」固定浮動的做法，避免壓到劇名、簡介與標籤。
   - 按鈕回到 .swipe-info 原本自然排版；整個資訊區往上留出進度條安全距離。
   - 進度條維持 fix22x 的固定位置與可拖曳功能。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-immersive-body .swipe-info,
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height, 72px) + 44px) !important;
    padding:54px 18px 0 !important;
    margin:0 !important;
    transform:none !important;
    overflow:visible !important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height, 72px) - 150px) !important;
  }
  body.swipe-immersive-body .swipe-actions,
  body.swipe-nav-restored-body .swipe-actions{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    z-index:2 !important;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:12px !important;
    width:auto !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
    padding:0 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  body.swipe-immersive-body .swipe-action,
  body.swipe-nav-restored-body .swipe-action{
    min-height:42px !important;
    padding:11px 18px !important;
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body.swipe-immersive-body .swipe-tags,
  body.swipe-nav-restored-body .swipe-tags{
    margin-top:8px !important;
  }
}
@media (max-width:699px) and (orientation:portrait) and (max-height:760px){
  body.swipe-immersive-body .swipe-info,
  body.swipe-nav-restored-body .swipe-info{
    bottom:calc(var(--swipe-restored-nav-height, 72px) + 40px) !important;
    padding-top:42px !important;
    max-height:calc(100dvh - var(--swipe-restored-nav-height, 72px) - 132px) !important;
  }
  body.swipe-immersive-body .swipe-actions,
  body.swipe-nav-restored-body .swipe-actions{
    margin-top:10px !important;
  }
  body.swipe-immersive-body .swipe-action,
  body.swipe-nav-restored-body .swipe-action{
    min-height:40px !important;
    padding:10px 16px !important;
    font-size:14px !important;
  }
}


/* fix22ac：刷劇頁下一支/上一支橫式影片滑動露出時，不再短暫套用 cover 放大
   - fix22s 已處理 .is-landscape，但 video 角色輪替或 metadata 尚未重判時可能短暫失去 class。
   - 同時支援 JS 寫入的 data-swipe-video-orientation=landscape，確保滑動露出到正式播放比例一致。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="landscape"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="landscape"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="landscape"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="landscape"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-landscape{
    object-fit:contain!important;
    object-position:center center!important;
    transform:translate3d(0,var(--swipe-drag-y),0)!important;
  }
}


/* fix22ad：刷劇頁直式影片改為左右不裁切顯示
   - 手機直式刷劇頁中，直式影片以完整寬度優先，不再用 cover 裁切左右內容。
   - 橫式影片維持 contain；滑動中/播放中比例一致。
   - 只影響刷劇頁手機直式，不動平板/桌機。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev{
    object-fit:contain!important;
    object-position:center center!important;
    background:#000!important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"]{
    object-fit:contain!important;
    object-position:center center!important;
  }
}


/* fix22ae：刷劇頁直式影片上對齊，讓黑邊集中到底部
   - 延續 fix22ad 的左右不裁切：直式影片仍以 contain 顯示完整寬度。
   - 直式影片改為上對齊，避免上方黑邊；下方多餘黑邊交給資訊區/導航區吸收。
   - 只影響手機直式刷劇頁，橫式影片維持置中完整比例。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"]{
    object-position:center top!important;
  }

  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-landscape,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-landscape,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-landscape,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="landscape"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="landscape"]{
    object-position:center center!important;
  }
}


/* fix22af：刷劇頁直式影片滑動銜接黑邊補償
   - 不改三卡 swipe 架構、不改 50% 門檻與快滑手感。
   - 直式影片仍左右不裁切、播放時上對齊。
   - 只有滑動銜接中段，讓下一支/上一支直式 video 輕微覆蓋黑邊區，減少兩部直式影片間的黑色大縫。
   - 接近吸附完成時補償歸零，避免切換完成後位置跳動。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage]{
    --swipe-next-portrait-comp-y:0px;
    --swipe-prev-portrait-comp-y:0px;
  }
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"]{
    top:calc(100% + var(--swipe-next-portrait-comp-y, 0px))!important;
    object-position:center top!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"]{
    bottom:calc(100% + var(--swipe-prev-portrait-comp-y, 0px))!important;
    object-position:center top!important;
  }
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"]{
    transition:transform var(--swipe-anim-ms,220ms) cubic-bezier(.2,.82,.2,1), opacity var(--swipe-anim-ms,220ms) ease, top var(--swipe-anim-ms,220ms) cubic-bezier(.2,.82,.2,1), bottom var(--swipe-anim-ms,220ms) cubic-bezier(.2,.82,.2,1)!important;
  }
}


/* fix22ag：直式影片黑邊補償雙向套用修正
   - fix22af 已讓往下滑回上一部有補償，但往上滑下一部時，下一支 video 仍在目前 video 下面，
     會被目前直式影片底部黑邊蓋住，看起來像沒有補償。
   - 往上滑時，讓下一支直式 video 在拖曳/動畫期間提高到目前 video 上層，只覆蓋補償重疊區。
   - 不改橫式影片、不改滑動門檻與播放接管。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-dragging-next .swipe-preload-video.is-peek-next.is-active.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-dragging-next .swipe-preload-video.is-peek-next.is-active[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-dragging-next .swipe-preload-video.is-peek-next.is-active.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-dragging-next .swipe-preload-video.is-peek-next.is-active[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating.is-dragging-next .swipe-preload-video.is-peek-next.is-active.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage].is-animating.is-dragging-next .swipe-preload-video.is-peek-next.is-active[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating.is-dragging-next .swipe-preload-video.is-peek-next.is-active.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage].is-animating.is-dragging-next .swipe-preload-video.is-peek-next.is-active[data-swipe-video-orientation="portrait"]{
    z-index:4!important;
  }
}


/* fix22ah：刷劇頁直式影片上方安全距離微調
   - 延續 fix22ad/ae/ag：直式影片仍左右不裁切、偏上顯示。
   - 不再完全貼死頂部，保留少量 iPhone 狀態列 / 靈動島安全距離。
   - 使用 clamp 限制在 12px～24px，避免安全區過大造成上方黑邊太厚。
   - 橫式影片、滑動手感、黑邊補償、進度條與自動下一部不動。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"]{
    object-position:center clamp(12px, env(safe-area-inset-top, 12px), 24px)!important;
  }
}


/* fix22ai：直式影片安全距離與黑邊補償共用同一定位基準
   - fix22ah 加了上方安全距離後，補償仍用舊的貼頂基準計算，切換完成時會二次校正、畫面抖一下。
   - 這裡改成用同一個 CSS 變數 --swipe-portrait-safe-top，JS 也讀同一個值計算底部黑邊。
   - 只影響手機直式刷劇頁；橫式影片仍維持置中完整比例。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage]{
    --swipe-portrait-safe-top:16px;
  }

  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"]{
    object-position:center var(--swipe-portrait-safe-top,16px)!important;
  }
}

/* fix22aj：直式影片安全距離提前套用，避免切換完成後才往下校正
   - fix22ah/ai 後，peek next/prev 的舊規則仍可能用 object-position: top!important。
   - 因為那些規則比通用 portrait 規則更具體，滑動露出時會先貼頂，成為目前影片後才套安全距離，造成畫面抖一下。
   - 這裡用同等/更高 specificity 在最後覆蓋，讓上一支/目前/下一支直式 video 全程使用同一個安全距離。 */
@media (max-width:699px) and (orientation:portrait){
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage]{
    --swipe-portrait-safe-top:16px;
  }

  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap .swipe-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap .swipe-video[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"],
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-nav-restored-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-next[data-swipe-video-orientation="portrait"],
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev.is-portrait-video,
  body.swipe-immersive-body .swipe-video-wrap[data-swipe-stage] .swipe-preload-video.is-peek-prev[data-swipe-video-orientation="portrait"]{
    object-position:center var(--swipe-portrait-safe-top,16px)!important;
  }
}



/* swipe-fix22ak：刷劇播放區徹底移除封面墊底。首頁/詳情/列表封面不受影響。 */
body.swipe-body .swipe-video-wrap[data-swipe-stage] .swipe-cover,
body.swipe-body .swipe-video-wrap[data-swipe-stage].is-dragging .swipe-cover,
body.swipe-body .swipe-video-wrap[data-swipe-stage].is-animating .swipe-cover,
body.swipe-body .swipe-video-wrap[data-swipe-stage] .swipe-video.is-ready + .swipe-cover {
  opacity:0!important;
  background-image:none!important;
  filter:none!important;
  transform:none!important;
  pointer-events:none!important;
}
body.swipe-body .swipe-peek {
  background-image:none!important;
}


/* swipe-fix22ao：刷劇頁影片載入失敗自救提示。只在主 video 重試失敗後顯示，不參與版面排版。 */
.swipe-load-fail{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:22;
  min-height:42px;
  max-width:min(78vw,320px);
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,16,18,.62);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 14px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.swipe-load-fail.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.swipe-page.is-load-failed .swipe-center-control,
.swipe-page.is-load-failed .swipe-start-gate{
  opacity:0;
  pointer-events:none;
}
@media (orientation:landscape){
  .swipe-load-fail{top:52%;}
}


/* member-history-limit2-button-ui：我的頁瀏覽記錄「查看更多」改成輕量底部操作列，只調整顯示樣式。 */
.member-browse-history .browse-history-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:0;
  margin:18px auto 4px;
  padding:7px 4px;
  border:0;
  background:transparent;
  box-shadow:none;
  color:rgba(205,191,255,.86);
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  text-align:center;
}
.member-browse-history .browse-history-more:not(.is-hidden){
  display:flex;
}
.member-browse-history .browse-history-more:active{
  opacity:.72;
  transform:translateY(1px);
}
.member-browse-history + .member-note{
  margin-top:20px;
}
@media (max-width:390px){
  .member-browse-history .browse-history-more{
    margin-top:16px;
    font-size:12.5px;
  }
}

/* brand-app-splash3e-ipad-media-fix：首頁 App 啟動畫面，修正 iPad 橫式觸控裝置分流，避免誤吃桌機 16:9 圖被裁切。 */
.wb-app-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#050407;
  color:#fff;
  opacity:1;
  transform:translateZ(0);
  transition:opacity .46s ease, visibility .46s ease;
  pointer-events:auto;
}
html.wb-splash-seen .wb-app-splash{
  display:none!important;
}
.wb-app-splash.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.wb-app-splash__picture{
  display:block;
  width:100vw;
  height:100svh;
  min-height:100vh;
}
.wb-app-splash__visual{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:drop-shadow(0 0 28px rgba(166,88,255,.28));
  transform:scale(1.012);
  animation:wbSplashImageIn .7s ease-out both;
}
@supports not (height:100svh){
  .wb-app-splash__picture{height:100vh;}
}
@media (min-width:768px) and (orientation:portrait){
  .wb-app-splash__visual{
    object-fit:cover;
    object-position:center center;
    transform:scale(1.006);
  }
}
@media (min-width:768px) and (orientation:landscape){
  .wb-app-splash__visual{
    object-fit:cover;
    object-position:center center;
    transform:scale(1.004);
  }
}


@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (min-width:768px){
  .wb-app-splash__picture{
    background:#050407;
  }
  .wb-app-splash__visual{
    object-fit:contain;
    object-position:center center;
    transform:scale(1);
  }
}
@keyframes wbSplashImageIn{
  0%{opacity:.72;transform:scale(1.035);}
  100%{opacity:1;transform:scale(1.012);}
}
@media (min-width:768px){
  

@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (min-width:768px){
  .wb-app-splash__picture{
    background:#050407;
  }
  .wb-app-splash__visual{
    object-fit:contain;
    object-position:center center;
    transform:scale(1);
  }
}
@keyframes wbSplashImageIn{
    0%{opacity:.72;transform:scale(1.018);}
    100%{opacity:1;transform:scale(1.004);}
  }
}
@media (prefers-reduced-motion:reduce){
  .wb-app-splash,.wb-app-splash__visual{animation:none!important;transition:none!important;}
}



/* brand-home-logo1：首頁品牌露出，只針對首頁 top header 增加 White Box 精選短劇 Logo，不影響播放頁/刷劇頁。 */
.home-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 0 11px;
}
.home-brand__link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-width:0;
  color:#fff;
  text-decoration:none;
}
.home-brand__logo{
  display:block;
  width:min(245px,72vw);
  height:auto;
  max-height:56px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(150,70,255,.28));
}
.home-brand__text{
  display:none;
  min-width:0;
  flex-direction:column;
  line-height:1.05;
}
.home-brand__text strong{
  font-size:18px;
  font-weight:950;
  letter-spacing:.01em;
  white-space:nowrap;
}
.home-brand__text em{
  margin-top:5px;
  color:#c8b4ff;
  font-size:12px;
  font-style:normal;
  letter-spacing:.08em;
  white-space:nowrap;
}
@media(max-width:390px){
  .home-brand{padding-bottom:9px;}
  .home-brand__logo{width:min(222px,70vw);max-height:50px;}
}
@media(min-width:800px){
  .home-brand{padding-top:4px;padding-bottom:13px;}
  .home-brand__logo{width:268px;max-height:62px;}
}


/* brand-home-logo2-minimal：首頁品牌列改成低調 App header；保留啟動畫面華麗視覺，首頁正常瀏覽不再使用發光橫式大 Logo。 */
.home-brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 0 13px;
}
.home-brand-row .home-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  flex:1 1 auto;
  padding:0;
  color:#fff;
  text-decoration:none;
}
.home-brand__mark{
  width:38px;
  height:38px;
  border-radius:11px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(115,66,255,.18);
}
.home-brand__copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-left:9px;
  line-height:1.04;
}
.home-brand__copy strong{
  display:block;
  color:#fff;
  font-size:17px;
  font-weight:950;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 0 12px rgba(156,112,255,.18);
}
.home-brand__copy em{
  display:block;
  margin-top:5px;
  color:#a99bc6;
  font-size:11px;
  font-style:normal;
  font-weight:650;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home-brand-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.home-brand-actions .top-install{
  height:38px;
  padding:0 13px;
  font-size:12px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(123,97,255,.16);
}
.home-brand-actions .top-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:20px;
}
.search-row{
  width:100%;
}
.search-row .search{
  flex:1 1 auto;
  width:100%;
}
@media(max-width:390px){
  .home-brand-row{gap:8px;padding-bottom:12px;}
  .home-brand__mark{width:34px;height:34px;border-radius:10px;}
  .home-brand__copy{margin-left:8px;}
  .home-brand__copy strong{font-size:15.5px;}
  .home-brand__copy em{font-size:10px;margin-top:4px;}
  .home-brand-actions{gap:7px;}
  .home-brand-actions .top-install{display:flex;}
  .home-brand-actions .top-icon{width:36px;height:36px;}
}
@media(min-width:700px){
  .home-brand-row{padding:4px 0 18px;}
  .home-brand__mark{width:42px;height:42px;border-radius:12px;}
  .home-brand__copy strong{font-size:19px;}
  .home-brand__copy em{font-size:11.5px;}
}
@media(min-width:1024px) and (hover:hover){
  .home-brand-row{padding-top:6px;padding-bottom:16px;}
  .home-brand-actions .top-install{height:40px;padding:0 16px;}
  .home-brand-actions .top-icon{width:40px;height:40px;}
}


/* =========================================================
   home-quicklinks-compact1
   首頁快捷入口壓縮版：保留「未安裝三格 / 已安裝兩格」自動切換
   ========================================================= */
body:not(.swipe-immersive-body) .home-entry-panel,
.home-entry-panel {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 12px !important;
  margin: 6px 0 16px !important;
}

body.is-pwa-installed:not(.swipe-immersive-body) .home-entry-panel,
body.is-pwa-installed .home-entry-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body:not(.swipe-immersive-body) .home-entry-panel a,
.home-entry-panel a {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

body:not(.swipe-immersive-body) .home-entry-panel span,
.home-entry-panel span {
  flex: 0 0 auto !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

body:not(.swipe-immersive-body) .home-entry-panel .wb-heart-entry,
.home-entry-panel .wb-heart-entry {
  font-size: 24px !important;
}

body:not(.swipe-immersive-body) .home-entry-panel strong,
.home-entry-panel strong {
  min-width: 0 !important;
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.swipe-immersive-body) .home-entry-panel em,
.home-entry-panel em {
  min-width: 0 !important;
  display: block !important;
  margin-top: 2px !important;
  font-style: normal !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.swipe-immersive-body) .home-entry-panel a > strong,
.home-entry-panel a > strong,
body:not(.swipe-immersive-body) .home-entry-panel a > em,
.home-entry-panel a > em {
  grid-column: auto !important;
}

@media (max-width: 390px) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    gap: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 14px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 46px !important;
    padding: 8px 8px !important;
    gap: 7px !important;
    border-radius: 13px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel span,
  .home-entry-panel span {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    font-size: 17px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel strong,
  .home-entry-panel strong {
    font-size: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel em,
  .home-entry-panel em {
    font-size: 10px !important;
  }
}

@media (min-width: 700px) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    gap: 10px !important;
    margin: 10px 18px 22px !important;
    padding: 0 !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 54px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel span,
  .home-entry-panel span {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    font-size: 20px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel strong,
  .home-entry-panel strong {
    font-size: 13.5px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel em,
  .home-entry-panel em {
    font-size: 11px !important;
  }
}

@media (min-width: 1100px) and (pointer: fine) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    margin: 12px 28px 24px !important;
    gap: 12px !important;
  }

  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 56px !important;
    padding: 10px 16px !important;
  }
}


/* =========================================================
   home-quicklinks-compact2-one-line
   首頁快捷入口單行版：移除小字，只保留 icon + 標題；保留未安裝三格 / 已安裝兩格
   ========================================================= */
body:not(.swipe-immersive-body) .home-entry-panel,
.home-entry-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 12px !important;
  margin: 6px 0 14px !important;
}
body.is-pwa-installed:not(.swipe-immersive-body) .home-entry-panel,
body.is-pwa-installed .home-entry-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.swipe-immersive-body) .home-entry-panel a,
.home-entry-panel a {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 9px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}
body:not(.swipe-immersive-body) .home-entry-panel span,
.home-entry-panel span {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 17px !important;
}
body:not(.swipe-immersive-body) .home-entry-panel .wb-heart-entry,
.home-entry-panel .wb-heart-entry {
  font-size: 23px !important;
}
body:not(.swipe-immersive-body) .home-entry-panel strong,
.home-entry-panel strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body:not(.swipe-immersive-body) .home-entry-panel em,
.home-entry-panel em {
  display: none !important;
}
@media (max-width: 390px) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-radius: 13px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel span,
  .home-entry-panel span {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel strong,
  .home-entry-panel strong {
    font-size: 11.5px !important;
  }
}
@media (min-width: 700px) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    gap: 10px !important;
    margin: 8px 18px 18px !important;
    padding: 0 !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 15px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel span,
  .home-entry-panel span {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 18px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel strong,
  .home-entry-panel strong {
    font-size: 13px !important;
  }
}
@media (min-width: 1100px) and (pointer: fine) {
  body:not(.swipe-immersive-body) .home-entry-panel,
  .home-entry-panel {
    margin: 10px 28px 20px !important;
    gap: 12px !important;
  }
  body:not(.swipe-immersive-body) .home-entry-panel a,
  .home-entry-panel a {
    min-height: 46px !important;
    height: 46px !important;
  }
}


/* =========================================================
   home-quicklinks-compact3-force-one-row
   強制首頁快捷入口在未安裝狀態三個一排；PWA 已安裝狀態兩個一排。
   這段放在最後，覆蓋前面 compact1/compact2 與舊版快取樣式。
   ========================================================= */
html body:not(.is-pwa-installed):not(.swipe-immersive-body) section.home-entry-panel.home-entry-panel--compact2,
html body:not(.is-pwa-installed) section.home-entry-panel.home-entry-panel--compact2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

html body.is-pwa-installed:not(.swipe-immersive-body) section.home-entry-panel.home-entry-panel--compact2,
html body.is-pwa-installed section.home-entry-panel.home-entry-panel--compact2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}

html body section.home-entry-panel.home-entry-panel--compact2 a {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 6px !important;
  gap: 4px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html body section.home-entry-panel.home-entry-panel--compact2 span {
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  font-size: 15px !important;
}

html body section.home-entry-panel.home-entry-panel--compact2 .wb-heart-entry {
  font-size: 21px !important;
}

html body section.home-entry-panel.home-entry-panel--compact2 strong {
  min-width: 0 !important;
  max-width: calc(100% - 20px) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body section.home-entry-panel.home-entry-panel--compact2 em {
  display: none !important;
}

@media (min-width: 391px) {
  html body:not(.is-pwa-installed):not(.swipe-immersive-body) section.home-entry-panel.home-entry-panel--compact2,
  html body:not(.is-pwa-installed) section.home-entry-panel.home-entry-panel--compact2 {
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 a {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    gap: 5px !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 span {
    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
    font-size: 17px !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 strong {
    max-width: calc(100% - 24px) !important;
    font-size: 12px !important;
  }
}

@media (min-width: 700px) {
  html body:not(.is-pwa-installed):not(.swipe-immersive-body) section.home-entry-panel.home-entry-panel--compact2,
  html body:not(.is-pwa-installed) section.home-entry-panel.home-entry-panel--compact2 {
    gap: 10px !important;
    margin: 8px 18px 18px !important;
    padding: 0 !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 a {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    gap: 8px !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 span {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 18px !important;
  }

  html body section.home-entry-panel.home-entry-panel--compact2 strong {
    max-width: calc(100% - 30px) !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   home-quicklinks-compact4-installed-hide-fix
   確認原因：
   前面 body.is-pwa-installed [data-install-prompt-link]{display:none!important}
   被後面 compact1/compact2 的 .home-entry-panel a {display:flex!important} 覆蓋，
   導致 PWA / 已安裝狀態仍顯示「安裝 App」，但 grid 已切成 2 欄，
   所以畫面變成 3 個項目排 2 欄。
   修正：在所有快捷入口樣式最後，用更高權重再次隱藏安裝入口。
   ========================================================= */
html body.is-pwa-installed section.home-entry-panel.home-entry-panel--compact2 a[data-install-prompt-link],
html body.is-pwa-standalone section.home-entry-panel.home-entry-panel--compact2 a[data-install-prompt-link] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body.is-pwa-installed section.home-entry-panel.home-entry-panel--compact2,
html body.is-pwa-standalone section.home-entry-panel.home-entry-panel--compact2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}

html body:not(.is-pwa-installed):not(.is-pwa-standalone) section.home-entry-panel.home-entry-panel--compact2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}


/* =========================================================
   brand-main-pages1：我的頁 / 追劇頁低調品牌露出
   只增加主導航頁的小型品牌列，不動首頁快捷入口、播放/刷劇、同步邏輯。
   ========================================================= */
.page-brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0 0 14px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(123,97,255,.12),rgba(255,255,255,.035));
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.page-brand-mini__mark{
  width:34px;
  height:34px;
  border-radius:10px;
  object-fit:cover;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 18px rgba(123,97,255,.18);
}
.page-brand-mini__copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.05;
}
.page-brand-mini__copy strong{
  display:block;
  color:#fff;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.015em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-brand-mini__copy em{
  display:block;
  margin-top:4px;
  color:rgba(213,203,255,.68);
  font-style:normal;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.member-body .member-hero .page-brand-mini{
  margin-bottom:12px;
}
.follow-top .page-brand-mini{
  margin:10px 0 14px;
}
@media(max-width:390px){
  .page-brand-mini{gap:9px;padding:8px 10px;border-radius:15px;margin-bottom:12px;}
  .page-brand-mini__mark{width:31px;height:31px;border-radius:9px;}
  .page-brand-mini__copy strong{font-size:14px;}
  .page-brand-mini__copy em{font-size:10.5px;}
}
@media(min-width:700px){
  .page-brand-mini{max-width:520px;padding:10px 12px;margin-bottom:16px;}
  .page-brand-mini__mark{width:38px;height:38px;border-radius:11px;}
  .page-brand-mini__copy strong{font-size:16px;}
  .page-brand-mini__copy em{font-size:11.5px;}
}


/* =========================================================
   brand-main-pages2-header-clean：我的頁 / 追劇頁品牌列改成無外框自然 header。
   追劇頁品牌列位置已移到「回首頁」按鈕上方；只調整顯示，不動同步/追劇功能。
   ========================================================= */
.page-brand-mini{
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.page-brand-mini__mark{
  width:34px;
  height:34px;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 15px rgba(123,97,255,.16);
}
.page-brand-mini__copy strong{
  font-size:15.5px;
}
.page-brand-mini__copy em{
  color:rgba(213,203,255,.64);
  font-size:11px;
}
body.member-body .member-hero .page-brand-mini{
  margin-bottom:12px !important;
}
.follow-top .page-brand-mini{
  margin:0 0 12px !important;
}
.follow-top .back + .page-brand-mini{
  margin-top:10px !important;
}
@media(max-width:390px){
  .page-brand-mini{gap:9px !important;margin-bottom:12px !important;}
  .page-brand-mini__mark{width:31px;height:31px;border-radius:9px;}
  .page-brand-mini__copy strong{font-size:14.5px;}
  .page-brand-mini__copy em{font-size:10.5px;}
}
@media(min-width:700px){
  .page-brand-mini{max-width:none !important;margin-bottom:16px !important;}
  .page-brand-mini__mark{width:38px;height:38px;border-radius:11px;}
  .page-brand-mini__copy strong{font-size:16.5px;}
  .page-brand-mini__copy em{font-size:11.5px;}
  .follow-top .page-brand-mini{margin-bottom:14px !important;}
}

/* =========================================================
   recommend-brand-header1：推薦頁移除回首頁後修正 header 全寬，並加入無外框品牌露出。
   只修推薦頁 header，不影響首頁、追劇頁、我的頁、播放頁或刷劇頁。
   ========================================================= */
.recommend-top{
  grid-template-columns:1fr !important;
  gap:14px !important;
  align-items:start !important;
  padding:max(14px,env(safe-area-inset-top)) 14px 14px !important;
}
.recommend-top .recommend-brand-mini{
  margin:0 0 4px !important;
}
.recommend-title-block{
  min-width:0;
  width:100%;
}
.recommend-title-block .section-kicker{
  letter-spacing:.22em;
}
.recommend-top h1{
  white-space:normal !important;
  word-break:keep-all;
  overflow-wrap:normal;
}
.recommend-top p{
  max-width:640px;
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:break-word;
}
@media(max-width:390px){
  .recommend-top{padding-left:12px !important;padding-right:12px !important;gap:12px !important;}
  .recommend-top h1{font-size:24px !important;}
  .recommend-top p{font-size:13px !important;line-height:1.55 !important;}
}
@media(min-width:700px){
  .recommend-top{padding-left:24px !important;padding-right:24px !important;padding-bottom:18px !important;}
  .recommend-top .recommend-brand-mini{margin-bottom:8px !important;}
}

/* =========================================================
   brand-main-pages3-unify-size：主導航頁品牌列尺寸統一。
   首頁品牌列只顯示不連結；推薦 / 追劇 / 我的品牌列可點擊回首頁。
   只調整品牌列 HTML/CSS，不動底部導航、播放/刷劇、觀看紀錄同步。
   ========================================================= */
.home-brand-row .home-brand{
  cursor:default;
}
.page-brand-mini.page-brand-link,
a.page-brand-mini{
  color:#fff !important;
  text-decoration:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
}
.page-brand-mini{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 0 13px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.page-brand-mini__mark{
  width:38px !important;
  height:38px !important;
  border-radius:11px !important;
  object-fit:cover !important;
  flex:0 0 auto !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 20px rgba(115,66,255,.18) !important;
}
.page-brand-mini__copy{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  line-height:1.04 !important;
}
.page-brand-mini__copy strong{
  display:block !important;
  color:#fff !important;
  font-size:17px !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-shadow:0 0 12px rgba(156,112,255,.18) !important;
}
.page-brand-mini__copy em{
  display:block !important;
  margin-top:5px !important;
  color:#a99bc6 !important;
  font-size:11px !important;
  font-style:normal !important;
  font-weight:650 !important;
  letter-spacing:.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.page-brand-link:active{
  opacity:.78;
}
body.member-body .member-hero .page-brand-mini,
.follow-top .page-brand-mini,
.recommend-top .recommend-brand-mini{
  margin-bottom:13px !important;
}
@media(max-width:390px){
  .page-brand-mini{gap:8px !important;margin-bottom:12px !important;}
  .page-brand-mini__mark{width:34px !important;height:34px !important;border-radius:10px !important;}
  .page-brand-mini__copy strong{font-size:15.5px !important;}
  .page-brand-mini__copy em{font-size:10px !important;margin-top:4px !important;}
}
@media(min-width:700px){
  .page-brand-mini{margin-bottom:16px !important;}
  .page-brand-mini__mark{width:42px !important;height:42px !important;border-radius:12px !important;}
  .page-brand-mini__copy strong{font-size:19px !important;}
  .page-brand-mini__copy em{font-size:11.5px !important;}
}


/* =========================================================
   brand-main-pages4-recommend-spacing：推薦頁品牌列與標題間距統一。
   原因：推薦頁移除返回鍵後改成 grid 單欄，品牌列 margin-bottom 與 grid gap 會疊加，
   導致品牌列到 RECOMMEND 標題距離比追劇 / 我的頁大。
   只修推薦頁 header 間距，不動品牌列尺寸與其他頁。
   ========================================================= */
.recommend-top{
  gap:8px !important;
}
.recommend-top .recommend-brand-mini{
  margin-bottom:0 !important;
}
@media(max-width:390px){
  .recommend-top{
    gap:8px !important;
  }
  .recommend-top .recommend-brand-mini{
    margin-bottom:0 !important;
  }
}
@media(min-width:700px){
  .recommend-top{
    gap:10px !important;
  }
  .recommend-top .recommend-brand-mini{
    margin-bottom:0 !important;
  }
}

/* =========================================================
   brand-pages-tablet-desktop-align1：品牌頁面 iPad / 桌機上方排版對齊
   - 對齊首頁、推薦、追劇、我的頁的上方品牌列左右基準線
   - 平板使用 --wb-tablet-page-pad；桌機使用 28px 內容基準
   - 不動播放頁 / 刷劇頁核心與測試頁開關
   ========================================================= */
@media (min-width: 700px) and (min-height: 700px), (min-width: 900px) and (pointer: coarse) {
  body:not(.swipe-immersive-body) .top,
  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top,
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: var(--wb-tablet-page-pad, 28px) !important;
    padding-right: var(--wb-tablet-page-pad, 28px) !important;
    box-sizing: border-box !important;
  }

  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top,
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
  }

  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top {
    padding-bottom: 14px !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-bottom: 8px !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  body:not(.swipe-immersive-body) .home-brand-row,
  body:not(.swipe-immersive-body) .page-brand-mini,
  body:not(.swipe-immersive-body) .recommend-top .recommend-brand-mini,
  body:not(.swipe-immersive-body) .follow-top .page-brand-mini,
  body.member-body:not(.swipe-immersive-body) .member-hero .page-brand-mini {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  body:not(.swipe-immersive-body) .recommend-top {
    gap: 10px !important;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body) .top,
  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top,
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top,
  body.member-body:not(.swipe-immersive-body) .member-hero {
    padding-top: 18px !important;
  }

  body:not(.swipe-immersive-body) .follow-top,
  body:not(.swipe-immersive-body) .recommend-top {
    padding-bottom: 14px !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 8px !important;
  }

  body.member-body:not(.swipe-immersive-body) .member-hero > .member-card,
  body.member-body:not(.swipe-immersive-body) .member-hero > .guest-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  body:not(.swipe-immersive-body) .home-brand-row,
  body:not(.swipe-immersive-body) .page-brand-mini,
  body:not(.swipe-immersive-body) .recommend-top .recommend-brand-mini,
  body:not(.swipe-immersive-body) .follow-top .page-brand-mini,
  body.member-body:not(.swipe-immersive-body) .member-hero .page-brand-mini {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }

  body:not(.swipe-immersive-body) .recommend-top {
    gap: 10px !important;
  }
}

/* =========================================================
   brand-pages-tablet-desktop-align2a：追劇頁桌機上方左緣微調
   - 只套用滑鼠/觸控板桌機版追劇頁
   - 讓 Logo / 標題 / 狀態列左側與下方追劇卡片左緣一致
   - 不調整卡片寬度、不動播放頁 / 刷劇頁核心
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.swipe-immersive-body) .follow-top {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }
}

/* swipe-desktop-progress-position1：桌機版刷劇頁進度條上移，避開底部導航列。
   - 只針對桌機 / 筆電（hover + pointer fine + is-desktop-swipe）。
   - 手機 / iPad 既有進度條位置不變。
   - 不改刷劇播放核心與上下滑手感。 */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-progress-track,
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-progress-track {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    left: 48px !important;
    right: 48px !important;
    z-index: 2147483000 !important;
  }
}

/* swipe-desktop-progress-position2：桌機版刷劇頁進度條微調
   - 位置比 position1 再往下，仍避開底部導航列。
   - 寬度與桌機底部導航列同寬並置中。
   - 只套用桌機 / 筆電，不影響手機與 iPad。 */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  body.swipe-nav-restored-body .swipe-page.is-desktop-swipe .swipe-progress-track,
  body.swipe-immersive-body .swipe-page.is-desktop-swipe .swipe-progress-track {
    left: 50% !important;
    right: auto !important;
    width: var(--wb-desktop-frame-width, calc(100vw - 96px)) !important;
    max-width: var(--wb-desktop-frame-max, 1360px) !important;
    bottom: calc(var(--wb-desktop-nav-height, 66px) + 2px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 2147483000 !important;
  }
}



/* =========================================================
   home-continue-mobile-close-early1：手機首頁續看浮層整理版
   - 只在手機寬度生效，不影響 iPad / 桌機首頁 grid。
   - 冷啟動顯示底部橫向膠囊卡；第一次滑動後收合成封面小浮層。
   - 收合小卡的 X 使用真實 button + 外層 shell 命中區，不再疊舊版透明 hitbox / ::before 假 X。
   ========================================================= */
.continue-close {
  display: none;
}

@media (max-width: 767px) {
  body:not(.swipe-immersive-body) .continue {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 8px 54px 8px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(28,24,34,.86), rgba(17,15,22,.82)) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09) !important;
    z-index: 88 !important;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    transition: width .28s ease, height .28s ease, min-height .28s ease, right .28s ease, padding .28s ease, border-radius .28s ease, background .28s ease, box-shadow .28s ease, opacity .22s ease !important;
  }

  body:not(.swipe-immersive-body) .continue.is-hidden {
    display: none !important;
  }

  body:not(.swipe-immersive-body) .continue-cover {
    position: relative !important;
    inset: auto !important;
    width: 54px !important;
    height: 58px !important;
    border-radius: 15px !important;
    flex: 0 0 54px !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #17131f !important;
    overflow: hidden !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.34) !important;
    transition: width .28s ease, height .28s ease, flex-basis .28s ease, border-radius .28s ease, box-shadow .28s ease !important;
  }

  body:not(.swipe-immersive-body) .continue-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 44%, rgba(0,0,0,.72) 100%);
    z-index: 1;
    pointer-events: none;
  }

  body:not(.swipe-immersive-body) .continue-cover::after,
  body:not(.swipe-immersive-body) .continue-cover.has-image::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.14), transparent 34%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body:not(.swipe-immersive-body) .continue-info {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: opacity .18s ease, transform .24s ease, max-width .24s ease !important;
  }

  body:not(.swipe-immersive-body) .continue-title {
    font-size: 15px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.swipe-immersive-body) .continue-ep {
    margin-top: 5px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.swipe-immersive-body) .continue-btn {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    height: 28px !important;
    min-width: 48px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #7a5cff, #f02b8c) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    line-height: 28px !important;
    font-weight: 900 !important;
    text-align: center !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.34) !important;
    z-index: 3 !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: opacity .18s ease, transform .24s ease !important;
  }

  body:not(.swipe-immersive-body) .continue-btn::before {
    content: "";
  }

  body:not(.swipe-immersive-body) .continue-close {
    display: flex !important;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 24px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.62) !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 7px 15px rgba(0,0,0,.38) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: auto !important;
    width: 84px !important;
    height: 94px !important;
    min-height: 94px !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-cover {
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    right: auto !important;
    bottom: auto !important;
    width: 70px !important;
    height: 80px !important;
    border-radius: 22px !important;
    flex-basis: auto !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-info {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-14px) scale(.92) !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-btn {
    left: 35px !important;
    top: 54px !important;
    right: auto !important;
    bottom: auto !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(122,92,255,.88), rgba(240,43,140,.88)) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 5px 13px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-btn::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 8px solid #fff !important;
    margin-left: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-close {
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    touch-action: manipulation !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-close::before {
    content: "×" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.68) !important;
    color: rgba(255,255,255,.95) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 7px 15px rgba(0,0,0,.38) !important;
    pointer-events: none !important;
  }

  body:not(.swipe-immersive-body) .continue.is-collapsed .continue-close::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   home-continue-split1：首頁繼續觀看長條 / 小卡拆成獨立元件
   - .continue 只保留長條狀，不再用 is-collapsed 變形。
   - .continue-mini 是獨立小卡，只在長條收合後顯示。
   ========================================================= */
.continue-mini {
  display: none;
}
body.swipe-immersive-body .continue-mini,
body.swipe-nav-restored-body .continue-mini {
  display: none !important;
}

@media (max-width: 767px) {
  body:not(.swipe-immersive-body) .continue-mini {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    width: 84px !important;
    height: 94px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 88 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini.is-hidden {
    display: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-cover {
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    width: 70px !important;
    height: 80px !important;
    border-radius: 22px !important;
    background-color: #0b1712 !important;
    background-image: linear-gradient(145deg,#2d6247,#0b1712 62%,#000);
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) !important;
    pointer-events: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-cover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 44%, rgba(0,0,0,.72) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-cover::after,
  body:not(.swipe-immersive-body) .continue-mini-cover.has-image::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.14), transparent 34%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-play {
    position: absolute !important;
    left: 35px !important;
    top: 54px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(122,92,255,.88), rgba(240,43,140,.88)) !important;
    box-shadow: 0 5px 13px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-play::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 8px solid #fff !important;
    margin-left: 2px !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    touch-action: manipulation !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.swipe-immersive-body) .continue-mini-close::before {
    content: "×" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.68) !important;
    color: rgba(255,255,255,.95) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 7px 15px rgba(0,0,0,.38) !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   home-continue-ipad-split1：iPad 首頁繼續觀看小卡獨立元件
   - 只在 iPad Safari / iPad PWA body class 生效。
   - 不改手機 max-width:767 的小卡樣式，也不套用桌機 hover/fine pointer。
   ========================================================= */
@media (min-width: 768px) {
  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini {
    position: fixed !important;
    left: var(--wb-tablet-page-pad, 28px) !important;
    right: auto !important;
    bottom: calc(var(--wb-tablet-nav-height, var(--wb-tablet-nav-total-h, 96px)) + 14px) !important;
    width: 124px !important;
    height: 150px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 88 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini.is-hidden,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini.is-hidden {
    display: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-cover,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-cover {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 106px !important;
    height: 132px !important;
    border-radius: 26px !important;
    background-color: #0b1712 !important;
    background-image: linear-gradient(145deg,#2d6247,#0b1712 62%,#000);
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.09) !important;
    pointer-events: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-cover::before,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-cover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 44%, rgba(0,0,0,.72) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-cover::after,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-cover::after,
  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-cover.has-image::after,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-cover.has-image::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.13), transparent 34%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-play,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-play {
    position: absolute !important;
    left: 53px !important;
    top: 86px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(122,92,255,.88), rgba(240,43,140,.88)) !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-play::before,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-play::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 11px solid #fff !important;
    margin-left: 3px !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-close,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    touch-action: manipulation !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body.is-ipad-safari-browser:not(.swipe-immersive-body) .continue-mini-close::before,
  body.is-ipad-pwa-mode:not(.swipe-immersive-body) .continue-mini-close::before {
    content: "×" !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.68) !important;
    color: rgba(255,255,255,.95) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.40) !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   home-continue-desktop-split2：桌機首頁繼續觀看小卡獨立元件
   - 只在桌機 / 筆電 hover:fine pointer 生效。
   - 不動手機 max-width:767 與 iPad body class 成功版。
   - fixed 浮層不參與首頁 grid / 品牌列 / 導航列排版，避免污染其他區塊。
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--wb-desktop-nav-height, 78px) + 22px) !important;
    width: 108px !important;
    height: 132px !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 88 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini.is-hidden {
    display: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-cover {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 96px !important;
    height: 118px !important;
    border-radius: 26px !important;
    background-color: #0b1712 !important;
    background-image: linear-gradient(145deg,#2d6247,#0b1712 62%,#000);
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.09) !important;
    pointer-events: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-cover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 44%, rgba(0,0,0,.72) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-cover::after,
  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-cover.has-image::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.12), transparent 34%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-play {
    position: absolute !important;
    left: 48px !important;
    top: 78px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(122,92,255,.88), rgba(240,43,140,.88)) !important;
    box-shadow: 0 7px 16px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto !important;
    z-index: 5 !important;
    touch-action: manipulation !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-play::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-left: 11px solid #fff !important;
    margin-left: 3px !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    touch-action: manipulation !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini-close::before {
    content: "×" !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(0,0,0,.68) !important;
    color: rgba(255,255,255,.95) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.40) !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   home-continue-desktop-split3：桌機續看浮層修正
   - 只修桌機 / 筆電：補回長條右上 X，並把收合小卡改到左下。
   - 不動手機 split3 與 iPad ipad-split1 的成功版。
   ========================================================= */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue {
    overflow: visible !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue .continue-close {
    display: flex !important;
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.68) !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.42) !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  body:not(.is-ipad-safari-browser):not(.is-ipad-pwa-mode):not(.swipe-immersive-body):not(.swipe-nav-restored-body) .continue-mini {
    left: calc((100vw - var(--wb-desktop-frame-width, min(calc(100vw - 96px), 1280px))) / 2 + 16px) !important;
    right: auto !important;
    bottom: calc(var(--wb-desktop-nav-height, 66px) + 22px) !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* =========================================================
   swipe-ipad-progress-position1：iPad 直式刷劇頁進度條定位修正
   - 根據 iPad 實際底部導航高度 --wb-tablet-nav-total-h 定位
   - 只套用已由前端辨識為 iPad Safari / iPad PWA 的直式刷劇頁
   - 手機與桌機完全不套用
   ========================================================= */
@media (min-width: 700px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  body.is-ipad-safari-browser.swipe-nav-restored-body .swipe-progress-track,
  body.is-ipad-safari-browser.swipe-immersive-body .swipe-progress-track,
  body.is-ipad-pwa-mode.swipe-nav-restored-body .swipe-progress-track,
  body.is-ipad-pwa-mode.swipe-immersive-body .swipe-progress-track {
    bottom: calc(var(--wb-tablet-nav-total-h, 108px) + 2px) !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* =========================================================
   swipe-tablet-progress-position3：所有平板直式刷劇頁進度條定位
   - 套用 700px～1366px、直式、觸控（coarse pointer）的平板類裝置
   - 進度條可視線位於 24px 觸控熱區中央，因此 bottom 需扣除 12px
   - 排除手機（<700px）與桌機滑鼠環境（hover/pointer fine）
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track {
    bottom: calc(var(--wb-tablet-nav-total-h, 108px) - 15px) !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* =========================================================
   swipe-tablet-progress-position4：平板直式刷劇頁進度條下移到操作按鈕下方
   - 依 39-S16-A-fix10 的實際平板底部導航高度 68px 定位
   - 進度條觸控區高度 30px，可視線位於中央，因此 bottom = 68px - 15px = 53px
   - 只套用 700px～1366px、直式、觸控平板；手機與桌機不套用
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track {
    bottom: 53px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}


/* =========================================================
   swipe-tablet-progress-position5：平板進度條改為資訊區自然流排版
   - 不再用 viewport bottom 猜位置。
   - JS 僅在平板直式把進度條 DOM 移到 .swipe-actions 後方。
   - 因此進度條必定在「看全集 / 追劇」下方，並由 .swipe-info 的既有 bottom
     自然維持在底部導航上方。
   - 手機與桌機仍使用原本 fixed 進度條，不受影響。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-progress-track.is-tablet-inline-progress,
  body.swipe-immersive-body .swipe-progress-track.is-tablet-inline-progress {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 30px !important;
    margin: 4px 0 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
  }
}

/* =========================================================
   swipe-tablet-landscape-progress-nav1：平板橫式刷劇頁進度條與導航對位
   - 只套用 700px～1366px、橫式、觸控平板。
   - 進度條 30px 觸控區的可見線位於中央；底部導航內容高 72px，
     因此 track bottom 使用 72 - 15 = 57px，讓可見線貼在導航上緣。
   - 導航 icon 與文字共用同一個 flex 垂直中心，不沿用直式絕對定位。
   - 手機、平板直式、桌機均不套用。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track {
    position: fixed !important;
    left: 20px !important;
    right: 20px !important;
    bottom: calc(57px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 30px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 2147483000 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    min-height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 0 max(18px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px, env(safe-area-inset-left)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 5px 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translateY(-1px) scale(1.08) !important;
    -webkit-transform: translateY(-1px) scale(1.08) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    -webkit-transform: translate(-50%, -50%) scale(.72) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    transform: translate(-50%, -50%) scale(1) !important;
    -webkit-transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after {
    left: 50% !important;
    right: auto !important;
    bottom: 4px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    -webkit-transform: translateX(-50%) scaleX(.62) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    transform: translateX(-50%) scaleX(1) !important;
    -webkit-transform: translateX(-50%) scaleX(1) !important;
  }
}

/* =========================================================
   swipe-tablet-landscape-nav-align2：平板橫式刷劇頁導航與其他頁對齊
   - 只套用 700px～1366px、橫式、觸控平板。
   - 修正前版把 72px 內容高度再加 safe-area，造成整條導航比其他頁高。
   - 導航總高度固定為 72px（已包含底部安全區）；圖示與文字改用明確兩列排版。
   - 進度條同步貼在 72px 導航上緣；手機、平板直式、桌機不套用。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav {
    bottom: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 max(18px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px, env(safe-area-inset-left)) !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-rows: 32px 15px !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 34px !important;
    height: 32px !important;
    min-width: 34px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    position: static !important;
    width: auto !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    text-align: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after {
    bottom: 1px !important;
  }

  body.swipe-nav-restored-body .swipe-progress-track,
  body.swipe-immersive-body .swipe-progress-track {
    bottom: 57px !important;
  }
}

/* =========================================================
   swipe-tablet-landscape-nav-home-match3：平板橫式刷劇導航完全對照首頁
   - 只套用 700px～1366px、橫式、hover:none、pointer:coarse。
   - 不再使用刷劇頁自訂的 32px/15px grid 兩列與縮小 icon。
   - 直接還原成首頁平板導航的 flex 排版、icon 容器、SVG 尺寸、
     文字字級、active 光暈與底線位置。
   - 不影響手機、平板直式、桌機與其他頁面。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: normal !important;
    justify-items: normal !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    row-gap: normal !important;
    gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    position: relative !important;
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    left: auto !important;
    top: auto !important;
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    transform: translateY(0) scale(1) !important;
    -webkit-transform: translateY(0) scale(1) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    transform: translateY(0) scale(1) !important;
    -webkit-transform: translateY(0) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before {
    transform: translateY(-2px) scale(1.12) !important;
    -webkit-transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.5)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    grid-row: auto !important;
    align-self: auto !important;
    justify-self: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-align: center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::after {
    left: 50% !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.64) !important;
    -webkit-transform: translate(-50%, -50%) scale(.64) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    -webkit-transform: translate(-50%, -50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after {
    left: 50% !important;
    right: auto !important;
    bottom: calc(5px + env(safe-area-inset-bottom)) !important;
    width: 22px !important;
    height: 3px !important;
    transform: translateX(-50%) scaleX(.62) !important;
    -webkit-transform: translateX(-50%) scaleX(.62) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    transform: translateX(-50%) scaleX(1) !important;
    -webkit-transform: translateX(-50%) scaleX(1) !important;
  }
}

/* =========================================================
   swipe-tablet-landscape-nav-home-exact4：平板橫式刷劇導航內部完全採用首頁最終規則
   - 已逐條比對首頁目前最後生效的平板導航規則（39-S16-A-fix6）。
   - 修正前版錯把 active 光暈放在 .nav-icon::after，首頁實際是 .nav::before。
   - 圖示容器、五顆圖示尺寸、文字、間距、active 位移、光暈、底線均與首頁一致。
   - 保留刷劇頁目前已確認正確的導航總高度與進度條位置。
   - 僅限 700px～1366px、橫式、觸控平板；手機、平板直式、桌機不受影響。
   ========================================================= */
@media (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    color: #888394 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-decoration: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    grid-template-rows: none !important;
    grid-template-columns: none !important;
    row-gap: normal !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 22px rgba(185,102,255,.35) !important;
  }

  /* 首頁 active 光暈是在 nav 本身，不是在 nav-icon。 */
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 9px !important;
    width: 58px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 50% 48%, rgba(255,83,198,.42) 0%, rgba(139,92,255,.30) 42%, rgba(139,92,255,0) 74%) !important;
    filter: blur(1px) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scale(.74) !important;
    -webkit-transform: translateX(-50%) scale(.74) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active::before {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
    -webkit-transform: translateX(-50%) scale(1) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon {
    position: relative !important;
    z-index: 2 !important;
    width: 32px !important;
    height: 30px !important;
    min-width: 32px !important;
    min-height: 30px !important;
    margin: 0 0 1px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    color: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    grid-row: auto !important;
  }

  /* 首頁目前不使用 nav-icon::after 光暈，明確關閉前版殘留。 */
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav-icon::after,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(1) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(2) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(4) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg,#c8c1dc 0%,#7b7488 100%) !important;
    opacity: .9 !important;
    transform: translateY(0) scale(1) !important;
    -webkit-transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) !important;
    -webkit-mask: var(--wb-nav-mask) center/contain no-repeat !important;
    mask: var(--wb-nav-mask) center/contain no-repeat !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(3) .nav-icon::before {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    min-height: 29px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5) .nav-icon::before {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active .nav-icon::before,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5).active .nav-icon::before,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav:nth-child(5).active .nav-icon::before {
    background: linear-gradient(135deg,#ffffff 0%,#ff78d6 44%,#8b5cff 100%) !important;
    opacity: 1 !important;
    transform: translateY(-2px) scale(1.12) !important;
    -webkit-transform: translateY(-2px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 17px rgba(255,73,183,.50)) drop-shadow(0 0 24px rgba(139,92,255,.46)) !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav > div:last-child,
  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active > div:last-child {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-align: center !important;
    transform: none !important;
    -webkit-transform: none !important;
    grid-row: auto !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8b5cff,#ff4fa3) !important;
    box-shadow: 0 0 16px rgba(172,105,255,.8) !important;
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(.62) !important;
    -webkit-transform: translateX(-50%) scaleX(.62) !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  body.swipe-nav-restored-body .bottom-nav.swipe-bottom-nav .nav.active::after,
  body.swipe-immersive-body .bottom-nav.swipe-bottom-nav .nav.active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
    -webkit-transform: translateX(-50%) scaleX(1) !important;
  }
}


/* =========================================================
   related-series-dev1：測試詳情頁相關作品橫向區塊
   沿用首頁卡片與橫向滑動手感，只補詳情頁間距與寬度銜接。
   ========================================================= */
.detail-related-section{
  margin:22px -14px 20px;
  padding:14px 0 10px;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.045);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
}
.detail-related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:0 14px 10px;
}
.detail-related-head h2{
  margin:3px 0 0;
  font-size:21px;
  line-height:1.16;
  font-weight:950;
}
.detail-related-head p{
  margin:4px 0 0;
  color:#888;
  font-size:12.5px;
  line-height:1.35;
}
.detail-related-row{
  padding-left:14px;
  padding-right:14px;
}
@media (min-width:700px){
  .detail-related-section{margin-left:0;margin-right:0;border-radius:20px;border:1px solid rgba(255,255,255,.07)}
  .detail-related-row{grid-auto-columns:22%;}
}

/* follow-loadmore1：首頁追劇精簡預覽入口 */
.favorite-section .favorite-all-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:18px auto 0;
  text-align:center;
  text-decoration:none;
}




/* follow-loadmore1-hotfix2：載入更多成為追劇清單最後一個 grid 項目 */
.follow-list > .home-all-more {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 8px 0 calc(96px + env(safe-area-inset-bottom));
  text-align: center;
}
.follow-list > .home-all-more .home-all-more-note {
  margin-top: 8px;
}

/* member-password-reset1_20260720 */
.auth-forgot{display:flex;justify-content:flex-end;margin-top:-4px;margin-bottom:2px}.auth-forgot a{color:#b9a7ff;font-size:14px;text-decoration:none}.auth-forgot a:active{opacity:.72}


/* =========================================================
   card-render-opt1_20260722
   首頁／推薦頁卡片區渲染優化：
   - 保留完整伺服器輸出與 SEO 內容
   - 瀏覽器先渲染首屏，畫面外分區延後排版與繪製
   - 不改卡片數量、排序、載入更多及點擊行為
   ========================================================= */
@supports (content-visibility: auto) {
  body.is-home-page .home-wall > .home-drama-section:not(:first-child),
  .recommend-page .recommend-wall > .recommend-drama-section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }

  body.is-home-page .home-wall > .home-drama-section:first-child,
  .recommend-page .recommend-wall > .recommend-drama-section:first-child {
    contain: layout paint style;
  }
}

body.is-home-page .home-wall .card,
.recommend-page .recommend-wall .card {
  contain: layout paint style;
}

body.is-home-page .home-wall .poster,
.recommend-page .recommend-wall .poster {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* detail-progress-integrated-r1_20260731：詳情頁觀看狀態收斂至主按鈕，保持單行高度。 */
.detail-action-row [data-start-watch] {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* detail-native-sponsored-label-r1_20260731：僅標示詳情頁 Native 廣告，不介入第三方素材或點擊。 */
.wb-detail-native-sponsored {
  margin-top: 12px;
}

.wb-detail-native-sponsored-label {
  margin: 0 0 4px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}