/* ==========================================================================
   视讯网投会馆 · Site Kit 共享层
   夜间演播厅 × 数据仪表盘 / 深海墨蓝底 + 信号橙 + 电光青 + 暖金
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --ink-900:#061826;
  --ink-800:#0B2238;
  --ink-700:#123550;
  --orange:#FF6B2C;
  --orange-soft:#FF8350;
  --cyan:#22E0D0;
  --gold:#F5C26B;
  --mist:#A9C3D8;
  --paper:#F3F7FA;
  --alert:#FF5D73;
  --grid-line:rgba(60,105,134,.18);
  --grid-strong:rgba(60,105,134,.34);
  --font-display:'Barlow Condensed','Noto Sans SC',sans-serif;
  --font-body:'Noto Sans SC',sans-serif;
  --font-mono:'JetBrains Mono','Noto Sans SC',monospace;
  --shell:1240px;
  --gutter:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,.1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--ink-900);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
::selection{background:var(--cyan);color:var(--ink-900)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* ---------- 3. 中文排版 ---------- */
h1,h2,h3,h4,h5,h6{
  margin:0 0 .55em;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--paper);
}
h1{font-size:clamp(44px,7vw,104px)}
h2{font-size:clamp(28px,3.4vw,48px)}
h3{font-size:clamp(20px,2vw,28px)}
h4{font-size:clamp(17px,1.5vw,20px);line-height:1.32}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--cyan);text-decoration:none;transition:color .22s var(--ease)}
a:hover{color:var(--paper)}
strong{font-weight:700;color:var(--paper)}
small{font-size:.82rem;color:var(--mist)}
code,kbd{font-family:var(--font-mono);font-size:.86em;color:var(--gold)}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:10px;left:10px;z-index:999;
  padding:10px 18px;
  background:var(--cyan);
  color:var(--ink-900);
  font-size:.85rem;
  font-weight:700;
  border-radius:3px;
  transform:translateY(-180%);
  transition:transform .22s var(--ease);
}
.skip-link:focus{transform:translateY(0);color:var(--ink-900);outline-offset:2px}

/* ---------- 5. 页头：悬浮胶囊 ---------- */
.site-header{
  position:fixed;
  top:16px;
  left:0;right:0;
  z-index:120;
  padding-inline:clamp(12px,3vw,32px);
  pointer-events:none;
}
.header-shell{
  max-width:var(--shell);
  margin-inline:auto;
  pointer-events:auto;
}
.header-pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,26px);
  padding:9px 12px 9px 18px;
  border:1px solid var(--grid-line);
  border-radius:999px;
  background:linear-gradient(118deg,rgba(18,53,80,.94),rgba(6,24,38,.96));
  box-shadow:0 20px 44px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(243,247,250,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.header-pill::before{
  content:"";
  position:absolute;
  left:18px;top:0;
  width:54px;height:1px;
  background:linear-gradient(90deg,var(--orange),transparent);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
  flex:none;
}
.brand:hover{color:var(--paper)}
.brand-mark{
  width:22px;height:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:end;
  gap:2px;
  flex:none;
}
.brand-mark span{display:block;border-radius:1px;background:var(--cyan);transition:height .3s var(--ease)}
.brand-mark span:nth-child(1){height:38%;opacity:.7}
.brand-mark span:nth-child(2){height:68%;background:var(--orange)}
.brand-mark span:nth-child(3){height:100%}
.brand-text{display:flex;flex-direction:column;gap:1px;line-height:1.18;min-width:0}
.brand-label{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:.01em;
  white-space:nowrap;
}
.brand-subline{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--mist);
  white-space:nowrap;
}

/* 导航 */
.header-nav{flex:1;display:flex;justify-content:center;min-width:0}
.nav-list{
  display:flex;
  align-items:center;
  gap:clamp(2px,.8vw,8px);
  margin:0;padding:0;
  list-style:none;
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:.5em .72em;
  border-radius:999px;
  font-size:.855rem;
  letter-spacing:.02em;
  color:var(--mist);
  white-space:nowrap;
  transition:color .22s var(--ease),background .22s var(--ease);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:.72em;right:.72em;bottom:.26em;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .26s var(--ease),background .22s var(--ease);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--paper);background:rgba(34,224,208,.08)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link[aria-current="page"]{
  color:var(--cyan);
  background:rgba(34,224,208,.11);
}
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--orange);
}

/* 行动区 */
.header-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.header-cta{letter-spacing:.06em}

