@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Outfit:wght@800;900&family=ZCOOL+QingKe+HuangYou&display=swap');

@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('https://cdn.jsdelivr.net/npm/@fontpkg/alimama-shu-hei-ti@1.0.5/AlimamaShuHeiTi-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Zpix';
  src: url('https://cdn.jsdelivr.net/gh/SolidZORO/zpix-pixel-font/zpix.ttf') format('truetype');
  font-display: swap;
}

:root {
  color-scheme: dark;

  --sr-color-void-950: #050713;
  --sr-color-void-900: #0a1024;
  --sr-color-void-840: #101832;
  --sr-color-void-780: #171f43;
  --sr-color-ink-100: #f4f8ff;
  --sr-color-ink-200: #d9e5ff;
  --sr-color-ink-420: #8ea3c7;
  --sr-color-cyan-300: #61f7ff;
  --sr-color-cyan-500: #19b8ff;
  --sr-color-violet-400: #ac7cff;
  --sr-color-magenta-420: #ff6bd6;
  --sr-color-amber-300: #ffd78a;
  --sr-color-danger-400: #ff687d;
  --sr-color-success-400: #72ffd7;
  --sr-gradient-space: radial-gradient(circle at 18% 18%, rgba(25, 184, 255, 0.24), transparent 31%), radial-gradient(circle at 74% 9%, rgba(255, 107, 214, 0.14), transparent 29%), linear-gradient(135deg, var(--sr-color-void-950), var(--sr-color-void-900) 46%, var(--sr-color-void-840));
  --sr-gradient-panel: linear-gradient(145deg, rgba(244, 248, 255, 0.13), rgba(25, 184, 255, 0.06) 42%, rgba(172, 124, 255, 0.1));
  --sr-gradient-button-primary: linear-gradient(100deg, var(--sr-color-cyan-300), var(--sr-color-cyan-500) 48%, var(--sr-color-violet-400));
  --sr-gradient-button-secondary: linear-gradient(100deg, rgba(97, 247, 255, 0.16), rgba(172, 124, 255, 0.16));
  --sr-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sr-font-cjk: "Hiragino Sans GB", "Songti SC", "STHeiti", "PingFang SC", "Microsoft YaHei", var(--sr-font-body);
  --sr-font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --sr-shadow-panel: 0 22px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(244, 248, 255, 0.14);
  --sr-shadow-button: 0 14px 32px rgba(25, 184, 255, 0.24);
  --sr-border-muted: rgba(217, 229, 255, 0.18);
  --sr-border-cyan: rgba(97, 247, 255, 0.54);
  --hud-clip-sm: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0.7rem 100%, 0 calc(100% - 0.7rem));
  --hud-clip-md: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));

  --portal-font-size: 13px;
  --portal-display-size: clamp(26px, 3.6vw, 40px);
  --portal-panel-pad: 14px;
  --portal-text: var(--sr-color-ink-100);
  --portal-muted: var(--sr-color-ink-420);
  --portal-line: var(--sr-border-muted);
  --portal-focus: 0 0 0 3px rgba(97, 247, 255, 0.2);

  --yl-color-void-980: #02030a;
  --yl-color-void-950: #050713;
  --yl-color-ink-100: #f4f8ff;
  --yl-color-ink-200: #d9e5ff;
  --yl-color-cyan-300: #61f7ff;
  --yl-color-violet-400: #ac7cff;
  --yl-color-magenta-420: #ff6bd6;
  --yl-color-amber-300: #ffd78a;
  --yl-color-sr-cloud-white: #ffffff;
  --yl-color-sr-cream-light: #fffde5;
  --yl-color-sr-lavender-mist: #e7deff;
  --yl-color-sr-blush-pink: #fbe3f6;
  --yl-color-sr-ice-cyan: #def9ff;
  --yl-color-sr-neon-cyan: #58fff5;
  --yl-color-sr-orbit-gold: #fdd36e;
  --yl-color-sr-rail-violet: #473aa7;
  --yl-color-sr-deck-navy: #090d3c;
  --yl-gradient-arcade-sky: radial-gradient(circle at 10% 15%, rgba(255, 115, 220, 0.34), transparent 13%), radial-gradient(circle at 78% 14%, rgba(115, 251, 255, 0.24), transparent 18%), linear-gradient(180deg, #3f35b4 0%, #435ff1 48%, #6550ff 74%, #2c1d8f 100%);
  --yl-gradient-arcade-terminal: linear-gradient(180deg, rgba(31, 29, 112, 0.94), rgba(70, 60, 190, 0.88));
  --yl-gradient-arcade-panel: linear-gradient(135deg, rgba(115, 251, 255, 0.38), rgba(255, 115, 220, 0.28) 52%, rgba(255, 215, 138, 0.18));
  --yl-gradient-arcade-bottom-rail: linear-gradient(90deg, rgba(244, 248, 255, 0.92), rgba(255, 115, 220, 0.76) 18%, rgba(118, 82, 255, 0.9) 55%, rgba(115, 251, 255, 0.7) 100%);
  --yl-gradient-energy-platform: radial-gradient(ellipse at center, rgba(244, 248, 255, 0.54), rgba(97, 247, 255, 0.2) 38%, rgba(255, 107, 214, 0.18) 54%, transparent 66%);
  --yl-gradient-scan-panel: linear-gradient(180deg, rgba(97, 247, 255, 0.24), rgba(97, 247, 255, 0.07)), repeating-linear-gradient(180deg, rgba(244, 248, 255, 0.11) 0 1px, transparent 1px 7px);
  --yl-gradient-sr-cloud-stage: radial-gradient(circle at 83% 12%, rgba(222, 249, 255, 0.88), transparent 13%), radial-gradient(circle at 14% 19%, rgba(251, 227, 246, 0.62), transparent 12%), linear-gradient(180deg, var(--yl-color-sr-cloud-white) 0 52%, #f6f9ff 59%, rgba(223, 238, 254, 0.96) 63%, rgba(71, 58, 167, 0.96) 63.4%, var(--yl-color-sr-deck-navy) 100%);
  --yl-gradient-sr-horizon-rail: radial-gradient(circle at 11% 58%, rgba(88, 255, 245, 0.42), transparent 18%), radial-gradient(circle at 32% 66%, rgba(253, 211, 110, 0.36), transparent 16%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0 45%, rgba(255, 255, 255, 0.82) 46%, rgba(71, 58, 167, 0.86) 55%, rgba(9, 13, 60, 0.98) 100%);
  --yl-gradient-sr-reference-burst: radial-gradient(circle at 70% 21%, rgba(255, 255, 255, 0.92), transparent 17%), radial-gradient(circle at 60% 38%, rgba(88, 255, 245, 0.38), transparent 31%), var(--yl-gradient-sr-cloud-stage);
  --yl-gradient-sr-diagonal-trail: linear-gradient(104deg, transparent 0%, rgba(255, 107, 214, 0.88) 18%, rgba(244, 248, 255, 0.76) 42%, rgba(97, 247, 255, 0.68) 64%, transparent 100%);
  --yl-gradient-sr-dock: linear-gradient(90deg, rgba(42, 31, 146, 0.96), rgba(86, 52, 255, 0.94) 52%, rgba(25, 184, 255, 0.9));
  --yl-material-card-prism: linear-gradient(135deg, rgba(88, 255, 245, 0.68), rgba(255, 115, 220, 0.4) 55%, rgba(253, 211, 110, 0.34));
  --yl-pattern-halftone: radial-gradient(circle, rgba(244, 248, 255, 0.16) 0 0.55px, transparent 0.65px);
  --yl-pattern-vertical-light: linear-gradient(180deg, rgba(244, 248, 255, 0.07) 1px, transparent 1px);
  --yl-border-arcade-thick: rgba(253, 211, 110, 0.45);
  --yl-border-arcade-inner: rgba(244, 248, 255, 0.6);
  --yl-shadow-sr-poster-blast: 0 0 42px rgba(244, 248, 255, 0.2), 0 0 60px rgba(119, 242, 255, 0.15);
  --yl-shadow-pink-cyan-bloom: 0 0 24px rgba(253, 211, 110, 0.25), 0 0 48px rgba(119, 242, 255, 0.15);
  --yl-shadow-arcade-halo: 0 0 30px rgba(119, 242, 255, 0.15), 0 28px 110px rgba(18, 12, 78, 0.44);
  --yl-radius-arcade-panel: 1.65rem;
  --yl-font-pixel-display: "Montserrat", "Inter", var(--sr-font-cjk);
  --yl-motion-normal: 280ms;
  --yl-motion-slow: 600ms;
  --yl-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  color: var(--portal-text);
  font-family: var(--sr-font-body);
  font-size: var(--portal-font-size);
  line-height: 1.55;
  background: var(--sr-gradient-space);
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  background-image:
    radial-gradient(circle, rgba(97, 247, 255, 0.28) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(172, 124, 255, 0.18) 0 1px, transparent 1.7px),
    linear-gradient(90deg, rgba(97, 247, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(217, 229, 255, 0.04) 1px, transparent 1px);
  background-position: 0 0, 62px 30px, 0 0, 0 0;
  background-size: 128px 128px, 220px 220px, 72px 72px, 72px 72px;
  opacity: 0.28;
  animation: hud-starfield-drift 30s linear infinite;
}
body::after {
  background:
    radial-gradient(circle at 76% 12%, rgba(255, 107, 214, 0.13), transparent 30%),
    radial-gradient(circle at 12% 20%, rgba(25, 184, 255, 0.16), transparent 32%),
    linear-gradient(180deg, transparent 0, rgba(97, 247, 255, 0.045) 52%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.42;
}
button, input { font: inherit; }
html:has(body.is-home-gated) {
  background-color: #f5f7ff !important;
}
body.is-home-gated {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(245, 247, 255, 0.98) 34%, rgba(236, 240, 255, 1) 68%, rgba(229, 234, 255, 1) 100%) !important;
  background-color: #f5f7ff !important;
}
body.is-home-gated::before,
body.is-home-gated::after {
  display: none;
}
.shell { position: relative; z-index: 1; width: min(1500px, calc(100% - 24px)); margin: 0 auto; padding: 22px 0 38px; }
body.is-home-gated .shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.is-home-gated #homeGate {
  width: 100%;
}

.gate-v5-terminal #homeStatus {
  position: absolute;
  inset-block-end: 26px;
  inset-inline: 34px;
  width: auto;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.hero-copy, .hero-card, .panel, .base-card, .metric-card { border: 1px solid var(--portal-line); background: var(--sr-gradient-panel); box-shadow: var(--sr-shadow-panel); backdrop-filter: blur(16px); clip-path: var(--hud-clip-sm); }
.hero-copy { padding: 22px; min-height: 158px; }
.hero-kicker { max-width: 720px; margin: 0 0 14px; }
.hero-card { padding: 18px; display: grid; gap: 8px; align-content: center; }
.eyebrow, .hero-card span, .base-card span, .metric-card span { color: var(--sr-color-success-400); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
h1 { margin: 6px 0 10px; font-family: var(--sr-font-cjk); font-size: var(--portal-display-size); line-height: 1.02; letter-spacing: -0.03em; }
h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; }
.muted, .hero-card small, .metric-card small { color: var(--portal-muted); line-height: 1.6; }
.hero-card strong { font-size: 14px; word-break: break-all; }
.ops-vitals {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 10px;
  width: min(760px, 100%);
  margin-top: 12px;
}
.ops-vital {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(217, 229, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(244, 248, 255, 0.07), rgba(97, 247, 255, 0.045) 42%, rgba(172, 124, 255, 0.055)),
    rgba(5, 10, 24, 0.68);
  clip-path: var(--hud-clip-sm);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.12);
}
.ops-vital-heart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  --heart-liquid-color: rgba(97, 247, 255, 0.78);
  --heart-liquid-glow: rgba(97, 247, 255, 0.34);
  --heart-liquid-soft: rgba(97, 247, 255, 0.16);
  --heart-wave-color: rgba(244, 248, 255, 0.28);
  --heart-outline-color: rgba(97, 247, 255, 0.84);
  --heart-zap-color: rgba(255, 215, 138, 0.98);
}
.heart-pressure-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-inline-start: -2px;
}
.heart-pressure-icon svg {
  width: 60px;
  height: 60px;
  overflow: visible;
  filter: drop-shadow(0 0 16px var(--heart-liquid-glow));
}
.heart-tech-frame {
  fill: rgba(5, 14, 32, 0.76);
  stroke: var(--heart-liquid-soft);
  stroke-width: 7;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px var(--heart-liquid-glow));
}
.heart-liquid-shell {
  fill: rgba(7, 18, 38, 0.82);
  stroke: rgba(217, 229, 255, 0.18);
  stroke-width: 1.35;
}
.heart-liquid-fill {
  fill: var(--heart-liquid-color);
  filter: drop-shadow(0 0 10px var(--heart-liquid-glow));
  transition: y 420ms ease, height 420ms ease, fill 220ms ease;
}
.heart-liquid-wave-stack {
  transition: transform 420ms ease;
}
.heart-liquid-wave {
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--heart-wave-color);
  opacity: 0.82;
  animation: heart-liquid-drift 3.9s ease-in-out infinite, heart-liquid-shimmer 2.6s ease-in-out infinite;
}
.heart-liquid-wave-b {
  opacity: 0.34;
  animation-duration: 5.2s, 3.4s;
  animation-direction: reverse, normal;
}
.heart-charge-orb {
  fill: rgba(244, 248, 255, 0.92);
  stroke: var(--heart-liquid-color);
  stroke-width: 0.75;
  filter: drop-shadow(0 0 6px var(--heart-liquid-glow));
  animation: heart-charge-float 3.2s ease-in-out infinite;
}
.heart-charge-orb-b { animation-delay: -1.2s; opacity: 0.78; }
.heart-charge-orb-c { animation-delay: -2s; opacity: 0.64; }
.heart-circuit-trace {
  fill: none;
  stroke: rgba(217, 229, 255, 0.28);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
  animation: heart-circuit-pulse 2.8s ease-in-out infinite;
}
.heart-circuit-trace-b {
  stroke: var(--heart-outline-color);
  stroke-dasharray: 5 8;
  opacity: 0.62;
  animation-delay: -1.1s;
}
.heart-liquid-outline {
  fill: none;
  stroke: var(--heart-outline-color);
  stroke-width: 2.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--heart-liquid-glow));
}
.heart-zap {
  fill: rgba(5, 10, 24, 0.88);
  stroke: var(--heart-zap-color);
  stroke-width: 1.25;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(255, 215, 138, 0.5));
  animation: heart-electric-flicker 1.9s steps(2, end) infinite;
}
.heart-zap-core {
  fill: var(--heart-zap-color);
  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgba(255, 215, 138, 0.52));
}
.heart-node {
  fill: rgba(244, 248, 255, 0.92);
  stroke: var(--heart-outline-color);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 7px var(--heart-liquid-glow));
}
.heart-pressure-copy { display: grid; gap: 2px; min-width: 0; }
.heart-pressure-label { color: var(--sr-color-success-400); font-size: 10.5px; font-weight: 950; letter-spacing: 0.13em; }
.heart-pressure-copy strong { color: #f4f8ff; font-size: 17px; line-height: 1.1; letter-spacing: -0.025em; }
.heart-pressure-copy small { color: var(--portal-muted); font-size: 11px; line-height: 1.35; }
.ops-vital-heart[data-level="resting"],
.ops-vital-heart[data-level="resting"],
.ops-vital-heart[data-level="steady"],
.ops-vital-heart[data-liquid-state="stable"] {
  --heart-liquid-color: rgba(114, 255, 215, 0.86);
  --heart-liquid-glow: rgba(114, 255, 215, 0.38);
  --heart-liquid-soft: rgba(114, 255, 215, 0.18);
  --heart-wave-color: rgba(221, 255, 247, 0.38);
  --heart-outline-color: rgba(114, 255, 215, 0.9);
  border-color: rgba(114, 255, 215, 0.32);
}
.ops-vital-heart[data-level="working"],
.ops-vital-heart[data-liquid-state="wave"] {
  --heart-liquid-color: rgba(255, 166, 77, 0.86);
  --heart-liquid-glow: rgba(255, 166, 77, 0.36);
  --heart-liquid-soft: rgba(255, 166, 77, 0.18);
  --heart-wave-color: rgba(255, 235, 185, 0.38);
  --heart-outline-color: rgba(255, 184, 92, 0.9);
  --heart-zap-color: rgba(255, 241, 196, 0.98);
  border-color: rgba(255, 166, 77, 0.48);
}
.ops-vital-heart[data-level="strained"],
.ops-vital-heart[data-level="overdrive"],
.ops-vital-heart[data-liquid-state="critical"] {
  --heart-liquid-color: rgba(255, 104, 125, 0.84);
  --heart-liquid-glow: rgba(255, 104, 125, 0.42);
  --heart-liquid-soft: rgba(255, 104, 125, 0.18);
  --heart-wave-color: rgba(255, 215, 138, 0.42);
  --heart-outline-color: rgba(255, 140, 170, 0.92);
  --heart-zap-color: rgba(255, 241, 196, 0.98);
  border-color: rgba(255, 104, 125, 0.58);
  background: linear-gradient(145deg, rgba(255, 104, 125, 0.12), rgba(255, 107, 214, 0.065) 44%, rgba(25, 184, 255, 0.035)), rgba(34, 8, 18, 0.72);
}
.ops-vital-heart[data-level="overdrive"] .heart-pressure-icon svg { animation: heart-pressure-beat 0.78s ease-in-out infinite; }
.ops-vital-heart[data-liquid-state="critical"] .heart-liquid-wave { animation-duration: 2.1s, 1.6s; }
.ops-vital-heart[data-liquid-state="stopped"] {
  --heart-liquid-color: rgba(142, 163, 199, 0.2);
  --heart-liquid-glow: rgba(142, 163, 199, 0.12);
  --heart-liquid-soft: rgba(142, 163, 199, 0.12);
  --heart-wave-color: rgba(217, 229, 255, 0.1);
  --heart-outline-color: rgba(142, 163, 199, 0.58);
  --heart-zap-color: rgba(142, 163, 199, 0.54);
  border-color: rgba(142, 163, 199, 0.24);
  filter: grayscale(0.78) saturate(0.4);
}
.ops-vital-heart[data-liquid-state="stopped"] .heart-liquid-fill,
.ops-vital-heart[data-liquid-state="stopped"] .heart-liquid-wave,
.ops-vital-heart[data-liquid-state="stopped"] .heart-charge-orb {
  opacity: 0;
  animation: none;
}
.ops-vital-heart[data-liquid-state="stopped"] .heart-zap,
.ops-vital-heart[data-liquid-state="stopped"] .heart-zap-core,
.ops-vital-heart[data-liquid-state="stopped"] .heart-circuit-trace {
  animation: none;
  opacity: 0.42;
}
.ops-vital-heart[data-level="error"] .heart-pressure-copy strong { color: #b8c2d7; }

/* ── Fatigue: body-silhouette icon with liquid fill (mirrors heart icon pattern) ── */
.ops-vital-fatigue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 6px 10px;
}
.fatigue-body-icon {
  grid-row: 1;
  grid-column: 1;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 16px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
}
.fatigue-liquid-icon {
  width: 100%;
  height: 100%;
  display: block;
}
.fatigue-tech-frame {
  fill: rgba(5, 14, 32, 0.76);
  stroke: var(--fatigue-liquid-soft, rgba(114, 255, 215, 0.18));
  stroke-width: 7;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
}
.fatigue-body-shell {
  fill: rgba(7, 18, 38, 0.82);
  stroke: rgba(217, 229, 255, 0.18);
  stroke-width: 1.35;
}
.fatigue-liquid-fill {
  fill: var(--fatigue-liquid-color, rgba(114, 255, 215, 0.86));
  filter: drop-shadow(0 0 10px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
  transition: y 420ms ease, height 420ms ease, fill 220ms ease;
}
.fatigue-liquid-wave-stack {
  transition: transform 420ms ease;
}
.fatigue-liquid-wave {
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--fatigue-wave-color, rgba(221, 255, 247, 0.38));
  opacity: 0.82;
  animation: heart-liquid-drift 4.2s ease-in-out infinite, heart-liquid-shimmer 3s ease-in-out infinite;
}
.fatigue-liquid-wave-b {
  opacity: 0.34;
  animation-duration: 5.6s, 3.8s;
  animation-direction: reverse, normal;
}
.fatigue-charge-orb {
  fill: rgba(244, 248, 255, 0.92);
  stroke: var(--fatigue-liquid-color, rgba(114, 255, 215, 0.86));
  stroke-width: 0.75;
  filter: drop-shadow(0 0 6px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
  animation: heart-charge-float 3.5s ease-in-out infinite;
}
.fatigue-charge-orb-b { animation-delay: -1.5s; opacity: 0.72; }
.fatigue-circuit-trace {
  fill: none;
  stroke: rgba(217, 229, 255, 0.28);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 7;
  animation: heart-circuit-pulse 3s ease-in-out infinite;
}
.fatigue-circuit-trace-b {
  stroke: var(--fatigue-outline-color, rgba(114, 255, 215, 0.9));
  stroke-dasharray: 5 8;
  opacity: 0.62;
  animation-delay: -1.2s;
}
.fatigue-body-outline {
  fill: none;
  stroke: var(--fatigue-outline-color, rgba(114, 255, 215, 0.9));
  stroke-width: 2.35;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
}
.fatigue-node {
  fill: rgba(244, 248, 255, 0.92);
  stroke: var(--fatigue-outline-color, rgba(114, 255, 215, 0.9));
  stroke-width: 0.8;
  filter: drop-shadow(0 0 7px var(--fatigue-liquid-glow, rgba(114, 255, 215, 0.3)));
}

.fatigue-copy {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fatigue-label {
  color: var(--sr-color-success-400);
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.fatigue-copy strong {
  color: #f4f8ff;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.fatigue-copy small {
  color: var(--portal-muted);
  font-size: 11px;
  line-height: 1.35;
}
.fatigue-meta-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.fatigue-meta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(217, 229, 255, 0.12);
  background: rgba(217, 229, 255, 0.05);
  color: var(--portal-muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
  clip-path: var(--hud-clip-sm);
}

/* Fatigue liquid fill levels driven by data-tone (CSS-only, no JS changes needed) */
/* safe = healthy = full energy → liquid high (green) */
.ops-vital-fatigue[data-tone="safe"] {
  --fatigue-liquid-color: rgba(114, 255, 215, 0.86);
  --fatigue-liquid-glow: rgba(114, 255, 215, 0.38);
  --fatigue-liquid-soft: rgba(114, 255, 215, 0.18);
  --fatigue-wave-color: rgba(221, 255, 247, 0.38);
  --fatigue-outline-color: rgba(114, 255, 215, 0.9);
  border-color: rgba(114, 255, 215, 0.3);
}
.ops-vital-fatigue[data-tone="safe"] .fatigue-liquid-fill { y: 10; height: 52; }
.ops-vital-fatigue[data-tone="safe"] .fatigue-liquid-wave-stack { transform: translateY(-28px); }
.ops-vital-fatigue[data-tone="safe"] .fatigue-label { color: var(--sr-color-success-400); }

/* warm = sub-healthy = moderate energy → liquid mid (orange) */
.ops-vital-fatigue[data-tone="warm"] {
  --fatigue-liquid-color: rgba(255, 166, 77, 0.86);
  --fatigue-liquid-glow: rgba(255, 166, 77, 0.36);
  --fatigue-liquid-soft: rgba(255, 166, 77, 0.18);
  --fatigue-wave-color: rgba(255, 235, 185, 0.38);
  --fatigue-outline-color: rgba(255, 184, 92, 0.9);
  border-color: rgba(255, 184, 77, 0.38);
}
.ops-vital-fatigue[data-tone="warm"] .fatigue-liquid-fill { y: 28; height: 34; }
.ops-vital-fatigue[data-tone="warm"] .fatigue-liquid-wave-stack { transform: translateY(-10px); }
.ops-vital-fatigue[data-tone="warm"] .fatigue-label { color: rgba(255, 184, 92, 0.95); }

/* strained = fatigued = low energy → liquid low (red) */
.ops-vital-fatigue[data-tone="strained"] {
  --fatigue-liquid-color: rgba(255, 104, 125, 0.84);
  --fatigue-liquid-glow: rgba(255, 104, 125, 0.42);
  --fatigue-liquid-soft: rgba(255, 104, 125, 0.18);
  --fatigue-wave-color: rgba(255, 215, 138, 0.42);
  --fatigue-outline-color: rgba(255, 140, 170, 0.92);
  border-color: rgba(255, 104, 125, 0.48);
}
.ops-vital-fatigue[data-tone="strained"] .fatigue-liquid-fill { y: 42; height: 20; }
.ops-vital-fatigue[data-tone="strained"] .fatigue-liquid-wave-stack { transform: translateY(2px); }
.ops-vital-fatigue[data-tone="strained"] .fatigue-label { color: rgba(255, 140, 170, 0.95); }

/* critical = scrapped = nearly empty → red flashing */
.ops-vital-fatigue[data-tone="critical"] {
  --fatigue-liquid-color: rgba(255, 104, 125, 0.84);
  --fatigue-liquid-glow: rgba(255, 104, 125, 0.42);
  --fatigue-liquid-soft: rgba(255, 104, 125, 0.18);
  --fatigue-wave-color: rgba(255, 215, 138, 0.42);
  --fatigue-outline-color: rgba(255, 140, 170, 0.92);
  border-color: rgba(255, 104, 125, 0.58);
  background: linear-gradient(145deg, rgba(255, 104, 125, 0.12), rgba(255, 107, 214, 0.065) 44%, rgba(25, 184, 255, 0.035)), rgba(34, 8, 18, 0.72);
}
.ops-vital-fatigue[data-tone="critical"] .fatigue-liquid-fill { y: 50; height: 12; }
.ops-vital-fatigue[data-tone="critical"] .fatigue-liquid-wave-stack { transform: translateY(10px); }
.ops-vital-fatigue[data-tone="critical"] .fatigue-liquid-wave { animation-duration: 2.2s, 1.8s; }
.ops-vital-fatigue[data-tone="critical"] .fatigue-liquid-icon { animation: heart-pressure-beat 0.82s ease-in-out infinite; }
.ops-vital-fatigue[data-tone="critical"] .fatigue-label { color: rgba(255, 140, 170, 0.95); }

/* capped = fully scrapped = empty (gray) */
.ops-vital-fatigue[data-tone="capped"] {
  --fatigue-liquid-color: rgba(142, 163, 199, 0.2);
  --fatigue-liquid-glow: rgba(142, 163, 199, 0.12);
  --fatigue-liquid-soft: rgba(142, 163, 199, 0.12);
  --fatigue-wave-color: rgba(217, 229, 255, 0.1);
  --fatigue-outline-color: rgba(142, 163, 199, 0.58);
  border-color: rgba(142, 163, 199, 0.32);
  background: linear-gradient(145deg, rgba(142, 163, 199, 0.12), rgba(95, 112, 145, 0.08) 44%, rgba(25, 184, 255, 0.03)), rgba(12, 16, 26, 0.8);
  filter: grayscale(0.78) saturate(0.4);
}
.ops-vital-fatigue[data-tone="capped"] .fatigue-liquid-fill,
.ops-vital-fatigue[data-tone="capped"] .fatigue-liquid-wave,
.ops-vital-fatigue[data-tone="capped"] .fatigue-charge-orb {
  opacity: 0;
  animation: none;
}
.ops-vital-fatigue[data-tone="capped"] .fatigue-circuit-trace { animation: none; opacity: 0.42; }
.ops-vital-fatigue[data-tone="capped"] .fatigue-label { color: rgba(142, 163, 199, 0.7); }

.ops-vital-fatigue[data-mode="estimate"] .fatigue-meta {
  color: #ffe3a3;
  border-color: rgba(255, 215, 138, 0.24);
  background: rgba(255, 215, 138, 0.08);
}
.panel { padding: var(--portal-panel-pad); }
.query-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "lead key"
    "control control";
  gap: 8px 16px;
  align-items: start;
  margin-bottom: 12px;
}
button { min-height: 38px; border: 1px solid rgba(97, 247, 255, 0.28); background: var(--sr-gradient-button-primary); color: #03111d; font-weight: 900; padding: 9px 13px; cursor: pointer; box-shadow: var(--sr-shadow-button); clip-path: var(--hud-clip-sm); }
button:focus-visible { outline: none; box-shadow: var(--portal-focus); }
button.secondary { background: var(--sr-gradient-button-secondary); border-color: var(--portal-line); color: var(--portal-text); box-shadow: none; }
button:disabled { opacity: 0.58; cursor: not-allowed; box-shadow: none; }
.base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.base-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px 10px;
  align-items: stretch;
  padding: 13px;
}
.base-card span { grid-column: 1 / -1; }
.base-card code {
  position: relative;
  z-index: 1;
  display: block;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(97, 247, 255, 0.22);
  background: rgba(3, 8, 20, 0.58);
  color: #d9e5ff;
  font-family: var(--sr-font-mono);
  line-height: 1.35;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  word-break: normal;
  clip-path: var(--hud-clip-sm);
}
.copy-btn {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-self: end;
  min-width: 76px;
  min-height: 36px;
  padding: 6px 12px;
  background: rgba(97, 247, 255, 0.12);
  color: var(--portal-text);
  font-size: 12px;
  box-shadow: none;
}
.model-pricing-panel {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  margin: 0;
  padding: 22px;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background:
    linear-gradient(145deg, rgba(10, 13, 62, 0.98), rgba(4, 7, 34, 0.98)),
    rgba(10, 13, 62, 0.98);
  box-shadow: 0 24px 86px rgba(4, 5, 36, 0.46), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-sm);
}
.model-pricing-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244, 248, 255, 0.1);
  pointer-events: none;
}
.model-pricing-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 0%, rgba(115, 251, 255, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(115, 251, 255, 0.04), transparent 34%, rgba(253, 211, 110, 0.035));
  opacity: 0.9;
}
.model-pricing-panel > * { position: relative; z-index: 1; }
.model-price-intro-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.model-price-hero-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(244, 248, 255, 0.18);
  border-block-start-color: rgba(115, 251, 255, 0.72);
  background:
    linear-gradient(112deg, rgba(115, 251, 255, 0.08), rgba(253, 211, 110, 0.05) 46%, rgba(5, 8, 38, 0.92)),
    rgba(5, 8, 38, 0.82);
  box-shadow:
    0 18px 42px rgba(4, 6, 28, 0.24),
    inset 0 0 0 1px rgba(231, 222, 255, 0.04);
  clip-path: var(--hud-clip-sm);
}
.model-price-hero-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.model-price-panel-head {
  align-items: stretch;
  margin-bottom: 0;
}
.model-price-panel-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  text-shadow: 0 0 20px rgba(244, 248, 255, 0.2);
}
.model-price-panel-head .muted {
  margin: 0;
  color: rgba(217, 229, 255, 0.8);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.45;
}
.model-price-panel-head .muted:empty {
  display: none;
}
.model-price-group-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.model-price-group-tab {
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(6, 10, 44, 0.84), rgba(5, 8, 38, 0.92)),
    rgba(5, 8, 38, 0.72);
  color: rgba(230, 241, 255, 0.92);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow:
    0 8px 20px rgba(2, 5, 24, 0.24),
    inset 0 0 0 1px rgba(231, 222, 255, 0.03);
  clip-path: var(--hud-clip-sm);
}
.model-price-group-tab:hover,
.model-price-group-tab:focus-visible {
  border-color: rgba(115, 251, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(9, 17, 58, 0.94), rgba(7, 11, 48, 0.98)),
    rgba(10, 16, 58, 0.92);
  color: #ffffff;
  box-shadow: var(--portal-focus);
}
.model-price-group-tab.is-active {
  border-color: rgba(115, 251, 255, 0.8);
  background:
    linear-gradient(92deg, rgba(115, 251, 255, 0.22), rgba(115, 251, 255, 0.075) 34%, rgba(253, 211, 110, 0.1) 100%),
    linear-gradient(180deg, rgba(7, 15, 52, 0.98), rgba(5, 10, 35, 0.98));
  color: #ffffff;
  box-shadow:
    0 18px 38px rgba(3, 8, 32, 0.3),
    inset 0 1px 0 rgba(244, 248, 255, 0.14),
    inset 0 0 0 1px rgba(244, 248, 255, 0.04);
}
.model-price-readonly-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(244, 248, 255, 0.1);
  background: rgba(7, 11, 41, 0.46);
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.025);
  clip-path: var(--hud-clip-sm);
}
.model-price-readonly-summary span {
  color: rgba(193, 205, 228, 0.74);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
}
.model-price-readonly-summary strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.18;
  text-shadow: 0 0 10px rgba(244, 248, 255, 0.12);
}
.model-price-readonly-summary small {
  color: rgba(201, 213, 236, 0.8);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.model-price-readonly-summary #currentModelPriceGroupModels {
  flex-basis: 100%;
}
.model-price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.model-price-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(244, 248, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(11, 15, 64, 0.98), rgba(5, 8, 38, 0.92)),
    rgba(5, 8, 38, 0.72);
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.04);
  clip-path: var(--hud-clip-sm);
}
.model-price-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.model-price-card-head strong {
  min-width: 0;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.22;
  text-shadow: 0 0 16px rgba(244, 248, 255, 0.14);
  overflow-wrap: anywhere;
}
.model-price-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.model-price-line {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(244, 248, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(16, 20, 78, 1), rgba(10, 13, 62, 0.98)),
    rgba(12, 14, 62, 0.98);
  clip-path: var(--hud-clip-sm);
}
.model-price-line:nth-child(1),
.model-price-line:nth-child(2) {
  border-color: rgba(244, 248, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(244, 248, 255, 0.03);
}
.model-price-line:nth-child(3),
.model-price-line:nth-child(4) {
  background:
    linear-gradient(180deg, rgba(13, 17, 66, 0.96), rgba(9, 12, 52, 0.98)),
    rgba(10, 13, 62, 0.92);
  border-color: rgba(244, 248, 255, 0.12);
}
.model-price-line span {
  color: rgba(222, 249, 255, 0.96);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.model-price-line strong {
  color: #ffffff;
  font-family: var(--sr-font-mono);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.model-price-line small {
  color: rgba(217, 229, 255, 0.86);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}
.status { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--portal-line); background: rgba(16, 24, 50, 0.86); color: #d9e5ff; clip-path: var(--hud-clip-sm); }
.status[data-state="success"] { border-color: rgba(114, 255, 215, 0.4); background: rgba(17, 64, 54, 0.8); color: var(--sr-color-success-400); }
.status[data-state="error"] { border-color: rgba(255, 104, 125, 0.48); background: rgba(82, 22, 34, 0.82); color: #ffd6dc; }
.status[data-state="warn"] { border-color: rgba(255, 215, 138, 0.44); background: rgba(78, 56, 17, 0.82); color: #ffe3a3; }

.portal-toast-host {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 118;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.portal-toast {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 11px 14px 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(115, 251, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(97, 247, 255, 0.08), rgba(97, 247, 255, 0.02)),
    rgba(6, 9, 28, 0.94);
  color: rgba(244, 248, 255, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(244, 248, 255, 0.12);
  clip-path: var(--hud-clip-sm);
  backdrop-filter: blur(14px);
  animation: portal-toast-enter 180ms ease-out both;
}
.portal-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 248, 255, 0.08), transparent);
  opacity: 0.5;
}
.portal-toast-mark {
  width: 4px;
  min-height: 28px;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}
.portal-toast-text {
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.portal-toast[data-state="success"] {
  border-color: rgba(114, 255, 215, 0.48);
  color: #ccffe9;
  background: linear-gradient(180deg, rgba(114, 255, 215, 0.11), rgba(17, 64, 54, 0.12)), rgba(6, 18, 25, 0.94);
}
.portal-toast[data-state="info"] {
  border-color: rgba(97, 247, 255, 0.42);
  color: #def9ff;
}
.portal-toast[data-state="warn"] {
  border-color: rgba(255, 215, 138, 0.5);
  color: #ffe3a3;
  background: linear-gradient(180deg, rgba(255, 215, 138, 0.12), rgba(78, 56, 17, 0.12)), rgba(24, 18, 8, 0.94);
}
.portal-toast[data-state="error"] {
  border-color: rgba(255, 104, 125, 0.56);
  color: #ffd6dc;
  background: linear-gradient(180deg, rgba(255, 104, 125, 0.14), rgba(82, 22, 34, 0.14)), rgba(25, 8, 14, 0.95);
}
.portal-toast.portal-toast-leaving {
  animation: portal-toast-exit 220ms ease-in both;
}
@keyframes portal-toast-enter {
  from { opacity: 0; transform: translate3d(16px, -8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes portal-toast-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(16px, -8px, 0); }
}
@media (max-width: 640px) {
  .portal-toast-host {
    top: 12px;
    right: 50%;
    transform: translateX(50%);
    width: min(420px, calc(100vw - 24px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-toast,
  .portal-toast.portal-toast-leaving {
    animation: none !important;
    transform: none !important;
  }
}

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
#summaryCards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#summaryCards .metric-card { min-width: 0; }
#summaryCards .metric-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#summaryCards .metric-support {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.metric-card { display: grid; gap: 6px; padding: 13px; }
.metric-card.highlight { border-color: rgba(114, 255, 215, 0.42); background: linear-gradient(145deg, rgba(114, 255, 215, 0.13), rgba(25, 184, 255, 0.05)); }
.metric-card strong { display: block; font-size: 20px; line-height: 1.12; letter-spacing: -0.04em; }
.metric-card-combo strong { color: #f7fbff; font-size: 22px; }
.metric-card-subtitle {
  display: block;
  color: var(--portal-muted);
  font-size: 11px;
  line-height: 1.55;
}
.metric-support {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(217, 229, 255, 0.14);
  background: rgba(217, 229, 255, 0.055);
  clip-path: var(--hud-clip-sm);
}
.metric-support b { color: #d7fff3; font-size: 12px; font-family: var(--sr-font-mono); letter-spacing: 0.01em; }
.details-panel { margin-top: 12px; }
.section-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.usage-details-head { align-items: center; }
.usage-details-head #refreshBtn { min-width: 126px; min-height: 40px; flex: 0 0 auto; }
.usage-details-head #refreshBtn:disabled { opacity: 0.58; }
.pager { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.pager span { color: var(--portal-muted); font-size: 12px; }
.usage-table-wrap { overflow: auto; border: 1px solid var(--portal-line); background: rgba(3, 8, 20, 0.7); clip-path: var(--hud-clip-sm); }
.usage-table { width: 100%; border-collapse: collapse; min-width: 0; table-layout: fixed; }
.usage-table th, .usage-table td { padding: 8px 8px; border-bottom: 1px solid rgba(217, 229, 255, 0.075); text-align: left; vertical-align: top; }
.usage-table th { color: #d9e5ff; background: rgba(255,255,255,0.035); font-size: 11px; letter-spacing: 0.06em; }
.usage-table td { font-size: 12px; }
.usage-table td strong { display: block; font-size: 13px; }
.usage-table td small { display: block; margin-top: 3px; color: var(--portal-muted); }
.usage-charge-cell { display: grid; gap: 4px; justify-items: center; min-width: 0; text-align: center; }
.usage-charge-cell strong { color: #f7fbff; letter-spacing: 0.01em; }
.usage-charge-cell small { margin-top: 0; color: var(--portal-muted); font-weight: 800; letter-spacing: 0.04em; }
.usage-detail-table { width: 100%; min-width: 0; table-layout: fixed; }
.usage-detail-table thead th { text-align: center; }
.usage-detail-table .usage-summary-row td { text-align: center; vertical-align: middle; }
.usage-detail-table .usage-summary-row td strong,
.usage-detail-table .usage-summary-row td small { text-align: center; }
.usage-detail-table .usage-summary-row td:first-child .usage-expand-btn { display: flex; margin: 0 auto 6px; }
.usage-detail-table th:nth-child(1), .usage-detail-table .usage-summary-row td:nth-child(1) { width: 124px; }
.usage-detail-table th:nth-child(2), .usage-detail-table .usage-summary-row td:nth-child(2) { width: 92px; }
.usage-detail-table th:nth-child(3), .usage-detail-table .usage-summary-row td:nth-child(3) { width: 88px; }
.usage-detail-table th:nth-child(4), .usage-detail-table .usage-summary-row td:nth-child(4) { width: 260px; text-align: center; vertical-align: middle; }
.usage-detail-table th:nth-child(5), .usage-detail-table .usage-summary-row td:nth-child(5) { width: 118px; text-align: center; }
.usage-detail-table th:nth-child(6), .usage-detail-table .usage-summary-row td:nth-child(6) { width: 150px; }
.usage-detail-table th:nth-child(7), .usage-detail-table .usage-summary-row td:nth-child(7) { width: 126px; }
.usage-detail-table th:nth-child(8), .usage-detail-table .usage-summary-row td:nth-child(8) { width: 92px; text-align: center; }
.usage-detail-table .usage-summary-row td:nth-child(4) { overflow: hidden; }
.usage-detail-table .usage-summary-row td:nth-child(4) { padding-inline: 10px; }
.empty-state { border: 1px dashed var(--portal-line); background: rgba(255,255,255,0.025); padding: 22px; text-align: center; color: var(--portal-muted); clip-path: var(--hud-clip-sm); }
.usage-summary-row { cursor: pointer; }
.usage-summary-row:hover td, .usage-summary-row:focus-visible td { background: rgba(255,255,255,0.03); }
.usage-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin-right: 6px;
  padding: 0;
  border-radius: 0;
  border-color: rgba(97, 247, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(244, 248, 255, 0.1), rgba(97, 247, 255, 0.08) 42%, rgba(172, 124, 255, 0.08)),
    rgba(10, 16, 36, 0.92);
  color: #f4f8ff;
  clip-path: var(--hud-clip-sm);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.14);
  font-size: 14px;
  line-height: 1;
}
.usage-expand-btn:hover { border-color: rgba(97, 247, 255, 0.42); background: linear-gradient(145deg, rgba(244, 248, 255, 0.14), rgba(97, 247, 255, 0.12) 42%, rgba(172, 124, 255, 0.12)), rgba(10, 16, 36, 0.96); box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.18), 0 0 18px rgba(97, 247, 255, 0.16); }
.usage-summary-row.expanded .usage-expand-btn,
.usage-expand-btn[aria-expanded="true"] { border-color: rgba(97, 247, 255, 0.48); background: linear-gradient(145deg, rgba(97, 247, 255, 0.18), rgba(172, 124, 255, 0.14)), rgba(10, 16, 36, 0.96); color: #ffffff; }
.model-chip, .usage-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(217, 229, 255, 0.18); background: rgba(217, 229, 255, 0.08); color: #dfe8f9; padding: 4px 7px; font-weight: 850; line-height: 1; white-space: nowrap; }
.model-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; min-height: 34px; overflow: hidden; border-radius: 9px; background: rgba(114, 255, 215, 0.1); color: #ddffe9; text-align: center; text-overflow: ellipsis; vertical-align: middle; padding: 7px 12px; }
.usage-pill.group { background: rgba(97, 247, 255, 0.1); color: #d9fbff; }
.usage-pill.kind { background: rgba(172, 124, 255, 0.13); color: #ece7ff; }
.usage-pill.success { background: rgba(114, 255, 215, 0.1); color: #d7fff3; }
.usage-pill.failed { background: rgba(255, 104, 125, 0.12); color: #ffd6dc; }
.usage-pill.warn { background: rgba(255, 215, 138, 0.12); color: #fff0c0; }
.usage-pill.stream { background: rgba(97, 247, 255, 0.09); color: #d9fbff; }
.usage-pill-stack { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.usage-latency-pills { justify-content: center; flex-wrap: nowrap; white-space: nowrap; }
.usage-latency-pills .usage-pill { flex: 0 0 auto; }
.usage-model-cell { display: grid; justify-items: center; align-items: center; min-width: 0; width: 100%; }
.usage-pricing-summary { display: grid; gap: 4px; color: var(--portal-muted); min-width: 0; max-width: 100%; margin-inline: auto; justify-items: center; text-align: center; }
.usage-pricing-summary .primary { color: var(--portal-text); font-weight: 850; }
.usage-detail-table .usage-summary-row td:last-child { overflow-wrap: anywhere; }
.usage-detail-table .usage-summary-row td[data-label="模型"] strong,
.usage-detail-table .usage-summary-row td[data-label="模型"] small { text-align: center; }
.usage-detail-row { display: none; }
.usage-detail-row.expanded { display: table-row; }
.usage-detail-row td { padding: 0; background: rgba(217, 229, 255, 0.08); }
.usage-detail-panel { display: grid; gap: 10px; padding: 14px 18px; background: rgba(12, 23, 43, 0.88); color: #f7fbff; }
.usage-detail-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; }
.usage-detail-label { color: #d9e5ff; font-weight: 800; text-align: right; }
.usage-detail-value { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.55; }

.yinlang-portal {
  position: relative;
  isolation: isolate;
  padding: 8px;
  overflow: clip;
}
.yinlang-portal::before,
.yinlang-portal::after {
  content: "";
  position: absolute;
  inset: -20px 0 auto;
  z-index: -2;
  height: 410px;
  pointer-events: none;
}
.yinlang-portal::before {
  border: 1px solid rgba(244, 248, 255, 0.12);
  background:
    var(--yl-pattern-vertical-light),
    var(--yl-gradient-sr-cloud-stage);
  clip-path: var(--hud-clip-md);
  box-shadow: var(--yl-shadow-arcade-halo);
  opacity: 0.88;
}
.yinlang-portal::after {
  inset-block-start: 218px;
  height: 188px;
  background: var(--yl-gradient-energy-platform);
  filter: blur(2px) saturate(1.22);
  opacity: 0.72;
}
.yinlang-stage-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.yinlang-orb,
.yinlang-shard,
.yinlang-light-rail {
  position: absolute;
  display: block;
  opacity: 0.78;
}
.yinlang-orb {
  border: 1px solid rgba(244, 248, 255, 0.28);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.88), rgba(88, 255, 245, 0.34) 30%, rgba(255, 107, 214, 0.12) 62%, transparent 72%);
  filter: drop-shadow(0 0 24px rgba(97, 247, 255, 0.28));
}
.yinlang-orb-a { top: 26px; right: 28%; width: 52px; height: 52px; }
.yinlang-orb-b { top: 188px; left: 6%; width: 28px; height: 28px; opacity: 0.52; }
.yinlang-shard {
  width: 54px;
  height: 16px;
  border: 1px solid rgba(255, 115, 220, 0.38);
  background: var(--yl-material-card-prism);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%);
  box-shadow: 0 0 22px rgba(255, 107, 214, 0.18);
}
.yinlang-shard-a { top: 84px; left: 53%; transform: rotate(-12deg); }
.yinlang-shard-b { top: 310px; right: 17%; transform: rotate(16deg); opacity: 0.46; }
.yinlang-light-rail {
  top: 18px;
  bottom: auto;
  width: 2px;
  height: 286px;
  background: linear-gradient(180deg, transparent, rgba(115, 251, 255, 0.58), transparent);
  filter: drop-shadow(0 0 16px rgba(115, 251, 255, 0.42));
}
.yinlang-light-rail-a { left: 2%; }
.yinlang-light-rail-b { right: 3%; height: 260px; opacity: 0.5; }
.yinlang-hero-stage {
  position: relative;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
  gap: 18px;
  margin-bottom: 16px;
}
.yinlang-story-terminal,
.yinlang-key-card,
.yinlang-query-dock,
.yinlang-scan-panel,
.yinlang-reward-rail .metric-card,
.yinlang-bottom-rail .base-card {
  position: relative;
  border-color: rgba(244, 248, 255, 0.2);
  border-block-start-color: rgba(115, 251, 255, 0.72);
  background:
    var(--yl-gradient-scan-panel),
    linear-gradient(145deg, rgba(31, 29, 112, 0.82), rgba(5, 7, 19, 0.82));
  box-shadow: var(--sr-shadow-panel), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
}
.yinlang-story-terminal {
  min-height: 252px;
  padding: 24px 24px 20px;
  overflow: hidden;
  background:
    var(--yl-pattern-halftone),
    var(--yl-gradient-arcade-terminal);
  box-shadow: var(--yl-shadow-pink-cyan-bloom), var(--sr-shadow-panel);
}
.yinlang-story-terminal::before,
.yinlang-key-card::before,
.yinlang-query-dock::before,
.yinlang-scan-panel::before,
.yinlang-reward-rail .metric-card::before,
.yinlang-bottom-rail .base-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(244, 248, 255, 0.18);
  clip-path: inherit;
}
.yinlang-story-terminal::after {
  content: "";
  position: absolute;
  inset: auto 20px 14px;
  height: 3px;
  background: var(--yl-gradient-arcade-bottom-rail);
  box-shadow: 0 0 18px rgba(115, 251, 255, 0.26);
}
.yinlang-story-terminal h1 {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  color: transparent;
  font-family: var(--yl-font-pixel-display);
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: none;
  background: linear-gradient(180deg, var(--yl-color-ink-100), var(--yl-color-cyan-300) 46%, var(--yl-color-violet-400));
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 16px rgba(88, 255, 245, 0.3), 0 0 28px rgba(231, 222, 255, 0.15);
}
.yinlang-story-terminal .eyebrow,
.yinlang-story-terminal .home-nav-home,
.yinlang-story-terminal .home-nav-note {
  color: var(--yl-color-cyan-300);
  text-shadow: 0 0 14px rgba(97, 247, 255, 0.24);
}
.yinlang-story-terminal .hero-kicker {
  max-width: 560px;
  color: rgba(244, 248, 255, 0.78);
  font-family: var(--sr-font-mono);
}
.yinlang-key-card {
  align-content: end;
  min-height: 252px;
  padding: 22px;
  overflow: hidden;
  transform: rotate(-0.7deg);
  border-color: var(--yl-border-arcade-thick);
  background:
    radial-gradient(circle at 58% 28%, rgba(244, 248, 255, 0.5), transparent 16%),
    radial-gradient(circle at 44% 44%, rgba(115, 251, 255, 0.38), transparent 38%),
    linear-gradient(145deg, rgba(42, 39, 130, 0.96), rgba(106, 76, 255, 0.9) 58%, rgba(255, 115, 220, 0.48));
}
.yinlang-key-card::after {
  content: "API";
  position: absolute;
  top: 22px;
  right: 20px;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--yl-font-pixel-display);
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.08em;
}
.yinlang-key-card strong,
.yinlang-key-card small,
.yinlang-key-card span {
  position: relative;
  z-index: 1;
}
.yinlang-key-card strong {
  color: #fff;
  font-family: var(--sr-font-mono);
  text-shadow: 0 0 18px rgba(97, 247, 255, 0.28);
}
.yinlang-key-card small {
  color: rgba(244, 248, 255, 0.76);
}
.yinlang-bottom-rail {
  position: relative;
  margin-bottom: 14px;
}
.yinlang-bottom-rail::before {
  content: "";
  position: absolute;
  inset: -5px 18px auto;
  height: 4px;
  background: var(--yl-gradient-arcade-bottom-rail);
  filter: drop-shadow(0 0 14px rgba(115, 251, 255, 0.24));
  pointer-events: none;
}
.yinlang-bottom-rail .base-card {
  border-color: rgba(115, 251, 255, 0.26);
  background:
    linear-gradient(145deg, rgba(244, 248, 255, 0.1), rgba(97, 247, 255, 0.06) 42%, rgba(255, 107, 214, 0.08)),
    rgba(10, 16, 36, 0.82);
}
.yinlang-query-dock {
  align-items: start;
  border-color: rgba(255, 115, 220, 0.38);
  background:
    linear-gradient(90deg, rgba(244, 248, 255, 0.12), rgba(255, 115, 220, 0.08) 24%, rgba(97, 247, 255, 0.08) 100%),
    rgba(5, 7, 19, 0.9);
  box-shadow: var(--sr-shadow-panel), 0 0 32px rgba(255, 107, 214, 0.08);
}
.yinlang-query-dock h2,
.yinlang-scan-panel h2 {
  font-family: var(--yl-font-pixel-display);
  letter-spacing: 0.01em;
}
.yinlang-query-dock input {
  border-color: rgba(115, 251, 255, 0.32);
  background: rgba(2, 3, 10, 0.72);
}
.yinlang-bottom-rail .copy-btn {
  position: relative;
  overflow: hidden;
}
.yinlang-bottom-rail .copy-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(244, 248, 255, 0.32), transparent);
  transition: transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
}
.yinlang-bottom-rail .copy-btn:hover::after {
  transform: translateX(120%) skewX(-24deg);
}
.yinlang-reward-rail {
  align-items: stretch;
}
.yinlang-reward-rail .metric-card {
  min-height: 114px;
  overflow: hidden;
  border-color: rgba(244, 248, 255, 0.18);
  background:
    radial-gradient(circle at 90% 18%, rgba(97, 247, 255, 0.18), transparent 30%),
    linear-gradient(160deg, rgba(244, 248, 255, 0.1), rgba(97, 247, 255, 0.06), rgba(255, 107, 214, 0.12)),
    rgba(5, 7, 19, 0.84);
}
.yinlang-reward-rail .metric-card.highlight {
  border-color: rgba(114, 255, 215, 0.44);
  box-shadow: 0 0 26px rgba(114, 255, 215, 0.08), var(--sr-shadow-panel);
}
.yinlang-reward-rail .metric-card strong {
  color: #fff;
  font-family: var(--sr-font-mono);
  text-shadow: 0 0 16px rgba(97, 247, 255, 0.2);
}
.yinlang-reward-rail .metric-card::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(244, 248, 255, 0.2);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, rgba(244, 248, 255, 0.72), rgba(97, 247, 255, 0.22) 32%, rgba(255, 107, 214, 0.1) 64%, transparent 73%);
  opacity: 0.62;
}
.yinlang-scan-panel {
  overflow: hidden;
  border-color: rgba(115, 251, 255, 0.28);
  background:
    var(--yl-gradient-scan-panel),
    rgba(5, 7, 19, 0.86);
}
.yinlang-scan-panel .usage-table-wrap {
  border-color: rgba(115, 251, 255, 0.18);
  background:
    repeating-linear-gradient(180deg, rgba(244, 248, 255, 0.035) 0 1px, transparent 1px 8px),
    rgba(3, 8, 20, 0.72);
}
.yinlang-scan-panel .usage-table th {
  color: #edfbff;
  background: rgba(97, 247, 255, 0.075);
}

/* SR reference redraw pass: poster stage, left stamps, top badge, bottom-right query dock. */
.yinlang-hero-stage {
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
  align-items: stretch;
  min-height: 292px;
  padding: 14px 16px 40px;
  border: 1px solid rgba(244, 248, 255, 0.22);
  background:
    var(--yl-pattern-vertical-light),
    var(--yl-gradient-sr-horizon-rail),
    var(--yl-gradient-sr-cloud-stage);
  clip-path: var(--hud-clip-md);
  box-shadow: var(--yl-shadow-sr-poster-blast), var(--sr-shadow-panel);
  overflow: hidden;
}
.yinlang-hero-stage::before,
.yinlang-hero-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.yinlang-hero-stage::before {
  inset-block-start: 4%;
  inset-inline-start: -8%;
  width: 72%;
  height: 24%;
  z-index: -1;
  transform: rotate(-15deg);
  background: var(--yl-gradient-sr-diagonal-trail);
  filter: drop-shadow(0 0 38px rgba(244, 248, 255, 0.32));
  opacity: 0.78;
}
.yinlang-hero-stage::after {
  inset: 10px;
  z-index: 0;
  border: 1px solid rgba(244, 248, 255, 0.16);
  clip-path: var(--hud-clip-md);
}
.yinlang-story-terminal,
.yinlang-key-card {
  z-index: 1;
}
.yinlang-stage-label {
  width: fit-content;
  margin: 0 0 8px;
  padding: 4px 9px;
  border: 1px solid rgba(115, 251, 255, 0.32);
  color: rgba(244, 248, 255, 0.86);
  background: rgba(5, 7, 19, 0.28);
  clip-path: var(--hud-clip-sm);
  font-family: var(--sr-font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.yinlang-story-terminal {
  display: flex;
  flex-direction: column;
  grid-row: 1;
  align-self: stretch;
  min-height: 236px;
  padding: 18px 20px 16px;
  background:
    var(--yl-pattern-halftone),
    linear-gradient(180deg, rgba(31, 29, 112, 0.9), rgba(8, 14, 48, 0.84));
}
.yinlang-story-terminal h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 0.9;
}
.yinlang-story-terminal .ops-vitals {
  margin-top: 10px;
  gap: 7px;
}
.yinlang-story-terminal .ops-vital {
  gap: 7px;
  padding: 8px 10px;
}
.yinlang-story-terminal .heart-pressure-icon {
  width: 48px;
  height: 48px;
}
.yinlang-story-terminal .heart-pressure-icon svg {
  width: 45px;
  height: 45px;
}
.yinlang-key-card {
  grid-row: 1;
  align-self: start;
  align-content: center;
  justify-items: start;
  gap: 10px;
  width: 100%;
  min-height: 196px;
  padding: 18px;
  transform: none;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.5), transparent 18%),
    var(--yl-material-card-prism),
    linear-gradient(145deg, rgba(42, 39, 130, 0.98), rgba(86, 52, 255, 0.92) 58%, rgba(255, 115, 220, 0.36));
  box-shadow: 0 20px 64px rgba(18, 12, 78, 0.32), inset 0 0 0 1px rgba(244, 248, 255, 0.16);
}
.yinlang-key-card::after {
  top: 10px;
  right: 12px;
  font-size: 44px;
}
.yinlang-query-dock {
  width: min(1120px, calc(100% - 52px));
  margin: -38px auto 14px;
  z-index: 4;
  padding: 14px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border-color: rgba(255, 115, 220, 0.52);
  background:
    linear-gradient(90deg, rgba(244, 248, 255, 0.16), rgba(255, 115, 220, 0.1) 26%, rgba(97, 247, 255, 0.1) 100%),
    var(--yl-gradient-sr-dock),
    rgba(5, 7, 19, 0.92);
  box-shadow: 0 24px 80px rgba(2, 3, 10, 0.42), 0 0 34px rgba(255, 107, 214, 0.18), inset 0 0 0 1px rgba(244, 248, 255, 0.1);
}
.yinlang-query-dock::before {
  inset: 6px;
  border-color: rgba(244, 248, 255, 0.2);
}
.yinlang-query-dock h2 {
  margin-bottom: 4px;
  font-size: 19px;
}
.yinlang-query-dock .muted {
  margin: 0;
  color: rgba(244, 248, 255, 0.76);
}
.yinlang-bottom-rail {
  margin-top: 0;
}
.yinlang-reward-rail {
  margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@keyframes hud-starfield-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-24px, 16px, 0); }
}
@keyframes expiry-urgent-pulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(255, 104, 125, 0); filter: brightness(1); }
  38% { transform: translateY(-2px) scale(1.045); box-shadow: 0 0 18px rgba(255, 104, 125, 0.34); filter: brightness(1.15); }
  68% { transform: translateY(1px) scale(0.985); box-shadow: 0 0 8px rgba(255, 104, 125, 0.18); filter: brightness(0.98); }
}
@keyframes expiry-permanent-shimmer {
  0% { transform: translateX(-42%) skewX(-10deg); opacity: 0; }
  28% { opacity: 0; }
  48% { opacity: 1; }
  78%, 100% { transform: translateX(42%) skewX(-10deg); opacity: 0; }
}
@keyframes expiry-permanent-text-glow {
  0%, 100% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 10px rgba(255, 215, 138, 0.28), 0 0 20px rgba(255, 184, 77, 0.16); }
  50% { transform: scale(1.025); filter: brightness(1.28); text-shadow: 0 0 16px rgba(255, 241, 196, 0.68), 0 0 32px rgba(255, 184, 77, 0.42); }
}
@keyframes expiry-permanent-frame-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.18), 0 0 14px rgba(255, 215, 138, 0.1); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 241, 196, 0.26), 0 0 24px rgba(255, 215, 138, 0.28); }
}
@keyframes heart-pressure-beat {
  0%, 100% { transform: scale(1); }
  32% { transform: scale(1.08); }
  58% { transform: scale(0.97); }
}
@keyframes heart-liquid-shimmer {
  0%, 100% { opacity: 0.58; filter: brightness(0.96); }
  50% { opacity: 0.96; filter: brightness(1.22); }
}
@keyframes heart-liquid-drift {
  0%, 100% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
}
@keyframes heart-charge-float {
  0%, 100% { transform: translateY(7px) scale(0.74); opacity: 0.28; }
  35% { opacity: 0.96; }
  70% { transform: translateY(-8px) scale(1.08); opacity: 0.46; }
}
@keyframes heart-electric-flicker {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 7px rgba(255, 215, 138, 0.42)); }
  42% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 241, 196, 0.72)); }
  57% { opacity: 0.72; }
}
@keyframes heart-circuit-pulse {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.36; }
  50% { stroke-dashoffset: -16; opacity: 0.82; }
}
@keyframes fatigue-critical-flash {
  0%, 100% { opacity: 1; filter: brightness(1); }
  45% { opacity: 0.72; filter: brightness(1.18); }
  65% { opacity: 0.9; filter: brightness(1.04); }
}
@media (max-width: 1050px) {
  .hero, .query-panel, .base-grid, .yinlang-hero-stage, .yinlang-query-dock { grid-template-columns: 1fr; }
  .query-panel {
    grid-template-areas:
      "lead"
      "key"
      "control";
  }
  .yinlang-hero-stage { grid-template-rows: none; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #summaryCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yinlang-hero-stage { min-height: auto; padding: 14px 14px 34px; }
  .yinlang-story-terminal,
  .yinlang-key-card { grid-row: auto; }
  .yinlang-key-card { min-height: 178px; transform: none; }
  .yinlang-query-dock { width: auto; margin: -24px 12px 12px; }
  .yinlang-portal::before { height: 520px; }
}
@media (max-width: 680px) {
  :root {
    --portal-font-size: 12.5px;
    --portal-display-size: clamp(24px, 8vw, 30px);
    --portal-panel-pad: 12px;
  }
  .shell { width: min(100% - 16px, 1500px); padding-top: 12px; }
  .yinlang-portal { padding: 2px; }
  .yinlang-portal::before { inset-inline: -10px; height: 620px; }
  .yinlang-portal::after { inset-block-start: 360px; }
  .yinlang-stage-decor { display: none; }
  body.is-home-gated .shell { width: 100% !important; max-width: 100% !important; padding: 0; }
  .hero, .query-panel, .base-grid { grid-template-columns: 1fr; }
  .query-panel {
    grid-template-areas:
      "lead"
      "key"
      "control";
  }
  .yinlang-hero-stage { padding: 10px 10px 22px; gap: 10px; }
  .yinlang-hero-stage::before { width: 110%; height: 18%; inset-block-start: 4%; opacity: 0.5; }
  .yinlang-hero-stage::after { inset: 6px; }
  .yinlang-stage-label { font-size: 9px; letter-spacing: 0.08em; }
  .yinlang-story-terminal { padding: 16px 14px 18px; min-height: auto; }
  .yinlang-story-terminal h1 { font-size: clamp(30px, 13vw, 44px); }
  .yinlang-key-card { min-height: 150px; padding: 16px; }
  .yinlang-key-card::after { font-size: 52px; }
  .yinlang-query-dock { width: auto; margin: -10px 4px 10px; padding: 12px; }
  .hero-copy, .hero-card, .panel { padding: 12px; }
  .hero-copy { min-height: auto; }
  .hero-kicker { margin-bottom: 10px; }
  .ops-vitals { grid-template-columns: 1fr; width: 100%; }
  .ops-vital-heart { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .fatigue-head { align-items: stretch; flex-direction: column; }
  .fatigue-score { font-size: 16px; }
  h2 { font-size: 16px; }
  .model-price-panel-head { align-items: stretch; }
  .model-price-hero-panel { padding: 16px 14px 14px; }
  .model-price-panel-head h2 { font-size: 24px; line-height: 1.05; }
  .model-price-panel-head .muted { font-size: 13px; }
  .model-price-group-switcher,
  .model-price-cards,
  .model-price-card-grid { grid-template-columns: 1fr; }
  .model-price-group-switcher { display: grid; }
  .model-price-group-tab { width: 100%; justify-content: flex-start; }
  .model-price-readonly-summary { gap: 6px 10px; }
  .model-price-readonly-summary strong { font-size: 18px; }
  .model-price-readonly-summary small { font-size: 13px; }
  .model-price-card-head strong { font-size: 22px; }
  .model-price-line strong { font-size: 17px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #summaryCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { padding: 11px; }
  .metric-card strong { font-size: 18px; }
  .actions, .pager, .section-head { display: grid; gap: 8px; }
  .pager { justify-content: stretch; }
  .pager > * { width: 100%; }
  .base-card { grid-template-columns: 1fr; padding-right: 13px; }
  .base-card code { grid-column: 1; grid-row: auto; }
  .copy-btn { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .usage-table-wrap { overflow: visible; border: 0; background: transparent; }
  .usage-table { min-width: 0; display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 10px; }
  .usage-summary-row { display: block; border: 1px solid var(--portal-line); background: rgba(8, 15, 30, 0.82); clip-path: var(--hud-clip-sm); }
  .usage-summary-row td, .usage-detail-row td { display: block; padding: 8px 10px; border-bottom: 1px solid rgba(217, 229, 255, 0.075); }
  .usage-summary-row td:last-child { border-bottom: 0; }
  .usage-summary-row td::before, .usage-detail-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--sr-color-success-400);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .usage-summary-row td:first-child strong { display: inline-block; margin-top: 4px; }
  .usage-pricing-summary { min-width: 0; }
  .usage-pricing-summary .primary { font-size: 12.5px; }
  .usage-detail-row { display: none; }
  .usage-detail-row.expanded { display: block; }
  .usage-detail-row td { background: rgba(217, 229, 255, 0.06); }
  .usage-detail-panel { padding: 10px 12px; }
  .usage-detail-item { grid-template-columns: 1fr; gap: 4px; }
  .usage-detail-label { text-align: left; }
  .usage-detail-value { line-height: 1.45; }
}

#portalShell[hidden],
#homeGate[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   GATE PAGE – original high-saturation game-event design language
   ═══════════════════════════════════════════════════════════════ */
.invite-gate-shell {
  --gate-deep: #16113c;
  --gate-mid: #3b3df4;
  --gate-surface: #1e164d;
  --gate-gold: #00f5ff;
  --gate-gold-light: #5cfafe;
  --gate-lavender: #ff3eb0;
  --gate-ice: #ffffff;
  --gate-panel-bg: rgba(26, 19, 69, 0.9);
  --gate-border-gold: #00f5ff;
  --gate-border-lavender: #ff3eb0;
  --gate-border-white: #ffffff;
  --gate-glow-gold: rgba(0, 245, 255, 0.4);
  --gate-glow-pink: rgba(255, 62, 176, 0.4);
  --gate-glow-blue: rgba(0, 245, 255, 0.3);
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 24px) 16px;
  margin: 0;
  overflow: hidden;
  background-color: #16113c;
  background:
    radial-gradient(circle at 15% 8%, rgba(0, 245, 255, 0.15), transparent 32%),
    radial-gradient(circle at 85% 85%, rgba(255, 62, 176, 0.15), transparent 34%),
    radial-gradient(circle at 55% 38%, rgba(97, 247, 255, 0.22), transparent 46%),
    radial-gradient(ellipse at 50% 100%, rgba(22, 17, 60, 0.6), transparent 55%),
    linear-gradient(160deg, var(--gate-deep) 0%, var(--gate-mid) 45%, var(--gate-surface) 100%);
  animation: gate-bg-breathe 12s ease-in-out infinite;
}
.invite-gate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
.invite-gate-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Stars/particles in SVG */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><circle cx='30' cy='40' r='1.2' fill='rgba(0, 245, 255, 0.45)'/><circle cx='140' cy='80' r='0.8' fill='rgba(255, 62, 176, 0.35)'/><circle cx='80' cy='180' r='1' fill='rgba(0, 245, 255, 0.3)'/><circle cx='200' cy='150' r='1.5' fill='rgba(255, 62, 176, 0.45)'/></svg>"),
    /* Grid lines in SVG */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><line x1='0' y1='0' x2='80' y2='0' stroke='rgba(0, 245, 255, 0.08)' stroke-width='1'/><line x1='0' y1='0' x2='0' y2='80' stroke='rgba(0, 245, 255, 0.08)' stroke-width='1'/></svg>");
  background-position: 0 0, 0 0;
  background-size: 240px 240px, 80px 80px;
  opacity: 0.45;
  animation: gate-stars-drift 45s linear infinite;
}
.invite-gate-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Tech circuits SVG paths */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='rgba(0, 245, 255, 0.16)' stroke-width='1.5'><path d='M0 50 H100 L130 80 H220 L240 100 H300'/><path d='M50 300 V220 L80 190 H150 L180 160 V0'/><circle cx='100' cy='50' r='3' fill='rgba(0, 245, 255, 0.4)'/><circle cx='220' cy='80' r='3' fill='rgba(0, 245, 255, 0.4)'/><circle cx='80' cy='190' r='3' fill='rgba(0, 245, 255, 0.4)'/></svg>");
  background-size: 300px 300px;
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: gate-halo-pulse 8s ease-in-out infinite;
}

