@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/styles/styles.css

@@ -1,2087 +0,0 @@
-@import "tailwindcss";
-@import "./base.css";
-@import "./anime.css";
-@import "./onboarding-game.css";
-
-@source "..";
-@source "../../../apps/app/src";
-
-/*
- * Map the existing theme CSS custom properties to Tailwind theme tokens.
- * Using @theme inline so Tailwind inlines var() references rather than
- * generating duplicate CSS variables. This lets the [data-theme="..."]
- * selectors in base.css drive all visual changes at runtime.
- */
-@theme inline {
-  /* Colors — surfaces */
-  --color-bg: var(--bg);
-  --color-bg-accent: var(--bg-accent);
-  --color-bg-elevated: var(--bg-elevated);
-  --color-bg-hover: var(--bg-hover);
-  --color-bg-muted: var(--bg-muted);
-  --color-card: var(--card);
-  --color-card-fg: var(--card-foreground);
-  --color-surface: var(--surface);
-
-  /* Colors — text */
-  --color-txt: var(--text);
-  --color-txt-strong: var(--text-strong);
-  --color-txt-chat: var(--chat-text);
-  --color-muted: var(--muted);
-  --color-muted-strong: var(--muted-strong);
-
-  /* Colors — border */
-  --color-border: var(--border);
-  --color-border-strong: var(--border-strong);
-  --color-border-hover: var(--border-hover);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Colors — accent */
-  --color-accent: var(--accent);
-  --color-accent-hover: var(--accent-hover);
-  --color-accent-muted: var(--accent-muted);
-  --color-accent-subtle: var(--accent-subtle);
-  --color-accent-fg: var(--accent-foreground);
-  --color-primary: var(--primary);
-  --color-primary-fg: var(--primary-foreground);
-
-  /* Colors — status */
-  --color-ok: var(--ok);
-  --color-ok-muted: var(--ok-muted);
-  --color-ok-subtle: var(--ok-subtle);
-  --color-warn: var(--warn);
-  --color-warn-muted: var(--warn-muted);
-  --color-warn-subtle: var(--warn-subtle);
-  --color-danger: var(--danger);
-  --color-destructive: var(--destructive);
-  --color-destructive-fg: var(--destructive-foreground);
-  --color-destructive-subtle: var(--destructive-subtle);
-  --color-muted-strong: var(--muted-strong);
-
-  /* Colors — header */
-  --color-header-bg: var(--header-bar-bg);
-  --color-header-fg: var(--header-bar-fg);
-
-  /* Colors — chain icons */
-  --color-chain-eth: #627eea;
-  --color-chain-base: #0052ff;
-  --color-chain-arb: #28a0f0;
-  --color-chain-op: #ff0420;
-  --color-chain-pol: #8247e5;
-  --color-chain-sol: #9945ff;
-  --color-chain-bsc: #f0b90b;
-
-  /* Fonts */
-  --font-body: var(--font-body);
-  --font-mono: var(--mono);
-  --font-display: var(--font-display);
-  --font-chat: var(--font-chat);
-
-  /* Shadows */
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-
-  /* Radius */
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-}
-
-/* ── Global resets ──────────────────────────────────────────────────── */
-
-#root {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-  font-family: var(--font-body);
-  color: var(--text);
-  background: var(--bg);
-}
-
-/* ── Typing indicator animation ─────────────────────────────────────── */
-
-@keyframes typing-bounce {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
-    transform: translateY(0);
-  }
-
-  30% {
-    opacity: 1;
-    transform: translateY(-4px);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pc-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Onboarding speech bubble arrow ─────────────────────────────────── */
-
-.onboarding-speech::after {
-  content: "";
-  position: absolute;
-  top: -8px;
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-  width: 14px;
-  height: 14px;
-  background: var(--card);
-  border-left: 1px solid var(--border);
-  border-top: 1px solid var(--border);
-}
-
-/* ── Wallet tooltip hover bridge ────────────────────────────────────── */
-
-.wallet-wrapper::after {
-  content: "";
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  height: 8px;
-}
-
-.wallet-wrapper:hover::after {
-  display: block;
-}
-
-.wallet-wrapper:hover .wallet-tooltip {
-  display: block;
-}
-
-.wallet-wrapper:focus-within::after {
-  display: block;
-}
-
-.wallet-wrapper:focus-within .wallet-tooltip {
-  display: block;
-}
-
-/* ── Button base classes ───────────────────────────────────────────── */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 16px;
-  border: 1px solid var(--accent);
-  background: var(--accent);
-  color: var(--accent-foreground);
-  cursor: pointer;
-  font-size: 13px;
-  font-family: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-  border-radius: var(--radius-lg);
-  transition: opacity var(--duration-fast, 100ms);
-}
-
-.btn:hover {
-  opacity: 0.85;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ── Settings page controls ─────────────────────────────────────────── */
-
-.settings-scroll-region {
-  scrollbar-gutter: stable;
-  scroll-padding-top: 7rem;
-}
-
-.settings-page-content
-  :is(button.inline-flex, a.inline-flex, .btn):not(
-    .settings-compact-button
-  ):not(.settings-icon-button) {
-  min-height: 2.625rem;
-  padding-inline: 1rem;
-  border-radius: calc(var(--radius-lg) + 2px);
-}
-
-.settings-button {
-  min-height: 2.625rem;
-  padding-inline: 1rem;
-  border-radius: calc(var(--radius-lg) + 2px);
-}
-
-.settings-card-button {
-  min-height: 5.5rem;
-  padding: 1.25rem;
-  border-radius: calc(var(--radius-xl) + 2px);
-}
-
-.settings-compact-button {
-  min-height: auto;
-  padding-inline: 0;
-}
-
-.settings-icon-button {
-  padding-inline: 0;
-}
-
-/* ── Loading screen ───────────────────────────────────────────────── */
-
-/* ── NieR: Automata–style loading screen ─────────────────────────── */
-
-.loading-screen {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  height: 100dvh;
-  background: #0c0e14;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Centered content wrapper */
-.loading-screen__center {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 14px;
-  width: 420px;
-  max-width: 90vw;
-}
-
-/* LOADING title */
-.loading-screen__title {
-  font-family: var(--mono, monospace);
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.35em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.7);
-  user-select: none;
-}
-
-.loading-screen__dots::after {
-  content: "";
-  animation: loading-dots 1.5s steps(4) infinite;
-}
-
-@keyframes loading-dots {
-  0% {
-    content: "";
-  }
-  25% {
-    content: ".";
-  }
-  50% {
-    content: "..";
-  }
-  75% {
-    content: "...";
-  }
-}
-
-/* Progress bar row: bar + percentage */
-.loading-screen__bar-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-}
-
-.loading-screen__progress-track {
-  flex: 1;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-  position: relative;
-}
-
-.loading-screen__progress-fill {
-  height: 100%;
-  background: rgba(255, 255, 255, 0.85);
-  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-}
-
-/* Percentage label */
-.loading-screen__percent {
-  font-family: var(--mono, monospace);
-  font-size: 13px;
-  font-weight: 400;
-  letter-spacing: 0.15em;
-  color: rgba(255, 255, 255, 0.6);
-  min-width: 48px;
-  text-align: right;
-  user-select: none;
-}
-
-/* Phase sub-label */
-.loading-screen__phase {
-  font-family: var(--mono, monospace);
-  font-size: 11px;
-  font-weight: 400;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.35);
-  user-select: none;
-}
-
-/* Avatar loader indeterminate bar */
-@keyframes avatar-loader-progress {
-  0% {
-    width: 20%;
-    opacity: 0.6;
-  }
-  50% {
-    width: 70%;
-    opacity: 1;
-  }
-  100% {
-    width: 20%;
-    opacity: 0.6;
-  }
-}
-
-/* ── Animation utilities ────────────────────────────────────────────── */
-
-.animate-in {
-  animation: fade-in 200ms ease-out;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.slide-in-from-right {
-  animation: slide-in-right 200ms ease-out;
-}
-
-@keyframes slide-in-right {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* ── Enhanced transitions ──────────────────────────────────────────── */
-
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.hover\:scale-105:hover {
-  transform: scale(1.05);
-}
-
-.active\:scale-95:active {
-  transform: scale(0.95);
-}
-
-.hover\:translate-x-1:hover {
-  transform: translateX(4px);
-}
-
-/* Utility: hide scrollbar */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-.chat-native-scrollbar {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(240, 178, 50, 0.55) transparent;
-}
-
-.chat-native-scrollbar::-webkit-scrollbar {
-  width: 10px;
-}
-
-.chat-native-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.chat-native-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 225, 150, 0.9) 0%,
-    rgba(240, 178, 50, 0.72) 55%,
-    rgba(201, 128, 24, 0.78) 100%
-  );
-  border-radius: 9999px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-
-.chat-native-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(
-    180deg,
-    rgba(255, 232, 170, 0.95) 0%,
-    rgba(240, 178, 50, 0.82) 55%,
-    rgba(201, 128, 24, 0.88) 100%
-  );
-}
-
-/* Focus trap for modals */
-.focus-trap {
-  outline: none;
-}
-
-.focus-trap:focus {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* Touch-friendly utilities - min 44px for accessibility */
-.touch-min-h {
-  min-height: 44px;
-}
-
-.touch-min-w {
-  min-width: 44px;
-}
-
-/* Keyboard shortcuts styling */
-kbd {
-  font-family: var(--mono);
-}
-
-/* Enhanced animations and transitions */
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes shake {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translateX(-2px);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translateX(2px);
-  }
-}
-
-@keyframes glow {
-  0%,
-  100% {
-    box-shadow:
-      0 0 5px var(--accent),
-      0 0 10px var(--accent);
-  }
-
-  50% {
-    box-shadow:
-      0 0 20px var(--accent),
-      0 0 30px var(--accent);
-  }
-}
-
-.animate-slide-up {
-  animation: slide-up 0.3s ease-out;
-}
-
-.animate-slide-down {
-  animation: slide-down 0.3s ease-out;
-}
-
-.animate-scale-in {
-  animation: scale-in 0.2s ease-out;
-}
-
-.animate-shake {
-  animation: shake 0.5s ease-in-out;
-}
-
-.animate-glow {
-  animation: glow 2s ease-in-out infinite;
-}
-
-/* Smooth transitions */
-.transition-smooth {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.transition-bounce {
-  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-/* Focus ring improvements */
-.focus-ring:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--accent);
-}
-
-.focus-ring:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--accent);
-}
-
-/* Hover lift effect */
-.hover-lift {
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.hover-lift:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-/* Press effect */
-.press:active {
-  transform: scale(0.98);
-}
-
-/* Dark mode contrast improvements */
-[data-theme="dark"] .text-muted {
-  color: hsl(240 5% 64.9%);
-}
-
-[data-theme="dark"] .text-muted-strong {
-  color: hsl(240 4% 74%);
-}
-
-[data-theme="dark"] .bg-bg-accent {
-  background-color: hsl(240 5.9% 14%);
-}
-
-[data-theme="dark"] .bg-bg-elevated {
-  background-color: hsl(240 4.8% 10%);
-}
-
-/* Focus visible improvements for dark mode */
-[data-theme="dark"] :focus-visible {
-  outline: 2px solid hsl(217 91% 60%);
-  outline-offset: 2px;
-}
-
-/* Advanced subtab buttons stay clickable without Chrome tap/focus flash or text selection */
-.advanced-subtab-btn,
-.advanced-subtab-btn * {
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.advanced-subtab-btn {
-  -webkit-touch-callout: none;
-}
-
-.advanced-subtab-btn:focus,
-.advanced-subtab-btn:focus-visible,
-[data-theme="dark"] .advanced-subtab-btn:focus-visible {
-  outline: none;
-  outline-offset: 0;
-}
-
-/* Reduced motion - !important is intentional for accessibility override */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    /* biome-ignore lint/complexity/noImportantStyles: Accessibility requires forcing reduced motion */
-    animation-duration: 0.01ms !important;
-    /* biome-ignore lint/complexity/noImportantStyles: Accessibility requires forcing reduced motion */
-    animation-iteration-count: 1 !important;
-    /* biome-ignore lint/complexity/noImportantStyles: Accessibility requires forcing reduced motion */
-    transition-duration: 0.01ms !important;
-    /* biome-ignore lint/complexity/noImportantStyles: Accessibility requires forcing reduced motion */
-    scroll-behavior: auto !important;
-  }
-}
-
-/* ── Wallets BSC-first view ───────────────────────────────────────── */
-
-.wallets-bsc {
-  --wb-card-highlight: linear-gradient(
-    135deg,
-    rgba(240, 185, 11, 0.12),
-    rgba(240, 185, 11, 0.02)
-  );
-}
-
-.wallets-bsc__setup code {
-  display: inline-block;
-  padding: 0 4px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg-muted);
-}
-
-.wallets-bsc__main-card {
-  background: var(--wb-card-highlight), var(--card);
-}
-
-.wallets-bsc__status-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 8px;
-}
-
-.wallets-bsc__status-badge {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 10px;
-  background: var(--bg);
-}
-
-.wallets-bsc__status-badge.is-ready {
-  border-color: color-mix(in srgb, var(--ok) 45%, var(--border) 55%);
-  background: color-mix(in srgb, var(--ok) 10%, var(--bg) 90%);
-}
-
-.wallets-bsc__status-badge.is-not-ready {
-  border-color: color-mix(in srgb, var(--warn) 40%, var(--border) 60%);
-  background: color-mix(in srgb, var(--warn) 10%, var(--bg) 90%);
-}
-
-.wallets-bsc__status-title {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-strong);
-}
-
-.wallets-bsc__status-value {
-  margin-top: 3px;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.wallets-bsc__status-detail {
-  margin-top: 2px;
-  font-size: 11px;
-  color: var(--muted);
-  line-height: 1.3;
-}
-
-.wallets-bsc__stats-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 8px;
-}
-
-.wallets-bsc__stat-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--bg);
-  padding: 10px;
-}
-
-.wallets-bsc__stat-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
-}
-
-.wallets-bsc__stat-value {
-  margin-top: 4px;
-  font-size: 20px;
-  line-height: 1.1;
-  font-weight: 700;
-  font-family: var(--mono);
-}
-
-.wallets-bsc__collapse {
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-}
-
-.wallets-bsc__quick-trade {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  background: var(--bg);
-  padding: 12px;
-}
-
-.wallets-bsc__quick-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.wallets-bsc__quick-title {
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-.wallets-bsc__quick-note {
-  font-size: 11px;
-  color: var(--muted);
-}
-
-.wallets-bsc__quick-row {
-  margin-top: 10px;
-  display: grid;
-  gap: 8px;
-}
-
-.wallets-bsc__quick-input {
-  width: 100%;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg);
-  color: var(--text);
-  padding: 9px 10px;
-  font-size: 13px;
-}
-
-.wallets-bsc__quick-input:focus {
-  outline: none;
-  border-color: var(--text);
-}
-
-.wallets-bsc__quick-presets {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.wallets-bsc__preset-btn {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--bg);
-  color: var(--text);
-  padding: 4px 10px;
-  font-size: 11px;
-  font-family: var(--mono);
-  cursor: pointer;
-}
-
-.wallets-bsc__preset-btn.is-active {
-  border-color: color-mix(in srgb, #f0b90b 70%, var(--border) 30%);
-  background: color-mix(in srgb, #f0b90b 16%, var(--bg) 84%);
-}
-
-.wallets-bsc__quick-actions {
-  display: inline-flex;
-  gap: 8px;
-}
-
-.wallets-bsc__quick-btn {
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--bg);
-  color: var(--text);
-  padding: 7px 14px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  cursor: pointer;
-}
-
-.wallets-bsc__quick-btn.is-buy {
-  border-color: color-mix(in srgb, var(--ok) 55%, var(--border) 45%);
-  background: color-mix(in srgb, var(--ok) 12%, var(--bg) 88%);
-}
-
-.wallets-bsc__quick-btn.is-sell {
-  border-color: color-mix(in srgb, var(--warn) 55%, var(--border) 45%);
-  background: color-mix(in srgb, var(--warn) 12%, var(--bg) 88%);
-}
-
-/* ── Wallet Terminal redesign (wt__) ──────────────────────────────── */
-
-.wt__portfolio {
-  border: 1px solid var(--border);
-  background:
-    linear-gradient(135deg, rgba(240, 185, 11, 0.1), rgba(240, 185, 11, 0.02)),
-    var(--card);
-  padding: 14px 16px 12px;
-}
-
-.wt__portfolio-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-  margin-bottom: 4px;
-}
-
-.wt__portfolio-value {
-  font-size: 30px;
-  line-height: 1;
-  font-weight: 700;
-  font-family: var(--mono);
-}
-
-.wt__status-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-
-.wt__status-dot {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 11px;
-  color: var(--muted);
-  cursor: default;
-}
-
-.wt__status-dot.is-ready {
-  color: var(--text);
-}
-
-.wt__status-indicator {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--warn) 80%, var(--border) 20%);
-  flex-shrink: 0;
-}
-
-.wt__status-dot.is-ready .wt__status-indicator {
-  background: var(--ok);
-}
-
-.wt__quick {
-  border: 1px solid var(--border);
-  background: var(--card);
-  padding: 10px 12px;
-}
-
-.wt__quick-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.wt__quick-input {
-  flex: 1;
-  min-width: 180px;
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text);
-  padding: 6px 10px;
-  font-size: 12px;
-  font-family: var(--mono);
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.wt__quick-input:focus {
-  border-color: var(--text);
-}
-
-.wt__presets {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: wrap;
-}
-
-.wt__preset {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--bg);
-  color: var(--text);
-  padding: 3px 9px;
-  font-size: 11px;
-  font-family: var(--mono);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.wt__preset.is-active {
-  border-color: var(--text);
-  background: color-mix(in srgb, #f0b90b 14%, var(--bg) 86%);
-  color: var(--text);
-}
-
-.wt__quick-actions {
-  display: flex;
-  gap: 6px;
-}
-
-.wt__btn {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text);
-  padding: 6px 16px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  font-family: var(--mono);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.wt__btn.is-buy {
-  border-color: color-mix(in srgb, var(--ok) 60%, var(--border) 40%);
-  color: var(--ok);
-}
-
-.wt__btn.is-buy:hover {
-  background: color-mix(in srgb, var(--ok) 14%, var(--bg) 86%);
-}
-
-.wt__btn.is-track {
-  border-color: color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
-  color: var(--text);
-}
-
-.wt__btn.is-track:hover {
-  background: color-mix(in srgb, var(--accent) 12%, var(--bg) 88%);
-}
-
-.wt__btn.is-sell {
-  border-color: color-mix(in srgb, var(--warn) 60%, var(--border) 40%);
-  color: var(--warn);
-}
-
-.wt__btn.is-sell:hover {
-  background: color-mix(in srgb, var(--warn) 14%, var(--bg) 86%);
-}
-
-.wt__btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.wt__toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 0;
-  border-bottom: 1px solid var(--border);
-  flex-wrap: wrap;
-}
-
-.wt__tab {
-  border: none;
-  background: transparent;
-  color: var(--muted);
-  padding: 3px 8px;
-  font-size: 12px;
-  font-weight: 700;
-  font-family: var(--mono);
-  letter-spacing: 0.02em;
-  cursor: pointer;
-  transition: color 0.15s;
-}
-
-.wt__tab.is-active {
-  color: var(--text);
-}
-
-.wt__sep {
-  display: inline-block;
-  width: 1px;
-  height: 14px;
-  background: var(--border);
-  margin: 0 4px;
-  align-self: center;
-}
-
-.wt__chip {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--muted);
-  padding: 2px 7px;
-  font-size: 10px;
-  font-family: var(--mono);
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.15s;
-}
-
-.wt__chip.is-active {
-  border-color: var(--text);
-  color: var(--text);
-}
-
-.wt__refresh {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--muted);
-  padding: 2px 8px;
-  font-size: 13px;
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.15s;
-  font-family: var(--mono);
-}
-
-.wt__refresh:hover {
-  border-color: var(--text);
-  color: var(--text);
-}
-
-.wt__row-btn {
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--muted);
-  padding: 2px 7px;
-  font-size: 10px;
-  font-weight: 700;
-  font-family: var(--mono);
-  cursor: pointer;
-  border-radius: 2px;
-  transition: all 0.15s;
-}
-
-.wt__row-btn.is-preflight:hover {
-  border-color: var(--text);
-  color: var(--text);
-}
-
-.wt__row-btn.is-quote:hover {
-  border-color: var(--ok);
-  color: var(--ok);
-}
-
-.wt__row-btn.is-remove:hover {
-  border-color: var(--warn);
-  color: var(--warn);
-}
-
-.wt__row-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.wt__quote {
-  border: 1px solid var(--border);
-  background: var(--card);
-  padding: 10px 12px;
-}
-
-.wt__quote-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.wt__quote-title {
-  font-size: 11px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-  font-weight: 700;
-}
-
-.wt__quote-route {
-  font-family: var(--mono);
-  font-size: 10px;
-  color: var(--muted);
-}
-
-.wt__quote-grid {
-  margin-top: 8px;
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-}
-
-.wt__quote-k {
-  font-size: 10px;
-  text-transform: uppercase;
-  color: var(--muted);
-  letter-spacing: 0.04em;
-}
-
-.wt__quote-v {
-  margin-top: 2px;
-  font-family: var(--mono);
-  font-size: 13px;
-  color: var(--text);
-}
-
-.wt__quote-actions {
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.wt__quote-link {
-  font-size: 11px;
-  font-family: var(--mono);
-  color: var(--text);
-  text-decoration: none;
-  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
-}
-
-.wt__quote-link:hover {
-  color: var(--text);
-  border-bottom-color: color-mix(in srgb, var(--text) 70%, transparent);
-}
-
-.wt__quote-usersign {
-  margin-top: 10px;
-  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
-  background: color-mix(in srgb, var(--bg) 92%, transparent);
-  padding: 8px;
-}
-
-.wt__preflight {
-  margin-top: 10px;
-  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
-  background: color-mix(in srgb, var(--bg) 92%, transparent);
-  padding: 8px;
-}
-
-.wt__preflight-checks {
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.wt__preflight-chip {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 1px 7px;
-  font-size: 10px;
-  font-family: var(--mono);
-  letter-spacing: 0.03em;
-}
-
-.wt__preflight-chip.is-pass {
-  border-color: color-mix(in srgb, var(--ok) 60%, var(--border) 40%);
-  color: var(--ok);
-}
-
-.wt__preflight-chip.is-fail {
-  border-color: color-mix(in srgb, var(--warn) 60%, var(--border) 40%);
-  color: var(--warn);
-}
-
-.wt__preflight-reasons {
-  margin-top: 6px;
-  font-size: 11px;
-  color: var(--muted);
-  line-height: 1.45;
-}
-
-.wt__tx-status-row {
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.wt__tx-pill {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 2px 8px;
-  font-size: 10px;
-  font-family: var(--mono);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.wt__tx-pill.is-pending {
-  border-color: color-mix(in srgb, var(--warn) 50%, var(--border) 50%);
-  color: var(--warn);
-}
-
-.wt__tx-pill.is-success {
-  border-color: color-mix(in srgb, var(--ok) 55%, var(--border) 45%);
-  color: var(--ok);
-}
-
-.wt__tx-pill.is-reverted,
-.wt__tx-pill.is-not_found {
-  border-color: color-mix(in srgb, var(--danger) 55%, var(--border) 45%);
-  color: var(--danger);
-}
-
-.wt__tx-meta {
-  font-size: 10px;
-  color: var(--muted);
-  font-family: var(--mono);
-}
-
-.wt__usersign-steps {
-  margin-top: 6px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.wt__usersign-step {
-  font-size: 11px;
-  color: var(--muted);
-  font-family: var(--mono);
-}
-
-/* ── Network badge ───────────────────────────────────────────────── */
-
-.wt__network-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 1px 6px;
-  font-size: 9px;
-  font-family: var(--mono);
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border: 1px solid color-mix(in srgb, #f0b90b 50%, var(--border) 50%);
-  color: var(--text);
-  border-radius: 3px;
-  background: color-mix(in srgb, #f0b90b 8%, transparent 92%);
-}
-
-.wt__network-badge::before {
-  content: "";
-  display: inline-block;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #f0b90b;
-  flex-shrink: 0;
-}
-
-/* ── Receive button ──────────────────────────────────────────────── */
-
-.wt__receive-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--muted);
-  padding: 4px 12px;
-  font-size: 11px;
-  font-family: var(--mono);
-  font-weight: 600;
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.15s;
-  letter-spacing: 0.03em;
-}
-
-.wt__receive-btn:hover {
-  border-color: color-mix(in srgb, #f0b90b 60%, var(--border) 40%);
-  color: var(--text);
-  background: color-mix(in srgb, #f0b90b 6%, var(--bg) 94%);
-}
-
-/* ── Token logo (image + letter fallback) ────────────────────────── */
-
-.wt__token-logo {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  object-fit: cover;
-  font-weight: 700;
-  font-family: var(--mono);
-  color: white;
-}
-
-.wt__token-logo.is-letter {
-  /* background comes from chain class */
-  background: var(--bg-muted);
-}
-
-/* ── Native token row special styling ────────────────────────────── */
-
-.wt__row--native {
-  background: color-mix(in srgb, #f0b90b 4%, transparent 96%);
-}
-
-.wt__row--native.wt__row--native:hover {
-  background: color-mix(in srgb, #f0b90b 8%, var(--bg) 92%);
-}
-
-/* ── Native badge label ──────────────────────────────────────────── */
-
-.wt__native-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0px 5px;
-  font-size: 9px;
-  font-family: var(--mono);
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  border: 1px solid color-mix(in srgb, #f0b90b 40%, var(--border) 60%);
-  color: color-mix(in srgb, #f0b90b 80%, var(--muted) 20%);
-  border-radius: 3px;
-}
-
-/* ── BNB sub-label in portfolio ──────────────────────────────────── */
-
-.wt__bnb-sub {
-  font-size: 11px;
-  font-family: var(--mono);
-  color: var(--muted);
-  margin-top: 3px;
-}
-
-/* ── Inline BSC error ────────────────────────────────────────────── */
-
-.wt__error-inline {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 8px;
-  background: color-mix(in srgb, var(--danger, #e74c3c) 8%, var(--bg) 92%);
-  border: 1px solid
-    color-mix(in srgb, var(--danger, #e74c3c) 30%, var(--border) 70%);
-  border-radius: 3px;
-}
-
-.wt__error-inline-text {
-  flex: 1;
-  font-size: 11px;
-  font-family: var(--mono);
-  color: var(--danger, #e74c3c);
-  word-break: break-all;
-}
-
-.wt__error-retry {
-  border: 1px solid
-    color-mix(in srgb, var(--danger, #e74c3c) 40%, var(--border) 60%);
-  background: transparent;
-  color: var(--danger, #e74c3c);
-  padding: 2px 8px;
-  font-size: 10px;
-  font-family: var(--mono);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.15s;
-}
-
-.wt__error-retry:hover {
-  background: color-mix(in srgb, var(--danger, #e74c3c) 12%, var(--bg) 88%);
-}
-
-/* ── Contract input with validation border ───────────────────────── */
-
-.wt__quick-input.is-valid {
-  border-color: color-mix(in srgb, var(--ok) 70%, var(--border) 30%);
-}
-
-.wt__quick-input.is-invalid {
-  border-color: color-mix(in srgb, var(--warn) 70%, var(--border) 30%);
-}
-
-/* ── Input wrapper + recents dropdown ────────────────────────────── */
-
-.wt__input-wrap {
-  flex: 1;
-  min-width: 180px;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.wt__input-wrap .wt__quick-input {
-  flex: 1;
-  min-width: 0;
-  padding-right: 28px;
-}
-
-.wt__recents-toggle {
-  position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  border: none;
-  background: transparent;
-  color: var(--muted);
-  font-size: 11px;
-  cursor: pointer;
-  padding: 2px 4px;
-  line-height: 1;
-  transition: color 0.15s;
-}
-
-.wt__recents-toggle:hover {
-  color: var(--text);
-}
-
-.wt__recents {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  right: 0;
-  z-index: 40;
-  border: 1px solid var(--border);
-  background: var(--card);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-}
-
-.wt__recents-item {
-  display: block;
-  width: 100%;
-  padding: 6px 10px;
-  text-align: left;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.wt__recents-item:hover {
-  background: var(--bg-hover, var(--bg));
-}
-
-.wt__recents-addr {
-  font-size: 11px;
-  font-family: var(--mono);
-  color: var(--muted);
-}
-
-.wt__recents-item:hover .wt__recents-addr {
-  color: var(--text);
-}
-
-/* ── Slippage selector ───────────────────────────────────────────── */
-
-.wt__slip {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-top: 7px;
-  flex-wrap: wrap;
-}
-
-.wt__slip-label {
-  font-size: 10px;
-  color: var(--muted);
-  font-family: var(--mono);
-}
-
-.wt__slip-btn {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--muted);
-  padding: 2px 7px;
-  font-size: 10px;
-  font-family: var(--mono);
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.15s;
-}
-
-.wt__slip-btn.is-active {
-  border-color: var(--text);
-  color: var(--text);
-}
-
-.wt__slip-btn:hover:not(.is-active) {
-  border-color: var(--muted);
-  color: var(--text);
-}
-
-.wt__slip-input {
-  border: 1px solid var(--border);
-  background: var(--bg);
-  color: var(--text);
-  padding: 2px 6px;
-  font-size: 10px;
-  font-family: var(--mono);
-  width: 68px;
-  border-radius: 3px;
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.wt__slip-input::placeholder {
-  color: var(--muted);
-}
-
-.wt__slip-input:focus {
-  border-color: var(--text);
-}
-
-.wt__slip-input.is-active {
-  border-color: var(--text);
-  color: var(--text);
-}
-
-.companion-game__roster-list::before {
-  content: "";
-  position: absolute;
-  left: 6px;
-  top: 6px;
-  bottom: 6px;
-  width: 1px;
-  background: rgba(102, 111, 137, 0.42);
-}
-
-.companion-game__roster-item {
-  position: relative;
-  width: 100%;
-  border-radius: 16px;
-  border: 1px solid rgba(193, 198, 217, 0.78);
-  background: rgba(248, 249, 253, 0.9);
-  padding: 7px 8px;
-  display: grid;
-  grid-template-columns: 56px minmax(0, 1fr);
-  gap: 10px;
-  align-items: center;
-  text-align: left;
-  transition:
-    border-color 140ms ease,
-    transform 140ms ease,
-    background-color 140ms ease;
-}
-
-.companion-game__roster-item:hover {
-  border-color: rgba(158, 178, 67, 0.9);
-  transform: translateY(-1px);
-}
-
-.companion-game__roster-item.is-active {
-  border-color: rgba(158, 178, 67, 0.9);
-  background: rgba(255, 251, 235, 0.95);
-}
-
-.companion-game__roster-node {
-  position: absolute;
-  left: -15px;
-  top: 50%;
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  transform: translateY(-50%);
-  background: #1e212f;
-  box-shadow: 0 0 0 2px rgba(240, 243, 252, 0.9);
-}
-
-.companion-game__roster-item.is-active .companion-game__roster-node {
-  background: #9eb243;
-}
-
-.companion-game__roster-thumb {
-  width: 56px;
-  height: 56px;
-  border-radius: 8px;
-  border: 1px solid rgba(186, 191, 211, 0.86);
-  background: rgba(238, 242, 252, 0.86);
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.companion-game__roster-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center 24%;
-}
-
-.companion-game__roster-meta {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.companion-game__roster-title {
-  font-size: 12px;
-  font-weight: 700;
-  color: #1f2434;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.companion-game__roster-subtitle {
-  font-size: 11px;
-  color: #666d84;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.companion-game__roster-item.is-active .companion-game__roster-subtitle {
-  color: #6b7730;
-}
-
-.companion-game__mini-progress {
-  display: grid;
-  gap: 4px;
-}
-
-.companion-game__mini-progress-label {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #4f5467;
-  font-weight: 600;
-}
-
-.companion-game__mini-progress-track {
-  height: 8px;
-  border-radius: 999px;
-  background: rgba(167, 174, 193, 0.33);
-  overflow: hidden;
-}
-
-.companion-game__mini-progress-fill {
-  height: 100%;
-  border-radius: 999px;
-  background: linear-gradient(90deg, #10131b 0%, #566188 100%);
-}
-
-.companion-game__status-chip {
-  margin-top: 3px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  padding: 8px 12px;
-  width: fit-content;
-}
-
-.companion-game__status-chip.is-good {
-  color: #1f6a3b;
-  background: rgba(63, 154, 97, 0.14);
-  border: 1px solid rgba(63, 154, 97, 0.52);
-}
-
-.companion-game__status-chip.is-danger {
-  color: #8f3f47;
-  background: rgba(211, 95, 106, 0.12);
-  border: 1px solid rgba(211, 95, 106, 0.5);
-}
-
-.companion-game__status-notes {
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(188, 194, 212, 0.75);
-  padding: 10px 12px;
-  font-size: 12px;
-  color: #54596b;
-}
-
-.companion-game__status-notes--danger {
-  border-color: rgba(211, 95, 106, 0.4);
-  color: #8f3f47;
-}
-
-.companion-game__panel-metrics {
-  display: grid;
-  gap: 4px;
-  font-size: 12px;
-  color: #5d6276;
-}
-
-.companion-game__panel-btn {
-  margin-top: auto;
-  border-radius: 999px;
-  border: 1px solid var(--cg-action-border);
-  background: var(--cg-action);
-  min-height: 40px;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.companion-game__kpi-grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.companion-game__kpi-card {
-  border-radius: 24px;
-  border: 1px solid var(--cg-border);
-  background: var(--cg-card);
-  box-shadow: var(--cg-soft-shadow);
-  padding: 16px 18px;
-  min-height: 120px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  animation: companion-reveal 300ms ease;
-}
-
-@keyframes kpi-flash {
-  0% {
-    background: var(--cg-accent);
-  }
-
-  100% {
-    background: var(--cg-card);
-  }
-}
-
-.companion-game__kpi-card.is-changed {
-  animation: kpi-flash 1.2s ease-out;
-}
-
-.companion-game__kpi-label {
-  font-size: 15px;
-  color: #505467;
-  font-weight: 600;
-}
-
-.companion-game__kpi-value {
-  font-size: 2.3rem;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.companion-game__kpi-note {
-  font-size: 12px;
-  color: #666b7f;
-}
-
-.companion-game__footer-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px 16px;
-  font-size: 12px;
-  color: #70758a;
-}
-
-.companion-game__footer-meta span {
-  border-radius: 999px;
-  border: 1px solid rgba(183, 188, 206, 0.72);
-  background: rgba(250, 251, 255, 0.72);
-  padding: 5px 10px;
-}
-
-.companion-game__drawer-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(26, 29, 42, 0.34);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 180ms ease;
-  z-index: 10;
-}
-
-.companion-game__drawer-overlay.is-open {
-  opacity: 1;
-  visibility: visible;
-}
-
-.companion-game__drawer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: min(460px, 88vw);
-  border-left: 1px solid rgba(179, 186, 204, 0.82);
-  background: rgba(250, 251, 255, 0.98);
-  box-shadow: -14px 0 34px rgba(25, 30, 45, 0.2);
-  z-index: 20;
-  transform: translateX(104%);
-  transition: transform 220ms ease;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.companion-game__drawer.is-open {
-  transform: translateX(0);
-}
-
-.companion-game__drawer-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid rgba(188, 194, 212, 0.78);
-  padding: 18px;
-}
-
-.companion-game__drawer-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 800;
-}
-
-.companion-game__drawer-header p {
-  margin: 4px 0 0;
-  font-size: 12px;
-  color: #60657a;
-}
-
-.companion-game__drawer-close {
-  min-height: 34px;
-  border-radius: 999px;
-  border: 1px solid rgba(190, 195, 211, 0.85);
-  padding: 0 12px;
-  background: #ffffff;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.companion-game__drawer-section {
-  padding: 16px 18px;
-  border-bottom: 1px solid rgba(196, 201, 218, 0.7);
-  display: grid;
-  gap: 10px;
-}
-
-.companion-game__drawer-title {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: #50566c;
-  font-weight: 800;
-}
-
-.companion-game__helper {
-  font-size: 12px;
-  color: #64697d;
-}
-
-.companion-game__checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.companion-game__drawer-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.companion-game__field {
-  display: grid;
-  gap: 5px;
-  font-size: 12px;
-  color: #59607a;
-}
-
-.companion-game__field select {
-  border: 1px solid rgba(183, 189, 208, 0.95);
-  border-radius: 10px;
-  background: #ffffff;
-  min-height: 34px;
-  padding: 0 10px;
-  color: #1f2434;
-}
-
-.companion-game__drawer-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.companion-game__drawer-btn {
-  min-height: 36px;
-  border-radius: 999px;
-  border: 1px solid rgba(182, 188, 206, 0.9);
-  background: #ffffff;
-  padding: 0 12px;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.companion-game__drawer-btn--primary {
-  border-color: #9fb243;
-  background: #c7da63;
-}
-
-.companion-game__drawer-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.companion-game__activity-list {
-  max-height: 280px;
-  overflow-y: auto;
-  border: 1px solid rgba(185, 191, 210, 0.82);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.86);
-}
-
-.companion-game__activity-item {
-  padding: 10px;
-  border-bottom: 1px solid rgba(198, 203, 220, 0.72);
-  font-size: 12px;
-  color: #2f3446;
-}
-
-.companion-game__activity-item:last-child {
-  border-bottom: 0;
-}
-
-.companion-game__activity-meta {
-  font-size: 11px;
-  color: #6a6f84;
-  margin-bottom: 3px;
-}
-
-@media (max-width: 1279px) {
-  .companion-game__kpi-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1023px) {
-  .companion-game {
-    border-radius: 26px;
-    padding: 16px;
-  }
-
-  .companion-game__left-rail {
-    order: 2;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: 10px;
-  }
-
-  .companion-game__rail-actions {
-    flex: 1;
-  }
-
-  .companion-game__stage {
-    order: 1;
-  }
-
-  .companion-game__roster {
-    order: 3;
-  }
-}
-
-@media (max-width: 767px) {
-  .companion-game__logo-mark {
-    display: none;
-  }
-
-  .companion-game__left-rail {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .companion-game__vrm-shell {
-    min-height: 460px;
-    height: 66vh;
-  }
-
-  .companion-game__kpi-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .companion-game__drawer {
-    width: 100%;
-    border-left: 0;
-  }
-
-  .companion-game__drawer-grid {
-    grid-template-columns: 1fr;
-  }
-}