:root {
  color-scheme: dark;
  --bg: #101215;
  --panel: #191d22;
  --line: #2a2e34;
  --text: #f4f5f6;
  --muted: #8e969e;
  --green: #7ae1b0;
  --red: #ee858a;
  --purple: #7ae1b0;
  --amber: #d9bb83;
  --body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --display: var(--body);
  --mono: var(--body);
}
* {
  box-sizing: border-box;
}
html {
  background: #0a0b0d;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font: 14px/1.5 var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button,
input {
  font: inherit;
  color: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button {
  border: 0;
  background: none;
  cursor: pointer;
  min-height: 44px;
}
button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
button:active:not(:disabled),
a:active {
  opacity: 0.65;
  transform: scale(0.98);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
svg {
  display: block;
}
button svg {
  pointer-events: none;
}
small {
  font-size: inherit;
}
[hidden] {
  display: none !important;
}
.positive {
  color: var(--green) !important;
}
.negative {
  color: var(--red) !important;
}
.neutral {
  color: var(--muted) !important;
}
.skip-link {
  position: fixed;
  top: -60px;
  background: var(--green);
  color: #101215;
  z-index: 100;
  padding: 10px;
}
.skip-link:focus {
  top: 0;
}
.terminal {
  max-width: 480px;
  min-height: 100dvh;
  margin: auto;
  background: var(--bg);
}
.app-header {
  height: calc(52px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 15;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  letter-spacing: -0.6px;
  font-weight: 650;
  min-height: 44px;
}
.logo-mark {
  width: 28px;
  height: 30px;
  border-radius: 9px;
  background: #d7f4e4;
  color: #21392e;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-mode {
  font-size: 11px;
  color: #b1b8bf;
  border: 1px solid #343a41;
  padding: 3px 7px;
  border-radius: 6px;
}
.icon-btn,
.plain-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #c2c7cd;
  border-radius: 12px;
}
.icon-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover,
.plain-icon:hover {
  background: #23282e;
}
main {
  padding: 0 max(16px, env(safe-area-inset-right))
    calc(80px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.app-screen {
  animation: page-in 0.2s ease-out;
  min-height: calc(100dvh - 175px);
}
.balance-section {
  padding: 0 2px 12px;
}
.balance-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #b2bac2;
}
.balance-label > span {
  color: #79838d;
  font-size: 12px;
}
.balance-label .plain-icon {
  width: 44px;
  min-height: 44px;
  height: 44px;
  font-size: 14px;
  color: #79828b;
}
.balance-number {
  font-size: clamp(34px, 10.8vw, 44px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -1.7px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 4px 0 7px;
}
.balance-number > span {
  font-size: 0.72em;
  color: #a7afb7;
  letter-spacing: -1px;
}
.balance-number small {
  display: none;
}
.balance-under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  gap: 8px;
}
.balance-under small {
  font-size: 12px;
  color: #9099a3;
  margin-left: 7px;
}
.connection-state {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b0b8bf;
  font-size: 12px;
}
.connection-state i,
.team-status > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.account-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.primary-action,
.secondary-action {
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 550;
  transition:
    transform 0.16s,
    opacity 0.16s;
}
.primary-action {
  background: #dff5e9;
  color: #17261f;
}
.primary-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.secondary-action {
  background: #252a30;
  color: #e1e5e8;
}
.secondary-action > span:first-child {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}
.section-heading h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.text-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: #a0aab3;
  white-space: nowrap;
  padding: 0 0 0 8px;
}
.text-action > span {
  font-size: 21px;
  line-height: 1;
  font-weight: 300;
  color: #757f89;
}
.fleet-panel {
  padding: 0 0 14px;
}
.agent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}
.agent {
  padding: 0 0 3px;
  text-align: center;
  border-radius: 14px;
  min-width: 0;
}
.agent-face {
  width: min(100%, 64px);
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto 3px;
}
.agent-face .agent-ring {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: none;
}
.ring-track {
  stroke: #ffffff0c;
  stroke-width: 2;
}
.ring-progress {
  stroke: var(--agent-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: center;
  opacity: 0.6;
}
.agent-avatar {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
}
.agent-avatar svg {
  width: 100%;
  height: auto;
  filter: saturate(0.8);
}

.agent.active .ring-progress {
  opacity: 1;
}

.agent.blocked .ring-progress {
  stroke: var(--red);
}
.agent-name {
  display: block;
  font-size: 12px;
  color: #dbe0e4;
  font-weight: 550;
  line-height: 1.6;
}
.agent-status {
  display: block;
  font-size: 11px;
  color: #78828c;
  margin-top: 2px;
  white-space: nowrap;
}
.agent.active .agent-status {
  color: var(--green);
}
.agent.blocked .agent-status {
  color: var(--red);
}
.team-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  margin-top: 9px;
  border-radius: 11px;
  background: #1a2020;
  color: #aebbb5;
  font-size: 12px;
  line-height: 1.5;
  min-height: 32px;
}
.team-status > span:not(.team-progress) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.team-progress {
  margin-left: auto;
  color: #a7e9c5;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.panel {
  background: var(--panel);
  border-radius: 22px;
}
.trade-panel {
  padding: 12px 14px 0;
  overflow: hidden;
}
.trade-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #939da7;
  margin-bottom: 8px;
}
.strategy-state {
  font-size: 11px;
  line-height: 1.5;
  padding: 3px 7px;
  border-radius: 5px;
  background: #263a30;
  color: #9fdbb9;
}
.trade-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pair-icon {
  position: relative;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #b57c39;
  color: #fff4df;
  font-size: 25px;
  font-weight: 500;
  flex-shrink: 0;
}
.pair-icon i {
  display: none;
}
.pair-copy h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.pair-copy p {
  font-size: 12px;
  color: #8e99a3;
  margin-top: 1px;
}
.trade-heading .plain-icon {
  margin-left: auto;
  letter-spacing: 1px;
  font-size: 14px;
}
.position-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.position-summary > div > span {
  display: block;
  font-size: 12px;
  color: #8e99a3;
  margin-bottom: 5px;
}
.position-summary > div:last-child {
  text-align: right;
}
.position-summary strong {
  display: block;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.position-summary > div:last-child strong {
  font-size: 18px;
  margin-top: 9px;
  color: #d9dfe4;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.chart-stage {
  height: clamp(112px, 19dvh, 150px);
  position: relative;
  touch-action: pan-y;
  margin: 9px -5px 0;
}
.chart-stage > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.chart-crosshair {
  display: none;
  position: absolute;
  top: 10px;
  height: 130px;
  width: 1px;
  background: #99bca87a;
  pointer-events: none;
}
.chart-crosshair.visible {
  display: block;
}
.chart-crosshair > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: 5px 7px;
  border: 1px solid #526b60;
  background: #263b31;
  border-radius: 6px;
  color: #d5ede0;
  font-size: 10px;
  white-space: nowrap;
}
.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #191d22d9;
  backdrop-filter: blur(3px);
}
.chart-empty strong {
  font-size: 16px;
  font-weight: 500;
  color: #bfc8cf;
}
.chart-empty small {
  font-size: 12px;
  color: #88939d;
  margin-top: 8px;
}
.trade-footer {
  border-top: 1px solid #2e343b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  font-size: 11px;
  color: #98a49e;
  gap: 6px;
}
.trade-footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.trade-footer b {
  color: #c5cfca;
  font-weight: 500;
}
.shield-dot {
  font-style: normal;
  color: var(--green);
  font-size: 11px;
  width: 14px;
  height: 16px;
  border: 1px solid #476858;
  border-radius: 5px 5px 7px 7px;
  text-align: center;
  line-height: 14px;
}
.activity-panel {
  margin-top: 24px;
}
.live-log {
  margin-top: 3px;
}
.log-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  column-gap: 10px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #262c31;
  font-size: 12px;
  line-height: 1.7;
}
.log-row:last-child {
  border: 0;
}
.log-row .event-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #25392d;
  color: #9fd1b5;
  display: grid;
  place-items: center;
  font-size: 14px;
  margin-top: 1px;
}
.log-row.exit .event-icon,
.log-row.block .event-icon {
  background: #3d2b2c;
  color: #e8a4a5;
}
.log-row .event-copy > strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #d5dde3;
}
.log-row .event-copy > span {
  display: block;
  font-size: 11px;
  color: #78838d;
  margin-top: 2px;
  line-height: 1.6;
}
.log-row time {
  font-size: 10px;
  color: #76818b;
  white-space: nowrap;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.run-details {
  border-top: 1px solid #2b3137;
  border-bottom: 1px solid #2b3137;
  margin-top: 17px;
}
.run-details > summary {
  min-height: 55px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: #a4aeb7;
}
.run-details > summary::-webkit-details-marker {
  display: none;
}
.run-details > summary > span {
  font-size: 18px;
  color: #89929c;
  transition: transform 0.2s;
}
.run-details[open] > summary > span {
  transform: rotate(180deg);
}
.detail-body {
  padding-bottom: 16px;
}
.detail-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #2b3137;
  padding-bottom: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #95a0aa;
}
.speed-control {
  min-width: 60px;
  border: 1px solid #353e46;
  border-radius: 10px;
  background: #1d242a;
  font-size: 14px;
  color: #d4dee6;
}
.watcher-panel {
  padding: 18px 0;
}
.mini-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mini-heading h2 {
  font-size: 14px;
  font-weight: 550;
}
.state-chip {
  font-size: 11px;
  color: #b4c0b8;
  background: #28372e;
  padding: 3px 7px;
  border-radius: 5px;
}
.watcher-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 19px;
  font-size: 11px;
  color: #a0adb6;
}
.route-channel {
  height: 1px;
  background: #405c4d;
  position: relative;
  flex: 1;
}
.route-channel:after {
  content: "›";
  position: absolute;
  right: -1px;
  top: -11px;
  font-size: 17px;
  color: #729981;
}
.route-packet {
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #85cda7;
  animation: packet 3s linear infinite;
}
.countdown-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 5px;
}
.countdown-ring strong {
  font-size: 22px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #d6e3da;
}
.countdown-ring small {
  font-size: 9px;
  color: #829088;
  margin-top: 4px;
}
.watcher-panel p {
  font-size: 12px;
  color: #a9b7af;
  margin-top: 14px;
}
.watcher-panel > small {
  font-size: 11px;
  color: #687b70;
}
.watcher-panel.risk .state-chip {
  background: #412c2c;
  color: #e8a9aa;
}
.watcher-panel.risk .countdown-ring strong {
  color: var(--red);
}
.detail-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 15px;
  padding: 15px 0;
  border-top: 1px solid #293238;
  border-bottom: 1px solid #293238;
}
.detail-metrics > div > span {
  display: block;
  font-size: 11px;
  color: #89949d;
  margin-bottom: 6px;
}
.detail-metrics strong {
  font-size: 13px;
  font-weight: 500;
  color: #c9d4da;
}
.rules-inline {
  padding: 15px 0;
}
.code-line {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  font-size: 12px;
  color: #727d86;
  align-items: center;
}
.code-line > b {
  font-weight: 400;
  font-size: 10px;
  color: #606c76;
}
.code-line.active {
  color: #b6d9c6;
}
.code-line.active > b {
  color: #80b99b;
}
.code-line > small {
  margin-left: auto;
  font-size: 10px;
  white-space: nowrap;
  color: #88b59c;
}
.disclosure {
  color: #65717b;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  margin: 24px 0 0;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  background: #14181cf5;
  backdrop-filter: blur(16px);
  border-top: 1px solid #2a3036;
  z-index: 30;
  justify-content: space-around;
}
.bottom-nav > button {
  min-width: 64px;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #7e8993;
  font-size: 11px;
  border-radius: 10px;
  position: relative;
}
.bottom-nav svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav .active {
  color: #b6ead0;
}
.bottom-nav .active svg {
  stroke-width: 1.8;
}
.page-heading {
  padding: 24px 2px;
}
.page-heading > span {
  font-size: 12px;
  color: #7c8993;
}
.page-heading h1 {
  font-size: 30px;
  font-weight: 650;
  margin: 7px 0 9px;
  letter-spacing: -0.8px;
}
.page-heading p {
  font-size: 13px;
  color: #94a1ab;
  line-height: 1.8;
}
.fleet-overview {
  padding: 18px;
  border-radius: 17px;
  background: #1e2823;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.fleet-overview > div > strong {
  display: block;
  font-size: 17px;
  font-weight: 550;
  color: #d8e9de;
}
.fleet-overview p {
  font-size: 12px;
  color: #8caa9a;
  margin-top: 5px;
}
.fleet-overview .fleet-count {
  font-size: 28px;
  font-weight: 550;
  color: #b5dcc5;
}
.agent-page-card {
  display: flex;
  gap: 15px;
  align-items: center;
  background: var(--panel);
  border-radius: 18px;
  padding: 17px 13px;
  margin: 11px 0;
  width: 100%;
  text-align: left;
}
.agent-page-card > svg {
  width: 71px;
  height: 78px;
  flex-shrink: 0;
  filter: saturate(0.8);
}
.agent-page-card > div {
  flex: 1;
  min-width: 0;
}
.agent-page-card h2 {
  font-size: 16px;
  font-weight: 550;
}
.agent-page-card h2 > span {
  font-size: 12px;
  font-weight: 400;
  color: #8d9aa4;
  margin-left: 6px;
}
.agent-page-card p {
  font-size: 12px;
  color: #8d99a3;
  line-height: 1.7;
  margin: 5px 0 6px;
}
.agent-page-status {
  display: inline-block;
  color: #9ab7a7;
  font-size: 11px;
}
.agent-page-card > span {
  color: #75848e;
  font-size: 20px;
}
.history-balance {
  padding: 22px;
  background: var(--panel);
  border-radius: 20px;
  margin-bottom: 18px;
}
.history-balance > span {
  font-size: 13px;
  color: #95a1ab;
}
.history-balance > strong {
  display: block;
  font-size: 31px;
  margin: 8px 0 18px;
  font-weight: 550;
  letter-spacing: -0.8px;
}
.history-balance small {
  font-size: 12px;
  font-weight: 400;
  color: #91a297;
  margin-left: 6px;
}
.history-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #303a40;
  padding-top: 15px;
  gap: 15px;
}
.history-stats > div {
  font-size: 12px;
  color: #8e9da7;
}
.history-stats b {
  font-size: 16px;
  font-weight: 500;
  color: #d8e0e5;
  margin-left: 9px;
}
.receipt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 18px 1px;
  border-bottom: 1px solid #2a343b;
}
.receipt strong {
  font-size: 15px;
  font-weight: 550;
}
.receipt > b {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.receipt > span,
.receipt small {
  font-size: 12px;
  color: #8e9da7;
}
.receipt small {
  text-align: right;
  font-size: 11px;
}
.empty-receipts {
  text-align: center;
  padding: 50px 20px;
  color: #afbfc9;
  font-size: 15px;
}
.empty-receipts small {
  display: block;
  font-size: 12px;
  color: #7e909d;
  line-height: 1.8;
  margin-top: 9px;
}
.asset-balance {
  padding: 24px 20px;
  border-radius: 20px;
  background: #202b25;
}
.asset-balance > span {
  font-size: 13px;
  color: #a8beb1;
}
.asset-balance > strong {
  display: block;
  font-size: 33px;
  font-weight: 550;
  letter-spacing: -1px;
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.asset-balance small {
  font-size: 12px;
  color: #8ca695;
  letter-spacing: 0;
}
.asset-items {
  padding: 5px 0;
  margin: 14px 0;
}
.asset-items > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid #303b41;
  font-size: 13px;
  color: #8f9fa9;
}
.asset-items strong {
  font-size: 13px;
  font-weight: 500;
  color: #d1dce2;
  text-align: right;
  overflow-wrap: anywhere;
}
.asset-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.execution-banner {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 100px);
  bottom: 87px;
  width: calc(100% - 32px);
  max-width: 440px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 15px;
  background: #26342cf5;
  border: 1px solid #476451;
  border-radius: 15px;
  box-shadow: 0 10px 30px #0005;
  backdrop-filter: blur(15px);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.28s,
    opacity 0.28s;
}
.execution-banner.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.execution-banner > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #395f49;
  color: #bde4cb;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.execution-banner strong {
  font-size: 12px;
  font-weight: 550;
}
.execution-banner small {
  display: block;
  font-size: 10px;
  color: #9bb2a4;
  margin-top: 3px;
}
.execution-banner > b {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: #9cb1a4;
  white-space: nowrap;
}
.execution-banner.risk {
  background: #3b2b2df5;
  border-color: #735052;
}
.execution-banner.risk > span {
  background: #654346;
  color: #f3c3c6;
}
dialog {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  max-height: calc(var(--visible-height, 100dvh) - 12px);
  bottom: var(--keyboard-offset, 0px);
  padding: 0;
  background: #1c2228;
  color: var(--text);
  border: 1px solid #3b464f;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -20px 60px #0006;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
dialog::backdrop {
  background: #04070990;
  backdrop-filter: blur(5px);
}
dialog[open] {
  animation: sheet-in 0.25s cubic-bezier(0.2, 0.75, 0.3, 1);
}
#modal-content {
  padding: 12px 22px calc(26px + env(safe-area-inset-bottom));
}
#modal-content:before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 3px;
  background: #56626c;
  margin: 0 auto 15px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.modal-header small {
  display: none;
}
.modal-header h2 {
  font-size: 21px;
  font-weight: 550;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.modal-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 26px;
  color: #a6b3bd;
  border-radius: 50%;
}
.modal-intro {
  font-size: 13px;
  color: #a1b1bc;
  line-height: 1.9;
  margin: 12px 0 20px;
}
.modal-note {
  font-size: 12px;
  line-height: 1.9;
  color: #8499a7;
  padding: 17px 0;
  margin: 12px 0;
  border-top: 1px solid #34444e;
}
.modal-primary,
.modal-secondary {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 550;
}
.modal-primary {
  background: #d1efdf;
  color: #213a2d;
}
.modal-secondary {
  background: #2c3841;
  color: #c2d5df;
  margin-top: 10px;
}
.modal-list {
  display: grid;
  gap: 12px;
}
.agent-detail {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #242f36;
  border-radius: 17px;
}
.agent-detail > svg {
  width: 70px;
  flex-shrink: 0;
}
.agent-detail strong {
  font-size: 16px;
  font-weight: 550;
}
.agent-detail strong > span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #94a9b5;
  margin-top: 2px;
}
.agent-detail p {
  font-size: 12px;
  color: #a3b5bf;
  line-height: 1.8;
  margin-top: 7px;
}
.rules-detail > div {
  display: flex;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid #34434c;
}
.rules-detail b {
  font-size: 14px;
  color: #a0c6b0;
  font-weight: 500;
}
.rules-detail strong {
  font-size: 14px;
  font-weight: 550;
}
.rules-detail p {
  font-size: 12px;
  color: #9aadb9;
  margin-top: 7px;
  line-height: 1.9;
}
.form-label {
  display: block;
  font-size: 13px;
  color: #c0d2dc;
  margin-bottom: 9px;
}
.amount-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #172127;
  border: 1px solid #546c7b;
  border-radius: 14px;
  padding: 14px;
}
.amount-input input {
  border: 0;
  outline: none;
  background: none;
  min-width: 0;
  width: 100%;
  font-size: 30px;
  font-weight: 500;
  color: #e6f1f5;
}
.amount-input > span {
  font-size: 12px;
  color: #93abb9;
}
.amount-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 11px 0 20px;
}
.amount-presets button {
  border: 1px solid #465d6c;
  border-radius: 10px;
  background: #25343e;
  font-size: 13px;
  color: #c0d5e1;
}
.purchase-preview {
  padding: 16px;
  background: #202e37;
  border-radius: 13px;
}
.purchase-preview > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0;
  font-size: 12px;
  color: #a0b6c4;
}
.purchase-preview strong {
  font-size: 13px;
  color: #d1e1e8;
  font-weight: 500;
}
.purchase-preview p {
  font-size: 11px;
  line-height: 1.9;
  color: #8ca6b6;
  margin-top: 14px;
}
.form-error {
  font-size: 13px;
  color: #f2b1b7;
  margin-top: 10px;
}
.wallet-symbol {
  width: 64px;
  height: 64px;
  margin: 23px auto;
  border-radius: 20px;
  background: #c1e7d2;
  color: #284333;
  font-size: 51px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.wallet-info {
  text-align: center;
  color: #c8dce6;
  font-size: 15px;
  margin-bottom: 24px;
}
.wallet-info small {
  display: block;
  font-size: 12px;
  color: #89a6b8;
  margin-top: 6px;
}
#toast {
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  width: max-content;
  z-index: 80;
  background: #2a3a43f5;
  border: 1px solid #4e6979;
  border-radius: 13px;
  padding: 12px 16px;
  line-height: 1.7;
  font-size: 13px;
  color: #d3e7f1;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.loading-state {
  padding: 38px 20px;
  color: #8ea5b3;
  text-align: center;
  font-size: 13px;
}
@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0.5;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes page-in {
  from {
    opacity: 0.4;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes packet {
  0% {
    left: 0;
    opacity: 0;
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    left: 95%;
    opacity: 0;
  }
}
@media (min-width: 600px) {
  .terminal {
    border-left: 1px solid #262b31;
    border-right: 1px solid #262b31;
  }
  .bottom-nav {
    border-left: 1px solid #262b31;
    border-right: 1px solid #262b31;
  }
}
@media (max-width: 359px) {
  .app-header {
    padding-left: 16px;
    padding-right: 12px;
  }
  .wordmark {
    font-size: 20px;
    gap: 7px;
  }
  .account-mode {
    font-size: 10px;
    padding: 3px 5px;
  }
  .header-tools {
    gap: 2px;
  }
  main {
    padding-left: 15px;
    padding-right: 15px;
  }
  .balance-number {
    font-size: 39px;
  }
  .account-actions {
    gap: 9px;
  }
  .primary-action,
  .secondary-action {
    font-size: 13px;
  }

  .agent-name {
    font-size: 11px;
  }
  .agent-status {
    font-size: 10px;
  }
  .section-heading h2 {
    font-size: 16px;
  }
  .team-status {
    font-size: 11px;
  }
  .trade-panel {
    padding: 16px 14px 0;
  }
  .position-summary > div > span {
    font-size: 11px;
  }
  .position-summary strong {
    font-size: 26px;
  }
  .position-summary > div:last-child strong {
    font-size: 16px;
  }
  .trade-footer {
    font-size: 10px;
  }
  .trade-footer .text-action {
    font-size: 11px;
  }
  .log-row {
    column-gap: 8px;
    grid-template-columns: 27px 1fr auto;
  }
  .log-row .event-icon {
    width: 27px;
    height: 27px;
  }
  .log-row .event-copy > strong {
    font-size: 12px;
  }
  .log-row .event-copy > span {
    font-size: 11px;
  }
  .log-row time {
    font-size: 9px;
  }
  .agent-page-card {
    gap: 9px;
    padding: 14px 11px;
  }
  .agent-page-card > svg {
    width: 57px;
    height: 65px;
  }
  .agent-page-card h2 {
    font-size: 15px;
  }
  .agent-page-card h2 > span {
    font-size: 11px;
  }
  .asset-balance > strong {
    font-size: 29px;
  }
  .purchase-preview > div {
    font-size: 11px;
  }
  .purchase-preview strong {
    font-size: 11px;
  }
  .bottom-nav > button {
    min-width: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

.run-details {
  scroll-margin-top: calc(62px + env(safe-area-inset-top));
}

/* The host owns its title bar. Layout follows the WebView's available bounds. */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
}
input {
  font-size: 16px;
}
.balance-section {
  position: relative;
}
.balance-number {
  width: fit-content;
  max-width: 100%;
}
.trade-panel {
  border: 1px solid #ffffff08;
  background: linear-gradient(145deg, #202923, #191d22 48%);
}
.primary-action {
  background: linear-gradient(115deg, #dff5e9, #a8e9c5);
  box-shadow: 0 3px 16px #7ae1b010;
}
.bottom-nav > button {
  transition:
    color 0.2s,
    background 0.2s,
    transform 0.2s;
}
.bottom-nav > button.active {
  background: #7ae1b009;
}
.keyboard-open .bottom-nav {
  visibility: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.is-background * {
  animation-play-state: paused !important;
}

@media (max-height: 740px) {
  .balance-number {
    font-size: clamp(32px, 10vw, 40px);
    margin: 0 0 4px;
  }
  .balance-section {
    padding-bottom: 8px;
  }
  .account-actions {
    margin-top: 8px;
  }
  .primary-action,
  .secondary-action {
    height: 44px;
  }
  .fleet-panel {
    padding-bottom: 6px;
  }
  .position-summary {
    margin-top: 8px;
  }
  .chart-stage {
    height: 100px;
    margin-top: 3px;
  }
  .trade-panel {
    padding-top: 10px;
  }
}
@media (max-height: 500px) {
  .app-header {
    position: relative;
  }
  .balance-section {
    padding-top: 0;
  }
  .account-actions {
    margin-top: 8px;
  }
  .bottom-nav > button {
    min-height: 44px;
    gap: 2px;
  }
  .bottom-nav svg {
    width: 18px;
    height: 18px;
  }
}

.balance-label {
  position: relative;
  height: 28px;
}
.balance-label .plain-icon {
  position: absolute;
  right: 0;
  top: -8px;
}
.trade-panel {
  position: relative;
}
.trade-topline {
  position: absolute;
  right: 58px;
  top: 18px;
  margin: 0;
}
.trade-topline > span:first-child {
  display: none;
}
.trade-heading {
  padding-right: 51px;
}
.trade-heading .plain-icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
.trade-footer {
  min-height: 44px;
  height: 44px;
}
@media (max-height: 740px) {
  .app-header {
    height: calc(44px + env(safe-area-inset-top));
  }
  .agent-face {
    width: min(100%, 56px);
  }
  .agent-status {
    display: none;
  }
  .agent-name {
    margin-top: 2px;
  }
  .team-status {
    margin-top: 7px;
  }
  .fleet-panel {
    padding-bottom: 6px;
  }
}

/* Account console uses ledger values; strategy replay stays on Home. */
#screen-assets .page-heading {
  padding: 14px 2px 10px;
}
#screen-assets .page-heading h1 {
  font-size: 26px;
  margin: 3px 0;
}
#screen-assets .page-heading > span,
#screen-assets .page-heading p {
  display: none;
}
.console-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 14px;
}
.user-avatar,
.member-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 13px;
  color: #b5efd0;
  background: #233b2f;
  font-size: 18px;
  font-weight: 600;
}
.console-user > div {
  flex: 1;
}
.console-user strong {
  display: block;
  font-weight: 550;
  font-size: 15px;
}
.console-user > div > span {
  font-size: 11px;
  color: var(--muted);
}
.console-balance {
  background: linear-gradient(125deg, #263e30, #19231e 85%);
  border: 1px solid #7ae1b026;
  padding: 18px;
  border-radius: 20px;
}
.console-eyebrow {
  color: #b5cbbd;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.console-eyebrow span {
  font-size: 10px;
  border: 1px solid #67817360;
  border-radius: 5px;
  padding: 1px 5px;
}
.console-total {
  display: block;
  font-size: clamp(26px, 8.6vw, 36px);
  font-weight: 600;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  margin: 7px 0 3px;
  overflow-wrap: anywhere;
}
.console-total small {
  font-size: 11px;
  letter-spacing: 0;
  color: #92b49f;
  margin-left: 6px;
  font-weight: 400;
}
.console-balance p {
  font-size: 11px;
  color: #92ab9b;
}
.console-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.console-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.console-metrics > div {
  padding: 14px 12px;
  background: var(--panel);
  border: 1px solid #ffffff05;
  border-radius: 15px;
  min-width: 0;
}
.console-metrics span {
  display: block;
  font-size: 12px;
  color: #9ba8a0;
}
.console-metrics strong {
  display: block;
  margin: 6px 0 2px;
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
}
.console-metrics small {
  font-size: 10px;
  color: #7c8982;
}
.console-metrics strong small {
  margin-left: 5px;
  font-size: 12px;
}
.console-section {
  border-radius: 18px;
  background: var(--panel);
  padding: 6px 15px 14px;
  margin-top: 14px;
}
.console-section h2 {
  font-size: 15px;
}
.referral-total {
  padding: 7px 0 14px;
}
.referral-total > span {
  color: #9cac9f;
  font-size: 12px;
}
.referral-total strong {
  display: block;
  font-size: clamp(26px, 8vw, 32px);
  letter-spacing: -0.7px;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  margin: 3px 0;
  overflow-wrap: anywhere;
}
.referral-total p,
.console-caption,
.console-pool p {
  color: #7f8e85;
  font-size: 11px;
  line-height: 1.7;
}
.console-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #ffffff08;
  font-size: 12px;
}
.console-row > span {
  flex-shrink: 0;
  color: #96a49c;
}
.console-row strong {
  font-size: 13px;
  text-align: right;
  font-weight: 500;
  overflow-wrap: anywhere;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.console-row small {
  font-size: 10px;
  color: #83958b;
}
.console-pool {
  border-top: 1px solid #ffffff08;
  margin-top: 12px;
}
.console-pool summary,
.console-demo summary {
  cursor: pointer;
  padding: 13px 0;
  min-height: 44px;
  font-size: 12px;
  color: #a6bbad;
}
.console-pool > strong {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 500;
}
.withdrawal-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0 14px;
}
.withdrawal-totals span {
  font-size: 11px;
  color: #8c9c92;
}
.withdrawal-totals strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  margin-top: 5px;
}
.withdrawal-totals small {
  font-size: 10px;
  color: #819489;
}
.console-empty {
  text-align: center;
  font-size: 13px;
  padding: 22px 8px;
  border-top: 1px solid #ffffff08;
  color: #a5b5aa;
}
.console-empty small {
  display: block;
  font-size: 11px;
  color: #778b7e;
  line-height: 1.8;
  margin-top: 6px;
}
.console-demo {
  margin: 20px 2px 0;
}
.console-demo p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.withdraw-available {
  margin: 20px 0;
}
.withdraw-available > span {
  color: #94a89c;
  font-size: 12px;
}
.withdraw-available strong {
  display: block;
  font-size: 27px;
  font-weight: 550;
  margin-top: 5px;
}
.withdraw-available small {
  font-size: 12px;
  color: #8c9e92;
}
.withdraw-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  border: 1px solid #3f594a;
  border-radius: 14px;
  background: #111a15;
}
.withdraw-input input {
  width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  min-width: 0;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.withdraw-input > span {
  font-size: 11px;
  color: #87a894;
}
.withdraw-input button {
  color: #a4ebc4;
  font-size: 13px;
  min-width: 44px;
}
.withdraw-input:focus-within {
  border-color: #7ae1b0;
}
#withdraw-error {
  min-height: 20px;
  font-size: 12px;
  margin: 6px 0 14px;
}
.team-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
.team-summary strong {
  font-size: 18px;
  font-weight: 550;
}
.team-summary span {
  font-size: 12px;
  color: #8fa397;
}
.team-member {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #ffffff0b;
}
.member-avatar {
  width: 32px;
  height: 32px;
  font-size: 15px;
  border-radius: 10px;
}
.team-member > div {
  min-width: 0;
  flex: 1;
}
.team-member strong {
  font-size: 14px;
  font-weight: 500;
}
.team-member strong small {
  font-size: 10px;
  color: #8fc5a5;
  margin-left: 4px;
}
.team-member > div > span {
  display: block;
  font-size: 11px;
  color: #91a398;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.team-member > b {
  font-size: 11px;
  color: #8ca394;
  font-weight: 400;
}