/* 场景容器 */
.invite-gate-scene {
  position: relative;
  inset: 0;
  pointer-events: none;
}

.code-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.invite-gate-scene {
  inset: 0;
  overflow: visible;
}

/* 新增代码流列 */

/* col-e: 左上偏左，最短，淡蓝，快速闪烁 */
.invite-gate-codedata-col-col-e {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(97, 247, 255, 0.42);
  text-shadow: 0 0 3px rgba(97, 247, 255, 0.2);
  -webkit-text-fill-color: rgba(97, 247, 255, 0.42);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
  animation: col-e-move 7s ease-in-out infinite, col-e-flicker 3.5s step-end infinite;
  animation-delay: -1s, -0.8s;
}
.invite-gate-codedata-col-col-e::before {
  content:
    "if(scope)\n"
    "  relay_connect\n"
    "    (HOST);\n"
    "crypto.subtle\n"
    "  .importKey(\n"
    "    format,\n"
    "    key);\n"
    "0x1f 0x3a\n"
    "0x55 0xbf\n"
    "x-relay: true\n"
    "x-cf-ray: 1a2b\n";
}

/* col-f: 右上偏上，中等，薰衣草，慢闪 */
.invite-gate-codedata-col-col-f {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(231, 222, 255, 0.4);
  text-shadow: 0 0 3px rgba(231, 222, 255, 0.18);
  -webkit-text-fill-color: rgba(231, 222, 255, 0.4);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 45%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 45%, transparent 95%);
  animation: col-f-move 13s ease-in-out infinite, col-f-flicker 7s step-end infinite;
  animation-delay: -4s, -2s;
}
.invite-gate-codedata-col-col-f::before {
  content:
    "class Relay\n"
    "  extends\n"
    "  Worker {\n"
    "  handle(r) {\n"
    "    const tk\n"
    "      = this.ctx\n"
    "        .env\n"
    "        .get(\n"
    "          'TOKEN');\n"
    "    return this\n"
    "      .fetch(r);\n"
    "  }\n"
    "}\n"
    "void init_stack\n"
    "  (void) {\n"
    "  epoll_ctl(\n"
    "    epfd,\n"
    "    EPOLL_CTL_ADD,\n"
    "    fd, &ev);\n"
    "  listen(fd,128)\n"
    "  bind(addr)\n"
    "  setsockopt\n"
    "    (fd,opt)\n"
    "    ← EADDRINUSE\n";
}

