/* ============================================================================
   QELVION BIOTECH · CUSTOMER PORTAL
   Crystal Orbit design system — obsidian black, restrained champagne gold,
   crystal / glass light.  UI only: no business logic lives in here.
   ----------------------------------------------------------------------------
   Reference: QELVION_Design2_Crystal_Orbit / 00_Full_Website_Reference.png
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* obsidian blacks (never white page backgrounds) */
  --bg:#050607;
  --bg-2:#08090C;
  --bg-3:#0B0D11;
  --surface:rgba(13,15,19,.72);
  --surface-2:rgba(17,20,25,.62);
  --surface-quiet:rgba(255,255,255,.028);
  --surface-deep:rgba(4,5,7,.72);

  /* champagne gold family (no bright yellow) */
  --gold:#C6A66A;
  --gold-bright:#D5BC87;
  --gold-pale:#E7D6AE;
  --gold-muted:#A88952;
  --gold-deep:#7A6437;

  /* hairlines & borders */
  --gold-hair:rgba(213,188,135,.16);
  --gold-hair-strong:rgba(213,188,135,.34);
  --border-neutral:rgba(255,255,255,.075);
  --border-strong:rgba(255,255,255,.14);

  /* text */
  --text-primary:#F2EEE6;
  --text-secondary:#B7B2A8;
  --text-tertiary:#7C7972;
  --ok:#8FCBA8;
  --err:#E0938C;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --pad-x:clamp(20px,4.4vw,72px);
  --sec:clamp(58px,7.4vw,118px);
  --sec-tight:clamp(34px,4.2vw,64px);
  --maxw:1500px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--sans);
  font-size:15px;
  font-weight:300;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
/* a very quiet gold field so the black never looks flat (fixed, cheap) */
body:before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 74% at 88% -14%,rgba(198,166,106,.085),transparent 58%),
    radial-gradient(90% 60% at -12% 104%,rgba(198,166,106,.05),transparent 62%),
    linear-gradient(180deg,#070809 0%,#050607 42%,#08090C 100%);
}
body>*{position:relative;z-index:1}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(198,166,106,.28)}
:focus-visible{outline:1px solid var(--gold-hair-strong);outline-offset:3px}

/* ------------------------------------------------------------------ layout */
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.sec-tight{padding-top:var(--sec-tight);padding-bottom:var(--sec-tight)}
.stack{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.split{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(24px,3.6vw,56px);align-items:center}
@media(max-width:1040px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
.grid-2>*,.grid-3>*,.grid-4>*,.split>*,.stack>*{min-width:0}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.row{display:flex;align-items:center;gap:12px}
.center{text-align:center}
.right{text-align:right}
.hide{display:none!important}

/* ------------------------------------------------------------------ type */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4.5vw,66px);line-height:1.04;letter-spacing:-.005em;
  color:var(--text-primary)
}
.display em{font-style:italic;color:var(--gold-bright)}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.5vw,52px);line-height:1.06}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.5vw,36px);line-height:1.12}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.6vw,24px);line-height:1.2}
.lead{font-size:clamp(14px,1.05vw,16px);color:var(--text-secondary);line-height:1.78;max-width:56ch}
.small{font-size:13.5px}
.tiny{font-size:11.5px}
.mut{color:var(--text-secondary)}
.faint{color:var(--text-tertiary)}
.mono{font-family:var(--mono);font-size:.94em}
.num{font-family:var(--serif);font-weight:400;font-variant-numeric:tabular-nums}
.lbl{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-tertiary)}
.lbl-gold{color:var(--gold)}
.hr{height:1px;background:var(--border-neutral);margin:22px 0}
.hr-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold-hair-strong),transparent)}

/* ------------------------------------------------------------------ header */
.nav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(5,6,7,.92),rgba(5,6,7,.74));
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  border-bottom:1px solid var(--gold-hair);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  min-height:62px;display:flex;align-items:center;gap:clamp(14px,2.6vw,44px)}
.wordmark{font-family:var(--serif);font-size:19px;letter-spacing:.4em;color:var(--text-primary);
  font-weight:500;white-space:nowrap;line-height:1.05}
.wordmark small{display:block;font-family:var(--sans);font-size:7.5px;letter-spacing:.42em;
  color:var(--gold);margin-top:2px;font-weight:400}
.navlinks{display:flex;gap:clamp(14px,2vw,32px);align-items:center;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.navlinks::-webkit-scrollbar{display:none}
.navlink{position:relative;color:var(--text-secondary);font-size:12.5px;font-weight:400;
  letter-spacing:.04em;padding:9px 0;white-space:nowrap;transition:color .3s var(--ease)}
.navlink:hover{color:var(--text-primary)}
.navlink.on{color:var(--gold-bright)}
.navlink.on:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.chip{display:flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;border-radius:999px;
  border:1px solid var(--gold-hair);background:var(--surface-quiet);max-width:230px}
.chip b{font-size:12px;font-weight:500;color:var(--text-primary);line-height:1.2;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chip span{display:block;font-size:10px;color:var(--text-tertiary);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--serif);font-size:12px;color:#14110B;
  background:linear-gradient(165deg,var(--gold-pale),var(--gold-muted))}
.navmenu{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--gold-hair);
  background:var(--surface-quiet);align-items:center;justify-content:center;cursor:pointer}
.navmenu i{display:block;width:15px;height:1px;background:var(--gold-bright);position:relative}
.navmenu i:before,.navmenu i:after{content:"";position:absolute;left:0;width:15px;height:1px;
  background:var(--gold-bright)}
.navmenu i:before{top:-5px} .navmenu i:after{top:5px}

/* 页签**永远显示**（老板 2026-10-05：不要藏在三条线后面）。
   宽屏一行；窄屏时页签换到第二行，仍然一直看得见、可以横向滑。 */
/* 平板/小笔记本（861–1100）：五个页签 + 客户信息 + 两个按钮一行放不下，
   就让页签自己占一行 —— 反正要求是"一直看得见"，不是"必须挤一行" */
