*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important; /* custom cursor only — never native grab/hand */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

:root {
  --bg: #070b14;
  --text: #eef2f8;
  --muted: #b4bdd0;
  --accent: #6ea8fe;
  --accent-dim: rgba(110, 168, 254, 0.22);
  --ok: #3ddc97;
  --warn: #ffc857;
  --err: #ff6b6b;
  /* css.glass–style tokens (stable Chromium frost) */
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-fill-strong: rgba(16, 22, 38, 0.62);
  --glass-blur: blur(16px) saturate(1.4);
  --tab-fill: rgba(22, 30, 48, 0.48);
  --tab-blur: blur(14px) saturate(1.2);
  --glass-bg: rgba(14, 20, 34, 0.52);
  --glass-border: rgba(255, 255, 255, 0.125);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --home-card-w: 210px;
  --home-card-h: 268px;
  --home-card-face: rgba(28, 32, 42, 0.78);
  --radius: 20px;
  --card-gap: clamp(22px, 2.8vw, 36px);
  --card-min-w: 250px;
  --card-pref-w: 420px; /* preferred max width — never stretch a lone card full-bleed */
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  /* flags / emoji: Apple first when present, then Windows Segoe, then Noto */
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;
  --ind-bg: rgba(255, 255, 255, 0.08);
  --ind-bg-press: rgba(255, 255, 255, 0.12);
  /* soft tint chips — not near-opaque */
  --proc-tcp-bg: rgba(110, 168, 254, 0.09);
  --proc-udp-bg: rgba(61, 220, 151, 0.08);
  --proc-proc-bg: rgba(255, 200, 87, 0.08);
  --proc-thread-bg: rgba(196, 168, 255, 0.09);
  --proc-tcp-fg: #a8c8ff;
  --proc-udp-fg: #7ae8c4;
  --proc-proc-fg: #ffe0a0;
  --proc-thread-fg: #d8c8ff;
  --cursor-dot: rgba(236, 240, 246, 0.9);
  --cursor-dot-edge: rgba(0, 0, 0, 0.2);
  --cursor-ring: rgba(230, 236, 245, 0.45);
  --cursor-ring-active: rgba(245, 248, 252, 0.75);
  --filter-plate: var(--tab-fill);
}

html, body {
  height: 100%;
  font-family: var(--font);
  /* Solid fallback only — actual image lives on #wallpaper (fixed layer).
     Do NOT put background-attachment:fixed on body: it breaks backdrop-filter in Chromium. */
  background-color: #070b14;
  background-image: none;
  color: var(--text);
  overflow: hidden;
  cursor: none;
  scrollbar-width: none;
}

/* ===== Boot intro — frost + wallpaper (like globe stage), a bit darker ===== */
body.intro-active .app {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* wallpaper stays visible behind frost */
body.intro-active #wallpaper {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
/* site custom cursor above intro */
body.intro-active #cursor {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
}
.boot-intro {
  position: fixed;
  inset: 0;
  z-index: 20000;
  /* darker globe-style frost over wallpaper */
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(245, 248, 252, 0.94);
  will-change: opacity;
  /* full-screen hit target — any press continues after cue is ready */
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}
body.intro-light .boot-intro {
  background: rgba(255, 255, 255, 0.38);
  color: rgba(18, 22, 32, 0.9);
}
body.intro-dark .boot-intro {
  background: rgba(0, 0, 0, 0.48);
  color: rgba(245, 248, 252, 0.94);
}
.boot-intro[hidden] {
  display: none !important;
}
.boot-intro-stage {
  position: relative;
  width: min(88vw, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* logo stays optically centered; cue is absolute under it */
  min-height: 200px;
}
.boot-intro-logo {
  width: 100%;
  max-width: 720px;
  min-height: 72px;
  transform-origin: 50% 55%;
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.boot-intro-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 28vh;
  overflow: visible;
  /* smoother CSS stroke draw */
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
}
.boot-intro-svg path {
  vector-effect: none;
  will-change: stroke-dashoffset;
}
/* cue sits lower under logo; presentCue eases logo up (x centering via GSAP xPercent) */
.boot-intro-cue-wrap {
  position: absolute;
  left: 50%;
  top: calc(50% + 96px);
  /* GSAP owns transform (xPercent -50 + y/scale) */
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.boot-intro-cue-wrap.is-ready {
  pointer-events: auto;
}
/* whole ball bobs as one unit — arrow stays dead-center inside */
.boot-intro-cue-wrap.is-bobbing .home-scroll-cue {
  animation: boot-cue-bob 1.35s ease-in-out infinite;
}
@keyframes boot-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.boot-intro-cue-wrap[hidden] {
  display: none !important;
}
/* 28×28 — colors invert vs ciallo theme, slightly lighter */
.boot-intro .home-scroll-cue {
  width: 28px;
  height: 28px;
  /* dark intro → light soft ball */
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.38);
  color: rgba(18, 22, 32, 0.55);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  overflow: hidden;
}
.boot-intro .home-scroll-cue svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: 0;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
  display: block;
}
/* light intro → soft dark ball (lighter than pure black) */
body.intro-light .boot-intro .home-scroll-cue {
  border-color: rgba(18, 22, 32, 0.14);
  background: rgba(40, 46, 58, 0.22);
  color: rgba(18, 22, 32, 0.48);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* hover only after presentCue settles (is-interactive) — avoids press-flash on appear */
.boot-intro-cue-wrap.is-interactive .home-scroll-cue:hover {
  color: rgba(18, 22, 32, 0.75);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.5);
}
body.intro-light .boot-intro-cue-wrap.is-interactive .home-scroll-cue:hover {
  color: rgba(18, 22, 32, 0.72);
  border-color: rgba(18, 22, 32, 0.22);
  background: rgba(40, 46, 58, 0.3);
}
.boot-intro .home-scroll-cue:active,
.boot-intro .home-scroll-cue:focus {
  /* keep normal look — no pressed flash during logo lift */
  background: inherit;
  border-color: inherit;
  color: inherit;
  outline: none;
}
body.intro-done .boot-intro {
  pointer-events: none;
}

/* Dual wallpaper layers — A/B crossfade (same idea as music FS cover bg) */
#wallpaper,
.wallpaper-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #070b14;
  background-image: none !important;
}
body.light #wallpaper,
body.light .wallpaper-root {
  background-color: #e8eef6;
}
.wallpaper-layer {
  position: absolute;
  inset: -8%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  will-change: opacity, transform, background-image;
  pointer-events: none;
}
.wallpaper-layer.is-active {
  opacity: 1;
  transform: scale(1.1);
}
/*
  Dark mode: gentle dim only — avoid heavy desat / pure black crush.
  1) slight brightness + tiny saturate keep hue alive
  2) soft page-tone veil (same #070b14 family) instead of pure black
*/
body.dark .wallpaper-layer {
  filter: brightness(0.78) contrast(1.03) saturate(1.05);
}
body.dark #wallpaper::after,
body.dark .wallpaper-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 90% 80% at 50% 42%,
      rgba(7, 11, 20, 0.08) 0%,
      rgba(7, 11, 20, 0.22) 62%,
      rgba(7, 11, 20, 0.4) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 11, 20, 0.12) 0%,
      rgba(7, 11, 20, 0.2) 100%
    );
}
/* light mode: leave photo as-is */
body.light .wallpaper-layer {
  filter: none;
}
body.light #wallpaper::after,
body.light .wallpaper-root::after {
  content: none;
  display: none;
}