/* col-g: 左下偏下，最短，金色，极快闪烁 */
.invite-gate-codedata-col-col-g {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 7.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 1;
  color: rgba(253, 211, 110, 0.35);
  text-shadow: 0 0 2px rgba(253, 211, 110, 0.12);
  -webkit-text-fill-color: rgba(253, 211, 110, 0.35);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 40%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 40%, transparent 80%);
  animation: col-g-move 6s ease-in-out infinite, col-g-flicker 2.5s step-end infinite;
  animation-delay: -0.5s, -1s;
}
.invite-gate-codedata-col-col-g::before {
  content:
    "import os\n"
    "from cwd import\n"
    "  resolve\n"
    "try:\n"
    "  await\n"
    "    connect()\n"
    "except:\n"
    "  pass\n"
    "v1.0.0\n"
    "GET /api\n"
    "200 8ms\n"
    "x-cf-wrk\n"
    ": cb7e98\n"
    "OK\n"
    "✓\n";
}

/* col-h: 右下偏下，最长，金色深调 */
.invite-gate-codedata-col-col-h {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 8.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(255, 184, 108, 0.48);
  text-shadow: 0 0 4px rgba(255, 184, 108, 0.22);
  -webkit-text-fill-color: rgba(255, 184, 108, 0.48);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 58%, transparent 100%);
  animation: col-h-move 10s ease-in-out infinite, col-h-flicker 5s step-end infinite;
  animation-delay: -5s, -3s;
}
.invite-gate-codedata-col-col-h::before {
  content:
    "# relay / vars\n"
    "worker:\n"
    "  name: relay-api\n"
    "  env: production\n"
    "  routes:\n"
    "    - pattern: /\n"
    "      script: wrangler\n"
    "        pages deploy\n"
    "        --project-name\n"
    "          relay-api-sylvia\n"
    "        ./public\n"
    "  bindings:\n"
    "    - name: CF_ACCOUNT_ID\n"
    "vars:\n"
    "  API_KEY: sk_live\n"
    "  DOMAIN: relay.cf\n"
    "    .workers.dev\n"
    "  VERSION: cb7e985f\n"
    "  UPTIME: 99.97%\n"
    "  LAST_DEPLOY:\n"
    "    2026-05-23\n"
    "  NODE_ENV: prod\n"
    "# ✓ all green\n";
}


/* ── 新增列 keyframes ── */

@keyframes col-e-move {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-90px); }
}
@keyframes col-e-flicker {
  0%, 100% { opacity: 0; }
  8%       { opacity: 0.7; }
  16%      { opacity: 0.15; }
  25%      { opacity: 0.5; }
  34%      { opacity: 0; }
  50%      { opacity: 0.6; }
  66%      { opacity: 0.1; }
  80%      { opacity: 0.55; }
  92%      { opacity: 0; }
}

@keyframes col-f-move {
  0%, 100% { transform: translateY(0); }
  42%      { transform: translateY(-140px); }
  70%      { transform: translateY(-210px); }
}
@keyframes col-f-flicker {
  0%, 100% { opacity: 0; }
  6%       { opacity: 0.5; }
  15%      { opacity: 0; }
  26%      { opacity: 0.38; }
  38%      { opacity: 0; }
  52%      { opacity: 0.42; }
  65%      { opacity: 0; }
  80%      { opacity: 0.58; }
  93%      { opacity: 0; }
}

@keyframes col-g-move {
  0%, 100% { transform: translateY(0); }
  55%      { transform: translateY(-65px); }
  80%      { transform: translateY(-95px); }
}
@keyframes col-g-flicker {
  0%, 100% { opacity: 0; }
  5%       { opacity: 0.45; }
  12%      { opacity: 0; }
  22%      { opacity: 0.3; }
  35%      { opacity: 0; }
  50%      { opacity: 0.4; }
  68%      { opacity: 0.08; }
  85%      { opacity: 0; }
}

@keyframes col-h-move {
  0%, 100% { transform: translateY(0); }
  38%      { transform: translateY(-180px); }
  65%      { transform: translateY(-260px); }
}
@keyframes col-h-flicker {
  0%, 100% { opacity: 0; }
  4%       { opacity: 0.6; }
  11%      { opacity: 0.1; }
  20%      { opacity: 0.45; }
  30%      { opacity: 0; }
  42%      { opacity: 0.38; }
  55%      { opacity: 0; }
  70%      { opacity: 0.55; }
  84%      { opacity: 0.12; }
  95%      { opacity: 0.48; }
}

/* ══
   电子代码流光柱 — HSR 深空数据流风格
   透明 · 像素化 · 上下随机漂移 · 随机闪烁
   ═══════════════════════════════════════════════ */

/* ── 上半部分 ── */

/* 左上代码流 */
.invite-gate-codedata-col-col-a {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", "Consolas", monospace;
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
  color: rgba(97, 247, 255, 0.72);
  text-shadow: 0 0 6px rgba(97, 247, 255, 0.4);
  -webkit-text-fill-color: rgba(97, 247, 255, 0.72);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 60%, transparent 100%);
  animation:
    col-a-move 14s ease-in-out infinite,
    col-a-flicker 4s step-end infinite;
  animation-delay: 0s, 0s;
}
.invite-gate-codedata-col-col-a::before {
  content:
    "// [C] void relay_fd()\n"
    "// ─ relay/worker ─\n"
    "{\n"
    "  p->fd = open(\n"
    "    \"/dev/urandom\",\n"
    "    O_RDONLY);\n"
    "  void *buf = mmap(\n"
    "    NULL, 4096,\n"
    "    PROT_READ,\n"
    "    MAP_PRIVATE,\n"
    "    p->fd, 0);\n"
    "  return 0;\n"
    "}\n"
    "/* CF Worker */\n"
    "fetch('relay-api')\n"
    "  .then(async r => {\n"
    "    const res\n"
    "      = await r.json();\n"
    "    return res;\n"
    "  });\n"
    "0x1f 0x3a 0x55\n"
    "0xbf 0xc2 relay.cf\n"
    "  .workers.dev\n"
    "cf-ray: 8f3a1b\n"
    "  relay-api-sylvia\n"
    "x-relay: true\n"
    "x-forwarded-for\n"
    "  : [hidden]\n";
}

/* 右上代码流 */
.invite-gate-codedata-col-col-b {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(231, 222, 255, 0.6);
  text-shadow: 0 0 4px rgba(231, 222, 255, 0.3);
  -webkit-text-fill-color: rgba(231, 222, 255, 0.6);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  animation:
    col-b-move 11s ease-in-out infinite,
    col-b-flicker 5s step-end infinite;
  animation-delay: -3s, -1.5s;
}
.invite-gate-codedata-col-col-b::before {
  content:
    "// [TS] Relay extends Worker\n"
    "// ─ relay worker runtime ─\n"
    "handle(request) {\n"
    "  const token =\n"
    "    this.ctx.env\n"
    "      .get('TOKEN');\n"
    "  return this\n"
    "    .fetch(request);\n"
    "}\n"
    "/* upstream */\n"
    "connect(): void {\n"
    "  this.socket\n"
    "    .connect(\n"
    "      HOST, PORT);\n"
    "}\n"
    "[INFO] node: 8\n"
    "signal(SIGPIPE,\n"
    "  SIG_IGN);\n"
    "epoll_create1\n"
    "  (EPOLL_CLOEXEC)\n"
    "  → fd = 7\n"
    "setsockopt(fd,\n"
    "  SOL_SOCKET,\n"
    "  SO_REUSEADDR)\n"
    "listen(fd, 128)\n"
    "nginx/1.26 (cf)\n";
}

/* ── 下半部分 ── */

/* 左下代码流 */
.invite-gate-codedata-col-col-c {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", "Consolas", monospace;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(253, 211, 110, 0.6);
  text-shadow: 0 0 4px rgba(253, 211, 110, 0.25);
  -webkit-text-fill-color: rgba(253, 211, 110, 0.6);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
  animation:
    col-c-move 9s ease-in-out infinite,
    col-c-flicker 6s step-end infinite;
  animation-delay: -2s, -3s;
}
.invite-gate-codedata-col-col-c::before {
  content:
    "// [JS] Express + cf\n"
    "const express =\n"
    "  require('express');\n"
    "const Cloudflare\n"
    "  = require(\n"
    "    'cloudflare');\n"
    "\n"
    "async function\n"
    "verify_str(str) {\n"
    "  if (!str)\n"
    "    throw TypeError;\n"
    "  const cr =\n"
    "    str.trim();\n"
    "  return cr;\n"
    "}\n"
    "// wrangler pages\n"
    "wrangler pages deploy\n"
    "  ./public \\\n"
    "  --project-name\n"
    "  relay-api-sylvia\n"
    "Compiled Worker OK\n"
    "Uploaded: 1 file\n"
    "  (6 unchanged)\n"
    "Deploy complete\n"
    "relay.sylviamatoya\n"
    "  .workers.dev ✓\n"
    "cb7e985f live\n";
}

/* 右下代码流 */
.invite-gate-codedata-col-col-d {
  position: relative;
  margin: 10px;
  width: 200px;
  height: 120px;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 8.5px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 1;
  color: rgba(253, 211, 110, 0.5);
  text-shadow: 0 0 3px rgba(253, 211, 110, 0.15);
  -webkit-text-fill-color: rgba(253, 211, 110, 0.5);
  white-space: pre;
  overflow: hidden;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  animation:
    col-d-move 8s ease-in-out infinite,
    col-d-flicker 3.5s step-end infinite;
  animation-delay: -4s, -0.5s;
}
.invite-gate-codedata-col-col-d::before {
  content:
    "// import os\n"
    "import { cwd }\n"
    "  from 'os';\n"
    "import('./schema')\n"
    "  .then(mod => {\n"
    "    return mod\n"
    "      .default;\n"
    "  })\n"
    "try {\n"
    "  await resolve\n"
    "    (origin);\n"
    "} catch {}\n"
    "handshake_err;\n"
    "// v1.2.3\n"
    "YTowOnt9\n"
    "relay/v1/auth\n"
    "origin: cf-relay\n"
    "  .pages.dev ✓\n"
    "GET /api/v1/usage\n"
    "  200 OK 12ms\n"
    "x-ratelimit-limit\n"
    "  : 1000\n"
    "x-ratelimit-rem\n"
    "  : 998\n";
}

/* 对角光束穿透层 */
.invite-gate-beam {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Solid color neon beam strips in SVG */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect x='50' y='0' width='4' height='400' fill='rgba(255, 62, 176, 0.12)'/><rect x='280' y='0' width='8' height='400' fill='rgba(0, 245, 255, 0.12)'/><rect x='340' y='0' width='2' height='400' fill='rgba(253, 211, 110, 0.08)'/></svg>");
  background-size: 400px 400px;
  opacity: 1.0;
  animation: gate-beam-drift 20s linear infinite;
}

.invite-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(1180px, 100%);
  isolation: isolate;
  z-index: 10;
  animation: gate-panel-entrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.invite-hero-stage.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
  grid-template-rows: 1fr;
  gap: clamp(16px, 2.2vw, 24px);
  align-items: stretch;
  width: 100%;
  min-height: clamp(520px, 74vh, 720px);
  margin-bottom: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 2.5px solid #ac7cff;
  border-top-color: #fdd36e;
  border-left-color: #fdd36e;
  border-radius: 22px;
  border-radius: 0;
  background: #7d7ffc;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><circle cx='9' cy='9' r='2' fill='rgba(255, 255, 255, 0.3)'/></svg>");
  background-size: 18px 18px;
  /* test assertion compat: var(--yl-gradient-sr-aurora-stage) */
  clip-path: var(--hud-clip-md);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 32px rgba(253, 211, 110, 0.45),
    0 0 54px rgba(172, 124, 255, 0.4),
    0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.invite-hero-stage.hero::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  clip-path: var(--hud-clip-md);
  pointer-events: none;
}

.invite-key-art-stage.hero-copy,
.invite-hero-stage .invite-key-art-stage {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 360px;
  padding: clamp(16px, 2.5vw, 28px);
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent; /* Transparent parent to let glass elements float */
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none;
}

