:root {
  /* Light Editorial Gallery Ground & Tonal Surfaces (Zero 1px Outlined Boxes) */
  --page-bg: #f6f5f0;
  --page-surface: #eae6dc;
  --page-surface-2: #dfdad0;
  --page-ink: #121210;
  --page-muted: #5c5951;
  --page-accent: #0e7c47;
  --page-accent-soft: rgba(14, 124, 71, 0.1);

  /* Dark Cinema UI Tokens Inside the 16:9 Live Stream Stage (data-ui) */
  --bg-0: #09090b;
  --bg-1: #111113;
  --bg-2: #18181b;
  --bg-3: #222226;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(250, 204, 21, 0.28);
  --text-0: #f4f4f5;
  --text-1: #a1a1aa;
  --text-2: #71717a;
  --gang-yellow: #facc15;
  --gang-yellow-dim: rgba(250, 204, 21, 0.14);
  --emerald: #10b981;
  --emerald-dim: rgba(16, 185, 129, 0.14);
  --crimson: #ef4444;
  --font-sans: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--page-bg);
  color: var(--page-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font-family: inherit;
  color: inherit;
}

/* =========================================================
   1. Light Editorial Navigation Bar (No Borders, Pure Tone)
   ========================================================= */
.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 1720px;
  margin: 0 auto;
  padding: 10px 28px 6px;
  background: transparent;
  border: 0;
}

.header-left {
  min-width: 0;
}

.brand-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  border: 0;
  flex-shrink: 0;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brand-wordmark,
.brand-title-row h1 {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--page-ink);
}

.brand-meta p {
  font-size: 13px;
  color: var(--page-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--page-accent);
  border: 0;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulseDot 1.6s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--page-surface);
  border: 0;
  font-size: 13px;
  transition: background 0.15s ease;
}

.wallet-chip:hover {
  background: var(--page-surface-2);
}

.wallet-chip span {
  color: var(--page-muted);
}

.wallet-chip b {
  font-family: var(--font-mono);
  color: var(--page-ink);
  font-weight: 700;
}

.nav-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--page-surface);
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--page-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.nav-link-btn:hover {
  background: var(--page-surface-2);
}

.lang-toggle-btn {
  background: var(--page-ink);
  color: var(--page-bg);
}

.lang-toggle-btn:hover {
  background: var(--page-accent);
  color: #ffffff;
}

/* =========================================================
   1B. Editorial Punchline Hero (Compact Masthead + Serif/Sans Pairing)
   ========================================================= */
.editorial-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
  max-width: 1720px;
  margin: 0 auto 8px;
  padding: 4px 28px 8px;
  border-bottom: 1px solid rgba(18, 18, 16, 0.09);
}

.editorial-display {
  font-size: clamp(1.35rem, 2.05vw, 1.92rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--page-ink);
  text-wrap: balance;
}

.editorial-display .serif-em {
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
}

.editorial-display .serif-em.accent {
  color: var(--page-accent);
  text-decoration: underline;
  text-decoration-color: rgba(14, 124, 71, 0.32);
  text-underline-offset: 4px;
}

.editorial-lead {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--page-muted);
  max-width: none;
  justify-self: end;
  text-align: right;
}

/* =========================================================
   2. Main 2-Column Stream Layout (First-Screen 100dvh 16:9 Stage + Right Panel)
   ========================================================= */
.stream-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 28px 16px;
  align-items: stretch;
}

.stream-stage-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.live-monitor-frame {
  position: relative;
  width: 100%;
  height: calc(100dvh - 115px);
  min-height: 480px;
  max-height: 680px;
  aspect-ratio: 16 / 9;
  background: #070709;
  border-radius: 18px;
  border: 0;
  box-shadow: 0 18px 44px rgba(18, 18, 16, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text-0);
}

/* =========================================================
   3. AI's Own Computer Browser Window (gang.fun / GMGN)
   ========================================================= */
.ai-browser-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #0a0a0c;
}

.browser-tabbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 0;
  background: #141418;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-right: 4px;
}

.w-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.w-dot.red { background: #ff5f56; }
.w-dot.yellow { background: #ffbd2e; }
.w-dot.green { background: #27c93f; }

.browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.b-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.b-tab.active {
  background: #0b0b0e;
  border-color: rgba(255, 255, 255, 0.09);
  color: var(--text-0);
  font-weight: 600;
}

.b-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.b-tab-icon.gang-y {
  background: var(--gang-yellow);
  color: #09090b;
}

.b-tab-icon.gmgn-g {
  background: var(--emerald);
  color: #09090b;
}

.b-tab-icon.bsc-b {
  background: #f59e0b;
  color: #09090b;
}

.browser-agent-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.28);
  color: var(--gang-yellow);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.agent-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gang-yellow);
  animation: pulseDot 1.5s infinite;
}

/* Browser URL Bar */
.browser-navbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: #0b0b0e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 13px;
  user-select: none;
}

.url-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.url-lock {
  font-size: 11px;
}

.url-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.url-source-badge {
  font-size: 11px;
  color: var(--emerald);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Browser Viewport & gang.fun Dark Page (Right 312px Reserved for Studio Anchor Dock) */
.browser-viewport {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #070709;
  padding-bottom: 16px;
}

.browser-page {
  display: none;
  padding: 12px 16px 14px;
}

.browser-page.active {
  display: block;
}

/* gang.fun Authentic Dark Header inside Browser */
.gang-site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gang-site-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gang-wordmark {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--gang-yellow);
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.25);
}

.gang-nav-links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-1);
}

.gang-nav-links span.active {
  color: var(--text-0);
  font-weight: 700;
}

.gang-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gang-search-box.ai-typing {
  border-color: var(--gang-yellow);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2);
}

.slash-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.gang-search-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--text-0);
}

/* gang.fun Hero Strip */
.gang-hero-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.gang-chain-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gang-yellow);
  margin-bottom: 2px;
}

.gang-hero-h2 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--text-0);
  margin-bottom: 2px;
}

.gang-hero-desc {
  font-size: 11.5px;
  color: var(--text-1);
}

.gang-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 152px;
  padding: 8px 14px;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.g-stat-lbl {
  font-size: 10.5px;
  color: var(--text-1);
}

.g-stat-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  line-height: 1.15;
  margin: 1px 0;
}

.g-stat-sub {
  font-size: 10.5px;
  color: var(--emerald);
}

/* Live Ticker Strip (Matches gang.fun buy bar) */
.gang-live-ticker {
  display: flex;
  align-items: center;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 9px;
}

.ticker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(16, 185, 129, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--emerald);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.t-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 14px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-1);
}

.ticker-item b {
  color: var(--gang-yellow);
  font-family: var(--font-mono);
}

/* gang.fun Market Filter Toolbar */
.gang-market-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.gang-filter-group,
.gang-sort-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gf-title {
  color: var(--gang-yellow);
  font-weight: 700;
  font-size: 13px;
  margin-right: 6px;
}

.gf-btn,
.gs-btn {
  padding: 4px 10px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gf-btn.active,
.gs-btn.active {
  background: var(--gang-yellow);
  border-color: var(--gang-yellow);
  color: #09090b;
}

/* gang.fun 2-Column Token Cards Grid (Right 312px Notch Reserved for Bottom-Right Studio Cam) */
.gang-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-right: 312px;
}

.gang-token-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  background: #0e0e12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.gang-token-card:hover,
.gang-token-card.ai-focus {
  background: #14141a;
  border-color: var(--gang-yellow);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35), 0 10px 24px rgba(0, 0, 0, 0.45);
}

.gcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gcard-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gcard-avatar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #27272a, #18181b);
  border: 1px solid rgba(250, 204, 21, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--gang-yellow);
  flex-shrink: 0;
}

.gcard-titles {
  min-width: 0;
}

.gcard-sym-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gcard-sym {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-0);
}

.gcard-name {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.gcard-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.g-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-1);
}

.g-badge.tax {
  border-color: rgba(250, 204, 21, 0.45);
  color: var(--gang-yellow);
  background: rgba(250, 204, 21, 0.08);
}

.g-badge.candidate {
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--emerald);
  background: rgba(16, 185, 129, 0.12);
}

.gcard-right {
  text-align: right;
  flex-shrink: 0;
}

.gcard-pct {
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--gang-yellow);
}

.gcard-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.gcard-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gcard-bar-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.gcard-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #eab308, #10b981);
  transition: width 0.35s ease;
}

.gcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-1);
  font-family: var(--font-mono);
}

.gang-loading-card {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--text-1);
  background: #0e0e12;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

/* GMGN & BscScan Tabs inside Browser */
.gmgn-header-bar,
.bscscan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #101015;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
}

.gmgn-badge,
.bsc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--emerald-dim);
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
}

.gmgn-ext-link {
  font-size: 12px;
  color: var(--gang-yellow);
  font-weight: 600;
}

.gmgn-research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 312px;
}

.gmgn-kpi-card {
  padding: 16px;
  background: #101015;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gmgn-kpi-card span {
  font-size: 12px;
  color: var(--text-1);
}

.gmgn-big-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-0);
}

.gmgn-kpi-card small {
  font-size: 11px;
  color: var(--text-2);
}

.gmgn-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.gmgn-progress-bar i {
  display: block;
  height: 100%;
  background: var(--emerald);
}

.gmgn-note-box {
  padding: 14px 16px;
  margin-right: 312px;
  background: rgba(250, 204, 21, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-0);
}

/* Inline Token Inspector Drawer inside Browser */
.browser-inspector-drawer {
  position: relative;
  margin: 0 308px 12px 0;
  padding: 10px 12px;
  background: rgba(20, 20, 26, 0.96);
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 2;
  max-width: 100%;
}

.inspector-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.insp-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--gang-yellow);
  color: #09090b;
  font-size: 10px;
  font-weight: 800;
  margin-right: 6px;
}

.insp-symbol {
  font-size: 14px;
  font-weight: 800;
  margin-right: 6px;
}

.insp-addr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-1);
}

.insp-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-1);
  cursor: pointer;
}

.inspector-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  font-size: 11px;
}

.inspector-metrics span {
  display: block;
  color: var(--text-2);
}

.inspector-metrics strong {
  font-family: var(--font-mono);
  color: var(--text-0);
}

/* =========================================================
   4. AI Autonomous Mouse Cursor inside Browser
   ========================================================= */
.ai-cursor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  overflow: hidden;
}

.ai-mouse-pointer {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.ai-mouse-pointer.cursor-clicking .cursor-svg {
  transform: scale(0.86) translate(1px, 1px);
}

.cursor-svg {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.9));
  flex-shrink: 0;
  transition: transform 0.09s ease-out;
}

.cursor-click-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--gang-yellow);
  opacity: 0;
  transform: scale(0.5);
}

.cursor-click-ring.clicking {
  animation: clickRipple 0.38s ease-out;
}

@keyframes clickRipple {
  0% { opacity: 0.95; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(1.65); }
}

.cursor-action-pill {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

/* =========================================================
   5. Bottom-Right Studio Anchor Dock (4:3 Uncropped Streamer Cam + Teleprompter Deck)
   ========================================================= */
.juji-pip-cam {
  position: absolute;
  top: auto;
  right: 12px;
  bottom: 12px;
  width: 296px;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0f;
  border: 1.5px solid rgba(250, 204, 21, 0.44);
  box-shadow: -10px -6px 28px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.85);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.pip-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex: none;
  overflow: hidden;
  background: #09090b;
}

.pip-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease-out;
  pointer-events: none;
  animation: studioCamBreathe 6.5s ease-in-out infinite alternate;
}

.pip-cam-video.active {
  opacity: 1;
}

.pip-pose-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.42s ease-in-out, transform 2.4s ease-in-out;
  pointer-events: none;
}

.pip-pose-img.active {
  opacity: 1;
  animation: studioCamBreathe 6.5s ease-in-out infinite alternate;
}

@keyframes studioCamBreathe {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  50% {
    transform: scale(1.038) translate3d(-1.5px, -1.5px, 0);
  }
  100% {
    transform: scale(1.028) translate3d(1.5px, -1px, 0);
  }
}

.pip-monitor-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 22% 45%, rgba(250, 204, 21, 0.11), rgba(16, 185, 129, 0.05) 45%, transparent 68%);
  pointer-events: none;
  transition: background 0.5s ease;
  animation: monitorLightFlicker 4.6s ease-in-out infinite alternate;
}

