/* XinXin 16 · Glass · shared components
   Scope: html[data-color-mode] body.app-body:not(#_) — the same specificity root used by
   the V15 color layer, so these rules win by source order. */

/* ── Canvas ─────────────────────────────────────────────── */
html[data-color-mode]{background:var(--g-bg)!important}
html[data-color-mode] body.app-body:not(#_){
  font-family:var(--g-font)!important;font-size:14px;line-height:1.62;letter-spacing:.005em;
  color:var(--g-ink)!important;
  background:
    radial-gradient(1200px 700px at 85% -10%,var(--g-bg-2),transparent 70%),
    radial-gradient(900px 600px at -10% 10%,var(--g-bg-2),transparent 70%),
    var(--g-bg)!important;
  background-attachment:fixed!important;
}
html[data-color-mode] body.app-body:not(#_)::before{display:none!important}
html[data-color-mode] body.app-body:not(#_) :is(.app-mesh,.v15-page-ambient){display:none!important}
html[data-color-mode] body.app-body:not(#_) ::selection{background:var(--g-tint-2);color:var(--g-ink)}

.g-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.g-ambient i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.9;will-change:transform}
.g-ambient i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,var(--g-orb-1),transparent 66%);animation:g-drift 26s ease-in-out infinite}
.g-ambient i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:8vh;background:radial-gradient(circle,var(--g-orb-2),transparent 66%);animation:g-drift 32s ease-in-out -9s infinite reverse}
.g-ambient i:nth-child(3){width:38vw;height:38vw;left:28vw;bottom:-22vw;background:radial-gradient(circle,var(--g-orb-3),transparent 66%);animation:g-drift 38s ease-in-out -4s infinite}
/* fine grain keeps the blur from banding */
.g-ambient b{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes g-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(4vw,3vh,0) scale(1.06)}66%{transform:translate3d(-3vw,5vh,0) scale(.96)}}