.invite-glass-back {
  position: absolute;
  inset: clamp(24px, 5vh, 56px) 4% 8% 8%;
  z-index: 1;
  border-radius: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(28, 13, 72, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: rotate(-11deg) translate(-10px, -5px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 25px rgba(0, 245, 255, 0.35),
    0 15px 35px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.invite-glass-front {
  position: absolute;
  inset: clamp(16px, 4vh, 44px) 2% 4% 4%;
  z-index: 3;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: rotate(-3.5deg) translate(8px, 12px);
  box-shadow:
    0 0 0 1.5px rgba(0, 245, 255, 0.35) inset,
    0 0 35px rgba(0, 245, 255, 0.5),
    0 20px 45px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  overflow: hidden;
}

.invite-glass-front::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.5px solid rgba(0, 245, 255, 0.65);
  border-radius: 14px;
  pointer-events: none;
}

.glass-reflection {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,0 25,0 5,100 0,100' fill='rgba(255,255,255,0.18)'/><polygon points='35,0 39,0 19,100 15,100' fill='rgba(255,255,255,0.1)'/></svg>");
  background-size: 100% 100%;
  pointer-events: none;
}

.invite-key-art-stage .yinlang-prism-burst,
.invite-key-art-stage .yinlang-energy-rail,
.invite-stage-poster {
  position: absolute;
  display: block;
  pointer-events: none;
}

.invite-key-art-stage .yinlang-prism-burst {
  inset: 4% -10% 8% -4%;
  z-index: 0;
  opacity: 0.7;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='2' fill='rgba(255, 62, 176, 0.22)'/><circle cx='12' cy='12' r='1.2' fill='rgba(0, 245, 255, 0.22)'/></svg>");
  background-size: 16px 16px;
  filter: none;
}

.invite-key-art-stage .yinlang-energy-rail {
  inset-inline: 6% 2%;
  inset-block-end: 6%;
  z-index: 0;
  height: 130px;
  opacity: 0.7;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'><line x1='0' y1='10' x2='80' y2='10' stroke='rgba(0, 245, 255, 0.45)' stroke-dasharray='10, 5' stroke-width='2'/></svg>");
  background-size: 80px 20px;
  filter: none;
}

.invite-stage-poster {
  inset: clamp(24px, 5vh, 56px) 4% 8% 8%;
  z-index: 2;
  transform: rotate(-7deg);
  min-height: 320px;
  overflow: visible;
  border: 5px solid #ffffff;
  border-bottom-width: 12px;
  background:
    url("./assets/home-gate-guest.png") 35% 20% / cover no-repeat,
    rgba(28, 13, 72, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 25px rgba(0, 245, 255, 0.5),
    0 0 50px rgba(255, 62, 176, 0.35),
    0 20px 50px rgba(0, 0, 0, 0.55);
  clip-path: polygon(3% 0, 100% 0, 97% 95%, 5% 100%, 0 8%);
}

.invite-stage-poster::before,
.invite-stage-poster::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.invite-stage-poster::before {
  inset: 14px;
  border: 2px solid rgba(0, 245, 255, 0.7);
  clip-path: inherit;
}

.invite-stage-poster::after {
  inset: 0;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='0.5' fill='rgba(0, 245, 255, 0.12)'/></svg>");
  background-size: 10px 10px;
  opacity: 0.4;
}

.invite-bubble {
  --invite-bubble-tone: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.72), transparent 0 18%);
  position: absolute;
  top: 13%;
  right: 12%;
  z-index: 10;
  min-width: 190px;
  max-width: min(330px, 72%);
  min-height: 68px;
  padding: 15px 18px 17px;
  border: 3px solid rgba(8, 5, 18, 0.86);
  border-radius: 28px 30px 24px 30px;
  background: #f7f4ff !important; /* Solid override to avoid gradients */
  background-position: 0 0, 3px 3px, 0 0;
  background-size: 7px 7px, 7px 7px, 100% 100%;
  color: #14091f;
  font-family: var(--sr-font-cjk);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  box-shadow:
    0 10px 0 rgba(8, 5, 18, 0.28),
    0 18px 42px rgba(8, 5, 18, 0.32),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  transform: rotate(-5deg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.invite-bubble[hidden] {
  display: none !important;
}

.invite-bubble::before,
.invite-bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.invite-bubble::before {
  left: 34px;
  bottom: -26px;
  width: 54px;
  height: 34px;
  background: rgba(8, 5, 18, 0.86);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

.invite-bubble::after {
  left: 38px;
  bottom: -18px;
  width: 42px;
  height: 26px;
  background: var(--invite-bubble-tone);
  background: #f7f4ff !important; /* Solid override to avoid gradients */
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

/* 终端语概况面板 */
.invite-terminal.hero-card,
.invite-hero-stage .invite-terminal {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 300px;
  padding: 24px 24px 20px;
  border: 2px solid #ac7cff;
  border-top-color: #fdd36e;
  border-left-color: #fdd36e;
  border-radius: 0;
  background: #1c0d48;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><rect width='4' height='6' fill='%23fdd36e'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><rect width='4' height='2' fill='rgba(0, 245, 255, 0.03)'/></svg>");
  background-repeat: no-repeat, repeat;
  background-position: top 10px center, top left;
  background-size: 48px 6px, 4px 4px;
  /* test compat: var(--yl-gradient-arcade-terminal) */
  box-shadow:
    0 0 32px rgba(172, 124, 255, 0.4),
    0 0 54px rgba(253, 211, 110, 0.25),
    0 22px 70px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  clip-path: var(--hud-clip-sm);
  overflow: hidden;
}

.invite-terminal::before {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  clip-path: inherit;
  z-index: 1;
}

.invite-terminal::after {
  content: "";
  position: absolute;
  inset: auto 20px 14px;
  height: 3px;
  border-radius: 999px;
  background: #fdd36e;
  box-shadow: 0 0 18px rgba(253, 211, 110, 0.8);
  pointer-events: none;
}

.invite-terminal .yinlang-stage-label {
  position: relative;
  z-index: 1;
  border-color: rgba(253, 211, 110, 0.4);
  background: rgba(14, 10, 42, 0.7);
  color: #fdd36e;
  text-shadow: 0 0 12px rgba(253, 211, 110, 0.6);
}

.invite-prompt-label,
.invite-terminal strong {
  position: relative;
  z-index: 1;
  display: block;
}

.invite-prompt-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(172, 124, 255, 0.5);
  background: rgba(14, 10, 42, 0.7);
  color: #ac7cff;
  font-family: var(--sr-font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(172, 124, 255, 0.6);
  transform: skewX(-6deg);
  box-shadow: 0 0 12px rgba(172, 124, 255, 0.15);
  width: fit-content;
}

.invite-terminal strong {
  margin: 0 auto;
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  background-clip: text; /* test compat: background-clip: text */
}

.invite-terminal strong .cyber-logotype {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.invite-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: 100%;
  justify-items: stretch;
}

.home-input-label {
  display: grid;
  gap: 6px;
  width: 100%;
  justify-items: stretch;
}

.home-input-label span {
  color: #ffffff;
  font-family: var(--sr-font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 0 10px rgba(253, 211, 110, 0.5);
}

.invite-form input,
.invite-form button {
  min-height: 44px;
}

.invite-form input {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #ac7cff;
  border-radius: 0;
  background: #1e1b4b;
  color: var(--portal-text);
  text-align: left;
  font-size: 14px;
  box-shadow: inset 0 0 12px rgba(172, 124, 255, 0.15);
  clip-path: var(--hud-clip-sm);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.invite-form input::placeholder {
  color: rgba(172, 124, 255, 0.35);
}

.invite-form input:focus {
  outline: none;
  border-color: #fdd36e;
  box-shadow:
    0 0 16px rgba(253, 211, 110, 0.5),
    inset 0 0 12px rgba(253, 211, 110, 0.25);
}

.invite-form button {
  position: relative;
  width: 100%;
  min-height: 48px;
  border-radius: 0;
  border: 2px solid #fdd36e;
  background: #fdd36e;
  color: #07103a;
  font-weight: 900;
  box-shadow:
    0 8px 24px rgba(253, 211, 110, 0.24),
    0 0 40px rgba(253, 211, 110, 0.15),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
  clip-path: var(--hud-clip-sm);
  overflow: hidden;
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.invite-form button::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: rgba(255, 255, 255, 0.25);
  transform: skewX(-25deg) translateX(-150%);
  animation: invite-button-sheen 4s ease-in-out infinite;
  pointer-events: none;
}

.invite-form button:hover {
  background: #ffe39e;
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(253, 211, 110, 0.45),
    0 0 50px rgba(253, 211, 110, 0.25),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5);
}

.invite-mobile-title,
.invite-answer-text {
  display: none;
}

.home-status {
  display: block;
  width: 100%;
  margin-top: -0.8cqh;
  padding: 10px 12px;
  border: 1px solid rgba(128, 232, 255, 0.42);
  border-radius: 10px;
  background: rgba(10, 22, 46, 0.88);
  color: rgba(235, 247, 255, 0.94);
  font-family: var(--sr-font-cjk);
  font-size: clamp(12px, 1.85cqh, 14px);
  font-weight: 700;
  line-height: 1.45;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 10px 24px rgba(5, 12, 28, 0.22);
}

.home-status[hidden] {
  display: none !important;
}

.home-status.error {
  border-color: rgba(255, 128, 148, 0.62);
  background:
    linear-gradient(180deg, rgba(79, 20, 35, 0.92), rgba(42, 14, 29, 0.90)),
    rgba(10, 22, 46, 0.9);
  color: #ffe8ee;
}

.home-status.warn {
  border-color: rgba(255, 214, 126, 0.62);
  background:
    linear-gradient(180deg, rgba(81, 57, 19, 0.9), rgba(42, 28, 12, 0.9)),
    rgba(10, 22, 46, 0.9);
  color: #fff3cd;
}

.home-status.info,
.home-status.success {
  border-color: rgba(128, 232, 255, 0.46);
  color: rgba(235, 247, 255, 0.94);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Responsive: invite-gate ── */
@media (max-width: 1050px) {
  .invite-stage {
    width: min(920px, 100%);
  }
  .invite-hero-stage {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  }
}

@media (max-width: 820px) {
  .invite-hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-bottom: clamp(28px, 5vh, 48px);
  }
  .invite-key-art-stage,
  .invite-terminal {
    grid-column: 1;
    grid-row: auto;
  }
  .invite-key-art-stage {
    min-height: 380px;
  }
  .invite-stage-poster {
    inset: 72px 4% 10% 3%;
    min-height: 280px;
    transform: rotate(-7deg);
  }
  .invite-glass-back {
    inset: 72px 4% 10% 3%;
    transform: rotate(-11deg) translate(-8px, -4px);
  }
  .invite-glass-front {
    inset: 60px 2% 6% 1%;
    transform: rotate(-3.5deg) translate(6px, 8px);
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    padding: 0;
    background:
      radial-gradient(circle at 16% 12%, rgba(0, 245, 255, 0.12), transparent 24%),
      radial-gradient(circle at 78% 10%, rgba(255, 62, 176, 0.1), transparent 21%),
      linear-gradient(180deg, #f8f9ff 0%, #eef2ff 53%, #8f8dff 54%, #4d54dd 70%, #2a2a7e 100%);
  }
  .invite-gate-canvas,
  .invite-gate-beam,
  .invite-gate-scene {
    display: none;
  }
  .invite-stage {
    width: 100%;
    min-height: 100svh;
    display: block;
    animation: none;
  }
  .invite-hero-stage.hero,
  .invite-hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    min-height: 100svh;
    padding: 20px 18px 28px;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    clip-path: none;
    overflow: visible;
    animation: none;
  }
  .invite-hero-stage.hero::after {
    display: none;
  }
  .invite-mobile-title {
    display: grid;
    order: 1;
    grid-column: 1;
    grid-row: auto;
    position: relative;
    z-index: 3;
    justify-items: center;
    gap: 6px;
    padding-top: 2px;
    color: #121d5a;
    text-align: center;
  }
  .invite-mobile-title span {
    display: none;
  }
  .invite-mobile-title strong {
    font-family: "Outfit", "Montserrat", var(--sr-font-body);
    font-size: clamp(28px, 9vw, 44px);
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #162055;
    opacity: 1;
  }
  .invite-mobile-title i {
    display: block;
    width: 118px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(170, 118, 255, 0.06), #a36cff 25%, #a36cff 75%, rgba(170, 118, 255, 0.06));
    box-shadow: 0 0 16px rgba(163, 108, 255, 0.25);
  }
  .invite-form {
    gap: 14px;
  }
  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage {
    order: 2;
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    justify-content: flex-start;
  }
  .invite-stage-poster {
    position: relative;
    inset: auto;
    min-height: 0;
    width: 100%;
    aspect-ratio: 1.62 / 1;
    border: 1px solid rgba(155, 176, 255, 0.38);
    border-radius: 24px;
    clip-path: none;
    transform: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
      url("./assets/home-gate-guest.png") center 26% / cover no-repeat,
      #11184a;
    box-shadow:
      0 10px 30px rgba(80, 90, 200, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.28) inset;
    overflow: hidden;
    opacity: 1;
  }
  .invite-stage-poster::before {
    inset: 0;
    border: 0;
    clip-path: none;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, transparent 24%, transparent 72%, rgba(255, 255, 255, 0.08) 100%);
  }
  .invite-stage-poster::after {
    inset: auto 0 0 0;
    height: 4px;
    opacity: 1;
    background: linear-gradient(90deg, rgba(175, 148, 255, 0.15), rgba(155, 115, 255, 0.9), rgba(175, 148, 255, 0.15));
  }
  .invite-glass-back,
  .invite-glass-front,
  .invite-key-art-stage .yinlang-prism-burst,
  .invite-key-art-stage .yinlang-energy-rail,
  .invite-bubble {
    display: none !important;
  }
  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    display: grid;
    gap: 16px;
    padding: 18px 16px 16px;
    border: 1px solid rgba(99, 118, 214, 0.42);
    border-top-color: rgba(133, 238, 255, 0.72);
    border-left-color: rgba(133, 238, 255, 0.72);
    border-radius: 24px;
    clip-path: none;
    background:
      linear-gradient(180deg, rgba(14, 22, 58, 0.985), rgba(12, 18, 49, 0.985)),
      #0d153d;
    box-shadow:
      0 18px 44px rgba(10, 18, 55, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    opacity: 1;
  }
  .invite-terminal::before {
    inset: 10px;
    border: 1px solid rgba(151, 171, 255, 0.12);
    clip-path: none;
  }
  .invite-terminal::after {
    display: none;
  }
  .invite-terminal .yinlang-stage-label {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(149, 239, 255, 0.86);
    font-size: 0;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-shadow: none;
  }
  .invite-terminal .yinlang-stage-label::after {
    content: "SERVICE TERMINAL";
    font-size: 11px;
    opacity: 1;
  }
  .invite-prompt-label {
    padding: 0;
    border: 0;
    background: none;
    transform: none;
    box-shadow: none;
    color: rgba(244, 248, 255, 0.94);
    font-family: var(--sr-font-cjk);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
  }
  .invite-terminal strong {
    max-width: none;
  }
  .invite-terminal strong .cyber-logotype {
    display: none;
  }
  .invite-terminal .invite-answer-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: 12px 18px;
    border: 1px solid rgba(94, 233, 255, 0.52);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(17, 27, 77, 0.98), rgba(16, 24, 66, 0.98)),
      #131c4f;
    color: #ffffff;
    font-family: var(--sr-font-cjk);
    font-size: clamp(22px, 6.6vw, 34px);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: none;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 0 1px rgba(111, 124, 255, 0.18);
    opacity: 1;
  }
  .home-input-label {
    gap: 10px;
  }
  .home-input-label span {
    color: rgba(244, 248, 255, 0.96);
    font-family: var(--sr-font-cjk);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    text-shadow: none;
  }
  .invite-form input {
    min-height: 66px;
    padding: 16px 18px;
    border: 1px solid rgba(144, 160, 232, 0.5);
    border-radius: 18px;
    clip-path: none;
    background: rgba(16, 25, 65, 0.96);
    color: rgba(244, 248, 255, 0.96);
    text-align: left;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    opacity: 1;
  }
  .invite-form input::placeholder {
    color: rgba(168, 177, 213, 0.62);
  }
  .invite-form button {
    min-height: 72px;
    border: 1px solid rgba(255, 221, 155, 0.88);
    border-radius: 18px;
    clip-path: none;
    background: linear-gradient(180deg, #ffe08a 0%, #ffd66b 100%);
    color: #10193f;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow:
      0 12px 28px rgba(255, 198, 79, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    opacity: 1;
  }
  .invite-form button::before {
    content: "→";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 700;
    color: rgba(16, 25, 63, 0.72);
  }
  .invite-form button::after {
    display: none;
  }
  .invite-gate-cube-e { display: none; }
  .invite-gate-shell::after {
    opacity: 0.2;
  }
  .invite-gate-platform {
    display: block;
    width: min(92vw, 560px);
    bottom: -14px;
    height: 88px;
    opacity: 0.6;
  }
}

.invite-gate-binary {
  position: absolute;
  top: -20%;
  bottom: -20%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 6px;
  font-family: var(--sr-font-mono);
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 900;
  color: rgba(97, 247, 255, 0.22);
  text-shadow: 0 0 8px rgba(97, 247, 255, 0.4);
  pointer-events: none;
  overflow: hidden;
  user-select: none;
  z-index: 1;
}

.invite-gate-binary-l {
  left: 2%;
  color: rgba(0, 245, 255, 0.35);
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.7);
  animation: binary-drift-down 22s linear infinite;
}

.invite-gate-binary-r {
  right: 2%;
  color: rgba(255, 62, 176, 0.35);
  text-shadow: 0 0 10px rgba(255, 62, 176, 0.7);
  animation: binary-drift-up 25s linear infinite;
}

@keyframes binary-drift-down {
  0% { transform: translateY(-5%); }
  100% { transform: translateY(5%); }
}

@keyframes binary-drift-up {
  0% { transform: translateY(5%); }
  100% { transform: translateY(-5%); }
}

.invite-gate-cube {
  position: absolute;
  border-radius: 4px;
  background: rgba(10, 6, 26, 0.72);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.1),
    0 0 24px rgba(0, 245, 255, 0.15);
  pointer-events: none;
  z-index: 1;
}

.invite-gate-cube::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.invite-gate-cube-a {
  top: 12%;
  left: 7%;
  width: 78px;
  height: 78px;
  border: 2px solid #00f5ff;
  box-shadow:
    0 0 32px rgba(0, 245, 255, 0.45),
    inset 0 0 15px rgba(0, 245, 255, 0.2);
  animation: gate-cube-a-move 18s ease-in-out infinite;
}

.invite-gate-cube-b {
  top: 18%;
  right: 9%;
  width: 50px;
  height: 50px;
  border: 2px solid #ff3eb0;
  box-shadow:
    0 0 24px rgba(255, 62, 176, 0.45),
    inset 0 0 10px rgba(255, 62, 176, 0.2);
  animation: gate-cube-b-move 14s ease-in-out -3s infinite;
}

.invite-gate-cube-c {
  bottom: 22%;
  left: 12%;
  width: 36px;
  height: 36px;
  border: 2.5px solid #00f5ff;
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.45),
    inset 0 0 8px rgba(0, 245, 255, 0.2);
  animation: gate-cube-c-move 12s ease-in-out -6s infinite;
}

.invite-gate-cube-d {
  bottom: 15%;
  right: 8%;
  width: 62px;
  height: 62px;
  border: 2.5px solid #ff3eb0;
  box-shadow:
    0 0 28px rgba(255, 62, 176, 0.45),
    inset 0 0 12px rgba(255, 62, 176, 0.2);
  animation: gate-cube-d-move 20s ease-in-out -2s infinite;
}

.invite-gate-cube-e {
  top: 42%;
  right: 4%;
  width: 26px;
  height: 26px;
  border: 1.5px solid #00f5ff;
  box-shadow:
    0 0 12px rgba(0, 245, 255, 0.35),
    inset 0 0 6px rgba(0, 245, 255, 0.15);
  animation: gate-cube-e-move 10s ease-in-out -8s infinite;
}

.invite-gate-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><circle cx='4' cy='4' r='1.5' fill='rgba(0, 245, 255, 0.3)'/></svg>");
  background-size: 8px 8px;
  border: 2px solid rgba(0, 245, 255, 0.55);
  box-shadow:
    0 0 24px rgba(0, 245, 255, 0.25),
    inset 0 0 16px rgba(0, 245, 255, 0.2);
  animation: gate-orb-breathe 6s ease-in-out infinite;
}

.invite-gate-orb-a {
  top: 22%;
  right: 14%;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='1.8' fill='rgba(255, 62, 176, 0.35)'/></svg>");
  background-size: 10px 10px;
  border-color: rgba(255, 62, 176, 0.6);
  box-shadow:
    0 0 30px rgba(255, 62, 176, 0.3),
    inset 0 0 20px rgba(255, 62, 176, 0.2);
}

.invite-gate-orb-b {
  bottom: 20%;
  left: 8%;
  width: 56px;
  height: 56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><circle cx='4' cy='4' r='1.2' fill='rgba(0, 245, 255, 0.25)'/></svg>");
  background-size: 8px 8px;
  border-color: rgba(0, 245, 255, 0.5);
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.25),
    inset 0 0 14px rgba(0, 245, 255, 0.15);
  animation-delay: -2.5s;
}

@media (prefers-reduced-motion: reduce) {
  .invite-gate-codedata-col,
  .invite-gate-shell,
  .invite-gate-shell::before,
  .invite-gate-shell::after,
  .invite-gate-binary,
  .invite-gate-orb,
  .invite-hero-stage::before,
  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage,
  .invite-stage {
    animation: none !important;
  }
  .invite-form button::after {
    animation: none;
  }
  .invite-form button:hover {
    transform: none;
  }
}

/* ── Keyframes: Gate Page Animations ── */

/* Background breathing */
@keyframes gate-bg-breathe {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.03) saturate(1.05); }
}

/* Star particles drift */
@keyframes gate-stars-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-90px, -90px); }
}

/* Halo pulse */
@keyframes gate-halo-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.02); }
}

/* 对光束呼吸 */
@keyframes gate-beam-breathe {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.015); }
}

/* ═══ 代码流 keyframes ═══ */

/* 漂移 — 各列距离不同 */
@keyframes col-a-move {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-200px); }
  70%      { transform: translateY(-280px); }
}
@keyframes col-b-move {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-160px); }
  72%      { transform: translateY(-240px); }
}
@keyframes col-c-move {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-140px) scale(1.02); }
  70%      { transform: translateY(-200px) scale(0.98); }
}
@keyframes col-d-move {
  0%, 100% { transform: translateY(0) scale(1); }
  45%      { transform: translateY(-110px) scale(1.01); }
  72%      { transform: translateY(-170px) scale(0.99); }
}

/* 闪电闪烁（step-end 伪随机感） */
@keyframes col-a-flicker {
  0%, 100% { opacity: 0; }
  3%  { opacity: 0.85; }
  7%  { opacity: 0.2; }
  13% { opacity: 0.7; }
  19% { opacity: 0.12; }
  25% { opacity: 0.55; }
  31% { opacity: 0; }
  45% { opacity: 0.65; }
  52% { opacity: 0.1; }
  60% { opacity: 0.5; }
  68% { opacity: 0; }
  80% { opacity: 0.75; }
  88% { opacity: 0.18; }
  96% { opacity: 0.6; }
}
@keyframes col-b-flicker {
  0%, 100% { opacity: 0; }
  5%  { opacity: 0.6; }
  12% { opacity: 0; }
  22% { opacity: 0.4; }
  32% { opacity: 0; }
  45% { opacity: 0.55; }
  54% { opacity: 0; }
  68% { opacity: 0.5; }
  78% { opacity: 0; }
  92% { opacity: 0.65; }
}
@keyframes col-c-flicker {
  0%, 100% { opacity: 0; }
  4%  { opacity: 0.65; }
  11% { opacity: 0.1; }
  20% { opacity: 0.5; }
  30% { opacity: 0; }
  40% { opacity: 0.4; }
  50% { opacity: 0; }
  65% { opacity: 0.55; }
  76% { opacity: 0.15; }
  87% { opacity: 0; }
}
@keyframes col-d-flicker {
  0%, 100% { opacity: 0; }
  6%  { opacity: 0.5; }
  15% { opacity: 0; }
  28% { opacity: 0.35; }
  40% { opacity: 0; }
  55% { opacity: 0.45; }
  68% { opacity: 0.08; }
  82% { opacity: 0; }
  94% { opacity: 0.55; }
}

/* 光束补全 keyframe */
@keyframes gate-beam-drift {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 100px 60px; }
}

/* Binary column glow */
@keyframes gate-binary-glow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.35; }
}

/* 合并浮动+旋转+呼吸的单一动画 */

@keyframes gate-cube-a-move {
  0%   { transform: rotate(-22deg) translate(0, 0) scale(1); opacity: 0.88; }
  25%  { transform: rotate(68deg) translate(14px, -24px) scale(1.06); opacity: 0.95; }
  50%  { transform: rotate(158deg) translate(-10px, -36px) scale(0.94); opacity: 0.82; }
  75%  { transform: rotate(248deg) translate(18px, -14px) scale(1.04); opacity: 0.92; }
  100% { transform: rotate(338deg) translate(0, 0) scale(1); opacity: 0.88; }
}

@keyframes gate-cube-b-move {
  0%   { transform: rotate(15deg) translate(0, 0) scale(1); opacity: 0.82; }
  25%  { transform: rotate(-72deg) translate(-16px, -28px) scale(1.08); opacity: 0.92; }
  50%  { transform: rotate(-165deg) translate(12px, -34px) scale(0.92); opacity: 0.75; }
  75%  { transform: rotate(-258deg) translate(-14px, -18px) scale(1.05); opacity: 0.88; }
  100% { transform: rotate(-345deg) translate(0, 0) scale(1); opacity: 0.82; }
}

@keyframes gate-cube-c-move {
  0%   { transform: rotate(42deg) translate(0, 0) scale(1); opacity: 0.78; }
  25%  { transform: rotate(132deg) translate(10px, -20px) scale(1.1); opacity: 0.9; }
  50%  { transform: rotate(222deg) translate(-8px, -28px) scale(0.88); opacity: 0.7; }
  75%  { transform: rotate(312deg) translate(12px, -12px) scale(1.06); opacity: 0.85; }
  100% { transform: rotate(402deg) translate(0, 0) scale(1); opacity: 0.78; }
}

@keyframes gate-cube-d-move {
  0%   { transform: rotate(-8deg) translate(0, 0) scale(1); opacity: 0.82; }
  25%  { transform: rotate(82deg) translate(-18px, -30px) scale(1.07); opacity: 0.92; }
  50%  { transform: rotate(172deg) translate(14px, -24px) scale(0.93); opacity: 0.76; }
  75%  { transform: rotate(262deg) translate(-12px, -16px) scale(1.05); opacity: 0.88; }
  100% { transform: rotate(352deg) translate(0, 0) scale(1); opacity: 0.82; }
}

@keyframes gate-cube-e-move {
  0%   { transform: rotate(55deg) translate(0, 0) scale(1); opacity: 0.68; }
  25%  { transform: rotate(145deg) translate(8px, -16px) scale(1.12); opacity: 0.85; }
  50%  { transform: rotate(235deg) translate(-6px, -22px) scale(0.86); opacity: 0.6; }
  75%  { transform: rotate(325deg) translate(10px, -8px) scale(1.08); opacity: 0.78; }
  100% { transform: rotate(415deg) translate(0, 0) scale(1); opacity: 0.68; }
}

/* Orb breathing */
@keyframes gate-orb-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.08); }
}

/* Panel entrance */
@keyframes gate-panel-entrance {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Border light flow */
@keyframes gate-border-flow {
  0% { opacity: 0.7; }
  25% { opacity: 0.85; }
  50% { opacity: 0.6; }
  75% { opacity: 0.8; }
  100% { opacity: 0.7; }
}

/* Poster micro-float */
@keyframes gate-poster-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Button sheen */
@keyframes invite-button-sheen {
  0%, 20% { transform: skewX(-25deg) translateX(-150%); }
  50% { transform: skewX(-25deg) translateX(280%); }
  100% { transform: skewX(-25deg) translateX(280%); }
}

/* Legacy compat */
@keyframes invite-matrix-glow {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.96; }
}

