
:root {
  --bg: #0f0c24; --surf: #181438; --surf2: #221c4d; --ink: #f7f6ff;
  --muted: #a6a1d0; --acc: #ffcf2d; --acc-ink: #110d26; --line: rgba(255,207,45,0.18);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; width: 100%; max-width: 100vw; overflow-x: hidden !important;
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: all .2s ease; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul, li { margin: 0; padding: 0; list-style: none; }
.nav-check { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.menu-btn { display: none; }

.s4-header { position: sticky; top: 10px; z-index: 1100; width: min(1260px, calc(100% - 24px)); margin: 10px auto 0; border-radius: 999px; background: rgba(24,20,56,0.92); backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.s4-nav-wrap { height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.s4-brand { display: inline-flex; align-items: center; gap: 10px; }
.s4-brand img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--acc); }
.s4-brand b { font-size: 18px; font-weight: 900; }
.s4-nav { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; }
.s4-nav a:not(.s4-cta) { min-height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; }
.s4-nav a:not(.s4-cta):hover, .s4-nav a[aria-current="page"] { background: rgba(255,207,45,0.16); color: var(--acc); }
.s4-cta { min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font-weight: 900; display: inline-flex; align-items: center; }
.s4-main { width: min(1260px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 80px; }
/* 三栏门户看板首屏 */
.s4-portal-board { display: grid; grid-template-columns: 240px 1fr 290px; gap: 20px; align-items: stretch; margin-bottom: 56px; }
.s4-tree-panel, .s4-rank-panel, .s4-center-stage { border-radius: 20px; background: var(--surf); border: 1px solid var(--line); padding: 22px; }
.s4-panel-title { font-size: 13px; font-weight: 900; color: var(--acc); letter-spacing: .12em; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); display: block; }
.s4-tree-links { display: grid; gap: 8px; }
.s4-tree-links a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--surf2); font-size: 13px; font-weight: 750; }
.s4-tree-links a:hover { background: var(--acc); color: var(--acc-ink); }
.s4-center-stage { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(155deg, #221c4d, #14102e); }
.s4-center-stage h1 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 950; margin: 10px 0 12px; }
.s4-center-stage > div > p { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.s4-center-banner { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-top: 14px; }
.s4-center-banner img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.s4-center-banner div { position: absolute; inset: auto 0 0 0; padding: 14px 18px; background: linear-gradient(transparent, rgba(15,12,36,0.95)); }
.s4-rank-list { display: grid; gap: 10px; }
.s4-rank-item { display: grid; grid-template-columns: 26px 46px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surf2); }
.s4-rank-item i { font-style: normal; font-weight: 950; color: var(--acc); text-align: center; }
.s4-rank-item img { width: 46px; height: 60px; border-radius: 6px; object-fit: cover; }
.s4-rank-item b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s4-rank-item small { font-size: 11px; color: var(--muted); }
/* 四大内容生态象限分栏横排 */
.s4-quadrant { margin-top: 44px; padding: 26px; border-radius: 22px; background: var(--surf); border: 1px solid var(--line); }
.s4-quad-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.s4-quad-head h2 { font-size: 22px; font-weight: 900; color: var(--acc); }
.s4-quad-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }


/* 公共内页与详情页自适应规则及手机端 (360px~430px) 零溢出保障 */
.xj-footer { width: 100%; background: #040914; color: #cbd5e1; border-top: 1px solid var(--line); padding: 42px 0 30px; margin-top: 72px; }
.xj-footer-inner { width: min(1240px, calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.xj-footer-brand { display: flex; align-items: center; gap: 14px; }
.xj-footer-brand img { width: 44px; height: 44px; border-radius: 10px; }
.xj-footer-brand strong { font-size: 17px; color: #fff; display: block; }
.xj-footer-brand p { font-size: 12.5px; color: #94a3b8; margin-top: 3px; }
.xj-footer-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 750; }
.xj-footer-links a:hover { color: var(--acc); }
.xj-copyright { grid-column: 1 / -1; padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: #94a3b8; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* 通用卡片与详情页辅助类 */
.u-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.u-card { border-radius: 14px; overflow: hidden; background: var(--surf); border: 1px solid var(--line); transition: transform .2s ease; }
.u-card:hover { transform: translateY(-4px); border-color: var(--acc); }
.u-card-img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--surf2); }
.u-card-img img { width: 100%; height: 100%; object-fit: cover; }
.u-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 6px; background: var(--acc); color: var(--acc-ink); font-size: 11px; font-weight: 900; }
.u-card-body { padding: 14px; }
.u-card-body small { display: block; font-size: 11px; color: var(--acc); font-weight: 800; margin-bottom: 4px; }
.u-card-body h3 { font-size: 15.5px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-card-body p { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.u-breadcrumb a { color: var(--acc); font-weight: 800; }

@media (max-width: 1040px) {
  .menu-btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    min-width: 76px; min-height: 44px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surf2); color: var(--ink);
    font-size: 14px; font-weight: 850; cursor: pointer;
  }
  .menu-btn::after { content: "☰"; color: var(--acc); font-size: 16px; }
  .nav-check:checked ~ .menu-btn::after, .is-open .menu-btn::after { content: "✕"; }
  .s1-nav, .s2-nav, .s3-nav, .s4-nav, .s5-nav {
    position: absolute !important; left: 0 !important; right: 0 !important; top: 72px !important;
    z-index: 1200 !important; display: none !important; grid-template-columns: 1fr !important;
    gap: 4px !important; padding: 12px !important; border-radius: 16px !important;
    background: var(--surf) !important; border: 1px solid var(--line) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,0.4) !important;
  }
  .nav-check:checked ~ nav, .is-open nav { display: grid !important; }
  .s1-nav a, .s2-nav a, .s3-nav a, .s4-nav a, .s5-nav a {
    width: 100% !important; min-height: 46px !important; padding: 0 16px !important;
    border-radius: 10px !important; justify-content: flex-start !important; border: 0 !important;
  }
  .s1-device-stage, .s2-product-hero, .s2-stack-deck, .s2-catalog-layout,
  .s3-imax-stage, .s4-portal-board, .s5-app-hero, .s1-split-box { grid-template-columns: 1fr !important; }
  .s1-bento, .s1-grid-5, .s2-os-table, .s2-wide-grid, .s2-steps-row,
  .s3-ticket-grid, .s3-poster-4col, .s4-quad-grid, .u-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .s1-bento-card.tall, .s1-bento-card.wide { grid-row: auto !important; grid-column: auto !important; }
  .s2-sidebar { position: static !important; }
  .xj-footer-inner { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  h1, .s1-keynote-hero h1, .s2-product-hero h1, .s3-screen-grad h1, .s4-center-stage h1, .s5-app-hero h1 {
    font-size: 20px !important; line-height: 1.36 !important; word-break: break-word !important;
  }
  .s1-bento, .s3-spotlight-2x2, .s5-step-3, .s2-os-table, .s2-steps-row { grid-template-columns: 1fr !important; }
  .s1-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .s1-grid-5, .s2-wide-grid, .s3-poster-4col, .s4-quad-grid, .u-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* === 官网类型权威导语框、防伪核验表与技术参数表增强样式 === */
.official-lead-box {
  margin: 18px 0 22px;
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-left: 4px solid var(--acc);
  text-align: left;
}
.s2-product-hero .official-lead-box {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(29, 94, 255, 0.06);
}
.official-lead-box p {
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  color: var(--txt) !important;
  margin: 0 0 10px 0 !important;
  max-width: none !important;
}
.official-lead-box p:last-child {
  margin-bottom: 0 !important;
}
.official-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 18px 0;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}
.official-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.official-table th, .official-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.official-table th {
  font-weight: 800;
  color: var(--acc);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.s2-sec .official-table th {
  background: #eff4ff;
  color: var(--acc);
}
.official-table tr:last-child td {
  border-bottom: none;
}
.official-badge-ok {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  margin-right: 6px;
}
.official-badge-warn {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  margin-right: 6px;
}

/* === 5站各自独立的页脚样式系统（彻底消除同质化DOM指纹） === */
.s1-foot-wrap { background:#040a18; border-top:1px solid rgba(255,208,38,0.18); padding:36px 20px; margin-top:56px; color:#94a3b8; font-size:13px; }
.s1-foot-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:center; }
.s1-foot-nav { display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-end; }
.s1-foot-nav a { color:#cbd5e1; text-decoration:none; }
.s2-corp-footer { background:#ffffff; border-top:2px solid #e2e8f0; padding:40px 20px; margin-top:56px; color:#475569; font-size:13px; }
.s2-corp-inner { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.s2-corp-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid #f1f5f9; }
.s3-cinema-foot { background:#050608; border-top:1px solid rgba(245,184,28,0.22); padding:38px 20px; margin-top:56px; color:#9ca3af; font-size:13px; text-align:center; }
.s3-cinema-box { max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:14px; align-items:center; }
.s4-portal-foot { background:#090718; border-top:1px solid rgba(255,207,45,0.2); padding:36px 20px; margin-top:56px; color:#a5b4fc; font-size:13px; }
.s4-portal-cols { max-width:1220px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.s5-app-foot { background:#041214; border-top:1px solid rgba(255,224,51,0.2); padding:34px 20px; margin-top:56px; color:#99f6e4; font-size:13px; }
.s5-app-bar { max-width:1140px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
@media (max-width:768px) {
  .s1-foot-grid { grid-template-columns:1fr; }
  .s1-foot-nav { justify-content:flex-start; }
}

/* 官网优化：内容卡片仅展示资料，下载操作保留在明确按钮。 */
.official-static-card{color:inherit;text-decoration:none;cursor:default}
.s4-rank-item.official-static-card{display:grid}
[id]{scroll-margin-top:110px}
#site-nav a{white-space:nowrap}
.headline-line{display:block}
.s1-menu-cta{display:none}
#site-nav a:focus-visible,.menu-btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
@media(max-width:1040px){
  .s1-topbar,.s2-utility-bar{display:none!important}
  .s1-brand small,.s2-brand em,.s3-brand small,.s5-brand .apk-badge{display:none!important}
  .s1-header-cta{display:none!important}
  .s1-menu-cta{display:flex!important}
  .s1-nav-wrap{grid-template-columns:1fr auto!important;height:64px!important;gap:12px!important}
  .s2-nav-wrap,.s3-nav-wrap,.s5-nav-wrap{height:64px!important}
  .s4-nav-wrap{height:60px!important;padding:0 14px!important}
  .s1-brand b,.s2-brand b,.s3-brand b,.s4-brand b,.s5-brand b{font-size:17px!important;white-space:nowrap}
  .menu-btn{width:48px!important;min-width:48px!important;padding:0!important;font-size:0!important;gap:0!important}
  .menu-btn::after{font-size:20px!important}
  .s1-nav,.s2-nav,.s3-nav,.s4-nav,.s5-nav{top:calc(100% + 8px)!important}
  .s4-center-stage{order:1}.s4-tree-panel{order:2}.s4-rank-panel{order:3}
}
@media(max-width:420px){
  .s1-brand img,.s2-brand img,.s3-brand img,.s5-brand img{width:38px!important;height:38px!important}
  .s4-brand img{width:36px!important;height:36px!important}
  .s1-brand b,.s2-brand b,.s3-brand b,.s4-brand b,.s5-brand b{font-size:16px!important}
}