@media(min-width:861px) and (max-width:1100px){
  .nav-in{flex-wrap:wrap;row-gap:0;padding-bottom:1px}
  .navlinks{order:3;width:100%;border-top:1px solid var(--gold-hair);margin-top:3px;gap:16px}
  .navlink{font-size:12px;padding:6px 0}
  .chip b,.chip span{max-width:120px}
}
@media(max-width:860px){
  .nav-in{min-height:50px;gap:10px;flex-wrap:wrap;padding-bottom:1px}
  .wordmark{font-size:16.5px;letter-spacing:.32em}
  .navlinks{order:3;width:100%;flex-wrap:nowrap;gap:18px;
    padding:0;border-top:1px solid var(--gold-hair);margin-top:3px}
  .navlink{font-size:12px;padding:6px 0}
  .nav-right{margin-left:auto;gap:8px}
  .chip{padding:4px 10px 4px 4px}
  .chip b{max-width:110px}
  .btn-sm#out{padding:6px 12px}
  .btn-sm#chpw{padding:6px 12px}
}
@media(max-width:560px){
  .chip span{display:none}
  .chip b{max-width:84px}
  .navlinks{gap:15px}
  .navlink{font-size:11.5px}
  .btn-sm#chpw span{display:none}
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:1px solid var(--gold-hair-strong);background:transparent;color:var(--text-primary);
  border-radius:999px;padding:11px 20px;font-family:var(--sans);font-size:12.5px;font-weight:400;
  letter-spacing:.03em;transition:border-color .34s var(--ease),color .34s var(--ease),
  background .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
  white-space:nowrap
}
.btn:hover{border-color:var(--gold);color:var(--gold-pale);
  box-shadow:0 8px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05)}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn .arw{transition:transform .34s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-sm{padding:8px 14px;font-size:11.5px}
/* ★ 边框跑金色微光（老板 2026-10-05："按钮的框、卡片框都要有金光在走"）。
   做法：一个只画 1px 描边的伪元素 + mask 挖空中间，底色是一条会移动的斜向金色高光；
   纯 CSS，不用滤镜、不用图片，iPhone 上也轻。 */
@keyframes borderRun{0%{background-position:190% 0}100%{background-position:-90% 0}}
.btn:before,.btn-gold:before,.btn-solid:before,.btn-plain:before,.btn.doc:before,
.glass:after,.card:after,.pill-shine:after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,246,220,0) 32%,rgba(255,250,232,.9) 46%,
    rgba(255,246,220,.35) 52%,rgba(255,246,220,0) 66%);
  background-size:280% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:borderRun 6.4s linear infinite;
  opacity:.8;z-index:2}
/* 卡片上的那道走得慢一点、暗一点（不抢内容） */
.glass:after,.card:after{animation-duration:9.5s;opacity:.5}
/* 错开节奏，免得所有框同时闪 */
.glass:nth-of-type(2n):after,.card:nth-of-type(2n):after{animation-delay:-3.2s}
.glass:nth-of-type(3n):after,.card:nth-of-type(3n):after{animation-delay:-6.1s}
/* ★ 高级金属主按钮：双色金渐变 + 内嵌高光 + 内倒角 + 立体投影 */
.btn-gold{
  position:relative;overflow:hidden;border-color:transparent;color:#16120A;font-weight:500;
  background-image:
    linear-gradient(168deg,rgba(255,255,255,.34),rgba(255,255,255,0) 46%),
    linear-gradient(178deg,#F6EBCB 0%,#DFC68E 24%,#C6A66A 58%,#9A7A40 100%);
  background-clip:padding-box;
  text-shadow:0 1px 0 rgba(255,255,255,.30);
  box-shadow:
    0 12px 30px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(0,0,0,.26),
    inset 0 0 0 1px rgba(255,246,220,.18)}
.btn-gold:hover{color:#16120A;filter:brightness(1.05);
  box-shadow:
    0 16px 38px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.64),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,246,220,.26)}
/* 次要按钮：暗玻璃 + 细金边 */
.btn-solid,.btn-plain{
  position:relative;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  background-color:rgba(12,14,18,.74);
  color:var(--text-primary);font-weight:400;text-shadow:none;
  border-color:var(--gold-hair-strong);
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)}
.btn-solid:hover,.btn-plain:hover{color:var(--gold-pale);border-color:var(--gold);filter:none}
/* 文档按钮（发票/装箱单）：暗玻璃 + 细金边 */
.btn.doc{
  position:relative;overflow:hidden;
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  background-color:rgba(11,13,17,.72);
  color:var(--text-primary);font-weight:400;text-shadow:none;
  border-color:var(--gold-hair-strong);
  box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04)}
.btn.doc:hover{color:var(--gold-pale);border-color:var(--gold);filter:none}
.btn.doc:before{opacity:.55}
.btn.doc svg{width:14px;height:14px;color:var(--gold)}
.btn.doc span{white-space:nowrap}
.btn-quiet{background-image:none!important;background-color:transparent!important;
  color:var(--text-secondary)!important;text-shadow:none!important;box-shadow:none!important;
  border-color:var(--gold-hair)!important}
.btn-quiet:hover{color:var(--gold-bright)!important;border-color:var(--gold)!important}
.btn-quiet:before{display:none!important}
/* editorial text CTA with a thin circled arrow (hero / section links) */
.cta-line{display:inline-flex;align-items:center;gap:13px;color:var(--text-primary);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.cta-line i{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold-hair-strong);
  display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--gold-bright);
  transition:all .38s var(--ease);background:rgba(198,166,106,.05)}
.cta-line:hover i{background:rgba(198,166,106,.14);border-color:var(--gold)}
.arw-btn{color:var(--gold);font-size:14px;transition:transform .34s var(--ease)}
a:hover .arw-btn{transform:translateX(4px)}

/* ------------------------------------------------------------------ cards */
.glass,.card{
  position:relative;border-radius:var(--r-lg);
  border:1px solid var(--gold-hair);
  background:linear-gradient(168deg,rgba(19,22,27,.72),rgba(9,11,14,.78) 58%,rgba(14,17,21,.72));
  box-shadow:0 22px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.035);
  padding:clamp(20px,2.4vw,34px);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
}
.glass:before,.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.05),transparent 42%)}
.glass-hover{transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.glass-hover:hover{transform:translateY(-3px);border-color:var(--gold-hair-strong);
  box-shadow:0 28px 68px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.sheen{overflow:hidden}
/* 悬停扫光只给"不是卡片"的元素用（卡片上已经有一直在走的金色边框光，别打架） */
.sheen:not(.glass):after{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(231,214,174,.07),transparent);
  transform:skewX(-14deg);opacity:0}
.sheen:not(.glass):hover:after{opacity:1;animation:sheenSweep 1.15s var(--ease)}
@keyframes sheenSweep{from{left:-34%}to{left:104%}}

/* ------------------------------------------------------------------ pills */
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-hair);
  border-radius:999px;padding:6px 13px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);background:var(--surface-quiet);white-space:nowrap}