@keyframes monitorLightFlicker {
  0% { opacity: 0.72; }
  50% { opacity: 1; }
  100% { opacity: 0.84; }
}


.pip-cam-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-0);
}

.cam-red-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
}




.pip-bottom-overlay {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 11px 9px;
  background: linear-gradient(180deg, #121217 0%, #09090c 100%);
  border-top: 1px solid rgba(250, 204, 21, 0.25);
  z-index: 3;
}

.pip-thought-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.pip-os-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gang-yellow);
}

.pip-wave-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.pip-wave-bars span {
  width: 2px;
  height: 3px;
  background: var(--emerald);
  border-radius: 1px;
  transition: height 0.1s ease;
}

.pip-wave-bars.speaking span:nth-child(odd) {
  height: 10px;
}

.pip-wave-bars.speaking span:nth-child(even) {
  height: 6px;
}

.pip-subtitle {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-0);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   6. Light Editorial Tonal Sidebar (Fits 100% Inside First-Screen 100dvh)
   ========================================================= */
.stream-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: calc(100dvh - 115px);
  min-height: 480px;
  max-height: 680px;
}

.clean-card {
  background: var(--page-surface);
  border: 0;
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--page-ink);
}

.clean-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.clean-card-head h2 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--page-ink);
}

.head-sub-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--page-accent);
}

.tiny-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--page-bg);
  border: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--page-muted);
}

.simple-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bal-box {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--page-bg);
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bal-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--page-muted);
}

.bal-value {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.25vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--page-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bal-box:not(.primary) .bal-value,
.bal-value.is-status-note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--page-muted);
  padding: 2px 0;
}

.bal-box.primary .bal-value {
  color: var(--page-accent);
}

.bal-note {
  font-size: 11px;
  color: var(--page-muted);
  font-variant-numeric: tabular-nums;
}

.simple-subblock {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.subblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--page-ink);
}

.holdings-list-wrap {
  background: var(--page-bg);
  border-radius: 10px;
  padding: 4px 8px;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.simple-table th {
  text-align: left;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--page-muted);
  border: 0;
}

.simple-table td {
  padding: 5px 6px;
  border: 0;
  color: var(--page-ink);
  font-variant-numeric: tabular-nums;
}

.empty-cell {
  padding: 7px 8px;
  text-align: center;
  color: var(--page-muted);
  font-size: 12px;
  background: var(--page-bg);
  border-radius: 8px;
}

.candidate-mini-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--page-bg);
  border: 0;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cand-row:hover {
  background: #ffffff;
}

.cand-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cand-sym {
  font-weight: 800;
  color: var(--page-ink);
}

.cand-reserve {
  font-size: 11px;
  color: var(--page-muted);
  font-variant-numeric: tabular-nums;
}

.cand-pct {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--page-accent);
  font-variant-numeric: tabular-nums;
}

/* Chat Panel */
.chat-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.quick-ask-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.q-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--page-bg);
  border: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--page-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.q-chip:hover {
  background: var(--page-ink);
  color: var(--page-bg);
}

.chat-messages-box {
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.chat-msg {
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--page-bg);
  border: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--page-ink);
}

.msg-author {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--page-accent);
  margin-bottom: 2px;
}

.chat-msg.user .msg-author {
  color: var(--page-ink);
}

.chat-input-row {
  display: flex;
  gap: 6px;
}

.chat-input-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--page-bg);
  border: 0;
  font-size: 12.5px;
  color: var(--page-ink);
  outline: none;
}

.chat-input-row input:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 2px;
}

.chat-input-row button {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--page-accent);
  border: 0;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.chat-input-row button:hover {
  background: var(--page-ink);
}

/* =========================================================
   7. Asymmetric Editorial Magazine Rules Section Below (Serif Numerals 01 / 02 / 03)
   ========================================================= */
.rules-section {
  max-width: 1720px;
  margin: 0 auto;
  padding: 40px 28px 80px;
}

.rules-editorial-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.rules-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 2px solid var(--page-ink);
  padding-top: 20px;
}

.rules-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--page-ink);
}

.rules-header p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--page-muted);
}

.rules-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: rule-idx;
}

.rule-card {
  position: relative;
  padding: 26px 26px 24px;
  border-radius: 0 0 18px 18px;
  background: var(--page-surface);
  border-top: 3px solid var(--page-ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-increment: rule-idx;
}

.rule-card::before {
  content: "0" counter(rule-idx);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 2.35rem;
  line-height: 1;
  color: var(--page-accent);
  letter-spacing: -0.03em;
}

.rule-card h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--page-ink);
  text-wrap: balance;
}

.rule-card p {
  font-size: 14.5px;
  color: var(--page-muted);
  line-height: 1.65;
}

/* =========================================================
   8. Responsive Mobile & Broadcast Stage Adjustments
   ========================================================= */
@media (max-width: 1180px) {
  .editorial-hero {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 20px;
  }

  .editorial-lead {
    justify-self: start;
    text-align: left;
    max-width: 64ch;
  }

  .stream-layout {
    grid-template-columns: 1fr;
    padding: 8px 20px 24px;
  }

  .live-monitor-frame {
    height: auto;
    min-height: 540px;
    max-height: none;
    aspect-ratio: auto;
  }

  .stream-sidebar-col {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .rules-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .stream-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px 8px;
    gap: 10px;
  }

  .editorial-hero {
    padding: 8px 16px 12px;
  }

  .editorial-display {
    font-size: clamp(1.45rem, 6.2vw, 2.1rem);
  }

  .stream-layout {
    padding: 4px 16px 20px;
  }

  .header-right {
    width: 100%;
    gap: 6px;
  }

  .gang-cards-grid,
  .gmgn-research-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .gmgn-note-box {
    margin-right: 0;
  }

  .gang-hero-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .gang-search-box {
    width: 100%;
  }

  .browser-viewport {
    padding-bottom: 16px;
  }

  .browser-page {
    padding: 12px 14px;
  }

  .browser-inspector-drawer {
    max-width: 100%;
    margin: 0 0 12px 0;
  }

  .juji-pip-cam {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: calc(100% - 24px);
    margin: 10px 12px 12px;
  }

  .pip-video-stage {
    aspect-ratio: 16 / 10;
  }

  .ai-cursor-layer {
    display: none;
  }

  .rules-section {
    padding: 36px 16px 64px;
  }

  .rule-card {
    padding: 22px 20px;
  }
}

/* =========================================================
   9. Architectural Stage Frame & Interactive Tour System
   ========================================================= */
.dots {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
}

.stream-header,
.editorial-hero,
.stream-layout,
.rules-section {
  position: relative;
  z-index: 2;
}

@media (min-width: 1181px) {
  .stream-header,
  .editorial-hero,
  .stream-layout,
  .rules-section {
    padding-left: 44px;
    padding-right: 64px;
  }
}

/* Top Navigation Bar Refinement */
.stream-header {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  padding-top: 10px;
  padding-bottom: 8px;
}

.brand-logo {
  border-radius: 6px;
  border: 1px solid #0a0a0a;
}

.live-pill {
  background: #0a0a0a;
  color: #f5f3ee;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
}

.live-pill i {
  background: #00c853;
  box-shadow: 0 0 6px #00c853;
}

#pill-ai-wallet {
  background: #0a0a0a;
  color: #f5f3ee;
  border: 1px solid #0a0a0a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
}

#pill-ai-wallet span {
  color: #a8a499;
}

#pill-ai-wallet b {
  color: #ffffff;
}

#pill-token-ca {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
}

.nav-link-btn {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.14);
  border-radius: 6px;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #1c1917;
}

.nav-link-btn:hover {
  background: #0a0a0a;
  color: #f5f3ee;
  border-color: #0a0a0a;
}

.lang-toggle-btn {
  background: #0a0a0a;
  color: #f5f3ee;
  border-color: #0a0a0a;
}

/* Four Corner Monospace Registration Crosshairs + Micro-Coordinates + Right Chapter Rail */
.arch-crosshair {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: #b8b5aa;
  pointer-events: none;
  user-select: none;
  z-index: 40;
}

.arch-crosshair.tl { top: 64px; left: 16px; }
.arch-crosshair.tr { top: 64px; right: 16px; }
.arch-crosshair.bl { bottom: 18px; left: 16px; }
.arch-crosshair.br { bottom: 18px; right: 16px; }

.arch-micro-coord {
  position: fixed;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9e9b90;
  pointer-events: none;
  user-select: none;
  z-index: 40;
}

.arch-micro-coord.bl-coord { left: 36px; }
.arch-micro-coord.br-coord { right: 36px; }

.arch-rail {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 45;
}

.arch-rail-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #8a877d;
  transition: color 0.2s ease;
}

.arch-rail-item i {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: #c5c2b8;
  transition: width 0.25s ease, background 0.25s ease;
}

.arch-rail-item.active,
.arch-rail-item:hover {
  color: #0a0a0a;
  font-weight: 700;
}

.arch-rail-item.active i,
.arch-rail-item:hover i {
  width: 24px;
  background: #0a0a0a;
}

/* Dual Pill Badges + 2-Line Tight-Tracking Masthead + 4-Color Shutter Cycle */
.editorial-hero {
  align-items: end;
  padding-top: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
}

.editorial-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.arch-hero-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.arch-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.arch-pill-badge.live {
  background: #0a0a0a;
  color: #f5f3ee;
}

.arch-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00c853;
  box-shadow: 0 0 8px #00c853;
  animation: livePulse 1.8s infinite;
}

.arch-pill-badge.outline {
  background: rgba(255, 255, 255, 0.78);
  color: #1c1917;
  border: 1px solid rgba(10, 10, 10, 0.22);
}

@keyframes archShutterCycle {
  0%, 20% { color: #7b3fff; filter: blur(0px); }
  23% { color: #48c8ef; filter: blur(2.5px); }
  26%, 45% { color: #48c8ef; filter: blur(0px); }
  48% { color: #ff2e93; filter: blur(2.5px); }
  51%, 70% { color: #ff2e93; filter: blur(0px); }
  73% { color: #ff7a1a; filter: blur(2.5px); }
  76%, 95% { color: #ff7a1a; filter: blur(0px); }
  98% { color: #7b3fff; filter: blur(2.5px); }
  100% { color: #7b3fff; filter: blur(0px); }
}

.arch-hero-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-sans);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.arch-hero-title .serif-em,
.arch-hero-title .serif-em.accent {
  font-family: var(--font-sans);
  font-style: normal;
  text-decoration: none;
}

.arch-title-line1 {
  font-weight: 800;
  color: #0a0a0a;
}

.arch-title-line2 {
  font-weight: 400;
  color: #2c2b27;
}

.arch-title-em {
  font-style: normal;
  font-weight: 800;
  color: #7b3fff;
  animation: archShutterCycle 10s infinite ease-in-out;
  display: inline-block;
}

.arch-cta-group {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  border: 1px solid #0a0a0a;
  background: #ffffff;
  align-self: flex-end;
}

.arch-cta-primary,
.arch-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.arch-cta-primary {
  background: #0a0a0a;
  color: #f5f3ee;
}

.arch-cta-primary:hover {
  background: #27272a;
}

.arch-cta-secondary {
  background: #ffffff;
  color: #0a0a0a;
  border-left: 1px solid #0a0a0a;
}

.arch-cta-secondary:hover {
  background: #f3f1eb;
}

/* Frosted-Glass Top Bar & Deep #0d0d0d Stage Frame */
.live-monitor-frame {
  background: #0d0d0d;
  border: 1px solid rgba(10, 10, 10, 0.88);
  border-radius: 14px;
  box-shadow: 0 26px 64px -18px rgba(10, 10, 10, 0.36);
}

.browser-tabbar {
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.browser-inspector-drawer {
  background: #121216;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}

.juji-pip-cam {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.72);
}

/* Hide duplicate inner-monologue row inside stage overlay (displayed cleanly in .arch-tour-bar below) */
#live-monitor .pip-thought-row {
  display: none;
}

/* Expanding Progress Pill Tour Bar (.arch-tour-bar) */
.arch-tour-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid #0a0a0a;
  border-radius: 8px;
}

.arch-tour-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.arch-tour-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  background: #0a0a0a;
  color: #f5f3ee;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.arch-tour-caption {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #141413;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arch-tour-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.arch-tour-pill {
  position: relative;
  width: auto;
  height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(10, 10, 10, 0.22);
  border-radius: 5px;
  background: #e6e3da;
  color: #27272a;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.arch-tour-pill i {
  display: none;
}

.arch-tour-pill:hover {
  background: #d8d4c8;
  border-color: #0a0a0a;
}

.arch-tour-pill.active {
  width: auto;
  background: #0a0a0a;
  color: #f5f3ee;
  border-color: #0a0a0a;
}

.arch-tour-pill.active i {
  display: none;
}

/* Right Column Card 1: Dark BscScan Receipt Table */
#simple-holdings-panel {
  background: #141414;
  color: #e6e4dd;
  border: 1px solid #0a0a0a;
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(10, 10, 10, 0.28);
}

#simple-holdings-panel .clean-card-head {
  background: #1b1b1b;
  margin: -14px -16px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px 11px 0 0;
}

#simple-holdings-panel .clean-card-head h2 {
  color: #f5f3ee;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

#simple-holdings-panel .head-sub-link {
  color: #58a6ff;
  font-family: var(--font-mono);
}

#simple-holdings-panel .bal-box {
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

#simple-holdings-panel .bal-box.primary {
  background: #1f1f22;
  border-color: rgba(88, 166, 255, 0.28);
}

#simple-holdings-panel .bal-label {
  color: #9e9b90;
}

#simple-holdings-panel .bal-value {
  color: #f5f3ee;
  font-family: var(--font-mono);
}

