/* cczz2.xyz — aura (cinematic pass). Loaded after app.css + fx.css.
   Adds atmosphere, light and depth on top of the existing pearl-white
   signal system: volumetric light behind the brain field, a pointer
   spotlight, glass that tilts and catches the light, and a handful of
   signature details. The brain itself is untouched (world.js / scene.js);
   everything here is light and shadow over it.
   Rules: transform/opacity only, no filters on large surfaces, everything
   off under prefers-reduced-motion, body.lite and touch pointers. */

:root{
  --glow-mint:rgba(18,194,173,.55);
  --glow-coral:rgba(255,107,127,.48);
  --glow-sky:rgba(43,179,217,.45);
  --s4:0 2px 6px rgba(17,26,34,.05),0 26px 60px -30px rgba(17,26,34,.34),0 80px 140px -90px rgba(12,150,140,.35);
}

/* the first frame is the brain itself: the sheet only lifts a lit wash off it,
   so the sheet stays translucent and hands over to #world as soon as it paints */
.boot{background:radial-gradient(88% 74% at 50% 40%,rgba(255,255,255,.56) 0%,rgba(247,251,251,.44) 60%,rgba(238,245,245,.3) 100%)}

/* ============ 1 · atmosphere inside the signal field ============ */
.aura{position:absolute;inset:0;pointer-events:none;overflow:hidden;contain:layout paint}
.aura i,.aura span{position:absolute;display:block}
.aura i{border-radius:50%;will-change:transform}

.aura .a1{left:-26vw;top:-34vh;width:88vw;height:88vw;
  background:radial-gradient(circle at 50% 50%,rgba(18,194,173,.11),rgba(18,194,173,.03) 44%,rgba(18,194,173,0) 68%);
  animation:auraA 38s ease-in-out infinite}
.aura .a2{right:-22vw;bottom:-38vh;width:82vw;height:82vw;
  background:radial-gradient(circle,rgba(255,107,127,.09),rgba(255,107,127,.026) 44%,rgba(255,107,127,0) 68%);
  animation:auraB 46s ease-in-out infinite}
.aura .a3{left:30vw;top:-30vh;width:66vw;height:66vw;
  background:radial-gradient(circle,rgba(43,179,217,.05),rgba(255,161,90,.022) 48%,rgba(43,179,217,0) 70%);
  animation:auraC 54s ease-in-out infinite}

/* one soft shaft of daylight from above, so the field has a direction */
.aura .shaft{left:50%;top:-30vh;width:52vw;height:86vh;transform:translate3d(-50%,0,0) rotate(9deg);
  background:linear-gradient(180deg,rgba(226,255,248,.26),rgba(214,250,242,.09) 42%,rgba(255,255,255,0) 78%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);
  animation:shaftSway 24s ease-in-out infinite}

/* technical depth: a hairline grid that fades out towards the edges */
.aura .grid{inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(17,26,34,.04) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(90deg,rgba(17,26,34,.04) 0 1px,transparent 1px 68px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 22%,#000 8%,rgba(0,0,0,.55) 46%,transparent 74%);
  mask-image:radial-gradient(120% 90% at 50% 22%,#000 8%,rgba(0,0,0,.55) 46%,transparent 74%);
  opacity:.34}

/* vignette: the centre of the page is the brightest place */
.aura .vig{inset:0;box-shadow:inset 0 0 min(22vw,260px) rgba(17,26,34,.05),inset 0 -140px 180px -140px rgba(12,150,140,.09)}

/* dust: three slow fields of signal grains, drifting at different speeds */
.aura .dust{position:absolute;inset:-30% -20%;pointer-events:none;opacity:.42;
  background-image:
    radial-gradient(circle,rgba(18,194,173,.55) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,107,127,.4) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px);
  background-size:187px 173px,263px 241px,331px 307px;
  background-position:0 0,40px 60px,120px 20px;
  animation:dustA 64s linear infinite}
@keyframes dustA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-187px,-173px,0)}}

@keyframes auraA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,4vh,0) scale(1.1)}}
@keyframes auraB{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-6vw,-5vh,0) scale(.94)}}
@keyframes auraC{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(-4vw,6vh,0) scale(1.08)}}
@keyframes shaftSway{0%,100%{transform:translate3d(-52%,0,0) rotate(9deg) scaleY(1)}50%{transform:translate3d(-46%,0,0) rotate(6deg) scaleY(1.08)}}

