:root{
  --dark:#0a0e1a;
  --neon:#00d4ff;
  --cyan:#00fff7;
  --chrome:#8899aa;
  --orange:#ff6b35;
  --green:#00ff88;
  --red:#ff2244;
  --gold:#ffd700;
  --purple:#b44fff;
  --pink:#ff44aa;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:'Noto Sans SC',sans-serif;
  background:var(--dark); color:#fff;
  min-height:100vh;
  overflow-x:hidden;
}
::-webkit-scrollbar{ width:6px }
::-webkit-scrollbar-thumb{ background:#364571 }
::-webkit-scrollbar-track{ background:#0d1b2a }

.bg-base{ position:fixed;inset:0;z-index:0;background:linear-gradient(135deg,#0a0e1a 0%,#0d1b2a 50%,#0a1628 100%); }
.bg-grid{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(0,212,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.025) 1px,transparent 1px);
  background-size:50px 50px;
  animation:gp 4s ease-in-out infinite;
}
@keyframes gp{ 0%,100%{opacity:.5} 50%{opacity:1} }
.scanlines{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 1px,transparent 1px,transparent 3px);
}

/* ── 主容器 ── */
.page{
  position:relative;z-index:10;
  width:1300px; margin:40px auto; padding:36px 36px 32px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  border:1px solid rgba(0,212,255,.1);
}
.c{ position:absolute;width:20px;height:20px;border-color:var(--cyan);border-style:solid; }
.c.tl{ top:0;left:0;border-width:2px 0 0 2px; }
.c.tr{ top:0;right:0;border-width:2px 2px 0 0; }
.c.bl{ bottom:0;left:0;border-width:0 0 2px 2px; }
.c.br{ bottom:0;right:0;border-width:0 2px 2px 0; }

.deco{ width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--neon) 30%,var(--cyan) 50%,var(--neon) 70%,transparent); }

.slbl{
  font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:5px;
  color:rgba(0,212,255,.55);text-align:center;
  display:flex;align-items:center;gap:14px;width:100%;justify-content:center;
}
.slbl::before,.slbl::after{ content:'';flex:1;max-width:100px;height:1px; }
.slbl::before{ background:linear-gradient(90deg,transparent,rgba(0,212,255,.4)); }
.slbl::after{ background:linear-gradient(90deg,rgba(0,212,255,.4),transparent); }

/* ── Logo 区 ── */
.logo-zone{ width:100%;display:flex;align-items:center;justify-content:center;gap:24px; }
.logo-video-wrap{ flex:0 0 auto; }
#logoVideo{ max-width:100%;height:auto;display:block;margin-top:-10px; }