/* 移动开关 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:.5em;
  padding:.5em .85em;
  border:1px solid rgba(34,224,208,.35);
  border-radius:999px;
  background:rgba(34,224,208,.08);
  color:var(--cyan);
  cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.nav-toggle:hover{background:rgba(34,224,208,.16);border-color:var(--cyan)}
.nav-toggle-bars{position:relative;display:block;width:16px;height:10px;flex:none}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";
  position:absolute;left:0;right:0;height:2px;
  background:currentColor;
  border-radius:2px;
  transition:top .22s var(--ease),bottom .22s var(--ease),transform .22s var(--ease);
}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{bottom:0}
.nav-toggle-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em}
.site-header[data-open] .nav-toggle-bars::before{top:4px;transform:rotate(45deg)}
.site-header[data-open] .nav-toggle-bars::after{bottom:4px;transform:rotate(-45deg)}

/* ---------- 6. 按钮 ---------- */
.btn{
  --btn-bg:rgba(18,53,80,.55);
  --btn-fg:var(--paper);
  --btn-line:var(--grid-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.72em 1.5em;
  border:1px solid var(--btn-line);
  border-radius:3px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.04em;
  cursor:pointer;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{color:var(--btn-fg);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--cyan)}
.btn-primary{--btn-bg:var(--orange);--btn-fg:var(--ink-900);--btn-line:transparent;font-weight:700}
.btn-primary:hover{background:var(--orange-soft);color:var(--ink-900)}
.btn-ghost{--btn-bg:rgba(34,224,208,.08);--btn-fg:var(--cyan);--btn-line:rgba(34,224,208,.42)}
.btn-ghost:hover{background:rgba(34,224,208,.17);color:var(--cyan)}
.btn-sm{padding:.55em 1.05em;font-size:.78rem}

/* ---------- 7. 骨架容器 ---------- */
.site-main{padding-top:clamp(104px,12vh,132px);padding-bottom:clamp(24px,4vw,48px)}
#main-content{scroll-margin-top:104px}
.container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(40px,6vw,80px)}
.section--tight{padding-block:clamp(22px,3vw,40px)}

/* ---------- 8. 文字组件 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65em;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.coord{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--cyan);
}
.display-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(44px,7vw,104px);
  line-height:.94;
  letter-spacing:-.02em;
  margin:0 0 .35em;
  color:var(--paper);
}
.display-title em{font-style:normal;color:var(--orange)}
.lede{
  max-width:62ch;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.85;
  color:var(--mist);
}

/* ---------- 9. 面板与网格 ---------- */
.surface{
  position:relative;
  padding:clamp(18px,2.6vw,32px);
  border:1px solid var(--grid-line);
  border-radius:4px;
  background:linear-gradient(158deg,rgba(18,53,80,.72),rgba(11,34,56,.9));
  overflow:hidden;
}
.surface::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:44px;height:2px;
  background:var(--orange);
}
.grid{display:grid;gap:clamp(16px,2.6vw,30px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 10. 面包屑 ---------- */
.breadcrumb{margin:0 0 clamp(18px,3vw,30px)}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  color:var(--mist);
}
.breadcrumb-item{display:inline-flex;align-items:center;gap:8px}
.breadcrumb-item + .breadcrumb-item::before{content:"/";color:rgba(169,195,216,.45)}
.breadcrumb-item a{color:var(--mist)}
.breadcrumb-item a:hover{color:var(--cyan)}
.breadcrumb-item[aria-current="page"]{color:var(--paper)}

/* ---------- 11. 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  border:1px solid var(--grid-line);
  border-radius:4px;
  aspect-ratio:16/10;
  background:
    radial-gradient(circle at 72% 18%,rgba(34,224,208,.2),transparent 58%),
    radial-gradient(circle at 18% 88%,rgba(255,107,44,.18),transparent 62%),
    var(--ink-700);
}
.media-frame img,.media-frame picture,.media-frame video,.media-frame svg{
  width:100%;height:100%;object-fit:cover;
}
.media-frame::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:38px 38px;
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--square{aspect-ratio:1/1}

/* ---------- 12. 主题筛选 ---------- */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 clamp(18px,3vw,28px);
  padding:0;
  list-style:none;
}
.tag{
  padding:.5em 1.05em;
  border:1px solid var(--grid-line);
  border-radius:999px;
  background:rgba(11,34,56,.72);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.tag:hover{color:var(--paper);border-color:rgba(34,224,208,.5)}
.tag[aria-pressed="true"]{
  background:rgba(34,224,208,.14);
  border-color:var(--cyan);
  color:var(--cyan);
}
.tag:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- 13. 折叠面板 ---------- */
.accordion{display:flex;flex-direction:column;border-top:1px solid var(--grid-line)}
.accordion-item{border-bottom:1px solid var(--grid-line)}
.accordion-trigger{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:18px 4px;
  border:0;
  background:none;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:color .22s var(--ease);
}
.accordion-trigger:hover{color:var(--cyan)}
.accordion-trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.accordion-index{
  flex:none;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--gold);
}
.accordion-sign{position:relative;flex:none;width:18px;height:18px;margin-left:auto}
.accordion-sign::before,.accordion-sign::after{
  content:"";
  position:absolute;
  background:var(--cyan);
  transition:transform .24s var(--ease);
}
.accordion-sign::before{left:0;right:0;top:8px;height:2px}
.accordion-sign::after{top:0;bottom:0;left:8px;width:2px}
.accordion-trigger[aria-expanded="true"] .accordion-sign::after{transform:scaleY(0)}
.accordion-panel{
  padding:2px 4px 22px calc(4px + 52px);
  color:var(--mist);
  font-size:.95rem;
}
.accordion-panel[hidden]{display:none}

