/* ============================================================
   Globe Connect v5 visual system
   Native reinterpretation of the 21st.dev Top 10 references:
   Sidebar / Expandable Tabs / Spline / Aurora / Timeline /
   Tubelight Navbar / Sparkles / Scroll Hero / Dock / Footer.
   ============================================================ */

:root {
  --gc5-bg: #05070a;
  --gc5-bg-soft: #0a0e14;
  --gc5-panel: rgba(13, 18, 27, .78);
  --gc5-panel-solid: #0d121b;
  --gc5-panel-raised: rgba(20, 27, 39, .86);
  --gc5-line: rgba(173, 205, 255, .14);
  --gc5-line-strong: rgba(173, 205, 255, .25);
  --gc5-text: #f2f6fb;
  --gc5-muted: #8994a7;
  --gc5-dim: #5e6879;
  --gc5-cyan: #75ddff;
  --gc5-blue: #6678ff;
  --gc5-lime: #d9ff54;
  --gc5-violet: #b98cff;
  --gc5-red: #ff8b8b;
  --gc5-radius-xl: 34px;
  --gc5-radius-lg: 24px;
  --gc5-radius-md: 16px;
  --gc5-shadow: 0 28px 80px rgba(0, 0, 0, .48);
  --gc5-font-display: Georgia, "Times New Roman", serif;
  --gc5-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--gc5-bg); }
body.gc-v5 {
  margin: 0;
  color: var(--gc5-text);
  background: var(--gc5-bg);
  font-family: var(--gc5-font-ui);
}
body.gc-v5::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 8%, rgba(49, 121, 171, .24), transparent 28%),
    radial-gradient(circle at 84% 4%, rgba(109, 84, 203, .18), transparent 30%),
    radial-gradient(circle at 55% 110%, rgba(101, 127, 255, .16), transparent 42%),
    linear-gradient(145deg, #05070a, #080d14 56%, #030508);
}
body.gc-v5::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.gc-v5 a,
.gc-v5 button,
.gc-v5 input,
.gc-v5 textarea,
.gc-v5 select { font-family: var(--gc5-font-ui); }
.gc-v5 :focus-visible {
  outline: 2px solid var(--gc5-cyan);
  outline-offset: 3px;
}
.gc-v5 ::selection { color: #071014; background: var(--gc5-cyan); }
.gc-v5 ::-webkit-scrollbar { width: 10px; height: 10px; }
.gc-v5 ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .025); }
.gc-v5 ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(151, 178, 216, .3); background-clip: padding-box; }

