html{overflow-x:hidden}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
 font-family:var(--font-ui);display:flex;flex-direction:column;align-items:center;
 position:relative;overflow-x:hidden}
.wrap{width:100%;max-width:1180px;display:flex;flex-direction:column}
@media(min-width:1600px){.wrap{max-width:1360px}}
.hub-top{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:10px}
.hub-signin{background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;padding:4px 2px;border-radius:6px;transition:color .14s ease}
.hub-signin:hover{color:var(--text)}
.hub-signin .l-zh{display:none}
html[data-lang="zh"] .hub-signin .l-en{display:none}
html[data-lang="zh"] .hub-signin .l-zh{display:inline}
.h{text-align:center;margin:6px 0 22px;position:relative;isolation:isolate}
/* a soft, feathered radial --bg scrim sits BEHIND the hero text (own stacking
   context via isolation) so the bright sun/moon disc never washes the headline
   out. Radial + fully transparent edges = no hard rectangular line across the body. */
.h::before{content:'';position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
 width:min(720px,94%);height:128%;
 background:radial-gradient(58% 54% at 50% 50%,color-mix(in srgb,var(--bg) 74%,transparent),color-mix(in srgb,var(--bg) 32%,transparent) 52%,transparent 76%)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);
 background:color-mix(in srgb,var(--panel) 64%,transparent);border:1px solid var(--line);padding:6px 14px;border-radius:999px;
 margin-bottom:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.eyebrow .live{width:7px;height:7px;border-radius:50%;background:#22c55e;
 box-shadow:0 0 0 0 color-mix(in srgb,#22c55e 55%,transparent);animation:livepulse 2.4s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#22c55e 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.h h1{font-size:clamp(31px,4.6vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 10px;
 background:linear-gradient(176deg,var(--text) 24%,color-mix(in srgb,var(--text) 56%,var(--muted)));
 -webkit-background-clip:text;background-clip:text;color:transparent;
 /* legibility over the disc comes from BOTH the soft radial scrim on .h::before AND
    this multi-layer --bg glyph halo — belt and braces, no hard scrim edge */
 filter:drop-shadow(0 1px 1px var(--bg)) drop-shadow(0 0 12px var(--bg)) drop-shadow(0 0 26px var(--bg)) drop-shadow(0 0 46px var(--bg))}
html[data-lang="zh"] .h h1{letter-spacing:0}
/* ===== brand lockup — the crafted Mastermind “M” glyph + the MASTERMIND wordmark,
   standing in for the old plain-text title. The container drops the gradient-text
   treatment (it would clip the SVG); the wordmark span keeps it. ===== */
/* display:flex (block-level), NOT inline-flex — the preceding .eyebrow is itself
   inline-flex, so an inline-flex h1 would share its line and sit off-centre. A
   block-level flex takes its own line and centres the glyph+wordmark via justify. */
.h h1.hub-logo{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.7vw,19px);
 background:none;-webkit-text-fill-color:currentColor;color:var(--text);filter:none}
.h h1.hub-logo .brand-glyph{width:clamp(48px,6.4vw,66px);height:clamp(48px,6.4vw,66px);flex:none;
 filter:drop-shadow(0 6px 18px rgba(40,56,128,.42)) drop-shadow(0 1px 2px var(--bg)) drop-shadow(0 0 18px var(--bg)) drop-shadow(0 0 34px var(--bg))}
.h h1.hub-logo .logo-word{font-family:var(--font-ui);font-weight:900;letter-spacing:.015em;-webkit-text-fill-color:transparent;
 background:linear-gradient(176deg,var(--text) 24%,color-mix(in srgb,var(--text) 56%,var(--muted)));
 -webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 1px 1px var(--bg)) drop-shadow(0 0 12px var(--bg)) drop-shadow(0 0 26px var(--bg)) drop-shadow(0 0 46px var(--bg))}
@media(max-width:520px){.h h1.hub-logo{gap:11px}.h h1.hub-logo .brand-glyph{width:44px;height:44px}}
.h p{color:color-mix(in srgb,var(--text) 72%,var(--muted));font-size:clamp(14px,2vw,16px);margin:0 auto;max-width:548px;line-height:1.55;text-wrap:balance;
 text-shadow:0 1px 2px var(--bg),0 0 8px var(--bg),0 0 18px var(--bg),0 0 30px var(--bg)}

/* ===== glass + accent primitives ===== */
.glass{position:relative;border-radius:16px;overflow:hidden;isolation:isolate;
 background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
 -webkit-backdrop-filter:blur(13px) saturate(1.08);backdrop-filter:blur(13px) saturate(1.08);
 box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 8px 26px -18px rgba(0,0,0,.5)}
html[data-theme="light"] .glass{background:color-mix(in srgb,var(--panel) 90%,transparent);
 border-color:color-mix(in srgb,var(--line) 92%,transparent);
 box-shadow:0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 6px 20px -14px rgba(20,30,50,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:color-mix(in srgb,var(--panel) 96%,transparent)}}
/* one radius for every glass surface on the hub — out-specifies theme.css's
   `html body .card{border-radius:12px}` so cards match the clock, alerts + tooltip */
.wrap .glass{border-radius:16px}
.acc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
 background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 22%,transparent));
 transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.acc::after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
 background:radial-gradient(360px 180px at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%);transition:opacity .25s ease}

