/* ===========================================================
   申博娱乐手机 · 共享样式 /assets/site.css
   深夜紫黑底 + 玻璃轨道 + 堆叠实色画板
   =========================================================== */

:root{
  --bg:#0A0714;
  --panel:#150E26;
  --glass:rgba(120,104,190,.14);
  --glass-2:rgba(120,104,190,.24);
  --cyan:#35E6D2;
  --cyan-deep:#14706C;
  --orange:#FF8A3D;
  --violet:#A46BFF;
  --ink:#EFEBFA;
  --muted:#A79FC7;
  --line:#2A2145;
  --green:#4ADE93;

  --rail-w:76px;
  --maxw:1200px;
  --prose:720px;

  --r-s:10px;
  --r-m:16px;
  --r-l:26px;
  --pill:999px;

  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.72,.24,1);
}

/* ---------------- reset ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:96px}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
main{display:block;min-height:50vh}
#main-content{outline:none}
::selection{background:rgba(53,230,210,.28);color:var(--ink)}

/* ---------------- base ---------------- */
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 88% -6%, rgba(164,107,255,.17), transparent 62%),
    radial-gradient(760px 480px at 2% 10%, rgba(53,230,210,.10), transparent 60%),
    radial-gradient(700px 460px at 62% 106%, rgba(255,138,61,.10), transparent 62%);
  background-attachment:fixed;
  min-height:100vh;
}
h1,h2,h3,h4{font-weight:900;line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(28px,5.2vw,40px)}
h2{font-size:clamp(22px,3.6vw,28px)}
h3{font-size:clamp(18px,2.6vw,20px)}
h4{font-size:16px;font-weight:700}
strong,b{font-weight:700}
small{font-size:12px}

/* ---------------- utilities ---------------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.prose{max-width:var(--prose)}
.section{padding:52px 0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lead{font-size:clamp(17px,2.2vw,20px);line-height:1.72;color:var(--ink)}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.big-num{display:block;font-family:var(--font-mono);font-weight:900;font-size:clamp(64px,15vw,112px);line-height:.94;letter-spacing:-.04em;background:linear-gradient(118deg,var(--cyan),var(--violet) 52%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}

.grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .grid--split-alt{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}

/* ---------------- focus ---------------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:400;
  transform:translateY(-180%);
  background:var(--cyan);color:#06131A;
  font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:var(--pill);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none}

/* ---------------- scroll progress ---------------- */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:300;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--orange));
  pointer-events:none;will-change:transform;
}

/* ---------------- header shell ---------------- */
.site-header{position:sticky;top:0;z-index:120}

/* 侧边玻璃轨道 */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:16px 0 18px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-right:1px solid var(--line);
  overflow-y:auto;scrollbar-width:none;
  z-index:110;
}
.rail::-webkit-scrollbar{display:none}

.rail__brand{display:grid;place-items:center;gap:8px}
.rail__mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-family:var(--font-display,var(--font-body));font-weight:900;font-size:19px;color:#06131A;
  background:linear-gradient(140deg,var(--cyan),#9DF6EA);
  box-shadow:0 0 0 1px rgba(53,230,210,.35),0 10px 26px -12px rgba(53,230,210,.85);
}
.rail__brandtext{display:none}

.rail__nav{width:100%;display:flex;justify-content:center}
.rail__list{display:flex;flex-direction:column;align-items:center;gap:2px}
.rail__link{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px;border-radius:14px;color:var(--muted);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.rail__link::before{
  content:"";position:absolute;left:-13px;top:50%;
  width:3px;height:26px;border-radius:3px;background:var(--cyan);
  transform:translateY(-50%) scaleY(0);transform-origin:50% 50%;
  transition:transform .26s var(--ease);
  box-shadow:0 0 12px rgba(53,230,210,.7);
}
.rail__link:hover{color:var(--ink);background:rgba(53,230,210,.07)}
.rail__link[aria-current="page"]{color:var(--cyan)}
.rail__link[aria-current="page"]::before{transform:translateY(-50%) scaleY(1)}
.rail__num{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;opacity:.72}
.rail__label{
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:13px;font-weight:700;letter-spacing:.16em;
}

.rail__foot{margin-top:auto;display:grid;place-items:center;gap:10px;padding-top:12px}
.rail__status{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:11px}
.rail__dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(74,222,147,.14)}
.rail__statustext{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.2em;font-size:11px}
.rail__quick{
  font-size:12px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--pill);
  padding:5px 9px;transition:color .2s,border-color .2s;
}
.rail__quick:hover{color:var(--cyan);border-color:var(--cyan)}