.pill-gold{border-color:var(--gold-hair-strong);color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(198,166,106,.14),rgba(198,166,106,.035))}
.pill .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex:0 0 auto}

/* ------------------------------------------------------------------ hero */
/* 老板 2026-10-05：首屏那张水晶图**拉宽成整幅背景**，标题和文字直接压在上面，
   不再是"右边一块图"。做法：图铺满整个首屏、外面压一层左侧/上下渐暗的纱，
   文字在最上层；窄屏同样铺满，文字落在下半部分。 */
.hero{position:relative;isolation:isolate;
  padding-top:clamp(34px,4.4vw,72px);padding-bottom:clamp(40px,5vw,84px)}
.hero .split{position:relative;display:flex;align-items:center;
  min-height:clamp(390px,40vw,540px)}
.hero-copy{position:relative;z-index:2;max-width:50ch}
.hero-eyebrow{margin-bottom:clamp(14px,1.6vw,22px)}
.hero .lead{margin-top:clamp(14px,1.5vw,20px)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2vw,26px)}
.hero-cta{margin-top:clamp(22px,2.4vw,34px)}
/* crystal artwork: full-bleed background behind the headline, blended with gradient veils */
.hero-art{position:absolute;z-index:0;top:0;bottom:0;min-width:0;isolation:isolate;
  left:calc(var(--pad-x) * -1);right:calc(var(--pad-x) * -1);
  overflow:hidden;margin:0!important;border-radius:0}
.hero-art .art{
  position:absolute;inset:0;width:auto;aspect-ratio:auto;border-radius:0;overflow:hidden;
  background:#040507;
  -webkit-mask-image:none;mask-image:none;
}
.hero-art .art img{
  width:100%;height:100%;object-fit:cover;
  /* 素材的水晶球/西林瓶在**右侧**：裁切必须保住右边，否则只剩一片星空 */
  object-position:78% 50%;display:block;opacity:1;
  filter:saturate(1.06) contrast(1.05) brightness(1.06);
  animation:orbDrift 44s ease-in-out infinite;
}
/* 两层纱：左边渐暗保住白字，上下渐暗让图和页面接得住 */
.hero-art .art:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,7,.97) 0%,rgba(5,6,7,.92) 22%,rgba(5,6,7,.70) 40%,
      rgba(5,6,7,.30) 62%,rgba(5,6,7,.06) 82%,rgba(5,6,7,0) 100%),
    linear-gradient(180deg,rgba(5,6,7,.78) 0%,rgba(5,6,7,.16) 26%,rgba(5,6,7,.10) 52%,
      rgba(5,6,7,.62) 82%,rgba(5,6,7,.97) 100%);
  animation:none}
/* ★ 2026-10-05（老板）：「最上面那个金色会动的框要拿走，不符合」。
   首屏那两条**会转的金色椭圆光环**是当初"图在右边一小块"时的装饰，图铺满整屏之后
   它就变成页面顶上一条乱晃的金线 —— 标记和样式一起删掉，不留半截。
   同时：顶栏那两个按钮（Change password / Sign out）也不要"边框跑光"，
   页面最上面不许有在动的金框；内容区的按钮/卡片照旧保留（那是老板要的效果）。 */
.hero-art .orbit,.hero-art .orbit.o2,.hero-art .orbit i{display:none}
.nav .btn:before,.nav .btn-gold:before,.nav .btn-solid:before,.nav .btn-plain:before,
.nav .btn.doc:before{display:none}
.nav .btn{box-shadow:0 5px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05)}
.hero-words{position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(16px,2.4vw,34px);
  text-align:right;font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(231,214,174,.95);line-height:2.1;opacity:.95;z-index:3;
  text-shadow:0 1px 20px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8)}
@media(max-width:900px){
  /* 窄屏也铺满：文字落到下半部分，纱改成上轻下重 */
  .hero .split{min-height:clamp(420px,116vw,540px);align-items:flex-end;
    padding-bottom:clamp(6px,3vw,20px)}
  .hero-copy{max-width:none}
  .hero-art .art img{object-position:70% 42%}
  /* 窄屏文字在下半部分，所以只要"下重上轻"那层纱；
     原来还叠了一层左侧渐暗，会在手机左边留一条死黑的竖带（老板看了会说不干净）→ 去掉。 */
  .hero-art .art:after{background:
    linear-gradient(180deg,rgba(5,6,7,.58) 0%,rgba(5,6,7,.14) 20%,rgba(5,6,7,.62) 52%,
      rgba(5,6,7,.93) 80%,rgba(5,6,7,.99) 100%)}
  .hero-words{display:none}
}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles i{position:absolute;width:2px;height:2px;border-radius:50%;
  background:radial-gradient(circle,rgba(231,214,174,.9),rgba(198,166,106,.15));
  animation:floatParticle 24s ease-in-out infinite}
/* ------------------------------------------------- ambient art bands (desktop only)
   素材包里的水晶/轨道图**不做贴图**：只当环境的底光，靠 mask 由中间向外化开，
   再用 screen 叠在曜石黑上。窄屏不加载（媒体查询里的 background-image 不会下载），
   iPhone 上就只跑纯 CSS 的暗色底。 */