/* ── 长条 3D 按钮 ── */
.side-btn{
  position:relative;
  width:220px; height:70px;
  perspective:800px;
  cursor:pointer; text-decoration:none;
  flex-shrink:0; display:block;
}
.side-btn-inner{
  width:100%;height:100%;
  position:relative;
  border:1px solid rgba(0,212,255,.4);
  background:linear-gradient(135deg,rgba(0,20,40,.92),rgba(0,35,65,.88));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:14px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .08s linear;
  transform-style:preserve-3d;
}
.side-btn-inner::before{
  content:'';position:absolute;
  top:-100%;left:-80%;width:40%;height:300%;
  background:linear-gradient(105deg,transparent 35%,rgba(0,212,255,.25) 50%,transparent 65%);
  transform:skewX(-15deg);
  animation:scanlight 3.5s ease-in-out infinite;
  pointer-events:none;z-index:2;
}
@keyframes scanlight{
  0%{ left:-80%;opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:130%;opacity:0; }
}
.side-btn:hover .side-btn-inner::before{ animation-duration:.9s; }
.side-btn:hover .side-btn-inner{
  border-color:rgba(0,212,255,.8);
  box-shadow:0 0 25px rgba(0,212,255,.4),0 0 50px rgba(0,212,255,.15),inset 0 0 15px rgba(0,212,255,.07);
}
.side-btn-inner .sc{ position:absolute;width:8px;height:8px;border-color:var(--cyan);border-style:solid;opacity:.5; }
.side-btn-inner .sc.tl{ top:4px;left:4px;border-width:1px 0 0 1px; }
.side-btn-inner .sc.tr{ top:4px;right:4px;border-width:1px 1px 0 0; }
.side-btn-inner .sc.bl{ bottom:4px;left:4px;border-width:0 0 1px 1px; }
.side-btn-inner .sc.br{ bottom:4px;right:4px;border-width:0 1px 1px 0; }
.side-btn .sb-icon{
  font-size:24px;color:var(--cyan);
  text-shadow:0 0 16px rgba(0,212,255,.8);
  transition:transform .3s,text-shadow .3s;
  z-index:1;flex-shrink:0;
}
.side-btn:hover .sb-icon{ transform:scale(1.2);text-shadow:0 0 28px rgba(0,212,255,1); }
.side-btn .sb-text{ display:flex;flex-direction:column;gap:4px;z-index:1; }
.side-btn .sb-label{
  font-family:'Noto Sans SC',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:3px;color:#fff;white-space:nowrap;
}
.side-btn .sb-sub{ font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(0,212,255,.6);letter-spacing:3px; }
.side-btn .sb-arrow{
  position:absolute;bottom:6px;right:8px;
  font-size:9px;color:rgba(0,212,255,.4);
  transition:color .25s,transform .25s;z-index:1;
}
.side-btn:hover .sb-arrow{ color:var(--cyan);transform:translate(2px,-2px); }

/* ── 视频切换 ── */
.switcher{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%; }
.vbtn{
  padding:9px 20px;
  font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;
  background:transparent;border:1px solid rgba(0,212,255,.3);color:var(--chrome);
  cursor:pointer;transition:all .25s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.vbtn:hover{ color:var(--cyan);border-color:var(--neon);background:rgba(0,212,255,.1);box-shadow:0 0 16px rgba(0,212,255,.25); }
.vbtn.active{ color:#fff;border-color:var(--cyan);background:linear-gradient(135deg,rgba(0,100,150,.7),rgba(0,212,255,.28));box-shadow:0 0 20px rgba(0,212,255,.4); }

/* ── 播放器 ── */
.player-wrap{ width:100%; }
.player-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  background:rgba(0,18,38,.96);
  border:1px solid rgba(0,212,255,.3);border-bottom:none;
}
.player-ttl{ font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:3px;color:var(--cyan); }
.dots{ display:flex;gap:6px; }
.dot{ width:8px;height:8px;border-radius:50%; }
.dot.r{ background:var(--red) } .dot.y{ background:var(--gold) } .dot.g{ background:var(--green) }

.vbox{ width:100%;height:576px;position:relative;background:#000;border:1px solid rgba(0,212,255,.3);border-bottom:none;overflow:hidden; }
#vid{ width:100%;height:100%;object-fit:contain;display:block; }

.overlay{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,8,20,.65);transition:opacity .3s; }
.overlay.hide{ opacity:0;pointer-events:none; }
.pcircle{
  width:70px;height:70px;border-radius:50%;
  border:2px solid var(--cyan);background:rgba(0,212,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s;
}
.pcircle:hover{ background:rgba(0,212,255,.28);box-shadow:0 0 28px rgba(0,212,255,.5); }
.pcircle i{ font-size:24px;color:var(--cyan);margin-left:4px; }

.ctrl-panel{ background:rgba(0,14,30,.97);border:1px solid rgba(0,212,255,.3);padding:12px 16px 14px; }

.prog{ width:100%;height:6px;background:rgba(0,212,255,.1);position:relative;cursor:pointer;margin-bottom:12px; }
.pbuf{ position:absolute;inset:0 auto 0 0;background:rgba(0,212,255,.18);pointer-events:none; }
.pfill{ position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#1b4965,var(--neon));pointer-events:none; }
.pthumb{ position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--cyan);border:2px solid var(--dark);box-shadow:0 0 8px var(--cyan);pointer-events:none; }
.tsmark{ position:absolute;top:-3px;width:2px;height:12px;background:var(--orange);transform:translateX(-50%);pointer-events:none; }
.tsmark span{ position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--orange);background:rgba(0,10,20,.9);padding:2px 5px;border:1px solid rgba(255,107,53,.35);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none; }
.prog:hover .tsmark span{ opacity:1; }

.crow{ display:flex;align-items:center;gap:10px; }
.cbtn{ width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(0,212,255,.28);cursor:pointer;transition:all .22s;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.cbtn i{ font-size:13px;color:var(--chrome); }
.cbtn:hover{ background:rgba(0,212,255,.14);border-color:var(--cyan);box-shadow:0 0 10px rgba(0,212,255,.3); }
.cbtn:hover i{ color:var(--cyan); }
.tdisp{ font-family:'Share Tech Mono',monospace;font-size:12px;color:var(--chrome);white-space:nowrap;min-width:95px;letter-spacing:1px; }
.tdisp em{ color:var(--cyan);font-style:normal; }
.sp{ flex:1; }
.vrow{ display:flex;align-items:center;gap:8px; }
.vslider{ -webkit-appearance:none;width:80px;height:4px;background:rgba(0,212,255,.2);outline:none;cursor:pointer; }
.vslider::-webkit-slider-thumb{ -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan); }
.vtxt{ font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--chrome);min-width:32px; }