/* ---------- 14. 时间轴 ---------- */
.timeline{position:relative;margin:0;padding:0 0 0 26px;list-style:none}
.timeline::before{
  content:"";
  position:absolute;
  left:7px;top:6px;bottom:6px;
  width:1px;
  background:linear-gradient(180deg,var(--gold),rgba(245,194,107,.14));
}
.timeline-item{position:relative;padding-bottom:clamp(18px,3vw,30px)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";
  position:absolute;
  left:-24px;top:7px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--ink-900);
  border:2px solid var(--gold);
}
.rule-step{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--gold);
}

/* ---------- 15. 滚动进度与显现 ---------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  z-index:200;
  pointer-events:none;
  background:linear-gradient(90deg,var(--orange),var(--cyan));
  transform:scaleX(0);
  transform-origin:0 50%;
}
[data-reveal]{transition:opacity .52s var(--ease),transform .52s var(--ease)}
[data-reveal][data-reveal-hidden]{opacity:0;transform:translateY(14px)}
[data-reveal][data-revealed]{opacity:1;transform:none}

/* ---------- 16. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,9vh,110px);
  border-top:1px solid var(--grid-line);
  background:linear-gradient(180deg,var(--ink-800),var(--ink-900) 72%);
  color:var(--mist);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,var(--orange),var(--cyan) 48%,transparent 88%);
  opacity:.85;
}
.footer-shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(38px,6vw,72px) var(--gutter) 24px;
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr);
  gap:clamp(26px,5vw,64px);
  padding-bottom:clamp(26px,4vw,46px);
  border-bottom:1px solid var(--grid-line);
}
.footer-brand{display:flex;flex-direction:column;gap:16px;min-width:0}
.footer-intro{
  max-width:42ch;
  margin:0;
  font-size:.93rem;
  line-height:1.85;
  color:var(--mist);
}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--paper);
}
.footer-contact-item{display:flex;align-items:baseline;gap:10px;word-break:break-all}
.footer-contact-key{
  flex:none;
  min-width:42px;
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--gold);
}
.footer-contact-note{
  max-width:44ch;
  margin:2px 0 0;
  font-size:.76rem;
  line-height:1.75;
  color:rgba(169,195,216,.85);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  min-width:0;
}
.footer-col{min-width:0}
.footer-col-title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--gold);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-link{
  position:relative;
  display:inline-block;
  padding-left:16px;
  font-size:.92rem;
  color:var(--paper);
  transition:color .22s var(--ease),padding-left .22s var(--ease);
}
.footer-link::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:8px;height:1px;
  background:var(--cyan);
  transition:width .22s var(--ease),background .22s var(--ease);
}
.footer-link:hover{color:var(--cyan);padding-left:20px}
.footer-link:hover::before{width:14px;background:var(--orange)}
.footer-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding-top:22px;
  font-size:.78rem;
  color:rgba(169,195,216,.85);
}
.footer-legal{font-family:var(--font-mono);letter-spacing:.05em;margin:0}
.footer-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0}
.footer-meta span{white-space:nowrap}

/* ---------- 17. 响应式 ---------- */
@media (max-width:1024px){
  .nav-link{padding:.5em .55em;font-size:.82rem}
  .brand-subline{letter-spacing:.1em}
}

@media (max-width:980px){
  .footer-top{grid-template-columns:1fr}
  .footer-brand{max-width:none}
}

@media (max-width:920px){
  .site-header{
    top:auto;
    bottom:0;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .header-pill{
    padding:8px 10px 8px 14px;
    gap:8px;
    border-radius:20px;
  }
  .header-pill::before{left:14px;width:36px}
  .brand-subline{display:none}
  .brand-label{font-size:.95rem}
  .header-nav{
    position:absolute;
    left:0;right:0;
    bottom:calc(100% + 10px);
    padding:10px;
    border:1px solid var(--grid-line);
    border-radius:18px;
    background:linear-gradient(158deg,rgba(18,53,80,.98),rgba(6,24,38,.98));
    box-shadow:0 -20px 44px -28px rgba(0,0,0,.95);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
  }
  .site-header[data-open] .header-nav{opacity:1;visibility:visible;transform:none}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-link{display:block;padding:.8em .95em;border-radius:12px;font-size:.95rem;color:var(--paper)}
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{background:rgba(34,224,208,.14)}
  .nav-toggle{display:inline-flex}
  .header-cta{font-size:.72rem;padding:.5em .8em}
  .site-main{padding-top:clamp(20px,5vw,44px);padding-bottom:112px}
  #main-content{scroll-margin-top:24px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .accordion-panel{padding-left:8px}
}

@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .display-title{line-height:.98}
  .btn{width:auto}
}

/* ---------- 18. 减少动态 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .nav-link:hover,.footer-link:hover,.btn:hover{transform:none}
}