#simple-holdings-panel .bal-box:not(.primary) .bal-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #c7c4ba;
}

#simple-holdings-panel .bal-note {
  color: #8a877d;
}

#simple-holdings-panel .subblock-head span:first-child {
  color: #bcb9af;
  font-family: var(--font-mono);
  font-size: 11px;
}

#simple-holdings-panel .tiny-pill {
  background: #26262a;
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.24);
}

#simple-holdings-panel .holdings-list-wrap {
  background: #19191d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

#simple-holdings-panel .simple-table th {
  color: #8a877d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#simple-holdings-panel .simple-table td {
  color: #e6e4dd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#simple-holdings-panel .empty-cell {
  color: #9e9b90;
  background: transparent;
}


#simple-holdings-panel .cand-row {
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

#simple-holdings-panel .cand-row:hover {
  background: #222226;
  border-color: rgba(88, 166, 255, 0.35);
}

#simple-holdings-panel .cand-sym {
  color: #58a6ff;
  font-family: var(--font-mono);
}

#simple-holdings-panel .cand-reserve {
  color: #a8a499;
  font-family: var(--font-mono);
}

#simple-holdings-panel .cand-pct {
  color: #00c853;
  font-family: var(--font-mono);
}

.tx-ix {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #27272a;
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.arch-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #9e9b90;
}

.arch-card-foot strong {
  color: #f5f3ee;
  font-weight: 600;
}

.arch-card-foot a {
  color: #58a6ff;
  text-decoration: none;
}

.arch-card-foot em {
  font-style: normal;
}

/* Right Column Card 2: Integrated Border Input */
#live-chat-panel {
  border: 1px solid #0a0a0a;
}

#live-chat-panel .chat-input-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid #0a0a0a;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

#live-chat-panel .chat-input-row input {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
}

#live-chat-panel .chat-input-row input:focus {
  outline: none;
  box-shadow: none;
}

#live-chat-panel .chat-input-row button {
  border: none;
  border-left: 1px solid #0a0a0a;
  border-radius: 0;
  background: #0a0a0a;
  color: #f5f3ee;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#live-chat-panel .chat-input-row button:hover {
  background: #27272a;
}

/* Section 02: 1px Solid #0a0a0a Architectural Protocol Grid */
.rules-cards-grid {
  gap: 0;
  border: 1px solid #0a0a0a;
  background: #ffffff;
}

.rule-card {
  border-radius: 0;
  border: none;
  border-right: 1px solid #0a0a0a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.rule-card:last-child {
  border-right: none;
}

/* Laptop Viewport Height Adaptive Zoom (Ensures 100% First-Screen Zero Vertical Scroll) */
@media (min-width: 1181px) and (max-height: 980px) {
  .stream-header,
  .editorial-hero,
  .stream-layout {
    zoom: 0.93;
  }
}

@media (min-width: 1181px) and (max-height: 860px) {
  .stream-header,
  .editorial-hero,
  .stream-layout {
    zoom: 0.85;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  .stream-header,
  .editorial-hero,
  .stream-layout {
    zoom: 0.78;
  }
}

@media (max-width: 1180px) {
  .arch-rail,
  .arch-crosshair,
  .arch-micro-coord {
    display: none;
  }

  .rule-card {
    border-right: none;
    border-bottom: 1px solid #0a0a0a;
  }

  .rule-card:last-child {
    border-bottom: none;
  }
}

/* =========================================================
   Interactive 4-Gate Sniper Console & Workstation Controls
   ========================================================= */
.insp-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.insp-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(250, 204, 21, 0.38);
  color: #f5f3ee;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.insp-tool-btn:hover {
  background: var(--gang-yellow);
  border-color: var(--gang-yellow);
  color: #09090b;
}

.ai-terminal-strip {
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(9, 9, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 2px solid var(--emerald);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #a1a1aa;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ai-term-tag {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.18);
  color: var(--emerald);
  font-weight: 700;
  font-size: 9.5px;
  flex-shrink: 0;
}

.arch-autopilot-btn {
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: var(--gang-yellow);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.arch-autopilot-btn:hover {
  background: var(--gang-yellow);
  color: #09090b;
}

.arch-autopilot-btn.paused {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--emerald);
  color: var(--emerald);
}

/* =========================================================
   BAW Live Trading & Order Execution Ticket inside Browser
   ========================================================= */
.inspector-workstation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.inspector-gates-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

.gate-metric-box {
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.trade-macro-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.macro-step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

.macro-step-chip.active {
  background: rgba(250, 204, 21, 0.16);
  border-color: var(--gang-yellow);
  color: var(--gang-yellow);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.18);
}

.ai-trade-ticket {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 9px;
  background: rgba(9, 9, 11, 0.94);
  border: 1px solid rgba(250, 204, 21, 0.36);
  border-radius: 6px;
}

.trade-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.trade-ticket-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: #f5f3ee;
}

.trade-ticket-badge {
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.16);
  border: 1px solid rgba(250, 204, 21, 0.42);
  color: var(--gang-yellow);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
}

.trade-ticket-badge.eligible {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--emerald);
  color: var(--emerald);
}

.trade-amt-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.trade-amt-btn {
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.trade-amt-btn:hover {
  border-color: var(--gang-yellow);
  color: #ffffff;
}

.trade-amt-btn.active {
  background: var(--gang-yellow);
  border-color: var(--gang-yellow);
  color: #09090b;
}

.trade-quote-row {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trade-preflight-btn {
  width: 100%;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.48);
  color: #fbbf24;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.trade-preflight-btn.ready {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--emerald);
  color: #34d399;
}

.trade-preflight-btn.blocked {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* Tactile physical depression when AI operator or user clicks an element */
.ai-pressing {
  transform: scale(0.97) !important;
  box-shadow: 0 0 0 2px var(--gang-yellow), 0 0 14px rgba(250, 204, 21, 0.35) !important;
  border-color: var(--gang-yellow) !important;
}

/* =========================================================
   Multi-Window Smart Money & Call-Latency Audit Strip
   ========================================================= */
.kol-radar-drawer {
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 8px 11px;
  background: rgba(16, 16, 20, 0.94);
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-left: 3px solid #48c8ef;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gmgn-embedded-kol {
  margin-top: 12px;
  background: rgba(20, 20, 25, 0.96);
}

.kol-radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.kol-radar-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.kol-win-badge {
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(72, 200, 239, 0.16);
  border: 1px solid rgba(72, 200, 239, 0.42);
  color: #48c8ef;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.kol-radar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #f5f3ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kol-radar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kol-utc-pill {
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.kol-commentary-bar {
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(9, 9, 11, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
  font-size: 11.5px;
  line-height: 1.45;
}

.kol-activity-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.kol-act-card {
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d4d4d8;
}

.kol-act-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.kol-act-sym {
  font-weight: 800;
  color: #f5f3ee;
}

.kol-act-tag {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}

.kol-act-tag.ready {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.kol-act-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  color: #a1a1aa;
  font-size: 9.5px;
}

.kol-act-link {
  color: #48c8ef;
  text-decoration: none;
}

.kol-act-link:hover {
  text-decoration: underline;
}

.kol-activity-empty {
  grid-column: 1 / -1;
  color: #a1a1aa;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

@media (max-width: 960px) {
  .inspector-workstation-grid,
  .kol-activity-list,
  .quad-terminal-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   4-Window Multi-Platform Terminal & 3-Tier FeeSplitter UI
   ========================================================= */
.quad-terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0;
}

.quad-pane {
  background: rgba(16, 16, 21, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.quad-pane-accent {
  border-color: rgba(250, 204, 21, 0.42);
  background: rgba(18, 17, 14, 0.96);
}

.quad-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 5px;
}

.quad-win-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--gang-yellow);
  letter-spacing: 0.03em;
}

.quad-win-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #a1a1aa;
}

.quad-pane-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #e4e4e7;
}

.quad-route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10px;
}

.quad-route-row span {
  color: #a1a1aa;
}

.quad-route-row strong {
  color: #f5f3ee;
  text-align: right;
}

.quad-commentary {
  padding: 5px 7px;
  border-radius: 4px;
  background: rgba(9, 9, 11, 0.85);
  border: 1px solid rgba(72, 200, 239, 0.25);
  font-size: 10.5px;
  line-height: 1.4;
  color: #e4e4e7;
}

.quad-metrics-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #a1a1aa;
}

.quad-metrics-mini b {
  color: #34d399;
}

.splitter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.splitter-lbl {
  color: #a1a1aa;
  margin-right: 2px;
}

.splitter-btn,
.splitter-vol-btn {
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d4d4d8;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.splitter-btn.active,
.splitter-vol-btn.active {
  background: var(--gang-yellow);
  border-color: var(--gang-yellow);
  color: #09090b;
}

.splitter-tiers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.splitter-tier-row {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(9, 9, 11, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #d4d4d8;
}

.st-badge {
  color: #48c8ef;
  font-weight: 700;
}

/* =========================================================
   Real-Time Chain Scanner & 5-Agent Decision Data Wall UI
   ========================================================= */



.real-data-wall {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 308px 12px 0;
}

.wall-dual-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wall-panel {
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.wall-panel-brain {
  border-color: rgba(250, 204, 21, 0.42);
  background: linear-gradient(180deg, rgba(22, 20, 14, 0.96), rgba(13, 13, 18, 0.98));
}

.wall-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  flex-wrap: wrap;
}

.wall-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.wall-step-pill {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.wall-step-pill.kol {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.42);
  color: #38bdf8;
}

.wall-step-pill.brain {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.48);
  color: var(--gang-yellow);
}

.wall-panel-title {
  font-size: 12px;
  font-weight: 800;
  color: #f4f4f5;
}

.wall-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.wall-meta-pill {
  color: #a1a1aa;
}

.wall-stat-num {
  color: var(--gang-yellow);
  font-size: 13px;
  font-weight: 800;
}

.wall-meta-sub {
  color: #34d399;
}

.wall-status-tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #d4d4d8;
  white-space: nowrap;
}

.wall-status-tag.brain {
  border-color: rgba(250, 204, 21, 0.45);
  color: var(--gang-yellow);
}

.scanner-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.scanner-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.scanner-data-table th {
  text-align: left;
  padding: 5px 6px;
  color: #a1a1aa;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.scanner-data-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e4e4e7;
  white-space: nowrap;
}

.scanner-data-row {
  cursor: pointer;
  transition: background 0.14s ease;
}

.scanner-data-row:hover,
.scanner-data-row.active-scan {
  background: rgba(250, 204, 21, 0.1);
}

.scanner-empty-cell {
  text-align: center;
  color: #a1a1aa;
  padding: 12px 6px;
}