.band{position:relative;isolation:isolate}
.band:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-position:center right;background-size:cover;
  opacity:.30;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(74% 74% at 72% 46%,#000 26%,rgba(0,0,0,.34) 66%,transparent 99%);
  mask-image:radial-gradient(74% 74% at 72% 46%,#000 26%,rgba(0,0,0,.34) 66%,transparent 99%)}
.band-ribbons:before{background-image:url("/portal/assets/orbit-ribbons.jpg")}
.band-light:before{background-image:url("/portal/assets/crystal-light.jpg");opacity:.24;
  background-position:center left;
  -webkit-mask-image:radial-gradient(70% 70% at 24% 52%,#000 24%,rgba(0,0,0,.3) 64%,transparent 99%);
  mask-image:radial-gradient(70% 70% at 24% 52%,#000 24%,rgba(0,0,0,.3) 64%,transparent 99%)}
/* footer 底下没有卡片压着，可以放得亮一点；但文字在左边，光就走右边 */
.band-scene:before{background-image:url("/portal/assets/crystal-scene.jpg");opacity:.22;
  background-position:center right;
  -webkit-mask-image:radial-gradient(50% 128% at 86% 62%,#000 20%,rgba(0,0,0,.3) 62%,transparent 100%);
  mask-image:radial-gradient(50% 128% at 86% 62%,#000 20%,rgba(0,0,0,.3) 62%,transparent 100%)}
@media(max-width:1040px){.band:before{display:none}}
@media(prefers-reduced-motion:reduce){.band:before{animation:none}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbDrift{
  0%,100%{transform:scale(1.02) translate3d(0,0,0)}
  50%{transform:scale(1.05) translate3d(-1.2%,-.8%,0)}
}
@keyframes glowPulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes floatParticle{
  0%,100%{transform:translate3d(0,0,0);opacity:.25}
  50%{transform:translate3d(6px,-22px,0);opacity:.75}
}

/* thin trust strip under the hero (reference: 4 small marks) */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--gold-hair);border-bottom:1px solid var(--gold-hair);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.trust div{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(15px,1.9vw,24px) 10px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-secondary);border-right:1px solid var(--gold-hair);text-align:center}
.trust div:last-child{border-right:0}
.trust svg{width:17px;height:17px;color:var(--gold);flex:0 0 auto;opacity:.95}
.trust div:hover{color:var(--gold-pale);background:rgba(198,166,106,.03)}
@media(max-width:760px){
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust div:nth-child(2){border-right:0}
  .trust div:nth-child(n+3){border-top:1px solid var(--gold-hair)}
}

/* quick cards */
.qa{display:block;padding:clamp(20px,2.2vw,28px)}
.qa .ic{width:34px;height:34px;margin-bottom:16px;color:var(--gold)}
.qa .ic svg{width:100%;height:100%}
.qa h3{font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em}
.qa p{font-size:12.5px;color:var(--text-tertiary);margin-top:5px}

/* ------------------------------------------------------------------ orders */
.order{padding:clamp(20px,2.6vw,34px)}
.ordhead{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between}
.onum{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--gold-bright);
  overflow-wrap:anywhere}
.ometa{font-size:11.5px;color:var(--text-tertiary);margin-top:4px}
.ship-to{font-size:13px;color:var(--text-secondary);white-space:pre-line;overflow-wrap:anywhere}
.ship{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--text-secondary)}
.ship .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-bright);margin-top:6px;
  flex:0 0 auto;box-shadow:0 0 0 4px rgba(198,166,106,.10)}
.docrow{display:flex;flex-wrap:wrap;gap:9px}

/* tables (desktop = elegant table; mobile = stacked rows, see media query) */
table.tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
table.tbl th{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-tertiary);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--gold-hair)}
/* 列宽按参考图收一收：ITEM / SPECIFICATION 宽、QTY 和 AMOUNT 贴右边，中间不留大片空白 */
table.tbl th:nth-child(1),table.tbl td:nth-child(1){width:34%}
table.tbl th:nth-child(2),table.tbl td:nth-child(2){width:40%}
table.tbl th:nth-child(3),table.tbl td:nth-child(3){width:10%}
table.tbl th:nth-child(4),table.tbl td:nth-child(4){width:16%}
table.tbl td{padding:11px 0;border-bottom:1px solid var(--border-neutral);color:var(--text-secondary);
  vertical-align:top;overflow-wrap:anywhere}
table.tbl tr:last-child td{border-bottom:0}
table.tbl .r{text-align:right}
table.tbl tr.total td{border-top:1px solid var(--gold-hair);border-bottom:0;padding-top:13px;
  color:var(--text-primary)}
table.tbl tr.total td:last-child{font-family:var(--serif);font-size:17px;color:var(--gold-bright)}

/* progress: horizontal precision stepper (reference), vertical on phones */
ul.tl{position:relative;display:flex;gap:0;align-items:flex-start}
ul.tl li{position:relative;flex:1 1 0;min-width:0;padding:0 8px 0 0;font-size:11.5px;
  color:var(--text-secondary);line-height:1.5}
ul.tl li b{display:block;font-weight:400;color:var(--text-primary);font-size:11.5px}
ul.tl li:before{content:"";position:absolute;left:0;top:-13px;width:6px;height:6px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 0 4px rgba(198,166,106,.12)}
ul.tl:before{content:"";position:absolute;left:3px;right:0;top:-10px;height:1px;
  background:var(--gold-hair)}
ul.tl li{padding-top:6px}
ul.tl li.todo:before{background:#2A2F35;box-shadow:0 0 0 4px rgba(255,255,255,.03)}
ul.tl li.todo{color:var(--text-tertiary)}
ul.tl li.todo b{color:var(--text-tertiary)}
ul.tl li .at{display:block;color:var(--text-tertiary);font-size:10.5px;font-variant-numeric:tabular-nums}
ul.tl li .note{display:block;color:var(--text-tertiary);font-size:10.5px}
@media(max-width:760px){
  ul.tl{display:flex;flex-direction:column;gap:14px;padding-left:18px}
  ul.tl:before{left:3px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  ul.tl li{flex:0 0 auto;padding:0}
  ul.tl li:before{top:5px;left:-18px}
}

/* membership */
.tiercard{padding:clamp(26px,3.2vw,48px);position:relative;overflow:hidden}
/* 会员卡右上角那团金光搬到 :before（:after 让给"边框跑光"） */
.tiercard:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(closest-side at 112% -34%,rgba(198,166,106,.13),transparent 72%),
    linear-gradient(150deg,rgba(255,255,255,.05),transparent 42%)}
.bar{position:relative;height:2px;border-radius:2px;background:var(--border-neutral);overflow:hidden}
.bar i{position:absolute;left:0;top:0;height:100%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright),var(--gold-pale))}
.mile{position:relative;height:1px;background:var(--border-neutral);margin:24px 0 8px}
.mile i{position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#2A2F35;
  border:1px solid #3A4048;transform:translateX(-3px)}
.mile i.done{background:var(--gold-bright);border-color:transparent}
.mile .fill{position:absolute;left:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.mile-lbl{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-tertiary)}
.mile-lbl b{color:var(--gold-bright);font-weight:500}
ul.benefits li{position:relative;padding:11px 0 11px 22px;font-size:13px;color:var(--text-secondary);
  border-bottom:1px solid var(--border-neutral)}
ul.benefits li:last-child{border-bottom:0}
ul.benefits li:before{content:"";position:absolute;left:0;top:19px;width:6px;height:6px;
  border:1px solid var(--gold-hair-strong);transform:rotate(45deg)}
ul.benefits b{color:var(--text-primary);font-weight:500}

/* resources: editorial document cards */
.docs{display:grid;gap:10px}
.doc-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:1px solid var(--gold-hair);border-radius:var(--r-md);padding:16px 18px;
  background:linear-gradient(150deg,rgba(18,21,26,.6),rgba(9,11,14,.7));
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.doc-card:hover{border-color:var(--gold-hair-strong);transform:translateY(-2px)}

/* ------------------------------------------------------------------ rewards */
.rw-split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(24px,4.4vw,68px);align-items:center}
.rw-split>*{min-width:0}
@media(max-width:1000px){
  .rw-split{grid-template-columns:1fr}
  .rw-split>div:first-child{order:2}
  .rw-split>.wheelbox{order:1}
}
.spin-ctl{display:inline-flex;align-items:center;gap:11px;border-radius:999px;padding:13px 26px;
  border:1px solid transparent;cursor:pointer;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#14110B;font-weight:500;
  background:linear-gradient(168deg,var(--gold-pale),var(--gold-bright) 40%,var(--gold-muted));
  box-shadow:0 12px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4);
  transition:filter .3s var(--ease),transform .3s var(--ease)}