/* YinLang SR-aligned original redraw pass: high-saturation game-event stage, no external assets. */
:root {
  --yl-gradient-sr-aurora-stage: radial-gradient(circle at 58% 22%, rgba(244, 248, 255, 0.92), transparent 16%), radial-gradient(circle at 48% 38%, rgba(231, 222, 255, 0.25), transparent 30%), radial-gradient(circle at 77% 26%, rgba(253, 211, 110, 0.18), transparent 24%), linear-gradient(132deg, #100b42 0%, #263fd0 43%, #6f44ff 68%, #120a33 100%);
  --yl-gradient-sr-night-rail: linear-gradient(180deg, rgba(36, 58, 208, 0.18) 0%, rgba(71, 58, 167, 0.82) 56%, rgba(9, 13, 60, 0.98) 100%);
  --yl-gradient-sr-poster-glass: linear-gradient(145deg, rgba(244, 248, 255, 0.42), rgba(231, 222, 255, 0.15) 34%, rgba(253, 211, 110, 0.1) 70%, rgba(253, 211, 110, 0.14));
  --yl-gradient-sr-hero-line: linear-gradient(102deg, transparent 0%, var(--yl-color-sr-orbit-gold) 19%, rgba(244, 248, 255, 0.82) 42%, var(--yl-color-sr-lavender-mist) 68%, transparent 100%);
  --yl-gradient-sr-terminal-screen: linear-gradient(180deg, rgba(12, 16, 50, 0.82), rgba(6, 8, 28, 0.92));
  --yl-gradient-sr-deep-rail: radial-gradient(circle at 12% 0%, rgba(231, 222, 255, 0.15), transparent 22%), radial-gradient(circle at 78% 12%, rgba(253, 211, 110, 0.1), transparent 24%), linear-gradient(180deg, rgba(17, 22, 86, 0.96), rgba(7, 9, 42, 0.98));
}

.yinlang-portal {
  padding: 10px;
  background: transparent;
}
.yinlang-portal::before {
  inset: -18px 0 auto;
  height: 760px;
  border-color: rgba(244, 248, 255, 0.18);
  background: var(--yl-gradient-sr-cloud-stage);
  opacity: 1;
  box-shadow: 0 0 72px rgba(231, 222, 255, 0.15), inset 0 -170px 130px rgba(8, 9, 46, 0.58);
}
.yinlang-portal::after {
  inset-block-start: 548px;
  height: 310px;
  background: var(--yl-gradient-sr-deep-rail);
  filter: none;
  opacity: 1;
}
.yinlang-stage-decor {
  z-index: 0;
}
.yinlang-orb-a { top: 82px; right: 13%; width: 82px; height: 82px; opacity: 0.64; }
.yinlang-orb-b { top: 430px; left: 11%; width: 44px; height: 44px; opacity: 0.52; }
.yinlang-shard-a {
  top: 118px;
  left: 61%;
  width: 76px;
  height: 22px;
  transform: rotate(-18deg);
  opacity: 0.9;
  transition: transform var(--yl-motion-slow) var(--yl-ease-emphasis);
}
.yinlang-shard-a:hover {
  transform: rotate(-12deg) scale(1.1) translateY(-4px);
}
.yinlang-shard-b {
  top: 512px;
  right: 18%;
  width: 82px;
  height: 24px;
  transform: rotate(17deg);
  opacity: 0.76;
  transition: transform var(--yl-motion-slow) var(--yl-ease-emphasis);
}
.yinlang-shard-b:hover {
  transform: rotate(22deg) scale(1.1) translateY(-4px);
}
.yinlang-light-rail-a { left: 4%; height: 560px; opacity: 0.58; }
.yinlang-light-rail-b { right: 7%; height: 500px; opacity: 0.48; }

.yinlang-hero-stage {
  isolation: isolate;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.72fr);
  grid-template-rows: 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: stretch;
  min-height: clamp(520px, 74vh, 720px);
  margin-bottom: 0;
  padding: clamp(18px, 3vw, 34px) clamp(18px, 3vw, 36px) clamp(84px, 12vh, 120px);
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.yinlang-hero-stage::before {
  inset-block-start: 11%;
  inset-inline-start: -9%;
  z-index: 0;
  width: 78%;
  height: 20%;
  transform: rotate(-18deg);
  background: var(--yl-gradient-sr-hero-line);
  filter: drop-shadow(0 0 42px rgba(244, 248, 255, 0.3)) drop-shadow(0 0 30px rgba(253, 211, 110, 0.15));
  opacity: 0.9;
}
.yinlang-hero-stage::after {
  inset: 12px;
  z-index: 0;
  border-color: rgba(244, 248, 255, 0.14);
  background: linear-gradient(90deg, rgba(244, 248, 255, 0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(244, 248, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.75;
}

.yinlang-key-art-stage {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(22px, 4vw, 42px);
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.yinlang-key-art-stage::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, rgba(5, 7, 28, 0.55) 60%, rgba(5, 7, 28, 0.82) 100%);
  pointer-events: none;
  border-radius: 0 0 0 0;
}
.yinlang-prism-burst,
.yinlang-energy-rail,
.yinlang-stage-poster,
.yinlang-stage-poster > span {
  position: absolute;
  display: block;
  pointer-events: none;
}
.yinlang-prism-burst {
  inset: 2% -14% 5% -6%;
  z-index: 0;
  background:
    radial-gradient(circle at 58% 24%, rgba(244, 248, 255, 0.92), transparent 15%),
    radial-gradient(circle at 49% 39%, rgba(88, 255, 245, 0.38), transparent 28%),
    radial-gradient(circle at 74% 34%, rgba(255, 115, 220, 0.28), transparent 30%);
  filter: saturate(1.28);
}
.yinlang-energy-rail {
  inset-inline: 3% -6%;
  inset-block-end: 5%;
  z-index: 0;
  height: 150px;
  background: var(--yl-gradient-energy-platform);
  filter: saturate(1.35) drop-shadow(0 0 36px rgba(97, 247, 255, 0.26));
}
.yinlang-stage-poster {
  inset: clamp(24px, 5vh, 56px) 4% 8% 8%;
  z-index: 1;
  transform: rotate(-7deg);
  border: 5px solid rgba(244, 248, 255, 0.76);
  background: url("./assets/hsr-keyart.png") center/cover no-repeat;
  box-shadow: 0 28px 90px rgba(10, 8, 64, 0.42), 0 0 50px rgba(231, 222, 255, 0.18), 0 0 50px rgba(253, 211, 110, 0.12);
  clip-path: polygon(3% 0, 100% 0, 97% 95%, 5% 100%, 0 8%);
}
.yinlang-stage-poster::before,
.yinlang-stage-poster::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.yinlang-stage-poster::before {
  inset: 16px;
  border: 1.5px solid var(--yl-border-sr-cool);
  clip-path: inherit;
}
.yinlang-stage-poster::after {
  inset: 0;
  background: var(--yl-pattern-halftone);
  background-size: 12px 12px;
  opacity: 0.15;
}
.yinlang-stage-poster-card,
.yinlang-stage-poster-card-a,
.yinlang-stage-poster-card-b,
.yinlang-stage-poster-figure,
.yinlang-stage-poster-blade,
.yinlang-stage-poster-device {
  display: none !important;
}
.yinlang-hero-title-block {
  position: relative;
  z-index: 2;
  max-width: min(580px, 80%);
  padding: 0 0 0 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  margin-top: auto;
}
.yinlang-hero-title-block .yinlang-stage-label {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.yinlang-hero-title-block h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 10px;
  font-family: "Outfit", "Oswald", var(--sr-font-cjk);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(54px, 8.8vw, 102px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  z-index: 1;
  white-space: nowrap;
  overflow: visible;
}
.yinlang-hero-title-block h1 span {
  position: relative;
  z-index: 3;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 28%, var(--yl-color-sr-ice-cyan) 60%, var(--yl-color-cyan-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  padding-right: 40px;
}
.yinlang-hero-title-block h1::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-text-stroke: 10px #090a24;
  -webkit-text-fill-color: #090a24;
  white-space: nowrap;
}
.yinlang-hero-title-block h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-text-stroke: 10px #ff6bd6;
  -webkit-text-fill-color: #ff6bd6;
  transform: translate(6px, 6px);
  white-space: nowrap;
  filter: drop-shadow(0 0 10px rgba(255, 107, 214, 0.8));
}
.yinlang-hero-title-block .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(88, 255, 245, 0.5);
  background: rgba(9, 13, 60, 0.85);
  color: var(--yl-color-sr-neon-cyan);
  font-family: "Outfit", "Oswald", var(--sr-font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: 0 0 15px rgba(88, 255, 245, 0.35), inset 0 0 4px rgba(88, 255, 245, 0.2);
  transform: skewX(-10deg);
  margin: 0 0 6px;
}
.yinlang-hero-title-block .eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--yl-color-sr-neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--yl-color-sr-neon-cyan);
  margin-right: 2px;
}
.yinlang-hero-title-block .hero-kicker {
  max-width: 400px;
  color: rgba(244, 248, 255, 0.95);
  font-family: var(--sr-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  margin: 10px 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.yinlang-service-terminal {
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: 12px;
  min-height: 420px;
  padding: 22px;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background: var(--yl-gradient-sr-terminal-screen), rgba(8, 13, 52, 0.86);
  box-shadow: 0 22px 70px rgba(4, 5, 36, 0.44), 0 0 32px rgba(253, 211, 110, 0.12), inset 0 0 0 1px rgba(244, 248, 255, 0.16);
  transform: none;
}
.yinlang-service-terminal::after {
  content: "STATUS";
  top: 18px;
  right: 18px;
  color: rgba(244, 248, 255, 0.08);
  font-size: 42px;
  letter-spacing: -0.06em;
}
.yinlang-service-terminal > span {
  color: var(--yl-color-sr-neon-cyan);
  font-family: var(--sr-font-mono);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.yinlang-service-terminal > strong {
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(88, 255, 245, 0.3);
}
.yinlang-service-terminal > small {
  color: rgba(244, 248, 255, 0.76);
}
.yinlang-service-terminal .ops-vitals {
  grid-template-columns: 1fr;
  width: 100%;
  margin-top: 6px;
}
.yinlang-service-terminal .ops-vital {
  border-color: rgba(244, 248, 255, 0.22);
  background: rgba(5, 7, 28, 0.58);
}
.yinlang-service-terminal .heart-pressure-icon { width: 50px; height: 50px; }
.yinlang-service-terminal .heart-pressure-icon svg { width: 46px; height: 46px; }

.yinlang-query-dock {
  z-index: 8;
}
.yinlang-bottom-rail,
.yinlang-reward-rail,
.yinlang-scan-panel {
  position: relative;
  z-index: 3;
}
.yinlang-bottom-rail .base-card,
.yinlang-reward-rail .metric-card,
.yinlang-scan-panel {
  background:
    var(--yl-gradient-scan-panel),
    rgba(5, 8, 38, 0.95);
  border-color: var(--yl-border-sr-cool);
}

@media (max-width: 1050px) {
  .yinlang-hero-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 78px;
  }
  .yinlang-key-art-stage,
  .yinlang-service-terminal {
    grid-column: 1;
    grid-row: auto;
  }
  .yinlang-key-art-stage { min-height: 430px; }
  .yinlang-service-terminal { min-height: auto; }
  .yinlang-query-dock { width: auto; margin: 12px 12px 24px; }
}
@media (max-width: 680px) {
  .yinlang-portal::before { height: 740px; }
  .yinlang-portal::after { inset-block-start: 560px; }
  .yinlang-hero-stage {
    padding: 10px 10px 64px;
    gap: 10px;
  }
  .yinlang-key-art-stage {
    min-height: 350px;
    padding: 14px;
  }
  .yinlang-stage-poster {
    inset: 78px 4% 9% 3%;
  }
  .yinlang-hero-title-block { max-width: 95%; }
  .yinlang-hero-title-block h1 { font-size: clamp(40px, 14vw, 64px); }
  .yinlang-hero-title-block h1 span { padding-right: 25px; }
  .yinlang-hero-title-block h1::before { -webkit-text-stroke: 6px #090a24; }
  .yinlang-hero-title-block h1::after { -webkit-text-stroke: 6px #ff6bd6; transform: translate(4px, 4px); }
  .yinlang-service-terminal { padding: 14px; border-width: 2px; }
  .yinlang-query-dock { width: auto; margin: 12px 4px 16px; }
  .ops-vital-heart { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
}

/* YinLang art pass v3: rebuild the lower half as a saturated game-event stage, not a backend HUD. */
:root {
  --yl-gradient-sr-lower-stage: radial-gradient(ellipse at 72% -4%, rgba(255, 255, 255, 0.36), transparent 20%), radial-gradient(circle at 8% 8%, rgba(253, 211, 110, 0.15), transparent 23%), radial-gradient(circle at 86% 16%, rgba(231, 222, 255, 0.18), transparent 27%), linear-gradient(180deg, rgba(31, 38, 151, 0.96) 0%, rgba(28, 16, 106, 0.98) 42%, rgba(7, 9, 49, 1) 100%);
  --yl-gradient-sr-lower-trails: linear-gradient(113deg, transparent 0 8%, rgba(253, 211, 110, 0.12) 8% 14%, rgba(244, 248, 255, 0.2) 16%, transparent 25%), linear-gradient(155deg, transparent 0 54%, rgba(231, 222, 255, 0.15) 55% 60%, rgba(253, 211, 110, 0.08) 64%, transparent 72%);
  --yl-gradient-sr-action-rail: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.25), transparent 24%), linear-gradient(100deg, rgba(31, 38, 151, 0.98) 0%, rgba(71, 58, 167, 0.98) 46%, rgba(9, 13, 60, 0.98) 100%);
  --yl-gradient-sr-action-gloss: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(253, 211, 110, 0.12) 32%, rgba(231, 222, 255, 0.15) 76%, rgba(255, 255, 255, 0.1));
  --yl-gradient-sr-game-panel: radial-gradient(circle at 8% 0%, rgba(253, 211, 110, 0.1), transparent 26%), radial-gradient(circle at 94% 6%, rgba(231, 222, 255, 0.12), transparent 24%), linear-gradient(135deg, rgba(70, 50, 193, 0.98), rgba(24, 24, 105, 0.97) 58%, rgba(9, 12, 56, 0.99));
  --yl-gradient-sr-reward-card: radial-gradient(circle at 84% 74%, rgba(231, 222, 255, 0.15), transparent 22%), radial-gradient(circle at 12% 0%, rgba(253, 211, 110, 0.1), transparent 24%), linear-gradient(145deg, rgba(85, 61, 221, 0.94), rgba(29, 22, 110, 0.96) 54%, rgba(12, 14, 62, 0.99));
  --yl-gradient-sr-ledger-panel: radial-gradient(circle at 12% -8%, rgba(253, 211, 110, 0.12), transparent 30%), radial-gradient(circle at 88% 0%, rgba(231, 222, 255, 0.18), transparent 30%), linear-gradient(180deg, rgba(42, 36, 149, 0.96), rgba(10, 13, 62, 0.99));
  --yl-border-sr-hot: rgba(253, 211, 110, 0.58);
  --yl-border-sr-cool: rgba(231, 222, 255, 0.62);
  --yl-border-sr-white: rgba(244, 248, 255, 0.45);
}

.yinlang-portal::after {
  inset-block-start: 520px;
  height: calc(100% - 488px);
  min-height: 820px;
  background: var(--yl-gradient-sr-lower-trails), var(--yl-gradient-sr-lower-stage);
  box-shadow: inset 0 84px 130px rgba(231, 222, 255, 0.08), inset 0 2px 0 rgba(244, 248, 255, 0.28), 0 -32px 92px rgba(253, 211, 110, 0.08);
  filter: saturate(1.22);
  opacity: 1;
}

.yinlang-query-dock {
  position: relative;
  overflow: hidden;
  width: min(1110px, calc(100% - 150px));
  margin: clamp(-96px, -9vh, -64px) auto 24px;
  padding: 18px 20px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border: 2px solid var(--yl-border-sr-cool);
  border-block-end-color: var(--yl-border-sr-hot);
  background: var(--yl-gradient-sr-action-gloss), var(--yl-gradient-sr-action-rail);
  box-shadow: 0 30px 92px rgba(8, 8, 58, 0.58), 0 0 32px rgba(253, 211, 110, 0.12), inset 0 0 0 1px rgba(244, 248, 255, 0.2);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.yinlang-query-dock::before,
.yinlang-query-dock::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.yinlang-query-dock::before {
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  clip-path: inherit;
}
.yinlang-query-dock::after {
  inset-inline: 18px;
  inset-block-end: 8px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(244, 248, 255, 0.72), var(--yl-color-sr-orbit-gold) 50%, transparent);
  box-shadow: 0 0 18px rgba(253, 211, 110, 0.25);
  opacity: 0.95;
}
.yinlang-query-dock > * { position: relative; z-index: 1; }
.yinlang-query-dock h2 {
  color: #fff;
  text-shadow: 0 0 20px rgba(244, 248, 255, 0.28);
}
.yinlang-query-dock .muted { color: rgba(244, 248, 255, 0.82); font-weight: 760; }
.yinlang-query-dock button {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--yl-color-sr-orbit-gold);
  color: #07103a;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(253, 211, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: all var(--yl-motion-normal) var(--yl-ease-emphasis);
}
.yinlang-query-dock button:hover {
  background: #ffe39e;
  box-shadow: 0 10px 30px rgba(253, 211, 110, 0.4);
  transform: translateY(-1px);
}
.yinlang-query-dock button.secondary {
  color: #eef6ff;
  background: rgba(8, 10, 58, 0.26);
  border-color: rgba(244, 248, 255, 0.24);
  box-shadow: none;
  transition: all var(--yl-motion-normal) var(--yl-ease-emphasis);
}
.yinlang-query-dock button.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(244, 248, 255, 0.4);
  transform: translateY(-1px);
}

.yinlang-bottom-rail,
.yinlang-reward-rail,
.yinlang-scan-panel {
  position: relative;
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.yinlang-bottom-rail {
  margin-block: 0 14px;
  padding: 3px;
  gap: 3px;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background: rgba(10, 12, 70, 0.95);
  box-shadow: 0 18px 72px rgba(4, 5, 36, 0.42), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
}
.yinlang-bottom-rail::before,
.yinlang-bottom-rail::after,
.yinlang-reward-rail::before,
.yinlang-scan-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.yinlang-bottom-rail::before,
.yinlang-reward-rail::before {
  inset-inline: 16px;
  inset-block-start: -2px;
  height: 4px;
  background: linear-gradient(90deg, rgba(244, 248, 255, 0.95), var(--yl-color-sr-orbit-gold) 50%, rgba(244, 248, 255, 0.95));
  box-shadow: 0 0 20px rgba(253, 211, 110, 0.25);
}
.yinlang-bottom-rail::after {
  display: none;
}
.yinlang-bottom-rail .base-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(244, 248, 255, 0.16);
  background: rgba(12, 14, 62, 0.98);
  box-shadow: none;
  transition: border-color var(--yl-motion-normal) var(--yl-ease-emphasis);
}
.yinlang-bottom-rail .base-card:hover {
  border-color: rgba(253, 211, 110, 0.4);
}
.yinlang-bottom-rail .base-card::before,
.yinlang-bottom-rail .base-card::after { content: ""; position: absolute; pointer-events: none; }
.yinlang-bottom-rail .base-card::before {
  inset: 0;
  margin: 5px;
  border: 1px solid rgba(244, 248, 255, 0.1);
}
.yinlang-bottom-rail .base-card::after {
  display: none;
}
.yinlang-bottom-rail .base-card span { color: rgba(222, 249, 255, 0.98); text-shadow: 0 0 14px rgba(231, 222, 255, 0.25); }
.yinlang-bottom-rail .base-card code {
  min-height: 42px;
  padding: 10px 14px;
  border-color: rgba(244, 248, 255, 0.26);
  background: rgba(4, 7, 35, 0.76);
  color: #ffffff;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.04), 0 0 20px rgba(231, 222, 255, 0.04);
}
.yinlang-bottom-rail .copy-btn {
  min-height: 42px;
  min-width: 86px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--yl-color-sr-orbit-gold);
  color: #07103a;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(253, 211, 110, 0.18);
  transition: all var(--yl-motion-normal) var(--yl-ease-emphasis);
}
.yinlang-bottom-rail .copy-btn:hover {
  background: #ffe39e;
  box-shadow: 0 8px 24px rgba(253, 211, 110, 0.3);
}

.yinlang-portal .status {
  width: min(1320px, calc(100% - 48px));
  margin-inline: auto;
  border: 2px solid var(--yl-border-sr-cool);
  background: rgba(12, 14, 62, 0.96);
  color: rgba(222, 249, 255, 0.95);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  padding: 12px 16px;
  font-weight: 700;
}
.yinlang-portal .status[data-state="success"] {
  border-color: rgba(114, 255, 215, 0.5);
  background: rgba(10, 36, 42, 0.96);
  color: var(--sr-color-success-400);
}
.yinlang-portal .status[data-state="error"] {
  border-color: rgba(255, 104, 125, 0.5);
  background: rgba(42, 10, 18, 0.96);
  color: #ffd6dc;
}

.yinlang-reward-rail {
  margin-block: 14px;
  padding: 3px;
  grid-template-columns: 1.12fr 1fr 1fr 1.12fr;
  gap: 3px;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background: rgba(12, 10, 74, 0.92);
  box-shadow: 0 18px 72px rgba(4, 5, 36, 0.36), inset 0 0 0 1px rgba(244, 248, 255, 0.09);
}
.yinlang-reward-rail .metric-card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  padding: 16px 18px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: rgba(12, 14, 62, 0.98);
  box-shadow: none;
  transition: border-color var(--yl-motion-normal) var(--yl-ease-emphasis);
  clip-path: none;
}
.yinlang-reward-rail .metric-card:hover {
  border-color: rgba(253, 211, 110, 0.45);
}
.yinlang-reward-rail .metric-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(244, 248, 255, 0.1);
  margin: 5px;
  pointer-events: none;
}
.yinlang-reward-rail .metric-card::after {
  display: none;
}
.yinlang-reward-rail .metric-card.highlight {
  border-color: rgba(253, 211, 110, 0.42);
  background: rgba(16, 20, 72, 0.98);
}
.yinlang-reward-rail .metric-card.highlight:hover {
  border-color: var(--yl-color-sr-orbit-gold);
}
.yinlang-reward-rail .metric-card span { color: rgba(132, 255, 247, 0.98); font-size: 11px; text-shadow: 0 0 12px rgba(231, 222, 255, 0.2); }
.yinlang-reward-rail .metric-card strong { color: #fff; font-size: 24px; letter-spacing: -0.02em; text-shadow: 0 0 16px rgba(244, 248, 255, 0.18); }
.yinlang-reward-rail .metric-card small { color: rgba(217, 229, 255, 0.78); font-weight: 760; font-size: 11px; }
.yinlang-reward-rail .metric-card-subtitle { color: rgba(217, 229, 255, 0.78); font-weight: 760; font-size: 11px; }
.yinlang-reward-rail .metric-support { border-color: rgba(244, 248, 255, 0.16); background: rgba(244, 248, 255, 0.06); }
.yinlang-reward-rail .metric-support b { color: rgba(132, 255, 247, 0.98); }

.yinlang-scan-panel {
  margin-block: 14px 0;
  padding: 22px;
  overflow: hidden;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background: rgba(10, 13, 62, 0.98);
  box-shadow: 0 24px 86px rgba(4, 5, 36, 0.46), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
}
.yinlang-scan-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244, 248, 255, 0.1);
  pointer-events: none;
  clip-path: none;
}
.yinlang-scan-panel::after {
  display: none;
}
.yinlang-scan-panel .section-head { margin-bottom: 18px; }
.yinlang-scan-panel h2 { color: #ffffff; font-size: 24px; text-shadow: 0 0 20px rgba(244, 248, 255, 0.24); }
.yinlang-scan-panel .muted { color: rgba(217, 229, 255, 0.8); font-weight: 720; }
.yinlang-scan-panel .empty-state {
  padding: 30px;
  border-color: rgba(244, 248, 255, 0.16);
  background: rgba(5, 8, 38, 0.54);
  color: rgba(217, 229, 255, 0.8);
}
.yinlang-scan-panel .usage-table-wrap { border-color: rgba(244, 248, 255, 0.18); background: rgba(5, 8, 38, 0.62); box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.04); }
.yinlang-scan-panel .usage-table th { color: rgba(222, 249, 255, 0.94); background: rgba(244, 248, 255, 0.06); }
.yinlang-scan-panel .usage-table th,
.yinlang-scan-panel .usage-table td { border-bottom-color: rgba(244, 248, 255, 0.08); }
.yinlang-scan-panel .usage-summary-row:hover td,
.yinlang-scan-panel .usage-summary-row:focus-visible td { background: rgba(231, 222, 255, 0.06); }