/* 顶部信息条 */
.masthead{
  background:rgba(10,7,20,.82);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--line);
}
.masthead__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:12px 20px;min-height:66px;
  display:flex;align-items:center;gap:16px;
}
.brand{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.brand__name{font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.brand__meta{font-size:12px;color:var(--muted);letter-spacing:.02em}
.badge{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  color:var(--muted);background:rgba(120,104,190,.10);
  border:1px solid var(--line);border-radius:var(--pill);
  padding:6px 12px;white-space:nowrap;
}
.quick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--pill);
  font-size:14px;font-weight:700;border:1px solid transparent;
  transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s;
}
.pill:active{transform:translateY(2px)}
.pill--cyan{color:var(--cyan);border-color:rgba(53,230,210,.45);background:rgba(53,230,210,.10)}
.pill--cyan:hover{background:rgba(53,230,210,.20);border-color:var(--cyan)}
.pill--orange{color:var(--orange);border-color:rgba(255,138,61,.45);background:rgba(255,138,61,.10)}
.pill--orange:hover{background:rgba(255,138,61,.20);border-color:var(--orange)}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 13px;border-radius:14px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--ink);
  font-size:13px;font-weight:700;
  transition:border-color .2s,color .2s;
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle__bars{
  display:block;width:16px;height:2px;border-radius:2px;background:currentColor;
  box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;
}
.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(6,3,14,.68);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s linear;
}
.nav-scrim[data-open]{opacity:1;visibility:visible}
body[data-nav-open]{overflow:hidden}

/* ---------------- footer ---------------- */
.site-footer{
  margin-top:72px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(21,14,38,.55),rgba(10,7,20,.98) 62%);
}
.foot{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:56px 20px 30px;
  display:grid;gap:26px;
}
.foot__top{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .foot__top{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px}
}
.foot__brand{
  display:grid;gap:12px;align-content:start;justify-items:start;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px;
}
.foot__mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:19px;color:#06131A;
  background:linear-gradient(140deg,var(--cyan),#9DF6EA);
  box-shadow:0 0 0 1px rgba(53,230,210,.3);
}
.foot__name{font-weight:900;font-size:20px;letter-spacing:-.02em}
.foot__line{font-size:14px;color:var(--muted);max-width:30em}
.foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.foot__title{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:14px;
}
.foot__links{display:grid;gap:9px}
.foot__link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;color:var(--muted);
  transition:color .2s var(--ease);
}
.foot__link::before{content:"";width:6px;height:1px;background:var(--line);transition:width .2s var(--ease),background .2s}
.foot__link:hover{color:var(--cyan)}
.foot__link:hover::before{width:14px;background:var(--cyan)}

.foot__contact{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px 24px;
}
.contact-list{display:grid;gap:10px}
.contact-list__item{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:10px 13px;border-radius:14px;
  background:rgba(120,104,190,.08);border:1px solid var(--line);
}
.contact-list__key{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--cyan);min-width:34px}
.contact-list__val{font-size:14px;color:var(--ink);word-break:break-all}
.contact-list__val.is-mono{font-family:var(--font-mono);letter-spacing:.02em}
.copy-btn{
  margin-left:auto;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--muted);
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--pill);
  transition:color .2s,border-color .2s,background .2s;
}
.copy-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.copy-btn[data-copied]{color:var(--green);border-color:rgba(74,222,147,.5)}
.foot__note{font-size:13px;color:var(--muted);margin-top:14px}

.foot__legal{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:18px;
}
.foot__legal-text{font-size:12px;color:var(--muted);letter-spacing:.01em}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--glass);color:var(--ink);
  font-size:15px;font-weight:700;cursor:pointer;
  transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s,filter .2s;
}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn:active{transform:translateY(2px)}
.btn--primary{
  background:linear-gradient(120deg,var(--orange),#FFB066);
  color:#251002;border-color:transparent;
  box-shadow:0 16px 34px -20px rgba(255,138,61,.95);
}
.btn--primary:hover{color:#251002;filter:brightness(1.06)}
.btn--glass{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn--quiet{background:transparent;border-color:transparent;color:var(--muted);padding:8px 2px}
.btn--quiet:hover{color:var(--cyan)}

/* ---------------- breadcrumb ---------------- */
.breadcrumb{padding:18px 0 0}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.breadcrumb__item{display:flex;align-items:center;gap:8px}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--line)}
.breadcrumb__link{color:var(--muted);transition:color .2s}
.breadcrumb__link:hover{color:var(--cyan)}
.breadcrumb__link[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------------- stacked panels ---------------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:26px 22px;
}
.panel + .panel{margin-top:26px}
.panel__coord{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--cyan);
}
.panel__coord::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--cyan)}
.panel__title{margin:10px 0 10px;font-size:clamp(20px,3vw,28px)}
.panel__body{color:var(--ink)}
.panel__body p + p{margin-top:12px}
@media (min-width:900px){
  .panel{padding:34px 32px}
  .panel--shift{margin-left:48px}
  .panel--shift-r{margin-right:48px}
}

/* ---------------- horizontal band ---------------- */
.band{
  display:flex;align-items:center;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 2px;overflow-x:auto;scrollbar-width:none;
}
.band::-webkit-scrollbar{display:none}
.band__item{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:4px 16px;border-left:1px solid var(--line);min-width:max-content;
}
.band__item:first-child{border-left:0;padding-left:2px}
.band__item strong{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--cyan)}
.band__item span{font-size:12px;color:var(--muted)}