/* ===== section labels ===== */
.band{display:flex;align-items:center;gap:11px;margin:0 2px 13px}
.band h2{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0}
html[data-lang="zh"] .band h2{letter-spacing:0}
.band .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.band .cnt{font-size:11px;font-weight:600;color:var(--muted)}

/* ===== the nav grid (markets + vectors, all visible) ===== */
.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
@media(max-width:1024px) and (min-width:769px){.nav.vc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nav{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;padding:15px 16px 14px;min-height:138px;text-decoration:none;color:inherit;
 transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease}
.card:hover,.card:focus-within{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
 box-shadow:0 16px 36px -16px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.card:hover.acc::before,.card:focus-within.acc::before{transform:scaleX(1)} .card:hover.acc::after{opacity:1}
.card-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ico{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:9px;
 background:color-mix(in srgb,var(--accent) 15%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
 transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.card:hover .ico{transform:scale(1.07) rotate(-4deg)}
.card-h{font-size:14.5px;font-weight:800;color:var(--text);margin:0;letter-spacing:-.015em;line-height:1.15}
html[data-lang="zh"] .card-h{letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pill{font-size:11.5px;font-weight:700;letter-spacing:-.005em;background:color-mix(in srgb,var(--accent) 12%,var(--panel2));
 color:color-mix(in srgb,var(--accent) 74%,var(--text));padding:3px 9px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.pill.q1{background:color-mix(in srgb,var(--q1) 13%,var(--panel2));color:color-mix(in srgb,var(--q1) 80%,var(--text));border-color:color-mix(in srgb,var(--q1) 24%,transparent)}
.pill.q2{background:color-mix(in srgb,var(--q2) 13%,var(--panel2));color:color-mix(in srgb,var(--q2) 80%,var(--text));border-color:color-mix(in srgb,var(--q2) 24%,transparent)}
.pill.q3{background:color-mix(in srgb,var(--q3) 13%,var(--panel2));color:color-mix(in srgb,var(--q3) 80%,var(--text));border-color:color-mix(in srgb,var(--q3) 24%,transparent)}
.pill.q4{background:color-mix(in srgb,var(--q4) 13%,var(--panel2));color:color-mix(in srgb,var(--q4) 80%,var(--text));border-color:color-mix(in srgb,var(--q4) 24%,transparent)}
.pill.on{background:color-mix(in srgb,var(--info) 15%,var(--panel));color:color-mix(in srgb,var(--info) 82%,var(--text));border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.pill.off{background:color-mix(in srgb,var(--act) 14%,var(--panel));color:color-mix(in srgb,var(--act) 82%,var(--text));border-color:color-mix(in srgb,var(--act) 22%,transparent)}
.pill.neg{background:color-mix(in srgb,var(--down) 13%,var(--panel2));color:color-mix(in srgb,var(--down) 80%,var(--text));border-color:color-mix(in srgb,var(--down) 22%,transparent)}
.bar{height:5px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;margin:-2px 0 9px}
.bar i{display:block;height:100%;border-radius:999px}
.bar.b-risk i{background:linear-gradient(90deg,var(--act),var(--warn))}
.bar.b-health i{background:linear-gradient(90deg,var(--warn),var(--ok))}
.go{margin-top:auto;font-weight:700;color:var(--accent);font-size:12px}
.go::after{content:' →'}
/* market cards: header chip + two clearly-labelled split BUTTONS (Macro / Stock) */
.card .pill.hd{margin-left:auto}
.split{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.splitbtn{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
 border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:11px;padding:9px 11px;
 background:color-mix(in srgb,var(--panel2) 42%,transparent);
 transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
.splitbtn:hover{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel2));
 transform:translateY(-1px);box-shadow:0 7px 16px -10px color-mix(in srgb,var(--accent) 45%,transparent)}
.sb-ic{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;border-radius:8px;
 background:color-mix(in srgb,var(--accent) 14%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.sb-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sb-tx b{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.01em}
html[data-lang="zh"] .sb-tx b{letter-spacing:0}
.sb-tx em{font-style:normal;font-size:11px;color:var(--muted)}
.sb-go{margin-left:auto;color:var(--accent);font-weight:700;font-size:13px;transition:transform .14s ease}
.splitbtn:hover .sb-go{transform:translateX(2px)}

.us{--accent:#416aec} .cn{--accent:#e35d6a} .hk{--accent:#a855f7} .ca{--accent:#e5484d} .btc{--accent:#f7931a}
.com{--accent:#d4a12a} .fx{--accent:#14b8a6} .bd{--accent:#0ea5e9} .term{--accent:#22c55e}
.cyc{--accent:#6366f1} .sec{--accent:#14b8a6} .rep{--accent:#8b5cf6}

/* ===== compact alerts (secondary, bottom) ===== */
.alerts{margin-top:4px}
.al-card{padding:6px 18px}
.ha-item{position:relative;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ha-item:last-child{border-bottom:none}
.ha-item summary{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer;list-style:none;flex-wrap:wrap;transition:padding-left .16s ease}
.ha-item summary:hover{padding-left:5px}
.ha-item summary::-webkit-details-marker{display:none}
.ha-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ha-dot.d-high{background:var(--act)} .ha-dot.d-medium{background:var(--info)} .ha-dot.d-info{background:var(--muted)}
.ha-src{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap;flex:none}
.ha-src.s-macro{background:color-mix(in srgb,#6366f1 16%,var(--panel));color:color-mix(in srgb,#6366f1 80%,var(--text))}
.ha-src.s-vector{background:color-mix(in srgb,var(--info) 16%,var(--panel));color:color-mix(in srgb,var(--info) 82%,var(--text))}
.ha-src.s-commodity{background:color-mix(in srgb,var(--warn) 18%,var(--panel));color:color-mix(in srgb,var(--warn) 84%,var(--text))}
.ha-head{flex:1;min-width:200px;font-weight:600;color:var(--text);font-size:13px}
.ha-when{font-size:11px;color:var(--muted);font-weight:600;white-space:nowrap}
.ha-detail{padding:0 0 12px 22px;font-size:12.5px;color:var(--text);line-height:1.55}
.ha-detail a{font-weight:700;color:var(--link)}
.al-more{display:block;text-align:center;padding:11px 0 6px;font-size:12.5px;font-weight:700;color:var(--link);text-decoration:none}
.al-more:hover{text-decoration:underline}
.ha-toggle{display:block;width:100%;background:none;border:none;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:9px 0;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--link);cursor:pointer;text-align:center}
.ha-toggle:hover{text-decoration:underline}
.ha-toggle .ha-t-less{display:none}
.ha-toggle.open .ha-t-more{display:none}
.ha-toggle.open .ha-t-less{display:inline}
.ha-toggle .l-zh{display:none}
html[data-lang="zh"] .ha-toggle .l-en{display:none}
html[data-lang="zh"] .ha-toggle .l-zh{display:inline}

/* ===== alerts list ===== */
/* one-shot pulse on the newest row — gated by prefers-reduced-motion + html.fx-min */
@keyframes ha-pulse-in{0%{background:color-mix(in srgb,var(--act) 18%,transparent)}100%{background:transparent}}
.ha-item.newest{animation:ha-pulse-in 2s ease-out forwards}
@media(prefers-reduced-motion:reduce){.ha-item.newest{animation:none}}
/* mobile: dot + source chip + timestamp on line one, headline on its own full-width line */
@media(max-width:560px){
.ha-item summary{gap:8px;padding:10px 0}
.ha-head{flex-basis:100%;order:5;min-width:0}
.ha-when{margin-left:auto}
.ha-detail{padding-left:0}
}

/* ===== three-part footer (W3) ===== */
.b-footer{width:100%;margin-top:40px;padding-top:0;position:relative;overflow:hidden}
.b-foot-inner{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);
 padding:28px 0 36px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:start}
@media(max-width:780px){.b-foot-inner{grid-template-columns:1fr;gap:24px}}
@media(max-width:560px){.b-foot-inner{gap:20px;padding:22px 0 28px}}
/* brand column */
.b-foot-brand{display:flex;align-items:center;gap:12px}
.b-foot-brand .b-m-glyph{width:34px;height:34px;background:linear-gradient(135deg,#3b82f6,#7c5cff);
 border-radius:9px;display:flex;align-items:center;justify-content:center;
 color:#fff;font-weight:900;font-size:16px;box-shadow:0 4px 12px rgba(59,130,246,.35);flex:none}
.b-foot-brand .b-wordmark{font-size:14px;font-weight:900;color:var(--text);letter-spacing:.04em}
.b-foot-brand .b-tagline{font-size:11px;color:var(--muted);margin-top:2px}
/* link columns */
.b-foot-links{display:flex;gap:32px;flex-wrap:wrap}
.b-foot-link-group h4{font-size:10.5px;font-weight:800;color:var(--muted);
 letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.b-foot-link-group a{display:block;font-size:12px;color:var(--text);text-decoration:none;
 padding:2px 0;opacity:.8;transition:opacity .15s,color .15s}
.b-foot-link-group a:hover{opacity:1;color:var(--link)}
/* bilingual link labels */
.b-foot-link-group a .l-zh{display:none}
html[data-lang="zh"] .b-foot-link-group a .l-en{display:none}
html[data-lang="zh"] .b-foot-link-group a .l-zh{display:inline}
/* legal column */
.b-foot-legal{font-size:10.5px;color:var(--muted);line-height:1.55;max-width:200px;text-align:right}
@media(max-width:780px){.b-foot-legal{text-align:left;max-width:none}}
/* suppress old footer when new footer present */
.has-new-footer .foot,.has-new-footer .site-footer{display:none}

.site-footer{margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line);text-align:center;line-height:1.6}
.site-footer .made{display:block;font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:.2px}
.site-footer .dev{display:block;margin-top:1px;font-size:12px;color:var(--muted)}
.foot{margin-top:18px;color:var(--muted);font-size:12px;text-align:center}
a:focus-visible,.links a:focus-visible,.ha-item summary:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:8px}
::selection{background:color-mix(in srgb,var(--link) 26%,transparent)}

@keyframes smReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.reveal{animation:smReveal .45s cubic-bezier(.2,.7,.3,1) both}
.state.reveal{animation-delay:0ms} .nav.mk.reveal{animation-delay:70ms} .nav.vc.reveal{animation-delay:120ms} .alerts.reveal{animation-delay:160ms}
@media (prefers-reduced-motion: reduce){
 .eyebrow .live{animation:none} .reveal{animation:none}
 .card,.ico,.ha-item summary{transition:none} .card:hover{transform:none}
 .gd-scroll,.gd-scroll::before,.gd-scroll::after,.gd-scroll-chev svg{animation:none}}

/* ===== flight deck ===== */
/* single full-bleed column — the globe is the whole instrument; the market-clock
   sidebar is gone, its data migrated onto the floating islands + the slim strip */
.globe-deck{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:100%}
@media(max-width:520px){
 .gd-clock{padding:12px 11px 10px}
 .gd-row{gap:8px;padding:6px 7px}
 .gd-r-idx{font-size:11.5px} .gd-r-px{font-size:10.5px}
 .gd-r-cd{font-size:9.5px} .gd-r-txt{font-size:10.5px}
}
/* the globe is UNBOUNDED — no card; it floats on the page's aurora. The canvas is
   transparent outside the sphere, so body::before's aurora shows through.
   min-height is viewport-aware: full 640px hero on tall monitors, but it shrinks on
   shorter laptops so the Markets grid below clears the fold on load (a flat 640px +
   the ~320px header pushed the grid ~170px under the fold at ~790px viewports). */
.gd-stage{position:relative;min-height:clamp(380px,100svh - 370px,740px);display:flex;overflow:visible;background:none;border:none;box-shadow:none;min-width:0}
@media(min-width:1600px){.gd-stage{min-height:clamp(380px,100svh - 370px,740px)}}
@media(max-width:1024px) and (min-width:769px){.gd-stage{min-height:clamp(320px,100svh - 370px,min(80vw,560px))}}
@media(max-width:880px){.gd-stage{min-height:0;height:min(94vw,500px)}}
.gd-canvas{position:relative;z-index:10;width:100%;max-width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
.gd-canvas:focus-visible{outline:2px solid var(--link);outline-offset:-2px}

/* ===== floating data-islands (a back layer UNDER the canvas + a front layer OVER it;
   the opaque globe disc clips back-side pebbles → true behind/in-front occlusion) ===== */
.gd-islands{position:absolute;inset:0;pointer-events:none}
.gd-islands.gd-isl-back{z-index:5}
.gd-islands.gd-isl-front{z-index:20}
.gd-isl{position:absolute;left:0;top:0;will-change:transform;--qc:var(--info);
 transform:translate(calc(var(--x,0)*1px - 50%),calc(var(--y,0)*1px - 50%))}
.gd-isl.q1{--qc:var(--q1)} .gd-isl.q2{--qc:var(--q2)} .gd-isl.q3{--qc:var(--q3)} .gd-isl.q4{--qc:var(--q4)}
.gd-isl .glow{position:absolute;left:50%;top:50%;width:52px;height:24px;border-radius:999px;pointer-events:none;z-index:-1;
 transform:translate(calc(-50% + var(--ox,0)*1px),calc(-50% + var(--oy,0)*1px));
 background:radial-gradient(52% 62% at 50% 55%,color-mix(in srgb,var(--qc) 40%,transparent),transparent 70%);
 filter:blur(3px);opacity:calc(.5*var(--f,1));animation:gdislbreath var(--bd,5s) ease-in-out infinite;animation-delay:var(--bdl,0s)}
@keyframes gdislbreath{0%,100%{opacity:calc(.26*var(--f,1))}50%{opacity:calc(.6*var(--f,1))}}
.gd-isl .dot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
 transform:translate(-50%,-50%);background:var(--qc);box-shadow:0 0 9px var(--qc),0 0 0 2px color-mix(in srgb,var(--bg) 70%,transparent);opacity:calc(.2 + .8*var(--f,1))}
.gd-isl .ring{position:absolute;left:50%;top:50%;width:26px;height:26px;pointer-events:none;
 transform:translate(-50%,-50%) rotate(-90deg);opacity:calc(.15 + .85*var(--f,1))}
.gd-isl .ring .trk{fill:none;stroke:color-mix(in srgb,var(--line) 65%,transparent);stroke-width:2}
.gd-isl .ring .arc{fill:none;stroke:var(--qc);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--qc));transition:stroke-dashoffset .9s linear}
.gd-isl .body{position:absolute;left:50%;top:50%;white-space:nowrap;margin:0;font-family:inherit;
 transform:translate(calc(-50% + var(--ox,0)*1px),calc(-50% + var(--oy,0)*1px)) scale(calc(.84 + .16*var(--f,1)));
 display:flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;cursor:pointer;
 background:color-mix(in srgb,var(--panel) 93%,transparent);
 border:1px solid color-mix(in srgb,var(--qc) 26%,color-mix(in srgb,var(--line) 78%,transparent));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -9px 15px rgba(0,0,0,.32),0 11px 26px -10px rgba(0,0,0,.7),0 5px 18px -7px color-mix(in srgb,var(--qc) 45%,transparent);
 transition:opacity .35s ease,border-color .2s ease,box-shadow .2s ease;
 opacity:calc(.12 + .88*var(--f,1))}
.gd-isl .body::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.06) 40%,rgba(0,0,0,.16));
 -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.95}
.gd-isl .body::after{content:'';position:absolute;left:16%;right:16%;bottom:-.5px;height:2.5px;border-radius:2px;
 background:var(--qc);box-shadow:0 0 10px var(--qc),0 0 3px var(--qc);opacity:calc(.35 + .65*var(--f,1))}
.gd-isl .body:hover,.gd-isl .body:focus-visible{outline:none;border-color:color-mix(in srgb,var(--qc) 62%,var(--line));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -9px 15px rgba(0,0,0,.32),0 14px 30px -10px rgba(0,0,0,.72),0 7px 22px -6px color-mix(in srgb,var(--qc) 62%,transparent)}
.gd-isl.sel .body{border-color:color-mix(in srgb,var(--qc) 70%,var(--line))}
/* LIGHT THEME: the dark inner shadows read as a muddy smudge on a white pebble — drop
   them, go more transparent + frosted so the globe shows through as real glass */
html[data-theme="light"] .gd-isl .body{
 background:color-mix(in srgb,var(--panel) 82%,transparent);
 border-color:color-mix(in srgb,var(--qc) 32%,color-mix(in srgb,var(--line) 66%,transparent));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 2px rgba(255,255,255,.45),0 8px 20px -10px rgba(28,40,64,.24),0 3px 13px -6px color-mix(in srgb,var(--qc) 40%,transparent)}
html[data-theme="light"] .gd-isl .body::before{background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(255,255,255,.22) 46%,rgba(120,140,170,.12))}
html[data-theme="light"] .gd-isl .body:hover,html[data-theme="light"] .gd-isl .body:focus-visible{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 11px 24px -10px rgba(28,40,64,.28),0 5px 16px -6px color-mix(in srgb,var(--qc) 55%,transparent)}
.gd-isl .isl-flag{font-size:16px;line-height:1;filter:saturate(1.1)}
.gd-isl .isl-sem{width:10px;height:10px;border-radius:50%;flex:none;position:relative}
.gd-isl .isl-sem.open{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 26%,transparent),0 0 7px var(--ok);animation:gdsempulse 2.1s ease-in-out infinite}
@keyframes gdsempulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 26%,transparent),0 0 7px var(--ok)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 14%,transparent),0 0 11px var(--ok)}}
.gd-isl .isl-sem.closed{background:color-mix(in srgb,var(--muted) 26%,transparent);border:1.5px solid color-mix(in srgb,var(--muted) 80%,transparent)}
.gd-isl .isl-sem.lunch{background:conic-gradient(var(--warn) 0 50%,transparent 50% 100%);border:1.5px solid var(--warn)}
.gd-isl .isl-sem.pre{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 28%,transparent),0 0 8px var(--warn)}
.gd-isl .isl-chg{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-style:normal}
.gd-isl .isl-chg.up{color:var(--up)} .gd-isl .isl-chg.down{color:var(--down)} .gd-isl .isl-chg.stale{color:var(--muted)}
.gd-isl .isl-px{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:1px}
html.soft-contrast[data-theme="light"]{--bg:#eceef1;--panel:#f5f5f7;--panel2:#e8eaed;--text:#2e3950;--muted:#4c5a6c;--line:#d0d4db;--glass-bg:color-mix(in srgb,#f5f5f7 64%,transparent);--glass-brd:color-mix(in srgb,#2e3950 9%,transparent);--card-shadow:0 1px 3px rgba(20,30,50,.05)}
html.soft-contrast[data-theme="dark"]{--bg:#0d1018;--panel:#151820;--panel2:#1b1f28;--text:#c8d0dc;--line:#262c38}
@media(max-width:560px){.h .eyebrow{display:none}}
@media(max-width:560px){.gd-isl .body{gap:6px;padding:5px 10px 5px 8px} .gd-isl .isl-chg{font-size:12px} .gd-isl .isl-px{display:none} .gd-isl .isl-flag{font-size:14px}}
@media(max-width:560px){.gd-isl .body{overflow:visible}.gd-isl .body::after{content:'';position:absolute;inset:-10px;height:auto;width:auto;border-radius:0;background:transparent;box-shadow:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.gd-isl .glow,.gd-isl .isl-sem.open{animation:none}}
.gd-poster{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.gd-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0;list-style:none}
.gd-leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--text);cursor:pointer;
 background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--line);border-radius:999px;padding:3px 9px;
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gd-leg:hover{border-color:color-mix(in srgb,var(--accent,var(--info)) 55%,var(--line))}
.gd-leg .dot{width:7px;height:7px;border-radius:50%}
.gd-leg.q1 .dot{background:var(--q1)} .gd-leg.q2 .dot{background:var(--q2)} .gd-leg.q3 .dot{background:var(--q3)} .gd-leg.q4 .dot{background:var(--q4)}
.gd-leg .l-zh{display:none} html[data-lang="zh"] .gd-leg .l-en{display:none} html[data-lang="zh"] .gd-leg .l-zh{display:inline}

/* ===== tooltip ===== */
.gd-tip{position:fixed;z-index:50;width:264px;padding:13px 14px;border-radius:14px;pointer-events:none;
 box-shadow:var(--popover-shadow);transition:opacity .12s ease}
.gd-tip.pinned{pointer-events:auto}   /* a clicked (pinned) tooltip is interactive so its "Open dashboard" link works */
.gd-tip[hidden]{display:none}
.gd-tip-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.gd-tip-flag{font-size:18px}
.gd-tip-name{font-weight:800;font-size:14px;color:var(--text);flex:1;letter-spacing:-.01em}
.gd-chip{font-size:11px;font-weight:800;padding:2px 8px;border-radius:7px;white-space:nowrap;
 color:color-mix(in srgb,var(--mq) 82%,var(--text));background:color-mix(in srgb,var(--mq) 15%,var(--panel));border:1px solid color-mix(in srgb,var(--mq) 26%,transparent)}
.gd-chip.q1{--mq:var(--q1)} .gd-chip.q2{--mq:var(--q2)} .gd-chip.q3{--mq:var(--q3)} .gd-chip.q4{--mq:var(--q4)}
.gd-tip-gi{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.gd-tip-gi>div{display:flex;align-items:center;gap:8px;font-size:12px}
.gd-tip-k{color:var(--muted);font-weight:600;width:58px;flex:none}
.gd-tip-gi b{font-variant-numeric:tabular-nums;font-weight:700;width:42px;text-align:right}
.gd-bar{position:relative;flex:1;height:5px;border-radius:999px;background:color-mix(in srgb,var(--line) 60%,transparent)}
.gd-bar::before{content:'';position:absolute;left:50%;top:-2px;width:1px;height:9px;background:color-mix(in srgb,var(--line) 90%,transparent)}
.gd-bar i{position:absolute;top:0;height:100%;border-radius:999px}
.gd-tip-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:7px;color:var(--text)}
.gd-tip-row .gd-tip-k{width:auto;min-width:58px}  /* let "Confidence" size to its word (gi rows keep the fixed 58px) so the dots aren't crammed against it */
.gd-dots{letter-spacing:1px;color:var(--info)}
.gd-lim{font-size:10px;font-weight:700;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--panel2));padding:1px 6px;border-radius:5px}
.gd-tip-idx{display:flex;align-items:center;gap:8px;font-size:12.5px;padding-top:8px;border-top:1px solid var(--line);margin-bottom:7px}
.gd-tip-idx span:first-child{color:var(--muted);flex:1}
.gd-tip-idx b{font-variant-numeric:tabular-nums}
.gd-chg{font-weight:700}
.gd-tip-foot{font-size:10.5px;color:var(--muted);line-height:1.45;margin-bottom:9px}
.gd-tip-go{display:inline-block;font-size:12px;font-weight:700;color:var(--link);text-decoration:none}
.gd-tip .l-zh{display:none} html[data-lang="zh"] .gd-tip .l-en{display:none} html[data-lang="zh"] .gd-tip .l-zh{display:inline}

/* compact auto-tour popup — a one-line pill (flag · name · regime chip · risk) pinned to the
   bottom of the globe stage so the cycling tour never blocks the view (esp. on mobile) */
.gd-tip.mini{width:auto;max-width:min(92vw,380px);padding:7px 13px;border-radius:999px;
 display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.gd-tip.mini[hidden]{display:none}
.gd-tip.mini .gd-tip-flag{font-size:15px;flex:none}
.gd-tip.mini .gd-chip{flex:none}
.gd-mini-name{font-weight:800;font-size:12.5px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.gd-mini-risk{font-size:11.5px;font-weight:600;color:var(--muted);flex:none}

/* ===== sidebar clock ===== */
.gd-clock{display:flex;flex-direction:column;padding:14px 14px 12px;min-width:0;max-width:100%}
.gd-clock>header{font-size:12px;font-weight:800;color:var(--text);letter-spacing:-.01em;margin:0 2px 11px;display:flex;gap:6px;align-items:baseline}
.gd-clock>header .gd-utc{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.gd-clock ul{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:3px}
.gd-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .14s,border-color .14s}
.gd-row:hover,.gd-row.sel{background:color-mix(in srgb,var(--info) 7%,var(--panel2));border-color:color-mix(in srgb,var(--info) 22%,var(--line))}
.gd-row:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.gd-r-sm{width:26px;flex:none}
.gd-sm{width:26px;height:16px;display:block}
.gd-r-main{flex:1;display:flex;flex-direction:column;min-width:0;gap:1px}
.gd-r-idx{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-r-px{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-r-px em{font-style:normal;font-weight:700}
.gd-r-state{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:none}
.gd-r-stat{display:flex;align-items:center;gap:6px}
.gd-r-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.gd-r-dot.on{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.gd-r-dot.off{background:var(--muted)} .gd-r-dot.lunch{background:var(--warn)}
.gd-r-txt{font-size:11px;font-weight:700;color:var(--text)}
.gd-r-cd{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-asof,.gd-foot{font-size:10px;color:var(--muted);margin:8px 2px 0;line-height:1.4}
.gd-clock .l-zh{display:none} html[data-lang="zh"] .gd-clock .l-en{display:none} html[data-lang="zh"] .gd-clock .l-zh{display:inline}
.gd-r-cd .l-zh,.gd-r-txt .l-zh{display:none} html[data-lang="zh"] .gd-r-cd .l-en,html[data-lang="zh"] .gd-r-txt .l-en{display:none}
html[data-lang="zh"] .gd-r-cd .l-zh,html[data-lang="zh"] .gd-r-txt .l-zh{display:inline}

/* ===== celestial day/night backdrop (sky.js) =====
   #sky floats at z-index:-1 — ABOVE the ambient aurora (body::before, also -1
   but earlier in tree order) and BEHIND all page content. Sun parks on a
   time-of-day arc in light mode; a breathing starfield + moon take over in dark. */
#sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--cs:clamp(120px,13vw,214px)}
@media(max-width:560px){#sky{--cs:clamp(92px,26vw,124px)}}  /* smaller disc on phones so it stays fully on-screen */
#sky-stars{position:absolute;inset:0;width:100%;height:100%;display:block}
#sky-sun,#sky-moon{position:absolute;width:var(--cs);height:var(--cs);border-radius:50%;
 transform:translate(-50%,calc(-50% + 80vh));opacity:0;
 transition:transform 1.7s cubic-bezier(.16,.78,.29,1),opacity 1.25s ease}
#sky[data-sky="day"] #sky-sun{transform:translate(-50%,-50%);opacity:1}
#sky[data-sky="night"] #sky-moon{transform:translate(-50%,-50%);opacity:1}
/* sun — a luminous light source: white-hot core, warm body, big soft bloom + a
   faint blurred corona flare (no hard cartoon spokes) */
#sky-sun{background:radial-gradient(circle at 50% 50%,#fffdf7 0%,#fff2cc 20%,#ffd87f 40%,#ffb84d 58%,rgba(255,156,54,.34) 76%,transparent 84%);
 box-shadow:0 0 46px 6px rgba(255,226,150,.6),0 0 110px 28px rgba(255,192,92,.38),0 0 220px 86px rgba(255,170,68,.18),0 0 360px 160px rgba(255,160,60,.08)}
#sky-sun::before{content:'';position:absolute;inset:-46%;border-radius:50%;filter:blur(11px);opacity:.5;
 background:repeating-conic-gradient(from 0deg,rgba(255,222,150,.16) 0deg 7deg,transparent 7deg 22deg);
 -webkit-mask:radial-gradient(circle,transparent 46%,#000 62%,transparent 92%);mask:radial-gradient(circle,transparent 46%,#000 62%,transparent 92%);
 animation:sky-spin 90s linear infinite}
#sky-sun::after{content:'';position:absolute;inset:12%;border-radius:50%;mix-blend-mode:screen;
 background:radial-gradient(circle at 44% 40%,rgba(255,255,255,.95) 0%,rgba(255,247,214,.25) 42%,transparent 62%);
 animation:sky-breathe 6.5s ease-in-out infinite}
/* ===== light mode: dim the sun ~45% so text stays legible ===== */
html[data-theme="light"] #sky-sun{box-shadow:0 0 22px 3px rgba(255,210,100,.28),0 0 52px 10px rgba(255,180,70,.16),0 0 110px 36px rgba(255,160,60,.08),0 0 180px 64px rgba(255,150,50,.04)}
html[data-theme="light"] #sky-sun::before{opacity:.2}
html[data-theme="light"] #sky-sun::after{opacity:.55}
/* moon — a 3-D shaded sphere: soft terminator, faint craters, cool halo */
#sky-moon{background:radial-gradient(circle at 34% 28%,#ffffff 0%,#eef2fb 26%,#cdd8ee 58%,#9fafcf 100%);
 box-shadow:inset -24px -20px 50px rgba(16,26,54,.58),inset 12px 9px 24px rgba(255,255,255,.42),0 0 56px 10px rgba(150,182,242,.3),0 0 160px 60px rgba(120,162,232,.15)}
#sky-moon::before{content:'';position:absolute;inset:0;border-radius:50%;opacity:.3;
 background:radial-gradient(circle at 63% 31%,rgba(116,132,166,.6) 0 5%,transparent 6%),
  radial-gradient(circle at 39% 58%,rgba(116,132,166,.5) 0 3.6%,transparent 4.6%),
  radial-gradient(circle at 71% 64%,rgba(116,132,166,.45) 0 2.6%,transparent 3.6%),
  radial-gradient(circle at 30% 37%,rgba(116,132,166,.4) 0 2%,transparent 3%),
  radial-gradient(circle at 52% 72%,rgba(116,132,166,.4) 0 2.4%,transparent 3.4%)}
#sky-moon::after{content:'';position:absolute;inset:-30%;border-radius:50%;
 background:radial-gradient(circle,rgba(150,182,242,.16) 0%,transparent 62%);
 animation:sky-breathe 7.5s ease-in-out infinite}
@keyframes sky-spin{to{transform:rotate(360deg)}}
@keyframes sky-breathe{0%,100%{opacity:.6}50%{opacity:.95}}
/* ===== orbital satellite (sky.js) — DARK MODE ONLY =====
   Orbits the globe in a tilted 3-D ellipse; sky.js drives transform/opacity each
   frame. Lives in #sky so it sits in front of the moon but behind the page (the
   "earth") — reading as a true orbit between earth and moon. */
#sky-sat{position:absolute;left:0;top:0;width:var(--satw,118px);opacity:0;
 transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none;
 filter:drop-shadow(0 0 7px rgba(150,185,255,.35))}
#sky-sat svg{display:block;width:100%;height:auto;overflow:visible}
#sky[data-sky="day"] #sky-sat{opacity:0!important}
@media(max-width:560px){#sky-sat{--satw:78px}#sky-sat .sat-fine{display:none}}  /* smaller, simpler silhouette on phones */
/* headline legibility over the sun/moon is handled by a soft --bg glyph halo on
   the text itself (see .h h1 / .h p) — no backdrop scrim, so nothing draws an
   edge across the celestial body */
.h{position:relative}
@media (prefers-reduced-motion: reduce){
 #sky-sun,#sky-moon{transition:none}
 #sky-sun::before,#sky-sun::after,#sky-moon::after{animation:none}}
/* market clock — live index level (.nb-px) + % change (.nb-chg) patched in place
   by live.js; theme the change color (live.js ships a generic green/red) */
.gd-clock .nb-chg.up{color:var(--up)}
.gd-clock .nb-chg.down{color:var(--down)}
.gd-clock .nb-chg.stale{color:var(--muted)}

/* ===== scroll CTA pill ===== */
@keyframes gd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes gd-halo-glow{0%,100%{opacity:0.7}50%{opacity:1}}
@keyframes gd-chev-drift{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(3.5px);opacity:.4}}
.gd-cta{display:flex;justify-content:center;margin:6px 0 2px;padding-bottom:26px}
.gd-scroll{position:relative;display:inline-flex;align-items:center;gap:11px;padding:14px 28px 14px 30px;border-radius:999px;border:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.015em;color:var(--text);background:color-mix(in srgb,var(--panel2) 90%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px -12px rgba(0,0,0,.6);animation:gd-float 5.6s cubic-bezier(.37,0,.63,1) infinite;transition:box-shadow .45s ease;overflow:visible}
.gd-scroll::before{content:'';position:absolute;inset:-1px;border-radius:999px;background:linear-gradient(135deg,var(--info),#7c5cff);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;pointer-events:none}
.gd-scroll::after{content:'';position:absolute;inset:-10px;border-radius:999px;background:radial-gradient(closest-side,color-mix(in srgb,var(--info) 22%,transparent),transparent 70%);z-index:-1;opacity:0.7;animation:gd-halo-glow 5.6s cubic-bezier(.37,0,.63,1) infinite;pointer-events:none}
.gd-scroll-chev{position:relative;width:16px;height:18px;overflow:hidden}
.gd-scroll-chev svg{position:absolute;left:0}
.gd-scroll-chev svg:first-child{top:0;animation:gd-chev-drift 2.6s cubic-bezier(.45,0,.55,1) infinite}
.gd-scroll-chev svg:last-child{top:8px;animation:gd-chev-drift 2.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-1.3s}
.gd-scroll:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px -12px rgba(0,0,0,.68)}
.gd-scroll:active{filter:brightness(1.08)}
.gd-scroll:hover::after{opacity:1;animation:none}
.gd-scroll:hover .gd-scroll-chev svg{animation-duration:.9s}
.gd-scroll:active{transform:scale(1.02)}
.gd-scroll:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.gd-scroll .l-zh{display:none}
html[data-lang="zh"] .gd-scroll .l-en{display:none}
html[data-lang="zh"] .gd-scroll .l-zh{display:inline}
html[data-theme="light"] .gd-scroll{background:color-mix(in srgb,var(--panel) 62%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px -12px rgba(28,40,64,.3)}

/* ===== mobile segmented toggle ===== */
.hub-seg{display:none}
@media(max-width:560px){
.hub-seg{position:relative;display:flex;height:40px;margin:2px auto 14px;max-width:340px;background:color-mix(in srgb,var(--panel) 85%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:12px;padding:3px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent)}
.hub-seg-ind{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:9px;background:color-mix(in srgb,var(--info) 15%,var(--panel2));border:1px solid color-mix(in srgb,var(--info) 30%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 0 8px color-mix(in srgb,var(--info) 12%,transparent);transition:transform .22s cubic-bezier(.4,0,.2,1);pointer-events:none}
.hub-seg-btn{flex:1;background:none;border:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);border-radius:9px;cursor:pointer;position:relative;z-index:1;transition:color .18s}
.hub-seg-btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hub-seg-btn.on{color:var(--info);font-weight:700}
.hub-views[data-view="vc"] .hub-seg-ind{transform:translateX(100%)}
.hub-views[data-view="mk"] .vc-sec{display:none}
.hub-views[data-view="vc"] .mk-sec{display:none}
.hub-views .mk-sec,.hub-views .vc-sec{animation:smReveal .3s cubic-bezier(.2,.7,.3,1) both}
}
.hub-seg .l-zh{display:none}
html[data-lang="zh"] .hub-seg .l-en{display:none}
html[data-lang="zh"] .hub-seg .l-zh{display:inline}

/* ===== mobile compact grids ===== */
.sb-mini{display:none}
.ch-mini{display:none}
@media(max-width:560px){
.sb-full{display:none}
.split .sb-tx em{display:none}
.sb-mini{display:inline}
.nav.vc .ch-full{display:none}
.nav.vc .ch-mini{display:inline}
.split{flex-direction:row}
.splitbtn{flex:1;min-width:0;padding:8px 9px;gap:7px}
.sb-ic{width:24px;height:24px;font-size:13px}
.sb-tx b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card{min-height:0}
.nav.vc{grid-template-columns:1fr 1fr;gap:10px}
.nav.vc .card{min-height:0;flex-direction:row;align-items:center;padding:0 12px;height:52px}
.nav.vc .card-top{margin:0;flex:1;min-width:0}
.nav.vc .ico{width:26px;height:26px;font-size:13px;border-radius:7px}
.nav.vc .card-h{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav.vc .chips,.nav.vc .bar{display:none}
.nav.vc .go{margin:0;flex:none;font-size:12px}
.nav.vc .go .go-tx{display:none}
}
.go-tx{display:inline}

/* ===== regime-change badge on market cards ===== */
.regime-changed{display:inline-flex;align-items:center;padding:2px 7px;border-radius:20px;font-size:10.5px;font-weight:700;
 background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
 color:var(--warn);margin-left:6px;vertical-align:middle;white-space:nowrap}
.regime-changed .l-zh{display:none}
html[data-lang="zh"] .regime-changed .l-en{display:none}
html[data-lang="zh"] .regime-changed .l-zh{display:inline}

/* ===== standout ticker chips in stock splitbtn em ===== */
.sb-tickers{display:inline;font-family:var(--font-mono);font-size:10.5px;opacity:.8;letter-spacing:.01em}

/* ===== report teaser badge on reports card ===== */
.rep-latest{font-size:11px;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch;display:block;margin-top:2px}