/* Everything above wallpaper must stay transparent for blur to show through */
.app, .tab-page, .home-viewport, .home-gallery, .content, .tab-scroll, #region-panel, .cards-grid {
  background: transparent !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}

.mono { font-family: "Cascadia Code", "Consolas", monospace; font-size: 0.95em; }

/* Cursor — always topmost above showcase / music fs / menus */
.cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 1;
  will-change: opacity, filter;
}
body.cursor-idle .cursor {
  pointer-events: none;
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--cursor-dot);
  z-index: 2147483002;
  box-shadow: 0 0 0 1px var(--cursor-dot-edge);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--cursor-ring);
  z-index: 2147483001;
}

#spark-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9995;
}

.glass-card { border-radius: 20px; }

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  z-index: 1; /* above #wallpaper */
  background: transparent;
}

body.light {
  --text: #1f2937;
  --muted: #5b6578;
  --glass-fill: rgba(255, 255, 255, 0.45);
  --glass-fill-strong: rgba(255, 255, 255, 0.58);
  --glass-blur: blur(16px) saturate(1.35);
  --tab-fill: rgba(255, 255, 255, 0.55);
  --tab-blur: blur(14px) saturate(1.2);
  --home-card-face: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(0, 0, 0, 0.08);
  --ind-bg: rgba(15, 23, 42, 0.07);
  --ind-bg-press: rgba(15, 23, 42, 0.11);
  --proc-tcp-bg: rgba(37, 99, 235, 0.1);
  --proc-udp-bg: rgba(5, 150, 105, 0.09);
  --proc-proc-bg: rgba(217, 119, 6, 0.09);
  --proc-thread-bg: rgba(124, 58, 237, 0.1);
  --proc-tcp-fg: #3b6fd4;
  --proc-udp-fg: #0d9488;
  --proc-proc-fg: #c27803;
  --proc-thread-fg: #7c3aed;
  --cursor-dot: rgba(32, 36, 44, 0.88);
  --cursor-dot-edge: rgba(255, 255, 255, 0.25);
  --cursor-ring: rgba(40, 45, 55, 0.42);
  --cursor-ring-active: rgba(40, 45, 55, 0.7);
  --filter-plate: var(--tab-fill);
}

body.dark {
  --text: #eef2f8;
  --muted: #b4bdd0;
  /* slightly lighter than before — still readable frosted */
  --glass-fill: rgba(16, 22, 38, 0.48);
  --glass-blur: blur(10px) saturate(1.08);
  --tab-fill: rgba(22, 30, 48, 0.42);
  --tab-blur: blur(10px) saturate(1.06);
  --ind-bg: rgba(255, 255, 255, 0.09);
  --ind-bg-press: rgba(255, 255, 255, 0.14);
  --proc-tcp-bg: rgba(110, 168, 254, 0.11);
  --proc-udp-bg: rgba(61, 220, 151, 0.1);
  --proc-proc-bg: rgba(255, 200, 87, 0.1);
  --proc-thread-bg: rgba(196, 168, 255, 0.11);
  --proc-tcp-fg: #a8c8ff;
  --proc-udp-fg: #7ae8c4;
  --proc-proc-fg: #ffe0a0;
  --proc-thread-fg: #d8c8ff;
  --cursor-dot: rgba(236, 240, 246, 0.9);
  --cursor-dot-edge: rgba(0, 0, 0, 0.2);
  --cursor-ring: rgba(230, 236, 245, 0.45);
  --cursor-ring-active: rgba(245, 248, 252, 0.75);
  --filter-plate: var(--tab-fill);
}

.settings-btn {
  width: 36px; height: 36px; border-radius: 11px; border: none;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 1000;
}
.settings-btn:hover { color: var(--text); }

.settings-overlay {
  position: fixed;
  inset: 0;
  /* almost clear — catch clicks anywhere, dim lightly */
  background: rgba(0, 0, 0, 0.18);
  z-index: 1050; /* above content / tab; below fab-wrap (1100) so radial items stay clickable */
  opacity: 0;
  pointer-events: none;
}
.settings-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.settings-popup {
  position: fixed; top: 60px; right: 20px; width: 260px;
  padding: 6px 0; border-radius: 16px; z-index: 901;
  opacity: 0; pointer-events: none;
}
.settings-popup.show { pointer-events: auto; }
.settings-popup-head {
  padding: 10px 18px 4px; font-size: 11px; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.setting-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; font-size: 13px;
  /* no separators, one whole glass */
}
.setting-row:last-child { border-bottom: none; }
.setting-select {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: none;
  max-width: 130px;
}
.setting-select option { background: #121a2a; color: var(--text); }
.toggle {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.12); position: relative;
}
.toggle.on { background: var(--accent); }
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transform: translateX(var(--knob-x, 0px));
  transition: none; /* GSAP controls it */
}

/* Content & scroll */
.content {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/*
  Single shell, three panels: ALL stay in the render tree so backdrop-filter
  composites once. Inactive = opacity 0 + pointer-events none (NOT visibility:hidden,
  which skips frost compositing in Chromium).
*/
.tab-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: visible; /* always painted for frost warmup */
  background: transparent;
  z-index: 0;
  /* keep off-screen contribution tiny but non-zero for compositor */
  transform: translateZ(0);
}
.tab-page.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.tab-page.is-warming {
  opacity: 0.02 !important;
  pointer-events: none !important;
  z-index: 1;
}

.tab-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /* top gap matches bottom tab-bar offset (bottom: 18px) */
  padding: 18px 28px 110px 28px;
  scrollbar-width: none; /* hide scrollbar */
  scroll-behavior: auto; /* drag-scroll feels direct */
  /* inertial-like feel with smooth + gsap enter */
  touch-action: pan-y;
}
.tab-scroll.is-page-dragging {
  scroll-behavior: auto;
  cursor: none;
  user-select: none;
}

.tab-scroll::-webkit-scrollbar {
  display: none; /* hide for webkit */
  width: 0;
  height: 0;
}
.tab-scroll::-webkit-scrollbar-thumb {
  display: none;
}

/*
  Home: vertical scroll stages
  1) card rail (horizontal drag only on viewport)
  2) globe preview (damped scroll-in)
*/
.home-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.home-scroll::-webkit-scrollbar { display: none; }