.scan-pill {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.scan-pill.pass {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.scan-pill.warn {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
}

.scan-pill.hold {
  background: rgba(250, 204, 21, 0.14);
  color: #facc15;
}

.scanner-log-box {
  background: #070709;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #34d399;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 78px;
  overflow-y: auto;
}

.scanner-log-line {
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.call-feed-status-bar {
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.24);
  font-family: var(--font-mono);
  font-size: 10px;
  color: #bae6fd;
  line-height: 1.35;
}

.call-feed-events-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.call-feed-standby-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 10px;
  color: #d4d4d8;
}

.cf-tag {
  font-weight: 700;
  color: #facc15;
}

.cf-tag.d-type {
  color: #34d399;
}

.cf-tag.b-type {
  color: #fbbf24;
}

.cf-tag.a-type {
  color: #fb7185;
}

.cf-tag.four-type {
  color: #38bdf8;
}

.agent-eval-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-eval-row {
  display: grid;
  grid-template-columns: 146px 76px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-mono);
  font-size: 10px;
}

.ag-name {
  color: #e4e4e7;
  font-weight: 700;
  white-space: nowrap;
}

.ag-badge {
  text-align: center;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: #facc15;
  font-size: 9.5px;
  font-weight: 800;
}

.ag-badge.pass {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
}

.ag-badge.veto {
  background: rgba(244, 63, 94, 0.25);
  color: #fb7185;
}

.ag-desc {
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-final-verdict-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.42);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.verdict-pill {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gang-yellow);
  color: #09090b;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.verdict-text {
  margin: 0;
  color: #fef08a;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 960px) {
  .real-data-wall,
  .ai-live-computer-workstation {
    margin-right: 0;
  }
  .wall-dual-row {
    grid-template-columns: 1fr;
  }
  .agent-eval-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AI Live Cloud Computer & Real-Time DexScreener / GeckoTerminal K-Line Workstation
   ========================================================= */
.ai-live-computer-workstation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 308px 12px 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, #0b0c12 0%, #09090d 100%);
  border: 1px solid rgba(16, 185, 129, 0.42);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ws-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 7px;
}

.ws-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ws-live-pill {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ws-title {
  font-size: 12px;
  font-weight: 800;
  color: #f4f4f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-top-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-ctrl-btn {
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e4e4e7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.ws-ctrl-btn:hover {
  border-color: var(--gang-yellow);
  color: #ffffff;
}

.ws-ctrl-btn.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.ws-mode-switch {
  display: inline-flex;
  align-items: center;
  background: #060609;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  overflow: hidden;
}

.ws-mode-btn {
  padding: 3px 8px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}

.ws-mode-btn:last-child {
  border-right: none;
}

.ws-mode-btn.active {
  background: var(--gang-yellow);
  color: #09090b;
}

.ws-agent-step-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(250, 204, 21, 0.09);
  border: 1px solid rgba(250, 204, 21, 0.32);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.ws-step-badge {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--gang-yellow);
  color: #09090b;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-step-text {
  color: #fef08a;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-ext-link {
  color: #38bdf8;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-ext-link:hover {
  text-decoration: underline;
}

.ws-target-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ws-target-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: #e4e4e7;
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}

.ws-target-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(250, 204, 21, 0.45);
}

.ws-target-tab.active {
  background: rgba(250, 204, 21, 0.16);
  border-color: var(--gang-yellow);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}

.ws-chain-tag {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
}

.ws-chain-tag.bsc {
  background: rgba(250, 204, 21, 0.22);
  color: #facc15;
}

.ws-chain-tag.sol {
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
}

.ws-tab-meta {
  color: #a1a1aa;
  font-size: 9.5px;
}

.ws-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
}

.ws-chart-stage {
  position: relative;
  min-height: 540px;
  height: 540px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #050508;
  display: flex;
  flex-direction: column;
}

.ws-live-chart-iframe {
  width: 100%;
  flex: 1;
  min-height: 390px;
  border: 0;
  display: block;
  background: #050508;
}

.ws-ext-link.gmgn-link {
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

/* Real-Time New Launches Monitor Strip */
.ws-new-launches-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  overflow-x: auto;
}

.ws-new-radar-badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: #10b981;
  color: #050508;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-new-launches-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.ws-new-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(9, 10, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4f4f5;
  font-family: var(--font-mono);
  font-size: 9.8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s ease;
}

.ws-new-pill:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.ws-new-pill-meta {
  color: #a7f3d0;
  font-size: 9.2px;
}

/* On-Screen Live Intelligence HUD inside the Monitor */
.ws-screen-intel-hud {
  background: rgba(8, 9, 14, 0.96);
  border-top: 1px solid rgba(250, 204, 21, 0.35);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  z-index: 4;
}

.ws-hud-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.ws-hud-row.verdict {
  padding-top: 2px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.ws-hud-tag {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.2px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-hud-tag.kol {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ws-hud-tag.thesis {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.38);
}

.ws-hud-tag.juji {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.45);
}

.ws-hud-text {
  color: #e4e4e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full-Screen GMGN Terminal View inside Monitor */
.ws-gmgn-intel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 14, 0.98);
  z-index: 6;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ws-gmgn-intel-overlay[hidden] {
  display: none !important;
}

.ws-gmgn-terminal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  color: #f4f4f5;
}

.ws-gmgn-term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.ws-gmgn-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.04em;
}

.ws-gmgn-term-title {
  margin: 3px 0 0;
  font-size: 14px;
  color: #ffffff;
}

.ws-gmgn-open-btn {
  padding: 5px 10px;
  border-radius: 5px;
  background: #10b981;
  color: #050508;
  font-size: 10.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ws-gmgn-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ws-gmgn-term-col {
  padding: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ws-gmgn-term-col h5 {
  margin: 0 0 7px;
  font-size: 11px;
  color: #38bdf8;
}

.ws-gmgn-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-gmgn-modal-item {
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 10px;
  line-height: 1.4;
}

.ws-gmgn-term-verdict {
  padding: 9px 11px;
  border-radius: 6px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.45);
  color: #fef08a;
  font-size: 11px;
  line-height: 1.45;
}

/* Right Sidebar GMGN / Player Thesis / Juji Verdict Cards */
.ws-intel-card {
  padding: 7px 9px;
  border-radius: 7px;
  background: #0e0f15;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ws-intel-card.step-active {
  border-color: var(--gang-yellow);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.18);
}

.ws-intel-card.verdict-card {
  background: rgba(250, 204, 21, 0.07);
  border-color: rgba(250, 204, 21, 0.35);
}

.ws-intel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  color: #f4f4f5;
}

.ws-intel-link {
  color: #34d399;
  font-size: 9.5px;
  text-decoration: none;
  font-weight: 700;
}

.ws-intel-sub {
  color: #a1a1aa;
  font-size: 9px;
}

.ws-kol-entry-list,
.ws-thesis-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-kol-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 9.5px;
}

.ws-kol-name {
  color: #e4e4e7;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-kol-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.ws-kol-badge.holding {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.ws-kol-badge.watching {
  background: rgba(255, 255, 255, 0.08);
  color: #d4d4d8;
}

.ws-kol-badge.filtered {
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
}

.ws-thesis-item {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 9.5px;
}

.ws-thesis-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 9px;
  margin-bottom: 2px;
}

.ws-thesis-tag.bull {
  color: #34d399;
}

.ws-thesis-tag.cautious {
  color: #fbbf24;
}

.ws-thesis-item p {
  margin: 0;
  color: #d4d4d8;
  line-height: 1.35;
}

.ws-juji-verdict-text {
  margin: 0;
  color: #fef08a;
  font-size: 9.8px;
  line-height: 1.42;
}

.ws-cloud-desktop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ws-cloud-desktop-overlay[hidden] {
  display: none !important;
}

.ws-cloud-card {
  max-width: 460px;
  padding: 16px;
  border-radius: 8px;
  background: #111218;
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-family: var(--font-mono);
  color: #e4e4e7;
}

.ws-cloud-card strong {
  display: block;
  font-size: 12px;
  color: #38bdf8;
  margin-bottom: 8px;
}

.ws-cloud-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #a1a1aa;
}

.ws-telemetry-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.ws-telemetry-card,
.ws-action-log-card {
  padding: 8px 10px;
  border-radius: 7px;
  background: #0e0f15;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ws-action-log-card {
  flex: 1;
  min-height: 0;
}

.ws-tel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 5px;
}

.ws-tel-chain {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #38bdf8;
  font-weight: 700;
}

.ws-tel-symbol {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.ws-tel-price-box {
  text-align: right;
  font-family: var(--font-mono);
}

.ws-tel-price {
  display: block;
  font-size: 13px;
  color: #facc15;
}

.ws-tel-chg {
  font-size: 10px;
  font-weight: 700;
}

.ws-tel-chg.up {
  color: #34d399;
}

.ws-tel-chg.down {
  color: #fb7185;
}

.ws-tel-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.ws-metric-item {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
}

.ws-metric-item span {
  display: block;
  font-size: 9px;
  color: #a1a1aa;
}

.ws-metric-item strong {
  font-size: 11px;
  color: #f4f4f5;
}

.ws-pressure-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.ws-pressure-labels {
  display: flex;
  justify-content: space-between;
  color: #d4d4d8;
}

.ws-pressure-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.45);
  overflow: hidden;
}

.ws-pressure-bar.is-empty {
  background: rgba(255, 255, 255, 0.12);
}

.ws-pressure-buy {
  height: 100%;
  background: #10b981;
  transition: width 0.25s ease;
}

.ws-agent-note {
  padding: 5px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
  font-family: var(--font-mono);
  font-size: 9.8px;
  line-height: 1.35;
}

.ws-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #facc15;
}

.ws-action-log-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #34d399;
  max-height: 120px;
  overflow-y: auto;
}

.ws-log-row {
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .ws-main-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Vidu S2 Real-Time RTC Stage & 18-Action Quick Trigger Strip
   ========================================================= */
.vidu-rtc-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #09090b;
}

.vidu-trtc-mount {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.vidu-trtc-mount video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.vidu-hls-video,
.vidu-rage-video {
  object-position: center top;
  animation: none;
}

/* her camera: every change of shot dissolves over 0.5 s (VIDU_FADE_MS in app.js) */
.vidu-hls-video {
  transition: opacity 0.5s ease-in-out;
}

.vidu-rage-video.active {
  z-index: 3;
  opacity: 1;
}

.vidu-move-toast {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(244, 63, 94, 0.9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}



.vidu-action-strip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px;
  background: rgba(12, 12, 16, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vidu-rtc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #a1a1aa;
}

.vidu-rtc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.8);
}

.vidu-rtc-dot.is-live {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.vidu-move-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vidu-move-btn {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.vidu-move-btn:hover {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.55);
  color: #fff;
}

.vidu-move-btn.is-rage {
  border-color: rgba(244, 63, 94, 0.45);
  background: rgba(244, 63, 94, 0.14);
  color: #fda4af;
}

.vidu-move-btn.is-rage:hover {
  background: rgba(244, 63, 94, 0.32);
  border-color: #fb7185;
  color: #fff;
}

@keyframes deskSlamCameraShake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  15% { transform: translate3d(-6px, 5px, 0) rotate(-0.8deg); }
  30% { transform: translate3d(6px, -6px, 0) rotate(0.8deg); }
  45% { transform: translate3d(-5px, -3px, 0) rotate(-0.6deg); }
  60% { transform: translate3d(5px, 4px, 0) rotate(0.5deg); }
  75% { transform: translate3d(-3px, 2px, 0) rotate(-0.3deg); }
}

.juji-pip-cam.is-desk-slam-shake {
  animation: deskSlamCameraShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2;
  border-color: #f43f5e;
}

/* =========================================================
   #90 Site, art-directed (yellow studio): the brand yellow (sampled from the token avatar, same family as the
   listen button) is the whole page; black carries the type, the thin lines and the sniper-scope frame. The chart,
   her camera and the terminal caption stay dark, as screens set into the yellow page.
   Quality bar taken from the boss's reference (type contrast, one textured field, fine details, entrance motion);
   colour, layout and signature elements are our own (doodles, crosshair, live sniping).
   ========================================================= */