.spin-ctl:hover{filter:brightness(1.06);transform:translateY(-1px)}
.spin-ctl:disabled{opacity:.5;cursor:default;transform:none}
.spin-ctl i{font-style:normal;transition:transform .3s var(--ease)}
.spin-ctl:hover i{transform:translateX(3px)}
.selwrap{position:relative;margin-top:10px}
select.qsel{width:100%;appearance:none;-webkit-appearance:none;background:var(--surface-quiet);
  border:1px solid var(--gold-hair);border-radius:10px;color:var(--text-primary);
  font-family:var(--sans);font-size:13px;padding:13px 40px 13px 14px;cursor:pointer}
select.qsel:hover{border-color:var(--gold-hair-strong)}
select.qsel option{background:#0B0D11;color:var(--text-primary)}
.selwrap:after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.wlbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-tertiary)}
.howto{display:grid;gap:9px;margin-top:22px}
.howto div{display:flex;gap:11px;font-size:12.5px;color:var(--text-tertiary);line-height:1.65}
.howto b{color:var(--gold);font-weight:500;flex:0 0 auto;font-variant-numeric:tabular-nums}
.result{padding:20px;border-radius:var(--r-md);border:1px solid var(--gold-hair);
  background:linear-gradient(180deg,rgba(198,166,106,.10),rgba(198,166,106,.02));text-align:center}
.result .big{font-family:var(--serif);font-size:clamp(22px,2.3vw,32px);color:var(--gold-bright);
  margin-top:4px}
.result.cool{border-color:var(--border-neutral);background:var(--surface-quiet)}
.result.cool .big{color:var(--text-secondary)}