.home-stage-cards {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* room for fixed down-cue + tab bar */
  padding: 28px 56px 120px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.home-viewport {
  width: 100%;
  max-width: 100%;
  height: 400px;
  min-height: 340px;
  overflow: visible;
  margin: 0 auto;
  position: relative;
  border-radius: 0;
  padding: 20px 0;
  touch-action: none;
  pointer-events: auto;
  background: transparent;
  z-index: 2;
  transform: none !important;
  filter: none !important;
}

/* —— Home signature: particles + perspective camera (GSAP quickTo) —— */
.home-sig {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* sit further below cards */
  margin: 118px auto 16px;
  padding: 22px 36px 18px;
  text-decoration: none !important;
  border: none;
  border-bottom: none !important;
  box-shadow: none;
  outline: none;
  background: transparent;
  cursor: none;
  z-index: 3;
  pointer-events: auto;
  /* hidden only until JS mounts; .is-ready forces visible */
  opacity: 0;
  isolation: isolate;
  /* stage perspective for viewpoint camera */
  perspective: 650px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.home-sig.is-ready {
  opacity: 1 !important;
}
body:not(.intro-active) .home-sig.is-ready {
  opacity: 1 !important;
}
.home-sig::before,
.home-sig::after {
  content: none !important;
  display: none !important;
}
.home-sig-glow,
.home-sig-underline {
  display: none !important;
}
.home-sig-outer {
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}
.home-sig-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.home-sig-particles {
  position: absolute;
  inset: -28px -48px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.home-sig-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(155, 185, 245, 0.95);
  box-shadow: 0 0 8px rgba(110, 160, 240, 0.7);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
body.light .home-sig-particle {
  background: rgba(36, 58, 110, 0.72);
  box-shadow: 0 0 6px rgba(40, 70, 140, 0.4);
}
.home-sig-text {
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: rgba(228, 236, 250, 0.78);
  white-space: nowrap;
  /* breath uses filter — not opacity (opacity fights char GSAP) */
  animation: home-sig-text-breath 4.4s ease-in-out infinite;
  transition: color 0.28s ease, text-shadow 0.28s ease;
}
/* per-char scatter (MYyBrZw) — inline-block required for y/rotation */
.home-sig-char {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 70%;
}
/* while shattered: pause breath, slightly bolder / larger */
.home-sig.is-shattered .home-sig-text {
  animation-play-state: paused;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.home-sig.is-shattered .home-sig-char {
  font-weight: 700;
}
body.light .home-sig-text {
  color: rgba(22, 30, 46, 0.68);
  animation-name: home-sig-text-breath-light;
}
.home-sig-name {
  font-weight: 700;
  color: rgba(245, 248, 255, 0.9);
  transition: color 0.28s ease, text-shadow 0.28s ease;
}
body.light .home-sig-name {
  color: rgba(14, 22, 36, 0.82);
}
.home-sig-at {
  opacity: 0.55;
  margin: 0 2px;
}
.home-sig-domain {
  opacity: 0.82;
  color: rgba(175, 210, 255, 0.88);
  transition: opacity 0.28s ease, color 0.28s ease, text-shadow 0.28s ease;
}
body.light .home-sig-domain {
  color: rgba(35, 75, 150, 0.78);
}
.home-sig:hover .home-sig-text,
.home-sig:focus-visible .home-sig-text {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(170, 210, 255, 0.55), 0 0 4px rgba(255, 255, 255, 0.35);
  animation-duration: 2.8s;
}
body.light .home-sig:hover .home-sig-text,
body.light .home-sig:focus-visible .home-sig-text {
  color: #0a101c;
  text-shadow: 0 0 10px rgba(80, 130, 220, 0.2);
}
.home-sig:hover .home-sig-name,
.home-sig:focus-visible .home-sig-name {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(180, 215, 255, 0.5);
}
body.light .home-sig:hover .home-sig-name {
  color: #060a12;
  text-shadow: none;
}
.home-sig:hover .home-sig-domain {
  opacity: 1;
  color: rgba(160, 215, 255, 1);
  text-shadow: 0 0 14px rgba(120, 190, 255, 0.55);
}
body.light .home-sig:hover .home-sig-domain {
  color: rgba(20, 70, 170, 0.95);
  text-shadow: none;
}
.home-sig:hover .home-sig-particle,
.home-sig:focus-visible .home-sig-particle {
  background: rgba(190, 215, 255, 1);
  box-shadow: 0 0 10px rgba(140, 190, 255, 0.85);
}
body.light .home-sig:hover .home-sig-particle {
  background: rgba(30, 55, 120, 0.9);
  box-shadow: 0 0 7px rgba(40, 80, 160, 0.5);
}
@keyframes home-sig-text-breath {
  0%, 100% {
    filter: brightness(0.92);
    text-shadow: 0 0 0 transparent;
  }
  50% {
    filter: brightness(1.08);
    text-shadow: 0 0 14px rgba(150, 195, 255, 0.35);
  }
}
@keyframes home-sig-text-breath-light {
  0%, 100% { filter: brightness(0.94); text-shadow: none; }
  50% { filter: brightness(1.06); text-shadow: none; }
}
body.intro-active .home-sig {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* GreenSock seamless loop stage — NO transform (breaks child backdrop-filter) */
.home-strip,
.home-strip--loop {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  touch-action: none;
  /* critical: no transform / filter on this ancestor of glass */
  transform: none !important;
  filter: none !important;
}
.home-strip--loop .home-card {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--home-card-h) / -2);
  /* left is set in px by JS layout — do NOT force left:50% (that stacked all cards) */
  left: 0;
  margin-left: 0;
  width: var(--home-card-w);
  height: var(--home-card-h);
  flex: none;
  pointer-events: auto;
  will-change: left, opacity;
}
/* drag hint removed — no "滑动预览 / Drag to explore" copy */

/* fixed above tab bar (tab: bottom 18 + h 40 + gap) — never overlaps */
.home-scroll-cue-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(18px + 40px + 36px);
  margin-left: -22px;
  width: 44px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  pointer-events: auto;
  cursor: none;
  z-index: 90;
  touch-action: manipulation;
  opacity: 1;
  visibility: visible;
  /* GSAP owns show/hide — avoid fighting CSS transitions */
  will-change: opacity, transform, filter;
}
/* only when home tab is active */
body:not(.intro-active) .tab-page[data-tab="home"]:not(.active) .home-scroll-cue-wrap,
.tab-page[data-tab="home"]:not(.active) #home-scroll-cue-wrap {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.home-scroll-cue-wrap.is-section-hidden {
  pointer-events: none;
}
.home-scroll-cue {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--tab-fill);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  pointer-events: none;
  position: relative;
  z-index: 2;
  /* ball + arrow move together from the start */
  animation: home-cue-bob 1.5s ease-in-out infinite;
}
.home-scroll-cue-wrap:hover .home-scroll-cue {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.28);
}
/* arrow locked dead-center on the ball — no independent motion */
.home-scroll-cue svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: 0;
  display: block;
  transform: translate(-50%, -50%);
  animation: none;
  pointer-events: none;
}
@keyframes home-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
/* pull arc removed */
.home-pull-arc,
.home-pull-track { display: none !important; }

/*
  Home cards: GSAP moves with `left` (not transform) so backdrop-filter works.
  Scale only .card-content. Magnet x/y only on .home-card-face.
*/
.home-card {
  width: var(--home-card-w);
  height: var(--home-card-h);
  padding: 0;
  position: absolute;
  overflow: visible;
  color: var(--text);
  box-sizing: border-box;
  z-index: 1;
  pointer-events: auto;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
  filter: none !important;
}
/* Flat home cards — NO gradient highlight, NO drop shadow */
.home-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-sizing: border-box;
  overflow: hidden;
  color: inherit;
  background: rgba(32, 36, 48, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.home-card.is-center .home-card-face {
  background: rgba(38, 42, 56, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none !important;
}
.home-card.is-side .home-card-face {
  background: rgba(40, 44, 56, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none !important;
}
body.light .home-card-face,
body.light .home-card.is-center .home-card-face,
body.light .home-card.is-side .home-card-face {
  color: #1a1d24 !important;
  border-color: rgba(15, 23, 42, 0.09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body.light .home-card-face {
  background: rgba(255, 255, 255, 0.72) !important;
}
body.light .home-card.is-center .home-card-face {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(15, 23, 42, 0.11) !important;
}
body.light .home-card.is-side .home-card-face {
  background: rgba(255, 255, 255, 0.48) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: rgba(26, 29, 36, 0.78) !important;
}
body.light .home-card .hc-name,
body.light .home-card .hc-loc,
body.light .home-card .hc-status,
body.light .home-card .hc-meta {
  color: inherit;
}
body.light .home-card .hc-meta {
  color: rgba(26, 29, 36, 0.55) !important;
}
body.light .home-card .hc-status {
  color: rgba(26, 29, 36, 0.5) !important;
}
body.light .home-card .hc-bar {
  background: rgba(15, 23, 42, 0.08) !important;
}
body.light .home-card.off .home-card-face,
body.light .home-card-face.off {
  opacity: 0.65;
}
.home-card .card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: inherit;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  filter: none !important;
  /* no scale here — size via card width/height */
  transform: none !important;
}
.home-card .hc-name,
.home-card .hc-loc,
.home-card .hc-status,
.home-card .hc-meta {
  filter: none !important;
}
.home-card.off .home-card-face,
.home-card-face.off { opacity: 0.55; }
.home-card.off { opacity: 1; }

/* pull-progress track under cue */
.home-pull-track {
  margin-top: 10px;
  width: 120px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.home-pull-track.show { opacity: 1; }
.home-pull-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.45);
}

/* Globe stage — tall adaptive globe + info rail pinned to screen-right */
.home-stage-globe {
  min-height: 100%;
  position: relative;
  display: block;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* Pure blur dim — no blue tint */
.home-globe-frost {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
  z-index: 0;
  pointer-events: none;
}
body.light .home-globe-frost {
  background: rgba(255, 255, 255, 0.22);
}
.home-globe-layout {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* children re-enable */
}
/* Globe full-bleed to all 4 screen edges; info panel floats above */
.home-globe-ball-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  pointer-events: auto;
  z-index: 1;
}
.home-globe-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  z-index: 2;
  pointer-events: auto;
}
.home-globe-mount canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto;
}
/* fallback sphere while globe loads / on error — monochrome, not blue */
.home-globe-ball {
  width: min(360px, 50vmin);
  height: min(360px, 50vmin);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.35), transparent 28%),
    radial-gradient(circle at 50% 55%, #c8c8d0 0%, #5a5a62 40%, #1a1a1e 72%, #08080a 100%);
  box-shadow:
    inset -18px -24px 40px rgba(0,0,0,0.5),
    0 16px 40px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 0;
  pointer-events: none;
}
.home-globe-ball.is-hidden {
  display: none !important;
}
.globe-error {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.globe-info-empty {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}
.gi-empty-sub {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.75;
}
.globe-info-detail {
  margin-top: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.gi-head strong {
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}
.gi-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.gi-badge.ok { color: var(--ok); background: rgba(61,220,151,0.15); }
.gi-badge.err { color: var(--err); background: rgba(255,107,107,0.15); }
.gi-sub { font-size: 10px; color: var(--muted); margin-bottom: 10px; word-break: break-all; }
.gi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.gi-grid div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
}
.gi-grid span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 2px;
}
.gi-grid .gi-wide { grid-column: 1 / -1; }
/*
  Info rail: slim vertical (desktop) | compact L/R horizontal (phone).
  No title / no drag handle bar.
*/
.home-globe-info {
  position: absolute;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate3d(0, -50%, 0);
  /* slightly wider / taller to fit density stepper + pickers */
  width: clamp(208px, 24vw, 252px);
  height: auto;
  min-height: 0;
  max-height: min(92vh, 820px);
  z-index: 5;
  pointer-events: auto;
  padding: 12px 11px;
  border-radius: 14px;
  background: rgba(14, 20, 34, 0.32) !important;
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: #f0f0f2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  /* pickers portal to body — panel can scroll if content grows */
  overflow-x: visible !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
}
.home-globe-info::-webkit-scrollbar { display: none !important; }
.hgi-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.hgi-col-node {
  flex: 1 1 auto;
  min-height: 0;
}
/* appearance controls — no divider lines */
.globe-controls {
  margin: 4px 0 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: visible;
}
.gc-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: visible;
}
.gc-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(200, 210, 230, 0.55);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.light .gc-label { color: rgba(20, 20, 24, 0.5); }
.gc-picker { position: relative; width: 100%; overflow: visible; z-index: 6; pointer-events: auto; }

/* hex density stepper (number box, not range bar) */
.gc-stepper {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  overflow: hidden;
  box-sizing: border-box;
}
body.light .gc-stepper {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(0, 0, 0, 0.08);
}
.gc-step-btn {
  flex: 0 0 34px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: none;
  opacity: 0.85;
}
.gc-step-btn:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
body.light .gc-step-btn:hover { background: rgba(0, 0, 0, 0.06); }
.gc-step-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: inherit;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 8px 4px;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: none;
}
.gc-step-input::-webkit-outer-spin-button,
.gc-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.light .gc-step-input {
  border-left-color: rgba(0, 0, 0, 0.06);
  border-right-color: rgba(0, 0, 0, 0.06);
}
.gc-picker-btn {
  position: relative;
  z-index: 7;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* frost glass — not solid plate */
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  color: inherit;
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
  cursor: none;
  text-align: left;
  pointer-events: auto !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.light .gc-picker-btn {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.gc-picker-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  background: #4a6cf7;
  border: 1px solid rgba(255,255,255,0.25);
}
.gc-picker-text { flex: 1; min-width: 0; }
.gc-picker-caret { opacity: 0.5; font-size: 10px; }
/* menus portaled to body — frosted glass (not opaque solid) */
.gc-picker-menu {
  position: fixed;
  z-index: 9500;
  width: 172px;
  border-radius: 14px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* translucent frost — see through blur */
  background: rgba(18, 24, 38, 0.32) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: none;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  margin: 0;
  box-sizing: border-box;
  /* override generic .glass solid fill if class present */
  --glass-fill-strong: rgba(18, 24, 38, 0.32);
}
body.light .gc-picker-menu {
  background: rgba(255, 255, 255, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.34);
}
.gc-picker-menu.glass {
  background: rgba(18, 24, 38, 0.32) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
body.light .gc-picker-menu.glass {
  background: rgba(255, 255, 255, 0.34) !important;
}
.gc-picker-menu[hidden] {
  display: none !important;
  pointer-events: none !important;
}
.gc-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  cursor: none;
  width: 100%;
  pointer-events: auto;
}
.gc-picker-opt:hover,
.gc-picker-opt.is-active {
  background: rgba(255, 255, 255, 0.12);
}
body.light .gc-picker-opt:hover,
body.light .gc-picker-opt.is-active {
  background: rgba(0, 0, 0, 0.06);
}
.gc-range {
  width: 100%;
  accent-color: rgba(110, 168, 254, 0.85);
  cursor: none;
  height: 4px;
  pointer-events: auto;
}
/* allow menus to escape panel clip */
.home-globe-info {
  overflow: visible !important;
}
body.light .home-globe-info {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(0, 0, 0, 0.08);
  color: #141418;
  box-shadow: none;
}
.home-globe-info::-webkit-scrollbar { display: none; }
.home-globe-info h2 {
  font-size: 14px;
  font-weight: 650;
  margin: 0 0 4px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  color: inherit;
}
.home-globe-info p {
  font-size: 11px;
  color: rgba(240, 240, 242, 0.55);
  line-height: 1.4;
  margin: 0 0 10px;
  flex-shrink: 0;
}
body.light .home-globe-info p {
  color: rgba(20, 20, 24, 0.5);
}
.home-globe-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.home-globe-meta div {
  padding: 6px 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
}
body.light .home-globe-meta div {
  background: rgba(0, 0, 0, 0.04);
}
.home-globe-meta span {
  display: block;
  color: rgba(240, 240, 242, 0.45);
  font-size: 9px;
  margin-bottom: 2px;
  letter-spacing: 0.04em;
}
body.light .home-globe-meta span {
  color: rgba(20, 20, 24, 0.45);
}
.home-globe-meta strong {
  font-size: 13px;
  color: inherit;
}
.globe-info-empty {
  margin-top: 4px !important;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
  flex: 0 0 auto !important;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(240, 240, 242, 0.5);
}
body.light .globe-info-empty {
  color: rgba(20, 20, 24, 0.5);
}
.globe-info-detail {
  margin-top: 8px !important;
  flex: 0 0 auto !important;
  gap: 0;
}
.gi-grid div {
  background: rgba(255, 255, 255, 0.06) !important;
}
body.light .gi-grid div {
  background: rgba(0, 0, 0, 0.04) !important;
}
@media (max-width: 700px) {
  .home-globe-ball-wrap {
    inset: 0;
    bottom: 0;
  }
  /* short bottom dock — no internal scroll; menus are position:fixed */
  .home-globe-info {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 70px !important;
    transform: none !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .hgi-col-opts {
    flex: 0 1 42%;
    min-width: 0;
    max-width: 46%;
    gap: 4px !important;
    overflow: visible !important;
  }
  .hgi-col-node {
    flex: 1 1 58%;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 6px;
    overflow: visible !important;
  }
  body.light .hgi-col-node {
    border-left-color: rgba(0, 0, 0, 0.08);
  }
  /* meta ultra compact so bar height ≈ node detail */
  .home-globe-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
    margin: 0 !important;
  }
  .home-globe-meta div {
    padding: 3px 5px !important;
    font-size: 9px !important;
    border-radius: 6px !important;
  }
  .home-globe-meta strong {
    font-size: 11px !important;
  }
  .home-globe-meta span {
    font-size: 8px !important;
    margin-bottom: 0 !important;
  }
  .globe-controls {
    margin: 0 !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  .gc-row {
    gap: 1px !important;
    overflow: visible !important;
  }
  .gc-picker { overflow: visible !important; }
  .gc-label { font-size: 8px !important; }
  .gc-picker-btn {
    padding: 3px 5px !important;
    font-size: 10px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
  }
  .gc-range { height: 3px !important; margin: 2px 0 !important; }
  .globe-info-empty {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .globe-info-detail { margin: 0 !important; }
  .gi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  .gi-grid div { padding: 3px 5px !important; font-size: 10px !important; border-radius: 6px !important; }
  .gi-head { margin-bottom: 2px !important; }
  .gi-head strong { font-size: 11px !important; }
  .gi-sub { font-size: 8px !important; margin-bottom: 4px !important; }
  .gi-badge { font-size: 9px !important; padding: 1px 5px !important; }
}

.hc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  color: var(--muted);
}
.hc-loc {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color: var(--text);
}
.hc-status {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.hc-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 5px 0 3px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-meta { font-size: 9px; color: var(--muted); word-break: break-all; }
.hc-bar {
  height: 3.5px;
  background: rgba(148,163,184,0.25);
  border-radius: 99px;
  margin-top: 5px;
  overflow: hidden;
}
.hc-bar > span {
  display: block;
  height: 100%;
  background: var(--muted);
  border-radius: 99px;
}
.home-foot {
  font-size: 9px;
  color: #475569;
  margin-top: 8px;
  text-align: center;
  opacity: 0.85;
}

/* (globe removed entirely) */

.boot-error {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(255,107,107,0.15); border: 1px solid rgba(255,107,107,0.4);
  color: #ffb4b4; padding: 12px 20px; border-radius: 12px;
  font-size: 13px; z-index: 99999; max-width: 90vw;
}

/* sticky only wraps the pill — top inset matches bottom tab-bar (18px) */
.servers-toolbar { 
  display: flex; 
  justify-content: center; 
  margin-bottom: 18px; 
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 0 0 8px;
  border-radius: 0;
}

.filters {
  display: flex;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background: transparent;
}

.filter-bar {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 20px;
  width: 100%;
  height: 40px;
  align-items: stretch;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--tab-fill) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.06) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.filter-bar.dragging {
  overflow: visible;
}
.filter-bar.dragging .filter-indicator {
  opacity: 1;
  background: var(--ind-bg-press);
}

.filter-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: 12px;
  background: var(--ind-bg);
  border: none;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  transform-origin: center center;
}

.filter-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  cursor: none;
  user-select: none;
  white-space: nowrap;
}
.filter-btn.active {
  color: var(--text);
}

.filter-btn, .settings-btn, .toggle, .tab-bar, .tab-btn {
  cursor: none;
}


.stats-row {
  display: flex; justify-content: center; gap: clamp(12px, 2vw, 20px);
  margin-bottom: 36px; flex-wrap: wrap;
}

#region-panel {
  width: 100%;
  background: transparent;
  /* never set opacity / will-change / filter / transform here —
     any of those on an ancestor disables child backdrop-filter (Chromium) */
}
.stat-cell {
  padding: 12px 18px;
  border-radius: 14px;
  text-align: center;
  min-width: 84px;
  overflow: hidden;
  position: relative;
  background: var(--glass-fill-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  /* no transform on glass host */
}
.stat-num { font-size: 20px; font-weight: 700; }
.stat-num.ok { color: var(--ok); }
.stat-num.err { color: var(--err); }
.stat-lbl { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Cards: 一行最多 2 个。单卡时不 1fr 撑满，保持原有卡片宽度 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(var(--card-min-w), var(--card-pref-w, 420px)));
  justify-content: center;
  justify-items: stretch;
  gap: var(--card-gap);
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 32px;
  padding-top: 10px;
  overflow: visible;
}
.cards-grid > .server-card {
  width: 100%;
  max-width: var(--card-pref-w, 420px);
  justify-self: center;
}

/*
  Server cards: glass plate is magnet target (GSAP x/y).
  Occasional Chromium blur flicker is acceptable for real magnet feel.
*/
.server-card {
  min-width: 0;
  display: block;
  min-height: 360px;
  position: relative;
  border-radius: var(--radius);
  overflow: visible; /* allow magnet nudge outside box */
  /* NO border/shadow on shell — residual "ghost" border when magnet moves inner */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  letter-spacing: 0.025em;
  padding: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1;
  filter: none !important;
}
.server-card-inner {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  height: 100%;
  width: 100%;
  padding: 24px 18px 22px;
  box-sizing: border-box;
  border-radius: inherit;
  /* flat glass — no gradient highlight, no outer shadow */
  background: var(--glass-fill-strong) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
  overflow: hidden;
  will-change: transform;
  filter: none !important;
}
.server-card.offline {
  opacity: 0.55;
}
body.light .server-card {
  border: none !important;
}
body.light .server-card-inner {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 12px;
}
.card-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.card-flag {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  /* CRITICAL: parent .server-card letter-spacing breaks 🇯🇵 → "JP" */
  letter-spacing: normal !important;
  /* Apple Color Emoji when installed (macOS/iOS); else Segoe / Noto — no redistributable Apple font */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant-emoji: emoji;
  font-feature-settings: "liga" off;
  /* isolate from glass / transform quirks */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}
.card-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }

.card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 14px;
  align-items: start;
  flex: 1;
}

.card-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}
body.light .card-foot {
  border-top-color: rgba(15, 23, 42, 0.08);
}
.card-vnstat {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.status-dots { display: flex; gap: 4px; }
.dot-v4, .dot-v6 {
  font-size: 9px; padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--muted);
}
.dot-v4.on, .dot-v6.on { background: rgba(61,220,151,0.2); color: var(--ok); }

.card-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}
.card-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.section-title {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 2px;
}

.meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; gap: 12px; line-height: 1.85;
  letter-spacing: 0.02em;
}
.meta-row .label { color: var(--muted); flex-shrink: 0; min-width: 36px; letter-spacing: 0.03em; }
.meta-row .value { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.metric { margin-bottom: 4px; }
.metric .row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-bottom: 5px;
  letter-spacing: 0.025em;
}
.metric .row .pct { color: var(--text); font-weight: 500; }
.bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
body.light .bar { background: rgba(15, 23, 42, 0.08); }
.bar-fill { height: 100%; border-radius: 3px; width: 0; }

.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 1; }
.proc-cell {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  overflow: hidden;
  /* light tint only — no heavy nested blur (avoids mud + stacking bugs) */
  background: var(--proc-tcp-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.light .proc-cell {
  border-color: rgba(15, 23, 42, 0.05);
}
.proc-tcp  { background: var(--proc-tcp-bg); }
.proc-udp  { background: var(--proc-udp-bg); }
.proc-proc { background: var(--proc-proc-bg); }
.proc-thread { background: var(--proc-thread-bg); }
.proc-num { display: block; font-size: 14px; font-weight: 600; }
.proc-tcp .proc-num  { color: var(--proc-tcp-fg); }
.proc-udp .proc-num  { color: var(--proc-udp-fg); }
.proc-proc .proc-num { color: var(--proc-proc-fg); }
.proc-thread .proc-num { color: var(--proc-thread-fg); }
.proc-lbl { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; letter-spacing: 0.04em; }

.offline-msg {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 40px 0; margin: auto;
}

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 600;
}
.badge.ok { background: rgba(61,220,151,0.18); color: var(--ok); }
.badge.warn { background: rgba(255,200,87,0.18); color: var(--warn); }
.badge.err { background: rgba(255,107,107,0.18); color: var(--err); }

/* Analytics — vertical scroll blocks */
.analytics-block {
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  /* visible so magnet x/y nudge isn't clipped */
  overflow: visible;
  will-change: transform;
}

/* Conservative drag panels (globe info / settings) */
.is-draggable-panel {
  touch-action: none;
}
.is-draggable-panel.is-dragging {
  cursor: none;
  user-select: none;
  z-index: 80 !important;
  transition: none !important;
}
#home-globe-info.is-draggable-panel h2,
#home-globe-info.is-draggable-panel [data-i18n-globe-title] {
  cursor: none;
}
/* drag handle bar removed */
#home-globe-info.is-draggable-panel::before {
  content: none !important;
  display: none !important;
}
.analytics-block h3 {
  font-size: 14px; font-weight: 600; margin-bottom: 18px; color: var(--text);
}
.analytics-block:last-child { margin-bottom: 40px; }

.h-bars { display: flex; flex-direction: column; gap: 12px; }
.h-bar-row { display: flex; align-items: center; gap: 12px; }
.h-bar-label { width: 72px; font-size: 12px; color: var(--muted); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.h-bar-fill { height: 100%; border-radius: 4px; width: 0; }
.h-bar-pct { width: 36px; font-size: 12px; text-align: right; }

.data-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.data-table th {
  text-align: left; padding: 10px 12px;
  color: var(--muted); font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.data-table tr:hover td { background: rgba(255,255,255,0.03); }
.data-table tr.row-off td { opacity: 0.45; }

/*
  Standardized frosted glass (css.glass–inspired, Chromium-stable)
  - solid-ish fill + blur(16px) saturate(1.4)
  - NEVER put CSS filter: on glass (blurs own text)
  - avoid transform on ancestors of backdrop-filter when possible
  - one blur layer per surface
*/
.glass,
.glass-surface {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* no filter: — that would blur text inside */
}
.home-globe-info.glass {
  position: absolute !important;
  background: rgba(14, 20, 34, 0.3) !important;
  backdrop-filter: blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15) !important;
  box-shadow: none !important;
}
body.light .home-globe-info.glass {
  background: rgba(255, 255, 255, 0.32) !important;
}

/* Tab bar — slightly lighter plate */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 24px;
  width: min(248px, calc(100% - 100px));
  height: 40px;
  align-items: stretch;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  z-index: 100;
  box-sizing: border-box;
  transform-origin: center center;

  background: var(--tab-fill) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.06) !important;
  box-shadow: none;
}

.tab-glass-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: transparent;
}

/* long-press / drag: indicator can exceed backboard size */
.tab-bar.dragging {
  overflow: visible;
}
.tab-bar.dragging .tab-indicator {
  opacity: 1;
  background: var(--ind-bg-press);
}

.tab-indicator {
  position: absolute;
  top: 3px;
  left: 4px;
  height: calc(100% - 6px);
  border-radius: 14px;
  background: var(--ind-bg);
  border: none;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
  will-change: left, width, transform;
  /* solid tint only — no nested backdrop-filter on indicator */
  transform-origin: center center;
  box-shadow: none;
}

.tab-btn {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: transparent;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.tab-btn.active { color: var(--text); }

/* ===== Floating server music player (compact + optional liquid glass) ===== */
.music-player {
  position: fixed;
  left: 16px;
  bottom: calc(18px + 40px + 20px);
  z-index: 9600;
  width: min(300px, calc(100vw - 28px));
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 20, 34, 0.3) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: none !important;
  color: var(--text, #f0f0f2);
  pointer-events: auto;
  cursor: none;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  isolation: isolate;
  /* never stay invisible after intro / bad inline styles */
  opacity: 1;
  visibility: visible;
}
body.light .music-player {
  background: rgba(255, 255, 255, 0.34) !important;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none !important;
}
body.intro-active .music-player {
  opacity: 0 !important;
  pointer-events: none !important;
}
body:not(.intro-active) .music-player {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.music-player.is-dragging {
  opacity: 0.98;
  box-shadow: none !important;
  will-change: transform, left, top;
}
.music-player.is-throwing {
  will-change: left, top, transform;
  pointer-events: none;
}

.mp-drag {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}
.mp-cover-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.mp-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mp-cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9aa3b5);
  opacity: 0.7;
}
.mp-cover-ph[hidden],
.mp-cover[hidden] { display: none !important; }
.mp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.mp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mp-pool {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 90, 90, 0.2);
  color: #ffb4b4;
}
.mp-pool.is-special {
  background: rgba(255, 80, 80, 0.22);
  color: #ffc9c9;
}
.mp-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* controls + short progress on one row */
.mp-controls-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mp-progress {
  flex: 1 1 auto;
  min-width: 48px;
  max-width: 96px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  cursor: none;
  margin: 0 2px;
}
.mp-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.1s linear;
}
body.light .mp-progress-fill { background: rgba(30, 40, 60, 0.45); }
.mp-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: none;
  opacity: 0.9;
}
.mp-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.mp-btn-main {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
}
.mp-status {
  font-size: 9px;
  color: var(--muted, #9aa3b5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  opacity: 0.85;
}

.mp-btn[data-mode="random"] { color: rgba(255, 255, 255, 0.72); }
body.light .mp-btn[data-mode="random"] { color: rgba(20, 24, 36, 0.65); }
.mp-btn[data-mode="single"] { color: #ffc98a; }
.mp-btn[data-mode="list"] { color: inherit; }

/* global emoji surfaces (home cards / analytics use same stack) */
.hc-loc,
.gsp-loc,
#gi-name {
  font-family: var(--font), var(--font-emoji);
}

/* emoji rain — special calendar days, ~10s */
.emoji-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 19900;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.55s ease;
}
.emoji-rain-layer.is-fading { opacity: 0; }
.emoji-rain-item {
  position: absolute;
  top: -8vh;
  font-family: var(--font-emoji) !important;
  letter-spacing: normal !important;
  animation-name: emoji-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes emoji-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate3d(12px, 110vh, 0) rotate(28deg); opacity: 0.85; }
}