/* inside the console the light steps back so the brain keeps the stage */
body.in-app .aura{opacity:.5}

/* ============ 1.5 · the brain gets its colour back ============ */
/* A grade on the canvas, not a repaint: more chroma in the nodes, a touch more
   contrast in the synapses, so the field reads as a living object again. */
html.gl #world{filter:saturate(1.45) contrast(1.1) brightness(1.01)}
html.gl #bg-gl{filter:saturate(1.34) contrast(1.07)}
html.gl #bg-orbs{filter:saturate(1.34) contrast(1.07)}

/* ============ 2 · pointer spotlight (desktop only) ============ */
#spot{position:fixed;left:0;top:0;z-index:-1;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;
  pointer-events:none;opacity:0;will-change:transform,opacity;transition:opacity .9s var(--e-out);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.28),rgba(214,250,244,.12) 34%,rgba(255,238,240,.06) 56%,transparent 72%)}
#spot.on{opacity:1}
body.lite #spot,html.dock #spot{display:none}

/* ============ 3 · glass that catches the light ============ */
.tx-gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .36s var(--e-out);
  background:
    radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.75),rgba(255,255,255,.22) 44%,transparent 66%),
    conic-gradient(from 210deg at var(--gx,50%) var(--gy,0%),rgba(18,194,173,.14),rgba(255,107,127,.08),rgba(255,161,90,.10),rgba(43,179,217,.12),rgba(18,194,173,.14))}
.tx-live > .tx-gloss{opacity:.9}
.key-card{isolation:isolate}

:is(.card,.stat,.key-card,.balance-card,.auth-card).tx-live,
.three :is(.card,.stat,.key-card,.balance-card,.auth-card).tx-live{
  transform:perspective(1200px) translate3d(0,-3px,2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.012);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--hair),
    calc(var(--sx,0) * 1px) calc(var(--sy,0) * 1px) 58px -28px rgba(17,26,34,.32),
    calc(var(--sx,0) * 1.6px) calc(var(--sy,0) * 1.6px) 130px -80px rgba(12,150,140,.30)}

/* ============ 3.5 · every frame is a window ============ */
/* Nothing is painted between the eye and the brain: a frame is a hairline and
   a shadow, never a sheet. Text keeps its edge from a soft white halo and an
   ink hairline, which is what makes a transparent surface readable without
   filling it in. The terminal stays dark glass because its text is light. */
