:root{
  --bg1:#070B18;
  --bg2:#0B1430;

  --glass: rgba(255,255,255,.10);
  --glass2: rgba(255,255,255,.14);
  --stroke: rgba(255,255,255,.14);

  --text:#0B1220;
  --muted:#6B7280;

  --primary:#FF3B30;
  --primary2:#FF6A3D;
  --accent:#FFB020;

  --shadow: 0 18px 50px rgba(0,0,0,.40);
  --shadow2: 0 12px 26px rgba(15,23,42,.18);

  --rXL: 26px;
  --rL: 20px;

  --max: 520px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(255,106,61,.26), transparent 58%),
    radial-gradient(700px 360px at 88% 8%, rgba(255,176,32,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 120%, rgba(26,115,232,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
  color: var(--text);
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{
  max-width: var(--max);
  margin:0 auto;
  padding-bottom: 96px;
}

/* =========================
   Topbar
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, rgba(7,11,24,.78), rgba(7,11,24,.22));
  backdrop-filter: blur(16px);
}

.toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brandCard{
  position: relative;
  flex: 1;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 22px;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  overflow:hidden;
  color:#fff;
}

.brandCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(220px 90px at 10% 15%, rgba(255,176,32,.18), transparent 60%),
    radial-gradient(240px 110px at 55% 0%, rgba(255,59,48,.14), transparent 62%),
    radial-gradient(260px 120px at 100% 40%, rgba(26,115,232,.12), transparent 64%);
  filter: blur(14px);
  opacity:.9;
  pointer-events:none;
}

.brandLeft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
  position:relative;
  z-index:1;
}

.brandIcon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  position: relative;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 16px 26px rgba(0,0,0,.20);
  overflow:hidden;
}
.brandIcon::before{
  content:"";
  position:absolute; inset:-30%;
  background: conic-gradient(from 180deg,
    rgba(255,59,48,.90),
    rgba(255,176,32,.80),
    rgba(26,115,232,.60),
    rgba(255,59,48,.90)
  );
  filter: blur(10px);
  opacity:.55;
  animation: spin 6.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg);} }

.brandIcon .badgeCore{
  position:absolute;
  inset: 6px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,59,48,.95), rgba(255,176,32,.95));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 18px rgba(255,59,48,.14);
}
.brandIcon svg{
  width: 22px;
  height: 22px;
  display:block;
  position:relative;
  z-index:2;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.sprocket{
  position:absolute;
  top: 9px; bottom: 9px;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  z-index:2;
}
.sprocket.left{ left: 9px; }
.sprocket.right{ right: 9px; }

.brandMain{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 3px;
  line-height: 1.05;
}
/* ✅ 两行：上标题 / 下副标题 */
.brandTitleRow{
  display:flex;
  flex-direction:column;      /* 关键：从横排改成竖排 */
  align-items:flex-start;
  gap:2px;                    /* 行间距更紧凑 */
  min-width:0;
}

/* 标题行 */
.brandName{
  font-size:14px;
  font-weight:1100;
  letter-spacing:.2px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* 副标题行 */
.brandSub{
  font-size:12px;
  opacity:.88;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.brandLeft{ min-width:0; }
.brandMain{ min-width:0; }


/* =========================
   ✅ 语言切换（融入品牌卡片，不是独立模块）
========================= */
.langInline{
  position:relative;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  gap: 8px;

  height: 42px;
  padding: 0 8px;
  border-radius: 14px;

  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.92);

  cursor:pointer;
  user-select:none;

  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.langInline:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}
.langInline:active{ transform: scale(.99); }

.langInline .g{ font-size: 14px; opacity:.95; }
.langInline .langText{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .2px;
}
.langInline .chev{
  width: 16px;height:16px;
  display:inline-grid;place-items:center;
  opacity:.9;
}
.langInline svg{ width:16px;height:16px; }

/* =========================
   ✅ 语言菜单：玻璃透明（固定定位，不被裁切）
========================= */
.langMenu{
  position: fixed;
  z-index: 120;
  min-width: 180px;
  padding: 8px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 80px rgba(0,0,0,.40);
  backdrop-filter: blur(18px);

  transform-origin: top right;
  animation: menuIn .14s ease-out forwards;
}
@keyframes menuIn{
  from{ transform: translateY(-4px) scale(.98); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

.langItem{
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.92);
  text-align:left;

  padding: 10px 10px;
  border-radius: 14px;

  font-size: 13px;
  font-weight: 900;
  cursor:pointer;

  transition: background .12s ease, transform .12s ease;
}

.langItem:hover{ background: rgba(255,255,255,.10); }
.langItem:active{ transform: scale(.99); }

.langItem.active{
  background: linear-gradient(135deg, rgba(255,59,48,.22), rgba(255,176,32,.18));
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================
   Carousel（✅ 修复点在这里）
========================= */
.hero{ padding: 6px 14px 0; }
.carousel{
  position:relative;
  border-radius: var(--rXL);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  user-select:none;
  touch-action: pan-y;
}

/* ✅ 关键：track 明确为一条横向轨道 */
.carouselTrack{
  display:flex;
  width: 100%;
  transition: transform .40s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ✅ 关键：slide 固定为“每页=100%”，避免 flex 参与收缩导致第二张卡住 */
.slide{
  flex: 0 0 100%;
  min-width: 0;            /* 防止某些浏览器下 min-width 反向干扰 */
  height: 220px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 260px at 15% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(255,59,48,.70), rgba(255,176,32,.52));
}

.slide::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.32));
  pointer-events:none;
}

.slideImg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit: cover;
  opacity:.93;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.03);
}

.dots{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:7px;
  pointer-events:auto;
}
.dot{
  width:7px;height:7px;border-radius:999px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.22);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.dot.active{
  background: rgba(255,255,255,.92);
  transform: scale(1.15);
}

/* =========================
   Quick Actions
========================= */
.quick{
  padding: 12px 14px 0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.q{
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 10px 6px;
  text-align:center;
  user-select:none;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.q:active{transform: scale(.98)}
.q:hover{box-shadow: 0 14px 28px rgba(15,23,42,.18)}
.q i{
  display:grid;place-items:center;
  width: 36px;height:36px;
  margin: 0 auto 7px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,59,48,.12), rgba(255,176,32,.14));
  border: 1px solid rgba(255,59,48,.10);
  font-style: normal;
  font-size: 16px;
}
.q span{font-size:11px;font-weight:900;color:#111827}

/* =========================
   Section + Movies list
========================= */
.sec{
  padding: 16px 14px 10px;
  color:#fff;
}
.secTop{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.secTitle{font-size: 16px;font-weight: 1200;letter-spacing:.2px;}
.secHint{font-size: 12px;opacity: .82;margin-top: 4px;}
.secLink{
  font-size: 12px;
  font-weight: 1100;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease;
}
.secLink:active{transform: scale(.98)}

.list{
  padding: 0 14px;
  display:grid;
  gap: 12px;
}
.movie{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--rXL);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.movie:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.movieInner{
  display:flex;
  gap: 12px;
  padding: 12px;
  align-items:flex-start;
}
.poster{
  width: 96px;
  height: 136px;
  border-radius: 18px;
  flex: 0 0 auto;
  overflow:hidden;
  border: 1px solid rgba(17,24,39,.06);
  background: rgba(17,24,39,.06);
  position:relative;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.poster img{width:100%;height:100%;object-fit: cover;display:block;}
.tag{
  position:absolute;
  top:10px;left:10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,59,48,.96);
  color:#fff;
  font-size: 11px;
  font-weight: 1100;
  box-shadow: 0 12px 26px rgba(255,59,48,.18);
}

.meta{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.title{
  font-size: 15px;
  font-weight: 1200;
  line-height: 1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sub{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
}
.pillRow{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  font-size: 11px;
  font-weight: 1000;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,176,32,.16);
  color: #7A4A00;
  border: 1px solid rgba(255,176,32,.18);
}
.pill.red{
  background: rgba(255,59,48,.10);
  color: var(--primary);
  border: 1px solid rgba(255,59,48,.14);
}
.desc{
  font-size: 12px;
  color: #374151;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.movieFoot{
  padding: 10px 12px;
  background: rgba(17,24,39,.03);
  border-top: 1px solid rgba(17,24,39,.06);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  color: #374151;
}
.footLeft{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.dot2{
  width:6px;height:6px;border-radius:99px;background: rgba(255,59,48,.92);
  box-shadow: 0 8px 18px rgba(255,59,48,.18);
}
.footRight{
  display:flex;gap:8px;align-items:center;
  color: #111827;
  font-weight: 1100;
  cursor:pointer;
  user-select:none;
}

/* =========================
   Bottom Tabbar
========================= */
.tabbar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: min(var(--max), calc(100% - 16px));
  z-index: 70;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: var(--shadow);
  border-radius: 22px;
  padding: 10px;
  display:flex;
  justify-content:space-around;
  backdrop-filter: blur(14px);
}
.t{
  width:20%;
  text-align:center;
  font-size: 11px;
  color: #6B7280;
  user-select:none;
  cursor:pointer;
}
.t .ic{
  width: 40px;
  height: 40px;
  margin: 0 auto 4px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(17,24,39,.05);
  font-style: normal;
  font-size: 16px;
  color: #111827;
  transition: transform .15s ease;
}
.t:active .ic{transform: scale(.98)}
.t.active{color: var(--primary);font-weight: 1200}
.t.active .ic{
  background: rgba(255,59,48,.10);
  color: var(--primary);
  box-shadow: 0 14px 24px rgba(255,59,48,.12);
}

/* =========================
   Bottom Sheet（说明弹窗）
========================= */
.mask{
  position: fixed;
  inset: 0;
  z-index: 90;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding: 14px;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(8px);
}
.sheet{
  width: min(var(--max), 100%);
  border-radius: 24px;
  overflow:hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 26px 80px rgba(0,0,0,.40);
  transform: translateY(8px);
  animation: up .18s ease-out forwards;
}
@keyframes up{
  from{transform: translateY(16px);opacity:.0}
  to{transform: translateY(0);opacity:1}
}
.sheetHead{
  padding: 14px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.sheetHead b{font-size: 14px;font-weight: 1200}
.close{
  width: 40px;height:40px;border-radius: 16px;
  display:grid;place-items:center;
  background: rgba(17,24,39,.06);
  cursor:pointer;
  user-select:none;
}
.sheetBody{
  padding: 14px 14px;
  display:grid;
  gap: 12px;
  font-size: 13px;
  line-height: 1.65;
  color:#111827;
}
.sheetBody small{color: var(--muted);font-size: 12px}
.sheetCard{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(17,24,39,.03);
  border: 1px solid rgba(17,24,39,.06);
}
.sheetFoot{
  padding: 14px 14px;
  border-top: 1px solid rgba(17,24,39,.08);
}
.sheetBtn{
  width:100%;
  border:none;
  cursor:pointer;
  padding: 13px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,59,48,1), rgba(255,106,61,1));
  color:#fff;
  font-weight: 1300;
  font-size: 14px;
  box-shadow: 0 18px 28px rgba(255,59,48,.20);
}

/* =========================
   Toast
========================= */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  z-index: 140;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17,24,39,.92);
  color:#fff;
  font-size: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  max-width: min(var(--max), calc(100% - 28px));
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
}
.toast.show{opacity:1; transform: translateX(-50%) translateY(-4px);}
.safe{height: 8px;}