:root {
  --juji-ground: #f5bd4f;
  --juji-ground-step: #e9ac3c;
  --juji-ground-step-hover: #dfa234;
  --juji-ink: #14110b;
  --juji-soft: #4a3a1f;
  --juji-panel: #13110d;
  --juji-screen-ink: #f4ecdf;
  --juji-screen-soft: #b9ad98;
  --juji-gold: #f5bd4f;
  --juji-live: #9b1111;
  --juji-up: #065c2f;
  --juji-down: #a3141f;
  --juji-margin: 40px;
}

/* Page furniture that sat on the first screen: crop marks, corner captions, 01/02 rail, dot grid */
.arch-crosshair,
.arch-micro-coord,
.arch-rail,
.dots {
  display: none;
}

/* Plain top bar on the same night field: wordmark left, a few text links right */
.stream-header {
  max-width: none;
  margin: 0;
  padding: 16px var(--juji-margin) 14px;
  border-bottom: 0;
  background: var(--juji-ground);
  zoom: 1;
}

.stream-header .brand-logo {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
}

.stream-header .brand-title-row {
  gap: 12px;
}

.stream-header .brand-wordmark,
.stream-header #brand-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--juji-ink);
}

.stream-header .live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--juji-live);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.stream-header .live-pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--juji-live);
  box-shadow: none;
  animation: jujiLivePulse 1.6s ease-in-out infinite;
}

@keyframes jujiLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.stream-header .header-right {
  gap: 22px;
}

.stream-header .wallet-chip,
.stream-header #pill-ai-wallet,
.stream-header .nav-link-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--juji-soft);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: color 0.15s ease;
}

.stream-header .wallet-chip span,
.stream-header .wallet-chip b,
.stream-header #pill-ai-wallet span,
.stream-header #pill-ai-wallet b {
  color: inherit;
  font-family: var(--font-sans);
  font-size: 15px;
}

.stream-header a.wallet-chip:hover,
.stream-header .nav-link-btn:hover {
  background: none;
  color: var(--juji-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.stream-header .nav-link-btn:focus-visible,
.stream-header .wallet-chip:focus-visible {
  outline: 2px solid var(--juji-ink);
  outline-offset: 4px;
}

/* The treasury is named, not spelled out in hex, on the first screen */
#pill-ai-wallet #val-ai-wallet,
.stage-header #brand-sub {
  display: none;
}

.juji-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  min-height: calc(100svh - 70px);
  margin: 0;
  padding: 0 var(--juji-margin) 0 var(--juji-margin);
  overflow: hidden;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
  isolation: isolate;
}

/* One texture for the whole field: the avatar's own gold doodles, faint */
.juji-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("juji-doodle-tile-dark.png") repeat 0 0 / 210px auto;
  opacity: 0.16;
  pointer-events: none;
  animation: jujiDoodleDrift 140s linear infinite;
}

.juji-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}

@keyframes jujiDoodleDrift {
  from { background-position: 0 0; }
  to { background-position: 210px -820px; }
}

.juji-hero-words {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 40px 40px 0;
}

.juji-hero-title {
  margin: 0;
  color: var(--juji-ink);
  font-size: clamp(40px, 3.6vw, 54px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-wrap: balance;
}

.juji-hero-sub {
  max-width: 32ch;
  margin: 16px 0 0;
  color: var(--juji-ink);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.juji-listen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 56px;
  margin-top: 24px;
  padding: 0 32px;
  border: 1px solid var(--juji-ink);
  border-radius: 0;
  background: var(--juji-ink);
  color: var(--juji-ground);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.juji-listen-btn:hover {
  background: #2c2518;
}

.juji-listen-btn:active {
  transform: translateY(1px);
}

.juji-listen-btn:focus-visible {
  outline: 2px solid var(--juji-ink);
  outline-offset: 4px;
}

.juji-listen-btn.unlocked {
  background: transparent;
  color: var(--juji-ink);
}

.juji-hero .juji-pip-cam {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: block;
  width: 100%;
  margin: 26px 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--juji-panel);
  box-shadow: none;
}

.juji-hero .pip-video-stage {
  aspect-ratio: 4 / 3;
}

.juji-hero .pip-pose-img,
.juji-hero .pip-cam-video {
  object-position: 50% 16%;
}

.juji-hero .pip-monitor-glow {
  display: none;
}

.juji-cam-caption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--juji-panel);
}

.juji-cam-caption .pip-wave-bars {
  flex: none;
  margin-top: 6px;
}

.juji-cam-caption .pip-wave-bars span {
  background: var(--juji-gold);
}