.tsrow{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,212,255,.12); }
.tslbl{ font-family:'Orbitron',sans-serif;font-size:9px;color:rgba(0,212,255,.55);letter-spacing:2px;flex-shrink:0; }
.tsbtn{ display:flex;align-items:center;gap:5px;padding:5px 12px;font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--orange);background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.3);cursor:pointer;transition:all .22s;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);white-space:nowrap; }
.tsbtn .tt{ color:var(--gold);font-size:9px;margin-right:2px; }
.tsbtn:hover{ background:rgba(255,107,53,.2);border-color:var(--orange);box-shadow:0 0 10px rgba(255,107,53,.3);color:#fff; }

/* ── 固定客服侧边栏 ── */
.qq-sidebar{
  position:fixed;top:50%;right:0;transform:translateY(-50%);
  width:185px;z-index:200;
  background:rgba(5,14,30,.97);
  border:1px solid rgba(0,212,255,.28);border-right:none;
  overflow:hidden;
}
.qq-sidebar::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent); }
.qq-head{ font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:3px;color:rgba(0,212,255,.6);padding:14px 14px 10px;display:flex;align-items:center;gap:7px; }
.qq-head i{ color:var(--cyan); }
.qq-num{ font-family:'Share Tech Mono',monospace;font-size:19px;font-weight:700;color:var(--cyan);text-shadow:0 0 14px rgba(0,212,255,.6);letter-spacing:1px;text-align:center;padding:0 14px 12px; }
.qq-copybtn{ display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 28px);margin:0 14px 12px;padding:9px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.35);color:var(--chrome);cursor:pointer;transition:all .25s;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.qq-copybtn:hover{ background:rgba(0,212,255,.2);border-color:var(--cyan);color:#fff;box-shadow:0 0 14px rgba(0,212,255,.3); }
.qq-copybtn.ok{ background:rgba(0,255,136,.1);border-color:var(--green);color:var(--green); }
.qr-wrap{ margin:0 14px 14px;position:relative;overflow:hidden;border:1px solid rgba(0,212,255,.2); }
.qr-wrap::after{ content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:qrscan 2.5s linear infinite;pointer-events:none; }
@keyframes qrscan{ 0%{top:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }
#qrCanvas{ display:block;width:100%;image-rendering:pixelated; }
.qr-lbl{ text-align:center;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2px;color:rgba(0,212,255,.45);background:rgba(0,5,15,.85);padding:4px 0; }

/* ── 导航按钮 ── */
.ngrid{ display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%; }
.nbtn{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 8px 16px;text-decoration:none;color:inherit;background:rgba(0,20,40,.55);border:1px solid rgba(0,212,255,.18);cursor:pointer;transition:all .28s;overflow:hidden;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.nbtn::before{ content:'';position:absolute;top:-100%;left:-70%;width:35%;height:300%;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);transform:skewX(-20deg);pointer-events:none;opacity:0; }
.nbtn:hover::before{ animation:navscan .55s ease forwards; }
@keyframes navscan{ 0%{left:-70%;opacity:1} 100%{left:130%;opacity:0} }
.nbtn::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--nc,var(--cyan)),transparent);transform:scaleX(0);transition:transform .28s; }
.nbtn:hover::after{ transform:scaleX(1); }
.nbtn:hover{ transform:translateY(-3px); }
.nbtn[data-c="cyan"]   { --nc:var(--cyan);   --nb:rgba(0,212,255,.5); }
.nbtn[data-c="orange"] { --nc:var(--orange);  --nb:rgba(255,107,53,.5); }
.nbtn[data-c="green"]  { --nc:var(--green);   --nb:rgba(0,255,136,.5); }
.nbtn[data-c="gold"]   { --nc:var(--gold);    --nb:rgba(255,215,0,.5); }
.nbtn[data-c="purple"] { --nc:var(--purple);  --nb:rgba(180,79,255,.5); }
.nbtn[data-c="pink"]   { --nc:var(--pink);    --nb:rgba(255,68,170,.5); }
.nbtn:hover{ border-color:var(--nb);box-shadow:0 8px 24px rgba(0,0,0,.5); }
.nbtn:hover .ni{ color:var(--nc);text-shadow:0 0 18px var(--nc); }
.nbtn:hover .nt{ color:var(--nc); }
.nbadge{ position:absolute;top:6px;right:6px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1px;padding:2px 6px;background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.3);color:var(--cyan);clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); }
.nbtn[data-c="gold"]   .nbadge{ background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.3);color:var(--gold); }
.nbtn[data-c="green"]  .nbadge{ background:rgba(0,255,136,.08);border-color:rgba(0,255,136,.3);color:var(--green); }
.nbtn[data-c="orange"] .nbadge{ background:rgba(255,107,53,.1);border-color:rgba(255,107,53,.3);color:var(--orange); }
.nbtn[data-c="purple"] .nbadge{ background:rgba(180,79,255,.1);border-color:rgba(180,79,255,.3);color:var(--purple); }
.nbtn[data-c="pink"]   .nbadge{ background:rgba(255,68,170,.1);border-color:rgba(255,68,170,.3);color:var(--pink); }
.ni{ font-size:26px;color:var(--chrome);transition:color .28s,text-shadow .28s; }
.nt{ font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--chrome);transition:color .28s;text-align:center;line-height:1.5; }
.ns{ font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(136,153,170,.4);letter-spacing:1.5px; }

/* ── 页脚 ── */
.footer{ width:100%;padding-top:20px;text-align:center;position:relative;border-top:1px solid rgba(0,212,255,.1); }
.footer::before{ content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent); }
.flogo{ font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;letter-spacing:6px;color:var(--cyan);text-shadow:0 0 20px rgba(0,212,255,.45);margin-bottom:8px; }
.flinks{ display:flex;justify-content:center;gap:20px;margin-bottom:12px;flex-wrap:wrap; }
.flinks a{ font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:1.5px;color:var(--chrome);text-decoration:none;transition:color .22s; }
.flinks a:hover{ color:var(--cyan); }
.fdiv{ width:180px;height:1px;margin:0 auto 10px;background:linear-gradient(90deg,transparent,var(--neon),transparent); }
.fcopy{ font-family:'Share Tech Mono',monospace;font-size:10px;color:#2a3a4a;letter-spacing:1.5px;line-height:2; }
.fcopy span{ color:var(--neon); }

/* ── Toast ── */
.toast{ position:fixed;top:36px;left:50%;transform:translateX(-50%) translateY(-10px);z-index:99999;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;padding:11px 26px;background:rgba(0,20,40,.96);border:1px solid var(--cyan);color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,.4);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none; }
.toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }