/* ============================================================
   Globe Connect native 21st.dev visual system.
   No external fonts, CDN assets, React, or runtime dependencies.
   ============================================================ */
:root {
  --native-black: #0a0c10;
  --native-ink: #151821;
  --native-paper: #f7f6f1;
  --native-muted: #6d717b;
  --native-line: rgba(20, 23, 29, .12);
  --native-lime: #d9ff54;
  --native-cyan: #72dcff;
  --native-blue: #536cff;
  --native-glass: rgba(16, 20, 29, .66);
}

* { -webkit-tap-highlight-color: transparent; }
button, a, input, textarea, select { font: inherit; }

/* ---------- Scroll media expansion hero ---------- */
.welcome-screen[hidden] { display: none !important; }
/* BUG 修复：欢迎屏浮层不拦截页面点击（pointer-events 穿透），仅按钮区可交互 */
.welcome-screen { pointer-events: none; }
.welcome-screen .ws-actions,
.welcome-screen .ws-skip { pointer-events: auto; }
.welcome-screen {
  --expand: 0;
  --spot-x: 50%;
  --spot-y: 35%;
  position: fixed;
  inset: 0;
  /* BUG 修复：欢迎屏 z-index 低于导航(80)，不再拦截顶部导航点击 */
  z-index: 79;
  overflow: hidden;
  color: #fff;
  background: #06080c;
  isolation: isolate;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.welcome-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(135, 218, 255, .17), transparent 28%),
    linear-gradient(90deg, rgba(2,4,8,.82), transparent 30%, transparent 70%, rgba(2,4,8,.48)),
    linear-gradient(180deg, rgba(1,3,7,.5), transparent 32%, rgba(1,3,7,.86));
}
.ws-media-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(18vw + var(--expand) * 72vw);
  height: calc(23vw + var(--expand) * 69vh);
  max-width: 1180px;
  max-height: 820px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: calc(30px - var(--expand) * 18px);
  box-shadow: 0 45px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset;
  transform: translate(-50%, -50%) scale(calc(.95 + var(--expand) * .05));
}
.ws-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.58));
}
.ws-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.86) contrast(1.1) brightness(.78);
  transform: scale(1.06);
  animation: wsMediaFloat 14s ease-in-out infinite alternate;
}
.ws-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000, transparent 74%);
}
.ws-content {
  position: relative;
  z-index: 7;
  display: flex;
  min-height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px clamp(22px, 5vw, 76px);
  flex-direction: column;
}
.ws-brand { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.ws-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.92); }
.ws-title { max-width: 780px; margin: auto 0 0; font: 500 clamp(42px, 7.2vw, 106px)/.86 Georgia, serif; letter-spacing: -.075em; text-wrap: balance; text-shadow: 0 18px 45px rgba(0,0,0,.45); }
.ws-title em { color: var(--native-lime); font-weight: 400; }
.ws-subtitle { max-width: 580px; margin: 24px 0 0; color: rgba(255,255,255,.78); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.65; }
.ws-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ws-badges span, .ws-expand-hint {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(10,14,21,.42);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ws-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.ws-btn { position: relative; min-width: 132px; padding: 13px 18px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; cursor: pointer; transition: .22s ease; }
.ws-btn:hover { transform: translateY(-2px); }
.ws-btn-primary { border-color: var(--native-lime); color: #111; background: var(--native-lime); box-shadow: 0 13px 36px rgba(217,255,84,.18); }
.ws-btn-ghost { color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(16px); }
.ws-skip { width: max-content; margin-top: 14px; border: 0; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; }
.ws-skip:hover { color: var(--native-lime); }
.ws-stats { display: flex; gap: clamp(24px, 5vw, 78px); margin-top: auto; padding-top: 28px; }
.ws-stats div { display: flex; flex-direction: column; }
.ws-stats strong { font: 600 28px/1 Georgia, serif; color: #fff; }
.ws-stats span { margin-top: 5px; color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ws-preview-panel { position: absolute; right: clamp(28px, 5vw, 80px); bottom: clamp(84px, 15vh, 180px); z-index: 8; width: min(340px, 30vw); opacity: calc(.25 + var(--expand) * .75); transform: translateY(calc(34px - var(--expand) * 34px)); }
.preview-bubble { margin-top: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: rgba(10,14,22,.65); backdrop-filter: blur(16px); color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.55; }
.preview-ai { margin-left: 30px; border-color: rgba(217,255,84,.24); background: rgba(31,44,37,.75); }
.ws-expand-track { position: absolute; right: 50%; bottom: 28px; z-index: 9; width: min(310px, 40vw); height: 2px; background: rgba(255,255,255,.18); transform: translateX(50%); }
.ws-expand-track i { display: block; width: 100%; height: 100%; background: var(--native-lime); transform: scaleX(0); transform-origin: left; }
.ws-expand-hint { position: absolute; right: 50%; bottom: 36px; z-index: 9; transform: translateX(50%); white-space: nowrap; }
.welcome-screen.ws-hide { opacity: 0; transform: scale(1.025); pointer-events: none; }

@keyframes wsMediaFloat { from { transform: scale(1.06) translate3d(-1%, -1%, 0); } to { transform: scale(1.1) translate3d(1%, 1%, 0); } }

/* ---------- Animated hero navigation ---------- */
.gc-command-center { --spot-x: 50%; --spot-y: 30%; }
.gc-topline {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(114,220,255,.12), transparent 27%),
    #fff !important;
}
.gc-topline::before {
  content: "";
  position: absolute;
  inset: auto -15% -110% 34%;
  height: 180%;
  border: 1px solid rgba(61,105,255,.13);
  border-radius: 50%;
  animation: navOrbit 18s linear infinite;
  pointer-events: none;
}
.gc-topline::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.75) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: navSheen 7s ease-in-out infinite;
}
.gc-wordmark, .gc-route, .gc-top-actions { position: relative; z-index: 1; }
.gc-route h1 { animation: titleIn .7s cubic-bezier(.2,.8,.2,1) both; }
.gc-wordmark > span { box-shadow: 0 10px 28px rgba(217,255,84,.32); }
@keyframes navOrbit { to { transform: rotate(360deg); } }
@keyframes navSheen { 0%, 52% { transform: translateX(-130%); } 78%, 100% { transform: translateX(130%); } }
@keyframes titleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Spotlight card auth ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 24px; background: rgba(4,7,12,.74); backdrop-filter: blur(16px); }
.modal-content { width: min(1080px, 96vw); max-height: 94dvh; overflow: auto; border-radius: 24px; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.gc-auth-modal { position: relative; }
.gc-auth-modal .modal-close { z-index: 5; color: #fff !important; background: rgba(0,0,0,.42) !important; }
.gc-21-auth-ui {
  --spot-x: 50%; --spot-y: 30%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(430px, 1.22fr);
  min-height: 610px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  color: #171a21;
  background: #f7f4ec;
}
.gc-21-auth-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.94), rgba(255,255,255,.2) 34%, transparent 60%);
  opacity: .65;
}
.gc-21-auth-rail {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 48px;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 14%, rgba(218,255,84,.44), transparent 25%),
    linear-gradient(145deg, #10131b, #263b4c 68%, #5f7b8b);
}
.gc-21-auth-rail::before, .gc-21-auth-rail::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.gc-21-auth-rail::before { width: 430px; height: 430px; right: -230px; top: -130px; animation: authOrbit 16s linear infinite; }
.gc-21-auth-rail::after { width: 260px; height: 260px; right: -120px; top: -45px; border-color: rgba(217,255,84,.4); animation: authOrbit 11s linear infinite reverse; }
.gc-21-auth-kicker, .gc-21-auth-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.gc-21-auth-rail strong { position: relative; z-index: 1; margin-top: auto; font: 500 clamp(38px, 4vw, 57px)/.94 Georgia, serif; letter-spacing: -.06em; }
.gc-21-auth-rail strong em { color: var(--native-lime); }
.gc-21-auth-rail > small { position: relative; z-index: 1; max-width: 290px; margin-top: 18px; color: rgba(255,255,255,.68); line-height: 1.6; }
.gc-21-auth-orbit { position: absolute; top: 84px; right: 72px; width: 12px; height: 12px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 0 8px rgba(217,255,84,.17); animation: authPulse 2.4s ease-in-out infinite; }
.gc-21-auth-metrics { display: flex; gap: 25px; margin-top: 30px; }
.gc-21-auth-metrics span { display: flex; flex-direction: column; }
.gc-21-auth-metrics b { font-size: 16px; }
.gc-21-auth-metrics small { color: rgba(255,255,255,.48); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.gc-21-auth-main { position: relative; z-index: 1; padding: 48px clamp(32px, 5vw, 64px); background: rgba(255,255,255,.72); backdrop-filter: blur(12px); }
.gc-21-auth-heading { margin-bottom: 20px; }
.gc-21-auth-heading h2 { margin: 7px 0 4px; font: 600 38px/1 Georgia, serif; letter-spacing: -.055em; }
.gc-21-auth-heading p { margin: 0; color: #747982; }
.gc-21-auth-body { position: relative; z-index: 2; }
.gc-21-auth-body input, .gc-21-auth-body select { width: 100%; padding: 12px 13px; border: 1px solid #d6d3ca; border-radius: 7px; outline: 0; background: rgba(255,255,255,.78); color: #171a21; }
.gc-21-auth-body input:focus, .gc-21-auth-body select:focus { border-color: #526bff; box-shadow: 0 0 0 4px rgba(82,107,255,.1); }
.gc-21-auth-body label { color: #575c66; font-size: 11px; font-weight: 700; }
.gc-21-auth-body .reg-row, .gc21-si-field, .gc21-a3-field { margin-top: 13px; }
.gc-21-auth-body .reg-row > label, .gc21-si-field > label, .gc21-a3-field > label { display: block; margin-bottom: 6px; }
.gc21-field-error { color: #d23; font-size: 11px; font-weight: 600; margin-top: 4px; }
.gc21-si-input-wrap, .gc21-a3-input-wrap { position: relative; }
.gc21-si-eye { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.gc21-si-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; font-size: 11px; }
.gc21-si-row input { width: auto; }
.gc21-si-reset { color: #445dff; text-decoration: none; }
.gc21-si-submit, .gc21-a3-submit, .btn-primary { width: 100%; padding: 13px 16px; border: 0; border-radius: 7px; color: #fff; background: #11141a; cursor: pointer; font-weight: 800; transition: .2s ease; }
.gc21-si-submit:hover, .gc21-a3-submit:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(17,20,26,.18); }
.gc21-a3-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.gc21-a3-terms { display: grid; gap: 8px; margin-top: 15px; }
.gc21-a3-check, .gc21-si-check { display: flex; align-items: flex-start; gap: 7px; font-weight: 500 !important; }
.gc21-a3-check input, .gc21-si-check input { width: auto; margin-top: 2px; }
.gc21-a3-more { margin-top: 15px; border: 1px solid #d6d3ca; border-radius: 7px; background: rgba(255,255,255,.5); }
.gc21-a3-more summary { padding: 12px; cursor: pointer; font-size: 11px; font-weight: 800; }
.gc21-a3-more-inner { padding: 0 12px 15px; }
.gc-21-auth-divider { position: relative; margin: 20px 0 12px; text-align: center; color: #989ca4; font-size: 10px; }
.gc-21-auth-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e1ded6; }
.gc-21-auth-divider span { position: relative; padding: 0 10px; background: #f7f4ec; }
.gc-21-auth-provider { width: 100%; padding: 11px 14px; border: 1px solid #d6d3ca; border-radius: 7px; background: #fff; cursor: pointer; font-weight: 700; }
.gc-21-auth-provider-mark { display: inline-grid; width: 24px; height: 24px; margin-right: 9px; place-items: center; border-radius: 50%; background: #f0f1f4; color: #526bff; font-weight: 900; }
.gc-21-auth-switch { margin: 18px 0 0; text-align: center; color: #747982; font-size: 11px; }
.gc-21-auth-switch a { color: #445dff; font-weight: 800; text-decoration: none; }
@keyframes authOrbit { to { transform: rotate(360deg); } }
@keyframes authPulse { 50% { transform: scale(.7); box-shadow: 0 0 0 14px rgba(217,255,84,0); } }

/* ---------- Shell / atlas / timeline ---------- */
.gc-canvas { flex: 1; min-height: 0; overflow: auto; scroll-behavior: smooth; }
.gc-atlas { min-height: 780px; }
.gc-atlas .map-stage { position: relative; height: 470px; min-height: 470px; }
.gc-atlas-side .gc-orbit-timeline { display: none; }
.gc-orbit-timeline { display: grid; grid-template-columns: minmax(220px, .34fr) 1fr; gap: 26px; margin-top: 18px; padding: 22px 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: radial-gradient(circle at 70% 50%, rgba(103,145,255,.13), transparent 38%), #0c1017; overflow: hidden; }
.gc-orbit-copy { align-self: center; }
.gc-orbit-copy > span { color: var(--native-lime); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.gc-orbit-copy h3 { margin: 8px 0 10px; color: #fff; font: 600 clamp(25px, 3vw, 38px)/1 Georgia, serif; letter-spacing: -.05em; }
.gc-orbit-detail { max-width: 250px; margin: 0; color: rgba(255,255,255,.55); font-size: 12px; }
.gc-orbit-stage { position: relative; min-height: 280px; }
.gc-orbit-ring { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; border: 1px solid rgba(130,210,255,.2); border-radius: 50%; transform: translate(-50%,-50%); }
.gc-orbit-ring.ring-b { width: 180px; height: 180px; border-style: dashed; animation: orbitSpin 22s linear infinite; }
.gc-orbit-core { position: absolute; left: 50%; top: 50%; display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: radial-gradient(circle at 32% 28%, #a9f2ff, #6075e8 46%, #171c36 72%); box-shadow: 0 0 55px rgba(100,126,255,.42); transform: translate(-50%,-50%); }
.gc-orbit-core i { width: 28px; height: 28px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 24px rgba(217,255,84,.55); }
.gc-orbit-node { position: absolute; left: var(--node-x); top: var(--node-y); display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.58); cursor: pointer; transform: translate(-50%,-50%); transition: .22s ease; }
.gc-orbit-node i { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(134,204,255,.28); border-radius: 50%; background: #111721; box-shadow: 0 0 0 6px rgba(95,139,255,.05); font-size: 9px; font-style: normal; }
.gc-orbit-node span { font-size: 10px; font-weight: 800; }
.gc-orbit-node:hover, .gc-orbit-node.active { color: #fff; transform: translate(-50%,-50%) scale(1.08); }
.gc-orbit-node.active i { color: #10131a; border-color: var(--native-lime); background: var(--native-lime); box-shadow: 0 0 24px rgba(217,255,84,.3); }
@keyframes orbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ---------- Spline-style globe ---------- */
.gc-globe-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, #17243a, #080d16 68%); }
.gc-globe-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.gc-globe-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px rgba(0,0,0,.72); }
.gc-globe-copy { position: absolute; top: 22px; left: 24px; display: flex; flex-direction: column; pointer-events: none; }
.gc-globe-copy span { color: var(--native-lime); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.gc-globe-copy strong { margin-top: 4px; color: rgba(255,255,255,.87); font: 500 18px Georgia, serif; }
.gc-globe-controls { position: absolute; top: 20px; right: 20px; display: flex; gap: 7px; }
.gc-globe-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #fff; background: rgba(10,15,24,.66); cursor: pointer; backdrop-filter: blur(12px); }
.gc-globe-controls button.active { color: #111; border-color: var(--native-lime); background: var(--native-lime); }
.gc-globe-tooltip { position: absolute; z-index: 3; display: flex; min-width: 125px; padding: 9px 11px; flex-direction: column; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; pointer-events: none; background: rgba(9,14,23,.88); box-shadow: 0 16px 35px rgba(0,0,0,.38); backdrop-filter: blur(15px); }
.gc-globe-tooltip b { color: #fff; font-size: 11px; }
.gc-globe-tooltip span { color: rgba(255,255,255,.55); font-size: 9px; }
.gc-globe-legend { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.gc-globe-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 13px var(--native-lime); }

/* ---------- Liquid glass AI panel ---------- */
.gc-full-panel { position: relative; min-height: calc(100dvh - 132px); }
.gc-21-chat-panel { position: relative; display: flex; min-height: inherit; padding: 0; flex-direction: column; overflow: hidden; color: #eef7ff; background: radial-gradient(circle at 72% 25%, rgba(102,120,255,.2), transparent 31%), linear-gradient(155deg, #10141d, #151820 62%, #0a0c11) !important; }
.gc-21-v0chat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(550px circle at var(--liquid-x, 70%) var(--liquid-y, 40%), rgba(217,255,84,.09), transparent 60%); }
.gc-21-v0chat-noise { position: absolute; inset: 0; opacity: .09; pointer-events: none; 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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.gc-21-chat-header { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 25px 30px 20px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.015); }
.gc-21-chat-orb { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efffff, #738cff 38%, #14182a 72%); box-shadow: 0 0 38px rgba(100,130,255,.45); }
.gc-21-chat-orb span { width: 18px; height: 18px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 22px var(--native-lime); }
.gc-21-chat-header h2 { margin: 3px 0; color: #fff; font: 600 25px Georgia, serif; letter-spacing: -.04em; }
.gc-21-chat-header p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; }
.gc-21-chat-eyebrow { color: rgba(217,255,84,.8); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.gc-21-chat-live { margin-left: auto; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .13em; }
.gc-21-chat-live i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 10px var(--native-lime); }
.gc-21-v0chat-chips { position: relative; z-index: 1; display: flex; gap: 8px; padding: 16px 30px 0; overflow-x: auto; }
.gc-21-v0chat-chip { flex: none; padding: 7px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.67); background: rgba(255,255,255,.04); cursor: pointer; font-size: 10px; }
.gc-21-v0chat-chip:hover { color: #12151c; border-color: var(--native-lime); background: var(--native-lime); }
.gc-21-chat-messages { position: relative; z-index: 1; flex: 1; min-height: 320px; overflow: auto; padding: 24px 30px; }
.gc-21-chat-messages .message-list { height: auto; padding: 0; background: transparent !important; }
.ai-message { display: flex; gap: 11px; margin: 0 0 18px; }
.ai-message.user { flex-direction: row-reverse; }
.ai-message-avatar { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #10131a; background: var(--native-lime); font-size: 11px; font-weight: 900; }
.ai-message.user .ai-message-avatar { color: #fff; background: #5d72ff; }
.ai-message > div > p { max-width: 650px; margin: 0; padding: 13px 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 4px 16px 16px 16px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.055); line-height: 1.6; }
.ai-message.user > div > p { border-radius: 16px 4px 16px 16px; color: #fff; background: rgba(93,114,255,.33); }
.ai-message time { display: block; margin-top: 5px; color: rgba(255,255,255,.35); font-size: 9px; }
.ai-message.error > div > p { border-color: rgba(255,100,110,.25); color: #ffb0b8; background: rgba(255,70,85,.09); }
.gc-21-v0chat-command-palette { position: relative; z-index: 2; display: grid; gap: 4px; margin: 0 30px 8px; padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(10,14,22,.95); box-shadow: 0 18px 55px rgba(0,0,0,.45); }
.gc-21-v0chat-command-palette[hidden] { display: none; }
.gc-21-v0chat-command-item { display: grid; grid-template-columns: 95px 1fr; padding: 9px 10px; border: 0; border-radius: 8px; color: rgba(255,255,255,.66); background: transparent; text-align: left; cursor: pointer; }
.gc-21-v0chat-command-item:hover, .gc-21-v0chat-command-item.active { color: #fff; background: rgba(255,255,255,.07); }
.gc-21-v0chat-command-item b { color: var(--native-lime); }
.gc-21-v0chat-command-item span { font-size: 11px; }
.gc-21-v0chat-attachments { position: relative; z-index: 2; display: flex; gap: 6px; padding: 0 30px 8px; }
.gc-21-v0chat-attach-chip { padding: 6px 8px; border: 1px solid rgba(114,220,255,.18); border-radius: 8px; color: #beefff; background: rgba(114,220,255,.07); font-size: 10px; }
.gc-21-v0chat-attach-chip button { margin-left: 6px; border: 0; color: #fff; background: transparent; cursor: pointer; }
.gc-21-chat-composer-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 10px; margin: 0 24px 24px; padding: 10px 10px 10px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); box-shadow: 0 20px 55px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.15); backdrop-filter: blur(22px); }
.gc-21-chat-composer-wrap textarea { width: 100%; min-height: 60px; padding: 8px 0; resize: none; border: 0; outline: 0; color: #fff; background: transparent; line-height: 1.5; }
.gc-21-chat-composer-wrap textarea::placeholder { color: rgba(255,255,255,.33); }
.gc-21-v0chat-tools { display: flex; gap: 4px; padding-bottom: 7px; }
.gc-21-v0chat-tool { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: rgba(255,255,255,.6); background: rgba(255,255,255,.07); cursor: pointer; }
.gc-21-v0chat-tool:hover, .gc-21-v0chat-tool.active { color: #10131a; background: var(--native-lime); }
.gc-liquid-button { position: relative; display: flex; align-items: center; gap: 8px; min-width: 105px; padding: 13px 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.44); border-radius: 999px; color: #11141a; background: radial-gradient(circle at var(--liquid-x, 30%) var(--liquid-y, 30%), #fff, #d9dddf 42%, #a9b0b8 100%); box-shadow: 0 12px 30px rgba(0,0,0,.36), inset 0 2px 6px rgba(255,255,255,.9), inset 0 -3px 7px rgba(40,48,62,.25); cursor: pointer; font-size: 11px; font-weight: 900; }
.gc-liquid-button b { margin-left: 4px; font-size: 15px; }
.gc-liquid-shine { position: absolute; width: 60px; height: 140%; top: -20%; left: -80px; background: rgba(255,255,255,.8); filter: blur(8px); transform: rotate(20deg); transition: .3s ease; }
.gc-liquid-button:hover .gc-liquid-shine { left: calc(100% + 10px); }
.gc-liquid-button.has-text { box-shadow: 0 12px 35px rgba(217,255,84,.26), inset 0 2px 7px #fff; }

/* ---------- Group testimonials / profile / footer ---------- */
.gc21-ct { display: grid; grid-template-columns: 250px minmax(420px, 1fr) 220px; min-height: calc(100dvh - 132px); }
.gc21-ct-sidebar { padding: 24px 16px; border-right: 1px solid var(--gc-stroke, #e4e6eb); background: #f2f2ee; }
.gc21-ct-sidebar-title { padding: 0 8px 16px; }
.gc21-ct-sidebar-title span { color: var(--native-blue); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.gc21-ct-sidebar-title b { display: block; margin-top: 4px; color: #13161d; font: 600 25px Georgia, serif; }
.gc21-ct-sidebar-title small { display: block; margin-top: 5px; color: #777b84; line-height: 1.4; }
.gc21-ct-search { display: flex; align-items: center; gap: 7px; margin: 0 6px 15px; padding: 9px 10px; border: 1px solid #d8d9df; border-radius: 9px; background: #fff; }
.gc21-ct-search input { width: 100%; border: 0; outline: 0; background: transparent; }
.gc21-ct-tabs { display: grid; gap: 7px; max-height: calc(100dvh - 300px); overflow: auto; }
.gc21-ct-tab { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid transparent; border-radius: 12px; color: #333740; background: transparent; text-align: left; cursor: pointer; }
.gc21-ct-tab:nth-child(3n+1) { transform: translateY(2px); }
.gc21-ct-tab:nth-child(3n+2) { transform: translateY(-2px); }
.gc21-ct-tab:hover, .gc21-ct-tab.active { border-color: #c9d0ff; background: #fff; box-shadow: 0 12px 28px rgba(20,28,54,.08); }
.gc21-ct-tab.active { box-shadow: inset 3px 0 var(--native-blue), 0 12px 28px rgba(20,28,54,.08); }
.gc21-ct-tab-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #10131a; background: linear-gradient(145deg, var(--native-lime), #90e7ff); font-size: 12px; font-weight: 900; }
.gc21-ct-tab-copy { min-width: 0; display: flex; flex-direction: column; }
.gc21-ct-tab-copy b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gc21-ct-tab-copy small { overflow: hidden; margin-top: 2px; color: #858991; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.gc21-ct-tab em { color: #8b8f97; font-size: 9px; font-style: normal; }
.gc21-ct-leave { width: calc(100% - 12px); margin: 15px 6px 0; padding: 9px; border: 1px solid #d5d8df; border-radius: 8px; color: #555963; background: transparent; cursor: pointer; }
.gc21-ct-main { min-width: 0; display: flex; flex-direction: column; background: #fff; }
.gc21-ct-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #e8e9ed; }
.gc21-ct-chat-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.gc21-ct-chat-title h2 { margin: 0; color: #161920; font-size: 17px; }
.gc21-ct-chat-title p { margin: 3px 0 0; overflow: hidden; color: #80848c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gc21-ct-notices { padding: 0 18px; }
.gc21-ct-messages { flex: 1; min-height: 380px; background: #f8f8f5 !important; }
.gc21-ct-composer { margin: 12px !important; }
.gc21-ct-members { padding: 24px 16px; border-left: 1px solid #e4e6eb; background: #f5f5f1; }
.gc21-ct-member-stack { margin-top: 14px; }

.gc-profile-card { --spot-x: 50%; --spot-y: 30%; position: relative; width: min(780px, 92vw); overflow: hidden; padding: 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; color: #eef7ff; background: radial-gradient(650px circle at var(--spot-x) var(--spot-y), rgba(114,220,255,.2), transparent 48%), linear-gradient(150deg, #12161e, #1b202a); box-shadow: 0 35px 100px rgba(0,0,0,.55); }
.gc-profile-spotlight { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(180px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.35), transparent 70%); }
.gc-profile-status, .gc-profile-identity, .gc-profile-stats, .gc-profile-bio, .gc-profile-settings, .gc-profile-actions { position: relative; z-index: 1; }
.gc-profile-status { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.58); font-size: 10px; }
.gc-profile-status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--native-lime); box-shadow: 0 0 10px var(--native-lime); }
.gc-profile-status time { margin-left: auto; }
.gc-profile-identity { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.gc-profile-avatar { width: 84px; height: 84px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #fff; cursor: pointer; }
.gc-profile-identity > div > span { color: var(--native-lime); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.gc-profile-identity h2 { margin: 3px 0; color: #fff; font: 600 32px Georgia, serif; letter-spacing: -.045em; }
.gc-profile-identity p { margin: 0; color: rgba(255,255,255,.53); font-size: 11px; }
.gc-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); }
.gc-profile-stats span { display: flex; padding: 14px; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); }
.gc-profile-stats span:last-child { border: 0; }
.gc-profile-stats b { color: #fff; font-size: 20px; }
.gc-profile-stats small { color: rgba(255,255,255,.44); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.gc-profile-bio { margin-top: 18px; }
.gc-profile-bio > label { display: block; margin-bottom: 6px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.gc-profile-bio > div { display: flex; gap: 8px; }
.gc-profile-bio input { flex: 1; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #fff; background: rgba(255,255,255,.055); }
.gc-profile-bio button, .gc-profile-actions button { padding: 10px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); cursor: pointer; }
.gc-profile-bio button:hover, .gc-profile-actions button:hover { color: #111; border-color: var(--native-lime); background: var(--native-lime); }
.gc-profile-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.gc-profile-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.03); }
.gc-profile-setting span { display: flex; flex-direction: column; }
.gc-profile-setting b { font-size: 10px; }
.gc-profile-setting small { color: rgba(255,255,255,.38); font-size: 8px; }
.gc-switch { position: relative; display: inline-flex; }
.gc-switch input { position: absolute; opacity: 0; }
.gc-switch i { position: relative; display: block; width: 38px; height: 21px; border-radius: 999px; background: rgba(255,255,255,.15); cursor: pointer; transition: .2s; }
.gc-switch i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; }
.gc-switch input:checked + i { background: var(--native-lime); }
.gc-switch input:checked + i::after { transform: translateX(17px); background: #111; }
.gc-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gc-profile-actions .danger { margin-left: auto; color: #ff9aa4; }

.gc-footer-background { display: none; position: relative; min-height: 300px; margin: 14px 22px 22px; overflow: hidden; border: 1px solid var(--gc-stroke, #e2e4e8); border-radius: 20px; color: #fff; background: #0d1117; }
.gc-footer-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; }
.gc-footer-paths path { fill: none; stroke: url(#gcPathFade); stroke-width: 1.1; stroke-dasharray: 12 18; animation: pathFlow 12s linear infinite; }
.gc-footer-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; padding: 48px; }
.gc-footer-inner h2 { max-width: 620px; margin: 8px 0 0; font: 500 clamp(35px, 5vw, 72px)/.92 Georgia, serif; letter-spacing: -.07em; }
.gc-footer-inner h2 em { color: var(--native-lime); }
.gc-footer-nav { display: grid; align-content: end; grid-template-columns: 1fr 1fr; gap: 8px; }
.gc-footer-nav button { padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.035); text-align: left; cursor: pointer; }
.gc-footer-nav button:hover { color: #111; border-color: var(--native-lime); background: var(--native-lime); }
.gc-footer-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 0 48px 28px; color: rgba(255,255,255,.38); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
@keyframes pathFlow { to { stroke-dashoffset: -240; } }

/* ---------- Dark mode and responsive ---------- */
body.gc-dark-mode .gc-command-center { background: #0e1015 !important; color: #f1f3f7 !important; }
body.gc-dark-mode .gc-topline, body.gc-dark-mode .gc-atlas-side, body.gc-dark-mode .gc-directory, body.gc-dark-mode .gc-conversation, body.gc-dark-mode .gc-full-panel { border-color: #2a2e37 !important; background: #171a21 !important; color: #f5f7fb !important; }
body.gc-dark-mode .gc-route h1, body.gc-dark-mode .gc-directory-title h2 { color: #fff !important; }
body.gc-dark-mode .gc-search-field, body.gc-dark-mode .gc-command-search { border-color: #2a2e37 !important; background: #22262f !important; }
body.gc-dark-mode input { color: #fff; }
body.gc-dark-mode .gc-rail { background: #0e1015 !important; border-color: #2a2e37 !important; }
body.gc-dark-mode .gc-rail-action { color: rgba(241,243,247,.72) !important; }
body.gc-dark-mode .gc-rail-action:hover, body.gc-dark-mode .gc-rail-action.active { color: var(--native-lime, #d9ff54) !important; }
body.gc-dark-mode .gc-context, body.gc-dark-mode .gc-mini-stat, body.gc-dark-mode .gc-discover-card { background: #171a21 !important; border-color: #2a2e37 !important; color: #f5f7fb !important; }
body.gc-dark-mode .gc-context-label, body.gc-dark-mode .gc-section-kicker, body.gc-dark-mode .gc-directory-count { color: rgba(245,247,251,.58) !important; }
body.gc-dark-mode .gc-atlas, body.gc-dark-mode .gc-atlas-side { background: #171a21 !important; border-color: #2a2e37 !important; color: #f5f7fb !important; }
body.gc-dark-mode .gc-footer-background { background: #0d1117 !important; border-color: #1f242d !important; }

/* B 方案主界面外壳：品牌 orb / 状态灯 / 用户条 / 空态 */
.gc-wordmark { display: flex; align-items: center; gap: 10px; }
.gc-wm-orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9ff54 45%, #0f9d8f 100%); box-shadow: 0 0 18px rgba(217,255,84,.55), 0 0 46px rgba(31,211,179,.35); animation: orbPulse 3.2s ease-in-out infinite; }
.gc-wordmark strong { font-size: 15px; letter-spacing: .24em; line-height: 1.12; }
.net-status { font-style: normal; font-weight: 600; }
.net-status.online { color: #5ee08a; text-shadow: 0 0 12px rgba(94,224,138,.45); }
.net-status:not(.online) { color: rgba(245,247,251,.55); }
.gc-user-name { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: rgba(245,247,251,.66); text-align: center; margin-top: 6px; }
.gc-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 16px; text-align: center; color: rgba(245,247,251,.72); }
.gc-empty-orb { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(217,255,84,.75) 45%, rgba(15,157,143,.7)); box-shadow: 0 0 26px rgba(217,255,84,.35); animation: orbPulse 3s ease-in-out infinite; }
.gc-empty-action { margin-top: 2px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(217,255,84,.45); background: rgba(217,255,84,.08); color: #d9ff54; cursor: pointer; font-size: 12px; }
.gc-empty-action:hover { background: rgba(217,255,84,.18); }
@keyframes orbPulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
body.gc-dark-mode .empty-chat-card { background: linear-gradient(160deg, rgba(34,38,47,.92), rgba(23,26,33,.94)) !important; border-color: #2a2e37 !important; }
body.gc-dark-mode .empty-chat-card h3 { color: #fff !important; }
body.gc-dark-mode .empty-chat-card p { color: rgba(245,247,251,.6) !important; }
body.gc-dark-mode .gc-route h1 { background: linear-gradient(100deg, #fff, #d9ff54 70%, #4ee6c8); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

@media (max-width: 1050px) {
  .gc-21-auth-ui { grid-template-columns: 1fr; }
  .gc-21-auth-rail { min-height: 230px; }
  .gc-21-auth-rail strong { margin-top: 90px; }
  .gc-21-auth-metrics { display: none; }
  .gc21-ct { grid-template-columns: 220px 1fr; }
  .gc21-ct-members { display: none; }
  .ws-preview-panel { display: none; }
}
@media (max-width: 760px) {
  .welcome-screen { overflow-y: auto; }
  .ws-content { padding: 22px 18px 80px; }
  .ws-title { font-size: 44px; }
  .ws-media-frame { width: calc(44vw + var(--expand) * 50vw); height: calc(50vw + var(--expand) * 66vh); }
  .ws-stats { gap: 22px; }
  .ws-expand-track, .ws-expand-hint { display: none; }
  .modal-overlay { padding: 8px; }
  .modal-content { width: 100%; max-height: 98dvh; border-radius: 16px; }
  .gc-21-auth-main { padding: 28px 20px; }
  .gc21-a3-fields-row, .gc-profile-settings, .gc-footer-inner { grid-template-columns: 1fr; }
  .gc-orbit-timeline { grid-template-columns: 1fr; }
  .gc-orbit-stage { min-height: 250px; }
  .gc-footer-inner { padding: 30px 24px 50px; }
  .gc-footer-meta { padding: 0 24px 20px; }
  .gc-21-chat-header, .gc-21-v0chat-chips { padding-left: 18px; padding-right: 18px; }
  .gc-21-chat-messages { padding: 20px 18px; }
  .gc-21-chat-composer-wrap { margin: 0 12px 12px; grid-template-columns: 1fr auto; }
  .gc-21-v0chat-tools { display: none; }
  .gc21-ct { display: block; }
  .gc21-ct-sidebar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}


/* Command-center direct children must not consume the workbench width. */
.gc-command-center > .guest-banner {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  z-index: 10020 !important;
  width: min(680px, calc(100vw - 120px)) !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background: rgba(10, 13, 20, .92) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(18px);
}
.gc-command-center > #modalRoot,
.gc-command-center > #crowdWrap { flex: none; }
.gc-command-center > #modalRoot:empty { width: 0; }


/* Keep the media-expansion hero readable over the restored local artwork. */
.welcome-screen .ws-title { color: #f7fbff !important; }
.ws-media-frame img { filter: saturate(.82) contrast(1.16) brightness(.52) !important; }
.ws-media-frame::after {
  background:
    radial-gradient(circle at 56% 42%, transparent 0 28%, rgba(0,0,0,.22) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66)) !important;
}


.welcome-screen {
  background:
    radial-gradient(circle at 50% 44%, rgba(38, 72, 95, .48), transparent 35%),
    linear-gradient(135deg, #080d13, #0d171d 55%, #11161c) !important;
}

/* ============================================================
   全局图标尺寸约束
   所有图标 PNG 为 1024x1024 原图，img.icon 无尺寸时会把按钮撑爆。
   于 2026-09-24 补回。
   ============================================================ */
img.icon { width: 18px; height: 18px; object-fit: contain; flex: none; }
/* 头像容器内 img（1024 原图 / SVG sprite）必须撑满容器，否则撑爆布局 */
.avatar > img, .avatar-sprite > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar, .avatar-sprite { overflow: hidden; }
.tab-search .icon { width: 15px; height: 15px; opacity: .48; }
.tab-icon .icon { width: 17px; height: 17px; opacity: .65; }
.tab-lang .lang-inner .icon { width: 16px; height: 16px; }
.composer-search .icon, .friend-search .icon, .mini-search .icon, .gc-search-field .icon { width: 15px; height: 15px; opacity: .48; }

/* ---------- 消息输入区（composer）布局 ---------- */
.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 12px 12px 18px;
  border: 1px solid var(--gc-stroke, #2a2e37);
  border-radius: 12px;
  background: #fff;
}
.composer .composer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.composer .composer-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
}
.composer .icon-button, .composer .round-btn {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid var(--gc-stroke, #2a2e37);
  border-radius: 10px;
  color: var(--gc-copy, #1d2028);
  background: #f2f4f7;
  cursor: pointer;
}
.composer .icon-button:hover { background: #e6e9ef; }
.composer .round-btn#btnSend, .composer .icon-button.send {
  color: #fff;
  border-color: transparent;
  background: var(--gc-blue, #536cff);
}
.composer .icon-button.send:disabled, .composer .round-btn#btnSend:disabled { opacity: .45; cursor: default; }

/* ============================================================
   GC Command Center shell layout
   v1.10.0 误删 v2-theme.css 时丢失的骨架布局，于 2026-09-24 补回。
   深色由 body.gc-dark-mode 覆盖，此处只恢复结构与尺寸。
   ============================================================ */
.gc-command-center {
  display: flex !important;
  min-height: 100dvh !important;
  width: 100% !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.gc-rail {
  display: flex;
  flex: 0 0 78px;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  color: #fff;
  background: #0a0c10;
}
.gc-rail-mark { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 40px; border: 2px solid var(--native-lime, #d9ff54); border-radius: 13px; color: var(--native-lime, #d9ff54); font-size: 25px; }
.gc-rail-stack, .gc-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.gc-rail-bottom { margin-top: auto; }
.gc-rail-action { position: relative; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 13px; color: #747986; background: transparent; cursor: pointer; font-size: 19px; transition: .18s ease; }
.gc-rail-action:hover { color: #fff; background: #252a35; transform: translateY(-2px); }
.gc-rail-action.active { color: #0a0c10; background: var(--native-lime, #d9ff54); }
.gc-rail-avatar { width: 38px !important; height: 38px !important; border: 2px solid #fff !important; }
.gc-workbench { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.gc-topline { display: flex; align-items: center; gap: 30px; min-height: 94px; padding: 18px 32px; }
.gc-wordmark { width: 150px; }
.gc-route { min-width: 0; flex: 1; }
.gc-top-actions { display: flex; align-items: center; gap: 10px; }
.gc-command-search, .gc-search-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 10px; color: var(--gc-dim, #858b9a); background: #f7f8fa; }
.gc-command-search { width: 220px; padding: 9px 12px; }
.gc-command-search input, .gc-search-field input { width: 100%; border: 0; outline: 0; color: var(--gc-copy, #1d2028); background: transparent; font: inherit; font-size: 12px; }
.gc-top-icon, .gc-plus { display: grid; place-items: center; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 10px; color: var(--gc-copy, #1d2028); background: #fff; cursor: pointer; }
.gc-top-icon { width: 38px; height: 38px; font-size: 17px; }
.gc-canvas { display: flex; min-height: 0; flex: 1; padding: 20px; }
.tab-pane { display: none; height: 100%; min-height: 0; width: 100%; }
.tab-pane.active { display: flex; }
.gc-canvas .tab-pane.active { min-width: 0; flex: 1; height: calc(100dvh - 155px); min-height: 0; max-height: calc(100dvh - 155px); }
.friends-pane { flex-direction: row; height: 100%; min-height: 0; }
.gc-directory { display: flex; width: 292px; flex: 0 0 292px; flex-direction: column; padding: 26px 20px 10px; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 18px; background: var(--gc-card, #171a21); }
.gc-directory-title { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.gc-directory-title h2 { margin: 0; color: var(--gc-black, #fff); font-size: 30px; letter-spacing: -.07em; }
.gc-plus { width: 32px; height: 32px; color: var(--gc-black, #0a0c10); background: var(--native-lime, #d9ff54); border: 0; font-size: 20px; }
.gc-directory-count { margin: 5px 0 22px; color: var(--gc-dim, #858b9a); font-size: 11px; }
.gc-search-field { padding: 10px 12px; }
.gc-filter-tabs { display: flex; gap: 5px; margin: 17px 0 8px; overflow-x: auto; border-bottom: 1px solid var(--gc-stroke, #2a2e37); padding-bottom: 9px; }
.gc-filter-tabs .friend-tab { flex: none; padding: 7px 9px; border: 0; border-radius: 7px; color: var(--gc-dim, #858b9a); background: transparent; font-size: 10px; cursor: pointer; }
.gc-filter-tabs .friend-tab.active { color: var(--gc-black, #0a0c10); background: var(--native-lime, #d9ff54); }
.gc-directory .friend-list { min-height: 0; flex: 1; max-height: calc(100dvh - 260px); padding: 5px 0; overflow-y: auto; }
.gc-directory .friend-item { margin: 3px 0; border-radius: 10px !important; }
.gc-directory .friend-item.active { color: var(--gc-black, #0a0c10) !important; background: #edf0f5 !important; box-shadow: inset 3px 0 var(--gc-blue, #536cff) !important; }
.gc-conversation { min-width: 0; flex: 1; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 18px; background: var(--gc-card, #171a21) !important; overflow: hidden; }
.gc-conversation .chat-header { background: var(--gc-card, #171a21) !important; border-bottom: 1px solid var(--gc-stroke, #2a2e37) !important; }
.gc-conversation .message-list { background: #fbfcfd !important; }
body.gc-dark-mode .gc-conversation .message-list { background: #12151c !important; }
body.gc-dark-mode .gc-conversation .composer { background: #1b1f28 !important; border-color: #2a2e37 !important; }
body.gc-dark-mode .composer .composer-search input { color: #f1f3f7; }
body.gc-dark-mode .composer .icon-button, body.gc-dark-mode .composer .round-btn { border-color: #2a2e37; background: #232833; color: #f1f3f7; }
body.gc-dark-mode .composer .icon-button:hover { background: #2b3140; }
body.gc-dark-mode .composer .round-btn#btnSend, body.gc-dark-mode .composer .icon-button.send { border-color: transparent; background: var(--gc-blue, #536cff); color: #fff; }
.gc-conversation .composer { background: #fff !important; border-color: var(--gc-stroke, #2a2e37) !important; box-shadow: none !important; }
.gc-context { display: flex; width: 170px; flex: 0 0 170px; flex-direction: column; gap: 12px; padding: 14px 2px 10px 8px; }
.gc-context-label { color: var(--gc-dim, #858b9a); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.gc-discover-card { display: flex; min-height: 178px; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 15px; color: #fff; background: var(--gc-blue, #536cff); }
.gc-discover-card span { color: var(--native-lime, #d9ff54); font-size: 22px; }
.gc-discover-card strong { font-size: 16px; line-height: 1.08; letter-spacing: -.05em; }
.gc-discover-card button { padding: 0; border: 0; color: var(--native-lime, #d9ff54); background: transparent; text-align: left; cursor: pointer; font-size: 10px; font-weight: 800; }
.gc-mini-stat { display: flex; align-items: center; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--gc-stroke, #2a2e37); }
.gc-mini-stat b { color: var(--gc-black, #fff); font-size: 18px; }
.gc-mini-stat span { color: var(--gc-dim, #858b9a); font-size: 10px; line-height: 1.15; }
.gc-full-panel { width: 100%; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 18px; overflow: hidden; background: var(--gc-card, #171a21) !important; }
.gc-atlas { min-width: 0; flex: 1; padding: 30px; border: 1px solid var(--gc-stroke, #2a2e37); border-radius: 18px; background: var(--gc-black, #0a0c10) !important; color: #fff; overflow: hidden; }
.gc-atlas h2 { margin: 9px 0 18px; color: #fff; font-size: clamp(34px, 5vw, 68px); line-height: .92; letter-spacing: -.08em; }
.gc-atlas .map-stage { height: calc(100% - 125px); min-height: 400px; border-radius: 14px; background: #1d212b; overflow: hidden; }
.gc-atlas-side { width: 310px; flex: 0 0 310px; margin-left: 16px; padding: 28px 20px; border-radius: 18px; background: var(--gc-card, #171a21); overflow: auto; }
.gc-atlas-side h3 { margin: 8px 0 15px; font-size: 22px; letter-spacing: -.05em; }
.gc-atlas-side .card-grid { display: grid; gap: 9px; }
@media (max-width: 1100px) { .gc-context { display: none; } .gc-command-search { width: 150px; } }
@media (max-width: 760px) {
  .gc-rail { flex-basis: 58px; padding: 12px 7px; } .gc-rail-mark { width: 36px; height: 36px; margin-bottom: 25px; }
  .gc-rail-action { width: 38px; height: 38px; } .gc-topline { gap: 12px; padding: 13px 14px; }
  .gc-wordmark { width: auto; } .gc-wordmark strong, .gc-route, .gc-top-icon:first-of-type { display: none; }
  .gc-command-search { flex: 1; width: auto; } .gc-canvas { padding: 10px; } .gc-directory { width: 100%; flex-basis: 100%; }
  .gc-canvas .friends-pane { display: block !important; } .gc-conversation { display: none; }
  .gc-canvas .friends-pane .gc-directory { min-height: calc(100dvh - 120px); }
  .gc-atlas { padding: 20px; } .gc-atlas-side { display: none; }
}

/* ============================================================
   Globe Connect B rebuild · native 21st.dev composition
   ============================================================ */
html, body { min-width: 0; margin: 0; }
body { overflow-x: hidden; background: #eeeDE6; }
#app { min-height: 100dvh; }
.gc21-b-shell {
  --gc21-ink: #111318;
  --gc21-muted: #70757e;
  --gc21-paper: #f6f5ef;
  --gc21-line: rgba(17,19,24,.12);
  --gc21-lime: #d9ff54;
  --gc21-blue: #536cff;
  --gc21-cyan: #72dcff;
  position: relative;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--gc21-ink);
  background:
    radial-gradient(circle at 14% 9%, rgba(114,220,255,.19), transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(217,255,84,.18), transparent 26%),
    linear-gradient(180deg, #fbfbf8 0%, #f2f1eb 56%, #eae9e2 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}
.gc21-b-shell *, .gc21-b-shell *::before, .gc21-b-shell *::after { box-sizing: border-box; }
.gc21-b-shell button, .gc21-b-shell input, .gc21-b-shell textarea, .gc21-b-shell select { font: inherit; }
.gc21-b-shell input, body.gc-dark-mode .gc21-b-shell input { color: var(--gc21-ink); }
.gc21-b-noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .2; 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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.gc21-b-main { position: relative; }
.gc21-b-view { display: none; min-height: calc(100dvh - 78px); }
.gc21-b-view.active { display: block; animation: gc21ViewIn .52s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gc21ViewIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Navigation: soft animated hero header */
.gc21-b-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding: 11px clamp(16px,2.2vw,34px);
  border-bottom: 1px solid rgba(17,19,24,.09);
  background: rgba(250,250,247,.82);
  box-shadow: 0 12px 38px rgba(26,31,38,.055);
  backdrop-filter: blur(24px) saturate(1.3);
}
.gc21-b-nav::before { content: ""; position: absolute; inset: auto 15% -120px 35%; height: 220px; border: 1px solid rgba(83,108,255,.12); border-radius: 50%; pointer-events: none; animation: navOrbit 20s linear infinite; }
.gc21-b-nav > * { position: relative; z-index: 1; }
.gc21-b-brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; color: #111; background: transparent; cursor: pointer; text-align: left; }
.gc21-b-brand-orb { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#151922,#29303e); box-shadow: 0 10px 28px rgba(17,20,28,.18); }
.gc21-b-brand-orb i { display: block; width: 21px; height: 21px; border: 1px solid rgba(217,255,84,.78); border-radius: 50%; box-shadow: inset 8px 0 rgba(217,255,84,.66), 0 0 20px rgba(217,255,84,.45); }
.gc21-b-brand > span:last-child { display: flex; flex-direction: column; }
.gc21-b-brand b { font-size: 13px; line-height: 1; letter-spacing: .08em; }
.gc21-b-brand small { margin-top: 3px; color: #787d85; font-size: 8px; font-weight: 800; letter-spacing: .19em; }
.gc21-b-nav-links { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.gc21-b-nav-links .gc21-b-tab { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border: 0; border-radius: 999px; color: #6c717a; background: transparent; cursor: pointer; font-size: 10px; font-weight: 750; transition: .2s ease; }
.gc21-b-nav-links .gc21-b-tab span { font-size: 13px; }
.gc21-b-nav-links .gc21-b-tab:hover { color: #111; background: rgba(17,19,24,.055); transform: translateY(-1px); }
.gc21-b-nav-links .gc21-b-tab.active { color: #101216; background: var(--gc21-lime); box-shadow: 0 8px 24px rgba(143,173,35,.2); }
.gc21-b-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.gc21-b-search { display: flex; width: clamp(155px,17vw,270px); align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(17,19,24,.11); border-radius: 999px; color: #858a92; background: rgba(255,255,255,.72); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.gc21-b-search span { font-size: 16px; }
.gc21-b-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 11px; }
.gc21-b-search input::placeholder { color: #999da4; }
.gc21-b-icon { position: relative; display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid rgba(17,19,24,.11); border-radius: 50%; color: #242832; background: rgba(255,255,255,.74); cursor: pointer; transition: .2s ease; }
.gc21-b-icon:hover { color: #101216; border-color: rgba(83,108,255,.35); background: #fff; transform: translateY(-1px); }
.gc21-b-language { position: relative; padding: 7px 9px !important; border: 1px solid rgba(17,19,24,.11) !important; border-radius: 999px !important; color: #242832 !important; background: rgba(255,255,255,.74) !important; }
.gc21-b-language .lang-inner { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.gc21-b-lang-mark { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #101216; background: linear-gradient(145deg,var(--gc21-lime),#8de4b5); font-weight: 900; }
.gc21-b-profile { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px; border: 1px solid rgba(17,19,24,.11); border-radius: 999px; color: #252933; background: rgba(255,255,255,.74); cursor: pointer; }
.gc21-b-profile .avatar { width: 31px !important; height: 31px !important; overflow: hidden; border-radius: 50%; background: #e9ecef; }
.gc21-b-profile > span:last-child { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
.gc21-b-shell .net-status:not(.online) { color: rgba(17,19,24,.5); }
.gc21-b-shell .net-status.online { color: #259b62; text-shadow: none; }

/* Home hero: expanded media composition */
.gc21-b-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(400px,.92fr); gap: clamp(26px,4vw,76px); min-height: min(780px,calc(100dvh - 78px)); padding: clamp(50px,7vw,96px) clamp(24px,5vw,80px) clamp(42px,5vw,72px); overflow: hidden; }
.gc21-b-hero::before { content: ""; position: absolute; inset: 8% auto auto 47%; width: min(720px,52vw); aspect-ratio: 1; border: 1px solid rgba(83,108,255,.12); border-radius: 50%; animation: gc21SlowOrbit 26s linear infinite; pointer-events: none; }
.gc21-b-hero::after { content: ""; position: absolute; inset: 24% -9% auto 42%; height: 1px; background: linear-gradient(90deg,transparent,rgba(83,108,255,.28),transparent); transform: rotate(-12deg); }
.gc21-b-hero-copy { position: relative; z-index: 2; align-self: center; max-width: 780px; }
.gc21-b-kicker, .gc21-b-section-kicker, .gc21-b-spot-index { display: flex; align-items: center; gap: 8px; color: #666c75; font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.gc21-b-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #31c87a; box-shadow: 0 0 0 6px rgba(49,200,122,.12); animation: authPulse 2.2s ease-in-out infinite; }
.gc21-b-hero h1, .gc21-b-map-head h1, .gc21-b-view-head h1 { margin: 18px 0 20px; font: 500 clamp(48px,6.45vw,104px)/.86 Georgia, "Times New Roman", serif; letter-spacing: -.078em; text-wrap: balance; }
.gc21-b-hero h1 em, .gc21-b-map-head h1 em, .gc21-b-view-head h1 em { color: #b5d93b; font-weight: 400; }
.gc21-b-hero-copy > p { max-width: 600px; margin: 0; color: #6f747d; font-size: clamp(14px,1.25vw,17px); line-height: 1.68; }
.gc21-b-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 30px; }
.gc21-b-primary, .gc21-b-secondary { position: relative; display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 850; transition: .24s ease; }
.gc21-b-primary { overflow: hidden; border: 1px solid #11151c; color: #fff; background: linear-gradient(145deg,#171b23,#090b0f); box-shadow: 0 16px 35px rgba(17,21,28,.2); }
.gc21-b-primary:hover, .gc21-b-secondary:hover { transform: translateY(-2px); }
.gc21-b-primary b { color: var(--gc21-lime); font-size: 15px; }
.gc-liquid-shine { position: absolute; inset: -70% -30%; background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 49%,transparent 60%); transform: translateX(-85%) rotate(8deg); transition: .6s ease; }
.gc21-b-primary:hover .gc-liquid-shine { transform: translateX(85%) rotate(8deg); }
.gc21-b-secondary { border: 1px solid rgba(17,19,24,.15); color: #242832; background: rgba(255,255,255,.6); backdrop-filter: blur(12px); }
.gc21-b-secondary span { font-size: 16px; }
.gc21-b-hero-stats { display: flex; gap: clamp(24px,4vw,62px); margin-top: 48px; }
.gc21-b-hero-stats span { display: flex; flex-direction: column; }
.gc21-b-hero-stats b { font: 600 25px/1 Georgia,serif; letter-spacing: -.04em; }
.gc21-b-hero-stats small { margin-top: 5px; color: #858a92; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gc21-b-hero-art { position: relative; z-index: 1; display: grid; min-height: 540px; place-items: center; }
.gc21-b-hero-globe { position: relative; display: grid; width: clamp(230px,25vw,380px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; color: #fff; background: radial-gradient(circle at 34% 28%,#54c6da,#213b69 42%,#101722 70%); box-shadow: 0 55px 100px rgba(23,36,61,.25), inset -28px -22px 65px rgba(0,0,0,.35), inset 20px 24px 38px rgba(255,255,255,.12); }
.gc21-b-hero-globe::before { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(255,255,255,.28); border-radius: 50%; animation: gc21SlowOrbit 20s linear infinite; }
.gc21-b-hero-globe::after { content: ""; position: absolute; inset: 24%; border: 1px solid rgba(217,255,84,.42); border-radius: 50%; box-shadow: 0 0 36px rgba(217,255,84,.2); }
.gc21-b-hero-globe i { position: absolute; left: 19%; top: 24%; width: 17%; aspect-ratio: 1; border-radius: 42% 58% 58% 42%; background: rgba(232,247,255,.68); filter: blur(.2px); transform: rotate(18deg); }
.gc21-b-hero-globe b { position: relative; z-index: 1; font: 600 35px/1 Georgia,serif; letter-spacing: -.06em; }
.gc21-b-hero-globe small { position: absolute; bottom: 22%; z-index: 1; color: rgba(255,255,255,.5); font-size: 7px; font-weight: 900; letter-spacing: .22em; }
.gc21-b-orbit-line { position: absolute; border: 1px solid rgba(83,108,255,.22); border-radius: 50%; animation: gc21SlowOrbit 18s linear infinite; }
.gc21-b-orbit-line.orbit-one { width: 84%; aspect-ratio: 1; transform: rotate(35deg) scaleY(.38); }
.gc21-b-orbit-line.orbit-two { width: 102%; aspect-ratio: 1; border-color: rgba(217,255,84,.25); transform: rotate(-28deg) scaleY(.52); animation-direction: reverse; animation-duration: 23s; }
.gc21-b-city-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.88); background: rgba(13,20,31,.78); box-shadow: 0 14px 28px rgba(17,25,38,.18); backdrop-filter: blur(14px); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.gc21-b-city-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gc21-lime); box-shadow: 0 0 10px var(--gc21-lime); }
.chip-tokyo { right: 1%; top: 20%; animation: gc21Float 5s ease-in-out infinite; }
.chip-cairo { left: 1%; top: 38%; animation: gc21Float 6s ease-in-out infinite reverse; }
.chip-paris { right: 10%; bottom: 15%; animation: gc21Float 5.5s ease-in-out .5s infinite; }
.gc21-b-signal-pulse { position: absolute; width: 13px; height: 13px; border: 2px solid var(--gc21-lime); border-radius: 50%; box-shadow: 0 0 0 12px rgba(217,255,84,.09), 0 0 30px rgba(217,255,84,.4); }
.gc21-b-signal-pulse.pulse-a { left: 11%; top: 20%; }
.gc21-b-signal-pulse.pulse-b { right: 13%; bottom: 23%; border-color: var(--gc21-cyan); box-shadow: 0 0 0 12px rgba(114,220,255,.08),0 0 30px rgba(114,220,255,.38); }
@keyframes gc21SlowOrbit { to { transform: rotate(360deg); } }
@keyframes gc21Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Spotlight cards: direct native interpretation */
.gc21-b-spotlights { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 0 clamp(24px,5vw,80px) 28px; }
.gc21-b-spotlight { --spot-x: 50%; --spot-y: 30%; position: relative; display: flex; min-height: 345px; padding: 25px; flex-direction: column; overflow: hidden; border: 1px solid rgba(17,19,24,.1); border-radius: 22px; background: radial-gradient(430px circle at var(--spot-x) var(--spot-y),rgba(255,255,255,.98),rgba(255,255,255,.22) 34%,transparent 64%), linear-gradient(145deg,#f8f8f5,#e9e9e3); box-shadow: 0 24px 55px rgba(23,28,36,.08), inset 0 1px #fff; cursor: default; }
.gc21-b-spotlight::before { content: ""; position: absolute; right: -65px; top: -65px; width: 210px; aspect-ratio: 1; border: 1px solid rgba(83,108,255,.15); border-radius: 50%; transition: .5s ease; }
.gc21-b-spotlight:hover::before { transform: scale(1.13) rotate(30deg); border-color: rgba(83,108,255,.28); }
.gc21-b-spot-map { color: #fff; border-color: rgba(255,255,255,.1); background: radial-gradient(430px circle at var(--spot-x) var(--spot-y),rgba(114,220,255,.22),transparent 52%), linear-gradient(150deg,#121821,#0a0d13); box-shadow: 0 28px 60px rgba(13,19,28,.22); }
.gc21-b-spot-ai { color: #fff; border-color: rgba(255,255,255,.1); background: radial-gradient(430px circle at var(--spot-x) var(--spot-y),rgba(112,130,255,.3),transparent 52%), linear-gradient(150deg,#1c2348,#101426 68%); box-shadow: 0 28px 60px rgba(22,28,61,.2); }
.gc21-b-spot-circles { background: radial-gradient(430px circle at var(--spot-x) var(--spot-y),rgba(217,255,84,.48),transparent 47%), linear-gradient(145deg,#f9f7e8,#ebe9d8); }
.gc21-b-spot-index { position: relative; z-index: 1; color: rgba(17,19,24,.48); }
.gc21-b-spot-map .gc21-b-spot-index, .gc21-b-spot-ai .gc21-b-spot-index { color: rgba(255,255,255,.48); }
.gc21-b-spot-glyph { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; margin: 25px 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 23px; opacity: .78; }
.gc21-b-spot-map .gc21-b-spot-glyph { color: var(--gc21-cyan); }
.gc21-b-spot-ai .gc21-b-spot-glyph { color: var(--gc21-lime); }
.gc21-b-spotlight h2 { position: relative; z-index: 1; margin: 22px 0 10px; font: 600 clamp(24px,2.3vw,34px)/.98 Georgia,serif; letter-spacing: -.055em; }
.gc21-b-spotlight p { position: relative; z-index: 1; margin: 0; color: #737881; font-size: 11px; line-height: 1.58; }
.gc21-b-spot-map p, .gc21-b-spot-ai p { color: rgba(255,255,255,.54); }
.gc21-b-spot-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 11px 0 0; border: 0; border-top: 1px solid rgba(17,19,24,.1); color: inherit; background: transparent; cursor: pointer; font-size: 10px; font-weight: 900; text-align: left; }
.gc21-b-spot-map .gc21-b-spot-action, .gc21-b-spot-ai .gc21-b-spot-action { border-top-color: rgba(255,255,255,.12); }
.gc21-b-spot-action b { color: #6b8cf4; font-size: 15px; }
.gc21-b-spot-map .gc21-b-spot-action b, .gc21-b-spot-circles .gc21-b-spot-action b { color: #91b417; }
.gc21-b-spot-ai .gc21-b-spot-action b { color: var(--gc21-lime); }

/* Live places and community sections */
.gc21-b-lower-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(310px,.55fr); gap: 16px; padding: 0 clamp(24px,5vw,80px) 30px; }
.gc21-b-panel { min-width: 0; padding: clamp(21px,3vw,34px); border: 1px solid rgba(17,19,24,.1); border-radius: 22px; background: rgba(255,255,255,.65); box-shadow: 0 22px 54px rgba(29,34,42,.065),inset 0 1px rgba(255,255,255,.88); backdrop-filter: blur(18px); }
.gc21-b-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.gc21-b-section-head span { color: #757a83; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.gc21-b-section-head h2 { margin: 7px 0 0; font: 600 clamp(28px,3vw,43px)/.94 Georgia,serif; letter-spacing: -.058em; }
.gc21-b-section-head button, .gc21-b-community-more { border: 0; color: #516ae8; background: transparent; cursor: pointer; font-size: 10px; font-weight: 850; }
.gc21-b-places-panel .card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.gc21-b-shell .place-card { position: relative; min-width: 0; min-height: 205px; padding: 16px; overflow: hidden; border: 1px solid rgba(17,19,24,.09); border-radius: 15px; background: #f6f6f2; cursor: pointer; transition: .25s ease; }
.gc21-b-shell .place-card:hover { border-color: rgba(83,108,255,.26); background: #fff; transform: translateY(-4px); box-shadow: 0 18px 35px rgba(22,28,38,.1); }
.gc21-b-shell .place-card h3 { position: relative; z-index: 2; margin: 0; font: 600 19px/1 Georgia,serif; letter-spacing: -.045em; }
.gc21-b-shell .place-card p { position: relative; z-index: 2; margin: 7px 0 0; color: #838891; font-size: 8px; line-height: 1.45; }
.gc21-b-shell .place-card .landmark { position: absolute; right: 8px; bottom: 32px; width: 58%; height: 82px; opacity: .9; }
.gc21-b-shell .place-card .landmark img, .gc21-b-shell .place-card .landmark svg { width: 100%; height: 100%; object-fit: contain; }
.gc21-b-shell .place-card .flag { position: absolute; right: 11px; top: 11px; z-index: 3; font-size: 20px; }
.gc21-b-shell .place-card .place-footer { position: absolute; right: 14px; bottom: 12px; left: 14px; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: #777c84; font-size: 8px; }
.gc21-b-shell .place-card .join { padding: 6px 10px; border: 0; border-radius: 999px; color: #101216; background: var(--gc21-lime); cursor: pointer; font-size: 8px; font-weight: 900; }
.gc21-b-community-panel { display: flex; flex-direction: column; }
.gc21-b-community-panel .community-items { display: grid; gap: 5px; }
.gc21-b-shell .community-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(17,19,24,.075); }
.gc21-b-shell .community-item .avatar { width: 38px !important; height: 38px !important; overflow: hidden; border-radius: 50%; }
.gc21-b-shell .community-item > div { min-width: 0; }
.gc21-b-shell .community-item strong, .gc21-b-shell .community-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc21-b-shell .community-item strong { font-size: 10px; }
.gc21-b-shell .community-item span { margin-top: 3px; color: #81868e; font-size: 8px; }
.gc21-b-shell .community-item .connect { padding: 6px 9px; border: 1px solid rgba(17,19,24,.11); border-radius: 999px; color: #22262f; background: #fff; cursor: pointer; font-size: 8px; font-weight: 800; }
.gc21-b-shell .community-item .connect:hover { color: #111; border-color: var(--gc21-lime); background: var(--gc21-lime); }
.gc21-b-community-more { display: flex; justify-content: space-between; margin-top: auto; padding: 18px 0 0; }

/* Background paths footer */
.gc21-b-paths { position: relative; min-height: 430px; margin: 10px clamp(24px,5vw,80px) 38px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; color: #fff; background: radial-gradient(circle at 70% 22%,rgba(74,111,160,.3),transparent 32%),linear-gradient(145deg,#0a0d12,#121923 60%,#0c1016); box-shadow: 0 35px 80px rgba(16,22,31,.22); }
.gc21-b-paths .gc-footer-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .66; }
.gc21-b-paths-copy { position: relative; z-index: 2; padding: clamp(40px,6vw,78px); }
.gc21-b-paths-copy h2 { max-width: 820px; margin: 13px 0 0; font: 500 clamp(45px,6vw,88px)/.87 Georgia,serif; letter-spacing: -.075em; }
.gc21-b-paths-copy h2 em { color: var(--gc21-lime); font-weight: 400; }
.gc21-b-paths-copy nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 35px; }
.gc21-b-paths-copy button { padding: 10px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.035); cursor: pointer; font-size: 9px; }
.gc21-b-paths-copy button:hover { color: #111; border-color: var(--gc21-lime); background: var(--gc21-lime); }
.gc21-b-paths-meta { position: absolute; right: clamp(24px,4vw,60px); bottom: 22px; left: clamp(24px,4vw,60px); z-index: 2; display: flex; justify-content: space-between; color: rgba(255,255,255,.34); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
/* Work spaces: directory, conversations and channels */
.gc21-b-friends-view.active { display: grid; grid-template-columns: 318px minmax(0,1fr); gap: 16px; height: calc(100dvh - 78px); min-height: 0; padding: 18px clamp(16px,2.2vw,34px) 24px; overflow: hidden; }
.gc21-b-directory { display: flex; min-height: 0; padding: 24px 18px 12px; flex-direction: column; border: 1px solid rgba(17,19,24,.1); border-radius: 20px; background: rgba(255,255,255,.72); box-shadow: 0 22px 50px rgba(29,34,42,.07); backdrop-filter: blur(18px); }
.gc21-b-directory-top { display: flex; align-items: center; justify-content: space-between; color: #7c8189; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.gc21-b-directory-top button { display: grid; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 10px; color: #111; background: var(--gc21-lime); cursor: pointer; font-size: 18px; }
.gc21-b-directory h2 { margin: 8px 0 2px; font: 600 34px/1 Georgia,serif; letter-spacing: -.065em; }
.gc21-b-directory > p { margin: 6px 0 17px; color: #838890; font-size: 9px; }
.gc21-b-directory > p b { color: #1d2129; }
.gc21-b-directory-search { width: 100%; background: rgba(244,244,240,.92); }
.gc21-b-filter-tabs { display: flex; gap: 5px; margin: 15px 0 8px; overflow-x: auto; border-bottom: 1px solid rgba(17,19,24,.08); padding-bottom: 10px; scrollbar-width: none; }
.gc21-b-filter-tabs .friend-tab { flex: none; padding: 7px 9px; border: 0; border-radius: 999px; color: #767b84; background: transparent; cursor: pointer; font-size: 9px; }
.gc21-b-filter-tabs .friend-tab.active { color: #101216; background: var(--gc21-lime); }
.gc21-b-directory .friend-list { min-height: 0; flex: 1; padding: 5px 0 14px; overflow-y: auto; }
.gc21-b-shell .friend-group-header { display: flex; align-items: center; gap: 7px; margin: 15px 4px 7px; color: #777c84; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gc21-b-shell .friend-group-header em { margin-left: auto; font-style: normal; }
.gc21-b-shell .fg-dot { width: 6px; height: 6px; border-radius: 50%; background: #a7abb2; }
.gc21-b-shell .fg-dot.on { background: #31c87a; box-shadow: 0 0 0 5px rgba(49,200,122,.1); }
.gc21-b-shell .friend-item { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 4px 0; padding: 10px; border: 1px solid transparent; border-radius: 14px; cursor: pointer; transition: .2s ease; }
.gc21-b-shell .friend-item:hover { border-color: rgba(17,19,24,.07); background: rgba(255,255,255,.62); }
.gc21-b-shell .friend-item.active { border-color: rgba(83,108,255,.16); background: #edf0ff; box-shadow: inset 3px 0 var(--gc21-blue); }
.gc21-b-shell .friend-item .avatar-wrap-btn { width: 44px; height: 44px; overflow: hidden; border-radius: 50%; cursor: pointer; }
.gc21-b-shell .friend-item .avatar { width: 44px !important; height: 44px !important; }
.gc21-b-shell .friend-item-main { min-width: 0; }
.gc21-b-shell .friend-name { margin: 0; overflow: hidden; color: #20242c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.gc21-b-shell .friend-meta { margin: 4px 0 0; overflow: hidden; color: #858a92; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.gc21-b-shell .presence { width: 8px; height: 8px; border-radius: 50%; background: #31c87a; box-shadow: 0 0 0 5px rgba(49,200,122,.1); }
.gc21-b-shell .presence.offline { background: #c4c7cc; box-shadow: none; }
.gc21-b-shell .unread { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; color: #111; background: var(--gc21-lime); font-size: 8px; font-weight: 900; }
.gc21-b-shell .friend-actions { display: flex; gap: 4px; margin-top: 7px; }
.gc21-b-shell .friend-actions button { padding: 5px 8px; border: 0; border-radius: 999px; cursor: pointer; font-size: 8px; }
.gc21-b-shell .mini-ok { background: var(--gc21-lime); }
.gc21-b-shell .mini-no { color: #fff; background: #91959c; }
.gc21-b-shell .gc-empty-state { min-height: 100%; justify-content: center; color: #7b8089; }
.gc21-b-shell .gc-empty-orb { background: radial-gradient(circle at 35% 30%,#fff,#d9ff54 45%,#66caa1); }
.gc21-b-shell .gc-empty-action { color: #111; border-color: #bfdb55; background: var(--gc21-lime); }
.gc21-b-conversation { display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba(17,19,24,.1); border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgba(29,34,42,.07); }
.gc21-b-conversation .chat-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(17,19,24,.09); background: rgba(251,251,248,.92); }
.gc21-b-conversation .chat-header h2 { margin: 0; color: #161920; font: 600 19px/1 Georgia,serif; }
.gc21-b-conversation .chat-header p { margin: 5px 0 0; color: #858a92; font-size: 9px; }
.gc21-b-shell .chat-actions { display: flex; align-items: center; gap: 7px; }
.gc21-b-shell .mini-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(17,19,24,.1); border-radius: 999px; background: #fff; }
.gc21-b-shell .mini-search input { width: 120px; border: 0; outline: 0; background: transparent; font-size: 9px; }
.gc21-b-shell .chat-actions .icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(17,19,24,.1); border-radius: 50%; background: #fff; cursor: pointer; }
.gc21-b-shell .message-list { min-height: 0; flex: 1; padding: 22px; overflow-y: auto; background: #f6f6f3; }
.gc21-b-shell .message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 17px; }
.gc21-b-shell .message.sent { flex-direction: row-reverse; }
.gc21-b-shell .message > .avatar, .gc21-b-shell .message .avatar-wrap { width: 32px !important; height: 32px !important; flex: none; overflow: hidden; border-radius: 50%; }
.gc21-b-shell .msg-avatar-btn { width: 32px; height: 32px; flex: none; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gc21-b-shell .msg-avatar-btn .avatar { width: 32px !important; height: 32px !important; }
.gc21-b-shell .message > div { max-width: min(68%,650px); }
.gc21-b-shell .message.sent > div { text-align: right; }
.gc21-b-shell .msg-sender { display: block; margin: 0 0 5px 4px; color: #777c84; font-size: 8px; }
.gc21-b-shell .bubble { display: inline-block; padding: 11px 13px; border: 1px solid rgba(17,19,24,.08); border-radius: 5px 15px 15px 15px; color: #252932; background: #fff; text-align: left; box-shadow: 0 8px 22px rgba(25,30,38,.05); }
.gc21-b-shell .message.sent .bubble { border-color: #d7e05f; border-radius: 15px 5px 15px 15px; background: #ecf9a9; }
.gc21-b-shell .bubble p { margin: 0; font-size: 11px; line-height: 1.5; }
.gc21-b-shell .translation { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(17,19,24,.08); color: #5d6a8e; font-size: 9px; }
.gc21-b-shell .message-time { margin-top: 5px; color: #9a9ea5; font-size: 7px; }
.gc21-b-shell .msg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 5px; color: #777c84; font-size: 8px; }
.gc21-b-shell .trans-btn { border: 0; color: #6377de; background: transparent; cursor: pointer; font-size: 8px; }
.gc21-b-shell .composer { display: flex; align-items: center; gap: 7px; margin: 12px; padding: 8px; border: 1px solid rgba(17,19,24,.1); border-radius: 15px; background: #fff; box-shadow: 0 9px 25px rgba(27,32,40,.055); }
.gc21-b-shell .composer .composer-search { min-width: 0; flex: 1; }
.gc21-b-shell .composer input { width: 100%; padding: 8px; border: 0; outline: 0; background: transparent; }
.gc21-b-shell .composer .icon-button { display: grid; width: 35px; height: 35px; place-items: center; border: 0; border-radius: 50%; background: #f0f1f3; cursor: pointer; }
.gc21-b-shell .composer .icon-button.send { background: #161a22; }
.gc21-b-shell .composer .icon-button.send .icon { filter: invert(1); }
.gc21-b-shell .empty-chat-card { margin: auto; }
.gc21-b-shell .pager-row { padding: 8px; border-radius: 8px; color: #666b74; background: #e9e9e5; text-align: center; font-size: 8px; }

/* Full channel views */
.gc21-b-channel-view { max-width: 1540px; margin: 0 auto; padding: clamp(26px,3.5vw,54px) clamp(18px,3vw,40px) 38px; }
.gc21-b-view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.gc21-b-view-head > div > span { color: #7d828b; font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.gc21-b-view-head h1 { margin: 11px 0 0; font-size: clamp(44px,5.5vw,82px); }
.gc21-b-view-head .gc21-b-secondary { flex: none; }
.gc21-b-ai-status { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(17,19,24,.1); border-radius: 999px; color: #636973; background: rgba(255,255,255,.65); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.gc21-b-ai-status i { width: 7px; height: 7px; border-radius: 50%; background: #31c87a; box-shadow: 0 0 0 5px rgba(49,200,122,.1); }
.gc21-b-chat-frame { height: calc(100dvh - 265px); min-height: 610px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-shadow: 0 30px 65px rgba(17,23,33,.16); }
.gc21-b-chat-frame > section, .gc21-b-ai-frame > section { height: 100%; min-height: 0; }
#worldChatPanel { display: flex; min-height: 0; flex-direction: column; color: #eef7ff; background: radial-gradient(circle at 78% 16%,rgba(77,119,183,.26),transparent 28%),linear-gradient(150deg,#111721,#0a0e14); }
#worldChatPanel .chat-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 22px; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.02); }
#worldChatPanel .chat-header-copy { display: flex; align-items: center; gap: 13px; }
#worldChatPanel .chat-header h2 { margin: 3px 0; color: #fff; font: 600 20px/1 Georgia,serif; }
#worldChatPanel .chat-header p { margin: 0; color: rgba(255,255,255,.48); font-size: 9px; }
#worldChatPanel .ai-badge { padding: 5px 7px; border: 1px solid rgba(217,255,84,.35); border-radius: 999px; color: var(--gc21-lime); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
#worldChatPanel .mini-search { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
#worldChatPanel .mini-search input { color: #fff; }
#worldChatPanel .message-list { flex: 1; min-height: 0; background: transparent; }
#worldChatPanel .bubble { color: rgba(255,255,255,.84); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.06); box-shadow: none; }
#worldChatPanel .message.sent .bubble { color: #11151c; border-color: transparent; background: var(--gc21-lime); }
#worldChatPanel .message-time, #worldChatPanel .msg-sender { color: rgba(255,255,255,.38); }
#worldChatPanel .composer { margin: 13px; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.055); box-shadow: none; }
#worldChatPanel .composer input { color: #fff; }
#worldChatPanel .composer .icon-button { background: rgba(255,255,255,.08); }
#worldChatPanel .composer .icon-button.send { background: var(--gc21-lime); }
#worldChatPanel .composer .icon-button.send .icon { filter: none; }
#worldChatPanel .empty-chat-card { color: #fff; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.05); }
#groupChatPanel { color: #171a21; background: #fff; }
#groupChatPanel .gc21-ct { height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
#groupChatPanel .gc21-ct-messages { min-height: 0; }
#aiChatPanel { height: calc(100dvh - 265px); min-height: 610px; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 65px rgba(17,23,33,.16); }
#aiChatPanel .gc-21-chat-panel { min-height: 100%; }
#aiChatPanel .gc-21-chat-messages { min-height: 0; }
#aiChatPanel .gc-21-chat-composer-wrap { flex: none; }
#aiChatPanel .message-list { background: transparent !important; }

/* Atlas view and drill-down surfaces */
.gc21-b-map-view { padding: clamp(18px,2.5vw,34px) clamp(16px,3vw,42px) 40px; }
.gc21-b-map-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 16px; max-width: 1600px; margin: 0 auto; }
.gc21-b-map-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 23px; color: #fff; background: radial-gradient(circle at 72% 10%,rgba(75,130,182,.24),transparent 28%),linear-gradient(150deg,#0d1118,#080b10); box-shadow: 0 30px 70px rgba(17,23,33,.17); }
.gc21-b-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 28px 30px 20px; }
.gc21-b-map-head > div:first-child > span { color: var(--gc21-cyan); font-size: 8px; font-weight: 900; letter-spacing: .17em; }
.gc21-b-map-head h1 { margin: 10px 0 0; font-size: clamp(46px,5.5vw,86px); }
.gc21-b-map-legend { display: flex; gap: 15px; padding-bottom: 8px; color: rgba(255,255,255,.42); font-size: 8px; }
.gc21-b-map-legend span { display: flex; align-items: center; gap: 6px; }
.gc21-b-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--gc21-cyan); }
.gc21-b-map-legend i.live { background: var(--gc21-lime); box-shadow: 0 0 9px var(--gc21-lime); }
.gc21-b-map-content { height: min(660px,calc(100dvh - 310px)); min-height: 560px; margin: 0 12px 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: #0b111a; }
.gc21-b-map-aside { display: flex; padding: 28px 22px; flex-direction: column; border: 1px solid rgba(17,19,24,.1); border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: 0 24px 55px rgba(29,34,42,.07); backdrop-filter: blur(18px); }
.gc21-b-map-aside h2 { margin: 10px 0 14px; font: 600 32px/.96 Georgia,serif; letter-spacing: -.06em; }
.gc21-b-map-aside > p { margin: 0 0 24px; color: #767b84; font-size: 11px; line-height: 1.65; }
.gc21-b-map-metric { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-top: 1px solid rgba(17,19,24,.08); }
.gc21-b-map-metric b { min-width: 54px; font: 600 21px/1 Georgia,serif; }
.gc21-b-map-metric span { color: #858a92; font-size: 9px; }
.gc21-b-map-aside .gc21-b-primary { width: 100%; margin-top: auto; }
.gc21-b-map-card .gc-orbit-timeline { margin: 12px; }
.gc21-b-map-card .map-view { position: relative; height: 100%; padding: 62px 14px 35px; }
.gc21-b-map-card .map-breadcrumb { position: absolute; left: 14px; top: 13px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 28px); }
.gc21-b-shell .crumb { padding: 6px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.045); cursor: pointer; font-size: 8px; }
.gc21-b-shell .crumb.current { color: #111; border-color: var(--gc21-lime); background: var(--gc21-lime); }
.gc21-b-shell .crumb-sep { color: rgba(255,255,255,.2); font-size: 8px; }
.gc21-b-map-card .map-live-stats { position: absolute; right: 14px; top: 13px; z-index: 6; display: flex; gap: 6px; }
.gc21-b-map-card .map-live-stats span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; color: rgba(255,255,255,.55); background: rgba(7,12,20,.62); font-size: 8px; backdrop-filter: blur(10px); }
.gc21-b-map-card .map-live-stats b { color: #fff; }
.gc21-b-map-card .world-map-canvas { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; }
.gc21-b-map-card .map-tip { position: absolute; left: 50%; bottom: 8px; z-index: 6; transform: translateX(-50%); color: rgba(255,255,255,.34); font-size: 8px; }
.gc21-b-map-card .drill-view { height: 100%; padding: 8px 4px 35px; overflow: auto; }
.gc21-b-map-card .drill-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gc21-b-map-card .drill-header h2 { margin: 0; font: 600 35px/1 Georgia,serif; }
.gc21-b-map-card .drill-header span { color: rgba(255,255,255,.55); font-size: 9px; }
.gc21-b-map-card .drill-back { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; cursor: pointer; }
.gc21-b-map-card .province-grid, .gc21-b-map-card .city-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.gc21-b-map-card .province-card, .gc21-b-map-card .city-card { min-height: 160px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); cursor: pointer; }
.gc21-b-map-card .province-thumb, .gc21-b-map-card .city-thumb { height: 105px; overflow: hidden; }
.gc21-b-map-card .province-thumb img, .gc21-b-map-card .province-thumb svg, .gc21-b-map-card .city-thumb img, .gc21-b-map-card .city-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.gc21-b-map-card .province-info, .gc21-b-map-card .city-info { padding: 11px 12px; }
.gc21-b-map-card .province-info h4, .gc21-b-map-card .city-info h4 { margin: 0; color: #fff; font-size: 12px; }
.gc21-b-map-card .province-info span, .gc21-b-map-card .city-info span { color: rgba(255,255,255,.45); font-size: 8px; }
.gc21-b-map-card .city-hero { position: relative; height: 210px; overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.045); }
.gc21-b-map-card .city-hero-bg { display: grid; height: 100%; place-items: center; font-size: 80px; }
.gc21-b-map-card .city-hero-info { position: absolute; left: 20px; bottom: 18px; }
.gc21-b-map-card .city-hero-info h2 { margin: 0; color: #fff; font: 600 40px/1 Georgia,serif; }
.gc21-b-map-card .city-online-cta { margin: 10px 0; padding: 9px 13px; border: 1px solid rgba(217,255,84,.25); border-radius: 999px; color: #d9ff54; background: rgba(217,255,84,.06); cursor: pointer; font-size: 9px; }
.gc21-b-map-card .city-tabs { display: flex; gap: 5px; margin: 12px 0; }
.gc21-b-map-card .tab-btn { padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.55); background: transparent; cursor: pointer; font-size: 8px; }
.gc21-b-map-card .tab-btn.active { color: #111; border-color: var(--gc21-lime); background: var(--gc21-lime); }
.gc21-b-map-card .person-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.gc21-b-map-card .person-card .btn-add { margin-left: auto; padding: 7px 9px; border: 0; border-radius: 999px; background: var(--gc21-lime); cursor: pointer; font-size: 8px; }
.gc21-b-map-card .game-list { display: grid; gap: 8px; }
.gc21-b-map-card .game-card { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.gc21-b-map-card .game-card-info { flex: 1; }
.gc21-b-map-card .game-card h4, .gc21-b-map-card .game-card p { margin: 0; color: #fff; }
.gc21-b-map-card .game-card p { color: rgba(255,255,255,.45); font-size: 8px; }
.gc21-b-map-card .game-best { color: var(--gc21-lime); font-size: 8px; }
.gc21-b-map-card .btn-play { padding: 7px 10px; border: 0; border-radius: 999px; background: var(--gc21-lime); cursor: pointer; font-size: 8px; }

/* B shell overlays */
.gc21-b-shell > .guest-banner { position: fixed !important; right: 18px !important; bottom: 18px !important; left: auto !important; z-index: 10020 !important; width: min(680px,calc(100vw - 40px)) !important; padding: 11px 14px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; color: #fff !important; background: rgba(11,14,20,.93) !important; box-shadow: 0 18px 50px rgba(0,0,0,.3) !important; backdrop-filter: blur(18px); }
.gc21-b-shell > .guest-banner button { margin-left: 7px; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--gc21-lime); cursor: pointer; font-size: 9px; font-weight: 800; }
.gc21-b-shell > .guest-banner .banner-login { color: #fff; background: #4d5fd9; }
.gc21-b-shell > #modalRoot, .gc21-b-shell > #crowdWrap { flex: none; }
.gc21-b-shell .gc-21-auth-ui { max-height: calc(100dvh - 36px); }
.gc21-b-shell .gc-orbit-copy h3 { color: #fff; }

/* Responsive B shell */
@media (max-width: 1350px) {
  .gc21-b-nav-links .gc21-b-tab { padding: 8px; }
  .gc21-b-nav-links .gc21-b-tab { font-size: 0; }
  .gc21-b-nav-links .gc21-b-tab span { font-size: 15px; }
  .gc21-b-search { width: 170px; }
  .gc21-b-profile > span:last-child { display: none; }
}
@media (max-width: 1080px) {
  .gc21-b-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 55px; }
  .gc21-b-hero-art { min-height: 440px; }
  .gc21-b-spotlights { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gc21-b-spotlight:last-child { grid-column: 1 / -1; }
  .gc21-b-lower-grid { grid-template-columns: 1fr; }
  .gc21-b-community-panel { min-height: 360px; }
  .gc21-b-map-layout { grid-template-columns: 1fr; }
  .gc21-b-map-aside { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .gc21-b-map-aside h2, .gc21-b-map-aside > p, .gc21-b-map-aside > .gc21-b-section-kicker { grid-column: 1 / -1; }
  .gc21-b-map-aside .gc21-b-primary { grid-column: 1 / -1; margin-top: 14px; }
  .gc21-b-map-metric { border-top: 0; }
}
@media (max-width: 820px) {
  .gc21-b-nav { grid-template-columns: auto 1fr auto; }
  .gc21-b-nav-links { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .gc21-b-nav-links .gc21-b-tab { font-size: 0; }
  .gc21-b-search, .gc21-b-language { display: none; }
  .gc21-b-hero { padding-right: 20px; padding-left: 20px; }
  .gc21-b-hero h1 { font-size: clamp(46px,12vw,74px); }
  .gc21-b-hero-art { min-height: 370px; }
  .gc21-b-city-chip { display: none; }
  .gc21-b-spotlights, .gc21-b-lower-grid { padding-right: 18px; padding-left: 18px; }
  .gc21-b-spotlights { grid-template-columns: 1fr; }
  .gc21-b-spotlight:last-child { grid-column: auto; }
  .gc21-b-places-panel .card-grid { grid-template-columns: 1fr 1fr; }
  .gc21-b-paths { margin-right: 18px; margin-left: 18px; }
  .gc21-b-paths-meta { gap: 12px; flex-direction: column; }
  .gc21-b-friends-view.active { display: block; height: auto; padding: 12px; overflow: visible; }
  .gc21-b-directory { height: calc(100dvh - 102px); }
  .gc21-b-conversation { display: none; }
  .gc21-b-channel-view { padding: 24px 12px; }
  .gc21-b-view-head { align-items: flex-start; flex-direction: column; }
  .gc21-b-chat-frame, #aiChatPanel { height: calc(100dvh - 245px); min-height: 540px; }
  .gc21-b-map-view { padding: 12px; }
  .gc21-b-map-head { align-items: flex-start; flex-direction: column; padding: 23px 20px 15px; }
  .gc21-b-map-legend { display: none; }
  .gc21-b-map-content { height: 620px; min-height: 620px; margin: 0 7px 7px; }
  .gc21-b-map-aside { display: block; }
  .gc21-b-map-card .province-grid, .gc21-b-map-card .city-grid { grid-template-columns: 1fr 1fr; }
  .gc21-b-map-card .map-live-stats { top: 55px; right: auto; left: 14px; }
  .gc21-b-map-card .map-view { padding-top: 105px; }
  .gc21-b-shell .message > div { max-width: 82%; }
}
@media (max-width: 520px) {
  .gc21-b-brand small, .gc21-b-icon:first-of-type { display: none; }
  .gc21-b-nav { gap: 6px; padding: 9px 10px; }
  .gc21-b-brand-orb { width: 36px; height: 36px; }
  .gc21-b-profile { padding-right: 3px; }
  .gc21-b-hero { padding-top: 38px; }
  .gc21-b-hero h1 { font-size: 43px; }
  .gc21-b-hero-stats { gap: 21px; }
  .gc21-b-hero-art { min-height: 310px; }
  .gc21-b-hero-globe { width: 210px; }
  .gc21-b-places-panel .card-grid { grid-template-columns: 1fr; }
  .gc21-b-panel { padding: 19px; }
  .gc21-b-paths-copy { padding: 40px 24px; }
  .gc21-b-map-card .province-grid, .gc21-b-map-card .city-grid { grid-template-columns: 1fr; }
  .gc21-b-map-content { height: 560px; min-height: 560px; }
}
/* Final interaction corrections discovered by visual QA */
.gc21-b-language .lang-switcher { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.gc21-b-language .lang-switcher select { width: 100%; height: 100%; cursor: pointer; }
.gc21-b-language .lang-inner { pointer-events: none; }
.gc21-b-shell .chat-map-layer { display: none !important; }
.gc-channel-empty { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 35px; flex-direction: column; color: #767b84; text-align: center; }
.gc-channel-empty span { display: grid; width: 54px; height: 54px; margin-bottom: 16px; place-items: center; border: 1px solid rgba(17,19,24,.12); border-radius: 50%; color: #4e63da; background: rgba(255,255,255,.75); box-shadow: 0 15px 34px rgba(30,36,46,.08); font-size: 22px; }
.gc-channel-empty b { color: #1c2028; font: 600 24px/1.1 Georgia,serif; letter-spacing: -.04em; }
.gc-channel-empty p { max-width: 410px; margin: 8px 0 0; font-size: 10px; line-height: 1.6; }
#worldChatPanel .gc-channel-empty { color: rgba(255,255,255,.5); }
#worldChatPanel .gc-channel-empty span { color: var(--gc21-lime); border-color: rgba(217,255,84,.28); background: rgba(255,255,255,.045); box-shadow: 0 0 38px rgba(217,255,84,.09); }
#worldChatPanel .gc-channel-empty b { color: #fff; }
/* Compatibility with the project regression contract: compact and wide desktop shells. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gc21-b-nav-links .gc21-b-tab { font-size: 0; padding: 8px; }
  .gc21-b-nav-links .gc21-b-tab span { font-size: 15px; }
  .gc21-b-search { width: 150px; }
  .gc21-b-profile > span:last-child { display: none; }
}
@media (min-width: 1440px) {
  .gc21-b-hero { grid-template-columns: minmax(0,1.05fr) minmax(500px,.95fr); padding-right: clamp(80px,6vw,120px); padding-left: clamp(80px,6vw,120px); }
  .gc21-b-spotlights, .gc21-b-lower-grid { padding-right: clamp(80px,6vw,120px); padding-left: clamp(80px,6vw,120px); }
  .gc21-b-paths { margin-right: clamp(80px,6vw,120px); margin-left: clamp(80px,6vw,120px); }
}

/* ============================================================
   v1.13.0 visual calibration: direct 21st.dev reference matching
   ============================================================ */
.welcome-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 122, 137, .18), transparent 31%),
    linear-gradient(180deg, #071016 0%, #030608 100%);
}
.welcome-screen::before {
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(131, 223, 255, .13), transparent 26%),
    linear-gradient(90deg, rgba(2, 5, 8, .94), rgba(2, 5, 8, .32) 13%, transparent 30%, transparent 70%, rgba(2, 5, 8, .32) 87%, rgba(2, 5, 8, .94)),
    linear-gradient(180deg, rgba(2, 5, 8, .58), transparent 24%, transparent 68%, rgba(2, 5, 8, .9));
}
.ws-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(72vw, 1030px);
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .07);
  border-left: 1px solid rgba(255, 255, 255, .07);
  background: #0a1719;
  box-shadow: 0 0 100px rgba(0, 0, 0, .5);
  transform: translateX(-50%);
}
.ws-backdrop::before,
.ws-backdrop::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.ws-backdrop::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 14%, rgba(121, 230, 255, .08) 14.15%, transparent 14.45%),
    radial-gradient(circle at 50% 48%, transparent 0 25%, rgba(121, 230, 255, .08) 25.12%, transparent 25.38%),
    radial-gradient(circle at 50% 48%, transparent 0 39%, rgba(217, 255, 84, .07) 39.1%, transparent 39.34%);
}
.ws-backdrop::after {
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 7, 9, .2), rgba(2, 5, 7, .72));
}
.ws-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.12) brightness(.5);
  transform: scale(1.04);
  animation: wsBackdropDrift 18s ease-in-out infinite alternate;
}
.ws-backdrop-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .26;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, #000 8%, transparent 75%);
}
.ws-backdrop-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 3;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid rgba(139, 231, 255, .13);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(24deg) scaleY(.45);
}
.ws-backdrop-orbit.orbit-b {
  width: 96%;
  border-color: rgba(217, 255, 84, .11);
  transform: translate(-50%, -50%) rotate(-31deg) scaleY(.58);
}
.ws-media-frame {
  z-index: 2;
  width: calc(19vw + var(--expand) * 52vw);
  height: calc(24vw + var(--expand) * 68vh);
  max-width: 1030px;
  max-height: 1000px;
  border-color: rgba(255, 255, 255, .44);
  box-shadow: 0 42px 110px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 0 80px rgba(81, 184, 213, .08);
}
.ws-media-frame img {
  filter: saturate(.95) contrast(1.16) brightness(.66);
}
.ws-content {
  width: min(100%, 1030px);
  max-width: 1030px;
  align-items: center;
  text-align: center;
}
.ws-brand {
  align-self: flex-start;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.ws-title {
  max-width: 850px;
  margin: auto auto 0;
  font-size: clamp(48px, 6.05vw, 88px);
  line-height: .92;
  text-wrap: balance;
}
.ws-subtitle {
  max-width: 650px;
  color: rgba(255, 255, 255, .82);
}
.ws-badges,
.ws-actions {
  justify-content: center;
}
.ws-skip {
  width: auto;
}
.ws-stats {
  justify-content: center;
  margin-top: auto;
}
.ws-preview-panel {
  right: max(24px, calc((100vw - 1030px) / 2 + 22px));
}
@keyframes wsBackdropDrift {
  from { transform: scale(1.04) translate3d(-1%, -1%, 0); }
  to { transform: scale(1.1) translate3d(1%, 1%, 0); }
}

/* Spotlight auth: white, glossy card close to the 21st.dev demo. */
.gc-auth-modal .modal-close {
  color: #151821 !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 12px 36px rgba(24, 29, 38, .16);
}
.gc-21-auth-ui {
  grid-template-columns: minmax(270px, .72fr) minmax(450px, 1.28fr);
  min-height: 630px;
  border-color: rgba(255, 255, 255, .95);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff 0%, #f1f1ed 100%);
  box-shadow:
    0 28px 55px -34px rgba(18, 22, 31, .55),
    0 62px 125px -36px rgba(18, 22, 31, .38),
    inset 0 1px rgba(255, 255, 255, .96);
}
.gc-21-auth-ui::after {
  content: "";
  position: absolute;
  inset: 16px -24px -30px;
  z-index: -1;
  border-radius: 42px;
  background: rgba(255, 255, 255, .58);
  filter: blur(24px);
  box-shadow: 0 50px 90px rgba(21, 25, 34, .18);
}
.gc-21-auth-spotlight {
  z-index: 1;
  inset: -1px;
  opacity: 1;
  background:
    radial-gradient(430px circle at var(--spot-x) var(--spot-y), rgba(0, 0, 0, .055), transparent 68%),
    linear-gradient(120deg, rgba(255, 255, 255, .8), transparent 38%);
}
.gc-21-auth-rail {
  z-index: 2;
  color: #171a21;
  border-right: 1px solid rgba(17, 19, 24, .075);
  background:
    radial-gradient(circle at 72% 13%, rgba(217, 255, 84, .2), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(238, 239, 235, .76));
}
.gc-21-auth-rail::before,
.gc-21-auth-rail::after {
  border-color: rgba(50, 57, 68, .11);
}
.gc-21-auth-rail::after {
  border-color: rgba(112, 145, 24, .2);
}
.gc-21-auth-kicker,
.gc-21-auth-eyebrow {
  color: #626871;
}
.gc-21-auth-rail strong {
  color: #14171d;
  font-size: clamp(36px, 3.6vw, 51px);
}
.gc-21-auth-rail strong em {
  color: #7c9f12;
}
.gc-21-auth-rail > small {
  color: #6e737c;
}
.gc-21-auth-metrics b {
  color: #15181f;
}
.gc-21-auth-metrics small {
  color: #858a93;
}
.gc-21-auth-orbit {
  background: #8aab1d;
  box-shadow: 0 0 0 8px rgba(138, 171, 29, .14), 0 0 26px rgba(138, 171, 29, .28);
}
.gc-21-auth-main {
  z-index: 2;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(20px);
}
.gc-21-auth-heading h2 {
  font-size: clamp(32px, 3.1vw, 42px);
}
.gc-21-auth-body input,
.gc-21-auth-body select {
  border-color: rgba(20, 23, 29, .12);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .92);
}
.gc21-a3-more {
  background: rgba(255, 255, 255, .38);
}
.gc-21-auth-divider span {
  background: #faf9f5;
}

/* Atlas: Spline-style globe with a radial orbital signal composition. */
.gc21-b-map-layout {
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 12px;
  max-width: 1760px;
}
.gc21-b-map-card {
  position: relative;
  min-height: calc(100dvh - 112px);
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(ellipse at 50% 58%, rgba(47, 101, 146, .18), transparent 34%),
    radial-gradient(circle at 83% 8%, rgba(92, 152, 214, .16), transparent 24%),
    linear-gradient(155deg, #080b0f 0%, #020303 72%);
  box-shadow: 0 38px 90px rgba(9, 13, 19, .28);
}
.gc21-b-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .25;
  background-image: radial-gradient(rgba(185, 229, 255, .28) .7px, transparent .8px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 58%, #000, transparent 62%);
}
.gc21-b-map-head {
  position: relative;
  z-index: 3;
}
.gc21-b-map-head h1 {
  font-size: clamp(43px, 4.4vw, 68px);
}
.gc21-b-map-content {
  position: relative;
  z-index: 2;
  height: calc(100dvh - 235px);
  min-height: 660px;
  border-color: rgba(255, 255, 255, .075);
  background: radial-gradient(circle at 50% 49%, #101a29 0%, #070b12 42%, #020303 78%);
}
.gc21-b-map-aside {
  color: #eef7ff;
  border-color: rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 119, 255, .19), transparent 34%),
    linear-gradient(160deg, #10141c, #07090d 75%);
  box-shadow: 0 30px 70px rgba(9, 13, 19, .22), inset 0 1px rgba(255, 255, 255, .05);
}
.gc21-b-map-aside .gc21-b-section-kicker {
  color: #d9ff54;
}
.gc21-b-map-aside h2 {
  color: #fff;
}
.gc21-b-map-aside p {
  color: rgba(255, 255, 255, .5);
}
.gc21-b-map-metric {
  border-bottom-color: rgba(255, 255, 255, .1);
}
.gc21-b-map-metric b {
  color: #fff;
}
.gc21-b-map-metric span {
  color: rgba(255, 255, 255, .44);
}
.gc21-b-map-aside .gc21-b-primary {
  color: #0c0e12;
  border-color: transparent;
  background: var(--gc21-lime);
  box-shadow: 0 15px 38px rgba(217, 255, 84, .15);
}
.gc-globe-scene {
  background:
    radial-gradient(circle at 50% 46%, rgba(36, 88, 134, .2), transparent 19%),
    radial-gradient(circle at 50% 48%, #0b1320 0%, #05070a 57%, #010202 100%);
}
.gc-globe-scene::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
  background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(92, 162, 255, .12), transparent 26%, rgba(217, 255, 84, .08), transparent 61%);
  animation: atlasAura 18s linear infinite;
}
.gc-globe-canvas {
  position: relative;
  z-index: 1;
}
.gc-globe-vignette {
  z-index: 3;
  background: radial-gradient(circle at 50% 48%, transparent 40%, rgba(0, 0, 0, .62) 82%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .72);
}
.gc-globe-copy {
  top: 26px;
  left: 28px;
}
.gc-globe-copy span {
  color: rgba(114, 220, 255, .72);
}
.gc-globe-copy strong {
  color: rgba(255, 255, 255, .56);
}
.gc-globe-controls {
  top: 24px;
  right: 24px;
}
.gc-globe-legend {
  left: 50%;
  bottom: 21px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .32);
}
.gc-globe-orbit-system {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(68%, 610px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.gc-globe-orbit-ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(175, 219, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(113, 190, 255, .035);
}
.gc-globe-orbit-ring.ring-b {
  inset: 19%;
  border-style: dashed;
  border-color: rgba(175, 219, 255, .12);
  animation: atlasOrbit 28s linear infinite;
}
.gc-globe-orbit-ring.ring-c {
  inset: 31%;
  border-color: rgba(217, 255, 84, .12);
  animation: atlasOrbit 20s linear infinite reverse;
}
.gc-globe-orbit-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  transform: translate(-50%, -50%);
}
.gc-globe-orbit-dot i {
  width: 11px;
  height: 11px;
  flex: none;
  border: 1px solid rgba(171, 222, 255, .62);
  border-radius: 50%;
  background: #0a1018;
  box-shadow: 0 0 0 7px rgba(112, 220, 255, .045), 0 0 22px rgba(112, 220, 255, .25);
  animation: atlasNodePulse 2.7s ease-in-out infinite;
}
.gc-globe-orbit-dot b {
  font-weight: 750;
  text-shadow: 0 2px 14px #000;
}
.dot-translate,
.dot-connect {
  transform: translate(-8%, -50%);
}
.dot-play,
.dot-belong {
  transform: translate(-92%, -50%);
}
@keyframes atlasOrbit { to { transform: rotate(360deg); } }
@keyframes atlasAura { to { transform: rotate(360deg); } }
@keyframes atlasNodePulse {
  50% { box-shadow: 0 0 0 12px rgba(112, 220, 255, .015), 0 0 30px rgba(112, 220, 255, .42); }
}

@media (max-width: 760px) {
  .ws-backdrop {
    width: 100vw;
  }
  .ws-content {
    padding: 24px 20px 34px;
  }
  .ws-media-frame {
    width: calc(58vw + var(--expand) * 42vw);
    height: calc(72vw + var(--expand) * 48vh);
  }
  .ws-title {
    font-size: clamp(41px, 12.4vw, 60px);
  }
  .ws-badges {
    margin-top: 18px;
  }
  .ws-preview-panel {
    display: none;
  }
  .ws-stats {
    width: 100%;
    gap: 16px;
    justify-content: space-between;
  }
  .gc-21-auth-ui {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    border-radius: 24px;
  }
  .gc-21-auth-rail {
    min-height: 185px;
    padding: 25px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(17, 19, 24, .075);
  }
  .gc-21-auth-rail strong {
    margin-top: 26px;
    font-size: 33px;
  }
  .gc-21-auth-rail > small {
    max-width: 100%;
    margin-top: 9px;
    font-size: 11px;
  }
  .gc-21-auth-metrics {
    display: none;
  }
  .gc-21-auth-main {
    padding: 28px 22px 30px;
  }
  .gc21-b-map-card {
    min-height: auto;
  }
  .gc21-b-map-content {
    height: 620px;
    min-height: 620px;
  }
  .gc-globe-orbit-system {
    width: 88%;
  }
  .gc-globe-orbit-dot b {
    display: none;
  }
  .gc-globe-copy {
    top: 19px;
    left: 18px;
  }
  .gc-globe-controls {
    top: 17px;
    right: 17px;
  }
}


/* v1.13.0 responsive visual QA corrections */
.ws-content {
  box-sizing: border-box;
  padding-bottom: 76px;
}
.ws-media-frame {
  background: #0a1719;
}
.ws-media-frame img {
  filter: saturate(1.04) contrast(1.2) brightness(.82);
}
@media (max-width: 760px) {
  .ws-content {
    width: 100%;
    padding: 24px 18px 64px;
  }
  .ws-title {
    max-width: 100%;
    font-size: clamp(37px, 10vw, 43px);
    line-height: .94;
  }
  .ws-subtitle {
    max-width: 100%;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
  .ws-badges {
    margin-top: 15px;
  }
  .ws-actions {
    margin-top: 18px;
  }
  .ws-skip {
    margin-top: 10px;
  }
  .ws-stats {
    gap: 12px;
    padding-top: 14px;
  }
  .ws-stats strong {
    font-size: 22px;
  }
  .ws-stats span {
    font-size: 8px;
  }
  .gc21-b-map-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .gc21-b-map-aside {
    display: flex;
    padding: 26px 22px;
  }
  .gc21-b-map-content {
    height: 570px;
    min-height: 570px;
  }
}