.juji-cam-caption .pip-subtitle {
  margin: 0;
  color: var(--juji-screen-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.juji-cam-caption .pip-subtitle::before {
  content: "juji@scan // ";
  color: var(--juji-gold);
}

/* a scan line shown while she is not speaking: "她在看：" and quieter type, so it is not read as her words */
.juji-cam-caption .pip-subtitle.is-watching {
  color: var(--juji-screen-soft);
}

.juji-cam-caption .pip-subtitle.is-watching::before {
  content: attr(data-tag);
}

.juji-call {
  margin-top: 24px;
}

.juji-call-title {
  margin: 0;
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.juji-call-line {
  margin: 6px 0 0;
  color: var(--juji-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.juji-call .ws-juji-verdict-text {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* The chart she is watching, inside a sniper-scope frame: four gold corner marks, nothing else */
.juji-hero-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 18px 0 var(--juji-margin);
  padding: 22px 26px 26px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%2314110b' stroke-width='2'%3E%3Cpath d='M1 27V1h26'/%3E%3C/svg%3E") no-repeat left top,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%2314110b' stroke-width='2'%3E%3Cpath d='M1 1h26v26'/%3E%3C/svg%3E") no-repeat right top,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%2314110b' stroke-width='2'%3E%3Cpath d='M1 1v26h26'/%3E%3C/svg%3E") no-repeat left bottom,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%2314110b' stroke-width='2'%3E%3Cpath d='M27 1v26H1'/%3E%3C/svg%3E") no-repeat right bottom;
}

.juji-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 4px;
  margin-bottom: 16px;
  color: var(--juji-ink);
}

.juji-stage-title {
  margin: 0;
  color: var(--juji-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.juji-stage-title #juji-hero-kicker {
  color: var(--juji-soft);
}

.juji-stage-head .ws-tel-symbol,
.juji-stage-head .ws-tel-chain,
.juji-stage-head .ws-tel-price,
.juji-stage-head .ws-tel-chg {
  display: inline;
  margin: 0;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.juji-stage-head .ws-tel-symbol {
  font-size: inherit;
  font-weight: inherit;
}

.juji-stage-head .ws-tel-chain {
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 600;
}

.juji-stage-head .ws-tel-price {
  margin-left: auto;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.juji-stage-head .ws-tel-chg {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.juji-stage-head .ws-tel-chg.up {
  color: var(--juji-up);
}

.juji-stage-head .ws-tel-chg.down {
  color: var(--juji-down);
}

.juji-hero-stage .ws-chart-stage {
  flex: 1;
  height: auto;
  min-height: 460px;
  border: 0;
  border-radius: 0;
  background: var(--juji-panel);
}

.juji-hero-stage .ws-live-chart-iframe {
  min-height: 0;
}

.juji-hero-stage .ws-live-chart-iframe[hidden] {
  display: none;
}

.juji-chart-empty {
  display: grid;
  flex: 1;
  place-items: center;
  margin: 0;
  padding: 32px;
  color: var(--juji-screen-soft);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  text-align: center;
}

.juji-chart-empty[hidden] {
  display: none;
}

/* Her own screen cannot be tied to one symbol, so the heading says only that */
/* (over today's HLS live with the screencast's meta on, has-screen-coin, the coin her browser is on is named; the
   page's own quote never is) */
.juji-stage-head.is-her-screen:not(.has-screen-coin) .ws-tel-symbol,
.juji-stage-head.is-her-screen:not(.has-screen-coin) .ws-tel-chain,
.juji-stage-head.is-her-screen .ws-tel-price,
.juji-stage-head.is-her-screen .ws-tel-chg {
  display: none;
}
/* her screencast names its own coin; the quote at the right belongs to the page's target, so it is not shown with it */
.juji-stage-head.is-gmgn-screen .ws-tel-price,
.juji-stage-head.is-gmgn-screen .ws-tel-chg {
  display: none;
}

/* Her latest call already sits in the left column, so the in-chart HUD rows stay in the secondary layer */
.juji-hero-stage .ws-screen-intel-hud {
  display: none;
}

/* Entrance: each block rises once into place; reduced motion keeps everything still */
.juji-hero-words > *,
.juji-hero-stage {
  animation: jujiRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.juji-hero-words > :nth-child(2) { animation-delay: 70ms; }
.juji-hero-words > :nth-child(3) { animation-delay: 140ms; }
.juji-hero-words > :nth-child(4) { animation-delay: 210ms; }
.juji-hero-words > :nth-child(5) { animation-delay: 280ms; }
.juji-hero-stage { animation-delay: 160ms; }

@keyframes jujiRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .juji-hero-words > *,
  .juji-hero-stage,
  .juji-hero::before,
  .stream-header .live-pill i {
    animation: none;
  }
}

/* The way into everything else: still on the night field, one plain bar */
.juji-more {
  position: relative;
  z-index: 2;
  margin: 0;
}

.juji-more-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px var(--juji-margin);
  border: 0;
  border-radius: 0;
  background: var(--juji-ground-step);
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.juji-more-summary::-webkit-details-marker {
  display: none;
}

.juji-more-summary::before {
  content: "+";
  flex: none;
  width: 1em;
  color: var(--juji-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.juji-more[open] > .juji-more-summary::before {
  content: "\2212";
}

.juji-more-summary:hover {
  background: var(--juji-ground-step-hover);
}

.juji-more-summary:focus-visible {
  outline: 2px solid var(--juji-ink);
  outline-offset: -2px;
}

.juji-more[open] > .juji-more-summary {
  margin-bottom: 16px;
}

.juji-more .vidu-action-strip {
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .stream-header {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .stream-header .header-left {
    flex: 1 1 auto;
  }

  .stream-header .header-right {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .stream-header .brand-wordmark {
    white-space: nowrap;
  }

  .juji-hero {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }

  .juji-hero-words {
    padding-right: 28px;
  }
}

@media (max-width: 900px) {
  .juji-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0;
  }

  .juji-hero-words {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: 18px;
    align-items: start;
    padding: 12px var(--juji-margin) 24px;
  }

  .juji-hero-title,
  .juji-hero-sub,
  .juji-listen-btn {
    grid-column: 1 / -1;
  }

  .juji-hero .juji-pip-cam {
    display: contents;
  }

  .juji-hero .pip-video-stage {
    grid-column: 1;
    grid-row: 4;
    margin-top: 22px;
    aspect-ratio: 1 / 1;
  }

  .juji-call {
    grid-column: 2;
    grid-row: 4;
    margin-top: 22px;
  }

  .juji-cam-caption {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .juji-hero-stage {
    margin: 0 var(--juji-margin) var(--juji-margin);
    padding: 18px 18px 20px;
  }

  .juji-hero-stage .ws-chart-stage {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  :root {
    --juji-margin: 16px;
  }

  .stream-header {
    padding: 12px var(--juji-margin) 10px;
  }

  .stream-header .header-right {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 6px;
  }

  .stream-header .header-right > * {
    white-space: nowrap;
  }

  .stream-header .brand-wordmark {
    white-space: normal;
  }

  .juji-hero-title {
    font-size: 36px;
  }

  .juji-hero-sub {
    margin-top: 10px;
    font-size: 16px;
  }

  .juji-listen-btn {
    align-self: stretch;
    width: 100%;
    margin-top: 16px;
    font-size: 16px;
  }

  .juji-hero .pip-video-stage,
  .juji-call {
    margin-top: 16px;
  }

  .juji-call-title,
  .juji-stage-head .ws-tel-chain,
  .juji-stage-head .ws-tel-chg,
  .stream-header .wallet-chip,
  .stream-header #pill-ai-wallet,
  .stream-header .nav-link-btn,
  .stream-header .wallet-chip span,
  .stream-header .wallet-chip b {
    font-size: 14px;
  }

  .juji-call-line {
    margin-top: 4px;
    font-size: 22px;
  }

  .juji-call .ws-juji-verdict-text {
    margin-top: 8px;
    font-size: 16px;
    -webkit-line-clamp: 3;
  }

  .juji-cam-caption {
    padding: 10px 12px;
  }

  .juji-cam-caption .pip-subtitle {
    font-size: 14px;
  }

  .juji-hero-stage .ws-chart-stage {
    min-height: 300px;
  }

  .juji-stage-title {
    font-size: 22px;
  }

  .juji-stage-head .ws-tel-price {
    font-size: 22px;
  }
}

/* =========================================================
   EP.01 clips: three separate players on the night field, below the first screen.
   Muted by default and never autoplaying, so the page still has one way to start her voice.
   ========================================================= */
.juji-clips {
  position: relative;
  z-index: 2;
  padding: 56px var(--juji-margin) 64px;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
}

.juji-clips-title {
  margin: 0 0 24px;
  color: var(--juji-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.juji-clips-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.juji-clip {
  margin: 0;
  min-width: 0;
}

.juji-clip-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--juji-panel);
}

.juji-clip-caption {
  padding-top: 14px;
}

.juji-clip-title {
  margin: 0;
  color: var(--juji-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: pretty;
}

.juji-clip-meta {
  display: block;
  margin-top: 6px;
  color: var(--juji-soft);
  font-size: 15px;
}

@media (max-width: 900px) {
  .juji-clips-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .juji-clips {
    padding: 40px var(--juji-margin) 48px;
  }

  .juji-clips-title {
    font-size: 22px;
  }

  .juji-clip-title {
    font-size: 16px;
  }

  .juji-clip-meta {
    font-size: 14px;
  }
}

/* =========================================================
   #90 yellow, whole page: no cream band anywhere below the first screen
   ========================================================= */
body.stream-body {
  background: var(--juji-ground);
  color: var(--juji-ink);
}

.rules-section {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 72px var(--juji-margin) 96px;
  border: 0;
  background: var(--juji-ground);
  color: var(--juji-ink);
}

.rules-section .rules-editorial-split {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.rules-section .rules-header {
  display: block;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.rules-section .rules-header h2 {
  margin: 0;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rules-section .rules-header p {
  max-width: 60ch;
  margin: 12px 0 0;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
}

.rules-section .rules-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  border: 0;
  background: none;
}

.rules-section .rule-card {
  margin: 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 3px solid var(--juji-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.rules-section .rule-card::before {
  display: none;
}

.rules-section .rule-card h3 {
  margin: 0;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
}

.rules-section .rule-card p {
  margin: 10px 0 0;
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
}

/* The panels inside 更多数据 keep their own colours; only their surroundings follow the yellow page */
.juji-more .editorial-hero,
.juji-more .stream-layout {
  background: none;
}

@media (max-width: 900px) {
  .rules-section .rules-cards-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px) {
  .rules-section {
    padding: 48px var(--juji-margin) 64px;
  }

  .rules-section .rules-header h2 {
    font-size: 28px;
  }

  .rules-section .rule-card h3 {
    font-size: 19px;
  }
}

/* =========================================================
   Her live positions (他 10-30 06:31): token / cost / live value + PnL / lock status, green up red down.
   Row styles are shared with the 16:9 stage card; colors come from --pos-* so the dark screen can override them.
   ========================================================= */
.pos-cell-token {
  overflow-wrap: anywhere;
}

.pos-cell-num {
  white-space: nowrap;
  font-family: var(--font-mono);
}

.pos-cell-status {
  font-size: 0.92em;
}

.pos-token-link {
  color: var(--pos-ink, var(--page-ink));
  font-weight: 700;
  text-decoration: none;
}

.pos-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.86em;
  color: var(--pos-soft, var(--page-muted));
  text-decoration: none;
}

.pos-sub.pos-up {
  color: var(--pos-up, #0e7c47);
  font-weight: 700;
}

.pos-sub.pos-down {
  color: var(--pos-down, #b42318);
  font-weight: 700;
}

.pos-status-link {
  color: var(--pos-link, #0e7c47);
  text-decoration: none;
}

.pos-status-link.is-locked {
  color: var(--pos-lock, #a15c00);
}

.pos-token-link:hover,
.pos-sub-link:hover,
.pos-status-link:hover {
  text-decoration: underline;
}

.juji-hold {
  position: relative;
  z-index: 2;
  padding: 56px var(--juji-margin) 8px;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
}

.juji-hold-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 6px;
  margin-bottom: 20px;
}

.juji-hold-title {
  margin: 0;
  color: var(--juji-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.juji-hold-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--juji-panel);
  color: var(--juji-gold);
  font-size: 13px;
  font-weight: 700;
}

.juji-hold-sub {
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.juji-hold-sub:hover {
  text-decoration: underline;
}

.juji-hold-screen {
  --pos-ink: var(--juji-screen-ink);
  --pos-soft: var(--juji-screen-soft);
  --pos-up: #46d98c;
  --pos-down: #ff8a7a;
  --pos-link: var(--juji-screen-ink);
  --pos-lock: var(--juji-gold);
  padding: 18px 22px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
}

.juji-hold-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.juji-hold-table th {
  padding: 0 14px 10px 0;
  border-bottom: 1px solid rgba(244, 236, 223, 0.14);
  color: var(--juji-screen-soft);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.juji-hold-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(244, 236, 223, 0.08);
  vertical-align: top;
}

.juji-hold-table tr:last-child td {
  border-bottom: 0;
}

.juji-hold-table .empty-cell {
  padding: 14px 0;
  background: transparent;
  color: var(--juji-screen-soft);
  font-size: 14px;
  text-align: left;
}

.juji-hold .pos-quote-note {
  margin: 12px 0 0;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* One public sentence on why she bought (A2), right under its position row; the 16:9 stage has no room for it */
.juji-hold-table .pos-has-reason td {
  padding-bottom: 4px;
  border-bottom: 0;
}

.juji-hold-table .pos-reason-row td {
  padding-top: 0;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.5;
}

.pos-reason-label {
  margin-right: 8px;
  color: var(--juji-screen-ink);
  font-weight: 700;
}

.simple-table .pos-reason-row {
  display: none;
}

/* A3 10-30: her trade log right under the positions, on the same dark screen */
.juji-trades {
  --pos-up: #46d98c;
  --pos-down: #ff8a7a;
  margin-top: 14px;
  padding: 18px 22px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
}

.juji-trades-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  margin-bottom: 12px;
}

.juji-trades-title {
  margin: 0;
  color: var(--juji-screen-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.juji-trades-count {
  color: var(--juji-gold);
  font-size: 13px;
  font-weight: 700;
}

.juji-trades-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.juji-trades-sum-item {
  padding: 10px 12px;
  border: 1px solid rgba(244, 236, 223, 0.12);
}

.juji-trades-sum dt {
  color: var(--juji-screen-soft);
  font-size: 12px;
  font-weight: 600;
}

.juji-trades-sum dd {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.juji-trades-sum dd.pos-up,
.jt-pnl.pos-up {
  color: var(--pos-up);
}

.juji-trades-sum dd.pos-down,
.jt-pnl.pos-down {
  color: var(--pos-down);
}

.juji-trade-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.juji-trade {
  padding: 12px 0;
  border-top: 1px solid rgba(244, 236, 223, 0.08);
  font-variant-numeric: tabular-nums;
}

.juji-trade:first-child {
  padding-top: 0;
  border-top: 0;
}

.jt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.jt-side {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.is-buy .jt-side {
  background: rgba(70, 217, 140, 0.16);
  color: var(--pos-up);
}

.is-sell .jt-side {
  background: rgba(255, 138, 122, 0.16);
  color: var(--pos-down);
}

.jt-token {
  color: var(--juji-screen-ink);
  font-weight: 800;
  text-decoration: none;
}

.jt-time {
  color: var(--juji-screen-soft);
  font-size: 13px;
  text-decoration: none;
}

.jt-token:hover,
.jt-time:hover {
  text-decoration: underline;
}

.jt-flow {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.jt-cost {
  margin-top: 4px;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.5;
}

.jt-reason {
  margin-top: 4px;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.5;
}

.jt-pnl {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
}

.juji-trade-empty {
  padding: 6px 0;
  color: var(--juji-screen-soft);
  font-size: 14px;
}

.juji-trades-note {
  margin: 12px 0 0;
  color: var(--juji-screen-soft);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .juji-trades {
    padding: 12px;
  }

  /* three boxes are too narrow at 360px: one line each, label left, number right */
  .juji-trades-sum {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid rgba(244, 236, 223, 0.12);
  }

  .juji-trades-sum-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid rgba(244, 236, 223, 0.08);
  }

  .juji-trades-sum-item:first-child {
    border-top: 0;
  }

  .juji-trades-sum dt {
    flex: none;
    font-size: 12px;
  }

  .juji-trades-sum dd {
    margin: 0;
    font-size: 13px;
    text-align: right;
  }

  .jt-flow {
    font-size: 14px;
  }

  .jt-cost,
  .jt-pnl {
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .juji-hold {
    padding: 40px var(--juji-margin) 8px;
  }

  .juji-hold-title {
    font-size: 22px;
  }

  .juji-hold-sub {
    flex-basis: 100%;
    font-size: 13px;
  }

  .juji-hold-screen {
    padding: 12px;
  }

  .juji-hold-table {
    font-size: 12.5px;
  }

  .juji-hold-table th {
    padding: 0 8px 8px 0;
    font-size: 11px;
    white-space: nowrap;
  }

  .juji-hold-table td {
    padding: 10px 8px 10px 0;
  }

  .juji-hold-table th:last-child,
  .juji-hold-table td:last-child {
    padding-right: 0;
  }

  /* the mono face is too wide for four columns at 360px; sans digits stay tabular */
  .juji-hold .pos-cell-num {
    font-family: var(--font-sans);
  }

  .juji-hold .pos-quote-note {
    font-size: 12px;
  }
}

/* =========================================================
   #90 effects: her scan log, a dark terminal set into the yellow page, typed line by line
   ========================================================= */
.juji-scan {
  position: relative;
  z-index: 2;
  padding: 56px var(--juji-margin) 8px;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
}

.juji-scan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 6px;
  margin-bottom: 20px;
}

.juji-scan-title {
  margin: 0;
  color: var(--juji-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.juji-scan-label {
  margin: 0;
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 600;
}

.juji-scan-body {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.juji-scan-radar {
  aspect-ratio: 1 / 1;
  padding: 14px;
  background: var(--juji-panel);
}

.juji-scan-radar canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.juji-scan-screen {
  min-width: 0;
  padding: 18px 22px;
  background: var(--juji-panel);
}

.juji-scan-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(14 * 1.7em);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.juji-log-line {
  color: var(--juji-screen-soft);
}

.juji-log-line.is-head {
  margin-top: 6px;
  color: var(--juji-gold);
}

.juji-log-line.is-kick {
  color: #ff8a7a;
}

.juji-log-line.is-shoot {
  color: #46d98c;
}

@media (max-width: 720px) {
  .juji-scan {
    padding: 40px var(--juji-margin) 8px;
  }

  .juji-scan-title {
    font-size: 22px;
  }

  .juji-scan-label {
    font-size: 14px;
  }

  .juji-scan-screen {
    padding: 14px 14px;
  }

  .juji-scan-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .juji-scan-radar {
    width: min(100%, 300px);
    justify-self: center;
  }

  .juji-scan-log {
    font-size: 12px;
  }
}

/* #90 effects: event flash (shot = a flash of light, mine = a faint red), kept faint and rare */
.juji-flash {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
}

.juji-flash.is-gold {
  background: #fff6d6;
  animation: jujiFlashGold 0.6s ease-out;
}

.juji-flash.is-red {
  background: #e5484d;
  animation: jujiFlashRed 0.6s ease-out;
}

@keyframes jujiFlashGold {
  from { opacity: 0.32; }
  to { opacity: 0; }
}

@keyframes jujiFlashRed {
  from { opacity: 0.16; }
  to { opacity: 0; }
}

/* #90 effects: the scope that follows the mouse across the first screen */
.juji-aim {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 65;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.juji-aim.is-on {
  opacity: 1;
}

.juji-aim svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: var(--juji-ink);
}

.juji-aim.is-screen svg {
  stroke: var(--juji-gold);
}

@media (prefers-reduced-motion: reduce) {
  .juji-flash,
  .juji-aim {
    display: none;
  }
}

/* Official contract strip: the one address to trust, right under the top bar, black on the yellow page */
.juji-ca {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  padding: 10px var(--juji-margin);
  background: var(--juji-ink);
  color: var(--juji-ground);
  font-family: var(--font-sans);
}

.juji-ca-label {
  color: var(--juji-ground);
  font-size: 15px;
  font-weight: 800;
}

.juji-ca-addr {
  color: #fff3cf;
  font-family: var(--font-mono);
  font-size: 14px;
  overflow-wrap: anywhere;
  user-select: all;
}

.juji-ca-copy {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.juji-ca-copy:hover {
  background: #ffd57a;
}

.juji-ca-copy:focus-visible {
  outline: 2px solid #fff3cf;
  outline-offset: 2px;
}

.juji-ca-link {
  color: var(--juji-ground);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.juji-ca-note {
  margin: 0;
  color: #fff3cf;
  font-size: 14px;
}

/* the header font turns the x of "0x" into a multiplication sign (a contextual alternate); an address must read as typed */
#val-token-addr {
  font-feature-settings: 'calt' 0;
}

.juji-ca-div {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 243, 207, 0.18);
  font-size: 13px;
}

.juji-div-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff3cf;
  white-space: nowrap;
}

.juji-div-stat strong {
  color: var(--juji-ground);
  font-family: var(--font-mono);
  font-weight: 800;
}

.juji-div-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.juji-div-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.juji-div-input {
  width: 220px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(255, 243, 207, 0.38);
  background: rgba(255, 255, 255, 0.08);
  color: #fff3cf;
  font-family: var(--font-mono);
  font-size: 12px;
  font-feature-settings: 'calt' 0;
}

.juji-div-input::placeholder {
  color: rgba(255, 243, 207, 0.62);
}

.juji-div-input:focus {
  outline: 1px solid var(--juji-ground);
  border-color: var(--juji-ground);
}

.juji-div-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--juji-ground);
  background: transparent;
  color: var(--juji-ground);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.juji-div-btn:hover {
  background: rgba(255, 213, 122, 0.16);
}

.juji-div-btn.is-claim {
  background: var(--juji-ground);
  color: var(--juji-ink);
}

.juji-div-btn.is-claim:hover {
  background: #ffd57a;
}

.juji-div-result {
  color: #fff3cf;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.juji-div-txlink {
  color: var(--juji-ground);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* the strip takes a row above the first screen; the hero gives that height back so its bottom stays on screen (the
   off-air bar sits between them, hidden in a live) */
.juji-ca + .juji-hero,
.juji-ca + .juji-offair[hidden] + .juji-hero {
  min-height: calc(100svh - 120px);
}

/* phone: three short lines (label + warning / full address + copy / the two links) so the first screen keeps its height */
@media (max-width: 720px) {
  .juji-ca {
    column-gap: 10px;
    row-gap: 4px;
    padding: 8px var(--juji-margin);
  }

  .juji-ca-label {
    order: 1;
    font-size: 14px;
  }

  .juji-ca-note {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
  }

  /* the address gets its own row and stays on one line down to a 320px phone: 42 characters of a 0.6em-wide mono face */
  .juji-ca-addr {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    font-size: min(12px, calc((100vw - 2 * var(--juji-margin)) / 25.4));
  }

  .juji-ca-copy {
    order: 4;
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px;
  }

  .juji-ca-link {
    order: 5;
    font-size: 13px;
  }

  .juji-ca-div {
    order: 6;
    column-gap: 8px;
    font-size: 12px;
  }

  .juji-div-form {
    flex: 1 1 100%;
  }

  .juji-div-input {
    flex: 1 1 140px;
    width: auto;
  }
}

/* B6: the caption under her camera always keeps two lines of room, so pieces of one or two lines never move the
   page below it */
.juji-cam-caption .pip-subtitle {
  min-height: 3.2em;
}

/* B6: on a phone the chart header is two fixed rows (the coin she watches · price / pool · change) instead of
   wrapping by text length, so a coin change no longer moves the chart; the "she is watching" words and the price
   step down a size so the coin name and the pool both fit */
@media (max-width: 720px) {
  .juji-stage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title price"
      "chain chg";
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
  }

  .juji-stage-title #juji-hero-kicker {
    font-size: 16px;
  }

  .juji-stage-head .ws-tel-price {
    font-size: 18px;
  }

  .juji-stage-head .juji-stage-title {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .juji-stage-head .ws-tel-price {
    grid-area: price;
    justify-self: end;
    margin-left: 0;
    white-space: nowrap;
  }

  .juji-stage-head .ws-tel-chain {
    grid-area: chain;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .juji-stage-head .ws-tel-chg {
    grid-area: chg;
    justify-self: end;
    white-space: nowrap;
  }
}

/* GMGN: her GMGN screen fills the chart frame (16:9 frames, letterboxed in a phone's taller frame); the frame keeps
   its size, so switching between the chart and her screen moves nothing */
.ws-gmgn-screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050508;
}

.ws-gmgn-screen-badge {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
  padding: 3px 8px;
  background: rgba(5, 5, 8, 0.8);
  color: #fde68a;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
}

/* the heading keeps its two rows; on her GMGN screen it names the coin and the GMGN page, with no price */
.juji-stage-head.is-gmgn-screen .ws-tel-price,
.juji-stage-head.is-gmgn-screen .ws-tel-chg {
  visibility: hidden;
}

/* =========================================================
   Live chat (v1): a dark screen like her caption and the chart. Phone and tablet: between her caption and the chart,
   the latest three messages and the box to type in, "展开留言" shows the rest. 901 to 1279: under the chart.
   From 1280: a third column beside the chart, as tall as the stage. The hero changes shape only while the panel is
   shown (.has-chat, set with it): the 16:9 stage page and a deployment without chat keep their two columns.
   ========================================================= */
.juji-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0 var(--juji-margin) 18px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
}

.juji-chat[hidden],
#live-chat-panel[hidden] {
  display: none;
}

.juji-chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 12px 14px 6px;
}

.juji-chat-title {
  margin: 0;
  color: var(--juji-gold);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.juji-chat-rule {
  margin: 0;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.4;
}

.juji-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.juji-chat-msg {
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.juji-chat-nick {
  margin-right: 8px;
  color: var(--juji-gold);
  font-weight: 700;
}

.juji-chat-msg.is-mine .juji-chat-nick {
  color: var(--juji-screen-ink);
}

.juji-chat-replied {
  margin-left: 8px;
  color: var(--juji-gold);
  font-size: 13px;
  white-space: nowrap;
}

/* the messages she is answering in the segment now playing */
.juji-chat-msg.is-answering {
  margin-left: -14px;
  padding-left: 11px;
  border-left: 3px solid var(--juji-gold);
}

.juji-chat-hide {
  margin-left: 8px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--juji-screen-soft);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.juji-chat-empty {
  margin: 0;
  padding: 4px 14px;
  color: var(--juji-screen-soft);
  font-size: 14px;
}

.juji-chat-empty[hidden],
.juji-chat-more[hidden] {
  display: none;
}

.juji-chat-more {
  align-self: flex-start;
  margin: 2px 14px 0;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--juji-gold);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.juji-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px 4px;
}

.juji-chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #3d3527;
  border-radius: 0;
  background: #1d1a13;
  color: var(--juji-screen-ink);
  font: inherit;
  font-size: 16px;
}

.juji-chat-form input::placeholder {
  color: #8f846f;
}

.juji-chat-form input:focus-visible {
  outline: 2px solid var(--juji-gold);
  outline-offset: -2px;
}

.juji-chat-form button {
  flex: none;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: var(--juji-gold);
  color: var(--juji-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.juji-chat-form button:focus-visible,
.juji-chat-more:focus-visible,
.juji-chat-hide:focus-visible {
  outline: 2px solid var(--juji-screen-ink);
  outline-offset: 2px;
}

.juji-chat-form input:disabled,
.juji-chat-form button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.juji-chat-note {
  min-height: 1.5em;
  margin: 0;
  padding: 2px 14px 10px;
  color: var(--juji-screen-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* phone and tablet: the latest three until "展开留言" */
@media (max-width: 1279px) {
  .juji-chat:not(.is-expanded) .juji-chat-msg:not(:nth-last-child(-n + 3)) {
    display: none;
  }

  .juji-chat.is-expanded .juji-chat-list {
    max-height: 55vh;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .juji-hero.has-chat .juji-hero-words {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .juji-hero.has-chat .juji-hero-stage {
    grid-column: 2;
    grid-row: 1;
  }

  .juji-hero.has-chat .juji-chat {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 var(--juji-margin);
  }
}

@media (min-width: 1280px) {
  .juji-hero.has-chat {
    grid-template-columns: 320px minmax(0, 1fr) 260px;
  }

  .juji-hero.has-chat .juji-hero-words {
    grid-column: 1;
    grid-row: 1;
  }

  .juji-hero.has-chat .juji-hero-stage {
    grid-column: 2;
    grid-row: 1;
  }

  .juji-hero.has-chat .juji-chat {
    grid-column: 3;
    grid-row: 1;
    /* 10-31 20:25: the chat follows the height of the stage column instead of stretching the whole first screen to
       the length of the message list (height 0 keeps it out of the row's size, min-height fills the row it gets) */
    height: 0;
    min-height: calc(100% - 18px - var(--juji-margin));
    margin: 18px 0 var(--juji-margin) 20px;
  }

  .juji-chat-more {
    display: none;
  }
}

@media (min-width: 1440px) {
  .juji-hero.has-chat {
    grid-template-columns: 360px minmax(0, 1fr) 300px;
  }
}

/* =========================================================
   Off air (between her scheduled lives, juji-live-schedule.json): she keeps trading, so her screen and her verdict
   card stay as in a live. A bar above the first screen says when she is next on (UTC, with one line in the viewer's
   own clock); her camera shows her photo and the listen button waits for the live (she is not talking); her
   highlight clips play in a frame under her screen.
   ========================================================= */
.juji-offair[hidden],
.juji-reel[hidden] {
  display: none;
}

.juji-offair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  margin: 0;
  padding: 10px var(--juji-margin);
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
  font-size: 15px;
  line-height: 1.5;
}

.juji-offair strong {
  color: var(--juji-gold);
  font-size: 20px;
  font-weight: 900;
}

.juji-offair-local {
  color: var(--juji-screen-soft);
}

.juji-offair-countdown {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
}

/* off air the bar takes one more row (one 50px line on a wide screen): the hero gives that back too */
.juji-ca + .juji-offair:not([hidden]) + .juji-hero {
  min-height: calc(100svh - 170px);
}

/* the reel makes her screen's column run past the first screen: the chat keeps the first screen's height, so its box
   to type in stays in view as in a live */
@media (min-width: 1280px) {
  .juji-hero.has-chat.is-off-air .juji-chat {
    align-self: start;
    height: calc(100svh - 228px);
  }
}

.juji-hero.is-off-air .juji-listen-btn {
  display: none;
}

/* her camera players and her photo stand down off air: only the empty chair at her desk shows */
.juji-hero.is-off-air .vidu-hls-video,
.juji-hero.is-off-air #vidu-anchor-still {
  display: none;
  opacity: 0;
}

.juji-hero.is-off-air #juji-offair-chair {
  display: block;
  opacity: 1;
  z-index: 4;
  animation: none;
  transform: none;
}

.juji-cam-caption .pip-subtitle.is-resting::before {
  content: none;
}

.juji-reel {
  margin: 16px 0 0;
}

.juji-reel-title {
  margin: 0 0 8px;
  color: var(--juji-ink);
  font-size: 15px;
  line-height: 1.4;
}

.juji-reel-kicker {
  font-weight: 800;
}

.juji-reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050508;
}

.juji-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.juji-reel-video.active {
  opacity: 1;
}

.juji-reel-sound {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 3;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  background: rgba(5, 5, 8, 0.82);
  color: #fde68a;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.juji-reel-sound:focus-visible {
  outline: 2px solid #fde68a;
  outline-offset: 2px;
}

/* wide screens: her screen keeps the frames' own 16:9 shape (live or off air), so what sits under it (her scan log,
   off air the reel) stays on the first screen; the reel is the smaller frame, its title beside it */
@media (min-width: 901px) {
  .juji-hero-stage .ws-chart-stage {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .juji-reel {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }

  .juji-reel-frame {
    grid-column: 1;
    grid-row: 1;
  }

  .juji-reel-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .juji-reel-kicker {
    display: block;
    margin-bottom: 4px;
  }
}

/* the header pill: LIVE only during a live; off air it reads 下播 in quiet ink, its dot still */
.stream-header .live-pill.is-off {
  color: var(--juji-soft);
}

.stream-header .live-pill.is-off i {
  background: var(--juji-soft);
  animation: none;
}

/* =========================================================
   Her scan log on the first screen, right under her screen (10-30): seen moving together with the live. A compact
   version of the block below the fold it used to be: a small radar, the latest six lines; each new line slides up into
   place and a new round's heading flashes once.
   ========================================================= */
.juji-hero-stage .juji-scan {
  margin: 14px 0 0;
  padding: 0;
  background: transparent;
}

.juji-hero-stage .juji-scan-head {
  column-gap: 14px;
  margin-bottom: 8px;
}

.juji-hero-stage .juji-scan-title {
  font-size: 20px;
}

.juji-hero-stage .juji-scan-label {
  font-size: 13px;
}

.juji-hero-stage .juji-scan-body {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
}

.juji-hero-stage .juji-scan-radar {
  width: auto;
  padding: 8px;
}

.juji-hero-stage .juji-scan-screen {
  padding: 10px 14px;
}

.juji-hero-stage .juji-scan-log {
  height: calc(6 * 1.6em);
  font-size: 12.5px;
  line-height: 1.6;
}

.juji-hero-stage .juji-log-line {
  animation: jujiScanLineIn 0.35s ease-out both;
}

.juji-hero-stage .juji-log-line.is-head {
  animation: jujiScanLineIn 0.35s ease-out both, jujiScanFlash 1.1s ease-out;
}

@keyframes jujiScanLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes jujiScanFlash {
  from { background: rgba(245, 189, 79, 0.45); }
  to { background: transparent; }
}

@media (max-width: 720px) {
  .juji-hero-stage .juji-scan-body {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }

  .juji-hero-stage .juji-scan-radar {
    width: auto;
    justify-self: stretch;
    padding: 6px;
  }

  .juji-hero-stage .juji-scan-screen {
    padding: 8px 10px;
  }

  .juji-hero-stage .juji-scan-log {
    font-size: 12px;
  }
}

.juji-log-line.is-story {
  color: var(--juji-screen-soft);
  font-size: 0.92em;
}

.juji-log-line.is-story-call {
  color: #f5d38a;
  font-size: 0.92em;
}

/* a short screen (laptops at 720–820 px high): a smaller radar and four lines, so the block still ends on the first screen */
@media (min-width: 901px) and (max-height: 820px) {
  .juji-hero-stage .juji-scan {
    margin-top: 10px;
  }

  .juji-hero-stage .juji-scan-head {
    margin-bottom: 6px;
  }

  .juji-hero-stage .juji-scan-body {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .juji-hero-stage .juji-scan-screen {
    padding: 8px 12px;
  }

  .juji-hero-stage .juji-scan-log {
    height: calc(4 * 1.6em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .juji-hero-stage .juji-log-line,
  .juji-hero-stage .juji-log-line.is-head {
    animation: none;
  }
}

/* =========================================================
   Her research wall (10-31 15:32 #2616): under her verdict card, the coin she is deep into right now and the report
   she wrote on it (叙事／发币人／团伙／筹码／她的判断), with ‹ › back through the coins she judged earlier. A dark card
   on the yellow ground, like her screen; on a phone it fills the wall under her verdict.
   ========================================================= */
.juji-research {
  margin-top: 24px;
}

.juji-research-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 2px;
}

.juji-research-title {
  margin: 0;
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.juji-research-when {
  margin: 0;
  color: var(--juji-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.3;
}

.juji-research-card {
  margin-top: 8px;
  padding: 14px 16px 13px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
  font-family: var(--font-sans);
}

.juji-research-coin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
}

.juji-research-symbol {
  min-width: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.juji-research-ca {
  color: var(--juji-screen-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

.juji-research-call {
  margin-left: auto;
  padding: 3px 8px;
  color: var(--juji-ink);
  background: var(--juji-gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.juji-research-call.is-shoot {
  background: #f5d38a;
}

.juji-research-call.is-mine {
  color: #fff;
  background: var(--juji-down);
}

.juji-research-call.is-skip {
  color: var(--juji-screen-soft);
  background: #2a251c;
}

.juji-research-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  margin: 12px 0 0;
}

.juji-research-rows:empty {
  display: none;
}

.juji-research-rows dt {
  margin: 0;
  color: var(--juji-screen-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

.juji-research-rows dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.juji-research-rows dd.is-call {
  color: #f5d38a;
  font-weight: 600;
}

.juji-research-note {
  margin: 10px 0 0;
  color: var(--juji-screen-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.juji-research-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  margin-top: 8px;
}

.juji-research-btn {
  width: 42px;
  height: 36px;
  border: 1px solid var(--juji-ink);
  background: transparent;
  color: var(--juji-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.juji-research-btn:hover:not(:disabled) {
  background: var(--juji-ground-step);
}

.juji-research-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.juji-research-pos {
  margin: 0;
  color: var(--juji-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
}

.juji-research-more {
  display: none;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--juji-gold);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

/* a wide screen gives the wall a narrow column: long rows clamp to three lines until 展开全文 is pressed */
@media (min-width: 901px) {
  .juji-research-rows dd {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .juji-research.is-open .juji-research-rows dd {
    display: block;
    overflow: visible;
  }

  .juji-research-more {
    display: inline-block;
  }
}

@media (max-width: 900px) {
  .juji-research {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: 18px;
  }
}

@media (max-width: 720px) {
  .juji-research-card {
    padding: 12px 14px;
  }

  .juji-research-symbol {
    font-size: 20px;
  }
}

/* =========================================================
   Her live positions and why (10-31 19:20, boss: 她为什么买 / 实盘持仓): under the holdings table, one dark card per
   coin she holds with real money (why she bought, her exit line, when she opened, the result so far) and the last
   five she sold with why and the result. Same ground and margins as the holdings above and the judge below.
   ========================================================= */
.juji-positions {
  position: relative;
  z-index: 2;
  padding: 16px var(--juji-margin) 16px;
  background: var(--juji-ground);
  color: var(--juji-ink);
  font-family: var(--font-sans);
}

.juji-positions-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
}

.juji-positions-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.juji-positions-label {
  margin: 0;
  color: var(--juji-soft);
  font-size: 13px;
  line-height: 1.3;
}

.juji-positions-when {
  margin: 0 0 0 auto;
  color: var(--juji-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.3;
}

.juji-positions-open {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.juji-positions-open:empty {
  display: none;
}

.juji-pos-card {
  padding: 14px 16px 13px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
}

.juji-pos-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
}

.juji-pos-symbol {
  min-width: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.juji-pos-chain {
  color: var(--juji-screen-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

.juji-pos-pnl {
  margin-left: auto;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.juji-pos-pnl.is-up {
  color: var(--juji-ink);
  background: #f5d38a;
}

.juji-pos-pnl.is-down {
  color: #fff;
  background: var(--juji-down);
}

.juji-pos-pnl.is-flat {
  color: var(--juji-screen-soft);
  background: #2a251c;
}

.juji-pos-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  margin: 12px 0 0;
}

.juji-pos-rows dt {
  margin: 0;
  color: var(--juji-screen-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  white-space: nowrap;
}

.juji-pos-rows dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.juji-pos-rows dd.is-reason {
  color: #f5d38a;
  font-weight: 600;
}

/* prices and the opening time in the mono face: in the sans face "10-31 19:28" ran together */
.juji-pos-rows dd.is-figures {
  font-family: var(--font-mono);
  font-size: 13px;
}

.juji-pos-ca {
  display: block;
  margin-top: 10px;
  color: var(--juji-screen-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  user-select: all;
}

.juji-positions-empty {
  margin: 10px 0 0;
  padding: 14px 16px;
  background: var(--juji-panel);
  color: var(--juji-screen-soft);
  font-size: 14px;
  line-height: 1.5;
}

.juji-positions-closed {
  margin-top: 14px;
}

.juji-positions-sub {
  margin: 0 0 6px;
  color: var(--juji-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.juji-positions-closed-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.juji-pos-closed {
  padding: 10px 14px;
  background: var(--juji-panel);
  color: var(--juji-screen-ink);
  font-size: 13.5px;
  line-height: 1.5;
}

.juji-pos-closed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 4px;
}

.juji-pos-closed-symbol {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.juji-pos-closed-why {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.juji-pos-closed-when {
  margin: 2px 0 0;
  color: var(--juji-screen-soft);
  font-family: var(--font-mono);
  font-size: 12px;
}

@media (max-width: 720px) {
  .juji-pos-card {
    padding: 12px 14px;
  }

  .juji-pos-symbol {
    font-size: 20px;
  }
}

/* today's live as HLS (10-31 18:17, boss: "what she says and the picture must match"): the one stream plays in the big
   box at full frame (her desk, her face top right, the wall, the subtitles) and the camera box paints that frame's face
   area onto a canvas from the same player, so the two can never drift apart (app.js mountLiveHlsStage). The face area
   comes from the live server (/api/poc/status face_box); until it says, (1016, 36) 256 x 192 of the 1280 x 720 frame. */
.juji-hero.is-hls-live .ws-chart-stage .vidu-hls-video {
  position: static;
  inset: auto;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  opacity: 1;
  transform: none;
  animation: none;
  pointer-events: none;
  background: #000;
}

.juji-hero.is-hls-live .ws-chart-stage .ws-live-chart-iframe,
.juji-hero.is-hls-live .ws-chart-stage .ws-gmgn-screen,
.juji-hero.is-hls-live .ws-chart-stage .ws-gmgn-screen-badge,
.juji-hero.is-hls-live .ws-chart-stage .juji-chart-empty,
.juji-hero.is-hls-live .ws-chart-stage .ws-gmgn-intel-overlay {
  display: none;
}

/* the screen area alone (10-31 19:11): with a screen box app.js placeStageCrop sizes the player to the whole frame and
   moves it so that area fills the box; the box clips the rest (its overflow is hidden) */
.juji-hero.is-hls-live .ws-chart-stage.is-screen-crop .vidu-hls-video {
  position: absolute;
  flex: none;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

/* the face area covered (10-31 18:51, boss: "that screen should not show the face, the face is already at the side"):
   her verdict card over the face box of the big player during the HLS live, dark like the frame's own wall. app.js
   placeStageCover sets left / top / width / height (and the type size, about 5% of the width) from the face box; the
   values here are the measured default box (768, 0) 512 x 384 of 1280 x 720 */
.juji-stage-cover {
  position: absolute;
  left: 60%;
  top: 0;
  width: 40%;
  height: 53.3333%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
  padding: 0.9em 1em;
  overflow: hidden;
  border-left: 2px solid var(--juji-gold);
  background: #0b0b0e;
  color: #f4efe6;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}

.juji-stage-cover[hidden] {
  display: none;
}

.juji-stage-cover-title {
  margin: 0;
  color: var(--juji-gold);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.juji-stage-cover-line {
  display: -webkit-box;
  margin: 0.35em 0 0;
  color: #fff;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.juji-stage-cover-text {
  display: -webkit-box;
  margin: 0.5em 0 0;
  color: #d9d2c5;
  font-size: 1em;
  line-height: 1.4;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.pip-cam-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 3;
  display: none;
  background: #09090b;
}

.pip-cam-face.active {
  display: block;
}

/* One-line ticker under the header (10-31 19:38): the notice scrolls across, twice in the track for a seamless loop */
.juji-ticker {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 7px 0;
  background: #14110b;
  color: #f5bd4f;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.juji-ticker-track {
  display: flex;
  width: max-content;
  animation: jujiTicker 28s linear infinite;
}
.juji-ticker:hover .juji-ticker-track {
  animation-play-state: paused;
}
.juji-ticker-text {
  padding-right: 64px;
  white-space: nowrap;
}
@keyframes jujiTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .juji-ticker-track {
    width: auto;
    justify-content: center;
    padding: 0 16px;
    animation: none;
  }
  .juji-ticker-text {
    padding-right: 0;
    white-space: normal;
    text-align: center;
  }
  .juji-ticker-text[aria-hidden="true"] {
    display: none;
  }
}