[data-visual="v5"] {
  position: relative;
  min-height: 100dvh;
  color: var(--gc5-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(75, 135, 179, .13), transparent 28%),
    linear-gradient(180deg, #06090e 0%, #080c12 60%, #05070a 100%);
}
[data-visual="v5"] .gc5-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
[data-visual="v5"] .gc5-atmosphere::before,
[data-visual="v5"] .gc5-atmosphere::after,
[data-visual="v5"] .gc5-atmosphere i {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .25;
  will-change: transform;
}
[data-visual="v5"] .gc5-atmosphere::before {
  top: -18%;
  left: 6%;
  width: 42vw;
  height: 42vw;
  background: rgba(61, 167, 207, .42);
  animation: gc5AuroraA 18s ease-in-out infinite alternate;
}
[data-visual="v5"] .gc5-atmosphere::after {
  top: 14%;
  right: -12%;
  width: 38vw;
  height: 38vw;
  background: rgba(105, 86, 226, .34);
  animation: gc5AuroraB 22s ease-in-out infinite alternate;
}
[data-visual="v5"] .gc5-atmosphere i:first-child {
  bottom: -24%;
  left: 38%;
  width: 44vw;
  height: 44vw;
  background: rgba(86, 121, 255, .22);
  animation: gc5AuroraC 25s ease-in-out infinite alternate;
}
[data-visual="v5"] .gc5-atmosphere i:last-child {
  top: 34%;
  left: 43%;
  width: 20vw;
  height: 20vw;
  background: rgba(217, 255, 84, .09);
  animation: gc5AuroraA 14s ease-in-out infinite alternate-reverse;
}
[data-visual="v5"] .gc21-b-noise { z-index: 1; opacity: .1; mix-blend-mode: screen; }
[data-visual="v5"] .gc21-b-nav,
[data-visual="v5"] .gc21-b-main { position: relative; z-index: 3; }
/* BUG 修复：v5 导航浮于欢迎屏之上（欢迎屏 z-index 9990），欢迎屏不再拦截导航点击 */
[data-visual="v5"] .gc21-b-nav { z-index: 10040; }
/* BUG 修复：解除 appShell 的 isolation:isolate 创建的独立层叠上下文，否则导航 z-index 被困在壳内、永远低于欢迎屏，真实点击仍被欢迎屏拦截 */
[data-visual="v5"].gc21-b-shell { isolation: auto; }

/* ---------- Welcome: Scroll Media Expansion ---------- */
.gc-v5 .welcome-screen {
  /* BUG 修复：v5 欢迎屏低于导航(10040)且低于 modal(10050)，不拦截导航 */
  z-index: 9990;
  /* BUG 修复：欢迎屏不拦截页面点击（pointer-events 穿透），仅按钮区可交互 */
  pointer-events: none;
  color: #f6fbff;
  background:
    radial-gradient(circle at 50% 38%, rgba(76, 151, 183, .2), transparent 34%),
    radial-gradient(circle at 72% 8%, rgba(97, 80, 205, .16), transparent 31%),
    linear-gradient(145deg, #030609, #081018 56%, #030507);
}
.gc-v5 .welcome-screen .ws-actions,
.gc-v5 .welcome-screen .ws-skip { pointer-events: auto; }
.gc-v5 .welcome-screen::before {
  z-index: 6;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(137, 224, 255, .17), transparent 26%),
    linear-gradient(90deg, rgba(2, 5, 8, .96), rgba(2, 5, 8, .22) 22%, transparent 45%, transparent 67%, rgba(2, 5, 8, .72)),
    linear-gradient(180deg, rgba(2, 5, 8, .48), transparent 30%, rgba(2, 5, 8, .92));
}
.gc-v5 .ws-backdrop {
  width: min(78vw, 1120px);
  border-color: rgba(188, 224, 255, .1);
  background: #071115;
  box-shadow: 0 0 140px rgba(0, 0, 0, .76);
}
.gc-v5 .ws-backdrop::after {
  background:
    linear-gradient(180deg, rgba(2, 3, 5, .1), rgba(2, 3, 5, .78)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
}
.gc-v5 .ws-backdrop img { filter: saturate(.76) contrast(1.18) brightness(.52); }
.gc-v5 .ws-media-frame {
  width: calc(20vw + var(--expand) * 68vw);
  height: calc(26vw + var(--expand) * 66vh);
  max-width: 1090px;
  max-height: 820px;
  border: 1px solid rgba(206, 232, 255, .42);
  border-radius: calc(36px - var(--expand) * 16px);
  box-shadow:
    0 55px 140px rgba(0, 0, 0, .76),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 90px rgba(82, 197, 255, .08);
}
.gc-v5 .ws-media-frame::after {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 24%, rgba(0,0,0,.22) 56%, rgba(0,0,0,.8) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.72));
}
.gc-v5 .ws-content { max-width: 1120px; padding-top: 38px; }
.gc-v5 .ws-brand { color: rgba(255,255,255,.74); }
.gc-v5 .ws-logo {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.34);
}
.gc-v5 .ws-title {
  color: #f8fbff;
  font-size: clamp(50px, 6.4vw, 94px);
  line-height: .9;
  text-shadow: 0 22px 70px rgba(0, 0, 0, .72);
}
.gc-v5 .ws-title em {
  color: transparent;
  background: linear-gradient(90deg, #d9ff54, #9cf5ca 58%, #78ddff);
  background-clip: text;
  -webkit-background-clip: text;
  font-style: italic;
}
.gc-v5 .ws-subtitle { color: rgba(238, 248, 255, .76); }
.gc-v5 .ws-badges span,
.gc-v5 .ws-expand-hint {
  border-color: rgba(199, 228, 255, .17);
  background: rgba(5, 10, 15, .58);
  color: rgba(237, 247, 255, .74);
}
.gc-v5 .ws-btn { transition: transform .24s ease, box-shadow .24s ease, background .24s ease; }
.gc-v5 .ws-btn-primary {
  color: #071014;
  border-color: transparent;
  background: linear-gradient(135deg, #e1ff76, #d9ff54 52%, #9df6cf);
  box-shadow: 0 18px 52px rgba(217, 255, 84, .18);
}
.gc-v5 .ws-btn-ghost {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.gc-v5 .ws-btn:hover { transform: translateY(-3px); }
.gc-v5 .ws-stats strong { color: #fff; }
.gc-v5 .ws-stats span { color: rgba(228,240,250,.48); }
.gc-v5 .preview-bubble {
  border-color: rgba(179, 218, 243, .16);
  background: rgba(6, 11, 16, .68);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

/* ---------- Navigation: Tubelight / Expandable Dock ---------- */
[data-visual="v5"] .gc21-b-nav {
  top: 12px;
  min-height: 68px;
  margin: 12px clamp(12px, 2.1vw, 32px) 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(180, 211, 245, .13);
  border-radius: 22px;
  color: var(--gc5-text);
  background: linear-gradient(110deg, rgba(12, 17, 25, .9), rgba(15, 21, 32, .74));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(24px) saturate(1.35);
}
[data-visual="v5"] .gc21-b-nav::before {
  inset: auto 7% -170px 42%;
  height: 250px;
  border-color: rgba(114, 220, 255, .1);
  animation-duration: 30s;
}
[data-visual="v5"] .gc21-b-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.07) 48%, transparent 68%);
  transform: translateX(-120%);
  animation: gc5NavSheen 9s ease-in-out infinite;
}
[data-visual="v5"] .gc21-b-brand { color: var(--gc5-text); }
[data-visual="v5"] .gc21-b-brand-orb {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(217,255,84,.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 36% 30%, rgba(217,255,84,.35), transparent 28%),
    linear-gradient(145deg, #18222d, #080d13);
  box-shadow: 0 12px 34px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.08);
}
[data-visual="v5"] .gc21-b-brand b { color: #fff; }
[data-visual="v5"] .gc21-b-brand small { color: rgba(219,232,248,.48); }
[data-visual="v5"] .gc21-b-nav-links {
  position: relative;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(178, 212, 248, .08);
  border-radius: 999px;
  background: rgba(5, 9, 14, .42);
}
[data-visual="v5"] .gc21-b-nav-links::after {
  content: "";
  position: absolute;
  top: 4px;
  left: var(--gc5-tab-x, 0);
  width: var(--gc5-tab-w, 0);
  height: calc(100% - 8px);
  border: 1px solid rgba(131, 222, 255, .22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 232, 255, .18), transparent 58%),
    rgba(74, 110, 151, .18);
  box-shadow: 0 0 30px rgba(105, 201, 255, .12), inset 0 1px rgba(255,255,255,.08);
  transition: left .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
[data-visual="v5"] .gc21-b-nav-links .gc21-b-tab {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  color: rgba(220, 232, 247, .54);
  font-size: 10px;
}
[data-visual="v5"] .gc21-b-nav-links .gc21-b-tab span { color: var(--gc5-cyan); }
[data-visual="v5"] .gc21-b-nav-links .gc21-b-tab:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
}
[data-visual="v5"] .gc21-b-nav-links .gc21-b-tab.active {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
[data-visual="v5"] .gc21-b-search {
  border-color: rgba(185,214,245,.12);
  color: rgba(212,228,247,.55);
  background: rgba(5,9,14,.44);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .gc21-b-search input { color: #fff; }
[data-visual="v5"] .gc21-b-search input::placeholder { color: rgba(203,219,238,.38); }
[data-visual="v5"] .gc21-b-icon,
[data-visual="v5"] .gc21-b-language,
[data-visual="v5"] .gc21-b-profile {
  border-color: rgba(185,214,245,.12) !important;
  color: rgba(238,246,255,.76) !important;
  background: rgba(8, 13, 20, .55) !important;
}
[data-visual="v5"] .gc21-b-icon:hover,
[data-visual="v5"] .gc21-b-profile:hover {
  color: #fff !important;
  border-color: rgba(117,221,255,.3) !important;
  background: rgba(26, 45, 62, .72) !important;
}
[data-visual="v5"] .gc21-b-lang-mark {
  color: #081014;
  background: linear-gradient(145deg, #d9ff54, #93f4cf);
}
[data-visual="v5"] .gc21-b-profile .avatar { background: #17202b; }
[data-visual="v5"] .net-status:not(.online) { color: rgba(230,240,252,.48); }
[data-visual="v5"] .net-status.online { color: #7df1b6; }

/* ---------- Home: immersive hero and kinetic cards ---------- */
[data-visual="v5"] .gc21-b-view { min-height: calc(100dvh - 92px); }
[data-visual="v5"] .gc21-b-view.active { animation: gc5ViewIn .55s cubic-bezier(.2,.8,.2,1) both; }
[data-visual="v5"] .gc21-b-hero {
  --gc5-x: 50%;
  --gc5-y: 40%;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  min-height: min(820px, calc(100dvh - 92px));
  margin: 10px clamp(12px, 2.1vw, 32px) 0;
  padding: clamp(58px, 7vw, 102px) clamp(30px, 5.2vw, 84px) clamp(44px, 5vw, 74px);
  overflow: hidden;
  border: 1px solid rgba(171,205,239,.12);
  border-radius: var(--gc5-radius-xl);
  background:
    radial-gradient(circle at var(--gc5-x) var(--gc5-y), rgba(112, 220, 255, .09), transparent 29%),
    radial-gradient(circle at 78% 42%, rgba(74, 113, 190, .2), transparent 31%),
    linear-gradient(135deg, rgba(11,16,24,.93), rgba(6,10,15,.96) 58%, rgba(9,13,20,.96));
  box-shadow: var(--gc5-shadow), inset 0 1px rgba(255,255,255,.045);
}
[data-visual="v5"] .gc21-b-hero::before {
  inset: -12% -7% auto 48%;
  width: min(790px, 58vw);
  border-color: rgba(115, 220, 255, .12);
  box-shadow: 0 0 80px rgba(73,160,214,.045);
  transform: translateY(calc(var(--gc5-scroll, 0) * -28px));
}
[data-visual="v5"] .gc21-b-hero::after {
  inset: 23% -5% auto 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117,221,255,.35), rgba(217,255,84,.18), transparent);
  filter: drop-shadow(0 0 9px rgba(117,221,255,.28));
  transform: rotate(-9deg) translateY(calc(var(--gc5-scroll, 0) * 18px));
}
[data-visual="v5"] .gc21-b-hero-copy { max-width: 800px; }
[data-visual="v5"] .gc21-b-kicker,
[data-visual="v5"] .gc21-b-section-kicker,
[data-visual="v5"] .gc21-b-spot-index { color: rgba(157, 218, 241, .68); }
[data-visual="v5"] .gc21-b-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gc5-lime);
  box-shadow: 0 0 0 6px rgba(217,255,84,.08), 0 0 20px rgba(217,255,84,.42);
}
[data-visual="v5"] .gc21-b-hero h1,
[data-visual="v5"] .gc21-b-map-head h1,
[data-visual="v5"] .gc21-b-view-head h1 {
  color: #f6f9fd;
  font-weight: 500;
  text-shadow: 0 22px 60px rgba(0,0,0,.42);
}
[data-visual="v5"] .gc21-b-hero h1 em,
[data-visual="v5"] .gc21-b-map-head h1 em,
[data-visual="v5"] .gc21-b-view-head h1 em {
  color: transparent;
  background: linear-gradient(100deg, #e2ff79, #9af4cb 52%, #75ddff);
  background-clip: text;
  -webkit-background-clip: text;
}
[data-visual="v5"] .gc21-b-hero-copy > p { color: rgba(222,233,246,.65); }
[data-visual="v5"] .gc21-b-primary,
[data-visual="v5"] .gc21-b-secondary {
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 850;
  transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
[data-visual="v5"] .gc21-b-primary {
  color: #071014;
  border-color: transparent;
  background: linear-gradient(135deg, #e1ff78, #d9ff54 52%, #9df5ce);
  box-shadow: 0 17px 48px rgba(217,255,84,.16), inset 0 1px rgba(255,255,255,.55);
}
[data-visual="v5"] .gc21-b-secondary {
  color: rgba(239,247,255,.84);
  border-color: rgba(190,219,248,.16);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-primary:hover,
[data-visual="v5"] .gc21-b-secondary:hover { transform: translateY(-3px); }
[data-visual="v5"] .gc21-b-secondary:hover {
  color: #fff;
  border-color: rgba(117,221,255,.3);
  background: rgba(117,221,255,.08);
}
[data-visual="v5"] .gc21-b-hero-stats span { border-left-color: rgba(184,213,244,.11); }
[data-visual="v5"] .gc21-b-hero-stats b { color: #fff; }
[data-visual="v5"] .gc21-b-hero-stats small { color: rgba(211,226,242,.43); }
[data-visual="v5"] .gc21-b-hero-art {
  min-height: 510px;
  transform: translateY(calc(var(--gc5-scroll, 0) * -12px));
}
[data-visual="v5"] .gc21-b-hero-globe {
  width: min(78%, 470px);
  border-color: rgba(160,219,255,.24);
  background:
    radial-gradient(circle at 33% 27%, rgba(255,255,255,.85), rgba(123,220,255,.78) 8%, transparent 20%),
    radial-gradient(circle at 62% 70%, rgba(76,137,255,.68), transparent 45%),
    radial-gradient(circle at 40% 35%, #226b9d, #0d2948 48%, #050a11 75%);
  box-shadow:
    0 36px 90px rgba(0,0,0,.62),
    -28px -34px 80px rgba(94,191,255,.18),
    28px 42px 90px rgba(74,87,218,.22),
    inset -26px -26px 70px rgba(0,0,0,.35),
    inset 16px 16px 52px rgba(164,232,255,.14);
}
[data-visual="v5"] .gc21-b-hero-globe::before,
[data-visual="v5"] .gc21-b-hero-globe::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
[data-visual="v5"] .gc21-b-hero-globe::before {
  inset: 10%;
  border: 1px dashed rgba(198,236,255,.3);
  animation: gc5Spin 28s linear infinite;
}
[data-visual="v5"] .gc21-b-hero-globe::after {
  inset: -29%;
  border: 1px solid rgba(117,221,255,.16);
  box-shadow: 0 0 0 44px rgba(117,221,255,.025);
  animation: gc5Spin 42s linear infinite reverse;
}
[data-visual="v5"] .gc21-b-orbit-line { border-color: rgba(117,221,255,.17); }
[data-visual="v5"] .gc21-b-city-chip {
  border-color: rgba(185,219,247,.15);
  color: rgba(239,247,255,.76);
  background: rgba(6,11,17,.78);
  box-shadow: 0 14px 44px rgba(0,0,0,.32);
}
[data-visual="v5"] .gc21-b-signal-pulse {
  border-color: rgba(117,221,255,.34);
  box-shadow: 0 0 0 0 rgba(117,221,255,.2), 0 0 44px rgba(117,221,255,.25);
}
[data-visual="v5"] .gc21-b-spotlights { gap: 14px; }
[data-visual="v5"] .gc21-b-spotlight {
  --gc5-x: 50%;
  --gc5-y: 20%;
  min-height: 350px;
  border-color: rgba(180,212,245,.12);
  border-radius: 26px;
  background:
    radial-gradient(circle at var(--gc5-x) var(--gc5-y), rgba(122,221,255,.12), transparent 42%),
    linear-gradient(155deg, rgba(18,27,40,.96), rgba(7,11,17,.98));
  box-shadow: 0 24px 68px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-spotlight:hover {
  border-color: rgba(117,221,255,.25);
  box-shadow: 0 32px 82px rgba(0,0,0,.46), 0 0 52px rgba(89,180,230,.08);
  transform: translateY(-5px);
}
[data-visual="v5"] .gc21-b-spotlight::after {
  background:
    radial-gradient(circle at 80% 10%, rgba(201,236,255,.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 24%, rgba(117,221,255,.35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 68%, rgba(217,255,84,.3) 0 1px, transparent 1.5px);
  background-size: 150px 130px, 110px 90px, 130px 120px;
}
[data-visual="v5"] .gc21-b-spotlight h2 { color: #f4f8fd; }
[data-visual="v5"] .gc21-b-spotlight p { color: rgba(210,223,239,.52); }
[data-visual="v5"] .gc21-b-spot-glyph {
  border-color: rgba(117,221,255,.18);
  color: var(--gc5-cyan);
  background: rgba(12, 25, 37, .72);
  box-shadow: 0 0 40px rgba(117,221,255,.08), inset 0 1px rgba(255,255,255,.05);
}
[data-visual="v5"] .gc21-b-spot-action { color: rgba(238,247,255,.72); }
[data-visual="v5"] .gc21-b-spot-action:hover { color: var(--gc5-lime); }
[data-visual="v5"] .gc21-b-lower-grid {
  gap: 14px;
  margin-top: 14px;
}
[data-visual="v5"] .gc21-b-panel {
  --gc5-x: 50%;
  --gc5-y: 20%;
  border-color: rgba(180,212,245,.12);
  border-radius: var(--gc5-radius-lg);
  background:
    radial-gradient(circle at var(--gc5-x) var(--gc5-y), rgba(117,221,255,.06), transparent 38%),
    linear-gradient(160deg, rgba(15,22,33,.9), rgba(7,11,17,.96));
  box-shadow: 0 24px 64px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .gc21-b-section-head h2 { color: #f5f8fc; }
[data-visual="v5"] .gc21-b-section-head button { color: rgba(228,239,250,.58); }
[data-visual="v5"] .gc21-b-panel .card-grid { gap: 9px; }
[data-visual="v5"] .place-card {
  border-color: rgba(185,215,245,.11);
  color: #f4f8fc;
  background: linear-gradient(155deg, rgba(22,31,43,.92), rgba(9,14,21,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .place-card:hover {
  border-color: rgba(117,221,255,.28);
  background: linear-gradient(155deg, rgba(30,46,62,.94), rgba(9,14,21,.98));
  box-shadow: 0 22px 48px rgba(0,0,0,.35), 0 0 42px rgba(117,221,255,.07);
}
[data-visual="v5"] .place-card p,
[data-visual="v5"] .place-card .place-footer { color: rgba(211,224,239,.5); }
[data-visual="v5"] .community-item { border-bottom-color: rgba(184,213,244,.09); }
[data-visual="v5"] .community-item strong { color: #f4f8fc; }
[data-visual="v5"] .community-item span { color: rgba(211,224,239,.48); }
[data-visual="v5"] .community-item .connect {
  color: rgba(239,247,255,.76);
  border-color: rgba(185,214,245,.12);
  background: rgba(255,255,255,.045);
}
[data-visual="v5"] .community-item .connect:hover {
  color: #071014;
  border-color: transparent;
  background: var(--gc5-lime);
}
[data-visual="v5"] .gc21-b-paths {
  min-height: 460px;
  margin: 14px clamp(12px,2.1vw,32px) 34px;
  border-color: rgba(181,213,245,.13);
  border-radius: var(--gc5-radius-xl);
  background:
    radial-gradient(circle at 72% 17%, rgba(81, 133, 199, .22), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(83, 108, 255, .15), transparent 32%),
    linear-gradient(145deg, #090e15, #101827 58%, #070b11);
  box-shadow: 0 36px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-paths-copy h2 { color: #f7faff; }
[data-visual="v5"] .gc21-b-paths-copy h2 em {
  color: transparent;
  background: linear-gradient(90deg, #e1ff76, #99f4ce, #73ddff);
  background-clip: text;
  -webkit-background-clip: text;
}
[data-visual="v5"] .gc21-b-paths-copy button {
  border-color: rgba(193,221,248,.14);
  background: rgba(255,255,255,.045);
}
[data-visual="v5"] .gc21-b-paths-copy button:hover { color: #071014; background: var(--gc5-lime); }
[data-visual="v5"] .gc21-b-paths-meta { color: rgba(216,231,247,.37); }

@keyframes gc5ViewIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes gc5NavSheen { 0%, 54% { transform: translateX(-125%); } 78%, 100% { transform: translateX(125%); } }
@keyframes gc5Spin { to { transform: rotate(360deg); } }
@keyframes gc5AuroraA { to { transform: translate3d(7vw, 5vh, 0) scale(1.12); } }
@keyframes gc5AuroraB { to { transform: translate3d(-8vw, 8vh, 0) scale(.92); } }
@keyframes gc5AuroraC { to { transform: translate3d(-5vw, -6vh, 0) scale(1.08); } }

/* ---------- Authentication: Spotlight Card ---------- */
.gc-v5 .modal-overlay {
  padding: 28px;
  background:
    radial-gradient(circle at 50% 35%, rgba(85, 154, 198, .15), transparent 34%),
    rgba(2, 5, 9, .82);
  backdrop-filter: blur(22px) saturate(1.1);
}
.gc-v5 .modal-content {
  box-shadow: 0 46px 140px rgba(0,0,0,.62);
}
.gc-v5 .gc-auth-modal .modal-close {
  color: #151820 !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 40px rgba(8,12,18,.25);
}
.gc-v5 .gc-21-auth-ui {
  --spot-x: 50%;
  --spot-y: 28%;
  grid-template-columns: minmax(290px, .76fr) minmax(460px, 1.24fr);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 32px;
  background:
    radial-gradient(560px circle at var(--spot-x) var(--spot-y), rgba(217,255,84,.2), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,241,237,.94));
  box-shadow:
    0 34px 80px -34px rgba(4,8,14,.7),
    0 88px 160px -54px rgba(0,0,0,.6),
    inset 0 1px rgba(255,255,255,.98);
}
.gc-v5 .gc-21-auth-ui::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(112deg, transparent 20%, rgba(255,255,255,.82) 38%, transparent 54%),
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.5), transparent 32%);
  mix-blend-mode: screen;
}
.gc-v5 .gc-21-auth-ui::after {
  inset: 18px -30px -36px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 46px;
  background: rgba(255,255,255,.34);
  box-shadow: 0 60px 100px rgba(0,0,0,.24);
  filter: blur(22px);
}
.gc-v5 .gc-21-auth-spotlight {
  z-index: 1;
  opacity: .9;
  background: radial-gradient(480px circle at var(--spot-x) var(--spot-y), rgba(0,0,0,.07), transparent 66%);
}
.gc-v5 .gc-21-auth-rail {
  z-index: 3;
  min-width: 0;
  padding: 40px 38px;
  color: #151820;
  border-right: 1px solid rgba(18,22,30,.08);
  background:
    radial-gradient(circle at 76% 13%, rgba(217,255,84,.28), transparent 27%),
    radial-gradient(circle at 4% 90%, rgba(117,221,255,.16), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(235,237,233,.7));
}
.gc-v5 .gc-21-auth-rail::before,
.gc-v5 .gc-21-auth-rail::after {
  border-color: rgba(35,42,53,.12);
  box-shadow: 0 0 34px rgba(72,102,116,.035);
}
.gc-v5 .gc-21-auth-rail::after { border-color: rgba(127,162,22,.22); }
.gc-v5 .gc-21-auth-kicker,
.gc-v5 .gc-21-auth-eyebrow { color: #626973; }
.gc-v5 .gc-21-auth-rail strong {
  color: #14171e;
  font-size: clamp(38px, 3.65vw, 55px);
  line-height: .93;
}
.gc-v5 .gc-21-auth-rail strong em { color: #759414; }
.gc-v5 .gc-21-auth-rail > small { color: #6d737d; }
.gc-v5 .gc-21-auth-metrics b { color: #15181f; }
.gc-v5 .gc-21-auth-metrics small { color: #858a93; }
.gc-v5 .gc-21-auth-orbit {
  background: #8aaa19;
  box-shadow: 0 0 0 8px rgba(138,170,25,.12), 0 0 28px rgba(138,170,25,.24);
}
.gc-v5 .gc-21-auth-main {
  z-index: 3;
  padding: clamp(36px, 5vw, 68px);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(22px);
}
.gc-v5 .gc-21-auth-heading h2 {
  color: #151820;
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: .98;
}
.gc-v5 .gc-21-auth-heading p { color: #737983; }
.gc-v5 .gc-21-auth-body label,
.gc-v5 .gc-21-auth-body .reg-row > label,
.gc-v5 .gc-21-auth-body .gc21-si-field > label,
.gc-v5 .gc-21-auth-body .gc21-a3-field > label { color: #5b616c; }
.gc-v5 .gc-21-auth-body input,
.gc-v5 .gc-21-auth-body select {
  min-height: 46px;
  color: #171a21 !important;
  border-color: rgba(18,22,30,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 1px rgba(255,255,255,.92), 0 1px 0 rgba(255,255,255,.65);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.gc-v5 .gc-21-auth-body input:focus,
.gc-v5 .gc-21-auth-body select:focus {
  border-color: rgba(80,112,224,.5);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(80,112,224,.1), 0 8px 22px rgba(27,40,70,.06);
}
.gc-v5 .gc-21-auth-body .btn-primary,
.gc-v5 .gc-21-auth-body .btn-submit,
.gc-v5 .gc-21-auth-body .gc21-si-submit,
.gc-v5 .gc-21-auth-body .gc21-a3-submit {
  min-height: 48px;
  color: #f7f9ff !important;
  border-color: #171b24 !important;
  border-radius: 11px;
  background: linear-gradient(135deg, #202631, #10141b) !important;
  box-shadow: 0 12px 30px rgba(13,18,26,.2), inset 0 1px rgba(255,255,255,.08);
}
.gc-v5 .gc-21-auth-body .btn-primary:hover,
.gc-v5 .gc-21-auth-body .btn-submit:hover { transform: translateY(-1px); }
.gc-v5 .gc-21-auth-switch { color: #767c86; }
.gc-v5 .gc-21-auth-switch a { color: #4966dc; }
.gc-v5 .gc21-a3-more { background: rgba(255,255,255,.42); }
.gc-v5 .gc-21-auth-divider span { background: #faf9f6; }

/* ---------- Atlas: Spline sphere + radial timeline ---------- */
[data-visual="v5"] .gc21-b-map-view.active { padding-top: 8px; height: calc(100dvh - 80px); overflow: hidden; }
[data-visual="v5"] .gc21-b-map-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  max-width: 1840px;
  padding: 0 clamp(12px, 2.1vw, 32px) 28px;
}
[data-visual="v5"] .gc21-b-map-card {
  min-height: calc(100dvh - 112px);
  border-color: rgba(180,212,245,.13);
  border-radius: var(--gc5-radius-xl);
  background:
    radial-gradient(ellipse at 50% 59%, rgba(43, 97, 147, .22), transparent 36%),
    radial-gradient(circle at 82% 7%, rgba(95, 117, 231, .17), transparent 25%),
    linear-gradient(150deg, #080d13 0%, #030507 69%);
  box-shadow: 0 38px 100px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-map-card::before {
  opacity: .38;
  background-image:
    radial-gradient(rgba(183,226,255,.28) .72px, transparent .82px),
    linear-gradient(rgba(130,205,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,205,255,.045) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  mask-image: radial-gradient(circle at 50% 56%, #000, transparent 68%);
}
[data-visual="v5"] .gc21-b-map-card::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 1;
  width: min(76vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(154,218,255,.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(117,221,255,.014),
    0 0 0 145px rgba(117,221,255,.009),
    0 0 120px rgba(80,159,218,.07);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: gc5AtlasOrbit 46s linear infinite;
}
[data-visual="v5"] .gc21-b-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 3.4vw, 48px) clamp(26px, 4vw, 58px) 22px;
}
[data-visual="v5"] .gc21-b-map-head > div:first-child > span {
  color: rgba(114,220,255,.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}
[data-visual="v5"] .gc21-b-map-head h1 { margin-bottom: 0; font-size: clamp(44px, 4.7vw, 72px); }
[data-visual="v5"] .gc21-b-map-legend {
  padding: 10px 12px;
  border: 1px solid rgba(183,215,246,.1);
  border-radius: 999px;
  color: rgba(220,233,247,.52);
  background: rgba(4,8,12,.48);
}
[data-visual="v5"] .gc21-b-map-content {
  height: calc(100dvh - 400px);
  min-height: 0;
  margin: 0 14px 14px;
  border-color: rgba(183,215,246,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(27,73,112,.42), transparent 25%),
    radial-gradient(circle at 50% 50%, #0b1623 0%, #060b11 48%, #020304 76%);
  box-shadow: inset 0 0 100px rgba(0,0,0,.5), 0 0 80px rgba(63,145,215,.08);
}
[data-visual="v5"] .gc-globe-scene {
  background:
    radial-gradient(circle at 50% 46%, rgba(54, 137, 195, .17), transparent 20%),
    radial-gradient(circle at 50% 48%, #0b1420 0%, #05080d 58%, #010203 100%);
}
[data-visual="v5"] .gc-globe-scene::before {
  inset: -22%;
  opacity: .42;
  background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(103,176,255,.18), transparent 24%, rgba(217,255,84,.09), transparent 59%);
  animation: gc5AtlasOrbit 24s linear infinite;
}
[data-visual="v5"] .gc-globe-canvas { filter: drop-shadow(0 0 34px rgba(70,166,230,.16)); }
[data-visual="v5"] .gc-globe-vignette {
  background: radial-gradient(circle at 50% 48%, transparent 37%, rgba(0,0,0,.72) 86%);
  box-shadow: inset 0 0 140px rgba(0,0,0,.82);
}
[data-visual="v5"] .gc-globe-copy span { color: rgba(117,221,255,.72); }
[data-visual="v5"] .gc-globe-copy strong { color: rgba(232,243,255,.48); }
[data-visual="v5"] .gc-globe-orbit-system { width: min(72%, 690px); }
[data-visual="v5"] .gc-globe-orbit-ring {
  border-color: rgba(175,219,255,.17);
  box-shadow: 0 0 32px rgba(113,190,255,.045);
}
[data-visual="v5"] .gc-globe-orbit-ring.ring-b { border-color: rgba(175,219,255,.11); }
[data-visual="v5"] .gc-globe-orbit-ring.ring-c { border-color: rgba(217,255,84,.16); }
[data-visual="v5"] .gc-globe-orbit-dot { color: rgba(247,251,255,.7); }
[data-visual="v5"] .gc-globe-orbit-dot i {
  border-color: rgba(177,224,255,.68);
  background: #071018;
  box-shadow: 0 0 0 8px rgba(111,217,255,.05), 0 0 30px rgba(111,217,255,.31);
}
[data-visual="v5"] .gc21-b-map-aside {
  padding: 34px 28px;
  border-color: rgba(180,212,245,.13);
  border-radius: var(--gc5-radius-xl);
  color: #edf6ff;
  background:
    radial-gradient(circle at 50% 0%, rgba(97, 119, 255, .23), transparent 34%),
    radial-gradient(circle at 12% 80%, rgba(74,169,211,.11), transparent 30%),
    linear-gradient(160deg, rgba(18,24,35,.98), rgba(7,10,15,.99) 76%);
  box-shadow: 0 32px 84px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}
[data-visual="v5"] .gc21-b-map-aside .gc21-b-section-kicker { color: var(--gc5-lime); }
[data-visual="v5"] .gc21-b-map-aside h2 { color: #fff; }
[data-visual="v5"] .gc21-b-map-aside p { color: rgba(224,235,248,.85); }
[data-visual="v5"] .gc5-orbit-sequence {
  display: grid;
  gap: 0;
  margin: 24px 0 26px;
  padding: 0;
  list-style: none;
}
[data-visual="v5"] .gc5-orbit-sequence li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  min-height: 54px;
  color: rgba(235,244,255,.82);
  font-size: 11px;
}
[data-visual="v5"] .gc5-orbit-sequence li::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: -4px;
  left: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(117,221,255,.34), transparent);
}
[data-visual="v5"] .gc5-orbit-sequence li:last-child::before { display: none; }
[data-visual="v5"] .gc5-orbit-sequence i {
  position: relative;
  z-index: 1;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(151,218,255,.34);
  border-radius: 50%;
  color: var(--gc5-cyan);
  background: #09111a;
  box-shadow: 0 0 24px rgba(117,221,255,.12);
  font-style: normal;
  font-size: 9px;
}
[data-visual="v5"] .gc5-orbit-sequence b { display: block; color: #fff; font-size: 11px; }
[data-visual="v5"] .gc5-orbit-sequence span { display: block; margin-top: 3px; color: rgba(214,228,243,.78); font-size: 9px; }
[data-visual="v5"] .gc21-b-map-metric { border-bottom-color: rgba(183,215,246,.1); }
[data-visual="v5"] .gc21-b-map-metric b { color: #fff; }
[data-visual="v5"] .gc21-b-map-metric span { color: rgba(213,227,243,.78); }
[data-visual="v5"] .gc21-b-map-aside .gc21-b-primary {
  color: #071014;
  border-color: transparent;
  background: linear-gradient(135deg, #e0ff76, #d9ff54 54%, #9df5cd);
  box-shadow: 0 16px 44px rgba(217,255,84,.16);
}

/* ---------- People: dark directory and liquid glass conversation ---------- */
[data-visual="v5"] .gc21-b-friends-view.active {
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 14px;
  height: calc(100dvh - 92px);
  padding: 8px clamp(12px, 2.1vw, 32px) 28px;
}
[data-visual="v5"] .gc21-b-directory {
  padding: 25px 18px 14px;
  border-color: rgba(181,212,245,.13);
  border-radius: var(--gc5-radius-lg);
  background:
    radial-gradient(circle at 10% 0%, rgba(117,221,255,.11), transparent 30%),
    linear-gradient(165deg, rgba(17,24,35,.97), rgba(7,11,17,.98));
  box-shadow: 0 28px 76px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-directory-top { color: rgba(117,221,255,.68); }
[data-visual="v5"] .gc21-b-directory-top button {
  color: #071014;
  background: var(--gc5-lime);
  box-shadow: 0 10px 30px rgba(217,255,84,.14);
}
[data-visual="v5"] .gc21-b-directory h2 { color: #f4f8fc; }
[data-visual="v5"] .gc21-b-directory > p { color: rgba(210,224,240,.46); }
[data-visual="v5"] .gc21-b-directory > p b { color: #fff; }
[data-visual="v5"] .gc21-b-directory-search {
  border-color: rgba(181,212,245,.13);
  background: rgba(6,10,16,.58);
}
[data-visual="v5"] .gc21-b-directory-search input { color: #fff; }
[data-visual="v5"] .gc21-b-filter-tabs { border-bottom-color: rgba(181,212,245,.09); }
[data-visual="v5"] .gc21-b-filter-tabs .friend-tab { color: rgba(214,227,242,.48); }
[data-visual="v5"] .gc21-b-filter-tabs .friend-tab.active { color: #071014; background: var(--gc5-lime); }
[data-visual="v5"] .friend-group-header { color: rgba(185,211,236,.48); }
[data-visual="v5"] .fg-dot { background: rgba(210,224,240,.32); }
[data-visual="v5"] .fg-dot.on { background: #6be8a8; box-shadow: 0 0 0 5px rgba(107,232,168,.08); }
[data-visual="v5"] .friend-item {
  border-color: transparent;
  color: #f3f7fc;
}
[data-visual="v5"] .friend-item:hover {
  border-color: rgba(181,212,245,.1);
  background: rgba(255,255,255,.045);
}
[data-visual="v5"] .friend-item.active {
  border-color: rgba(117,221,255,.22);
  background: linear-gradient(90deg, rgba(84,145,190,.16), rgba(79,96,201,.1));
  box-shadow: inset 3px 0 var(--gc5-cyan), 0 12px 36px rgba(0,0,0,.18);
}
[data-visual="v5"] .friend-name { color: #f4f8fc; }
[data-visual="v5"] .friend-meta { color: rgba(208,222,238,.45); }
[data-visual="v5"] .presence { background: #6be8a8; box-shadow: 0 0 0 5px rgba(107,232,168,.08); }
[data-visual="v5"] .presence.offline { background: #636d7d; }
[data-visual="v5"] .unread { color: #071014; background: var(--gc5-lime); }
[data-visual="v5"] .gc-empty-state { color: rgba(214,227,242,.52); }
[data-visual="v5"] .gc21-b-conversation {
  border-color: rgba(181,212,245,.13);
  border-radius: var(--gc5-radius-lg);
  background:
    radial-gradient(circle at 76% 0%, rgba(94,111,215,.12), transparent 28%),
    linear-gradient(155deg, rgba(15,21,31,.96), rgba(7,11,17,.99));
  box-shadow: 0 28px 76px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-conversation .chat-header {
  border-bottom-color: rgba(181,212,245,.1);
  background: rgba(255,255,255,.018);
}
[data-visual="v5"] .gc21-b-conversation .chat-header h2 { color: #f4f8fc; }
[data-visual="v5"] .gc21-b-conversation .chat-header p { color: rgba(210,224,240,.45); }
[data-visual="v5"] .mini-search {
  border-color: rgba(181,212,245,.13);
  background: rgba(4,8,13,.5);
}
[data-visual="v5"] .mini-search input { color: #fff; }
[data-visual="v5"] .chat-actions .icon-button {
  color: rgba(239,247,255,.72);
  border-color: rgba(181,212,245,.13);
  background: rgba(5,10,15,.52);
}
[data-visual="v5"] .chat-actions .icon-button:hover {
  color: #071014;
  border-color: transparent;
  background: var(--gc5-lime);
}
[data-visual="v5"] .message-list { background: transparent; }
[data-visual="v5"] .msg-sender { color: rgba(210,224,240,.46); }
[data-visual="v5"] .bubble {
  color: rgba(241,247,255,.86);
  border-color: rgba(181,212,245,.1);
  background: rgba(255,255,255,.055);
  box-shadow: 0 12px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .message.sent .bubble {
  color: #091114;
  border-color: rgba(217,255,84,.42);
  background: linear-gradient(135deg, #e1ff78, #c9f65a);
  box-shadow: 0 14px 38px rgba(151,193,49,.13);
}
[data-visual="v5"] .translation {
  border-top-color: rgba(181,212,245,.1);
  color: rgba(158,211,240,.72);
}
[data-visual="v5"] .message-time { color: rgba(205,220,237,.34); }
[data-visual="v5"] .trans-btn { color: var(--gc5-cyan); }
[data-visual="v5"] .composer {
  border-color: rgba(181,212,245,.13);
  background: rgba(5,10,15,.58);
  box-shadow: 0 14px 38px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .composer input { color: #fff; }
[data-visual="v5"] .composer .icon-button {
  color: rgba(239,247,255,.72);
  background: rgba(255,255,255,.055);
}
[data-visual="v5"] .composer .icon-button.send {
  color: #071014;
  background: var(--gc5-lime);
}
[data-visual="v5"] .composer .icon-button.send .icon { filter: none; }
[data-visual="v5"] .pager-row { color: rgba(210,224,240,.46); background: rgba(255,255,255,.045); }

/* ---------- World, Circles and Guide ---------- */
[data-visual="v5"] .gc21-b-channel-view {
  max-width: 1580px;
  padding: clamp(34px, 4.2vw, 68px) clamp(18px, 3vw, 44px) 44px;
}
[data-visual="v5"] .gc21-b-view-head > div > span { color: rgba(117,221,255,.68); }
[data-visual="v5"] .gc21-b-view-head .gc21-b-secondary {
  color: rgba(239,247,255,.78);
  border-color: rgba(181,212,245,.13);
  background: rgba(255,255,255,.04);
}
[data-visual="v5"] .gc21-b-ai-status {
  color: rgba(219,255,98,.82);
  border-color: rgba(217,255,84,.22);
  background: rgba(217,255,84,.055);
}
[data-visual="v5"] .gc21-b-chat-frame {
  height: calc(100dvh - 280px);
  min-height: 620px;
  border-color: rgba(181,212,245,.13);
  border-radius: var(--gc5-radius-lg);
  box-shadow: 0 32px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] #worldChatPanel,
[data-visual="v5"] #groupChatPanel {
  color: #eef7ff;
  background:
    radial-gradient(circle at 78% 10%, rgba(88,111,219,.2), transparent 30%),
    radial-gradient(circle at 14% 88%, rgba(55,158,197,.12), transparent 28%),
    linear-gradient(150deg, rgba(17,23,34,.98), rgba(7,11,17,.99));
}
[data-visual="v5"] #worldChatPanel .chat-header,
[data-visual="v5"] #groupChatPanel .chat-header {
  border-bottom-color: rgba(181,212,245,.1);
  background: rgba(255,255,255,.018);
}
[data-visual="v5"] #worldChatPanel .chat-header h2,
[data-visual="v5"] #groupChatPanel .chat-header h2 { color: #fff; }
[data-visual="v5"] #worldChatPanel .chat-header p,
[data-visual="v5"] #groupChatPanel .chat-header p { color: rgba(212,226,242,.44); }
[data-visual="v5"] #worldChatPanel .mini-search,
[data-visual="v5"] #groupChatPanel .mini-search { border-color: rgba(181,212,245,.13); background: rgba(4,8,13,.52); }
[data-visual="v5"] #worldChatPanel .mini-search input,
[data-visual="v5"] #groupChatPanel .mini-search input { color: #fff; }
[data-visual="v5"] #worldChatPanel .message-list,
[data-visual="v5"] #groupChatPanel .message-list { background: transparent; }
[data-visual="v5"] #worldChatPanel .composer,
[data-visual="v5"] #groupChatPanel .composer {
  border-color: rgba(181,212,245,.13);
  background: rgba(5,10,15,.6);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] #worldChatPanel .composer input,
[data-visual="v5"] #groupChatPanel .composer input { color: #fff; }
[data-visual="v5"] .gc21-ct {
  color: #edf6ff;
  border: 1px solid rgba(181,212,245,.13);
  border-radius: var(--gc5-radius-lg);
  background: linear-gradient(150deg, rgba(15,21,31,.98), rgba(7,11,17,.99));
}
[data-visual="v5"] .gc21-ct-sidebar {
  border-right-color: rgba(181,212,245,.1);
  background:
    radial-gradient(circle at 10% 0%, rgba(117,221,255,.09), transparent 28%),
    rgba(7,11,17,.72);
}
[data-visual="v5"] .gc21-ct-sidebar-title span { color: rgba(117,221,255,.72); }
[data-visual="v5"] .gc21-ct-sidebar-title b { color: #f5f8fc; }
[data-visual="v5"] .gc21-ct-sidebar-title small { color: rgba(213,227,243,.45); }
[data-visual="v5"] .gc21-ct-search {
  border-color: rgba(181,212,245,.13);
  background: rgba(4,8,13,.52);
}
[data-visual="v5"] .gc21-ct-search input { color: #fff; }
[data-visual="v5"] .gc21-ct-tab {
  border-color: transparent;
  color: rgba(238,247,255,.72);
  background: rgba(255,255,255,.025);
}
[data-visual="v5"] .gc21-ct-tab:hover { background: rgba(255,255,255,.05); }
[data-visual="v5"] .gc21-ct-tab.active {
  border-color: rgba(117,221,255,.2);
  background: linear-gradient(90deg, rgba(82,143,180,.19), rgba(80,90,187,.12));
  box-shadow: inset 3px 0 var(--gc5-cyan);
}
[data-visual="v5"] .gc21-ct-tab-avatar {
  color: #071014;
  background: linear-gradient(145deg, #d9ff54, #78dcff);
}
[data-visual="v5"] .gc21-ct-tab-copy b { color: #f5f8fc; }
[data-visual="v5"] .gc21-ct-tab-copy small { color: rgba(213,227,243,.43); }
[data-visual="v5"] .gc21-ct-tab em { color: var(--gc5-lime); }
[data-visual="v5"] .gc21-ct-main { background: rgba(8,12,18,.5); }
[data-visual="v5"] .gc21-ct-header { border-bottom-color: rgba(181,212,245,.1); }
[data-visual="v5"] .gc21-ct-chat-title h2 { color: #fff; }
[data-visual="v5"] .gc21-ct-chat-title p { color: rgba(213,227,243,.44); }
[data-visual="v5"] .gc21-ct-messages { background: transparent !important; }
[data-visual="v5"] .gc21-ct-members {
  border-left-color: rgba(181,212,245,.1);
  background: rgba(6,10,16,.62);
}
[data-visual="v5"] .gc21-ct-leave { color: #fff; border-color: rgba(255,139,139,.3); background: rgba(255,139,139,.08); }
[data-visual="v5"] .gc-21-chat-panel {
  color: #eef7ff;
  border-radius: var(--gc5-radius-lg);
  background:
    radial-gradient(circle at 74% 18%, rgba(102,120,255,.22), transparent 31%),
    radial-gradient(circle at 12% 88%, rgba(70,177,214,.11), transparent 30%),
    linear-gradient(155deg, #101621, #090d14 64%, #070a0f) !important;
}
[data-visual="v5"] .gc-21-v0chat::before {
  background: radial-gradient(610px circle at var(--liquid-x, 68%) var(--liquid-y, 38%), rgba(117,221,255,.1), transparent 62%);
}
[data-visual="v5"] .gc-21-chat-header { border-bottom-color: rgba(181,212,245,.1); }
[data-visual="v5"] .gc-21-chat-header h2 { color: #fff; }
[data-visual="v5"] .gc-21-chat-header p { color: rgba(213,227,243,.46); }
[data-visual="v5"] .gc-21-v0chat-chip {
  border-color: rgba(181,212,245,.13);
  color: rgba(235,245,255,.66);
  background: rgba(255,255,255,.04);
}
[data-visual="v5"] .gc-21-v0chat-chip:hover { color: #071014; background: var(--gc5-lime); }
[data-visual="v5"] .gc-21-chat-composer-wrap {
  border-color: rgba(181,212,245,.13);
  background: rgba(5,10,15,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 24px 60px rgba(0,0,0,.26);
}
[data-visual="v5"] .gc-21-chat-composer-wrap textarea { color: #fff; }
[data-visual="v5"] .gc-21-chat-composer-wrap textarea::placeholder { color: rgba(210,224,240,.36); }
[data-visual="v5"] .gc-21-chat-send { color: #071014; background: var(--gc5-lime); }

/* ---------- Profile and secondary modals ---------- */
.gc-v5 .register-modal,
.gc-v5 .profile-modal {
  color: #eef6ff;
  border: 1px solid rgba(181,212,245,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(91,113,219,.19), transparent 31%),
    linear-gradient(155deg, rgba(18,25,37,.99), rgba(7,11,17,.99));
  box-shadow: 0 38px 110px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.04);
}
.gc-v5 .register-modal h2,
.gc-v5 .gc-profile-card h2 { color: #f6f9fd; }
.gc-v5 .register-modal .reg-tip,
.gc-v5 .register-modal p { color: rgba(214,227,242,.52); }
.gc-v5 .register-modal input,
.gc-v5 .register-modal select,
.gc-v5 .register-modal textarea {
  color: #f5f8fc !important;
  border-color: rgba(181,212,245,.14);
  background: rgba(5,10,15,.54);
}
.gc-v5 .register-modal .modal-close {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}
.gc-v5 .gc-profile-card {
  --spot-x: 50%;
  --spot-y: 26%;
  border-color: rgba(181,212,245,.13);
  border-radius: 28px;
  color: #eef6ff;
  background:
    radial-gradient(560px circle at var(--spot-x) var(--spot-y), rgba(117,221,255,.1), transparent 58%),
    linear-gradient(155deg, rgba(18,25,37,.99), rgba(7,11,17,.99));
  box-shadow: 0 40px 120px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.04);
}
.gc-v5 .gc-profile-status { color: rgba(219,232,247,.5); }
.gc-v5 .gc-profile-status > span { background: #6be8a8; box-shadow: 0 0 0 6px rgba(107,232,168,.08); }
.gc-v5 .gc-profile-identity > div > span { color: rgba(117,221,255,.7); }
.gc-v5 .gc-profile-identity h2 { color: #f6f9fd; }
.gc-v5 .gc-profile-identity p { color: rgba(213,227,243,.48); }
.gc-v5 .gc-profile-stats { border-color: rgba(181,212,245,.1); }
.gc-v5 .gc-profile-stats b { color: #fff; }
.gc-v5 .gc-profile-stats small,
.gc-v5 .gc-profile-bio label,
.gc-v5 .gc-profile-setting small { color: rgba(213,227,243,.45); }
.gc-v5 .gc-profile-bio input,
.gc-v5 .gc-profile-setting,
.gc-v5 .gc-profile-actions button {
  color: #eef6ff;
  border-color: rgba(181,212,245,.12);
  background: rgba(255,255,255,.045);
}
.gc-v5 .gc-profile-bio button { color: #071014; background: var(--gc5-lime); }
.gc-v5 .gc-profile-setting b { color: #f4f8fc; }
.gc-v5 .gc-profile-actions button:hover { border-color: rgba(117,221,255,.26); background: rgba(117,221,255,.08); }
.gc-v5 .gc-profile-actions button.danger { color: #ffb5b5; border-color: rgba(255,139,139,.22); background: rgba(255,139,139,.06); }

/* ---------- Reveal, toast and utility polish ---------- */
[data-visual="v5"] [data-gc5-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--gc5-delay, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--gc5-delay, 0ms);
}
[data-visual="v5"] [data-gc5-reveal].gc5-inview { opacity: 1; transform: none; }
[data-visual="v5"] .gc21-b-spotlight,
[data-visual="v5"] .gc21-b-panel,
[data-visual="v5"] .place-card,
[data-visual="v5"] .community-item,
[data-visual="v5"] .gc21-b-tab,
[data-visual="v5"] .gc21-b-primary,
[data-visual="v5"] .gc21-b-secondary { transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease, color .24s ease; }
.gc-v5 .guest-banner {
  color: #eaf3ff !important;
  border: 1px solid rgba(181,212,245,.15) !important;
  background: rgba(7,12,18,.92) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
  backdrop-filter: blur(22px);
}
.gc-v5 .toast,
.gc-v5 .gc-toast {
  color: #eef6ff;
  border-color: rgba(181,212,245,.15);
  background: rgba(7,12,18,.94);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
}
.gc-v5 .gc-discover-card {
  --spot-x: 50%;
  --spot-y: 28%;
  color: #eef6ff;
  border-color: rgba(181,212,245,.13);
  background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(117,221,255,.1), transparent 50%), rgba(13,18,27,.97);
}

@keyframes gc5AtlasOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- Responsive: tablet and desktop compression ---------- */
@media (max-width: 1180px) {
  [data-visual="v5"] .gc21-b-nav { gap: 10px; }
  [data-visual="v5"] .gc21-b-search { width: 150px; }
  [data-visual="v5"] .gc21-b-nav-links .gc21-b-tab { padding-inline: 9px; }
  [data-visual="v5"] .gc21-b-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); }
  [data-visual="v5"] .gc21-b-map-layout { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 980px) {
  [data-visual="v5"] .gc21-b-search { display: none; }
  [data-visual="v5"] .gc21-b-hero { grid-template-columns: 1fr; gap: 24px; }
  [data-visual="v5"] .gc21-b-hero-art { min-height: 440px; }
  [data-visual="v5"] .gc21-b-spotlights { grid-template-columns: 1fr; }
  [data-visual="v5"] .gc21-b-lower-grid { grid-template-columns: 1fr; }
  [data-visual="v5"] .gc21-b-map-layout { grid-template-columns: 1fr; }
  [data-visual="v5"] .gc21-b-map-card { min-height: auto; }
  [data-visual="v5"] .gc21-b-map-content { height: 650px; min-height: 650px; }
  [data-visual="v5"] .gc21-b-map-aside { min-height: 420px; }
  [data-visual="v5"] .gc21-b-friends-view.active { grid-template-columns: 280px minmax(0, 1fr); }
  [data-visual="v5"] .gc21-ct { grid-template-columns: 240px minmax(0, 1fr); }
  [data-visual="v5"] .gc21-ct-members { display: none; }
}
@media (max-width: 760px) {
  body.gc-v5 { overflow-x: hidden; }
  [data-visual="v5"] .gc21-b-nav {
    top: 8px;
    min-height: 60px;
    margin: 8px 10px 0;
    padding: 8px 9px 8px 11px;
    border-radius: 18px;
  }
  [data-visual="v5"] .gc21-b-brand-orb { width: 36px; height: 36px; border-radius: 12px; }
  [data-visual="v5"] .gc21-b-brand > span:last-child { display: none; }
  [data-visual="v5"] .gc21-b-nav-actions { margin-left: auto; gap: 6px; }
  [data-visual="v5"] .gc21-b-icon { width: 34px; height: 34px; }
  [data-visual="v5"] .gc21-b-profile > span:last-child { display: none; }
  [data-visual="v5"] .gc21-b-profile { padding: 3px; }
  [data-visual="v5"] .gc21-b-nav-links {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 120;
    display: flex;
    height: 66px;
    padding: 5px 6px;
    border-color: rgba(181,212,245,.15);
    border-radius: 20px;
    background: rgba(8,13,20,.88);
    box-shadow: 0 18px 55px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.05);
    backdrop-filter: blur(26px) saturate(1.3);
  }
  [data-visual="v5"] .gc21-b-nav-links .gc21-b-tab {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 14px;
    font-size: 8px;
  }
  [data-visual="v5"] .gc21-b-nav-links .gc21-b-tab span { font-size: 16px; }
  [data-visual="v5"] .gc21-b-nav-links::after { display: none; }
  [data-visual="v5"] .gc21-b-main { padding-bottom: 84px; }
  [data-visual="v5"] .gc21-b-view { min-height: calc(100dvh - 72px); }
  [data-visual="v5"] .gc21-b-hero {
    min-height: auto;
    margin: 8px 10px 0;
    padding: 36px 22px 30px;
    border-radius: 26px;
  }
  [data-visual="v5"] .gc21-b-hero h1 { font-size: clamp(42px, 13vw, 62px); }
  [data-visual="v5"] .gc21-b-hero-copy > p { font-size: 14px; }
  [data-visual="v5"] .gc21-b-hero-actions { align-items: stretch; }
  [data-visual="v5"] .gc21-b-hero-actions .gc21-b-primary,
  [data-visual="v5"] .gc21-b-hero-actions .gc21-b-secondary { width: 100%; justify-content: space-between; }
  [data-visual="v5"] .gc21-b-hero-art { min-height: 350px; }
  [data-visual="v5"] .gc21-b-hero-globe { width: min(78%, 280px); }
  [data-visual="v5"] .gc21-b-city-chip { font-size: 7px; }
  [data-visual="v5"] .gc21-b-spotlights { margin-inline: 10px; }
  [data-visual="v5"] .gc21-b-spotlight { min-height: 310px; border-radius: 22px; }
  [data-visual="v5"] .gc21-b-lower-grid { margin-inline: 10px; }
  [data-visual="v5"] .gc21-b-paths { min-height: 420px; margin: 10px 10px 26px; border-radius: 26px; }
  [data-visual="v5"] .gc21-b-paths-copy { padding: 38px 24px 72px; }
  [data-visual="v5"] .gc21-b-paths-meta { flex-direction: column; gap: 5px; }
  [data-visual="v5"] .gc21-b-map-layout { padding: 0 10px 22px; }
  [data-visual="v5"] .gc21-b-map-card { border-radius: 26px; }
  [data-visual="v5"] .gc21-b-map-head { flex-direction: column; padding: 28px 22px 17px; }
  [data-visual="v5"] .gc21-b-map-head h1 { font-size: clamp(40px, 12vw, 58px); }
  [data-visual="v5"] .gc21-b-map-content { height: 540px; min-height: 540px; margin: 0 8px 8px; border-radius: 20px; }
  [data-visual="v5"] .gc-globe-orbit-system { width: 92%; }
  [data-visual="v5"] .gc-globe-orbit-dot b { display: none; }
  [data-visual="v5"] .gc21-b-map-aside { min-height: 0; padding: 28px 22px; border-radius: 26px; }
  [data-visual="v5"] .gc21-b-friends-view.active { display: flex; height: auto; min-height: 0; padding: 8px 10px 22px; flex-direction: column; overflow: visible; }
  [data-visual="v5"] .gc21-b-directory { max-height: 390px; padding: 20px 14px 12px; border-radius: 22px; }
  [data-visual="v5"] .gc21-b-conversation { min-height: calc(100dvh - 150px); border-radius: 22px; }
  [data-visual="v5"] .gc21-b-conversation .chat-header { align-items: flex-start; flex-direction: column; }
  [data-visual="v5"] .chat-actions { width: 100%; }
  [data-visual="v5"] .mini-search { flex: 1; }
  [data-visual="v5"] .mini-search input { width: 100%; }
  [data-visual="v5"] .message > div { max-width: 82%; }
  [data-visual="v5"] .gc21-b-channel-view { padding: 28px 10px 30px; }
  [data-visual="v5"] .gc21-b-view-head { align-items: flex-start; flex-direction: column; gap: 18px; }
  [data-visual="v5"] .gc21-b-view-head h1 { font-size: clamp(40px, 12vw, 58px); }
  [data-visual="v5"] .gc21-b-chat-frame { height: auto; min-height: calc(100dvh - 210px); border-radius: 22px; }
  [data-visual="v5"] .gc21-ct { display: block; border-radius: 22px; }
  [data-visual="v5"] .gc21-ct-sidebar,
  [data-visual="v5"] .gc21-ct-members { display: none; }
  [data-visual="v5"] .gc21-ct-main { min-height: calc(100dvh - 210px); }
  [data-visual="v5"] .gc-21-chat-header { align-items: flex-start; padding: 22px 18px 17px; }
  [data-visual="v5"] .gc-21-chat-live { display: none; }
  [data-visual="v5"] .gc-21-v0chat-chips { padding-inline: 18px; }
  [data-visual="v5"] .gc-21-chat-messages { min-height: 360px; padding: 20px 18px; }
  [data-visual="v5"] .gc-21-chat-composer-wrap { margin: 0 10px 10px; }
  .gc-v5 .modal-overlay { padding: 8px; }
  .gc-v5 .modal-content { width: 100%; max-height: calc(100dvh - 16px); border-radius: 22px; }
  .gc-v5 .gc-21-auth-ui { display: block; min-height: 0; max-height: calc(100dvh - 16px); overflow: auto; border-radius: 24px; }
  .gc-v5 .gc-21-auth-rail { min-height: 170px; padding: 24px 22px; border-right: 0; border-bottom: 1px solid rgba(18,22,30,.08); }
  .gc-v5 .gc-21-auth-rail strong { margin-top: 28px; font-size: 34px; }
  .gc-v5 .gc-21-auth-rail > small { margin-top: 8px; font-size: 11px; }
  .gc-v5 .gc-21-auth-metrics { display: none; }
  .gc-v5 .gc-21-auth-main { padding: 30px 22px 34px; }
  .gc-v5 .gc-21-auth-heading h2 { font-size: 34px; }
}
@media (max-width: 430px) {
  [data-visual="v5"] .gc21-b-icon[aria-label="Add friend"] { display: none; }
  [data-visual="v5"] .gc21-b-language { padding-inline: 6px !important; }
  [data-visual="v5"] .gc21-b-language #langLabel { display: none; }
  [data-visual="v5"] .gc21-b-hero { padding-inline: 18px; }
  [data-visual="v5"] .gc21-b-hero-stats { gap: 14px; }
  [data-visual="v5"] .gc21-b-hero-stats b { font-size: 22px; }
  [data-visual="v5"] .gc21-b-paths-copy h2 { font-size: 42px; }
  .gc-v5 .gc-21-auth-rail { min-height: 150px; }
  .gc-v5 .gc-21-auth-rail strong { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-v5 *,
  .gc-v5 *::before,
  .gc-v5 *::after,
  [data-visual="v5"] *,
  [data-visual="v5"] *::before,
  [data-visual="v5"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-visual="v5"] [data-gc5-reveal] { opacity: 1; transform: none; }
}

/* v5 QA calibration: selector-safe dark surfaces and auth legibility. */
.gc-v5 .gc-21-auth-ui::before {
  z-index: 2;
  opacity: .2;
  mix-blend-mode: soft-light;
}
.gc-v5 .gc-21-auth-rail,
.gc-v5 .gc-21-auth-main { z-index: 3; }
.gc-v5 .gc-21-auth-main { background: rgba(255,255,255,.82); }
[data-visual="v5"] .message-list { background: transparent !important; }
[data-visual="v5"] .empty-chat-card {
  color: #eef6ff;
  border: 1px solid rgba(181,212,245,.12);
  background: linear-gradient(155deg, rgba(19,27,39,.9), rgba(8,12,18,.94));
  box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
}
[data-visual="v5"] .empty-chat-card h3,
[data-visual="v5"] .empty-chat-card strong { color: #f5f8fc; }
[data-visual="v5"] .empty-chat-card p { color: rgba(213,227,243,.52); }
[data-visual="v5"] .empty-chat-card .empty-chat-icon,
[data-visual="v5"] .empty-chat-card .gc-empty-orb {
  filter: saturate(.9);
  box-shadow: 0 0 34px rgba(117,221,255,.14);
}
[data-visual="v5"] .gc21-ct-main .message-list,
[data-visual="v5"] .gc21-b-conversation .message-list { background: transparent !important; }
@media (max-width: 760px) {
  .gc-v5 .guest-banner {
    right: 10px !important;
    bottom: 84px !important;
    left: 10px !important;
    width: auto !important;
    border-radius: 16px !important;
  }
  [data-visual="v5"] .empty-chat-card { max-width: calc(100% - 28px); padding: 22px 16px; }
}

/* Final contrast calibration for authentication and empty chat states. */
.gc-v5 .gc-21-auth-heading h2 { color: #151820 !important; }
.gc-v5 .gc-21-auth-heading p { color: #737983 !important; }
[data-visual="v5"] .gc-channel-empty { color: rgba(210,224,240,.54); }
[data-visual="v5"] .gc-channel-empty span {
  color: var(--gc5-cyan);
  border-color: rgba(117,221,255,.22);
  background: rgba(12,24,35,.78);
  box-shadow: 0 0 38px rgba(117,221,255,.1), inset 0 1px rgba(255,255,255,.05);
}
[data-visual="v5"] .gc-channel-empty b { color: #f5f8fc; }
[data-visual="v5"] .gc-channel-empty p { color: rgba(210,224,240,.5); }


/* ==================== V6 acceptance fixes: home, world, guide, login ==================== */

/* Home: keep the accepted hero identity, but make the first 01/02 card row fully visible
   in the desktop QA frame and remove the clipped bottom edge/dead zone below it. */
@media (min-width: 981px) and (min-height: 880px) {
  [data-visual="v5"] #homeView {
    padding-bottom: 10px;
  }
  [data-visual="v5"] #homeView > .gc21-b-hero {
    min-height: 560px;
    padding-block: 44px 36px;
  }
  [data-visual="v5"] #homeView .gc21-b-hero-art {
    min-height: 440px;
  }
  [data-visual="v5"] #homeView .gc21-b-hero-globe {
    width: min(78%, 430px);
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights {
    position: relative;
    z-index: 5;
    padding-bottom: 12px;
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights .gc21-b-spotlight {
    height: 225px;
    min-height: 225px;
    padding: 12px 18px;
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights .gc21-b-spot-glyph {
    width: 34px;
    height: 34px;
    margin: 8px 0 auto;
    font-size: 15px;
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights .gc21-b-spotlight h2 {
    margin: 9px 0 5px;
    font-size: clamp(21px, 1.7vw, 25px);
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights .gc21-b-spotlight p {
    font-size: 9px;
    line-height: 1.35;
  }
  [data-visual="v5"] #homeView > .gc21-b-spotlights .gc21-b-spot-action {
    margin-top: 8px;
    padding-top: 7px;
  }
}

/* World and Guide: turn the channel view into an explicit, non-scrolling flex viewport.
   The real message list consumes the remaining height and the real composer stays visible. */
@media (min-width: 761px) {
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"].active,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"].active {
    display: flex;
    height: calc(100dvh - 80px);
    min-height: 0;
    padding: 18px clamp(18px, 3vw, 44px) 82px;
    flex-direction: column;
    overflow: hidden;
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-view-head,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > .gc21-b-view-head {
    flex: none;
    margin-bottom: 16px;
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-view-head h1,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > .gc21-b-view-head h1 {
    font-size: clamp(46px, 4.8vw, 70px);
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-chat-frame,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > #aiChatPanel {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }
  [data-visual="v5"] #worldChatPanel,
  [data-visual="v5"] #aiChatPanel .gc-21-chat-panel {
    min-height: 0;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-messages {
    min-height: 0;
  }
}

/* World: the empty state now reads as a real channel surface (room header, live context,
   structured message region) instead of a full-screen blank or loading placeholder. */
[data-visual="v5"] #worldChatPanel .message-list {
  position: relative;
  overflow: hidden;
  padding: 16px;
  background:
    radial-gradient(circle at 82% 14%, rgba(91,116,220,.16), transparent 31%),
    radial-gradient(circle at 18% 84%, rgba(74,194,219,.1), transparent 32%),
    linear-gradient(155deg, rgba(12,18,28,.66), rgba(5,9,15,.82));
}
[data-visual="v5"] #worldChatPanel .message-list::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background:
    repeating-linear-gradient(90deg, rgba(173,214,246,.045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(173,214,246,.035) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 86%);
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 86%);
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty {
  position: relative;
  z-index: 1;
  min-height: 100%;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  padding: clamp(52px, 6vw, 84px) clamp(28px, 5vw, 74px) clamp(36px, 5vw, 64px);
  border: 1px solid rgba(181,212,245,.12);
  border-radius: 20px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 46%),
    radial-gradient(circle at 76% 28%, rgba(117,221,255,.1), transparent 34%);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 24px 70px rgba(0,0,0,.16);
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty::before {
  content: "LIVE WORLD ROOM  /  OPEN CHANNEL";
  position: absolute;
  top: 24px;
  left: clamp(28px, 5vw, 74px);
  color: rgba(117,221,255,.68);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -8%;
  width: min(46vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(117,221,255,.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 56px rgba(117,221,255,.025),
    0 0 0 112px rgba(217,255,84,.015),
    0 0 110px rgba(79,160,219,.1);
  animation: gc5Spin 48s linear infinite;
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty span {
  position: absolute;
  top: clamp(38px, 6vw, 72px);
  right: clamp(28px, 5vw, 72px);
  width: 58px;
  height: 58px;
  margin: 0;
  color: var(--gc5-lime);
  border-color: rgba(217,255,84,.28);
  background: rgba(8,14,21,.7);
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty b {
  max-width: 720px;
  color: #f5f9ff;
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: .98;
  text-shadow: 0 22px 60px rgba(0,0,0,.48);
}
[data-visual="v5"] #worldChatPanel .gc-channel-empty p {
  max-width: 620px;
  margin-top: 14px;
  color: rgba(213,227,243,.54);
  font-size: 11px;
}
[data-visual="v5"] #worldChatPanel .composer {
  position: relative;
  z-index: 2;
  min-height: 58px;
  flex: none;
  border-color: rgba(181,212,245,.15);
  background: linear-gradient(145deg, rgba(17,25,36,.86), rgba(6,11,18,.9));
  box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
}
[data-visual="v5"] #worldChatPanel .composer:focus-within {
  border-color: rgba(117,221,255,.36);
  box-shadow: 0 0 0 4px rgba(117,221,255,.06), 0 20px 52px rgba(0,0,0,.32);
}

/* Guide mobile: reserve the bottom navigation + guest banner area so the real composer
   and Send button are fully visible instead of being clipped by the viewport. */
@media (max-width: 760px) {
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"].active,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"].active {
    display: flex;
    height: calc(100dvh - 76px);
    min-height: 0;
    padding: 14px 10px 150px;
    flex-direction: column;
    overflow: hidden;
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-view-head,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > .gc21-b-view-head {
    flex: none;
    gap: 8px;
    margin-bottom: 12px;
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-view-head h1,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > .gc21-b-view-head h1 {
    font-size: clamp(38px, 11.5vw, 48px);
  }
  [data-visual="v5"] .gc21-b-channel-view[data-view="world"] > .gc21-b-chat-frame,
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"] > #aiChatPanel {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }
  [data-visual="v5"] #worldChatPanel {
    min-height: 0;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-panel {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-messages {
    min-height: 0;
    padding: 14px 16px;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-header {
    gap: 10px;
    padding: 15px 16px 13px;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-orb {
    width: 40px;
    height: 40px;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-header h2 {
    font-size: 22px;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-v0chat-chips {
    padding: 10px 16px 0;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-composer-wrap {
    margin: 0 8px 8px;
  }
  [data-visual="v5"] #worldChatPanel .chat-header {
    min-height: 66px;
    padding: 13px 15px;
  }
  [data-visual="v5"] #worldChatPanel .composer {
    margin: 8px;
  }
  [data-visual="v5"] #worldChatPanel .gc-channel-empty {
    padding: 56px 22px 30px;
  }
  [data-visual="v5"] #worldChatPanel .gc-channel-empty::before {
    top: 19px;
    left: 22px;
  }
  [data-visual="v5"] #worldChatPanel .gc-channel-empty span {
    top: 48px;
    right: 18px;
    width: 48px;
    height: 48px;
  }
  [data-visual="v5"] #worldChatPanel .gc-channel-empty b {
    font-size: 31px;
  }
}

/* Login/Register: replace the hard white card edge with a deep glass surface that keeps
   the Spotlight Card highlight language and remains fully functional. */
.gc-v5 .modal-overlay {
  background:
    radial-gradient(circle at 22% 18%, rgba(117,221,255,.13), transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(217,255,84,.07), transparent 34%),
    rgba(2,5,9,.9);
}
.gc-v5 .gc-21-auth-ui {
  border-color: rgba(181,212,245,.18);
  background:
    radial-gradient(620px circle at var(--spot-x) var(--spot-y), rgba(117,221,255,.16), transparent 50%),
    radial-gradient(420px circle at 82% 88%, rgba(93,114,255,.13), transparent 54%),
    linear-gradient(145deg, rgba(18,26,37,.96), rgba(6,10,16,.99));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 48px 140px rgba(0,0,0,.68),
    0 0 120px rgba(80,166,218,.12),
    inset 0 1px rgba(255,255,255,.075);
}
.gc-v5 .gc-21-auth-ui::before {
  opacity: .34;
  background:
    linear-gradient(112deg, transparent 18%, rgba(157,226,255,.14) 38%, transparent 57%),
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.24), transparent 34%);
  mix-blend-mode: screen;
}
.gc-v5 .gc-21-auth-ui::after {
  inset: 24px -34px -42px;
  border-color: rgba(117,221,255,.12);
  background: rgba(32,79,112,.16);
  box-shadow: 0 68px 120px rgba(0,0,0,.38), 0 0 90px rgba(70,174,220,.12);
  filter: blur(34px);
}
.gc-v5 .gc-21-auth-spotlight {
  opacity: .72;
  background: radial-gradient(500px circle at var(--spot-x) var(--spot-y), rgba(117,221,255,.12), transparent 68%);
}
.gc-v5 .gc-21-auth-rail {
  color: #f1f8ff;
  border-right-color: rgba(181,212,245,.13);
  background:
    radial-gradient(circle at 76% 13%, rgba(217,255,84,.15), transparent 27%),
    radial-gradient(circle at 4% 90%, rgba(117,221,255,.12), transparent 30%),
    linear-gradient(145deg, rgba(17,26,37,.88), rgba(8,13,20,.94));
}
.gc-v5 .gc-21-auth-rail::before,
.gc-v5 .gc-21-auth-rail::after {
  border-color: rgba(181,212,245,.14);
  box-shadow: 0 0 42px rgba(72,154,198,.07);
}
.gc-v5 .gc-21-auth-rail::after {
  border-color: rgba(217,255,84,.24);
}
.gc-v5 .gc-21-auth-kicker,
.gc-v5 .gc-21-auth-eyebrow {
  color: rgba(117,221,255,.68);
}
.gc-v5 .gc-21-auth-rail strong,
.gc-v5 .gc-21-auth-heading h2 {
  color: #f5f9ff !important;
}
.gc-v5 .gc-21-auth-rail strong em {
  color: transparent;
  background: linear-gradient(100deg, #e1ff76, #9af4cb 56%, #75ddff);
  background-clip: text;
  -webkit-background-clip: text;
}
.gc-v5 .gc-21-auth-rail > small,
.gc-v5 .gc-21-auth-heading p {
  color: rgba(213,227,243,.58) !important;
}
.gc-v5 .gc-21-auth-metrics b {
  color: #f4f8ff;
}
.gc-v5 .gc-21-auth-metrics small {
  color: rgba(213,227,243,.48);
}
.gc-v5 .gc-21-auth-main {
  background: linear-gradient(155deg, rgba(13,20,29,.78), rgba(7,11,18,.91));
  backdrop-filter: blur(30px) saturate(1.25);
}
.gc-v5 .gc-21-auth-body label,
.gc-v5 .gc-21-auth-body .reg-row > label,
.gc-v5 .gc-21-auth-body .gc21-si-field > label,
.gc-v5 .gc-21-auth-body .gc21-a3-field > label {
  color: rgba(220,233,247,.72);
}
.gc-v5 .gc-21-auth-body input,
.gc-v5 .gc-21-auth-body select {
  color: #f1f8ff !important;
  border-color: rgba(181,212,245,.18);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 10px 28px rgba(0,0,0,.16);
}
.gc-v5 .gc-21-auth-body input::placeholder {
  color: rgba(210,224,240,.35);
}
.gc-v5 .gc-21-auth-body input:focus,
.gc-v5 .gc-21-auth-body select:focus {
  border-color: rgba(117,221,255,.48);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(117,221,255,.08), 0 12px 32px rgba(0,0,0,.22);
}
.gc-v5 .gc-21-auth-body input:-webkit-autofill,
.gc-v5 .gc-21-auth-body input:-webkit-autofill:hover,
.gc-v5 .gc-21-auth-body input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f8ff;
  -webkit-box-shadow: 0 0 0 1000px #121b26 inset;
  caret-color: #f1f8ff;
  transition: background-color 9999s ease-out 0s;
}
.gc-v5 .gc-21-auth-body .btn-primary,
.gc-v5 .gc-21-auth-body .btn-submit {
  color: #071014 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #e1ff76, #d9ff54 55%, #9df5ce) !important;
  box-shadow: 0 16px 46px rgba(217,255,84,.16), inset 0 1px rgba(255,255,255,.58);
}
.gc-v5 .gc-21-auth-switch {
  color: rgba(213,227,243,.55);
}
.gc-v5 .gc-21-auth-switch a {
  color: #86e6ff;
}
.gc-v5 .gc21-a3-more {
  background: rgba(255,255,255,.045);
}
.gc-v5 .gc-21-auth-divider span {
  color: rgba(213,227,243,.45);
  background: #111923;
}


/* V6 final calibration: reserve the mobile guest-banner rail for Guide and keep its
   real composer entirely visible above the banner. */
@media (max-width: 760px) {
  [data-visual="v5"] .gc21-b-channel-view[data-view="ai"].active {
    padding-bottom: 150px;
  }
}


/* V6 final action calibration: keep the login CTA luminous on the dark glass card and
   remove the mobile guest rail only while Guide is active, so the composer is unobstructed. */
.gc-v5 .gc-21-auth-body .gc21-si-submit,
.gc-v5 .gc-21-auth-body .gc21-a3-submit,
.gc-v5 .gc-21-auth-body .btn-primary,
.gc-v5 .gc-21-auth-body .btn-submit {
  color: #071014 !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #e1ff76, #d9ff54 55%, #9df5ce) !important;
  box-shadow: 0 16px 46px rgba(217,255,84,.16), inset 0 1px rgba(255,255,255,.58) !important;
}
@media (max-width: 760px) {
  .gc21-b-shell:has(.gc21-b-channel-view[data-view="ai"].active) > .guest-banner {
    display: none !important;
  }
}


/* V6 final visibility guard: the guest rail must not cover the Home card row or the
   Guide interaction surface while either accepted view is active. */
@media (min-width: 761px) {
  .gc21-b-shell:has(#homeView.active) > .guest-banner {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* V6 mobile Guide composer: remove the obsolete three-tool cluster at phone width,
   giving the real textarea and Send button the full available row. */
@media (max-width: 760px) {
  [data-visual="v5"] #aiChatPanel .gc-21-v0chat-tools {
    display: none !important;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-composer-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-radius: 18px;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-composer-wrap textarea {
    height: 58px;
    min-height: 58px;
    padding: 8px 0;
    line-height: 1.4;
  }
  [data-visual="v5"] #aiChatPanel .gc-21-chat-send {
    min-height: 48px;
    padding-inline: 14px;
  }
}