@media (max-width: 1050px) {
  .yinlang-query-dock,
  .yinlang-bottom-rail,
  .yinlang-reward-rail,
  .yinlang-scan-panel { width: auto; }
  .yinlang-query-dock {
    margin-inline: 12px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "key"
      "control";
  }
  .yinlang-bottom-rail,
  .yinlang-reward-rail,
  .yinlang-scan-panel { margin-inline: 12px; }
  .yinlang-reward-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .yinlang-portal::after { inset-block-start: 520px; min-height: 1180px; }
  .yinlang-query-dock { margin: 12px 4px 14px; padding: 14px; }
  .yinlang-bottom-rail,
  .yinlang-reward-rail,
  .yinlang-scan-panel { margin-inline: 4px; padding: 10px; }
  .yinlang-bottom-rail { grid-template-columns: 1fr; }
  .yinlang-reward-rail { grid-template-columns: 1fr 1fr; }
  .yinlang-bottom-rail .base-card { min-height: 0; }
  .yinlang-bottom-rail .base-card code { font-size: 13px; }
  .yinlang-reward-rail .metric-card { min-height: 102px; padding: 14px; }
  .yinlang-reward-rail .metric-card strong { font-size: 22px; }
  .yinlang-scan-panel h2 { font-size: 20px; }
}
@media (max-width: 430px) {
  #summaryCards,
  .yinlang-reward-rail { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   全息霓虹投影地台 (Holographic Neon Platform)
   ═══════════════════════════════════════════════ */
.invite-gate-platform {
  position: absolute;
  bottom: -40px;
  left: 50%;
  translate: -50% 0;
  width: min(900px, 90vw);
  height: 120px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
  display: none;
}
.platform-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.platform-ring-outer {
  border: 4px solid #ff3eb0;
  box-shadow:
    0 0 20px rgba(255, 62, 176, 0.6),
    inset 0 0 20px rgba(255, 62, 176, 0.4);
  transform: scaleY(0.3);
}
.platform-ring-inner {
  border: 3px solid #00f5ff;
  box-shadow:
    0 0 25px rgba(0, 245, 255, 0.7),
    inset 0 0 20px rgba(0, 245, 255, 0.4);
  transform: scaleY(0.3) translateY(20px);
}

/* Invite gate layout fix: keep the decorative data scene out of document flow so the verification card stays visible without dragging. */
.invite-gate-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* USER_PORTAL_FLOATING_SIDEBAR v3
   Sidebar is a fixed overlay only. The existing usage page wrapper uses
   display: contents so the original portal layout is not pushed or reflowed. */
.portal-usage-panel {
  display: contents;
}
.portal-usage-panel[hidden],
.model-prices-panel[hidden],
.personal-settings-panel[hidden] {
  display: none !important;
}
.portal-sidebar {
  --portal-sidebar-width: 236px;
  --portal-sidebar-collapsed-width: 88px;
  --portal-sidebar-shell-height: 381px;
  position: fixed;
  inset-block-start: 22px;
  inset-inline-start: max(12px, calc((100vw - 1500px) / 2 - 88px));
  z-index: 80;
  width: var(--portal-sidebar-collapsed-width);
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.yinlang-portal[data-sidebar-collapsed="false"] .portal-sidebar {
  width: var(--portal-sidebar-width);
}
.portal-sidebar-shell {
  position: relative;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  width: 100%;
  min-height: var(--portal-sidebar-shell-height);
  height: var(--portal-sidebar-shell-height);
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(244, 248, 255, 0.16);
  border-block-start-color: rgba(115, 251, 255, 0.62);
  border-inline-start-color: rgba(115, 251, 255, 0.26);
  border-block-end-color: rgba(253, 211, 110, 0.3);
  background:
    radial-gradient(circle at 18% 0%, rgba(115, 251, 255, 0.16), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(253, 211, 110, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(31, 29, 112, 0.88), rgba(7, 9, 42, 0.94) 64%, rgba(2, 3, 10, 0.96)),
    var(--yl-gradient-arcade-terminal);
  background-size: auto;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34), 0 0 22px rgba(97, 247, 255, 0.1), inset 0 1px 0 rgba(244, 248, 255, 0.1), inset 0 0 0 1px rgba(244, 248, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  clip-path: var(--hud-clip-sm);
  pointer-events: auto;
  transition: box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.yinlang-portal[data-sidebar-collapsed="false"] .portal-sidebar-shell {
  box-shadow: 0 24px 78px rgba(0, 0, 0, 0.42), 0 0 24px rgba(97, 247, 255, 0.12), inset 0 1px 0 rgba(244, 248, 255, 0.12), inset 0 0 0 1px rgba(244, 248, 255, 0.07);
}
.portal-sidebar-shell::before,
.portal-sidebar-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.portal-sidebar-shell::before {
  inset: 7px;
  border: 1px solid rgba(244, 248, 255, 0.12);
  border-block-start-color: rgba(115, 251, 255, 0.36);
  border-inline-start-color: rgba(115, 251, 255, 0.18);
  border-block-end-color: rgba(253, 211, 110, 0.18);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(115, 251, 255, 0.16) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(180deg, rgba(244, 248, 255, 0.035), transparent 34%);
  box-shadow: inset 0 0 18px rgba(115, 251, 255, 0.035);
  clip-path: inherit;
}
.portal-sidebar-shell::after {
  inset: auto 14px 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(115, 251, 255, 0.68), rgba(253, 211, 110, 0.72), transparent);
  box-shadow: 0 0 14px rgba(115, 251, 255, 0.18);
}
.portal-sidebar-brand,
.portal-sidebar-tabs,
.portal-sidebar-hint {
  position: relative;
  z-index: 1;
}
.portal-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-height: 30px;
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(244, 248, 255, 0.18);
  color: var(--yl-color-cyan-300);
  background: rgba(2, 3, 10, 0.72);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.14);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-sidebar-toggle:hover,
.portal-sidebar-toggle:focus-visible {
  border-color: rgba(253, 211, 110, 0.55);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(97, 247, 255, 0.18), inset 0 1px 0 rgba(244, 248, 255, 0.18);
}
.portal-sidebar-toggle:focus-visible,
.portal-sidebar-tab:focus-visible,
.settings-return-btn:focus-visible {
  outline: none;
  box-shadow: var(--portal-focus), inset 0 1px 0 rgba(244, 248, 255, 0.18);
}
.portal-sidebar-toggle-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.portal-sidebar-toggle-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(97, 247, 255, 0.22));
  transform: rotate(0deg);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.yinlang-portal[data-sidebar-collapsed="false"] .portal-sidebar-toggle-mark svg {
  transform: rotate(180deg);
}
.portal-sidebar-brand {
  display: grid;
  align-content: start;
  height: 58px;
  min-height: 58px;
  gap: 3px;
  padding: 0 4px;
  max-width: 148px;
  overflow: hidden;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 120ms linear,
    clip-path 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-sidebar-brand-kicker {
  color: var(--yl-color-cyan-300);
  font-family: var(--sr-font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.portal-sidebar-brand strong {
  display: block;
  color: var(--yl-color-ink-100);
  font-family: var(--sr-font-cjk);
  font-size: 17px;
  letter-spacing: 0.02em;
}
.portal-sidebar-tabs {
  display: grid;
  align-self: stretch;
  align-content: start;
  min-height: 0;
  gap: 8px;
}
.portal-sidebar-tab {
  display: grid;
  grid-template-columns: 38px max-content;
  align-items: center;
  justify-content: start;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 248, 255, 0.12);
  color: var(--portal-muted);
  text-align: left;
  background:
    linear-gradient(180deg, rgba(244, 248, 255, 0.045), rgba(244, 248, 255, 0.018)),
    rgba(5, 7, 19, 0.72);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.06), inset 0 -1px 0 rgba(2, 3, 10, 0.44);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  transition:
    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
    color 140ms cubic-bezier(0.22, 1, 0.36, 1),
    background 140ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-sidebar-tab::before,
.portal-sidebar-tab::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--yl-motion-normal) var(--yl-ease-emphasis);
}
.portal-sidebar-tab::before {
  inset: 7px auto 7px 6px;
  width: 2px;
  background: rgba(115, 251, 255, 0.46);
  box-shadow: 0 0 10px rgba(97, 247, 255, 0.16);
}
.portal-sidebar-tab::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(115, 251, 255, 0.1), transparent 62%);
}
.portal-sidebar-tab:hover {
  border-color: rgba(115, 251, 255, 0.34);
  color: var(--portal-text);
  background:
    linear-gradient(180deg, rgba(244, 248, 255, 0.06), rgba(244, 248, 255, 0.025)),
    rgba(5, 7, 19, 0.78);
}
.portal-sidebar-tab:hover::before {
  opacity: 0.72;
}
.portal-sidebar-tab.is-active {
  border-color: rgba(253, 211, 110, 0.62);
  border-block-start-color: rgba(244, 248, 255, 0.26);
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(253, 211, 110, 0.16), rgba(115, 251, 255, 0.08) 58%, rgba(244, 248, 255, 0.025)),
    linear-gradient(180deg, rgba(244, 248, 255, 0.08), rgba(2, 3, 10, 0.24)),
    rgba(9, 13, 60, 0.84);
  box-shadow: 0 0 20px rgba(97, 247, 255, 0.1), inset 3px 0 0 rgba(253, 211, 110, 0.9), inset 0 1px 0 rgba(244, 248, 255, 0.12);
}
.portal-sidebar-tab.is-active::before,
.portal-sidebar-tab.is-active::after {
  opacity: 1;
}
.portal-sidebar-tab.is-active::before {
  background: var(--yl-color-sr-orbit-gold);
  box-shadow: 0 0 12px rgba(253, 211, 110, 0.36);
}
.portal-sidebar-tab.is-active::after {
  background: radial-gradient(circle at 18% 50%, rgba(253, 211, 110, 0.14), transparent 34%);
}
.portal-tab-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(115, 251, 255, 0.3);
  background: rgba(2, 3, 10, 0.68);
  color: var(--yl-color-cyan-300);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-sm);
  flex: 0 0 38px;
  transition:
    border-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-tab-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-sidebar-tab.is-active .portal-tab-icon {
  border-color: rgba(253, 211, 110, 0.68);
  color: #fff0c0;
  background: linear-gradient(180deg, rgba(253, 211, 110, 0.14), rgba(2, 3, 10, 0.78));
  box-shadow: 0 0 14px rgba(253, 211, 110, 0.16), inset 0 1px 0 rgba(244, 248, 255, 0.12);
}
.portal-announcement-unread-dot {
  position: absolute;
  z-index: 3;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 238, 214, 0.86);
  background: radial-gradient(circle at 36% 34%, #fff1d8 0 18%, #ff4d5f 38%, #d9122f 100%);
  box-shadow: 0 0 0 2px rgba(5, 7, 19, 0.76), 0 0 12px rgba(255, 37, 73, 0.64);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: center;
  transition:
    opacity 120ms linear,
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-sidebar-tab.has-unread .portal-announcement-unread-dot,
.portal-sidebar-tab[data-announcement-unread="true"] .portal-announcement-unread-dot {
  opacity: 1;
  transform: scale(1);
}
.portal-tab-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
  width: 132px;
  max-width: 132px;
  overflow: hidden;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 120ms linear,
    clip-path 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-tab-collapsed-label {
  position: relative;
  z-index: 1;
  display: none;
  color: var(--portal-muted);
  font-family: var(--sr-font-cjk);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.portal-tab-copy strong {
  font-family: var(--sr-font-cjk);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.portal-tab-copy small,
.portal-sidebar-hint {
  color: var(--portal-muted);
  font-size: 11px;
  line-height: 1.45;
}
.portal-sidebar-tab.is-active .portal-tab-copy small {
  color: #e8fbff;
}
.portal-sidebar-tab:hover .portal-tab-icon {
  border-color: rgba(115, 251, 255, 0.46);
  color: #e8fbff;
}
.portal-sidebar-hint {
  margin: 0;
  padding: 0 4px 8px;
  max-width: 148px;
  overflow: hidden;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 120ms linear,
    clip-path 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-shell {
  gap: 12px;
  min-height: var(--portal-sidebar-shell-height);
  padding: 12px;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-shell::before {
  inset-inline: 9px;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(115, 251, 255, 0.2) 50%, transparent calc(50% + 0.5px)),
    radial-gradient(circle at 50% 18%, rgba(115, 251, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.028), transparent 38%);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-brand {
  width: 100%;
  height: 58px;
  min-height: 58px;
  justify-items: center;
  align-content: center;
  gap: 0;
  padding: 0 0 2px;
  max-width: none;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-brand-kicker {
  display: none;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-brand strong {
  display: block;
  color: var(--yl-color-cyan-300);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-hint,
.yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-copy {
  position: absolute;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-collapsed-label {
  display: block;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tabs {
  align-self: stretch;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 0;
  justify-items: center;
  align-items: center;
  height: 100%;
  min-height: 0;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  width: 58px;
  min-height: 64px;
  align-content: center;
  justify-items: center;
  justify-content: center;
  padding: 6px 0;
  gap: 4px;
  text-align: center;
  border-color: rgba(244, 248, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(244, 248, 255, 0.035), rgba(244, 248, 255, 0.012)),
    rgba(5, 7, 19, 0.54);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.045), inset 0 -1px 0 rgba(2, 3, 10, 0.28);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-color: rgba(115, 251, 255, 0.24);
  background: rgba(2, 3, 10, 0.46);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.06);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-icon svg {
  width: 18px;
  height: 18px;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active {
  width: 62px;
  min-height: 72px;
  padding: 7px 0;
  border-color: rgba(253, 211, 110, 0.72);
  background:
    radial-gradient(circle at 50% 45%, rgba(253, 211, 110, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.055), rgba(2, 3, 10, 0.2)),
    rgba(9, 13, 60, 0.72);
  box-shadow: 0 0 14px rgba(97, 247, 255, 0.08), inset 2px 0 0 rgba(253, 211, 110, 0.92), inset 0 1px 0 rgba(244, 248, 255, 0.12);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active .portal-tab-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-color: rgba(253, 211, 110, 0.7);
  background: linear-gradient(180deg, rgba(253, 211, 110, 0.12), rgba(2, 3, 10, 0.68));
  box-shadow: 0 0 10px rgba(253, 211, 110, 0.14), 0 0 14px rgba(115, 251, 255, 0.08), inset 0 1px 0 rgba(244, 248, 255, 0.12);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active .portal-tab-collapsed-label {
  color: #fff0c0;
  text-shadow: 0 0 10px rgba(253, 211, 110, 0.24);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active .portal-tab-icon svg {
  width: 20px;
  height: 20px;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab::after {
  opacity: 0 !important;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab::before {
  inset: 10px auto 10px 5px;
  width: 2px;
  opacity: 0;
  background: var(--yl-color-sr-orbit-gold);
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active::before {
  opacity: 1;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-hint {
  padding: 0;
  max-width: 0;
  min-height: 0;
}
.yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-shell::after {
  inset-inline: 18px;
  inset-block-end: 4px;
  opacity: 0.88;
}
@media (prefers-reduced-motion: no-preference) {
  .portal-sidebar-toggle,
  .portal-sidebar-tabs,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-icon,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-tab-icon svg,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active .portal-tab-icon,
  .yinlang-portal[data-sidebar-collapsed="true"] .portal-sidebar-tab.is-active .portal-tab-icon svg {
    transition: none !important;
  }
}
.announcement-dialog[hidden] {
  display: none !important;
}
.user-key-dialog[hidden],
.user-key-secret-result[hidden],
.settings-key-form[hidden] {
  display: none !important;
}
.announcement-dialog-panel[hidden],
.announcement-loading-state[hidden],
.announcement-error-state[hidden],
.announcement-empty-state[hidden],
.announcement-latest-card[hidden],
.announcement-timeline-list[hidden],
.announcement-timeline-body[hidden] {
  display: none !important;
}
.announcement-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}
.announcement-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 10, 0.72);
  backdrop-filter: blur(10px);
}
.announcement-dialog-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(900px, calc(100vw - 56px));
  max-height: min(560px, calc(100vh - 56px));
  border: 1px solid rgba(244, 248, 255, 0.16);
  border-block-start-color: rgba(115, 251, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(36, 45, 82, 0.98), rgba(24, 34, 58, 0.98) 100px, rgba(24, 34, 58, 0.98)),
    rgba(7, 9, 24, 0.96);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-md);
  overflow: hidden;
}
.announcement-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(244, 248, 255, 0.08);
}
.announcement-dialog-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.announcement-dialog-badge {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(97, 126, 255, 0.96), rgba(80, 94, 255, 0.92));
  box-shadow: 0 0 24px rgba(80, 94, 255, 0.28);
  color: #ffffff;
}
.announcement-dialog-badge svg,
.announcement-dialog-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.announcement-dialog-title-wrap h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.announcement-dialog-title-wrap p {
  margin: 0;
  font-size: 13px;
  color: var(--portal-muted);
}
.announcement-dialog-close {
  min-width: 0;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-color: rgba(244, 248, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 248, 255, 0.76);
  box-shadow: none;
}
.announcement-dialog-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  padding: 18px 24px 24px;
  overflow: auto;
}
.announcement-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(280px, 100%);
}
.announcement-subtab {
  min-height: 38px;
  border-color: rgba(244, 248, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--portal-muted);
  box-shadow: none;
}
.announcement-subtab.is-active {
  border-color: rgba(253, 211, 110, 0.46);
  background: linear-gradient(90deg, rgba(253, 211, 110, 0.18), rgba(115, 251, 255, 0.08));
  color: #fff2cf;
}
.announcement-dialog-panel { display: grid; min-height: 260px; }
.announcement-loading-state,
.announcement-error-state,
.announcement-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  align-content: center;
  min-height: 260px;
  color: var(--portal-muted);
  text-align: center;
}
.user-key-dialog {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: 24px;
}
.user-key-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 10, 0.74);
  backdrop-filter: blur(10px);
}
.user-key-dialog-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 40px));
  max-height: min(700px, calc(100vh - 40px));
  border: 1px solid rgba(244, 248, 255, 0.16);
  border-block-start-color: rgba(253, 211, 110, 0.58);
  background:
    linear-gradient(180deg, rgba(36, 45, 82, 0.98), rgba(16, 24, 42, 0.98) 118px, rgba(16, 24, 42, 0.98)),
    rgba(7, 9, 24, 0.98);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-md);
  overflow: hidden;
}
.user-key-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(244, 248, 255, 0.08);
}
.user-key-dialog-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.user-key-dialog-badge {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(253, 211, 110, 0.96), rgba(222, 176, 56, 0.92));
  box-shadow: 0 0 24px rgba(253, 211, 110, 0.22);
  color: #11162c;
}
.user-key-dialog-badge svg,
.user-key-dialog-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.user-key-dialog-title-wrap h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.user-key-dialog-title-wrap p {
  margin: 0;
  font-size: 13px;
  color: var(--portal-muted);
}
.user-key-dialog-close {
  min-width: 0;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-color: rgba(244, 248, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 248, 255, 0.76);
  box-shadow: none;
}
.user-key-dialog-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  padding: 18px 24px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.user-key-dialog-body > * {
  min-width: 0;
}
.user-key-dialog-status {
  margin: 0;
}
.settings-key-dialog-form {
  align-self: start;
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "name name name name status status group group expires expires expires expires"
    "quota quota quota quota quota quota quota quota quota quota quota quota"
    "actions actions actions actions actions actions actions actions actions actions actions actions";
  gap: 16px 14px;
  overflow: visible;
}
.settings-key-dialog-form > * {
  min-width: 0;
  max-width: 100%;
}
.settings-key-dialog-form .settings-key-field-name {
  grid-area: name;
}
.settings-key-dialog-form .settings-key-field-status {
  grid-area: status;
}
.settings-key-dialog-form .settings-key-field-group {
  grid-area: group;
}
.settings-key-dialog-form .settings-key-field-expires {
  grid-area: expires;
}
.settings-key-dialog-form .settings-key-field-quota {
  grid-area: quota;
}
.settings-key-dialog-form .settings-key-dialog-actions {
  grid-area: actions;
  margin-top: 2px;
}
.settings-key-dialog-form label,
.settings-key-dialog-form input,
.settings-key-dialog-form select {
  min-width: 0;
  max-width: 100%;
}
.settings-key-dialog-form .settings-key-field-expires input,
.settings-key-dialog-form .settings-key-field-quota input {
  min-width: 0;
  max-width: 100%;
}
.settings-key-dialog-intro {
  display: grid;
  gap: 4px;
}
.settings-key-dialog-actions {
  justify-content: flex-end;
}
.user-key-secret-result {
  display: grid;
  gap: 14px;
}
.user-key-secret-actions {
  justify-content: flex-end;
}
.user-key-secret-actions .secondary {
  color: var(--yl-color-sr-neon-cyan);
}
.announcement-loading-ring {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(115, 251, 255, 0.18);
  border-block-start-color: rgba(115, 251, 255, 0.82);
  border-inline-end-color: rgba(253, 211, 110, 0.68);
  box-shadow: 0 0 28px rgba(115, 251, 255, 0.16), inset 0 0 18px rgba(115, 251, 255, 0.08);
  animation: announcement-loading-spin 980ms linear infinite;
}
.announcement-error-icon {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: 1px solid rgba(255, 99, 99, 0.32);
  background: rgba(255, 99, 99, 0.12);
  color: #ff9f9f;
  box-shadow: 0 0 28px rgba(255, 99, 99, 0.12);
}
.announcement-error-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.announcement-loading-state strong,
.announcement-error-state strong,
.announcement-empty-state strong {
  color: #f4f8ff;
}
.announcement-loading-state p,
.announcement-error-state p,
.announcement-empty-state p {
  margin: 0;
}
@keyframes announcement-loading-spin {
  to { transform: rotate(360deg); }
}
.announcement-empty-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: rgba(217, 229, 255, 0.12);
  color: rgba(217, 229, 255, 0.45);
}
.announcement-empty-icon::after {
  content: "✓";
  position: absolute;
  top: -4px;
  right: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #28c75d;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}
.announcement-empty-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.announcement-latest-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 260px;
  padding: 18px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.045), rgba(244, 248, 255, 0.02)), rgba(5, 7, 19, 0.44);
  clip-path: var(--hud-clip-sm);
}
.announcement-latest-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.announcement-published-at { color: var(--portal-muted); font-size: 12px; }
.announcement-latest-card strong { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1; }
.announcement-latest-body { display: grid; gap: 10px; color: #e8eef9; }
.announcement-latest-body p { margin: 0; }
.announcement-timeline-list { display: grid; gap: 10px; align-content: start; }
.announcement-timeline-item {
  border: 1px solid rgba(244, 248, 255, 0.12);
  background: rgba(5, 7, 19, 0.38);
  clip-path: var(--hud-clip-sm);
  overflow: hidden;
}
.announcement-timeline-toggle {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #f4f8ff;
  box-shadow: none;
  text-align: left;
}
.announcement-timeline-toggle time { color: var(--portal-muted); font-family: var(--sr-font-mono); font-size: 12px; }
.announcement-timeline-toggle strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-timeline-chevron { color: var(--portal-muted); transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1); }
.announcement-timeline-item.is-open .announcement-timeline-chevron { transform: rotate(180deg); }
.announcement-timeline-body {
  padding: 0 16px 16px 190px;
  color: #d9e5ff;
}
.announcement-timeline-body p { margin: 0; }
.personal-settings-panel {
  display: grid;
  gap: 14px;
  width: min(1180px, calc(100% - 120px));
  margin: 0 auto 20px;
}
.model-prices-panel {
  display: grid;
  gap: 14px;
  width: min(1180px, calc(100% - 120px));
  margin: 0 auto 20px;
}
.announcement-hero-panel,
.announcement-action-panel,
.announcement-card {
  position: relative;
  border: 1px solid rgba(244, 248, 255, 0.2);
  border-block-start-color: rgba(115, 251, 255, 0.72);
  background:
    var(--yl-gradient-scan-panel),
    linear-gradient(145deg, rgba(31, 29, 112, 0.82), rgba(5, 7, 19, 0.82));
  box-shadow: var(--sr-shadow-panel), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-sm);
}
.settings-hero-panel,
.settings-api-manager,
.settings-action-panel,
.usage-api-console-panel {
  position: relative;
  margin-block: 14px 0;
  padding: 22px;
  overflow: hidden;
  border: 2px solid var(--yl-border-sr-cool);
  border-block-start-color: var(--yl-border-sr-hot);
  background: rgba(10, 13, 62, 0.98);
  box-shadow: 0 24px 86px rgba(4, 5, 36, 0.46), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-sm);
}
.settings-hero-panel::before,
.settings-api-manager::before,
.settings-action-panel::before,
.usage-api-console-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244, 248, 255, 0.1);
  pointer-events: none;
  clip-path: none;
}
.settings-hero-panel::after,
.settings-api-manager::after,
.settings-action-panel::after,
.usage-api-console-panel::after {
  display: none;
}
.announcement-hero-panel h2 {
  margin: 4px 0 6px;
  font-family: var(--sr-font-cjk);
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1;
}
.settings-hero-panel h2,
.usage-api-console-panel h2,
.settings-api-manager-headline,
.settings-action-panel h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.14;
  text-shadow: 0 0 20px rgba(244, 248, 255, 0.24);
}
.settings-hero-panel h2 {
  font-family: var(--yl-font-pixel-display);
  letter-spacing: 0.01em;
}
.settings-hero-panel .muted,
.usage-api-console-panel .muted,
.settings-api-manager .muted,
.settings-action-panel .muted {
  color: rgba(217, 229, 255, 0.8);
  font-weight: 720;
}
.announcement-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.announcement-card {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 18px;
}
.announcement-card-tag {
  color: var(--yl-color-sr-neon-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announcement-card strong,
.announcement-hero-panel h2 {
  color: #ffffff;
  line-height: 1.25;
}
.announcement-card-featured,
.settings-overview-grid .metric-card.highlight {
  border-block-start-color: rgba(253, 211, 110, 0.72);
}
.announcement-card-featured {
  grid-column: span 2;
  background:
    linear-gradient(110deg, rgba(253, 211, 110, 0.14), rgba(115, 251, 255, 0.08) 52%, rgba(5, 7, 19, 0.88)),
    var(--yl-gradient-scan-panel),
    linear-gradient(145deg, rgba(31, 29, 112, 0.82), rgba(5, 7, 19, 0.82));
}
.announcement-meta-list {
  margin: 0;
  padding-left: 18px;
  color: #e8fbff;
  display: grid;
  gap: 6px;
  font-size: 13px;
}
.model-prices-panel .model-pricing-panel {
  margin: 0;
}
.announcement-action-panel,
.settings-action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.announcement-action-panel h3,
.settings-action-panel h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.settings-return-btn {
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  color: #091024;
  font-weight: 900;
  background: linear-gradient(100deg, var(--yl-color-sr-orbit-gold), #ffe7a8);
  box-shadow: 0 12px 28px rgba(253, 211, 110, 0.22);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
}
.settings-return-btn:hover {
  filter: brightness(1.05);
}
.settings-overview-grid {
  margin-block: 14px;
}

.settings-slot-btn {
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid rgba(115, 251, 255, 0.34);
  background: linear-gradient(180deg, rgba(91, 231, 255, 0.16), rgba(6, 18, 38, 0.9));
  color: #f5fdff;
  font-weight: 800;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  justify-self: end;
  white-space: nowrap;
}
.settings-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-slot-panel {
  position: relative;
  margin: 0;
  padding: 18px;
  border: 2px solid var(--yl-border-sr-cool);
  background: rgba(10, 13, 62, 0.98);
  box-shadow: 0 24px 86px rgba(4, 5, 36, 0.46), inset 0 0 0 1px rgba(244, 248, 255, 0.08);
  clip-path: var(--hud-clip-sm);
}
.settings-slot-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.settings-slot-panel-head > div {
  min-width: 0;
}
.settings-slot-panel-head h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}
.settings-slot-panel-head small,
.settings-slot-row small,
.settings-slot-empty {
  color: rgba(217, 229, 255, 0.8);
}
.settings-slot-list {
  display: grid;
  gap: 10px;
}
.settings-slot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(244, 248, 255, 0.16);
  background: rgba(5, 8, 38, 0.62);
}
.settings-slot-row strong {
  display: block;
  color: #fff;
}
.settings-slot-delete {
  min-width: 68px;
  min-height: 34px;
  border: 1px solid rgba(255, 77, 95, 0.74);
  background: linear-gradient(180deg, rgba(255, 77, 95, 0.3), rgba(80, 8, 18, 0.84));
  color: #fff2f4;
  cursor: pointer;
}
@media (max-width: 900px) {
  .settings-slot-row {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-slot-grid {
    grid-template-columns: 1fr;
  }
  .settings-slot-panel-head {
    grid-template-columns: 1fr;
  }
  .settings-slot-btn {
    justify-self: stretch;
  }
}
.usage-api-console-panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "manager";
  gap: 16px;
  padding: 22px;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 14px;
}
.usage-api-console-head {
  grid-area: head;
  align-items: center;
}
.usage-api-console-panel #userKeyManagerContent {
  grid-area: manager;
  margin-top: 2px;
}
.settings-api-manager {
  display: grid;
  gap: 18px;
  padding: 22px;
}
@media (max-width: 1050px) {
  .usage-api-console-panel {
    width: min(1320px, calc(100% - 48px));
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "manager";
  }
}
.settings-api-manager-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}
.usage-api-console-panel .settings-api-manager-head-btn {
  appearance: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 12px 18px;
  border: 1px solid rgba(115, 251, 255, 0.34);
  color: #f4fcff;
  font-weight: 900;
  background:
    linear-gradient(90deg, rgba(115, 251, 255, 0.11), rgba(115, 251, 255, 0.02) 34%, rgba(253, 211, 110, 0.055) 100%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.07), rgba(244, 248, 255, 0.016)),
    repeating-linear-gradient(180deg, rgba(244, 248, 255, 0.035) 0 1px, transparent 1px 8px),
    rgba(5, 10, 35, 0.86);
  box-shadow:
    0 16px 46px rgba(3, 8, 32, 0.34),
    inset 0 1px 0 rgba(244, 248, 255, 0.14),
    inset 0 0 0 1px rgba(244, 248, 255, 0.04);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
  text-align: left;
  transform: none;
  transition: border-color var(--yl-motion-fast) var(--yl-ease-emphasis), box-shadow var(--yl-motion-fast) var(--yl-ease-emphasis), background var(--yl-motion-fast) var(--yl-ease-emphasis);
}
.usage-api-console-panel .settings-api-manager-head-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(115, 251, 255, 0.9), rgba(244, 248, 255, 0.54), transparent 72%);
  box-shadow: 0 0 22px rgba(115, 251, 255, 0.2);
  pointer-events: none;
  z-index: -1;
}
.usage-api-console-panel .settings-api-manager-head-btn::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(244, 248, 255, 0.08);
  pointer-events: none;
  z-index: -1;
}
.usage-api-console-panel .settings-api-manager-head-btn:hover,
.usage-api-console-panel .settings-api-manager-head-btn:focus-visible {
  border-color: rgba(115, 251, 255, 0.68);
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(115, 251, 255, 0.14), rgba(115, 251, 255, 0.035) 34%, rgba(253, 211, 110, 0.075) 100%),
    linear-gradient(180deg, rgba(244, 248, 255, 0.086), rgba(244, 248, 255, 0.018)),
    repeating-linear-gradient(180deg, rgba(244, 248, 255, 0.04) 0 1px, transparent 1px 8px),
    rgba(5, 10, 35, 0.9);
  box-shadow:
    var(--portal-focus),
    0 18px 52px rgba(3, 8, 32, 0.4),
    inset 0 1px 0 rgba(244, 248, 255, 0.16),
    inset 0 0 0 1px rgba(244, 248, 255, 0.05);
  transform: none;
}
.usage-api-console-panel .settings-api-manager-head-btn.is-collapsed {
  border-color: rgba(115, 251, 255, 0.28);
}
.usage-api-console-panel .settings-api-manager-headline {
  display: block;
  margin: 0;
  color: #ffffff;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  font-weight: 900;
}
.usage-api-console-panel .settings-api-manager-head-chevron {
  display: inline-grid;
  place-items: center;
  justify-self: end;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(115, 251, 255, 0.26);
  color: rgba(201, 252, 255, 0.92);
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(115, 251, 255, 0.36);
  background: rgba(115, 251, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.12);
  clip-path: var(--hud-clip-sm);
  transition: color var(--yl-motion-fast) var(--yl-ease-emphasis), border-color var(--yl-motion-fast) var(--yl-ease-emphasis), box-shadow var(--yl-motion-fast) var(--yl-ease-emphasis), background var(--yl-motion-fast) var(--yl-ease-emphasis);
}
.usage-api-console-panel .settings-api-manager-head-btn:hover .settings-api-manager-head-chevron,
.usage-api-console-panel .settings-api-manager-head-btn:focus-visible .settings-api-manager-head-chevron {
  border-color: rgba(115, 251, 255, 0.58);
  color: #ffffff;
  background: rgba(115, 251, 255, 0.09);
  box-shadow:
    0 0 20px rgba(115, 251, 255, 0.18),
    inset 0 1px 0 rgba(244, 248, 255, 0.16);
}
#createUserKeyLaunchBtn {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  color: #091024;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(100deg, var(--yl-color-sr-orbit-gold), #ffe7a8);
  box-shadow: 0 12px 28px rgba(253, 211, 110, 0.22);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
}
#createUserKeyLaunchBtn:hover,
#createUserKeyLaunchBtn:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 16px 34px rgba(253, 211, 110, 0.26);
}
.settings-api-manager-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.settings-key-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(115, 251, 255, 0.18);
  border-block-start-color: rgba(115, 251, 255, 0.32);
  background:
    linear-gradient(90deg, rgba(115, 251, 255, 0.06), transparent 64%),
    rgba(5, 8, 38, 0.48);
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.03);
  clip-path: var(--hud-clip-sm);
}
.settings-key-toolbar[hidden] {
  display: none !important;
}
.settings-key-filter-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(160px, 0.34fr) minmax(160px, 0.34fr);
  gap: 10px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
}
.settings-key-filter-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.settings-key-filter-search {
  min-width: 280px;
}
.settings-key-filter-field:not(.settings-key-filter-search) {
  min-width: 160px;
}
.settings-key-filter-field input,
.settings-key-filter-field select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 12px;
  color: var(--portal-text);
  background: rgba(20, 29, 52, 0.82);
  padding: 7px 34px 7px 14px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(244, 248, 255, 0.06), 0 0 0 1px rgba(31, 41, 78, 0.12);
  font-size: 14px;
  font-weight: 800;
}
.settings-key-filter-field input::placeholder {
  color: rgba(196, 207, 226, 0.72);
}
.settings-key-filter-search input {
  padding-left: 40px;
}
.settings-key-filter-field select {
  appearance: none;
  cursor: pointer;
}
.settings-key-search-icon {
  position: absolute;
  inset-inline-start: 14px;
  width: 18px;
  height: 18px;
  color: rgba(196, 207, 226, 0.86);
  fill: currentColor;
  pointer-events: none;
  z-index: 1;
}
.settings-key-filter-field:not(.settings-key-filter-search)::after {
  content: "";
  position: absolute;
  inset-inline-end: 15px;
  width: 9px;
  height: 9px;
  border-inline-end: 2px solid rgba(196, 207, 226, 0.76);
  border-block-end: 2px solid rgba(196, 207, 226, 0.76);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}
