@elizaos/app-core 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/styles/styles.css

@@ -0,0 +1,2087 @@
+@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;
+  }
+}