/* wheel shell: the dial ALWAYS stays inside its card (containment is asserted by a check) */
.wheel-card{overflow:hidden;padding:clamp(24px,3.4vw,58px);position:relative}
/* 卡片背后一层金色轨道光（素材图 + 遮罩化开，绝不出现"贴上去的方图"） */
.wheel-card:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/portal/assets/orbit-ribbons.jpg") center/cover no-repeat;
  opacity:.32;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(48% 48% at 67% 48%,#000 16%,rgba(0,0,0,.34) 56%,transparent 86%);
  mask-image:radial-gradient(48% 48% at 67% 48%,#000 16%,rgba(0,0,0,.34) 56%,transparent 86%)}
.wheel-card .rw-split{position:relative;z-index:1}
.wheelbox{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
@media(max-width:560px){
  .wheel-card{padding:20px 10px 24px}
}
/* ============================================================================
   轮盘（混合图层版，老板 2026-10-05 素材包 QELVION_Rewards_Wheel_Assets）

   图层由下往上：
     ① 背景（深色实拍，淡淡一层）
     ② 轨道光 + 光带 + 柔光（缓慢ambient 动）
     ③ 底座反光
     ④ 水晶外圈  ← 静止
     ⑤ 扇区层    ← **只有这一层转**
     ⑥ 中心徽记  ← 静止
     ⑦ 指针      ← 静止
     ⑧ 微粒 / 星光 / 反光（轻微呼吸）；中奖时闪一下十字光

   尺寸：ring 图宽 = 环外径；量得 内/外 = 0.721（环图 101/140）。
         盘面直径 = 环外径 × 0.721；盘面 SVG 里圆占 400/410 → 层宽再 ÷0.9756。
         stage = 环外径 / 0.86（跟 17_Final_Example 里环占画布 86% 一致）。
   ========================================================================== */
.wheel-frame{
  width:min(88vw,560px);
  max-width:calc(100% - 24px);
  aspect-ratio:1/1;margin-inline:auto;position:relative;min-width:0;
  isolation:isolate;
}
.wheel-frame,
.miniwheel{position:relative;isolation:isolate;aspect-ratio:1/1;min-width:0}
/* ★★ 2026-10-22（客户门户自检抓到的真问题）：
   装饰层比容器大 —— .wl-glow 104%、.wl-ribbons 112%、.wl-platform 112% —— 而且它们在**转**。
   转起来以后，浏览器算的是"外接矩形"，45° 时能到 112%×√2 ≈ 158%，
   于是同一个页面上，有时会把整页撑出横向滚动条（客户要左右拖），有时又没事
   （自检表现就是 1024/1280/1440 时红时绿：portal:img.wl-glow R121 / img.wl-ribbon R123）。
   修法：在**轮盘这一框**把溢出裁掉（clip，不动布局），装饰本来就淡到边缘透明，
   裁掉不改变观感，却保证无论转到哪个角度都不会再撑破页面。 */
.wheel-frame,
.miniwheel{overflow:clip}
.wl-bg,.wl-ambient,.wl-platform,.wl-ring,.wl-sheen,.wl-face,.wl-hub,.wl-pointer,.wl-fx,.wl-flare{
  position:absolute;pointer-events:none}
/* ★ 尺寸一律由下面各层自己给（这里绝不能写 width:100%，会盖掉每层的比例） */
.wheel-frame img,.miniwheel img{display:block}
/* ① 背景：铺满，四周用径向遮罩化开，不是"贴一张方图" */
.wl-bg{inset:0;z-index:0;overflow:hidden;border-radius:var(--r-lg)}
.wl-bg img{width:100%;height:100%;object-fit:cover;opacity:.38;
  -webkit-mask-image:radial-gradient(64% 64% at 50% 50%,#000 30%,rgba(0,0,0,.32) 72%,transparent 100%);
  mask-image:radial-gradient(64% 64% at 50% 50%,#000 30%,rgba(0,0,0,.32) 72%,transparent 100%)}
/* ② ambient：轨道光 / 光带 / 柔光 */
.wl-ambient{inset:0;z-index:1}
.wl-ambient img{mix-blend-mode:screen;position:absolute}
.wl-glow{position:absolute;left:50%;top:50%;width:104%;transform:translate(-50%,-50%);
  opacity:.85;animation:wlSpin 34s linear infinite, wlBreathe 19s ease-in-out infinite}
.wl-ribbons{position:absolute;left:50%;top:50%;width:112%;transform:translate(-50%,-50%);
  opacity:.88;animation:wlSpinBack 27s linear infinite}
.wl-softglow{position:absolute;left:50%;top:50%;width:96%;transform:translate(-50%,-50%);
  opacity:.7;animation:wlBreathe 23s ease-in-out infinite reverse}
/* ③ 底座：压在轮盘下方当"地面反光" */
.wl-platform{left:50%;top:66%;width:112%;transform:translateX(-50%);z-index:2;
  mix-blend-mode:screen;opacity:.95}
/* ④ 水晶外圈（静止） */
.wl-ring{left:50%;top:50%;width:92%;transform:translate(-50%,-50%);z-index:3;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.55)) saturate(1.06) brightness(.97) sepia(.05)}
/* 晶面上的缓慢反光（一条很淡的高光扫过，像真的水晶在转光） */
.wl-sheen{left:50%;top:50%;width:92%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:4;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,246,220,0) 0deg,rgba(255,246,220,.16) 34deg,
    rgba(255,246,220,0) 78deg,rgba(255,246,220,0) 200deg,rgba(255,240,205,.11) 238deg,
    rgba(255,246,220,0) 286deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 0 68%,#000 74%,#000 100%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 0 68%,#000 74%,#000 100%,transparent 100%);
  mix-blend-mode:screen;opacity:.9;
  animation:wlSpin 41s linear infinite}
/* ⑤ 扇区层：只有它转 */
.wl-face{left:50%;top:50%;width:67%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:5}
.wl-face svg{width:100%;height:100%;display:block;overflow:visible}
/* ⑥ 中心徽记（静止） */
.wl-hub{left:50%;top:50%;width:23.5%;transform:translate(-50%,-50%);z-index:6;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
/* ⑦ 指针（静止，尖朝下压在环上） */
.wl-pointer{left:50%;top:1%;height:36%;width:auto;transform:translateX(-50%);z-index:7;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,214,140,.28))}
/* ⑧ 微粒 / 星光 / 中奖闪光 */
.wl-fx{inset:0;z-index:8}
.wl-particles{position:absolute;left:50%;top:50%;width:96%;transform:translate(-50%,-50%);
  mix-blend-mode:screen;opacity:.62;animation:wlShimmer 21s ease-in-out infinite}
.wl-sparkles{position:absolute;left:50%;top:50%;width:88%;transform:translate(-50%,-50%);
  mix-blend-mode:screen;opacity:.5;animation:wlShimmer 15s ease-in-out infinite reverse}
.wl-flare{left:50%;top:50%;width:46%;transform:translate(-50%,-50%);z-index:9;
  mix-blend-mode:screen;opacity:0}
.wheel-frame.won .wl-flare{animation:wlFlare 2.4s ease-out 1}
.wheel-frame.won .wl-ring{animation:wlRingPulse 2.2s ease-out 1}
/* 转的时候只有扇区动 */
.w-spin{transform-origin:205px 205px;transition:transform 5.2s cubic-bezier(.14,.78,.12,1)}
.w-sheen{transform-origin:205px 205px;animation:orbitSpin 18s linear infinite;opacity:.85}
@keyframes wlSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes wlSpinBack{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes wlBreathe{0%,100%{opacity:.5}50%{opacity:.78}}
@keyframes wlShimmer{0%,100%{opacity:.42}45%{opacity:.7}}
@keyframes wlRingPulse{0%{filter:drop-shadow(0 16px 40px rgba(0,0,0,.55))}
  26%{filter:drop-shadow(0 16px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,222,155,.75))}
  100%{filter:drop-shadow(0 16px 40px rgba(0,0,0,.55))}}
@keyframes wlFlare{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  22%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}
@media(prefers-reduced-motion:reduce){
  .wl-glow,.wl-ribbons,.wl-softglow,.wl-sheen,.wl-particles,.wl-sparkles,.w-sheen{animation:none}
  .w-spin{transition-duration:1.2s}
}
/* 小轮盘（首页左下角）：只留核心几层，手机上轻 */
.miniwheel .wl-bg,.miniwheel .wl-platform,.miniwheel .wl-fx,.miniwheel .wl-flare{
  display:none}
@media(max-width:860px){
  .miniwheel .wl-ambient{display:none}
}
/* 小轮盘（Portal 页左下角，跟着屏幕滑动，点了跳奖励页） */
.miniwrap{position:fixed;left:clamp(12px,1.6vw,26px);bottom:clamp(14px,2vw,28px);z-index:55;
  display:none}
.miniwrap.on{display:block}
.miniwheel{display:block;width:clamp(74px,8.4vw,104px);border-radius:50%;
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.miniwheel:after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:1px solid var(--gold-hair);animation:glowPulse 6s ease-in-out infinite;z-index:9}
.miniwheel:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08)}
.miniwrap .mlbl{display:block;margin-top:9px;text-align:center;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);text-shadow:0 1px 10px rgba(0,0,0,.9)}
/* 小轮盘是浮在左下角的，页脚给它让出位置，别被永久盖住 */
body.mini-on .foot{padding-bottom:clamp(92px,11vw,124px)}
@media(max-width:860px){
  .miniwheel{width:66px}
  .miniwrap .mlbl{display:none}
}
.sec-tx{font-family:var(--sans);letter-spacing:.06em;fill:rgba(233,226,213,.9)}
.sec-tx.sec-none{fill:rgba(180,176,168,.55)}
.sec-lb{font-family:var(--sans);letter-spacing:.1em;fill:var(--gold-bright)}
.wheel-frame.locked{opacity:.6}
.wheel-frame.locked:after{content:"";position:absolute;inset:5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,5,7,.78),rgba(4,5,7,.45) 72%,transparent);
  pointer-events:none}