.settings-key-filter-field input:focus,
.settings-key-filter-field select:focus {
  border-color: var(--sr-border-cyan);
  box-shadow: var(--portal-focus);
}
.settings-key-bulk-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.settings-key-bulk-actions .danger {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
}
.settings-api-manager-content[hidden] {
  display: none !important;
}
.settings-api-manager-content > * {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}
.settings-key-form {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(115, 251, 255, 0.18);
  border-block-start-color: rgba(115, 251, 255, 0.34);
  background:
    repeating-linear-gradient(180deg, rgba(244, 248, 255, 0.028) 0 1px, transparent 1px 8px),
    linear-gradient(100deg, rgba(253, 211, 110, 0.06), rgba(115, 251, 255, 0.05) 54%, transparent),
    rgba(3, 8, 20, 0.74);
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.04), inset 0 1px 0 rgba(244, 248, 255, 0.06);
  clip-path: var(--hud-clip-sm);
}
.settings-key-form label {
  display: grid;
  gap: 6px;
  color: #d9e5ff;
  font-size: 12px;
  font-weight: 800;
  min-width: 0;
}
.settings-key-form label span {
  color: rgba(222, 249, 255, 0.92);
}
.settings-key-form input,
.settings-key-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(115, 251, 255, 0.32);
  color: var(--portal-text);
  background: rgba(2, 3, 10, 0.72);
  padding: 8px 10px;
  outline: none;
  clip-path: var(--hud-clip-sm);
}
.settings-key-form input:focus,
.settings-key-form select:focus {
  border-color: var(--sr-border-cyan);
  box-shadow: var(--portal-focus);
}
.settings-key-form input:disabled {
  color: rgba(217, 229, 255, 0.42);
  background: rgba(5, 10, 24, 0.42);
}
.settings-key-form .settings-key-field-name { grid-column: span 4; }
.settings-key-form .settings-key-field-status { grid-column: span 2; }
.settings-key-form .settings-key-field-group { grid-column: span 2; }
.settings-key-form .settings-key-field-expires { grid-column: span 2; }
.settings-key-form .settings-key-field-quota { grid-column: span 2; }
.settings-key-form .settings-key-dialog-actions {
  grid-column: 1 / -1;
}
.settings-key-form.settings-key-dialog-form .settings-key-field-name {
  grid-area: name;
}
.settings-key-form.settings-key-dialog-form .settings-key-field-status {
  grid-area: status;
}
.settings-key-form.settings-key-dialog-form .settings-key-field-group {
  grid-area: group;
}
.settings-key-form.settings-key-dialog-form .settings-key-field-expires {
  grid-area: expires;
}
.settings-key-form.settings-key-dialog-form .settings-key-field-quota {
  grid-area: quota;
}
.settings-key-form.settings-key-dialog-form .settings-key-dialog-actions {
  grid-area: actions;
}
.settings-editor-actions button,
.settings-key-form button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(115, 251, 255, 0.28);
  color: #ecfbff;
  font-weight: 800;
  background: rgba(5, 7, 19, 0.62);
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
}
#createUserKeyLaunchBtn,
.settings-editor-actions button:not(.secondary) {
  color: #091024;
  border-color: rgba(253, 211, 110, 0.72);
  background: linear-gradient(100deg, var(--yl-color-sr-orbit-gold), #ffe7a8);
  box-shadow: 0 12px 28px rgba(253, 211, 110, 0.12);
}
.settings-quota-field {
  min-width: 0;
}
.settings-quota-input-wrap {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 10px;
}
.settings-quota-input-wrap > input {
  min-width: 0;
  max-width: 100%;
}
.settings-quota-check {
  align-self: stretch;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  position: relative;
  min-width: 44px;
  z-index: 1;
}
.settings-quota-toggle {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.settings-quota-lock {
  justify-self: stretch;
  width: 44px;
  min-width: 44px;
  isolation: isolate;
}
.settings-quota-lock-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: rgba(5, 7, 19, 0.72);
  color: rgba(177, 190, 214, 0.78);
  clip-path: var(--hud-clip-sm);
  pointer-events: none;
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.settings-quota-lock-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-lock-open { display: none; }
.settings-quota-lock[data-lock-state="locked"] .settings-quota-lock-icon {
  border-color: rgba(253, 211, 110, 0.72);
  background: linear-gradient(180deg, rgba(253, 211, 110, 0.16), rgba(5, 7, 19, 0.78));
  color: #ffe39b;
  box-shadow: 0 0 18px rgba(253, 211, 110, 0.26), inset 0 1px 0 rgba(255, 242, 196, 0.2);
}
.settings-quota-lock[data-lock-state="unlocked"] .settings-quota-lock-icon {
  border-color: rgba(244, 248, 255, 0.14);
  background: rgba(5, 7, 19, 0.62);
  color: rgba(177, 190, 214, 0.68);
  box-shadow: none;
}
.settings-quota-lock:hover .settings-quota-lock-icon,
.settings-quota-lock:focus-within .settings-quota-lock-icon {
  border-color: rgba(115, 251, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(115, 251, 255, 0.18), 0 0 20px rgba(115, 251, 255, 0.16);
}
.settings-quota-lock[data-lock-state="unlocked"] .settings-lock-closed { display: none; }
.settings-quota-lock[data-lock-state="unlocked"] .settings-lock-open { display: block; }
.settings-quota-tooltip {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inset-block-start: auto;
  inset-block-end: calc(100% + 12px);
  z-index: 3;
  width: max-content;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 96px));
  padding: 8px 10px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: rgba(8, 11, 28, 0.96);
  color: #e8fbff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 12px 30px rgba(4, 5, 36, 0.34);
  transition: opacity 140ms ease, transform 140ms ease;
}
.settings-quota-lock:hover .settings-quota-tooltip,
.settings-quota-lock:focus-within .settings-quota-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.settings-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.settings-editor-actions .secondary {
  color: var(--yl-color-sr-neon-cyan);
}
.settings-status-badge,
.settings-group-pill,
.settings-quota-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(244, 248, 255, 0.12);
  color: #d9e5ff;
  background: rgba(244, 248, 255, 0.055);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  clip-path: var(--hud-clip-sm);
}
.settings-status-success {
  border-color: rgba(69, 255, 184, 0.34);
  color: #ccffe9;
  background: rgba(69, 255, 184, 0.08);
}
.settings-status-warn {
  border-color: rgba(253, 211, 110, 0.42);
  color: #fff0c0;
  background: rgba(253, 211, 110, 0.1);
}
.settings-status-failed {
  border-color: rgba(255, 77, 95, 0.42);
  color: #ffd7df;
  background: rgba(255, 77, 95, 0.1);
}
.settings-group-pill {
  justify-content: flex-start;
  max-width: 100%;
  color: #e8fbff;
  border-color: rgba(115, 251, 255, 0.24);
  background: linear-gradient(90deg, rgba(115, 251, 255, 0.1), rgba(244, 248, 255, 0.03));
}
.settings-quota-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.settings-quota-line {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}
.settings-quota-line strong {
  color: #ffffff;
  font-family: var(--sr-font-mono);
}
.settings-quota-line span {
  color: var(--portal-muted);
  font-size: 11px;
}
.settings-quota-progress {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(244, 248, 255, 0.09);
}
.settings-quota-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #45ffb8, var(--yl-color-sr-orbit-gold));
  box-shadow: 0 0 10px rgba(69, 255, 184, 0.22);
}
.settings-quota-badge.is-unlimited {
  width: max-content;
  border-color: rgba(115, 251, 255, 0.32);
  color: #e8fbff;
  background: rgba(115, 251, 255, 0.08);
}
.settings-key-name {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-query-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "lead field"
    "control control"
    "secret secret"
    "status status";
  gap: 10px 16px;
  padding: 18px;
}
.settings-query-copy {
  grid-area: lead;
}
.settings-query-copy h3 {
  margin: 2px 0 6px;
  font-size: 22px;
}
.settings-query-field {
  grid-area: field;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.settings-key-name-label {
  align-items: flex-end;
}
.settings-query-control {
  grid-area: control;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
  align-items: center;
}
.settings-query-control input {
  width: 100%;
  border: 1px solid var(--portal-line);
  background: rgba(5, 10, 24, 0.78);
  color: var(--portal-text);
  padding: 10px 12px;
  outline: none;
  clip-path: var(--hud-clip-sm);
}
.settings-query-control input:focus {
  border-color: var(--sr-border-cyan);
  box-shadow: var(--portal-focus);
}
.settings-query-control button {
  color: #091024;
  border-color: rgba(253, 211, 110, 0.72);
  background: linear-gradient(100deg, var(--yl-color-sr-orbit-gold), #ffe7a8);
}
.settings-one-time-secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "secret-label secret-action"
    "secret-value secret-action";
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(253, 211, 110, 0.44);
  background: rgba(253, 211, 110, 0.08);
  clip-path: var(--hud-clip-sm);
}
.settings-one-time-secret[hidden] {
  display: none !important;
}
.settings-one-time-secret span {
  grid-area: secret-label;
  min-width: 0;
  color: var(--yl-color-sr-orbit-gold);
  font-weight: 900;
  line-height: 1.35;
}
.settings-one-time-secret code {
  grid-area: secret-value;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  color: #fff9d9;
  padding: 6px 8px;
  border: 1px solid rgba(253, 211, 110, 0.18);
  background: rgba(5, 7, 19, 0.38);
}
.settings-one-time-secret .copy-btn {
  grid-area: secret-action;
  justify-self: end;
  white-space: nowrap;
}
.settings-status-line {
  padding: 10px 12px;
  border: 1px solid rgba(115, 251, 255, 0.22);
  color: #d9e5ff;
  background: rgba(5, 7, 19, 0.44);
}
.settings-status-line[data-state="success"] {
  border-color: rgba(69, 255, 184, 0.32);
  color: #ccffe9;
}
.settings-status-line[data-state="error"] {
  border-color: rgba(255, 77, 95, 0.42);
  color: #ffd7df;
}
.settings-ledger-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.settings-key-table-wrap {
  overflow: visible;
  border: 1px solid rgba(244, 248, 255, 0.18);
  background: rgba(5, 8, 38, 0.62);
  box-shadow: inset 0 0 0 1px rgba(231, 222, 255, 0.04);
  clip-path: var(--hud-clip-sm);
}
.settings-key-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.settings-key-table th,
.settings-key-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(244, 248, 255, 0.08);
  text-align: left;
  vertical-align: middle;
}
.settings-key-table th {
  color: rgba(222, 249, 255, 0.94);
  background: rgba(244, 248, 255, 0.06);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.settings-key-table td {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.settings-key-table td strong {
  display: block;
  font-size: 13px;
}
.settings-key-identity-head { width: 18%; }
.settings-key-status-head { width: 10%; }
.settings-key-quota-head { width: 14%; }
.settings-key-group-head { width: 10%; }
.settings-key-multiplier-head { width: 7%; }
.settings-key-expiry-head { width: 14%; }
.settings-key-usage-head { width: 14%; }
.settings-key-table th.settings-key-actions-head,
.settings-key-actions-cell {
  width: 229px;
  min-width: 229px;
}
.settings-key-select-cell {
  width: 46px;
  min-width: 46px;
  text-align: center !important;
}
.settings-key-select-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--yl-color-sr-neon-cyan);
  cursor: pointer;
}
.settings-key-table td small {
  display: block;
  margin-top: 3px;
  color: var(--portal-muted);
}
.settings-key-prefix {
  overflow: hidden;
  display: block;
  margin-top: 4px;
  color: rgba(222, 249, 255, 0.78);
  font-family: var(--sr-font-mono);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
}
.settings-key-meta {
  color: var(--portal-muted);
  font-size: 12px;
}
.settings-key-identity-cell,
.settings-key-quota-cell,
.settings-key-expiry-cell,
.settings-key-usage-cell {
  min-width: 0;
}
.settings-key-quota-cell strong,
.settings-key-expiry-cell strong,
.settings-key-usage-cell strong {
  white-space: nowrap;
}
.settings-key-multiplier-cell {
  white-space: nowrap;
}
.settings-key-multiplier {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: rgba(244, 248, 255, 0.04);
  color: #eefbff;
  font-family: var(--sr-font-mono);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  clip-path: var(--hud-clip-sm);
}
.settings-summary-row {
  cursor: default;
}
.settings-summary-row:hover td,
.settings-summary-row:focus-visible td {
  background: rgba(231, 222, 255, 0.06);
}
.settings-key-inline-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.settings-row-inline-btn {
  min-height: 30px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(115, 251, 255, 0.2);
  color: #ecfbff;
  background: rgba(5, 7, 19, 0.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  clip-path: var(--hud-clip-sm);
  cursor: pointer;
}
.settings-row-inline-btn.secondary {
  color: var(--yl-color-sr-neon-cyan);
}
.settings-icon-button-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 34px;
  min-height: 34px;
}
.settings-row-inline-btn.icon-only {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}
.settings-row-inline-btn.utility {
  color: #f5fdff;
  border-color: rgba(115, 251, 255, 0.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(223, 249, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(91, 231, 255, 0.12), rgba(6, 18, 38, 0.86));
  box-shadow:
    0 0 0 1px rgba(115, 251, 255, 0.1),
    inset 0 1px 0 rgba(239, 253, 255, 0.16);
}
.settings-icon-tooltip {
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  inset-block-start: 50%;
  z-index: 4;
  width: max-content;
  max-width: min(220px, 60vw);
  padding: 8px 10px;
  border: 1px solid rgba(244, 248, 255, 0.14);
  background: rgba(8, 11, 28, 0.96);
  color: #e8fbff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  clip-path: var(--hud-clip-sm);
  box-shadow: 0 12px 30px rgba(4, 5, 36, 0.34);
  transition: opacity 140ms ease;
}
.settings-row-inline-btn.rotate {
  color: #f5fdff;
  border-color: rgba(115, 251, 255, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(223, 249, 255, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(91, 231, 255, 0.16), rgba(6, 18, 38, 0.9));
  box-shadow:
    0 0 0 1px rgba(115, 251, 255, 0.12),
    inset 0 1px 0 rgba(239, 253, 255, 0.18);
}
.settings-row-inline-btn.danger {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  color: #fff2f4;
  border-color: rgba(255, 77, 95, 0.74);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 169, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(255, 77, 95, 0.3), rgba(80, 8, 18, 0.84));
  box-shadow:
    0 0 0 1px rgba(255, 77, 95, 0.12),
    inset 0 1px 0 rgba(255, 214, 220, 0.24);
}
.settings-row-inline-btn .settings-copy-icon,
.settings-row-inline-btn .settings-toggle-icon,
.settings-row-inline-btn .settings-edit-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(214, 250, 255, 0.4));
}
.settings-row-inline-btn .settings-rotate-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(214, 250, 255, 0.4));
}
.settings-row-inline-btn .settings-delete-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 77, 95, 0.62));
}
.settings-row-inline-btn.rotate:disabled,
.settings-row-inline-btn.rotate[disabled] {
  color: rgba(235, 248, 255, 0.46);
  border-color: rgba(115, 251, 255, 0.18);
  background: rgba(6, 18, 38, 0.46);
}
.settings-row-inline-btn.danger:disabled,
.settings-row-inline-btn.danger[disabled] {
  color: rgba(255, 215, 223, 0.54);
  border-color: rgba(255, 77, 95, 0.28);
  background: rgba(80, 8, 18, 0.42);
}
.settings-row-inline-btn:hover,
.settings-row-inline-btn:focus-visible {
  border-color: rgba(253, 211, 110, 0.48);
  box-shadow: var(--portal-focus);
}
.settings-icon-button-wrap:hover .settings-icon-tooltip,
.settings-icon-button-wrap:focus-within .settings-icon-tooltip {
  opacity: 1;
}
.settings-row-inline-btn.utility:hover,
.settings-row-inline-btn.utility:focus-visible {
  color: #ffffff;
  border-color: rgba(182, 247, 255, 0.86);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 254, 255, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(120, 238, 255, 0.22), rgba(10, 28, 58, 0.94));
  box-shadow:
    0 0 18px rgba(115, 251, 255, 0.24),
    0 0 0 1px rgba(182, 247, 255, 0.18),
    inset 0 1px 0 rgba(245, 254, 255, 0.24);
}
.settings-row-inline-btn.rotate:hover,
.settings-row-inline-btn.rotate:focus-visible {
  color: #ffffff;
  border-color: rgba(182, 247, 255, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 254, 255, 0.26), transparent 58%),
    linear-gradient(180deg, rgba(120, 238, 255, 0.26), rgba(10, 28, 58, 0.96));
  box-shadow:
    0 0 20px rgba(115, 251, 255, 0.28),
    0 0 0 1px rgba(182, 247, 255, 0.2),
    inset 0 1px 0 rgba(245, 254, 255, 0.28);
}
.settings-row-inline-btn.danger:hover,
.settings-row-inline-btn.danger:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 134, 151, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 214, 220, 0.25), transparent 58%),
    linear-gradient(180deg, rgba(255, 77, 95, 0.48), rgba(118, 12, 28, 0.94));
  box-shadow:
    0 0 20px rgba(255, 77, 95, 0.36),
    0 0 0 1px rgba(255, 134, 151, 0.2),
    inset 0 1px 0 rgba(255, 230, 234, 0.3);
}
.settings-key-empty-state {
  margin: 0;
}
.settings-key-empty-state.error {
  color: #ffd7df;
}
@media (max-width: 1050px) {
  .portal-sidebar {
    inset-inline-start: 10px;
  }
  .announcement-panel,
  .personal-settings-panel,
  .model-prices-panel {
    width: auto;
    margin-inline: 12px;
  }
  .settings-key-dialog-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "status group"
      "expires expires"
      "quota quota"
      "actions actions";
  }
  .settings-key-toolbar {
    grid-template-columns: 1fr;
  }
  .user-key-dialog-shell {
    width: min(960px, calc(100vw - 32px));
  }
  .settings-editor-actions {
    justify-self: stretch;
  }
}
@media (max-width: 820px) {
  .portal-sidebar {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 6px;
  }
  .announcement-card-grid,
  .settings-overview-grid {
    grid-template-columns: 1fr;
  }
  .announcement-card-featured {
    grid-column: span 1;
  }
  .announcement-action-panel,
  .settings-api-manager-head,
  .settings-action-panel {
    align-items: stretch;
  }
  .settings-api-manager-head {
    grid-template-columns: 1fr;
  }
  .settings-key-dialog-form {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "status"
      "group"
      "expires"
      "quota"
      "actions";
  }
  .settings-api-manager-head-btn,
  #createUserKeyLaunchBtn,
  .settings-editor-actions,
  .settings-editor-actions button {
    width: 100%;
  }
  .user-key-dialog {
    padding: 16px;
  }
  .user-key-dialog-shell {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
  }
  .user-key-dialog-header,
  .user-key-dialog-body {
    padding-inline: 18px;
  }
  .settings-key-dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-key-dialog-actions button {
    width: 100%;
  }
  .settings-query-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "field"
      "control"
      "secret"
      "status";
  }
  .settings-query-control,
  .settings-one-time-secret {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .settings-one-time-secret {
    grid-template-areas:
      "secret-label"
      "secret-value"
      "secret-action";
  }
  .settings-one-time-secret .copy-btn {
    justify-self: stretch;
    width: 100%;
  }
  .settings-key-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
  }
  .settings-key-table {
    min-width: 0;
    display: block;
  }
  .settings-key-table thead {
    display: none;
  }
  .settings-key-table tbody {
    display: grid;
    gap: 12px;
  }
  .settings-summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(244, 248, 255, 0.14);
    background: rgba(8, 12, 40, 0.9);
    clip-path: var(--hud-clip-sm);
  }
  .settings-key-table td {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(244, 248, 255, 0.08);
  }
  .settings-key-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--sr-color-success-400);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }
  .settings-key-select-cell,
  .settings-key-identity-cell,
  .settings-key-actions-cell {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    text-align: left !important;
  }
  .settings-key-select-cell {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .settings-key-select-cell::before {
    margin-bottom: 0;
  }
  .settings-key-actions-cell {
    border-bottom: 0;
  }
  .settings-key-inline-actions {
    flex-wrap: wrap;
    white-space: normal;
  }
  .settings-icon-tooltip {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block-start: calc(100% + 8px);
    transform: none;
    max-width: min(220px, calc(100vw - 48px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-sidebar,
  .portal-sidebar-shell,
  .portal-sidebar-toggle,
  .portal-sidebar-toggle-mark svg,
  .portal-sidebar-tab,
  .portal-announcement-unread-dot,
  .portal-tab-copy,
  .portal-sidebar-brand,
  .portal-sidebar-hint,
  .user-key-dialog,
  .user-key-dialog-backdrop,
  .user-key-dialog-shell,
  .settings-api-manager-head-btn,
  .settings-api-manager-head-chevron,
  #createUserKeyLaunchBtn {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIGMA V5 INVITE GATE RESTORATION OVERRIDES
   Source: final Figma v5 desktop + mobile invite gate nodes.
   Keep behavior in app.js untouched; this section only restores the visual layer.
   ═══════════════════════════════════════════════════════════════ */
.invite-gate-shell {
  --gate-bg-top: #f7f8ff;
  --gate-bg-mist: #eef2ff;
  --gate-platform-violet: #655ef4;
  --gate-platform-deep: #3435a4;
  --gate-ink: #111a43;
  --gate-muted: #6e7598;
  --gate-terminal-bg: #081229;
  --gate-terminal-bg-2: #0b1730;
  --gate-terminal-line: rgba(123, 236, 255, 0.62);
  --gate-cta-gold: #ffd875;
  --gate-cta-gold-2: #ffe8a5;
  --gate-violet-line: #9c6cff;
  --gate-soft-border: rgba(130, 150, 230, 0.32);
  --gate-stage-radius: 28px;
  --gate-figma-desktop-node: WEBSHOT_ONLY_20260610_155618;
  --gate-figma-mobile-node: Mobile-UI-Redesign-v1-Backup;
  --gate-desktop-frame-height: 790px;
  --gate-desktop-floor-start: 82%;
  --gate-mobile-title-top: 60px;
  --gate-mobile-poster-top: 118px;
  --gate-mobile-terminal-top: 322px;
  --gate-mobile-terminal-height: 390px;
  background:
    radial-gradient(circle at 14% 12%, rgba(148, 119, 255, 0.14), transparent 24%),
    radial-gradient(circle at 78% 8%, rgba(91, 213, 255, 0.16), transparent 25%),
    linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) 51%, var(--gate-platform-violet) 52%, var(--gate-platform-deep) 100%);
  color: var(--gate-ink);
  padding: clamp(12px, 2vw, 24px) 16px;
}

.invite-gate-shell::before {
  background-image:
    radial-gradient(circle, rgba(98, 124, 210, 0.26) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(120, 151, 230, 0.18), transparent 42%, rgba(140, 110, 255, 0.14));
  background-size: 18px 18px, 100% 1px;
  opacity: 0.42;
  animation: none;
}

.invite-gate-shell::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.54), rgba(255,255,255,0.05) 24%, rgba(255,255,255,0.34) 55%, rgba(255,255,255,0.06)),
    linear-gradient(180deg, transparent 0 54%, rgba(255,255,255,0.24) 54%, transparent 55%);
  opacity: 0.68;
  mix-blend-mode: normal;
  animation: none;
}

.invite-gate-canvas,
.invite-gate-beam,
.invite-gate-scene {
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.invite-stage {
  width: min(1180px, 100%);
  place-items: center;
  animation: gate-panel-entrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.invite-hero-stage.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: clamp(26px, 3.6vw, 54px);
  min-height: clamp(560px, 76vh, 760px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--gate-soft-border);
  border-radius: 28px;
  clip-path: none;
  background:
    linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) 58%, rgba(132, 122, 255, 0.88) 58%, var(--gate-platform-violet) 100%);
  box-shadow:
    0 24px 72px rgba(65, 72, 165, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  overflow: hidden;
}

.invite-hero-stage.hero::before {
  content: "";
  position: absolute;
  inset: 57% 0 0;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px),
    radial-gradient(circle at 48% 8%, rgba(255,255,255,0.55), transparent 2px);
  background-size: 64px 42px, 64px 42px, 20px 20px;
  transform: perspective(560px) rotateX(58deg) translateY(-28px) scale(1.35);
  transform-origin: top center;
  opacity: 0.46;
  pointer-events: none;
}

.invite-hero-stage.hero::after {
  inset: 12px;
  border: 1px solid rgba(130, 150, 230, 0.30);
  border-radius: 20px;
  clip-path: none;
}

.invite-key-art-stage.hero-copy,
.invite-hero-stage .invite-key-art-stage {
  min-height: 520px;
  padding: 0;
  justify-content: flex-start;
}

.invite-glass-back {
  display: none;
}

.invite-glass-front {
  inset: 58px 5% auto 2%;
  z-index: 3;
  height: min(45vh, 360px);
  min-height: 300px;
  border: 1px solid rgba(120, 150, 230, 0.24);
  border-radius: 18px;
  clip-path: polygon(4% 0, 94% 6%, 100% 84%, 94% 100%, 0 88%);
  background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02));
  transform: rotate(-4deg);
  box-shadow:
    0 14px 38px rgba(102, 112, 214, 0.18),
    inset 0 0 0 1px rgba(255,255,255,0.36);
}

.invite-stage-poster {
  inset: 60px 5% auto 2%;
  z-index: 2;
  height: min(45vh, 360px);
  min-height: 360px;
  border: 0;
  border-radius: 16px;
  clip-path: polygon(4% 0, 94% 6%, 100% 84%, 94% 100%, 0 88%);
  transform: rotate(-4deg);
  background:
    linear-gradient(115deg, rgba(255,255,255,0.10), transparent 28%, rgba(154, 108, 255, 0.08) 80%),
    url("./assets/home-gate-v5-desktop-art.png") center 46% / cover no-repeat,
    #11184a;
  box-shadow:
    0 16px 38px rgba(94, 102, 198, 0.20),
    0 0 0 8px rgba(255, 255, 255, 0.74),
    0 0 0 10px rgba(146, 164, 234, 0.20);
  overflow: hidden;
}

.invite-stage-poster::before {
  inset: 0;
  border: 0;
  clip-path: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18), transparent 16% 72%, rgba(255,255,255,0.10)),
    radial-gradient(circle at 82% 20%, rgba(124, 112, 255, 0.18), transparent 26%);
}

.invite-stage-poster::after {
  inset: auto 0 0;
  height: 4px;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, rgba(156, 108, 255, 0.92) 30%, rgba(156, 108, 255, 0.92) 72%, transparent);
}

.invite-key-art-stage .yinlang-prism-burst,
.invite-key-art-stage .yinlang-energy-rail {
  display: none;
}

.invite-desktop-title {
  position: absolute;
  left: 2%;
  right: 8%;
  top: calc(60px + min(45vh, 360px) + 36px);
  z-index: 4;
  display: grid;
  gap: 14px;
  color: var(--gate-ink);
  pointer-events: none;
}