/* ---------------- tags ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--pill);
  border:1px solid var(--line);background:rgba(120,104,190,.10);color:var(--muted);
  white-space:nowrap;
}
.tag--cyan{color:var(--cyan);border-color:rgba(53,230,210,.40);background:rgba(53,230,210,.10)}
.tag--orange{color:var(--orange);border-color:rgba(255,138,61,.40);background:rgba(255,138,61,.10)}
.tag--violet{color:var(--violet);border-color:rgba(164,107,255,.42);background:rgba(164,107,255,.12)}

/* ---------------- card ---------------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.card:hover{border-color:rgba(53,230,210,.40);transform:translateY(-2px)}

/* ---------------- image frames ---------------- */
.img-frame{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(53,230,210,.16),rgba(164,107,255,.14) 46%,rgba(255,138,61,.14));
  aspect-ratio:16/9;
}
.img-frame--wide{aspect-ratio:21/9}
.img-frame--tall{aspect-ratio:4/5}
.img-frame--square{aspect-ratio:1/1}
.img-frame__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-frame__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
}
.img-frame__cap{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink);
  background:rgba(10,7,20,.72);border:1px solid var(--line);
  padding:4px 10px;border-radius:var(--pill);
}

/* ---------------- accordion ---------------- */
.accordion{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.accordion__item + .accordion__item{border-top:1px solid var(--line)}
.accordion__head{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:16px 18px;background:transparent;border:0;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--ink);text-align:left;
  transition:background .2s var(--ease);
}
.accordion__head::after{
  content:"+";margin-left:auto;font-family:var(--font-mono);
  font-size:16px;color:var(--cyan);
}
.accordion__head[aria-expanded="true"]::after{content:"–"}
.accordion__head:hover{background:rgba(53,230,210,.07)}
.accordion__panel{padding:0 18px 16px;font-size:15px;color:var(--muted)}

/* ---------------- reveal ---------------- */
html[data-js] [data-reveal]{
  opacity:0;transform:translateY(12px);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  will-change:opacity,transform;
}
html[data-js] [data-reveal].is-in{opacity:1;transform:none}

/* ---------------- responsive: mobile & tablet ---------------- */
@media (max-width:1023px){
  html{scroll-padding-top:110px}
  .site-header{position:sticky;top:0}
  .masthead__inner{flex-wrap:wrap;gap:10px;padding:10px 14px;min-height:0}
  .brand__meta{display:none}
  .badge{display:none}
  .quick-actions{flex-basis:100%;order:3;gap:8px}
  .pill{flex:1 1 0;justify-content:center;font-size:13px;padding:9px 10px}
  .nav-toggle{display:inline-flex;margin-left:auto}

  .rail{
    width:min(340px,86vw);
    align-items:stretch;
    gap:16px;
    padding:20px 18px 22px;
    background:rgba(18,11,34,.97);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-right:1px solid var(--line);
    visibility:hidden;
    transform:translateX(-102%);
    transition:transform .34s var(--ease),visibility .34s linear;
  }
  .rail[data-open]{visibility:visible;transform:none}

  .rail__brand{display:flex;align-items:center;gap:12px;justify-items:start;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .rail__brandtext{display:block;font-weight:900;font-size:19px;letter-spacing:-.02em}

  .rail__nav{justify-content:stretch;flex:1;overflow-y:auto}
  .rail__list{align-items:stretch;gap:6px;width:100%}
  .rail__link{
    flex-direction:row;align-items:center;gap:14px;
    padding:13px 14px;border-radius:14px;font-size:17px;font-weight:700;color:var(--ink);
  }
  .rail__link::before{
    left:0;top:50%;height:calc(100% - 20px);width:3px;
    transform:translateY(-50%) scaleY(0);
  }
  .rail__link[aria-current="page"]::before{transform:translateY(-50%) scaleY(1)}
  .rail__link[aria-current="page"]{color:var(--cyan);background:rgba(53,230,210,.08)}
  .rail__num{font-size:12px;color:var(--cyan);opacity:.9}
  .rail__label{writing-mode:horizontal-tb;text-orientation:initial;font-size:17px;letter-spacing:.02em}

  .rail__foot{
    margin-top:0;display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding-top:14px;border-top:1px solid var(--line);
  }
  .rail__status{flex-direction:row;align-items:center;gap:8px;font-size:12px}
  .rail__statustext{writing-mode:horizontal-tb;letter-spacing:.04em;font-size:12px}
  .rail__quick{padding:6px 14px}

  .foot{padding:44px 16px 26px}
  .foot__legal{flex-direction:column;gap:8px}
}

@media (max-width:560px){
  .container{padding:0 16px}
  .section{padding:44px 0}
  .panel{padding:22px 18px}
  .foot__cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .foot__contact{padding:18px}
  .contact-list__item{align-items:flex-start}
  .copy-btn{margin-left:0}
}

/* ---------------- desktop offsets ---------------- */
@media (min-width:1024px){
  body{padding-left:var(--rail-w)}
  .scroll-progress{left:var(--rail-w);width:calc(100% - var(--rail-w))}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html[data-js] [data-reveal]{opacity:1 !important;transform:none !important}
  .card:hover{transform:none}
  .pill:active,.btn:active{transform:none}
}