.locknote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:72%}
.locknote b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-bright)}
.locknote span{display:block;margin-top:8px;font-size:11.5px;color:var(--text-tertiary);line-height:1.7}
/* mobile: a readable prize list under the dial */
.wheel-legend{display:none;grid-template-columns:1fr 1fr;gap:2px 20px;margin-top:20px;width:100%}
.wheel-legend li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-secondary);
  padding:7px 0;border-bottom:1px solid var(--border-neutral);min-width:0}
.wheel-legend svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}
.wheel-legend span{overflow-wrap:anywhere}
@media(max-width:760px){ .wheel-legend{display:grid} }
@media(max-width:380px){ .wheel-legend{grid-template-columns:1fr} }

/* vouchers: printed-ticket feel */
.vch{position:relative;display:grid;grid-template-columns:minmax(0,124px) minmax(0,1fr) auto;
  border:1px solid var(--gold-hair);border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#0E1115,#0A0C10 60%,#101418)}
.vch .stub{padding:18px 15px 18px 19px;border-right:1px dashed rgba(213,188,135,.32);position:relative}
.vch .stub:after,.vch .stub:before{content:"";position:absolute;right:-7px;width:14px;height:14px;
  border-radius:50%;background:var(--bg);border:1px solid var(--gold-hair)}
.vch .stub:before{top:-7px} .vch .stub:after{bottom:-7px}
.vch .val{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1;color:var(--text-primary)}
.vch .val small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-top:6px}
.vch .body{padding:15px 16px;min-width:0}
.vch .body .t{font-size:13px;color:var(--text-primary)}
.vch .body .m{font-size:11px;color:var(--text-tertiary);margin-top:4px}
.vch .side{padding:15px 16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  justify-content:center;min-width:0}
.vch .code{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gold-bright);
  overflow-wrap:anywhere}
.vch:hover{background:linear-gradient(135deg,#111519,#0B0E12 60%,#131A20)}
.vch .copy{border:1px solid var(--gold-hair);background:transparent;color:var(--gold-bright);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
  cursor:pointer;transition:background .25s var(--ease)}
.vch .copy:hover{background:rgba(198,166,106,.12)}
.vch .use{font-size:10.5px;color:var(--text-tertiary)}
@media(max-width:560px){
  .vch{grid-template-columns:1fr}
  .vch .stub{border-right:0;border-bottom:1px dashed rgba(213,188,135,.32);display:flex;
    align-items:baseline;gap:10px}
  .vch .side{align-items:flex-start}
}

/* ------------------------------------------------------------------ photos */
.pblock{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-neutral)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.pcell{display:block;position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  border:1px solid var(--gold-hair);background:#0B0F12;min-width:0}
.pcell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pcell:hover img{transform:scale(1.05)}
.pcell:hover{border-color:var(--gold-hair-strong)}
@media(max-width:560px){ .pgrid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px} }

/* ------------------------------------------------------------------ sales bar */
.salesbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.2vw,26px)}
.salesbar .who{display:flex;align-items:center;gap:14px;min-width:0}
.salesbar .mono-badge{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;border:1px solid var(--gold-hair-strong);
  background:linear-gradient(180deg,rgba(198,166,106,.16),rgba(198,166,106,.03));
  font-family:var(--serif);font-size:18px;color:var(--gold-bright)}
.salesbar .nm{font-size:14px;color:var(--text-primary)}
.salesbar .mt{font-size:11.5px;color:var(--text-tertiary);margin-top:3px;overflow-wrap:anywhere}
.salesbar .btns{display:flex;flex-wrap:wrap;gap:9px}
@media(max-width:560px){ .salesbar .btns{width:100%} .salesbar .btns .btn{flex:1 1 auto} }

/* ------------------------------------------------------------------ footer */
.foot{border-top:1px solid var(--gold-hair);margin-top:clamp(40px,5vw,80px);
  padding:clamp(24px,3vw,40px) 0;font-size:12px;color:var(--text-tertiary)}
.foot a{color:var(--text-secondary)}
.foot a:hover{color:var(--gold-bright)}

/* ------------------------------------------------------------------ auth pages */
.auth{min-height:100vh;display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch}
@media(max-width:980px){ .auth{grid-template-columns:1fr} .auth .visual{display:none} }
.auth .form{padding:clamp(28px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
.auth .visual{position:relative;border-left:1px solid var(--gold-hair);overflow:hidden;background:#040507}
.auth .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;
  animation:orbDrift 40s ease-in-out infinite}
.auth .visual:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,6,7,.94),rgba(5,6,7,.30) 46%,transparent 74%)}
.auth .visual .vcap{position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(22px,3vw,46px);
  z-index:2;max-width:32ch}
.auth .visual .vcap .lbl{line-height:2}
.field{margin-top:18px}
.field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-tertiary);margin-bottom:9px}
.field input{width:100%;background:rgba(255,255,255,.028);border:1px solid var(--gold-hair);
  border-radius:var(--r-sm);color:var(--text-primary);font-family:var(--sans);font-size:15px;
  padding:13px 15px;outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field input:focus{border-color:var(--gold-hair-strong);box-shadow:0 0 0 3px rgba(198,166,106,.09)}
.msg{margin-top:16px;font-size:13px;border-radius:var(--r-sm);padding:12px 14px;display:none;
  border:1px solid var(--border-neutral)}
.msg.err{display:block;border-color:rgba(224,147,140,.4);background:rgba(224,147,140,.07);color:var(--err)}
.msg.ok{display:block;border-color:rgba(143,203,168,.34);background:rgba(143,203,168,.06);color:var(--ok)}
.rules{margin-top:15px;font-size:12px;color:var(--text-tertiary);line-height:1.9}
.alt{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-neutral);
  font-size:12px;color:var(--text-tertiary)}
.alt a:hover{color:var(--gold-bright)}

/* ------------------------------------------------------------------ motion */
.in{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards}
.in.d1{animation-delay:.10s} .in.d2{animation-delay:.20s}
.in.d3{animation-delay:.30s} .in.d4{animation-delay:.40s}
@keyframes rise{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .in{opacity:1;transform:none}
  .hero-art .art img{transform:none}
}