.purchase-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.purchase-page-header > span {
  font-size: 11px;
  color: #839d8e;
}
.purchase-page-header .text-action {
  padding-left: 0;
  font-size: 13px;
}
.purchase-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 22px;
}
#purchase-bot {
  width: 76px;
  flex-shrink: 0;
}
#purchase-bot svg {
  width: 100%;
  height: auto;
}
.purchase-product > div:last-child {
  min-width: 0;
}
.purchase-product span {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #80b797;
}
.purchase-product h1 {
  font-size: 29px;
  margin: 3px 0;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.purchase-product p {
  font-size: 11px;
  color: #94a69b;
}
.buy-amount-card {
  padding: 18px;
  background: linear-gradient(125deg, #22382a, #191f1c);
  border: 1px solid #7ae1b026;
  border-radius: 20px;
}
.buy-amount-card > label {
  font-size: 13px;
  color: #abc2b4;
}
.buy-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1px solid #7ae1b020;
}
.buy-input input {
  width: 0;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #f0fff5;
  font-size: clamp(27px, 8.5vw, 36px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.buy-input:focus-within {
  border-color: #7ae1b0;
}
.buy-input > span {
  font-size: 13px;
  color: #a7cbb6;
}
.buy-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.buy-presets button {
  border: 1px solid #405547;
  border-radius: 10px;
  font-size: 12px;
  color: #a8bfb1;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.buy-presets button.selected {
  background: #7ae1b020;
  border-color: #7ae1b0;
  color: #caffdf;
}
#buy-error:empty {
  display: none;
}
.buy-allocation,
.buy-recipient {
  padding: 18px 16px 6px;
  border: 1px solid #ffffff08;
  border-radius: 18px;
  background: var(--panel);
  margin-top: 14px;
}
.buy-allocation h2,
.buy-recipient h2,
.buy-steps h2 {
  font-size: 15px;
  font-weight: 550;
}
.allocation-bar {
  display: flex;
  gap: 3px;
  height: 27px;
  margin: 15px 0 6px;
  font-size: 11px;
  border-radius: 7px;
  overflow: hidden;
}
.allocation-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #355d46;
  color: #c6efda;
  width: 60%;
}
.allocation-bar span:last-child {
  width: 40%;
  color: #d6ceec;
  background: #48405b;
}
.allocation-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #7ae1b0;
  border-radius: 50%;
  margin-right: 6px;
}
.allocation-dot.bonus {
  background: #ac93d5;
}
.buy-allocation > p {
  font-size: 11px;
  line-height: 1.8;
  color: #8d9d93;
  padding: 2px 0 10px;
}
.buy-recipient {
  padding-top: 4px;
}
.buy-status {
  font-size: 11px;
  color: #d3b980;
}
.buy-payee {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0 16px;
}
.buy-payee strong {
  font-size: 14px;
  font-weight: 550;
}
.buy-payee p {
  font-size: 11px;
  color: #8b9b91;
  margin-top: 4px;
}
.buy-checkout {
  margin: 18px 0;
}
.buy-checkout p {
  text-align: center;
  color: #8a9d91;
  font-size: 11px;
  margin: 10px 0 0;
}
.buy-checkout .text-action {
  margin: 0 auto;
  color: #b6dec6;
}
.buy-steps {
  padding: 12px 2px 0;
}
.buy-steps ol {
  padding: 4px 0 0;
  margin: 0;
  list-style: none;
}
.buy-steps li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  align-items: flex-start;
}
.buy-steps li > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #486150;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 12px;
  color: #b9d9c4;
}
.buy-steps strong {
  font-size: 13px;
  font-weight: 500;
}
.buy-steps p {
  font-size: 11px;
  line-height: 1.7;
  color: #83988b;
  margin-top: 4px;
}
@media (max-width: 359px) {
  .buy-amount-card {
    padding: 14px;
  }
  .buy-presets {
    gap: 6px;
  }
  .buy-presets button {
    font-size: 11px;
  }
  .purchase-product h1 {
    font-size: 26px;
  }
  .buy-allocation,
  .buy-recipient {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Motion stays attached to state changes, never ambient decoration. */
.agent {
  transition:
    color 160ms,
    opacity 160ms;
}
.agent-avatar {
  opacity: 0.7;
  transition: opacity 160ms;
}
.agent.active .agent-avatar {
  opacity: 1;
}
.income-dock {
  position: absolute;
  right: 8px;
  top: 0;
  opacity: 0;
  color: var(--green);
  background: var(--bg);
  padding: 3px 0 3px 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.bottom-nav > button {
  flex: 1;
  min-width: 0;
  z-index: 1;
}
.bottom-nav > button.active {
  background: transparent;
}
.nav-indicator {
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: calc(4px + env(safe-area-inset-bottom));
  width: calc((100% - 24px) / 4);
  border-radius: 10px;
  background: #7ae1b00b;
  transition: transform 180ms ease-out;
  pointer-events: none;
}

/* Network totals share a stable width, including on compact wallet screens. */
#equity {
  font-size: clamp(28px, 9vw, 38px);
}
.balance-under {
  flex-wrap: wrap;
  row-gap: 5px;
}
#session-profit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}
#session-profit small {
  margin-left: 0;
}
.connection-state {
  font-size: 10px;
  color: #9099a3;
}

.console-user > div { min-width: 0; }
.console-user strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-wallet-button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #7ae1b030;
  border-radius: 12px;
  background: #233b2f;
  color: #b5efd0;
  font-size: 12px;
  font-weight: 550;
}
.wallet-address {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.balance-label .strategy-mode {
  margin-left: 8px;
  padding: 2px 5px;
  border: 1px solid #ffffff1a;
  border-radius: 5px;
  color: #a7afb7;
  font-size: 10px;
  letter-spacing: 0;
}
.console-eyebrow { display: flex; align-items: center; justify-content: space-between; }
.console-eyebrow .text-action { min-height: 32px; }
.console-buy { width: 100%; margin-top: 20px; }
.console-total { font-size: clamp(27px, 8.7vw, 38px); }
.console-total #wallet-balance { font: inherit; color: inherit; }
.account-data-heading { margin: 24px 0 12px; }
.account-data-heading > span { color: var(--muted); }
.empty-record-icon { display: block; font-size: 36px; opacity: .5; margin-bottom: 20px; }