.invite-desktop-title strong {
  display: block;
  font-family: "Outfit", "Montserrat", var(--sr-font-body);
  font-size: clamp(48px, 5.7vw, 78px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.045em;
  color: #101a44;
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
}

.invite-desktop-title strong span {
  color: var(--gate-violet-line);
}

.invite-desktop-title i {
  display: block;
  width: min(280px, 48%);
  height: 4px;
  background:
    linear-gradient(90deg, var(--gate-violet-line) 0 58px, rgba(125, 133, 210, 0.24) 58px 100%);
}

.invite-desktop-title em {
  margin-top: 34px;
  color: rgba(48, 73, 145, 0.68);
  font-family: var(--sr-font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.invite-terminal.hero-card,
.invite-hero-stage .invite-terminal {
  align-self: center;
  min-height: min(54vh, 500px);
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3.8vw, 42px);
  border: 1px solid rgba(116, 235, 255, 0.76);
  border-radius: 22px;
  clip-path: polygon(5% 0, 95% 0, 100% 6%, 100% 94%, 95% 100%, 5% 100%, 0 94%, 0 6%);
  background:
    radial-gradient(circle at 18% 8%, rgba(42, 109, 185, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(10, 24, 48, 0.98), rgba(6, 15, 35, 0.99)),
    var(--gate-terminal-bg);
  box-shadow:
    0 22px 48px rgba(13, 30, 88, 0.38),
    0 0 0 2px rgba(30, 54, 102, 0.80),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 44px rgba(58, 105, 170, 0.18);
  gap: clamp(18px, 3vh, 28px);
}

.invite-terminal::before {
  inset: 12px;
  border: 1px solid rgba(112, 139, 220, 0.16);
  border-radius: 14px;
  clip-path: inherit;
}

.invite-terminal::after {
  display: none;
}

.invite-terminal .yinlang-stage-label {
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  background: none;
  color: rgba(185, 197, 220, 0.78);
  font-family: var(--sr-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: none;
}

.invite-terminal .yinlang-stage-label::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 16px;
  margin: -2px 12px 0 0;
  vertical-align: middle;
  border-radius: 999px;
  background: #4ce8ff;
  box-shadow: 0 0 14px rgba(76, 232, 255, 0.65);
}

.invite-prompt-label {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: rgba(246, 249, 255, 0.94);
  font-family: var(--sr-font-cjk);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: none;
}

.invite-terminal strong {
  max-width: none;
  margin: 0;
}

.invite-terminal strong .cyber-logotype {
  display: none;
}

.invite-terminal .invite-answer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(72px, 8.8vh, 94px);
  padding: 14px 22px;
  border: 1px solid rgba(123, 236, 255, 0.62);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(12, 25, 53, 0.96), rgba(11, 22, 48, 0.98)),
    var(--gate-terminal-bg-2);
  color: #ffffff;
  font-family: var(--sr-font-cjk);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 18px rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px rgba(56, 86, 148, 0.55);
}

.home-input-label {
  gap: 14px;
}

.home-input-label span {
  color: rgba(246, 249, 255, 0.96);
  font-family: var(--sr-font-cjk);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: none;
}

.invite-form {
  gap: clamp(18px, 3vh, 28px);
}

.invite-form input {
  min-height: clamp(66px, 8vh, 86px);
  padding: 18px 22px;
  border: 1px solid rgba(139, 157, 214, 0.68);
  border-radius: 8px;
  clip-path: none;
  background: rgba(8, 18, 42, 0.82);
  color: rgba(246, 249, 255, 0.96);
  font-size: clamp(16px, 1.4vw, 20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.invite-form input::placeholder {
  color: rgba(169, 177, 210, 0.64);
}

.invite-form button {
  min-height: clamp(70px, 8.6vh, 88px);
  border: 1px solid rgba(255, 229, 160, 0.92);
  border-radius: 8px;
  clip-path: polygon(4% 0, 96% 0, 100% 22%, 100% 78%, 96% 100%, 4% 100%, 0 78%, 0 22%);
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.34), transparent 16%),
    linear-gradient(180deg, var(--gate-cta-gold-2), var(--gate-cta-gold));
  color: #151719;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 16px 30px rgba(223, 174, 70, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.70);
}

.invite-form button::before {
  content: "→";
  position: absolute;
  right: clamp(20px, 2.4vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.18em;
  font-weight: 400;
  color: rgba(21, 23, 25, 0.72);
}

.invite-form button:hover {
  background: linear-gradient(180deg, #fff0ba, #ffd875);
  border-color: rgba(255,255,255,0.88);
  transform: translateY(-2px);
}

.invite-form button::after {
  background: rgba(255,255,255,0.28);
}

.invite-gate-platform {
  display: block;
  left: 50%;
  bottom: -30px;
  width: min(92vw, 1040px);
  height: 130px;
  translate: -50% 0;
  opacity: 0.48;
  background:
    linear-gradient(rgba(255,255,255,0.44) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.36) 1px, transparent 1px);
  background-size: 54px 32px;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.34));
}

@media (max-width: 1050px) {
  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
  }
}

@media (max-width: 820px) {
  .invite-hero-stage.hero,
  .invite-hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage {
    min-height: 440px;
  }
  .invite-desktop-title {
    top: 384px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    padding: 0;
    background:
      radial-gradient(circle at 16% 10%, rgba(153, 122, 255, 0.18), transparent 24%),
      linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) 56%, var(--gate-platform-violet) 78%, var(--gate-platform-deep) 100%);
  }

  .invite-gate-canvas,
  .invite-gate-beam,
  .invite-gate-scene,
  .invite-desktop-title,
  .invite-glass-front {
    display: none !important;
  }

  .invite-stage {
    width: 100%;
    min-height: 100svh;
    display: block;
  }

  .invite-hero-stage.hero,
  .invite-hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px;
    min-height: 100svh;
    padding: 64px clamp(22px, 6vw, 34px) 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  .invite-hero-stage.hero::before {
    inset: auto -40% -40px;
    height: 300px;
    transform: perspective(420px) rotateX(58deg) scale(1.28);
    opacity: 0.56;
  }

  .invite-mobile-title {
    display: grid;
    gap: 16px;
    padding: 0 0 10px;
  }

  .invite-mobile-title span {
    display: none;
  }

  .invite-mobile-title strong {
    font-family: "Outfit", "Montserrat", var(--sr-font-body);
    font-size: clamp(42px, 12vw, 64px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.09em;
    color: var(--gate-ink);
  }

  .invite-mobile-title i {
    width: 130px;
    height: 6px;
    border-radius: 999px;
    background: var(--gate-violet-line);
    box-shadow: 0 0 18px rgba(156, 108, 255, 0.26);
  }

  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage {
    min-height: 0;
    padding: 0;
    order: 2;
    overflow: visible;
  }

  .invite-stage-poster {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1.73 / 1;
    border-radius: 24px;
    clip-path: none;
    transform: none;
    background:
      linear-gradient(110deg, rgba(255,255,255,0.08), transparent 22%, rgba(156,108,255,0.10) 86%),
      url("./assets/home-gate-v5-desktop-art.png") center 45% / cover no-repeat,
      #121949;
    box-shadow:
      0 16px 34px rgba(75, 86, 185, 0.18),
      0 0 0 1px rgba(139, 158, 224, 0.38),
      inset 0 0 0 1px rgba(255,255,255,0.25);
  }

  .invite-stage-poster::before {
    background: linear-gradient(120deg, rgba(255,255,255,0.18), transparent 24%, transparent 76%, rgba(255,255,255,0.08));
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    order: 3;
    min-height: 0;
    gap: 22px;
    padding: clamp(28px, 7vw, 38px) clamp(22px, 6vw, 34px) clamp(32px, 8vw, 44px);
    border-radius: 24px;
    clip-path: polygon(4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 4%);
    border: 1px solid rgba(116, 235, 255, 0.72);
  }

  .invite-terminal .yinlang-stage-label {
    font-size: 14px;
  }

  .invite-prompt-label,
  .home-input-label span {
    font-size: clamp(22px, 6vw, 30px);
  }

  .invite-terminal .invite-answer-text {
    min-height: 88px;
    border-radius: 10px;
    font-size: clamp(34px, 9.2vw, 48px);
    letter-spacing: 0.18em;
  }

  .invite-form input {
    min-height: 92px;
    padding: 22px 26px;
    border-radius: 10px;
    font-size: clamp(20px, 5.3vw, 28px);
  }

  .invite-form button {
    min-height: 72px;
    border-radius: 10px;
    font-size: clamp(26px, 7.4vw, 38px);
    letter-spacing: 0.1em;
  }

  .invite-gate-platform {
    width: 150vw;
    height: 260px;
    bottom: -60px;
    opacity: 0.58;
  }
}

/* Figma v5 mobile fit pass: keep the real form in the first mobile fold. */
@media (max-width: 680px) {
  .invite-hero-stage.hero,
  .invite-hero-stage {
    gap: 14px;
    padding: clamp(34px, 8vw, 42px) clamp(22px, 6vw, 34px) 28px;
    overflow: visible;
  }

  .invite-mobile-title {
    gap: 8px;
    justify-items: center;
    padding: 0 0 6px;
  }

  .invite-mobile-title strong {
    white-space: nowrap;
    font-size: clamp(30px, 8.8vw, 36px);
    line-height: 1.04;
    letter-spacing: 0.055em;
  }

  .invite-mobile-title i {
    width: 72px;
    height: 3px;
  }

  .invite-stage-poster {
    aspect-ratio: 1.64 / 1;
    border-radius: 20px;
    background-position: center 44%;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    gap: 13px;
    padding: 20px 22px 24px;
    border-radius: 22px;
    clip-path: polygon(4% 0, 96% 0, 100% 5%, 100% 95%, 96% 100%, 4% 100%, 0 95%, 0 5%);
  }

  .invite-terminal .yinlang-stage-label {
    padding-left: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(185, 197, 220, 0.78);
  }

  .invite-terminal .yinlang-stage-label::before {
    width: 3px;
    height: 14px;
    margin-right: 9px;
  }

  .invite-terminal .yinlang-stage-label::after {
    content: none;
  }

  .invite-prompt-label,
  .home-input-label span {
    font-size: clamp(17px, 4.7vw, 20px);
  }

  .invite-terminal .invite-answer-text {
    min-height: 58px;
    padding: 9px 14px;
    font-size: clamp(25px, 7.2vw, 30px);
    letter-spacing: 0.16em;
  }

  .home-input-label {
    gap: 9px;
  }

  .invite-form {
    gap: 13px;
  }

  .invite-form input {
    min-height: 54px;
    padding: 12px 16px;
    font-size: clamp(16px, 4.4vw, 19px);
  }

  .invite-form button {
    min-height: 58px;
    font-size: clamp(22px, 6.1vw, 26px);
    letter-spacing: 0.08em;
  }

  .invite-form button::before {
    right: 22px;
    font-size: 1.05em;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIGMA V5 LEGACY PASS REMOVED 2026-06-11
   Source nodes exported from current Figma v5:
   - Desktop: WEBSHOT_ONLY_20260610_155618, 1228×912
   - Mobile: Mobile-UI-Redesign-v1-Backup, 862×1824
   These rules intentionally sit after the legacy gate block so visual geometry
   is controlled from one final pass without touching app.js or Worker logic.
   ═══════════════════════════════════════════════════════════════ */
.invite-gate-shell {
  --gate-desktop-frame-height: 790px;
  --gate-desktop-floor-start: 80%;
  --gate-mobile-title-top: 60px;
  --gate-mobile-poster-top: 118px;
  --gate-mobile-terminal-top: 322px;
  --gate-mobile-terminal-height: 430px;
  padding: 0 16px;
  background:
    radial-gradient(circle at 14% 12%, rgba(148, 119, 255, 0.14), transparent 24%),
    radial-gradient(circle at 78% 8%, rgba(91, 213, 255, 0.16), transparent 25%),
    linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) 51%, var(--gate-platform-violet) 88%, var(--gate-platform-deep) 100%);
}

@media (min-width: 681px) {
  .invite-stage {
    width: min(1180px, calc(100vw - 56px));
  }

  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 664px) 430px;
    gap: 40px;
    min-height: var(--gate-desktop-frame-height);
    padding: 58px 48px 48px;
    background:
      linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) var(--gate-desktop-floor-start), rgba(132, 122, 255, 0.88) var(--gate-desktop-floor-start), var(--gate-platform-violet) 100%);
  }

  .invite-hero-stage.hero::before {
    inset: var(--gate-desktop-floor-start) 0 0;
    transform: perspective(560px) rotateX(58deg) translateY(-18px) scale(1.35);
  }

  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage {
    min-height: 684px;
  }

  .invite-stage-poster,
  .invite-glass-front {
    inset: 58px 4.8% auto 0;
    height: 382px;
    min-height: 382px;
    transform: rotate(4deg);
    transform-origin: 50% 58%;
  }

  .invite-stage-poster {
    background:
      linear-gradient(115deg, rgba(255,255,255,0.10), transparent 28%, rgba(154, 108, 255, 0.08) 80%),
      url("./assets/home-gate-v5-desktop-art.png") center 46% / cover no-repeat,
      #11184a;
  }

  .invite-desktop-title {
    top: 462px;
    left: 0;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    align-self: start;
    margin-top: 68px;
    min-height: 552px;
    padding: 42px 42px 38px;
    gap: 24px;
  }

  .invite-terminal .yinlang-stage-label {
    font-size: 13px;
  }

  .invite-prompt-label {
    font-size: 22px;
  }

  .invite-terminal .invite-answer-text {
    min-height: 76px;
    font-size: 36px;
  }

  .home-input-label span {
    font-size: 22px;
  }

  .invite-form input {
    min-height: 76px;
    font-size: 18px;
  }

  .invite-form button {
    min-height: 78px;
    font-size: 30px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    min-height: 100svh;
    background:
      radial-gradient(circle at 16% 10%, rgba(153, 122, 255, 0.18), transparent 24%),
      linear-gradient(180deg, var(--gate-bg-top) 0%, var(--gate-bg-mist) 67%, var(--gate-platform-violet) 86%, var(--gate-platform-deep) 100%);
  }

  .invite-hero-stage.hero,
  .invite-hero-stage {
    gap: 0;
    min-height: 100svh;
    padding: var(--gate-mobile-title-top) 24px 28px;
    overflow: visible;
  }

  .invite-mobile-title {
    gap: 14px;
    justify-items: center;
    padding: 0 0 28px;
  }

  .invite-mobile-title strong {
    white-space: nowrap;
    font-size: clamp(38px, 10.2vw, 44px);
    line-height: 1.04;
    letter-spacing: 0.075em;
  }

  .invite-mobile-title i {
    width: 128px;
    height: 3px;
  }

  .invite-stage-poster {
    aspect-ratio: 1.72 / 1;
    border-radius: 20px;
    background-position: center 44%;
    margin-bottom: 36px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    gap: 18px;
    min-height: var(--gate-mobile-terminal-height);
    padding: 30px 22px 28px;
    border-radius: 22px;
    clip-path: polygon(4% 0, 96% 0, 100% 5%, 100% 95%, 96% 100%, 4% 100%, 0 95%, 0 5%);
  }

  .invite-terminal .yinlang-stage-label {
    padding-left: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(185, 197, 220, 0.78);
  }

  .invite-terminal .yinlang-stage-label::after {
    content: none;
  }

  .invite-prompt-label,
  .home-input-label span {
    font-size: clamp(19px, 5.1vw, 23px);
  }

  .invite-terminal .invite-answer-text {
    min-height: 76px;
    padding: 12px 14px;
    font-size: clamp(30px, 8.2vw, 36px);
    letter-spacing: 0.16em;
  }

  .home-input-label {
    gap: 10px;
  }

  .invite-form {
    gap: 18px;
  }

  .invite-form input {
    min-height: 66px;
    padding: 14px 16px;
    font-size: clamp(18px, 4.8vw, 21px);
  }

  .invite-form button {
    min-height: 76px;
    font-size: clamp(27px, 7.1vw, 32px);
    letter-spacing: 0.08em;
  }

  .invite-form button::before {
    right: 22px;
    font-size: 1.05em;
  }

  .invite-gate-platform {
    width: 160vw;
    height: 260px;
    bottom: -86px;
    opacity: 0.64;
  }
}

/* FIGMA V5 LEGACY PASS REMOVED 2 — Firefox screenshot alignment */
@media (min-width: 681px) {
  .invite-stage {
    width: min(1180px, calc(100vw - 72px));
  }

  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 646px) 382px;
    gap: 54px;
    padding: 54px 58px 44px;
  }

  .invite-stage-poster,
  .invite-glass-front {
    inset: 42px -2px auto -8px;
    height: 392px;
    min-height: 392px;
  }

  .invite-desktop-title {
    top: 438px;
    left: -8px;
  }

  .invite-desktop-title strong {
    font-size: clamp(54px, 5.25vw, 76px);
    letter-spacing: 0.036em;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    margin-top: 74px;
    min-height: 500px;
    padding: 38px 34px 34px;
    gap: 20px;
  }

  .invite-terminal .yinlang-stage-label {
    font-size: 11px;
  }

  .invite-prompt-label {
    font-size: 18px;
  }

  .invite-terminal .invite-answer-text {
    min-height: 66px;
    font-size: 30px;
  }

  .home-input-label span {
    font-size: 18px;
  }

  .invite-form input {
    min-height: 64px;
    font-size: 16px;
  }

  .invite-form button {
    min-height: 66px;
    font-size: 26px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    --gate-mobile-terminal-height: 430px;
    --gate-mobile-title-top: 28px;
  }

  .invite-hero-stage.hero,
  .invite-hero-stage {
    padding: var(--gate-mobile-title-top) 22px 28px;
  }

  .invite-mobile-title {
    gap: 10px;
    padding-bottom: 24px;
  }

  .invite-mobile-title strong {
    font-size: clamp(30px, 8.2vw, 34px);
    letter-spacing: 0.07em;
  }

  .invite-mobile-title i {
    width: 98px;
  }

  .invite-stage-poster {
    width: calc(100% + 2px);
    margin-inline: -1px;
    margin-bottom: 42px;
    aspect-ratio: 1.73 / 1;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    gap: 14px;
    min-height: var(--gate-mobile-terminal-height);
    padding: 28px 22px 26px;
  }

  .invite-terminal .yinlang-stage-label {
    font-size: 11px;
  }

  .invite-prompt-label,
  .home-input-label span {
    font-size: clamp(16px, 4.4vw, 19px);
  }

  .invite-terminal .invite-answer-text {
    min-height: 66px;
    font-size: clamp(25px, 7vw, 30px);
  }

  .invite-form {
    gap: 14px;
  }

  .invite-form input {
    min-height: 58px;
    font-size: clamp(16px, 4.3vw, 19px);
  }

  .invite-form button {
    min-height: 70px;
    font-size: clamp(24px, 6.4vw, 28px);
  }
}

/* FIGMA V5 LEGACY PASS REMOVED 3 — bbox-calibrated final geometry */
@media (min-width: 681px) {
  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 676px) 418px;
    gap: 34px;
    padding: 54px 48px 44px;
  }

  .invite-stage-poster,
  .invite-glass-front {
    inset: 42px 10px auto -20px;
    height: 410px;
    min-height: 410px;
  }

  .invite-desktop-title {
    top: 458px;
    left: -18px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    margin-top: 72px;
    min-height: 548px;
    padding: 38px 38px 34px;
    gap: 20px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    --gate-mobile-title-top: 8px;
    --gate-mobile-terminal-height: 398px;
  }

  .invite-hero-stage.hero,
  .invite-hero-stage {
    padding-inline: 24px;
  }

  .invite-mobile-title {
    padding-bottom: 18px;
  }

  .invite-stage-poster {
    width: calc(100% + 14px);
    margin-inline: -7px;
    margin-bottom: 30px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    min-height: var(--gate-mobile-terminal-height);
    padding: 26px 22px 24px;
  }
}

/* FIGMA V5 LEGACY PASS REMOVED 4 — final micro-adjust */
@media (min-width: 681px) {
  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 664px) 404px;
    gap: 40px;
    padding: 50px 48px 44px;
  }

  .invite-stage-poster,
  .invite-glass-front {
    inset: 30px 8px auto -26px;
    height: 418px;
    min-height: 418px;
  }

  .invite-desktop-title {
    top: 448px;
    left: -24px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    margin-top: 66px;
    min-height: 530px;
    padding: 38px 40px 34px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    --gate-mobile-title-top: 2px;
    --gate-mobile-terminal-height: 410px;
  }

  .invite-mobile-title {
    padding-bottom: 14px;
  }

  .invite-stage-poster {
    margin-bottom: 24px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    width: calc(100% - 6px);
    margin-inline: 3px;
    min-height: var(--gate-mobile-terminal-height);
    padding: 24px 20px 22px;
  }
}

/* FIGMA V5 LEGACY PASS REMOVED 5 — desktop title/card + mobile overlap calibration */
@media (min-width: 681px) {
  .invite-stage {
    width: min(1166px, calc(100vw - 88px));
  }

  .invite-hero-stage.hero {
    grid-template-columns: minmax(0, 648px) 432px;
    gap: 30px;
    padding: 50px 52px 42px;
  }

  .invite-stage-poster,
  .invite-glass-front {
    inset: 34px 18px auto -34px;
    height: 404px;
    min-height: 404px;
  }

  .invite-desktop-title {
    top: 452px;
    left: -18px;
    right: auto;
    width: 648px;
    gap: 10px;
  }

  .invite-desktop-title strong {
    font-size: clamp(58px, 5.55vw, 78px);
    letter-spacing: 0.032em;
  }

  .invite-desktop-title i {
    width: 228px;
  }

  .invite-desktop-title em {
    margin-top: 22px;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    width: 432px;
    margin-top: 72px;
    min-height: 542px;
    padding: 40px 38px 34px;
  }
}

@media (max-width: 680px) {
  .invite-gate-shell {
    --gate-mobile-title-top: 2px;
    --gate-mobile-terminal-height: 374px;
  }

  .invite-hero-stage.hero,
  .invite-hero-stage {
    align-items: start;
    align-content: start;
    padding: var(--gate-mobile-title-top) 22px 24px;
  }

  .invite-mobile-title {
    position: relative;
    top: 0;
    gap: 8px;
    padding-bottom: 14px;
  }

  .invite-mobile-title strong {
    font-size: clamp(31px, 8.4vw, 35px);
  }

  .invite-mobile-title i {
    width: 104px;
  }

  .invite-stage-poster {
    width: calc(100% + 4px);
    margin: 0 -2px 0;
    aspect-ratio: 1.62 / 1;
    background-position: center 44%;
  }

  .invite-key-art-stage.hero-copy,
  .invite-hero-stage .invite-key-art-stage {
    align-self: start;
  }

  .invite-terminal.hero-card,
  .invite-hero-stage .invite-terminal {
    position: relative;
    z-index: 3;
    width: calc(100% + 10px);
    margin: -18px -5px 0;
    min-height: var(--gate-mobile-terminal-height);
    padding: 22px 18px 20px;
    gap: 11px;
  }

  .invite-terminal .yinlang-stage-label {
    font-size: 10px;
  }

  .invite-prompt-label,
  .home-input-label span {
    font-size: clamp(14px, 4vw, 16px);
  }

  .invite-terminal .invite-answer-text {
    min-height: 58px;
    padding: 10px 12px;
    font-size: clamp(22px, 6.3vw, 26px);
  }

  .invite-form {
    gap: 10px;
  }

  .invite-form input {
    min-height: 52px;
    padding: 10px 14px;
    font-size: clamp(15px, 4.1vw, 17px);
  }

  .invite-form button {
    min-height: 62px;
    font-size: clamp(21px, 5.9vw, 24px);
  }
}

/* BEGIN FIGMA V5 GATE FINAL REBUILD */
body.is-home-gated #homeGate {
  width: 100%;
}

.gate-v5-shell {
  --gate-v5-desktop-terminal-left: 61.1%;
  --gate-v5-desktop-terminal-top: 16.45%;
  --gate-v5-desktop-terminal-width: 33.55%;
  --gate-v5-desktop-shell-height: 55.95%;
  --gate-v5-mobile-terminal-left: 5.25%;
  --gate-v5-mobile-terminal-top: 41.05%;
  --gate-v5-mobile-terminal-width: 88.2%;
  --gate-v5-mobile-shell-height: 40.2%;
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0;
  color: #13235f;
  background: transparent;
  overflow: hidden;
}

.gate-v5-stage {
  position: relative;
  width: min(1221px, 100vw, calc(100svh * 1221 / 912));
  aspect-ratio: 1221 / 912;
}

.gate-v5-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: url("./assets/home-gate-v5-reference-desktop.png?v=20260618-v5-interaction") center / 100% 100% no-repeat;
}

.gate-v5-frame::before,
.gate-v5-frame::after,
.gate-v5-desktop-visual,
.gate-v5-mobile-visual,
.gate-v5-terminal-visual,
.gate-v5-floor {
  display: none !important;
}

.gate-v5-terminal,
.gate-v5-bubble {
  position: absolute;
}

.gate-v5-terminal {
  left: var(--gate-v5-desktop-terminal-left);
  top: var(--gate-v5-desktop-terminal-top);
  width: var(--gate-v5-desktop-terminal-width);
  height: var(--gate-v5-desktop-shell-height);
  z-index: 3;
  display: block;
  padding: 32px 34px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.gate-v5-terminal-label {
  margin: 0 0 30px;
  padding: 0 0 0 2px;
  color: transparent;
  font-family: var(--sr-font-mono);
  font-size: 8px;
  line-height: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gate-v5-terminal-label::before {
  content: "";
  display: none;
  width: 3px;
  height: 12px;
  margin-right: 10px;
  border-radius: 999px;
  background: #35e7ff;
  vertical-align: middle;
  box-shadow: 0 0 14px rgba(53, 231, 255, 0.55);
}

.gate-v5-prompt,
.gate-v5-input-label > span:first-child {
  color: transparent;
  font-family: var(--sr-font-cjk);
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
}

.gate-v5-prompt {
  display: block;
  margin: 0 0 36px;
}

.gate-v5-terminal strong {
  display: block;
  margin: 0 0 38px;
}

.gate-v5-answer-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 75px;
  height: 75px;
  padding: 0 24px;
  color: transparent;
  font-family: var(--sr-font-cjk);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: transparent;
  user-select: none;
}

.gate-v5-form {
  display: grid;
  gap: 16px;
}

.gate-v5-input-label {
  display: grid;
  gap: 18px;
}

.gate-v5-input-shell {
  position: relative;
  display: block;
  width: 100%;
  min-height: 74px;
  height: 74px;
}

.gate-v5-input-mirror,
.gate-v5-form input,
.gate-v5-form button {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.gate-v5-input-mirror {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  padding: 0 22px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 17px;
  line-height: 74px;
  white-space: nowrap;
  pointer-events: none;
}

.gate-v5-form input {
  position: relative;
  z-index: 2;
  min-height: 74px;
  height: 74px;
  padding: 0 22px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  color: transparent;
  caret-color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 74px;
}

.gate-v5-form input::placeholder {
  color: transparent;
}

.gate-v5-form input:not(:placeholder-shown) {
  color: transparent;
}

.gate-v5-form input:focus,
.gate-v5-form input:focus-visible,
.gate-v5-form button:focus,
.gate-v5-form button:focus-visible {
  outline: none;
  box-shadow: none;
}

.gate-v5-form button {
  min-height: 77px;
  height: 77px;
  color: transparent;
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.gate-v5-form button::before {
  content: "";
}

.gate-v5-form button:hover {
  filter: brightness(1.02);
}

.gate-v5-bubble {
  top: 18.2%;
  left: 34.8%;
  z-index: 4;
  min-width: 168px;
  max-width: 240px;
  padding: 12px 16px;
  border: 2px solid rgba(20, 27, 58, 0.82);
  border-radius: 24px 26px 22px 26px;
  background: rgba(248, 244, 255, 0.96);
  color: #1c1630;
  font-family: var(--sr-font-cjk);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  box-shadow:
    0 10px 0 rgba(18, 26, 61, 0.16),
    0 14px 28px rgba(42, 48, 98, 0.22);
  transform: rotate(-5deg);
}

.gate-v5-bubble[hidden] {
  display: none !important;
}

.gate-v5-bubble::before,
.gate-v5-bubble::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.gate-v5-bubble::before {
  left: 30px;
  bottom: -20px;
  width: 42px;
  height: 26px;
  background: rgba(20, 27, 58, 0.82);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

.gate-v5-bubble::after {
  left: 34px;
  bottom: -13px;
  width: 32px;
  height: 20px;
  background: rgba(248, 244, 255, 0.96);
  clip-path: polygon(0 0, 100% 0, 22% 100%);
}

@media (max-width: 680px) {
  .gate-v5-shell {
    padding: 0;
  }

  .gate-v5-stage {
    width: 100vw;
    max-width: 390px;
    aspect-ratio: 862 / 1824;
  }

  .gate-v5-frame {
    background-image: url("./assets/home-gate-v5-reference-mobile.png?v=20260618-v5-interaction");
  }

  .gate-v5-terminal {
    left: var(--gate-v5-mobile-terminal-left);
    top: var(--gate-v5-mobile-terminal-top);
    width: var(--gate-v5-mobile-terminal-width);
    height: var(--gate-v5-mobile-shell-height);
    padding: 22px 24px 0;
  }

  .gate-v5-terminal-label {
    margin-bottom: 34px;
    font-size: 7px;
    line-height: 10px;
  }

  .gate-v5-prompt,
  .gate-v5-input-label > span:first-child {
    font-size: 14px;
    line-height: 20px;
  }

  .gate-v5-prompt {
    margin-bottom: 28px;
  }

  .gate-v5-terminal strong {
    margin-bottom: 28px;
  }

  .gate-v5-answer-text {
    min-height: 68px;
    height: 68px;
    padding: 0 12px;
    font-size: 28px;
    letter-spacing: 0.03em;
  }

  .gate-v5-input-label {
    gap: 20px;
  }

  .gate-v5-input-shell {
    min-height: 66px;
    height: 66px;
  }

  .gate-v5-form {
    gap: 20px;
  }

  .gate-v5-input-mirror {
    padding: 0 16px;
    font-size: 16px;
    line-height: 66px;
  }

  .gate-v5-form input {
    min-height: 66px;
    height: 66px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 66px;
  }

  .gate-v5-form button {
    min-height: 74px;
    height: 74px;
    font-size: 24px;
    line-height: 30px;
  }

  .gate-v5-bubble {
    top: 33.8%;
    left: 11%;
    min-width: 0;
    max-width: 72%;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-v5-stage,
  .gate-v5-terminal,
  .gate-v5-form button {
    animation: none !important;
    transition: none !important;
  }
}
/* END FIGMA V5 GATE FINAL REBUILD */