:root{
  color-scheme:dark;
  --bg:#070912;
  --bg-soft:#0b0f1d;
  --panel:#111725;
  --panel-strong:#161d2f;
  --panel-glass:rgba(17,23,37,.82);
  --line:rgba(148,163,184,.14);
  --line-bright:rgba(96,165,250,.28);
  --text:#f8fafc;
  --muted:#9aa8bc;
  --muted-strong:#c7d2e3;
  --brand:#6ea8ff;
  --brand-strong:#2f7df4;
  --brand-violet:#8b7cff;
  --success:#4ade80;
  --warning:#fbbf24;
  --danger:#fb7185;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-height:100vh;
  color:var(--text) !important;
  background:
    radial-gradient(circle at 10% -10%,rgba(47,125,244,.18),transparent 34rem),
    radial-gradient(circle at 92% 7%,rgba(139,124,255,.12),transparent 28rem),
    linear-gradient(180deg,#080b14 0%,#070912 52%,#090c16 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}

::selection{background:rgba(110,168,255,.32);color:#fff}
a,button{-webkit-tap-highlight-color:transparent}
img{max-width:100%}

.wrap{max-width:1220px !important;padding:20px 22px 64px !important}
.nav{
  position:sticky;
  top:12px;
  z-index:40;
  min-height:68px;
  margin:0 0 28px !important;
  padding:8px 10px 8px 14px !important;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(9,12,22,.8);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}
.brand{gap:10px !important;color:#fff;font-size:21px !important;letter-spacing:-.4px}
.brand img,.brand-icon{width:44px !important;height:44px !important;filter:drop-shadow(0 8px 18px rgba(87,123,255,.28))}
.nav-links{gap:6px !important;color:var(--muted) !important}
.nav-links a{padding:11px 14px;border-radius:12px;transition:.2s ease}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-links a.active{color:#fff !important;background:rgba(74,127,255,.15);box-shadow:inset 0 0 0 1px rgba(110,168,255,.16)}
.nav-btn{background:linear-gradient(135deg,var(--brand-strong),#695cf5) !important;color:#fff !important}

.badge{
  color:#bdd7ff !important;
  background:rgba(61,119,224,.14) !important;
  border:1px solid rgba(110,168,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
h1,h2,h3,h4,strong{color:var(--text)}
h1{font-size:clamp(48px,5.2vw,72px) !important;letter-spacing:-3px !important}
h1 span{color:#8bbcff !important;text-shadow:0 0 36px rgba(66,128,255,.2)}
.sub,.content-head p,.section-head p,.card p,.feature p,.flow-item p,.step p,.help p,.faq-card p,.device p,.pc-card p,.guide-hero p,.guide-head p,.step-text p,.tv-step-title p{color:var(--muted) !important}

.hero{gap:44px !important;padding:44px 10px 48px !important;min-height:520px}
.btn,.intro-link,.device a,.pc-card a{
  border:1px solid transparent !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.btn:hover,.intro-link:hover,.device a:hover,.pc-card a:hover{transform:translateY(-2px)}
.primary,.device a,.pc-card a{
  color:#fff !important;
  background:linear-gradient(135deg,#2f7df4,#665af3) !important;
  box-shadow:0 16px 38px rgba(47,125,244,.24) !important;
}
.secondary,.intro-link{
  color:#d9e8ff !important;
  background:rgba(255,255,255,.055) !important;
  border-color:var(--line-bright) !important;
  box-shadow:none !important;
}

.hero-video{
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius-xl) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025) inset !important;
}
.hero-video::after{
  content:"电视端实拍";
  position:absolute;
  right:16px;
  bottom:14px;
  z-index:4;
  padding:7px 11px;
  border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(3,7,18,.58);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  font-size:12px;
  font-weight:800;
}
.hero-img img{border:1px solid var(--line);background:#090d18;box-shadow:var(--shadow);filter:none !important}

.content-wall,.features,.card,.section,.steps,.step,.help,.quick a,.flow,.flow-item,.device,.pc-card,.faq-card,.guide-hero,.guide-card,.step-item,.tv-step,.guide-credentials{
  color:var(--text) !important;
  border-color:var(--line) !important;
  background:linear-gradient(145deg,rgba(21,28,45,.96),rgba(12,17,29,.96)) !important;
  box-shadow:var(--shadow) !important;
}
.content-wall,.features,.section,.steps,.help,.guide-hero,.guide-card{border:1px solid var(--line)}
.content-wall,.section,.guide-card{position:relative;overflow:hidden}
.content-wall::before,.section::before,.guide-card::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-160px;
  top:-180px;
  border-radius:50%;
  background:rgba(76,121,255,.12);
  filter:blur(12px);
  pointer-events:none;
}
.tags span{color:#b9d5ff !important;background:rgba(66,119,222,.12) !important;border:1px solid rgba(110,168,255,.12)}
.poster img{box-shadow:0 16px 34px rgba(0,0,0,.4) !important;transition:transform .28s ease,box-shadow .28s ease}
.poster:hover img{transform:translateY(-5px) scale(1.015);box-shadow:0 24px 45px rgba(0,0,0,.5) !important}
.poster small{color:var(--muted) !important}
.update-note{color:#8bbcff !important}
.feature{border-color:var(--line) !important}
.section-title{color:#f4f7fb}
.steps,.flow{background:rgba(30,44,75,.45) !important}
.num,.flow-num,.step-num{background:linear-gradient(135deg,#397ff1,#675cf4) !important;color:#fff !important;box-shadow:0 8px 24px rgba(47,125,244,.22)}
.help{background:linear-gradient(135deg,rgba(31,77,153,.38),rgba(20,24,42,.96)) !important}
.qr,.qr-box{color:var(--text) !important;background:#f7f9fc !important;box-shadow:0 18px 44px rgba(0,0,0,.3) !important}
.qr div{color:#2563eb !important}
.footer,.footer span{color:#748198 !important}

.quick a{min-height:126px;display:flex;flex-direction:column;justify-content:center}
.quick p{color:var(--muted) !important}
.method{background:rgba(31,50,83,.35) !important;border-color:rgba(96,165,250,.18) !important}
.method.green{background:rgba(20,83,50,.22) !important;border-color:rgba(74,222,128,.18) !important}
.method.orange{background:rgba(113,63,18,.2) !important;border-color:rgba(251,191,36,.2) !important}
.method h3{color:#8bbcff !important}.method.green h3{color:#65e89a !important}.method.orange h3{color:#f9c35b !important}
.line{color:var(--muted-strong) !important}
.show-img img,.mobile-img img,.pc-img img{border:1px solid var(--line);background:#090d18;box-shadow:0 20px 48px rgba(0,0,0,.36)}
.support{background:linear-gradient(135deg,#173b79,#352f82) !important;border:1px solid rgba(125,162,255,.22);box-shadow:var(--shadow)}
.support p{color:#d5e2f5 !important}
.faq-card,.device,.pc-card{background:rgba(20,27,43,.92) !important}

.guide-hero{background:linear-gradient(135deg,rgba(31,72,145,.34),rgba(17,23,37,.96)) !important}
.login-warning{background:rgba(128,49,58,.22) !important;border-color:rgba(251,113,133,.28) !important;color:#fecdd3 !important}
.warn-box,.optional-note{background:rgba(112,62,18,.24) !important;border-color:rgba(251,191,36,.22) !important;color:#fde68a !important}
.device-tabs{
  position:sticky;
  top:94px;
  z-index:30;
  gap:12px !important;
  padding:8px 0 !important;
  border:0 !important;
  background:rgba(8,12,22,.9) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 24px rgba(8,12,22,.82) !important;
}
.device-tab{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px 18px !important;
  color:#c8d4e8 !important;
  background:linear-gradient(180deg,rgba(27,36,55,.98),rgba(17,24,39,.98)) !important;
  border:1px solid rgba(119,145,184,.32) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04) !important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.device-tab:hover{transform:translateY(-2px);border-color:rgba(116,170,255,.64) !important}
.device-tab-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  background:rgba(96,165,250,.12);
  border:1px solid rgba(147,197,253,.22);
  font-size:28px;
  line-height:1;
  filter:saturate(.95);
}
.device-tab-label{font-size:18px;font-weight:850;line-height:1.25;letter-spacing:.01em}
.device-tab.active{
  color:#fff !important;
  background:linear-gradient(135deg,#2f7df4,#655af3) !important;
  border-color:#8ab8ff !important;
  box-shadow:0 0 0 2px rgba(96,165,250,.2),0 14px 32px rgba(47,125,244,.34) !important;
}
.guide-panel{color:var(--text)}
.step-item,.tv-step{
  background:linear-gradient(145deg,rgba(27,39,63,.98),rgba(15,22,36,.98)) !important;
  border-color:rgba(126,157,207,.24) !important;
}
.step-img,.tv-step-img,.post-flow-shot,.pc-entry-context,.pc-channel-result{
  background:#080b12 !important;
  border-color:rgba(137,170,224,.42) !important;
  box-shadow:0 0 0 1px rgba(126,164,229,.08),0 18px 44px rgba(0,0,0,.46) !important;
}
.pc-login-notes span,.post-flow-instruction,.post-channel-hint{color:#d7e6ff !important;background:rgba(31,70,142,.82) !important;border-color:rgba(110,168,255,.22) !important}
.pc-finish-label{
  color:#eef4ff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.image-field,.pc-value-overlay,
.pc-value-overlay strong{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.pc-value-overlay{
  color:#60a5fa !important;
}
.pc-value-overlay::before,
.pc-value-overlay::after,
.pc-value-overlay strong::before,
.pc-value-overlay strong::after{
  display:none !important;
  content:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.pc-value-account,.pc-value-password{
  padding:0 !important;
  background:transparent !important;
}
.mobile-login-canvas .image-field,
.mobile-login-canvas .image-field strong,
.mobile-login-canvas .image-field .password-value{
  height:auto !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.image-field strong,.image-field .password-value{color:#111 !important}
.mobile-login-canvas .image-field strong,
.mobile-login-canvas .image-field .password-value{
  color:#2f66f5 !important;
  line-height:1.15 !important;
}
.pc-value-overlay strong{color:#2f66f5 !important}
.pc-value-domain{
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.pc-value-domain strong{display:inline !important}
.pc-value-password{
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#pc .pc-finish-label{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
#pc .pc-finish-label b{
  flex:0 0 34px !important;
}
#pc .pc-finish-label span{
  display:block !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
@media(max-width:760px){
  .mobile-login-combined .image-field-domain{
    left:23% !important;
    top:32.55% !important;
    max-width:38% !important;
    font-size:clamp(10.5px,3vw,12px) !important;
  }
  .mobile-login-combined .image-field-account{
    left:26% !important;
    top:41.05% !important;
    max-width:66% !important;
    font-size:clamp(12px,3.25vw,13.5px) !important;
  }
  .mobile-login-combined .image-field-password{
    left:26% !important;
    top:48.65% !important;
    max-width:38% !important;
    font-size:clamp(13px,3.5vw,14.5px) !important;
  }
  .mobile-login-combined .image-field{
    align-items:center !important;
    white-space:nowrap !important;
  }
  .mobile-login-combined .image-copy{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    font-size:10px !important;
  }
  .mobile-guide-title h2{
    font-size:clamp(10.5px,2.82vw,12px) !important;
    letter-spacing:-.35px !important;
    white-space:nowrap !important;
  }
  .pc-login-step .pc-value-domain{
    left:23.8% !important;
    top:26.15% !important;
    max-width:35% !important;
    font-size:clamp(10px,2.9vw,12.5px) !important;
  }
  .pc-login-step .pc-value-account{
    top:40.2% !important;
    max-width:54% !important;
    font-size:clamp(9.5px,2.65vw,11.5px) !important;
    line-height:1.15 !important;
  }
  .pc-login-step .pc-value-password{
    top:55.2% !important;
    max-width:38% !important;
    font-size:clamp(10px,2.9vw,12.5px) !important;
    line-height:1.15 !important;
  }
  .pc-login-step .step-text h3{
    font-size:clamp(10.5px,2.82vw,12px) !important;
    letter-spacing:-.35px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
  }
  #pc .pc-finish-label{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    white-space:nowrap !important;
    font-size:clamp(16px,4.6vw,19px) !important;
    line-height:1.2 !important;
  }
  #pc .pc-finish-label b{
    flex:0 0 34px !important;
  }
  #pc .pc-finish-label span{
    min-width:0;
    white-space:nowrap !important;
  }
}
.image-field-label{display:none !important}
.credential-copy,.image-copy,.pc-copy-pill{
  color:#dbeafe !important;
  background:rgba(47,102,245,.78) !important;
  border-color:rgba(147,197,253,.42) !important;
}
.mobile-login-bottom-cover{background:#f8fafc !important}
.credential-row span{color:var(--muted) !important}
.tv-optional .tv-step-title h3{color:#f8fafc !important}

.mobile-bottom-nav{
  background:rgba(9,12,22,.94) !important;
  border-color:var(--line) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 -12px 38px rgba(0,0,0,.28) !important;
}
.mobile-bottom-nav a{color:#77869c !important}
.mobile-bottom-nav a.active{color:#9dc4ff !important;background:rgba(54,104,201,.14) !important}

/* 小程序 web-view：沿用官网内容，底部只保留小程序主导航。 */
html.miniapp-embed body{
  padding-bottom:calc(58px + env(safe-area-inset-bottom)) !important;
}
html.miniapp-embed .intro-link{
  display:none !important;
}
html.miniapp-embed .mobile-bottom-nav.miniapp-tabbar{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:calc(50px + env(safe-area-inset-bottom)) !important;
  min-height:calc(50px + env(safe-area-inset-bottom)) !important;
  padding:0 0 env(safe-area-inset-bottom) !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  border-radius:0 !important;
  background:rgba(17,19,30,.97) !important;
  box-shadow:0 -10px 28px rgba(3,6,16,.28) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
html.miniapp-embed .mobile-bottom-nav.miniapp-tabbar a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  height:50px !important;
  padding:0 4px !important;
  color:#85889b !important;
  background:transparent !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1 !important;
}
html.miniapp-embed .mobile-bottom-nav.miniapp-tabbar a.active{
  color:#aa92ff !important;
  background:transparent !important;
}
html.miniapp-embed .mobile-bottom-nav.miniapp-tabbar span{
  display:block !important;
  margin:0 !important;
  font-size:inherit !important;
  white-space:nowrap !important;
}

@media(max-width:760px){
  .wrap{padding:10px 12px 98px !important}
  .nav{top:8px;min-height:58px;margin-bottom:12px !important;border-radius:16px;padding:7px 8px 7px 10px !important}
  .brand{font-size:18px !important;white-space:nowrap}
  .brand img,.brand-icon{width:38px !important;height:38px !important}
  .hero{grid-template-columns:1fr !important;gap:24px !important;min-height:auto;padding:28px 2px 30px !important}
  .hero>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
  h1{font-size:clamp(42px,13vw,57px) !important;line-height:1.03 !important;letter-spacing:-2.4px !important}
  .sub{font-size:16px !important;line-height:1.75 !important;margin-top:18px !important}
  .btns{width:100%;display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;margin-top:24px !important}
  .btn{padding:13px 10px !important;border-radius:14px !important;text-align:center;font-size:15px !important}
  .hero-video{order:-1;border-radius:22px !important}
  .content-wall,.section,.features,.steps,.help,.guide-hero,.guide-card{border-radius:22px !important;padding:18px !important}
  .features{grid-template-columns:repeat(2,1fr) !important;gap:0 !important}
  .feature{padding:18px 8px;border-right:0 !important;border-bottom:1px solid var(--line)}
  .feature:nth-child(odd){border-right:1px solid var(--line) !important}
  .feature:nth-last-child(-n+2){border-bottom:0}
  .devices{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
  .card{padding:18px 12px !important;border-radius:18px !important}
  .device-icon{font-size:34px !important}
  .card h3{font-size:16px !important}.card p{font-size:13px !important}
  .poster-grid{gap:12px !important}
  .quick{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:9px !important}
  .quick a{min-height:104px;padding:12px 5px !important;border-radius:17px !important}
  .quick h3{font-size:14px !important;white-space:nowrap}
  .quick p{font-size:11px !important;line-height:1.45}
  .section-head{position:relative;z-index:1}
  .section-head h2{font-size:23px !important}.section-head p{line-height:1.55}
  .support h2,.help h2{font-size:22px !important;white-space:normal !important}
  .device-tabs{top:74px;border-radius:0 !important;gap:10px !important;padding:8px 0 !important}
  .device-tab{min-height:84px;padding:11px 8px !important;line-height:1.25;border-radius:16px !important;flex-direction:row;gap:12px}
  .device-tab-icon{width:42px;height:42px;flex-basis:42px;border-radius:13px;font-size:25px}
  .device-tab-label{font-size:15px;line-height:1.25;text-align:left}
  .guide-hero{margin-top:14px !important}
  .guide-hero h1{font-size:clamp(34px,10vw,44px) !important}
  .step-item,.tv-step{border-radius:18px !important}
  .mobile-bottom-nav:not(.miniapp-tabbar){padding-bottom:max(4px,env(safe-area-inset-bottom)) !important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important}
}