/* ── Typography ─────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(h1,h2,h3,h4){color:var(--g-ink)!important;font-family:var(--g-font)!important;letter-spacing:-.022em;font-weight:720}
html[data-color-mode] body.app-body:not(#_) h2{font-size:clamp(19px,1.5vw,23px)}
html[data-color-mode] body.app-body:not(#_) h3{font-size:16px}
html[data-color-mode] body.app-body:not(#_) :is(p,.muted,small){color:var(--g-mute)}
html[data-color-mode] body.app-body:not(#_) p{color:var(--g-ink-2)}
html[data-color-mode] body.app-body:not(#_) .module-heading p,html[data-color-mode] body.app-body:not(#_) .card p{color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) a{color:var(--g-accent-ink)}
html[data-color-mode] body.app-body:not(#_) :is(code,pre,kbd){font-family:var(--g-mono)!important}
html[data-color-mode] body.app-body:not(#_) code{
  background:var(--g-tint)!important;color:var(--g-accent-ink)!important;border:1px solid var(--g-line)!important;
  border-radius:var(--g-r-sm)!important;padding:.14em .5em;font-size:.86em;
}
html[data-color-mode] body.app-body:not(#_) pre{background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) pre code{background:none!important;border:0!important;padding:0}
html[data-color-mode] body.app-body:not(#_) .eyebrow,.g-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:.18em!important;text-transform:uppercase;
  color:var(--g-accent-ink)!important;background:none!important;border:0!important;padding:0!important;
}
html[data-color-mode] body.app-body:not(#_) .eyebrow::before,.g-kicker::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--g-grad)}

/* ── Glass surface (cards, panels) ──────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(.card,.module-card,.chart-card,.metric-card,.auth-card,.overview-mini-grid>article,.overview-story-card,.key-item,.shop-product,.public-pool-card,.wallet-card,.benefit-card,.studio-card,.guide-card,.tutorial-panel,.code-panel,.g-pool,.g-image,.g-feature,.g-cta,.g-pagehead,.user-sidebar-card,.sidebar-brand-panel,.announcement-rail,.announcement-modal-card,.pool-package-grid>article,.v15-membership-card,.v15-checkin-panel,.v15-shop-tile){
  position:relative;
  background:linear-gradient(160deg,var(--g-glass-2),var(--g-glass))!important;
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(170%);backdrop-filter:blur(var(--g-blur)) saturate(170%);
  border:1px solid var(--g-line)!important;
  border-radius:var(--g-r-lg)!important;
  box-shadow:var(--g-shadow)!important;
  color:var(--g-ink)!important;
}
/* Specular top edge — the "light catching glass" highlight */
html[data-color-mode] body.app-body:not(#_) :is(.card,.module-card,.chart-card,.metric-card,.auth-card,.g-pool,.g-image,.g-feature,.g-cta,.g-pagehead,.key-item,.shop-product)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 34%);
  -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;
  padding:1px;opacity:.9;
}
html[data-color-mode="dark"] body.app-body:not(#_) :is(.card,.module-card,.chart-card,.metric-card,.auth-card,.g-pool,.g-image,.g-feature,.g-cta,.g-pagehead,.key-item,.shop-product)::after{background:linear-gradient(180deg,rgba(180,185,255,.28),transparent 40%)}
/* Pointer spotlight (glass.js sets --gx/--gy) */
html[data-color-mode] body.app-body:not(#_) .g-spot{background-image:radial-gradient(420px circle at var(--gx,50%) var(--gy,-30%),var(--g-spot),transparent 60%),linear-gradient(160deg,var(--g-glass-2),var(--g-glass))!important}

html[data-color-mode] body.app-body:not(#_) :is(.card,.module-card){padding:clamp(18px,1.8vw,26px)!important}
html[data-color-mode] body.app-body:not(#_) :is(.metric-card,.chart-card,.g-pool,.g-image,.g-feature,.key-item,.shop-product){transition:transform var(--g-t) var(--g-ease),box-shadow var(--g-t) var(--g-ease),border-color var(--g-t)!important}
@media(hover:hover){
  html[data-color-mode] body.app-body:not(#_) :is(.metric-card,.chart-card,.g-pool,.g-image,.g-feature,.key-item,.shop-product):hover{
    transform:translateY(-3px)!important;box-shadow:var(--g-shadow-lift)!important;border-color:var(--g-line-2)!important}
}
html[data-color-mode] body.app-body:not(#_) .module-section{gap:18px}
html[data-color-mode] body.app-body:not(#_) .module-heading{gap:16px;margin-bottom:6px}
html[data-color-mode] body.app-body:not(#_) .module-heading h2{margin:6px 0 4px!important;font-size:clamp(20px,1.6vw,24px)!important}
html[data-color-mode] body.app-body:not(#_) .module-index{
  border-radius:var(--g-r-md)!important;background:var(--g-tint)!important;color:var(--g-accent-ink)!important;
  border:1px solid var(--g-line)!important;box-shadow:inset 0 1px 0 var(--g-edge)!important;font-family:var(--g-mono)!important}

/* ── Top navigation ─────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) .nav.glass-nav{
  position:sticky;top:12px;z-index:100;
  background:var(--g-glass)!important;
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--g-line)!important;border-radius:var(--g-r-lg)!important;
  box-shadow:var(--g-shadow)!important;padding:10px 12px 10px 14px!important;min-height:62px;
}
html[data-color-mode] body.app-body:not(#_) .brand-mark,
html[data-color-mode] body.app-body:not(#_) :is(.sidebar-brand-mark,.user-sidebar-avatar,.auth-logo){
  background:var(--g-grad)!important;color:#fff!important;border:0!important;border-radius:var(--g-r-md)!important;
  box-shadow:var(--g-shadow-btn)!important;font-weight:800!important;text-shadow:0 1px 0 rgba(0,0,0,.15)}
html[data-color-mode] body.app-body:not(#_) .brand-copy strong{color:var(--g-ink)!important;font-weight:780;letter-spacing:-.01em}
html[data-color-mode] body.app-body:not(#_) .brand-copy b{color:var(--g-mute)!important;font-weight:550}
html[data-color-mode] body.app-body:not(#_) .topbar-status{background:var(--g-glass-3)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-pill)!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) .endpoint-mini{background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-pill)!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) .endpoint-mini code{background:none!important;border:0!important;padding:0!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) .endpoint-mini span{color:var(--g-accent-ink)!important;font-weight:700}
html[data-color-mode] body.app-body:not(#_) .navlinks>a.nav-text{color:var(--g-ink-2)!important;border-radius:var(--g-r-md)!important;padding:8px 12px!important;font-weight:620}
html[data-color-mode] body.app-body:not(#_) .navlinks>a.nav-text:hover{background:var(--g-tint)!important;color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) .mobile-top-balance{border-radius:var(--g-r-pill)!important;background:var(--g-tint)!important;color:var(--g-accent-ink)!important;border:1px solid var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) button.theme-mode-trigger.ghost{background:var(--g-glass-3)!important;border-radius:var(--g-r-md)!important;border-color:var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) .theme-mode-options{background:var(--g-glass-2)!important;-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);border-radius:var(--g-r-lg)!important;box-shadow:var(--g-shadow-lift)!important}
html[data-color-mode] body.app-body:not(#_) .theme-mode-options button.theme-mode-option.ghost{border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) .live-dot,.g-pulse{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g-ok)!important;flex:none;
  box-shadow:0 0 0 0 rgba(47,174,143,.5);animation:g-pulse 2.4s var(--g-ease) infinite}
@keyframes g-pulse{0%{box-shadow:0 0 0 0 rgba(47,174,143,.45)}70%{box-shadow:0 0 0 7px rgba(47,174,143,0)}100%{box-shadow:0 0 0 0 rgba(47,174,143,0)}}

/* ── Buttons ────────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(button,.btn):not(.ghost):not(.secondary):not(.danger):not(.ghost-danger):not(.tab):not(.theme-mode-trigger):not(.theme-mode-option):not(.endpoint-mini):not(.back-to-top):not(.announcement-preview-item):not(.announcement-all-button):not(.modal-close-button):not(.theme-preview-card):not(.email-template-option):not(.g-copy):not(.v14-chart-tool):not(.table-page-btn){
  background:var(--g-grad)!important;background-size:140% 140%!important;color:#fff!important;
  border:0!important;border-radius:var(--g-r-md)!important;box-shadow:var(--g-shadow-btn)!important;
  font-weight:680!important;letter-spacing:.01em;text-shadow:0 1px 0 rgba(20,10,90,.18);
  transition:transform .2s var(--g-ease),box-shadow .2s var(--g-ease),background-position .5s var(--g-ease),filter .2s!important;
}
html[data-color-mode] body.app-body:not(#_) :is(button,.btn):not(.ghost):not(.secondary):not(.danger):not(.ghost-danger):not(.tab):not(.theme-mode-trigger):not(.theme-mode-option):not(.endpoint-mini):not(.back-to-top):not(.announcement-preview-item):not(.announcement-all-button):not(.modal-close-button):not(.theme-preview-card):not(.email-template-option):not(.g-copy):not(.v14-chart-tool):not(.table-page-btn):hover{
  transform:translateY(-1px)!important;background-position:100% 0!important;filter:brightness(1.05)}
html[data-color-mode] body.app-body:not(#_) :is(button,.btn):active{transform:translateY(0) scale(.985)!important}
html[data-color-mode] body.app-body:not(#_) :is(button,.btn):disabled{opacity:.48!important;filter:saturate(.5);cursor:not-allowed;transform:none!important}
html[data-color-mode] body.app-body:not(#_) :is(.btn.secondary,button.secondary,.ghost,.btn.ghost,.pill-link,.table-page-btn,.v14-chart-tool){
  background:var(--g-glass-3)!important;color:var(--g-ink-2)!important;
  border:1px solid var(--g-line-2)!important;border-radius:var(--g-r-md)!important;
  box-shadow:inset 0 1px 0 var(--g-edge)!important;font-weight:640!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--g-ease)!important;
}
html[data-color-mode] body.app-body:not(#_) :is(.btn.secondary,button.secondary,.ghost,.btn.ghost,.pill-link,.table-page-btn,.v14-chart-tool):hover{
  background:var(--g-tint)!important;border-color:var(--g-line-2)!important;color:var(--g-accent-ink)!important}
html[data-color-mode] body.app-body:not(#_) :is(.danger,.ghost-danger){
  background:rgba(212,84,108,.08)!important;color:var(--g-err)!important;border:1px solid rgba(212,84,108,.26)!important;
  border-radius:var(--g-r-md)!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) :is(.danger,.ghost-danger):hover{background:rgba(212,84,108,.14)!important}
html[data-color-mode] body.app-body:not(#_) :is(button,.btn).compact{border-radius:var(--g-r-md)!important;min-height:34px;padding:7px 13px!important;font-size:12.5px!important}
html[data-color-mode] body.app-body:not(#_) .back-to-top{
  border-radius:var(--g-r-md)!important;background:var(--g-glass-2)!important;color:var(--g-ink)!important;border:1px solid var(--g-line)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--g-shadow)!important}

/* ── Forms ──────────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  background:var(--g-glass-in)!important;color:var(--g-ink)!important;
  border:1px solid var(--g-line-2)!important;border-radius:var(--g-r-md)!important;
  box-shadow:inset 0 1px 2px rgba(20,24,80,.06)!important;min-height:44px;
  transition:border-color .2s,box-shadow .2s,background .2s!important;font-family:var(--g-font)!important;
}
html[data-color-mode] body.app-body:not(#_) :is(input,select,textarea):hover{border-color:var(--g-faint)!important}
html[data-color-mode] body.app-body:not(#_) :is(input,select,textarea):focus{
  outline:none!important;border-color:var(--g-a1)!important;background:var(--g-glass-2)!important;
  box-shadow:0 0 0 4px var(--g-tint-2),inset 0 1px 2px rgba(20,24,80,.04)!important}
html[data-color-mode] body.app-body:not(#_) :is(input,textarea)::placeholder{color:var(--g-faint)!important}
html[data-color-mode] body.app-body:not(#_) .field>label,html[data-color-mode] body.app-body:not(#_) label{color:var(--g-ink-2)}
html[data-color-mode] body.app-body:not(#_) .field>label{font-size:12.5px!important;font-weight:650!important;margin-bottom:7px}
html[data-color-mode] body.app-body:not(#_) .field>small{color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) .money-input{border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) input[type=range]{accent-color:var(--g-a1)}
html[data-color-mode] body.app-body:not(#_) input[type=checkbox],html[data-color-mode] body.app-body:not(#_) input[type=radio]{accent-color:var(--g-a1)}
/* switch */
html[data-color-mode] body.app-body:not(#_) .switch span{
  width:40px!important;height:24px!important;border-radius:var(--g-r-pill)!important;
  background:var(--g-line-2)!important;box-shadow:inset 0 1px 3px rgba(20,24,80,.16)!important;transition:background .25s var(--g-ease)!important}
html[data-color-mode] body.app-body:not(#_) .switch span::after{
  width:18px!important;height:18px!important;top:3px!important;left:3px!important;
  background:linear-gradient(180deg,#fff,#eef0ff)!important;box-shadow:0 2px 6px rgba(20,24,80,.25),inset 0 -1px 0 rgba(0,0,0,.06)!important;
  transition:transform .3s var(--g-spring)!important}
html[data-color-mode] body.app-body:not(#_) .switch input:checked+span{background:var(--g-grad)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12),0 4px 12px -4px var(--g-glow)!important}
html[data-color-mode] body.app-body:not(#_) .switch input:checked+span::after{transform:translateX(16px)!important}
html[data-color-mode] body.app-body:not(#_) label.switch:focus-within{outline:2px solid var(--g-a1);border-radius:var(--g-r-md)}

/* ── Badges, notices, tabs ──────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(.badge,.v15-pass-tag,.tier-badge,.status-pill,.section-count,.g-count){
  background:var(--g-tint)!important;color:var(--g-accent-ink)!important;border:1px solid var(--g-line)!important;
  border-radius:var(--g-r-pill)!important;font-weight:680!important;font-size:11px!important;letter-spacing:.02em;padding:3px 10px!important}
html[data-color-mode] body.app-body:not(#_) .badge.ok{background:rgba(47,174,143,.12)!important;color:var(--g-ok)!important;border-color:rgba(47,174,143,.24)!important}
html[data-color-mode] body.app-body:not(#_) :is(.badge.off,.badge.err,.badge.error,.badge.bad){background:rgba(212,84,108,.1)!important;color:var(--g-err)!important;border-color:rgba(212,84,108,.24)!important}
html[data-color-mode] body.app-body:not(#_) .badge.warn{background:rgba(201,139,46,.12)!important;color:var(--g-warn)!important;border-color:rgba(201,139,46,.24)!important}
html[data-color-mode] body.app-body:not(#_) .notice{
  border-radius:var(--g-r-md)!important;border:1px solid var(--g-line)!important;background:var(--g-glass-2)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--g-ink-2)!important;box-shadow:var(--g-shadow)!important;
  border-left:3px solid var(--g-a1)!important}
html[data-color-mode] body.app-body:not(#_) .notice-success{border-left-color:var(--g-ok)!important}
html[data-color-mode] body.app-body:not(#_) .notice-error{border-left-color:var(--g-err)!important}
html[data-color-mode] body.app-body:not(#_) :is(.tutorial-tabbar,.code-tabs,.range-switcher,.appearance-device-switch){
  background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;padding:4px!important;gap:3px!important;box-shadow:inset 0 1px 2px rgba(20,24,80,.05)!important}
html[data-color-mode] body.app-body:not(#_) :is(.tab,.range-switcher>a,.appearance-device-switch>button){
  background:transparent!important;color:var(--g-mute)!important;border:0!important;border-radius:calc(var(--g-r-md) - 4px)!important;box-shadow:none!important;font-weight:640!important}
html[data-color-mode] body.app-body:not(#_) :is(.tab,.range-switcher>a,.appearance-device-switch>button):hover{color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) :is(.tab.active,.range-switcher>a.active,.appearance-device-switch>button.active){
  background:var(--g-glass-2)!important;color:var(--g-accent-ink)!important;box-shadow:inset 0 1px 0 var(--g-edge),0 2px 8px -2px rgba(40,46,130,.2)!important}

/* ── Tables & disclosure ────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(.responsive-table-wrap,.chart-data-panel,.v14-chart-data-scroll){
  background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) .responsive-table th{
  background:transparent!important;color:var(--g-mute)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) .responsive-table td{border-bottom:1px solid var(--g-line)!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) .responsive-table tbody tr{transition:background .18s}
html[data-color-mode] body.app-body:not(#_) .responsive-table tbody tr:hover{background:var(--g-tint)!important}
html[data-color-mode] body.app-body:not(#_) .responsive-table tbody tr:last-child td{border-bottom:0!important}
html[data-color-mode] body.app-body:not(#_) :is(.positive){color:var(--g-ok)!important}
html[data-color-mode] body.app-body:not(#_) :is(.negative){color:var(--g-err)!important}
html[data-color-mode] body.app-body:not(#_) details{border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) .record-stack>details{background:var(--g-glass-3)!important;border:1px solid var(--g-line)!important;overflow:hidden}
html[data-color-mode] body.app-body:not(#_) details>summary{border-radius:var(--g-r-md)!important;color:var(--g-ink)!important;font-weight:660}
html[data-color-mode] body.app-body:not(#_) .empty{
  border:1px dashed var(--g-line-2)!important;border-radius:var(--g-r-md)!important;background:var(--g-glass-3)!important;color:var(--g-mute)!important}

/* ── Sidebar ────────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(.user-page-sidebar,.admin-sidebar-v6).console-sidebar{
  background:linear-gradient(170deg,var(--g-glass-2),var(--g-glass))!important;
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(170%);backdrop-filter:blur(var(--g-blur)) saturate(170%);
  border:1px solid var(--g-line)!important;border-radius:var(--g-r-lg)!important;box-shadow:var(--g-shadow)!important;color:var(--g-ink)!important;
  padding:14px!important;
}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-title{color:var(--g-faint)!important;font-size:10px!important;letter-spacing:.18em!important;font-weight:700!important;padding-left:10px!important;margin:16px 0 6px!important}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link{
  color:var(--g-ink-2)!important;background:transparent!important;border:1px solid transparent!important;border-radius:var(--g-r-md)!important;
  font-weight:620!important;box-shadow:none!important;transition:background .2s,color .2s,transform .2s var(--g-ease)!important}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link:hover{background:var(--g-tint)!important;color:var(--g-ink)!important;transform:translateX(2px)}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link.active{
  color:var(--g-ink)!important;background:var(--g-glass-2)!important;border-color:var(--g-line-2)!important;
  box-shadow:inset 0 1px 0 var(--g-edge),0 6px 18px -8px rgba(60,60,200,.35)!important}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link>span{
  background:var(--g-glass-in)!important;color:var(--g-mute)!important;border-radius:var(--g-r-sm)!important;
  font-family:var(--g-mono)!important;font-weight:650!important;box-shadow:inset 0 0 0 1px var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link.active>span{background:var(--g-grad)!important;color:#fff!important;box-shadow:0 4px 10px -3px var(--g-glow)!important}
html[data-color-mode] body.app-body:not(#_) .console-sidebar .side-link small{color:var(--g-faint)!important;opacity:1!important}
html[data-color-mode] body.app-body:not(#_) :is(.user-sidebar-card,.sidebar-brand-panel){box-shadow:inset 0 1px 0 var(--g-edge)!important;background:var(--g-glass-3)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-color-mode] body.app-body:not(#_) :is(.user-sidebar-copy strong,.sidebar-brand-panel strong){color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) :is(.user-sidebar-copy small,.sidebar-brand-panel small){color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) .user-sidebar-balance{color:var(--g-accent-ink)!important;font-weight:760}
html[data-color-mode] body.app-body:not(#_) .sidebar-endpoint{
  background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;color:var(--g-ink-2)!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) .sidebar-endpoint :is(small,b){color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) .sidebar-endpoint code{background:none!important;border:0!important;padding:0!important;word-break:break-all}

/* ── Overlays ───────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) .announcement-modal-backdrop{background:rgba(10,12,40,.32)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-color-mode] body.app-body:not(#_) .announcement-modal-card{border-radius:var(--g-r-xl)!important;box-shadow:var(--g-shadow-lift)!important}
html[data-color-mode] body.app-body:not(#_) .announcement-modal-item{background:var(--g-glass-3)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) .announcement-rail{border-radius:var(--g-r-lg)!important;margin-top:12px}
html[data-color-mode] body.app-body:not(#_) .announcement-preview-item{background:transparent!important;border:1px solid transparent!important;border-radius:var(--g-r-md)!important;box-shadow:none!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) .announcement-preview-item:hover{background:var(--g-tint)!important}
html[data-color-mode] body.app-body:not(#_) .announcement-preview-item b{color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) .announcement-all-button{background:var(--g-tint)!important;color:var(--g-accent-ink)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-pill)!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) .toast{border-radius:var(--g-r-md)!important;background:var(--g-glass-2)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--g-ink)!important;border:1px solid var(--g-line)!important;box-shadow:var(--g-shadow-lift)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-chart-tooltip{border-radius:var(--g-r-sm)!important;background:var(--g-glass-2)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--g-line)!important;color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-boot-loader{background:var(--g-bg)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-boot-card{background:transparent!important;box-shadow:none!important;border:0!important}
html[data-color-mode] body.app-body:not(#_) .page-progress i{background:var(--g-grad)!important}

/* ── Footer ─────────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) .footer{color:var(--g-faint)!important;border-top:1px solid var(--g-line)!important;margin-top:48px!important;padding-top:22px!important;font-size:12px}
html[data-color-mode] body.app-body:not(#_) .footer code{background:none!important;border:0!important;color:var(--g-mute)!important}

/* ── Focus ──────────────────────────────────────────────── */
html[data-color-mode] body.app-body:not(#_) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--g-a1)!important;outline-offset:2px;box-shadow:0 0 0 5px var(--g-tint-2)!important}

/* ── Motion & fallbacks ─────────────────────────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-color-mode="light"]{--g-glass:rgba(255,255,255,.9);--g-glass-2:#fff}
  :root[data-color-mode="dark"]{--g-glass:rgba(22,26,56,.94);--g-glass-2:#1d2150}
}
@media(prefers-reduced-motion:reduce){
  .g-ambient i,.g-pulse,html[data-color-mode] body.app-body:not(#_) .live-dot{animation:none!important}
}
html[data-desktop-motion="off"] .g-ambient i{animation:none!important}
@media(max-width:820px){
  /* blur is expensive on phones — lighter glass, static orbs */
  :root{--g-blur:14px}
  .g-ambient i{animation:none!important;filter:blur(60px)}
  html[data-mobile-motion="off"] .g-ambient{display:none}
  html[data-color-mode] body.app-body:not(#_) .nav.glass-nav{top:8px;border-radius:var(--g-r-lg)!important;min-height:54px}
}

/* Legacy rail was offset with top:76px and overlapped the first section */
html[data-color-mode] body.app-body:not(#_) .announcement-rail{position:relative!important;top:auto!important;margin:12px 0 0!important;z-index:5}

/* ── Nested surfaces ────────────────────────────────────────
   Legacy layers paint many inner panels (details, sub-forms, previews) solid white.
   They become a recessed glass tier inside cards in both modes. */
html[data-color-mode] body.app-body:not(#_) main :is(
  .create-model-panel,.pool-create-panel,.pool-model-spec,.pool-route-settings,.pool-model-add-form,.pool-tier-panel,
  .redeem-generator,.model-admin-card,.announcement-admin-card,.announcement-preview-strip,.mini-module,
  .v152-user-tools,.v152-create-user,.vip-grant-browser,.key-security-panel,
  .studio-image-toggle,.studio-price-tier,.gpt-composer,.public-pool-model,.compact-model,.v15-empty-shop,
  .email-preview-panel,.visual-setting-switch,.compact-switch,.toggle-field,.module-visibility-panel,
  .tutorial-panel article,.guide-faq-grid>*,.simple-config-grid>*,.v15-mini-pill,.v15-tier-badge,.v15-voucher-mark){
  background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;
  box-shadow:inset 0 1px 0 var(--g-edge)!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) main :is(.v15-mini-pill,.v15-tier-badge){border-radius:var(--g-r-pill)!important}
html[data-color-mode] body.app-body:not(#_) main :is(details>summary,.responsive-table thead,.responsive-table thead tr,.email-preview-toolbar){background:transparent!important;color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .responsive-table tbody tr:not(:hover){background:transparent!important}
html[data-color-mode] body.app-body:not(#_) main .field:not(.toggle-field){background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0;padding-right:0}
/* Modules without .card that legacy paints white */
html[data-color-mode] body.app-body:not(#_) main .module-section:not(.card):not(.module-card){background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-color-mode] body.app-body:not(#_) main :is(.gpt-chat-shell,.chatgpt-style-page>.card,.chat-window){background:linear-gradient(160deg,var(--g-glass-2),var(--g-glass))!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-lg)!important;box-shadow:var(--g-shadow)!important}
html[data-color-mode] body.app-body:not(#_) main :is(.gpt-chat-topbar,.gpt-composer-dock,.gpt-chat-scroll){background:transparent!important;border-color:var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) main .gpt-chat-topbar label{background:var(--g-glass-in)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) main .gpt-suggestion-grid button{background:var(--g-glass-in)!important;color:var(--g-ink-2)!important;border:1px solid var(--g-line)!important;box-shadow:none!important;text-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) main .gpt-suggestion-grid button:hover{background:var(--g-tint)!important;color:var(--g-accent-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .gpt-welcome-mark{background:var(--g-grad)!important;border-radius:var(--g-r-md)!important;box-shadow:var(--g-shadow-btn)!important;color:#fff!important}
/* Inputs nested in legacy wrappers (money-input, pool forms) carry stronger selectors */
html[data-color-mode] body.app-body:not(#_) main :is(.money-input,.compact-money){background:var(--g-glass-in)!important;border:1px solid var(--g-line-2)!important;box-shadow:inset 0 1px 2px rgba(20,24,80,.06)!important;color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) main :is(.money-input,.compact-money) input{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) main :is(.money-input,.compact-money):focus-within{border-color:var(--g-a1)!important;box-shadow:0 0 0 4px var(--g-tint-2)!important}
html[data-color-mode] body.app-body:not(#_).app-body main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):not(.money-input input):not(.compact-money input){background:var(--g-glass-in)!important;color:var(--g-ink)!important;border-color:var(--g-line-2)!important}
html[data-color-mode] body.app-body:not(#_).app-body main :is(input,select,textarea):not(.money-input input):not(.compact-money input):focus{background:var(--g-glass-2)!important;border-color:var(--g-a1)!important}
html[data-color-mode="dark"] body.app-body:not(#_) select option{background:#151935;color:var(--g-ink)}
html[data-color-mode] body.app-body:not(#_) main a.button-link{background:var(--g-glass-3)!important;color:var(--g-ink-2)!important;border:1px solid var(--g-line-2)!important;border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) main :is(.pool-logic-strip>div,.pool-package-metrics>span,.pool-model-price-summary>span,.pool-tier-form>label,.mini-prices>span,.public-tier-list>div,.chat-run-meta>span,.v152-remote-admin-grid>div,.story-inline-metrics>span){
  background:var(--g-glass-3)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-sm)!important;color:var(--g-ink-2)!important;box-shadow:none!important}
html[data-color-mode] body.app-body:not(#_) main .v152-remote-admin-grid>div{border-radius:var(--g-r-md)!important}
/* Legacy gradient-painted panels */
html[data-color-mode] body.app-body:not(#_) main :is(.pool-package-head,.route-hud-grid>article,.upstream-route-panel,.bridge-panel,.email-status-strip,.key-create-grid,.public-pool-card>header){
  background-image:none!important;background-color:var(--g-glass-in)!important;border-color:var(--g-line)!important;color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .pool-package-head{background-color:transparent!important;border:0!important;border-bottom:1px solid var(--g-line)!important;border-radius:var(--g-r-lg) var(--g-r-lg) 0 0!important}
html[data-color-mode] body.app-body:not(#_) main :is(.route-hud-grid>article,.upstream-route-panel,.bridge-panel){border:1px solid var(--g-line)!important;border-radius:var(--g-r-lg)!important;box-shadow:inset 0 1px 0 var(--g-edge)!important}
html[data-color-mode] body.app-body:not(#_) main .key-create-grid{border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important}
html[data-color-mode] body.app-body:not(#_) main .wallet-balance{background:var(--g-grad)!important;border:0!important;border-radius:var(--g-r-lg)!important;box-shadow:var(--g-shadow-btn)!important;color:#fff!important}
html[data-color-mode] body.app-body:not(#_) main .wallet-balance *{color:#fff!important}

/* Dark mode: legacy layers hardcode navy text on strong/b/labels */
html[data-color-mode="dark"] body.app-body:not(#_) main :is(strong,b,h1,h2,h3,h4,td,th,summary,label,dt,dd):not(.g-balance *):not(.featured *):not(.feature-panel *):not(.wallet-balance *):not(.is-accent *):not(.positive):not(.negative):not(.badge):not(.btn *):not(button *){color:var(--g-ink)!important}
html[data-color-mode="dark"] body.app-body:not(#_) main :is(.gpt-chat-topbar label>span,.simple-config-grid span,.tutorial-steps span,.guide-prereq span,.guide-value span,small,.subvalue):not(.g-balance *):not(.featured *):not(.feature-panel *):not(.wallet-balance *){color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) main :is(.route-kicker,.story-kicker){color:var(--g-accent-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .feature-panel .story-kicker{color:#fff!important}
html[data-color-mode] body.app-body:not(#_) :is(.aurora-donut-legend,.aurora-donut-legend-row,.aurora-chart-meta,.aurora-chart-meta>*){background:transparent!important;border-color:var(--g-line)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-donut-legend-row{background:var(--g-glass-3)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-sm)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-donut-legend-row :is(span,small){color:var(--g-mute)!important}
html[data-color-mode] body.app-body:not(#_) .aurora-donut-legend-row strong{color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .studio-price-value,html[data-color-mode] body.app-body:not(#_) main .studio-price-value *{color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .tutorial-check{background:var(--g-tint)!important;border:1px solid var(--g-line)!important;border-radius:var(--g-r-md)!important;color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) main .tutorial-check :is(b,strong){color:var(--g-ink)!important}
html[data-color-mode] body.app-body:not(#_) main .tutorial-check p{color:var(--g-ink-2)!important}
html[data-color-mode] body.app-body:not(#_) main .tutorial-hero span{color:var(--g-accent-ink)!important}