/* narrow screens: never squeeze a desktop table — stack it into labelled rows */
@media(max-width:760px){
  table.tbl{table-layout:auto}
  /* ★ 手机上表格变成"堆叠卡"：上面那套列宽（34/40/10/16%）必须清掉，
     否则 QTY/AMOUNT 只剩 10~16% 宽 → 标签被挤成竖排的"Q T Y"（自己截图时抓到的真 bug）。 */
  table.tbl th:nth-child(n),table.tbl td:nth-child(n){width:auto}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl thead{display:none}
  table.tbl tr{border-bottom:1px solid var(--border-neutral);padding:14px 0}
  table.tbl tr:last-child{border-bottom:0}
  table.tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:14px;
    text-align:right!important}
  table.tbl td:before{content:attr(data-l);color:var(--text-tertiary);font-size:10px;
    letter-spacing:.16em;text-transform:uppercase;text-align:left}
  table.tbl td:first-child{font-size:14.5px;margin-bottom:4px;color:var(--text-primary)}
  table.tbl td:first-child:before{content:none}
  table.tbl tr.total{border-top:1px solid var(--gold-hair)}
}
/* ============================================================== 📎 订单附件（P2 · 2026-10-13）
   付款凭证 / 收据发票 / 发货单据：**私密**（链接走 /portal/api/files/<id>，按登录态+订单归属校验），
   所以这里就是一行一条，点开新窗口看/下载。风格跟门户其它卡片一致（黑曜石 + 香槟金描边）。 */
.files{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--border-neutral);background:var(--surface-quiet);
  color:var(--text-primary);text-decoration:none;transition:all var(--dur) var(--ease)}
.frow:hover{border-color:var(--gold-hair-strong);background:rgba(198,166,106,.07)}
.frow .fic{font-size:17px;line-height:1}
.frow .fmeta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.frow .fmeta b{font-size:13.5px;font-weight:500}
.frow .fmeta .tiny{overflow-wrap:anywhere}
.frow .arw{color:var(--gold-muted);font-size:14px}
@media (max-width:620px){
  .frow{padding:10px 11px;gap:9px}
}

/* ============================================================== 🎟 券钱包（P4 · 2026-10-13）
   券有三种状态：可用（正常显示）/ 已用（写清用在哪张单）/ 已过期（灰掉）。
   以前钱包只显示"还能用的"，客户中过的奖在抽奖历史里写着 Won、券却凭空消失 → 只会来问「我的券呢」。 */
.vch-used{opacity:.72}
.vch-used .stub{filter:grayscale(.35)}
.vch-expired{opacity:.5}
.vch-expired .stub{filter:grayscale(1)}
.vch .side .pill{margin-top:6px;display:inline-block}

/* keep long ids / emails / tracking numbers from pushing the layout */
.mono,.code,.onum,[data-wrap]{overflow-wrap:anywhere}

/* ============================================================== 💬 在线客服（P1.5 · 2026-10-13）
   老板拍板做门户这条线，第一件是在线客服；他的硬规矩：**SLA 必须写明服务时段**。
   所以那颗按钮和抽屉顶部**永远挂着服务时段**（在线/不在线 + 洛杉矶时间 + 下一次上线时间）。
   颜色沿用门户这套（黑曜石 + 香槟金），不用亮色，不抢订单卡片的注意力。 */
.qvchat-btn{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold-hair-strong);background:rgba(10,12,16,.92);
  color:var(--text-primary);font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;
  backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:all var(--dur) var(--ease)}
.qvchat-btn:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.qvchat-ico{font-size:15px}
.qvchat-dot{width:9px;height:9px;border-radius:50%;background:#E0938C;display:inline-block;
  box-shadow:0 0 0 3px rgba(224,147,140,.18)}
.qvchat-panel{position:fixed;right:20px;bottom:20px;z-index:81;width:min(392px,calc(100vw - 28px));
  max-height:min(74vh,620px);flex-direction:column;overflow:hidden;
  border:1px solid var(--gold-hair-strong);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(13,15,19,.97),rgba(8,9,12,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.qvchat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--border-neutral);font-size:14px}
.qvchat-head .sp{flex:1}
.qvchat-x{border:0;background:transparent;color:var(--text-tertiary);font-size:20px;line-height:1;
  cursor:pointer;padding:0 4px}
.qvchat-x:hover{color:var(--text-primary)}
.qvchat-sla{padding:10px 14px;border-bottom:1px solid var(--border-neutral);font-size:12.5px;
  line-height:1.6;color:var(--text-secondary)}
.qvchat-pill{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:3px}
.qvchat-pill.on{color:var(--ok)}
.qvchat-pill.off{color:var(--gold-pale)}
.qvchat-live{width:8px;height:8px;border-radius:50%;display:inline-block}
.qvchat-live.on{background:var(--ok);box-shadow:0 0 0 3px rgba(143,203,168,.16)}
.qvchat-live.off{background:var(--gold-muted)}
.qvchat-hours{color:var(--text-tertiary);letter-spacing:.02em}
.qvchat-sla-txt{margin-top:5px;color:var(--text-secondary)}
.qvchat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;
  min-height:150px}
.qvchat-row{display:flex;flex-direction:column;gap:3px;max-width:86%}
.qvchat-row.me{align-self:flex-end;align-items:flex-end}
.qvchat-row.them{align-self:flex-start}
.qvchat-bub{padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.55;
  border:1px solid var(--border-neutral);background:var(--surface-2);color:var(--text-primary);
  overflow-wrap:anywhere}
.qvchat-row.me .qvchat-bub{border-color:var(--gold-hair-strong);background:rgba(198,166,106,.10)}
.qvchat-foot{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;
  border-top:1px solid var(--border-neutral)}
.qvchat-foot textarea{flex:1;resize:vertical;min-height:42px;max-height:120px;
  background:var(--surface-quiet);border:1px solid var(--border-neutral);border-radius:var(--r-sm);
  color:var(--text-primary);font-family:var(--sans);font-size:13.5px;padding:9px 11px}
.qvchat-foot textarea:focus{outline:none;border-color:var(--gold-hair-strong)}
.qvchat-send{padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--gold-hair-strong);background:rgba(198,166,106,.13);
  color:var(--gold-pale);font-family:var(--sans);font-size:13px;white-space:nowrap}
.qvchat-send:hover{border-color:var(--gold);color:var(--gold-bright)}
.qvchat-send:disabled{opacity:.55;cursor:default}
.qvchat-note{padding:0 14px 10px;font-size:12px;color:var(--err);min-height:14px}
@media (max-width:620px){
  .qvchat-btn{right:12px;bottom:12px;padding:10px 14px}
  .qvchat-panel{right:8px;left:8px;bottom:8px;width:auto;max-height:82vh}
  .qvchat-txt{display:none}
}