@media (max-width: 700px) {
  .music-player {
    width: min(280px, calc(100vw - 20px));
  }
  .mp-cover-wrap {
    width: 64px;
    height: 64px;
  }
  .mp-progress { max-width: 72px; }
}

/* ===== Globe showcase / kiosk mode ===== */
/* same transparent frost as bottom-right settings .fab — no heavy tint */
.globe-showcase-btn,
.globe-showcase-exit {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9800;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  color: #f0f0f4;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: none;
  pointer-events: auto !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.globe-showcase-btn svg,
.globe-showcase-exit svg {
  display: block;
  width: 17px;
  height: 17px;
  pointer-events: none;
}
body.light .globe-showcase-btn,
body.light .globe-showcase-exit {
  background: rgba(20, 20, 24, 0.14) !important;
  border-color: rgba(0, 0, 0, 0.18);
  color: #141418;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}
.globe-showcase-btn:hover,
.globe-showcase-exit:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18) !important;
}
body.light .globe-showcase-btn:hover,
body.light .globe-showcase-exit:hover {
  border-color: rgba(0, 0, 0, 0.28);
  background: rgba(20, 20, 24, 0.18) !important;
}
.globe-showcase-btn[hidden],
.globe-showcase-exit[hidden] {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
.globe-showcase-exit {
  z-index: 12050;
}

.globe-showcase-panel {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 11900;
  width: min(420px, calc(100vw - 32px));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 20, 34, 0.28) !important;
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  box-shadow: none !important;
  color: var(--text, #f0f0f2);
  pointer-events: auto;
  padding: 14px 16px;
}
body.light .globe-showcase-panel {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(0, 0, 0, 0.08);
}
.gsp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.gsp-loc { font-size: 13px; opacity: 0.9; }
.gsp-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.gsp-badge.ok { color: var(--ok, #3ddc97); background: rgba(61, 220, 151, 0.15); }
.gsp-badge.err { color: var(--err, #ff6b6b); background: rgba(255, 107, 107, 0.15); }
.gsp-name {
  font-size: 18px;
  font-weight: 650;
  margin-bottom: 2px;
}
.gsp-sub {
  font-size: 11px;
  color: var(--muted, #9aa3b5);
  margin-bottom: 10px;
  word-break: break-all;
}
.gsp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gsp-grid div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.gsp-grid span {
  display: block;
  font-size: 10px;
  color: var(--muted, #9aa3b5);
  margin-bottom: 2px;
}
.gsp-grid .gsp-wide { grid-column: 1 / -1; }
.gsp-foot {
  display: none !important; /* no n/m · Xs carousel label */
}

body.globe-showcase-on .home-stage-globe.is-showcase .home-globe-ball-wrap {
  inset: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
/* keep frost blur, deeper dim */
body.globe-showcase-on .home-globe-frost {
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: rgba(0, 0, 0, 0.58) !important;
  backdrop-filter: blur(20px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.02) !important;
}
body.light.globe-showcase-on .home-globe-frost {
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(20px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.02) !important;
}
/* wallpaper stays, darkened further */
body.globe-showcase-on #wallpaper {
  filter: brightness(0.48);
}
body.light.globe-showcase-on #wallpaper {
  filter: brightness(0.62);
}
/* hide floating player in globe showcase — use top strip instead */
body.globe-showcase-on #music-player {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.globe-showcase-on .globe-showcase-btn {
  display: none !important;
}

/* fixed long music bar above globe (showcase) */
.mp-showcase-bar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12200;
  width: min(720px, calc(100vw - 96px));
  height: 52px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 20, 34, 0.28) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: none !important;
  color: var(--text, #f0f0f2);
  pointer-events: auto;
  box-sizing: border-box;
  opacity: 0;
}
body.light .mp-showcase-bar {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a22;
}
body.globe-showcase-on .mp-showcase-bar.is-on,
.mp-showcase-bar.is-on:not([hidden]) {
  display: flex;
}
.mp-showcase-bar[hidden] {
  display: none !important;
}
.mp-sc-cover-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mp-sc-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mp-sc-cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9aa3b5);
  opacity: 0.7;
}
.mp-sc-cover[hidden],
.mp-sc-cover-ph[hidden] { display: none !important; }
.mp-sc-meta {
  flex: 0 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}
.mp-sc-title {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-sc-sub {
  font-size: 10px;
  color: var(--muted, #9aa3b5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.9;
}
.mp-sc-sub.is-playing { opacity: 1; }
.mp-sc-progress {
  flex: 1 1 auto;
  min-width: 64px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  cursor: none;
}
.mp-sc-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.1s linear;
}
body.light .mp-sc-progress-fill { background: rgba(30, 40, 60, 0.45); }
.mp-sc-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.mp-sc-controls .mp-btn {
  width: 30px;
  height: 30px;
}
.mp-sc-controls .mp-btn-main {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
@media (max-width: 640px) {
  .mp-showcase-bar {
    width: calc(100vw - 72px);
    height: 48px;
    top: 12px;
    gap: 8px;
    padding: 5px 8px 5px 5px;
  }
  .mp-sc-meta { flex-basis: 100px; max-width: 28vw; }
  .mp-sc-sub { display: none; }
}
/* force-hide parameter / settings chrome in showcase */
body.globe-showcase-on #home-globe-info,
body.globe-showcase-on .home-globe-info,
body.globe-showcase-on #fab-wrap,
body.globe-showcase-on .gc-picker-menu,
body.globe-showcase-on #settings-overlay,
body.globe-showcase-on .settings-overlay,
body.globe-showcase-on #home-scroll-cue-wrap,
body.globe-showcase-on #home-stage-cards {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* lock navigation while showcase / music fullscreen */
body.globe-showcase-lock .tab-bar,
body.globe-showcase-on .tab-bar,
body.page-nav-lock .tab-bar,
body.music-fs-on .tab-bar {
  pointer-events: none !important;
  visibility: hidden !important;
}
body.globe-showcase-lock #fab-wrap,
body.globe-showcase-on #fab-wrap,
body.page-nav-lock #fab-wrap,
body.music-fs-on #fab-wrap {
  pointer-events: none !important;
  display: none !important;
}
body.globe-showcase-lock #home-scroll,
body.globe-showcase-on #home-scroll,
body.page-nav-lock #home-scroll,
body.music-fs-on #home-scroll {
  overflow: hidden !important;
  touch-action: none;
}

/* ===== Music player fullscreen ===== */
.mp-fs-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}
.mp-fs-btn svg { display: block; pointer-events: none; }
.mp-fs-btn:hover { background: rgba(255, 255, 255, 0.14); }

/* ===== Music fullscreen — blur glass stage (opaque base so wallpaper never peeks) ===== */
.mp-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: #0a0e14; /* hard underlay — no wallpaper flash during cover/refresh */
  isolation: isolate;
}
body.light .mp-fs-overlay {
  background: #e8eaef;
}
body.music-fs-on .mp-fs-overlay {
  display: flex;
  pointer-events: auto;
}
/* hide app chrome under FS */
body.music-fs-on .app,
body.music-fs-on .tab-bar,
body.music-fs-on #fab-wrap,
body.music-fs-on .mp-showcase-bar,
body.music-fs-on .globe-showcase-btn,
body.music-fs-on .globe-showcase-exit,
body.music-fs-on .globe-showcase-panel {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* wallpaper fully masked — never sample/show during FS */
body.music-fs-on #wallpaper {
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: 0;
}
/* solid base plate (always on) + optional cover blur above */
.mp-fs-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0a0e14;
  pointer-events: none;
}
body.light .mp-fs-base {
  background: #e8eaef;
}
/* cover as soft blurred field — A/B layers for crossfade on track change */
.mp-fs-bg,
.mp-fs-bg-b {
  position: absolute;
  inset: -12%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  filter: blur(48px) brightness(0.45) saturate(1.05);
  transform: scale(1.14);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  will-change: opacity, transform, background-image;
}
.mp-fs-bg-b {
  opacity: 0;
  z-index: 0;
}
body.light .mp-fs-bg,
body.light .mp-fs-bg-b {
  filter: blur(48px) brightness(0.78) saturate(1.05);
}
/* frosted veil — always present, no has-cover opacity flip */
.mp-fs-frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 14, 24, 0.42);
  backdrop-filter: blur(36px) saturate(1.15);
  -webkit-backdrop-filter: blur(36px) saturate(1.15);
  pointer-events: none;
}
body.light .mp-fs-frost {
  background: rgba(255, 255, 255, 0.36);
}
.mp-fs-overlay.has-cover .mp-fs-frost {
  background: rgba(8, 12, 20, 0.32);
  backdrop-filter: blur(42px) saturate(1.2);
  -webkit-backdrop-filter: blur(42px) saturate(1.2);
}
body.light .mp-fs-overlay.has-cover .mp-fs-frost {
  background: rgba(255, 255, 255, 0.28);
}
.mp-fs-exit {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 24, 38, 0.28);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  color: var(--text, #f0f0f2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: none;
}
body.light .mp-fs-exit {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a22;
}
/* hero player card — glass like reference (blur, not solid + gradient) */
.mp-fs-card {
  position: relative;
  z-index: 3;
  width: min(400px, calc(100vw - 36px));
  padding: 28px 26px 24px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(22, 28, 40, 0.22) !important;
  backdrop-filter: blur(32px) saturate(1.25);
  -webkit-backdrop-filter: blur(32px) saturate(1.25);
  color: var(--text, #f0f0f2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: none !important;
  isolation: isolate;
  overflow: hidden;
}
/* no highlight gradient wash */
.mp-fs-card::before {
  display: none !important;
  content: none !important;
}
.mp-fs-card > * {
  position: relative;
  z-index: 1;
}
body.light .mp-fs-card {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45);
  color: #1a1a22;
  box-shadow: none !important;
}
/* cover stage: mask + slight img scale kills subpixel edge lines */
.mp-fs-cover-stage {
  width: min(300px, 68vw);
  height: min(300px, 68vw);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  flex-shrink: 0;
  /* chrome radius anti-alias / edge bleed fix */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  transform: translateZ(0);
}
.mp-fs-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* overscan so scaled/filtered edges never show hairlines */
  transform: scale(1.045);
  transform-origin: center center;
  backface-visibility: hidden;
  image-rendering: auto;
  pointer-events: none;
}
.mp-fs-cover[hidden] { display: none !important; }
.mp-fs-cover-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #9aa3b5);
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.04);
  border: none;
}
.mp-fs-cover-ph[hidden] { display: none !important; }
.mp-fs-meta {
  width: 100%;
  text-align: center;
  min-width: 0;
  padding: 0 4px;
}
.mp-fs-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-fs-artist {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted, #9aa3b5);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-fs-artist[hidden] { display: none !important; }
.mp-fs-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}
.mp-fs-controls .mp-btn {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.mp-fs-controls .mp-btn-main {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
}
body.light .mp-fs-controls .mp-btn-main {
  background: rgba(20, 28, 48, 0.1);
}
.mp-fs-progress {
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  cursor: none;
}
.mp-fs-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.62);
  transition: width 0.12s linear;
}
body.light .mp-fs-progress-fill { background: rgba(30, 40, 60, 0.5); }
body.music-fs-on #music-player {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* client SMTC — same glass border as normal (no blue accent) */
.music-player.is-client {
  border-color: rgba(255, 255, 255, 0.14);
}
.music-player.is-client .mp-status {
  color: var(--muted, #9aa3b5);
  opacity: 1;
}
body.light .music-player.is-client {
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .music-player.is-client .mp-status {
  color: var(--muted, #5a6478);
}
.mp-sc-sub.is-preferred {
  color: var(--muted, #9aa3b5) !important;
}
body.light .mp-sc-sub.is-preferred {
  color: var(--muted, #5a6478) !important;
}
/* still hide floating strip when globe showcase uses top bar */
body.globe-showcase-on.client-media-on #music-player {
  display: none !important;
}

/* FAB: gear slightly larger than radial items; items = previous gear size */
.fab-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1100;
}
/* gear slightly larger; items = previous gear size */
.fab {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  color: #f0f0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  transition: background 0.2s, border-color 0.2s, color 0.2s, backdrop-filter 0.2s;
}
body.light .fab {
  background: rgba(20, 20, 24, 0.14);
  border-color: rgba(0, 0, 0, 0.18);
  color: #141418;
}
.fab:hover { border-color: rgba(255, 255, 255, 0.35); }
.fab svg { width: 17px; height: 17px; }
.fab-item {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  /* OFF default: fully transparent, no blur */
  border: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(240, 240, 244, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  box-shadow: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s, backdrop-filter 0.18s;
}
body.light .fab-item {
  color: rgba(20, 20, 24, 0.7);
}
.fab-item svg { width: 15px; height: 15px; }
/* ON: frosted glass + white (dark mode) / black (light mode) */
.fab-item.active {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
body.light .fab-item.active {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(20, 20, 24, 0.16);
  color: #111;
}
/* OFF stays transparent even on hover */
.fab-item:not(.active):hover {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}
body.light .fab-item:not(.active):hover {
  color: #111;
}

@media (max-width: 900px) {
  :root {
    --card-min-w: 260px;
    --card-pref-w: 400px;
  }
  /* still prefer fixed card width when only one column fits */
  .cards-grid {
    grid-template-columns: minmax(var(--card-min-w), var(--card-pref-w));
    justify-content: center;
    max-width: 100%;
  }
  .card-body { grid-template-columns: 1fr; }
  .tab-scroll { padding: 12px 16px 100px; }
}
@media (max-width: 500px) {
  :root {
    --card-min-w: 240px;
    --card-pref-w: min(400px, 100%);
  }
  .cards-grid {
    grid-template-columns: minmax(0, var(--card-pref-w));
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .data-table { font-size: 11px; }
  .data-table th, .data-table td { padding: 8px 6px; }
}