.space{background:
  radial-gradient(78% 64% at 6% -8%,#dff6ef 0%,rgba(223,246,239,0) 58%),
  radial-gradient(66% 58% at 98% 94%,#ffe9ec 0%,rgba(255,233,236,0) 62%),
  linear-gradient(180deg,#fbfdfd 0%,#eef5f5 58%,#e9f1f1 100%)}
.glass{--glass:rgba(255,255,255,.05)}
.auth-card.glass{--glass:rgba(255,255,255,.05)}
.topbar.glass{--glass:rgba(255,255,255,.42)}
html.gl .auth-card.glass{--glass:rgba(255,255,255,.05)}
html.gl .topbar.glass{--glass:rgba(255,255,255,.42)}
html.gl .glass,html.gl .topbar.glass{-webkit-backdrop-filter:saturate(1.1);backdrop-filter:saturate(1.1);
  border-color:rgba(17,26,34,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(17,26,34,.05),0 20px 46px -32px rgba(17,26,34,.36)}
html.gl .card:not(.terminal),html.gl .stat{background:transparent;
  border-color:rgba(17,26,34,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(17,26,34,.05),0 20px 46px -32px rgba(17,26,34,.34);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html.gl .balance-card{background:transparent;border-color:rgba(17,26,34,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(17,26,34,.05),0 24px 52px -32px rgba(17,26,34,.36);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html.gl .key-card{background:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(17,26,34,.06),0 18px 44px -32px rgba(17,26,34,.3)}
html.gl .receipt{background:rgba(255,255,255,.3)}
html:not(.gl) .glass{--glass:rgba(255,255,255,.66)}
html:not(.gl) .card:not(.terminal),html:not(.gl) .stat,html:not(.gl) .key-card{background:rgba(255,255,255,.62)}
html:not(.gl) .balance-card{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(238,250,247,.7) 50%,rgba(255,240,242,.68))}
/* one halo for every glyph that now sits straight on the field: a tight white
   collar plus a wider bloom, so small type stays crisp over the busiest node */
html.gl :is(.card:not(.terminal),.stat,.key-card,.balance-card,.auth-card,.topbar,.view-head,.welcome){
  --muted:#414f5a;--dim:#55636e;
  text-shadow:0 1px 0 #fff,0 0 4px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.85)}
html.gl :is(.card:not(.terminal),.stat,.key-card,.balance-card,.auth-card,.topbar) :is(.button,.tab,.tabs a,.pill,.badge,.intensity i){text-shadow:none}
html.gl .auth-card label{color:#1b2730;font-weight:700}
/* the endpoint panel is a frame like the rest: ink on the field, not a slab */
html.gl .terminal{background:rgba(255,255,255,.06);color:#1b2730;border-color:rgba(17,26,34,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(17,26,34,.05),0 22px 48px -32px rgba(17,26,34,.34);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html.gl .terminal .copy-row .label{color:#4a5964}
html.gl .terminal code{color:#0f1a22}
html.gl .terminal .button{background:rgba(255,255,255,.55);border-color:rgba(17,26,34,.14);color:#1b2730;box-shadow:none}
html.gl .terminal .button:hover:not(:disabled){background:rgba(18,194,173,.14);border-color:rgba(18,194,173,.5)}
html.gl .terminal::before{opacity:.18}
html.gl .grain{opacity:.07}

/* ============ 4 · signature details ============ */
/* the welcome row gets a backlight, so the brain sits in a pool of light */
.welcome{position:relative}
.welcome::before{content:"";position:absolute;left:-8%;top:-72px;width:min(620px,64%);height:250px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(18,194,173,.17),rgba(255,161,90,.06) 62%,transparent 76%)}
.view-head::before{left:-6%;top:-56px;height:190px;width:min(420px,50%)}
/* the headline sits on a lit sheet, not straight on the field */
.auth .hero::before{background:radial-gradient(closest-side,rgba(250,252,252,.95),rgba(248,251,251,.74) 54%,rgba(248,251,251,0) 80%)}

/* the chip gets a slow gloss, like light passing over glass */
.brand-mark{overflow:hidden;
  transition:width var(--d-medium) var(--e-out),height var(--d-medium) var(--e-out),
    transform var(--d-small) var(--e-spring),box-shadow var(--d-medium) var(--e-out)}
.brand-mark::after{content:"";position:absolute;left:-60%;top:-60%;width:60%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg) translate3d(-160%,0,0);animation:chipGloss 8.5s var(--e-out) infinite;pointer-events:none}
@keyframes chipGloss{0%,62%{transform:rotate(18deg) translate3d(-160%,0,0)}
  86%,100%{transform:rotate(18deg) translate3d(320%,0,0)}}
/* the chip itself is a physical object: it leans towards the cursor */
.brand-mark.tx-live{transform:perspective(260px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.05);
  transition:transform 90ms linear,box-shadow var(--d-medium) var(--e-out);
  box-shadow:0 14px 30px -14px rgba(9,16,21,.95),0 0 0 1px rgba(255,255,255,.12) inset,
    0 1px 0 rgba(255,255,255,.14) inset,0 0 30px -8px rgba(18,194,173,.55)}
.brand-mark.tx-live::before{opacity:1;
  background:radial-gradient(70% 70% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 58%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 46%)}
@media(hover:hover){
  .brand:hover .brand-mark:not(.tx-live){transform:translate3d(0,-1px,0) scale(1.04);
    box-shadow:0 14px 30px -14px rgba(9,16,21,.95),0 0 0 1px rgba(255,255,255,.1) inset,
      0 1px 0 rgba(255,255,255,.12) inset,0 0 30px -6px rgba(18,194,173,.65)}
  .brand:hover .brand-mark.tx-live{box-shadow:0 18px 34px -14px rgba(9,16,21,.95),0 0 0 1px rgba(255,255,255,.12) inset,
      0 1px 0 rgba(255,255,255,.14) inset,0 0 34px -6px rgba(18,194,173,.7)}
  .brand:hover .brand-mark::after{animation-duration:1.3s}
  .brand:hover .site-name .dot{text-shadow:0 0 16px rgba(18,194,173,.9)}
}


/* ============ 3.9 · the field moves in depth with the pointer ============ */
/* translate (not transform) so it composes with each layer's own drift */
.aura{--px:0;--py:0}
.aura .a1{translate:calc(var(--px) * 16px) calc(var(--py) * 12px)}
.aura .a2{translate:calc(var(--px) * -22px) calc(var(--py) * -15px)}
.aura .a3{translate:calc(var(--px) * 10px) calc(var(--py) * 8px)}
.aura .shaft{translate:calc(var(--px) * 6px) calc(var(--py) * 4px)}
.aura .dust{translate:calc(var(--px) * 26px) calc(var(--py) * 18px)}
.aura .grid{translate:calc(var(--px) * 4px) calc(var(--py) * 3px)}

/* page titles: ink, a warm shadow under it, and a drawn underline */
.welcome-title{position:relative;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.7),0 18px 40px -26px rgba(17,26,34,.5)}
.welcome-title::after{content:"";position:absolute;left:0;bottom:-11px;width:54px;height:2px;border-radius:2px;
  background:var(--signal);filter:drop-shadow(0 2px 6px var(--glow-mint));
  transform:scaleX(0);transform-origin:0 50%;animation:ttlLine .9s var(--e-out) .18s forwards}
@keyframes ttlLine{to{transform:scaleX(1)}}
.welcome.view-head{margin-bottom:28px}

/* terminal: CRT lines + a light that breathes at the top edge */
.terminal::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px);opacity:.55}
.terminal>*:not(.tx-gloss){position:relative;z-index:1}
.terminal{border-color:rgba(127,240,220,.14)}

/* dialogs: a hairline of signal on the top edge */
dialog::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:var(--signal);opacity:.85;border-radius:2px}

/* toast: it drains while it is on screen */
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
  background:var(--signal);transform-origin:0 50%;animation:toastDrain 4s linear forwards}
.toast.error::after{background:linear-gradient(90deg,var(--danger),#ff9aa9)}
@keyframes toastDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ripple on touch/click */
.button,.amount,.method{overflow:hidden}
.tx-drop{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,.35) 42%,rgba(255,255,255,0) 70%)}
.tx-drop.dark{background:radial-gradient(circle,rgba(18,194,173,.35),rgba(18,194,173,.12) 46%,rgba(18,194,173,0) 70%)}

/* the primary action leans a few pixels into the cursor, then springs home */
.button.primary{--mx:0;--my:0;translate:calc(var(--mx) * 1px) calc(var(--my) * 1px)}

/* a value that just changed pulses once */
.tx-bump{animation:txBump .62s var(--e-spring)}
@keyframes txBump{0%{transform:scale(1)}32%{transform:scale(1.06);text-shadow:0 0 18px var(--glow-mint)}100%{transform:scale(1)}}

/* the wallet is the hero card: a slow aurora behind its numbers */
.balance-card{overflow:hidden}
.balance-card::before{content:"";position:absolute;right:-24%;top:-46%;width:78%;height:150%;border-radius:50%;
  background:radial-gradient(circle,rgba(18,194,173,.14),rgba(43,179,217,.06) 46%,transparent 70%);
  pointer-events:none;animation:walletBreathe 14s ease-in-out infinite}
@keyframes walletBreathe{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}50%{transform:translate3d(-6%,4%,0) scale(1.12);opacity:1}}

/* KPI hairlines glow when the tile is live */
.stat::before{box-shadow:0 0 12px var(--accent)}
.stat .spark-line{transition:stroke-width var(--d-small),filter var(--d-small)}
.stat:hover .spark-line{stroke-width:2.4;filter:drop-shadow(0 0 6px currentColor)}
.stat:hover .spark-area{opacity:.26}

/* a chosen amount lifts off the page */
.amount.active,.method.active{box-shadow:0 12px 26px -14px rgba(12,150,140,.6),0 0 30px -12px var(--glow-mint)}

/* nav: the active pill gets a soft halo */
.tabs a.active{text-shadow:0 0 14px rgba(18,194,173,.18)}
html.dock .tabs a.active{box-shadow:0 1px 2px rgba(17,26,34,.05),0 10px 22px -12px rgba(17,26,34,.42),0 0 24px -8px var(--glow-mint)}

/* ============ 4.5 · 3D transitions ============ */
/* views arrive out of depth instead of sliding flat; the cards behind them
   lift one plane closer, which is what makes the switch read as a room */
.view.enter-right{animation-name:enterR3}
.view.enter-left{animation-name:enterL3}
@keyframes enterR3{
  from{opacity:0;transform:perspective(1500px) translate3d(30px,0,-90px) rotateY(-6.5deg)}
  to{opacity:1;transform:none}}
@keyframes enterL3{
  from{opacity:0;transform:perspective(1500px) translate3d(-30px,0,-90px) rotateY(6.5deg)}
  to{opacity:1;transform:none}}
@keyframes lag{
  from{opacity:0;transform:perspective(1200px) translate3d(0,24px,-60px) rotateX(7deg) scale(.985)}
  to{opacity:1;transform:none}}

/* ============ 5 · phone ============ */
@media(max-width:900px){
  .aura .grid{opacity:.45}
  .aura .shaft{width:70vw;opacity:.8}
  .stat small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:640px){
  .aura .a1{left:-46vw;top:-24vh;width:120vw;height:120vw}
  .aura .a2{right:-40vw;bottom:-26vh;width:116vw;height:116vw}
  .aura .a3{left:8vw;top:-18vh;width:100vw;height:100vw;opacity:.7}
  .aura .shaft{width:96vw;opacity:.55}
  .aura .grid{opacity:.3}
  .aura .dust{opacity:.35}
  .aura .vig{box-shadow:inset 0 0 90px rgba(17,26,34,.03),inset 0 -90px 120px -90px rgba(12,150,140,.06)}
  .welcome-title::after{bottom:-9px;width:44px}
  .welcome.view-head{margin-bottom:22px}
  .terminal::before{opacity:.4}
  .balance-card::before{right:-40%;top:-30%;width:110%;height:120%;opacity:.8}
}

/* ============ 6 · degradation ============ */
body.lite .aura .a1,body.lite .aura .a2,body.lite .aura .a3,
body.lite .aura .shaft,body.lite .aura .dust,body.lite .brand-mark::after,
body.lite .balance-card::before{animation:none}
body.lite .aura .dust{display:none}
body.lite .aura{opacity:.5}
body.lite .tx-gloss{display:none}
body.lite .terminal::before{display:none}

@media(hover:none),(pointer:coarse){
  #spot{display:none}
  .tx-gloss{display:none}
  :is(.card,.stat,.key-card,.balance-card,.auth-card).tx-live{transform:none;box-shadow:inset 0 0 0 1px var(--hair),var(--s2)}
}

@media(prefers-reduced-motion:reduce){
  .aura i,.aura .shaft,.aura .dust,.brand-mark::after,.balance-card::before{animation:none!important}
  #spot{display:none}
  .tx-gloss{display:none}
  .welcome-title::after{transform:none}
}

/* ============ 7 · clinical white (v4) ============ */
/* 性冷淡检测风：纯白纸面、细墨线、无填充色的扁平框架。卡片从「玻璃 + 投影」
   退成「白底 + 发丝线」，大脑背景保持原有层次（in-app 0.7 透明度不变），
   只把承载文字的表面洗白，让字段像检测报告一样浮在纸上。 */
:root{
  --paper-line:rgba(17,26,34,.14);
  --paper-line-soft:rgba(17,26,34,.09);
  --seal:#b23f28;
}
/* v4.1 全透明框：卡片只是墨线勾出的范围，本身不涂白，
   大脑背景直接透过卡片可见；可读性靠文字光晕（aura 已有）。 */
html.gl .card:not(.terminal),
html.gl .stat,
html.gl .key-card,
html.gl .balance-card,
html.gl .milestone-card,
html.gl .lottery-card{
  background:transparent;
  border-color:rgba(17,26,34,.16);
  box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  text-shadow:none}
html.gl .topbar.glass{background:rgba(255,255,255,.6);border-color:rgba(17,26,34,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.4)}
html.gl .auth-card.glass{background:rgba(255,255,255,.24);border-color:rgba(17,26,34,.13);
  box-shadow:0 22px 60px -40px rgba(17,26,34,.35)}
html.gl .receipt{background:rgba(255,255,255,.34);border-color:rgba(17,26,34,.14)}
/* 检测报告的行：账本式细分隔线，无斑马底色 */
html.gl :is(.card,.stat,.key-card,.balance-card,.auth-card,.topbar){
  --muted:#3d4a54;--dim:#4f5d67}
html.gl .terminal{background:#141c23;color:#e8f1f0;border-color:#141c23;
  box-shadow:0 18px 40px -30px rgba(17,26,34,.5)}
html.gl .terminal .copy-row .label{color:#9fb3b0}
html.gl .terminal code{color:#f2faf9}
html.gl .terminal .button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#f2faf9;box-shadow:none}
html.gl .terminal .button:hover:not(:disabled){background:rgba(18,194,173,.22);border-color:rgba(18,194,173,.55)}
html.gl .terminal::before{opacity:.3}
/* 终端是深底，教程区（agent-body）与它的 tab 继承了页面的深墨色，
   深底配深字会读不清：整块翻成亮色系，代码块用更深的内衬托住 */
html.gl .agent-tabs button{border-color:rgba(255,255,255,.2);color:#b9c8cc}
html.gl .agent-tabs button:hover{border-color:rgba(18,194,173,.6);color:#5fe6d0}
html.gl .agent-tabs button.active{border-color:rgba(18,194,173,.65);background:rgba(18,194,173,.14);color:#5fe6d0}
html.gl .agent-body{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
html.gl .agent-body h3{color:#f2faf9}
html.gl .agent-body p{color:#b9c8cc}
html.gl .agent-body pre{background:rgba(0,0,0,.34);color:#d7f5ee}
/* 玻璃光泽层在透明框上没有意义，收掉 */
html.gl .card.tx-live,html.gl .stat.tx-live,html.gl .key-card.tx-live,
html.gl .balance-card.tx-live,html.gl .auth-card.tx-live{transform:none;box-shadow:none}
.tx-gloss{display:none!important}
/* 余额卡：透明框上数字直接坐在脑场前，背后的呼吸光斑收掉 */
html.gl .balance-card::before{display:none}
html.gl .balance-card{border-width:1px;border-style:solid}
/* KPI 磁贴：透明 + 细线 */
html.gl .stat{border:1px solid rgba(17,26,34,.12)}
html.gl .stat::before{box-shadow:none}
/* 按钮系统：白底墨线为常态（浮在透明框上需要一点实底保证可点感），
   主按钮唯一保留信号色 */
html.gl .button:not(.primary):not(.danger){background:rgba(255,255,255,.82);border-color:rgba(17,26,34,.15);color:var(--ink);box-shadow:none;text-shadow:none}
html.gl .button:not(.primary):not(.danger):hover:not(:disabled){border-color:rgba(12,150,140,.55);color:var(--teal);background:rgba(255,255,255,.94)}
html.gl .button.primary{text-shadow:none;box-shadow:0 10px 24px -14px rgba(12,150,140,.55)}
html.gl .amount,html.gl .method{background:rgba(255,255,255,.8);border-color:rgba(17,26,34,.15);box-shadow:none;text-shadow:none}
html.gl .amount.active,html.gl .method.active{box-shadow:0 0 0 1.5px var(--teal) inset;background:rgba(255,255,255,.92)}
/* 输入框与选择框：白底保证打字可读 */
html.gl input,html.gl select,html.gl textarea{background:rgba(255,255,255,.88);border-color:rgba(17,26,34,.15);text-shadow:none}
/* 对话框与 toast：轻透白，仍能看清内容 */
html.gl dialog{background:rgba(255,255,255,.94);border:1px solid rgba(17,26,34,.14);box-shadow:0 30px 80px -40px rgba(17,26,34,.4)}
html.gl .toast{background:rgba(255,255,255,.92);border:1px solid rgba(17,26,34,.14);color:var(--ink);text-shadow:none}
/* 公告面板 */
html.gl .notice-panel{background:rgba(255,255,255,.9);border:1px solid rgba(17,26,34,.13);box-shadow:0 24px 60px -30px rgba(17,26,34,.35);text-shadow:none}

/* ---- milestone card（v4.1 精修：透明格 + 连接线 + 层级字体） ---- */
.milestone-card .mc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.milestone-card .mc-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.ms-spent{font:500 12px/1 var(--mono);color:var(--muted)}
.ms-spent b{font-weight:720;color:var(--ink);font-variant-numeric:tabular-nums}
.milestone-card .mc-head .button{margin-left:auto}
.ms-track{display:flex;align-items:stretch;gap:0;margin:20px 0 4px;overflow-x:auto;padding:4px 2px 8px;position:relative}
/* 档位间的连接线：一条发丝线贯穿轨道，格子的锁点坐在线上 */
.ms-track::before{content:"";position:absolute;left:12px;right:12px;top:31px;height:1px;
  background:linear-gradient(90deg,rgba(17,26,34,.05),rgba(17,26,34,.14) 12%,rgba(17,26,34,.14) 88%,rgba(17,26,34,.05));
  pointer-events:none}
.ms-tier{flex:1 0 66px;min-width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 6px 12px;border:0;border-radius:14px;background:transparent;
  position:relative;transition:opacity var(--d-small) var(--e-out);scroll-snap-align:start}
.ms-lock{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(17,26,34,.2);background:rgba(255,255,255,.85);position:relative;z-index:1;
  transition:background var(--d-small),border-color var(--d-small),box-shadow var(--d-small)}
.ms-dot{width:8px;height:8px;border-radius:50%;background:rgba(17,26,34,.22)}
.ms-tier.locked{opacity:.46}
.ms-tier.locked .ms-lock{border-style:dashed;background:rgba(255,255,255,.5)}
.ms-tier.open .ms-lock{border-color:var(--teal);border-style:solid;background:#fff;
  box-shadow:0 0 0 5px rgba(18,194,173,.14),0 4px 14px -6px rgba(18,194,173,.5)}
.ms-tier.open .ms-dot{background:var(--teal);width:9px;height:9px;animation:msBreath 2.6s ease-in-out infinite}
@keyframes msBreath{0%,100%{box-shadow:0 0 0 0 rgba(18,194,173,.35)}50%{box-shadow:0 0 0 5px rgba(18,194,173,0)}}
.ms-tier.done .ms-lock{border-color:var(--teal);background:var(--teal)}
.ms-tier.done .ms-dot{background:#fff;width:5px;height:5px}
.ms-tier.open{opacity:1}
.ms-bonus{font:750 17px/1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ms-tier.open .ms-bonus{color:var(--teal);text-shadow:0 0 14px rgba(18,194,173,.3)}
.ms-need{font:500 10px/1.2 var(--mono);color:var(--dim);white-space:nowrap}
.ms-tier .ms-need{transition:color var(--d-small)}
.ms-tier.open .ms-need{color:var(--teal)}
.ms-foot{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.ms-hint{font:500 12px/1.5 var(--mono);color:var(--muted);flex:1;min-width:0}
.ms-hint b{color:var(--ink);font-weight:700}
#ms-claim.pulse{animation:msPulse 2.4s var(--e-out) infinite}
@keyframes msPulse{0%,100%{box-shadow:0 10px 24px -14px rgba(12,150,140,.55)}50%{box-shadow:0 10px 30px -12px rgba(12,150,140,.8)}}
.ms-rules{margin-top:14px;border-top:1px dashed rgba(17,26,34,.14);padding-top:12px}
.ms-rules p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted)}
/* 抽奖格与舞台同样透明化，与里程碑卡同一气质 */
html.gl .lt-stage{background:rgba(255,255,255,.28);border-color:rgba(17,26,34,.12)}
html.gl .lt-cell{background:rgba(255,255,255,.78);border-color:rgba(17,26,34,.14);box-shadow:none}
html.gl .lt-cell.rare{background:rgba(255,255,255,.9);border-color:rgba(178,63,40,.5)}
@media(max-width:640px){
  .ms-track{gap:0;margin-top:14px}

/* ---- 充值抽奖：滚轮与奖品格。墨线基调，唯一彩色给稀有奖。 ---- */
.lt-stage{position:relative;margin:16px 0 6px;border-radius:16px;border:1px solid var(--hair);
  background:rgba(255,255,255,.5);overflow:hidden}
.lt-reel{display:flex;gap:8px;padding:14px;will-change:transform}
.lt-reel .lt-cell{flex:0 0 auto}
.lt-reel.spin{animation:lt-roll 1.9s cubic-bezier(.12,.66,.16,1) forwards}
@keyframes lt-roll{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(calc(-1 * (var(--lt-step,74px) * 34)),0,0)}
}
@media (prefers-reduced-motion:reduce){
  .lt-reel.spin{animation-duration:.01s}
}
.lt-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:66px;height:66px;border-radius:14px;border:1px solid var(--line-2);
  background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.lt-cell b{font-size:17px;font-weight:750;color:var(--ink);letter-spacing:.2px}
.lt-cell.rare{border-color:rgba(178,63,40,.45);background:linear-gradient(180deg,#fff, #fdf3ef)}
.lt-cell.rare b{color:var(--seal)}
.lt-result{display:flex;flex-wrap:wrap;gap:8px;padding:4px 14px 14px;min-height:14px}
.lt-result:empty{min-height:0;padding-bottom:0}
.lt-result .lt-cell{min-width:58px;height:52px;border-radius:12px;animation:lt-pop .5s cubic-bezier(.2,.9,.3,1.2) both}
.lt-result .lt-cell:nth-child(2){animation-delay:.06s}
.lt-result .lt-cell:nth-child(3){animation-delay:.12s}
.lt-result .lt-cell:nth-child(n+4){animation-delay:.18s}
@keyframes lt-pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.lt-actions{display:flex;gap:8px;flex-shrink:0}
.lt-actions .button{min-height:44px}
@media (max-width:640px){
  .lt-actions{width:100%}
  .lt-actions .button{flex:1}
  .ms-foot:has(.lt-actions){flex-wrap:wrap;gap:10px}
}
  .ms-tier{flex:1 0 60px;min-width:60px;padding:4px 4px 10px}
  .ms-bonus{font-size:15px}
  .ms-foot{flex-direction:column;align-items:stretch}
  #ms-claim{width:100%}
  .milestone-card .mc-head .button{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  #ms-claim.pulse{animation:none}
}

/* ---- 赠予余额（金色副账户行）：抽奖与消费达标发放的资金池 ---- */
.bc-bonus{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin:2px 0 12px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(196,150,42,.38);
  background:linear-gradient(180deg, rgba(255,244,214,.55), rgba(255,251,240,.35))}
.bc-bonus-label{font-size:12px;font-weight:700;color:#8a6a14;letter-spacing:.4px}
.bc-bonus-amount{font-size:22px;font-weight:800;color:#b8860b;font-variant-numeric:tabular-nums}
.bc-bonus-note{flex-basis:100%;font-size:11px;color:#a08430;font-weight:500}
.bc-bonus.empty{opacity:.45;filter:saturate(.4)}
/* html.gl 卡片透明基调下的金色行 */
html.gl .bc-bonus{background:rgba(255,244,214,.32);border-color:rgba(178,134,11,.32)}

/* ---- 顶栏双余额胶囊 + 赠予下拉面板（金色账户体系） ---- */
.wallet-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border-radius:999px;border:1px solid var(--hair);background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:transform var(--d-small) var(--e-out),box-shadow var(--d-small)}
.wallet-chip svg{width:17px;height:17px;opacity:.85}
.wallet-chip:hover{transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(17,26,34,.55)}
.wallet-chip.bonus{background:linear-gradient(180deg,#fff6de,#ffefc2);color:#8a6a14;
  border-color:rgba(196,150,42,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.wallet-chip.bonus:hover{box-shadow:0 8px 20px -12px rgba(178,134,11,.55)}
.wallet-chip[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(196,150,42,.18)}
.wallet-panel{position:absolute;right:10px;top:calc(100% + 8px);width:min(340px,calc(100vw - 32px));z-index:30;
  border-radius:18px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px var(--hair),0 24px 60px -30px rgba(17,26,34,.45);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  overflow:hidden;transform-origin:top right;animation:npIn .22s var(--e-out)}
.wp-head{display:flex;flex-direction:column;gap:3px;padding:14px 16px 12px;border-bottom:1px solid var(--hair)}
.wp-head b{font-size:14px;font-weight:750;letter-spacing:-.01em}
.wp-sub{font-size:11.5px;color:var(--dim);font-weight:500}
.wp-rows{padding:6px 0}
.wp-row{display:flex;align-items:center;justify-content:space-between;padding:11px 17px;font-size:13.5px}
.wp-row + .wp-row{border-top:1px solid var(--hair)}
.wp-row span{color:var(--ink-2);font-weight:550}
.wp-row b{font-variant-numeric:tabular-nums;font-weight:750;color:var(--ink)}
.wp-row b.gold{color:#b8860b}
.wp-row.total{background:linear-gradient(90deg,rgba(255,244,214,.4),rgba(255,244,214,.05))}
.wp-row.total b{font-size:15px;color:#8a6a14}
.wp-note{margin:0;padding:10px 17px 14px;font-size:11.5px;line-height:1.65;color:var(--dim);border-top:1px solid var(--hair)}
@media(max-width:640px){
  .wallet-chip{height:40px;padding:0 12px;font-size:13px}
  .wallet-panel{left:10px;right:10px;width:auto;transform-origin:top center}
}
html.gl .wallet-panel{background:rgba(255,255,255,.92)}
@media (prefers-reduced-motion:reduce){
  .wallet-chip:hover{transform:none}
}