:root {
  color-scheme: dark;
  --bg: #070910;
  --surface: rgb(13 18 29 / 86%);
  --surface-2: rgb(255 255 255 / 7%);
  --surface-3: rgb(255 255 255 / 11%);
  --text: #f8fafc;
  --soft-text: #d8e0eb;
  --muted: #8995a8;
  --line: rgb(255 255 255 / 11%);
  --line-strong: rgb(255 255 255 / 20%);
  --accent: #68f7d4;
  --gold: #f7c56b;
  --danger: #ff8a8a;
  --focus: #9ecbff;
  --shadow: 0 18px 54px rgb(0 0 0 / 42%);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% -9rem, rgb(104 247 212 / 24%), transparent 25rem),
    radial-gradient(circle at 85% 8rem, rgb(247 197 107 / 12%), transparent 18rem),
    linear-gradient(180deg, #121826 0%, #080b13 44%, #05070b 100%);
}

body {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 18rem),
    var(--bg);
  color: var(--text);
  font-family: var(--project-font);
  font-size: 12px;
  letter-spacing: 0;
}

.mobile-only-notice {
  display: none;
}

@media (min-width: 601px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  body > *:not(.mobile-only-notice) {
    display: none;
  }

  .mobile-only-notice {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    color: var(--soft-text);
    font-size: 16px;
    font-weight: 820;
    text-align: center;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(255 255 255 / 2.8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2.8%) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 64%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 11px 8px;
  background: linear-gradient(180deg, rgb(7 9 16 / 96%), rgb(7 9 16 / 74%));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
}

.icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: middle;
}

.icon-inline svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.1;
}

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

.icon-btn,
.close-btn {
  display: grid;
  place-items: center;
  width: 29px;
  min-width: 29px;
  height: 29px;
  min-height: 29px;
  padding: 0;
}

.icon-btn {
  gap: 3px;
}

.icon-btn span {
  display: block;
  width: 13px;
  height: 1px;
  background: currentColor;
}

.close-btn {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.menu {
  position: fixed;
  top: 52px;
  right: max(8px, calc((100vw - 430px) / 2 + 8px));
  z-index: 20;
  width: min(210px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgb(13 18 29 / 97%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  animation: menuIn 160ms ease both;
}

.menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line);
}

.menu-nav {
  display: grid;
  gap: 5px;
  padding-top: 8px;
}

.menu-link {
  width: 100%;
  text-align: left;
}

.menu-link.active {
  border-color: rgb(104 247 212 / 58%);
  background: rgb(104 247 212 / 12%);
  color: var(--accent);
}

.view-section {
  display: none;
}

main[data-view="activity"] .view-section[data-view="activity"],
main[data-view="logs"] .view-section[data-view="logs"],
main[data-view="settings"] .view-section[data-view="settings"],
main[data-view="wallets"] .view-section[data-view="wallets"] {
  display: block;
}

.hero.view-section {
  display: none;
}

main[data-view="home"] .hero.view-section {
  display: grid;
}

main[data-view="home"] .live-panel.view-section {
  display: block;
}

main[data-view="wallets"] .split {
  display: grid;
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgb(104 247 212 / 52%);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgb(104 247 212 / 28%), rgb(247 197 107 / 15%)),
    rgb(255 255 255 / 7%);
  color: var(--accent);
  box-shadow: 0 8px 24px rgb(104 247 212 / 13%);
}

.brand-mark svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.1;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 16px;
  line-height: 1.05;
  font-weight: 850;
}

h2 {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 820;
}

.eyebrow {
  color: var(--accent);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 9px 8px 34px;
}

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  min-height: 92px;
  margin-bottom: 9px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(138deg, rgb(104 247 212 / 19%), transparent 46%),
    linear-gradient(315deg, rgb(247 197 107 / 13%), transparent 45%),
    linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%));
  box-shadow: var(--shadow);
  animation: floatIn 520ms ease both;
}

.hero h2 {
  max-width: 292px;
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.04;
  font-weight: 900;
}

.hero-message {
  max-width: 292px;
  margin-top: 6px;
  color: var(--soft-text);
  font-size: 11px;
  line-height: 1.35;
}

.status-pill {
  align-self: start;
  padding: 5px 7px;
  border: 1px solid rgb(104 247 212 / 48%);
  border-radius: 999px;
  background: rgb(104 247 212 / 12%);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.status-pill.live {
  border-color: rgb(247 197 107 / 58%);
  background: rgb(247 197 107 / 13%);
  color: var(--gold);
}

.panel {
  width: 100%;
  margin-bottom: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%)),
    var(--surface);
  box-shadow: 0 12px 34px rgb(0 0 0 / 20%);
  backdrop-filter: blur(18px);
}

.panel.entering {
  animation: riseIn 360ms ease both;
  animation-delay: var(--stagger, 0ms);
}

.panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.live-panel {
  padding-bottom: 9px;
}

.session-actions {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}

.session-actions button {
  flex: 1;
}

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

.live-card {
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(3 7 18 / 30%);
}

.live-card small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 820;
  text-transform: uppercase;
}

.live-card strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-event {
  margin-top: 8px;
  padding: 8px;
  border-left: 2px solid var(--accent);
  background: rgb(104 247 212 / 6%);
  color: var(--soft-text);
  font-size: 10px;
  line-height: 1.35;
}

.live-updates {
  display: grid;
  gap: 4px;
  max-height: 230px;
  margin-top: 8px;
  overflow: auto;
}

.live-update {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgb(3 7 18 / 30%);
  color: var(--soft-text);
  font-family: inherit;
  font-size: 10px;
  line-height: 1.3;
}

.live-update time {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
}

.tabs {
  position: sticky;
  top: 48px;
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 -8px 9px;
  padding: 7px 8px;
  background: linear-gradient(180deg, rgb(7 9 16 / 94%), rgb(7 9 16 / 74%));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px);
}

button,
.tab {
  width: auto;
  min-height: 29px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0 9px;
  background: var(--surface-2);
  color: var(--soft-text);
  font-size: 10.5px;
  font-weight: 820;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease;
}

button:hover,
button:focus-visible {
  border-color: rgb(104 247 212 / 58%);
  color: var(--accent);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0) scale(0.98);
}

.tab {
  width: 100%;
}

.tab.active {
  border-color: rgb(104 247 212 / 58%);
  background: linear-gradient(135deg, rgb(104 247 212 / 20%), rgb(255 255 255 / 6%));
  color: var(--accent);
}

.ghost-btn {
  min-width: 58px;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.primary-btn {
  justify-self: end;
  min-width: 62px;
  border-color: rgb(104 247 212 / 44%);
  background: linear-gradient(135deg, rgb(104 247 212 / 21%), rgb(104 247 212 / 7%));
  color: #defcf6;
}

button.danger {
  min-width: 46px;
  min-height: 27px;
  padding: 0 7px;
  border-color: rgb(255 138 138 / 34%);
  color: var(--danger);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

button.pulse {
  animation: buttonPulse 360ms ease;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.activity-panel {
  padding-bottom: 9px;
}

.activity-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 9px;
}

.activity-stats div {
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(3 7 18 / 30%);
}

.activity-stats span {
  display: block;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.activity-stats small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 820;
  text-transform: uppercase;
}

.activity-list {
  display: grid;
  gap: 7px;
}

.bot-log-list {
  display: grid;
  gap: 6px;
}

.log-line {
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(104 247 212 / 6%), transparent 42%),
    rgb(2 6 14 / 52%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.log-line.warn {
  border-color: rgb(247 197 107 / 28%);
}

.log-line.error {
  border-color: rgb(255 138 138 / 30%);
}

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

.log-level {
  min-width: 34px;
  padding: 3px 5px;
  border: 1px solid rgb(104 247 212 / 28%);
  border-radius: 999px;
  color: var(--accent);
  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.log-line.warn .log-level {
  border-color: rgb(247 197 107 / 34%);
  color: var(--gold);
}

.log-line.error .log-level {
  border-color: rgb(255 138 138 / 36%);
  color: var(--danger);
}

.log-top time {
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 9px;
}

.log-line pre {
  max-height: 92px;
  margin: 0;
  overflow: auto;
  color: var(--soft-text);
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 9.8px;
  line-height: 1.36;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.activity-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 8px;
  min-height: 68px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 6%), transparent),
    rgb(3 7 18 / 30%);
}

.activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgb(137 149 168 / 10%);
}

.activity-item.success .activity-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(104 247 212 / 12%);
}

.activity-item.warning .activity-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgb(247 197 107 / 12%);
}

.activity-item.error .activity-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgb(255 138 138 / 12%);
}

.activity-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.activity-meta {
  margin-top: 3px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 9.5px;
}

.activity-message {
  margin-top: 5px;
  color: var(--soft-text);
  font-size: 10.5px;
  line-height: 1.3;
}

.activity-money {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
}

.activity-money strong,
.activity-money span,
.activity-money a {
  min-height: 23px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--soft-text);
  font-size: 9.5px;
  font-weight: 820;
  text-decoration: none;
}

.activity-money strong {
  border-color: rgb(104 247 212 / 34%);
  color: var(--accent);
}

.micro-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(3 7 18 / 28%);
}

.micro-field span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.micro-field input,
.micro-field select {
  width: 92px;
  min-height: 28px;
  padding: 4px 8px;
  text-align: right;
}

.toggle-field {
  grid-template-columns: minmax(0, 1fr) auto;
}

.toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
}

.toggle-wrap input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle-slider {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  transition: background 180ms ease, border-color 180ms ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
  transition: transform 180ms ease;
}

.toggle-wrap input:checked + .toggle-slider {
  border-color: rgb(104 247 212 / 48%);
  background: rgb(104 247 212 / 24%);
}

.toggle-wrap input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--accent);
}

.settings-panel .primary-btn {
  min-width: 56px;
  min-height: 28px;
}

.form-grid,
.split,
.inline-form,
.inline-form.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.split.view-section {
  display: none;
}

main[data-view="wallets"] .split.view-section {
  display: grid;
}

label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

input,
select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: rgb(3 7 18 / 45%);
  color: var(--text);
  font-size: 12px;
}

input::placeholder {
  color: rgb(137 149 168 / 68%);
}

input:focus,
select:focus,
button:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.list {
  display: grid;
  gap: 6px;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 49px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(3 7 18 / 29%);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.row:hover {
  border-color: rgb(104 247 212 / 24%);
  background: rgb(255 255 255 / 7%);
  transform: translateY(-1px);
}

.row-title {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.row-sub {
  margin-top: 3px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 10px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.muted,
#counts {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.empty-state {
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: rgb(3 7 18 / 22%);
  font-size: 11px;
  text-align: center;
}

.pagination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.pagination button {
  min-width: 52px;
  min-height: 27px;
}

#tokenPageInfo,
#activityPageInfo,
#logsPageInfo {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  text-align: center;
}

.toast {
  position: fixed;
  right: max(9px, calc((100vw - 430px) / 2 + 9px));
  bottom: 10px;
  left: max(9px, calc((100vw - 430px) / 2 + 9px));
  z-index: 20;
  max-width: 412px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgb(8 11 18 / 92%);
  color: white;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  font-size: 11px;
}

.toast.error {
  border-color: rgb(255 138 138 / 40%);
  background: rgb(80 18 26 / 94%);
}

.login-body {
  display: grid;
  align-items: center;
}

.login-shell {
  padding-top: 18px;
}

.login-hero {
  min-height: 118px;
}

.login-hero h2 {
  font-size: 28px;
}

.login-panel h1 {
  font-size: 15px;
}

.login-form {
  display: grid;
  gap: 9px;
}

.login-button {
  justify-self: stretch;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes buttonPulse {
  0% {
    box-shadow: 0 0 0 0 rgb(104 247 212 / 28%);
  }

  100% {
    box-shadow: 0 0 0 12px rgb(104 247 212 / 0%);
  }
}

/* Operations console skin */
:root {
  --bg: #07100f;
  --surface: rgb(12 27 25 / 88%);
  --surface-2: rgb(129 224 190 / 8%);
  --surface-3: rgb(129 224 190 / 14%);
  --text: #e7f4ed;
  --soft-text: #b6cec2;
  --muted: #718b82;
  --line: rgb(129 224 190 / 16%);
  --line-strong: rgb(129 224 190 / 31%);
  --accent: #8de5bf;
  --gold: #e5bb70;
  --danger: #ef8585;
  --focus: #b8f0d7;
  --shadow: 0 22px 60px rgb(0 0 0 / 38%);
}

html {
  background:
    radial-gradient(circle at 14% 0, rgb(44 115 94 / 18%), transparent 30rem),
    linear-gradient(135deg, #0c1a18 0%, #07100f 48%, #050908 100%);
}

body {
  width: min(100%, 1440px);
  padding: 0 28px 96px;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgb(129 224 190 / 3%) 50%, transparent 50.2%),
    linear-gradient(180deg, rgb(129 224 190 / 4%), transparent 20rem),
    transparent;
  font-family: "Space Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body::before {
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.mobile-only-notice {
  display: none !important;
}

@media (min-width: 601px) {
  body > *:not(.mobile-only-notice) {
    display: revert;
  }
}

.topbar {
  position: relative;
  max-width: 1384px;
  margin: 0 auto;
  padding: 22px 0 18px;
  background: linear-gradient(180deg, rgb(7 16 15 / 96%), rgb(7 16 15 / 70%));
  border-bottom-color: var(--line-strong);
}

.brand {
  gap: 14px;
}

.brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: linear-gradient(145deg, rgb(141 229 191 / 24%), rgb(7 16 15 / 80%));
  color: var(--accent);
  box-shadow: 7px 7px 0 rgb(141 229 191 / 12%), 0 0 30px rgb(141 229 191 / 12%);
  transform: skewY(-7deg);
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(141 229 191 / 55%);
}

.brand-mark::before {
  inset: 6px;
}

.brand-mark::after {
  inset: 11px;
  border-color: rgb(229 187 112 / 70%);
}

.brand-mark span {
  position: relative;
  z-index: 1;
  transform: skewY(7deg);
  font-size: 11px;
  font-weight: 900;
}

.brand-subtitle {
  margin-left: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1px;
}

h1,
h2,
.eyebrow,
button,
label,
small,
.muted,
.status-pill {
  font-family: inherit;
  letter-spacing: .06em;
  text-transform: uppercase;
}

h1 {
  font-size: 17px;
}

h2 {
  font-size: 14px;
}

.eyebrow {
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .14em;
}

.top-actions {
  gap: 9px;
}

.ghost-btn,
.icon-btn,
.close-btn,
button {
  border-radius: 2px;
}

.ghost-btn {
  min-height: 32px;
  border-color: var(--line-strong);
  background: rgb(129 224 190 / 4%);
}

.icon-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

main {
  max-width: 1384px;
  margin: 0 auto;
  padding: 30px 0 20px;
}

.hero {
  min-height: 178px;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 2px;
  border-color: var(--line-strong);
  background:
    linear-gradient(115deg, rgb(36 103 83 / 28%), transparent 43%),
    linear-gradient(300deg, rgb(229 187 112 / 10%), transparent 38%),
    rgb(10 28 25 / 86%);
  box-shadow: var(--shadow);
}

.hero::after {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 180px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: .6;
}

.hero h2 {
  max-width: 680px;
  margin-top: 9px;
  font-size: clamp(25px, 4vw, 42px);
  letter-spacing: -.02em;
  text-transform: none;
}

.hero-message {
  max-width: 640px;
  margin-top: 12px;
  font-family: var(--project-font);
  font-size: 13px;
  color: var(--soft-text);
}

.status-pill {
  padding: 8px 10px;
  border-radius: 2px;
  background: rgb(141 229 191 / 9%);
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgb(141 229 191 / 12%);
}

.status-pill::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  content: "";
  background: currentColor;
  box-shadow: 0 0 0 4px rgb(141 229 191 / 12%);
}

.status-pill.live .status-dot,
.status-pill:not(.live) .status-dot {
  animation: signalPulse 1.8s ease-in-out infinite;
}

.panel {
  margin-bottom: 18px;
  padding: 20px;
  border-radius: 2px;
  border-color: var(--line);
  background: linear-gradient(145deg, rgb(18 43 38 / 86%), rgb(8 21 19 / 90%));
  box-shadow: 0 14px 38px rgb(0 0 0 / 24%);
}

.panel-heading {
  margin-bottom: 16px;
}

.live-panel {
  padding-bottom: 20px;
}

.session-actions {
  max-width: 360px;
  margin-bottom: 18px;
}

.live-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.live-card,
.activity-stats div,
.row,
.log-line,
.activity-item,
.micro-field {
  border-radius: 2px;
  border-color: var(--line);
  background: rgb(3 13 12 / 42%);
}

.live-card {
  min-height: 82px;
  padding: 13px;
}

.live-card strong {
  margin-top: 8px;
  font-size: 14px;
}

.telemetry-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .12em;
}

.telemetry-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.signal-bars {
  width: 18px;
  height: 10px;
  border-bottom: 1px solid var(--accent);
  background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 4px);
  opacity: .75;
}

.latest-event {
  margin-top: 12px;
  border-left-color: var(--gold);
  background: rgb(229 187 112 / 6%);
}

.tabs {
  position: static;
  display: none;
  max-width: 1384px;
  margin: 0 auto 18px;
  padding: 0;
  background: transparent;
  border: 0;
}

main[data-view="settings"] .tabs,
main[data-view="wallets"] .tabs {
  display: grid;
}

.tab.active,
.menu-link.active {
  border-color: var(--accent);
  background: rgb(141 229 191 / 11%);
  color: var(--accent);
}

.settings-grid,
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid label:last-of-type,
.settings-grid .primary-btn,
.settings-grid .toggle-field {
  grid-column: span 2;
}

input,
select {
  border-radius: 2px;
  background: rgb(3 13 12 / 55%);
  font-family: inherit;
}

.split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.inline-form.two {
  grid-template-columns: 1fr 1.5fr auto;
}

.bottom-nav {
  position: fixed;
  right: 28px;
  bottom: 20px;
  left: 28px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgb(7 20 18 / 94%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.bottom-link {
  display: grid;
  gap: 3px;
  min-height: 42px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
}

.bottom-link .icon-inline {
  width: 15px;
  height: 15px;
  margin: 0;
}

.bottom-link.active {
  border: 1px solid var(--line-strong);
}

@keyframes signalPulse {
  0%, 100% { opacity: .5; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 760px) {
  body {
    padding: 0 12px 88px;
  }

  .topbar {
    padding: 15px 0 13px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .brand-subtitle {
    display: none;
  }

  .top-actions .ghost-btn {
    width: 34px;
    min-width: 34px;
    padding: 0;
    font-size: 0;
  }

  .top-actions .ghost-btn .icon-inline {
    margin: 0;
  }

  main {
    padding-top: 18px;
  }

  .hero {
    min-height: 160px;
    padding: 20px;
  }

  .hero h2 {
    font-size: 25px;
  }

  .live-grid,
  .settings-grid,
  .form-grid,
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid label:last-of-type,
  .settings-grid .primary-btn,
  .settings-grid .toggle-field {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  body {
    padding-right: 8px;
    padding-left: 8px;
  }

  .live-grid,
  .settings-grid,
  .form-grid,
  .split,
  .inline-form.two {
    grid-template-columns: 1fr;
  }

  .form-grid label:last-of-type,
  .settings-grid .primary-btn,
  .settings-grid .toggle-field {
    grid-column: auto;
  }

  .telemetry-strip span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.login-shell {
  width: min(100%, 520px);
  margin: 0 auto;
}

/* Reference mobile composition */
:root {
  --bg: #020b0b;
  --surface: #071514;
  --surface-2: #0a1b19;
  --text: #d9eee5;
  --soft-text: #a7c1b8;
  --muted: #6d8983;
  --line: rgb(108 190 166 / 22%);
  --line-strong: rgb(108 190 166 / 42%);
  --accent: #55f2b1;
  --gold: #d6a62c;
  --danger: #ff4f55;
  --shadow: 0 12px 30px rgb(0 0 0 / 28%);
}

html {
  background: #020b0b;
}

body {
  width: min(100%, 430px);
  padding: 0 16px 90px;
  background:
    linear-gradient(rgb(85 242 177 / 1.8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(85 242 177 / 1.8%) 1px, transparent 1px),
    #020b0b;
  background-size: 34px 34px;
  font-family: "Space Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body::before {
  display: none;
}

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 75px;
  padding: 15px 0 13px;
  background: rgb(2 11 11 / 94%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}

.brand {
  gap: 10px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #071d18;
  box-shadow: 3px 3px 0 rgb(85 242 177 / 13%);
}

.brand-mark::before { inset: 5px; }
.brand-mark::after { inset: 10px; }

.brand-subtitle {
  display: block;
  margin: 4px 0 0;
  font-size: 8px;
  letter-spacing: .14em;
}

.brand h1 {
  font-size: 14px;
  letter-spacing: .04em;
}

.eyebrow {
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .13em;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: 132px;
}

.top-actions .ghost-btn {
  width: 29px;
  min-width: 29px;
  padding: 0;
  font-size: 0;
}

.top-actions .ghost-btn .icon-inline { margin: 0; }
.top-actions .icon-btn { order: 3; }

.status-pill {
  order: 1;
  min-height: 22px;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--accent);
  font-size: 8px;
  letter-spacing: .06em;
}

.status-pill.live { color: var(--accent); background: transparent; }
.status-pill:not(.live) { color: var(--danger); background: transparent; }
.status-pill::before { display: none; }

.status-dot {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  box-shadow: 0 0 0 3px rgb(85 242 177 / 12%);
}

.menu { top: 65px; right: 8px; }

main {
  width: 100%;
  padding: 18px 0 10px;
}

.home-dashboard { display: none; }
main[data-view="home"] .home-dashboard { display: block; }
.operations-control.view-section { display: none !important; }
main[data-view="activity"] .operations-control.view-section { display: block !important; }

.home-status-row,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-status-row {
  min-height: 35px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.status-meta {
  display: flex;
  gap: 10px;
  margin-left: auto;
  color: var(--muted);
  font-size: 7px;
  text-align: right;
  text-transform: uppercase;
}

.status-meta span {
  display: grid;
  gap: 3px;
}

.status-meta strong {
  color: var(--soft-text);
  font-size: 8px;
  font-weight: 400;
}

.home-status-row .muted {
  display: block;
  margin-top: 4px;
  font-size: 9px;
}

.network-label,
.live-label {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.live-label { color: var(--accent); }
.live-label span { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; animation: signalPulse 1.8s ease-in-out infinite; }

.asset-summary {
  position: relative;
  min-height: 190px;
  margin-bottom: 12px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(13 42 35 / 72%), rgb(5 20 18 / 96%));
  box-shadow: var(--shadow);
}

.summary-copy { position: relative; z-index: 1; }
.summary-copy h2 { margin-top: 7px; font-size: 14px; text-transform: uppercase; }
.summary-value { display: block; margin-top: 7px; color: var(--accent); font-size: 25px; line-height: 1; letter-spacing: -.04em; }
.hero-message { max-width: 210px; margin-top: 8px; color: var(--soft-text); font-size: 8px; line-height: 1.4; }
.section-number { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 17px; margin-right: 5px; padding: 2px 4px; border: 1px solid rgb(214 166 44 / 46%); border-radius: 5px; color: var(--gold); }
.summary-trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--accent); font-size: 8px; text-transform: uppercase; }
.summary-trend svg { width: 12px; height: 12px; }
.intelligence-state { position: absolute; top: 20px; right: 13px; display: grid; gap: 2px; width: 76px; color: var(--muted); font-size: 7px; line-height: 1.25; text-transform: uppercase; }
.intelligence-state strong { margin-top: 4px; color: var(--accent); font-size: 7px; font-weight: 400; }
.intelligence-state strong i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.network-orbit {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 112px;
  height: 112px;
  perspective: 420px;
  transform-style: preserve-3d;
  border: 1px solid rgb(85 242 177 / 20%);
  border-radius: 50%;
  opacity: .72;
  animation: orbitDrift 14s linear infinite;
}

.network-orbit::before,
.network-orbit::after { position: absolute; content: ""; border: 1px solid rgb(85 242 177 / 18%); border-radius: 50%; }
.network-orbit::before { inset: 18px 0; transform: rotateX(68deg); }
.network-orbit::after { inset: 0 18px; transform: rotateY(68deg); }
.network-orbit span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: translateZ(16px); }
.network-orbit span:nth-child(1) { top: 14px; left: 52px; animation: nodeFloatA 4s ease-in-out infinite; }
.network-orbit span:nth-child(2) { right: 10px; bottom: 28px; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: nodeFloatB 5s ease-in-out infinite; }
.network-orbit span:nth-child(3) { bottom: 10px; left: 22px; animation: nodeFloatC 4.5s ease-in-out infinite; }
.network-orbit i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translate3d(-50%, -50%, 28px); box-shadow: 0 0 13px rgb(85 242 177 / 80%); }

@keyframes orbitDrift {
  0% { transform: rotateX(58deg) rotateY(-16deg) rotateZ(-8deg); }
  50% { transform: rotateX(72deg) rotateY(18deg) rotateZ(8deg); }
  100% { transform: rotateX(58deg) rotateY(-16deg) rotateZ(-8deg); }
}

@keyframes nodeFloatA {
  0%, 100% { transform: translate3d(0, 0, 12px); }
  50% { transform: translate3d(4px, 3px, 30px); }
}

@keyframes nodeFloatB {
  0%, 100% { transform: translate3d(0, 0, 24px); }
  50% { transform: translate3d(-5px, -3px, 8px); }
}

@keyframes nodeFloatC {
  0%, 100% { transform: translate3d(0, 0, 8px); }
  50% { transform: translate3d(3px, -4px, 26px); }
}

.summary-metrics { position: absolute; right: 13px; bottom: 13px; left: 13px; display: grid; grid-template-columns: repeat(3, 1fr); }
.summary-metrics div { min-width: 0; padding: 0 9px; border-left: 1px solid var(--line); }
.summary-metrics div:first-child { padding-left: 0; border-left: 0; }
.summary-metrics small { display: block; min-height: 22px; color: var(--muted); font-size: 7px; line-height: 1.3; text-transform: uppercase; }
.summary-metrics strong { display: block; margin-top: 4px; color: var(--text); font-size: 14px; }

.telemetry-section { margin-bottom: 12px; }
.section-heading { margin-bottom: 10px; }
.section-heading h2 { margin-top: 3px; font-size: 12px; text-transform: uppercase; }

.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.asset-card { position: relative; min-height: 90px; padding: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.asset-card-top { display: flex; align-items: center; justify-content: space-between; }
.asset-symbol { color: var(--soft-text); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.asset-mark { color: var(--accent); font-size: 13px; }
.asset-card strong { display: block; margin-top: 9px; color: var(--text); font-size: 12px; white-space: nowrap; }
.asset-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 6px; text-transform: uppercase; }
.sparkline { position: absolute; right: 11px; bottom: 12px; width: 48px; height: 15px; opacity: .72; background: linear-gradient(150deg, transparent 0 9%, var(--accent) 10% 12%, transparent 13% 28%, var(--accent) 29% 31%, transparent 32% 46%, var(--accent) 47% 49%, transparent 50% 69%, var(--accent) 70% 72%, transparent 73%); }
.sparkline-down { transform: scaleY(-1); opacity: .45; }

.panel { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: none; }
.watchlist-panel, .operations-panel { margin-bottom: 12px; }
.watchlist-labels { display: grid; grid-template-columns: 1.55fr .55fr .85fr .9fr 10px; gap: 7px; margin: 13px 0 6px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.watchlist { display: grid; gap: 0; }
.watchlist-row { display: grid; grid-template-columns: 1.55fr .55fr .85fr .9fr 10px; gap: 7px; align-items: center; min-height: 42px; border-top: 1px solid rgb(108 190 166 / 12%); color: var(--soft-text); font-size: 8px; }
.watch-address { display: flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-address > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.watch-address > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.watch-balance { overflow: hidden; color: var(--soft-text); text-overflow: ellipsis; white-space: nowrap; }
.watch-dot { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--muted); }
.watch-dot.active { background: var(--accent); box-shadow: 0 0 7px rgb(85 242 177 / 70%); }
.watch-dot.error { background: var(--danger); }
.watch-status { font-size: 7px; text-align: right; }
.watch-status.active { color: var(--accent); }
.watch-status.error { color: var(--danger); }
.watch-chevron { display: inline-flex; justify-content: flex-end; color: var(--muted); text-align: right; }
.watch-chevron svg { width: 13px; height: 13px; }

.text-link { width: auto; min-height: 25px; padding: 0; border: 0; background: transparent; color: var(--accent); font-family: inherit; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.home-operations { display: grid; gap: 0; }
.operation-row { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto 13px; gap: 7px; align-items: center; min-height: 58px; border-top: 1px solid rgb(108 190 166 / 12%); }
.operation-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid rgb(85 242 177 / 45%); border-radius: 50%; color: var(--accent); }
.operation-icon svg { width: 13px; height: 13px; }
.operation-icon.warning { border-color: rgb(214 166 44 / 60%); color: var(--gold); }
.operation-icon.error { border-color: rgb(255 79 85 / 60%); color: var(--danger); }
.operation-row time { color: var(--gold); font-size: 8px; }
.operation-row strong, .operation-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-row strong { color: var(--text); font-size: 9px; }
.operation-row div span { margin-top: 4px; color: var(--muted); font-size: 7px; }
.operation-status { color: var(--accent); font-size: 7px; }
.operation-status.warning { color: var(--gold); }
.operation-status.error { color: var(--danger); }

.live-panel { margin-bottom: 0; }
.session-actions { margin-bottom: 12px; }
.session-actions button { min-height: 32px; }
.telemetry-strip { margin-top: 12px; font-size: 7px; }
.latest-event { margin-top: 9px; padding: 8px; font-size: 8px; }
.live-updates { max-height: 190px; margin-top: 8px; }
.live-update { border-radius: 4px; font-size: 8px; }

.bottom-nav { right: 16px; bottom: 12px; left: 16px; width: auto; max-width: 398px; padding: 5px; border-radius: 7px; background: rgb(4 18 16 / 96%); }
.bottom-link { min-height: 39px; border-radius: 4px; color: var(--muted); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.bottom-link.active { border-color: rgb(85 242 177 / 42%); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

@media (min-width: 601px) {
  body { width: min(100%, 430px); margin: 0 auto; }
  body > *:not(.mobile-only-notice) { display: revert; }
  .mobile-only-notice { display: none !important; }
}

@media (max-width: 350px) {
  body { padding-right: 12px; padding-left: 12px; }
  .topbar { grid-template-columns: minmax(0, 1fr) 106px; }
  .brand-subtitle { display: none; }
  .summary-value { font-size: 26px; }
  .watchlist-labels, .watchlist-row { grid-template-columns: 1.4fr .5fr .8fr 8px; gap: 5px; }
}

button {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  border: 1px solid rgb(132 234 198 / 28%);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgb(139 241 204 / 13%), rgb(139 241 204 / 3%) 52%, rgb(0 0 0 / 17%)),
    rgb(8 28 24 / 82%);
  box-shadow:
    inset 0 1px 0 rgb(226 255 243 / 12%),
    inset 0 -1px 0 rgb(0 0 0 / 28%),
    0 5px 14px rgb(0 0 0 / 17%);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

button::after {
  position: absolute;
  top: -80%;
  left: -45%;
  width: 28%;
  height: 260%;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent);
  transform: rotate(18deg) translateX(-180%);
  transition: transform 500ms ease;
  pointer-events: none;
}

button:hover::after,
button:focus-visible::after { transform: rotate(18deg) translateX(540%); }

button:hover,
button:focus-visible {
  border-color: rgb(85 242 177 / 72%);
  background:
    linear-gradient(145deg, rgb(139 241 204 / 21%), rgb(139 241 204 / 6%) 52%, rgb(0 0 0 / 17%)),
    rgb(8 28 24 / 90%);
  box-shadow:
    inset 0 1px 0 rgb(226 255 243 / 19%),
    0 7px 20px rgb(0 0 0 / 24%),
    0 0 0 3px rgb(85 242 177 / 7%);
}

button:active { transform: translateY(1px) scale(.985); }

.primary-btn {
  border-color: rgb(85 242 177 / 58%);
  background:
    linear-gradient(145deg, rgb(85 242 177 / 25%), rgb(85 242 177 / 8%) 55%, rgb(0 0 0 / 18%)),
    rgb(7 36 27 / 90%);
  color: #cffff0;
}

.danger {
  border-color: rgb(255 79 85 / 46%) !important;
  background:
    linear-gradient(145deg, rgb(255 79 85 / 13%), rgb(255 79 85 / 3%) 55%, rgb(0 0 0 / 18%)),
    rgb(38 14 17 / 78%) !important;
  color: #ff9a9e !important;
}

.danger:hover,
.danger:focus-visible {
  border-color: rgb(255 79 85 / 76%) !important;
  box-shadow: inset 0 1px 0 rgb(255 220 220 / 14%), 0 7px 20px rgb(0 0 0 / 24%), 0 0 0 3px rgb(255 79 85 / 8%);
}

.icon-btn {
  border-radius: 10px;
  background: rgb(8 28 24 / 78%);
}

.ghost-btn {
  min-height: 34px;
  border-radius: 10px;
  background: rgb(8 28 24 / 70%);
}

.icon-inline {
  position: relative;
  z-index: 1;
}

.icon-inline svg,
.asset-mark svg,
.bottom-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
}

.asset-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgb(85 242 177 / 22%);
  border-radius: 7px;
  background: rgb(85 242 177 / 6%);
  color: var(--accent);
}

.asset-mark svg { width: 12px; height: 12px; }

.asset-card,
.panel,
.asset-summary {
  box-shadow: inset 0 1px 0 rgb(224 255 243 / 5%), 0 12px 28px rgb(0 0 0 / 16%);
}

.bottom-link::after,
.text-link::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  button::after { display: none; }
}

/* Original dashboard presentation */
:root {
  --bg: #070910;
  --surface: rgb(13 18 29 / 86%);
  --surface-2: rgb(255 255 255 / 7%);
  --surface-3: rgb(255 255 255 / 11%);
  --text: #f8fafc;
  --soft-text: #d8e0eb;
  --muted: #8995a8;
  --line: rgb(255 255 255 / 11%);
  --line-strong: rgb(255 255 255 / 20%);
  --accent: #68f7d4;
  --gold: #f7c56b;
  --danger: #ff8a8a;
  --focus: #9ecbff;
  --shadow: 0 18px 54px rgb(0 0 0 / 42%);
}

html { background: radial-gradient(circle at 50% -9rem, rgb(104 247 212 / 24%), transparent 25rem), radial-gradient(circle at 85% 8rem, rgb(247 197 107 / 12%), transparent 18rem), linear-gradient(180deg, #121826 0%, #080b13 44%, #05070b 100%); }
body { width: min(100%, 430px); padding: 0; background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 18rem), var(--bg); font-family: "Space Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
body::before { display: block; background: linear-gradient(rgb(255 255 255 / 2.8%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2.8%) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 64%); }
.topbar { position: sticky; display: grid; padding: 10px 11px 8px; background: linear-gradient(180deg, rgb(7 9 16 / 96%), rgb(7 9 16 / 74%)); border-bottom: 1px solid var(--line); }
.brand { gap: 8px; }
.brand-mark { width: 32px; height: 32px; border: 1px solid rgb(104 247 212 / 52%); border-radius: 10px; background: linear-gradient(145deg, rgb(104 247 212 / 28%), rgb(247 197 107 / 15%)), rgb(255 255 255 / 7%); color: var(--accent); box-shadow: 0 8px 24px rgb(104 247 212 / 13%); }
.brand-subtitle { display: none; }
.brand h1 { font-size: 16px; }
.eyebrow { color: var(--accent); font-size: 9px; letter-spacing: 0; }
.top-actions { display: flex; flex-wrap: nowrap; gap: 6px; max-width: none; }
.top-actions .ghost-btn { width: auto; min-width: 58px; padding: 0 9px; font-size: 10.5px; }
.top-actions .ghost-btn .icon-inline { margin-right: 6px; }
.top-actions .icon-btn { order: initial; }
.status-pill { padding: 5px 7px; border: 1px solid rgb(104 247 212 / 48%); border-radius: 999px; background: rgb(104 247 212 / 12%); color: var(--accent); font-size: 10px; }
.menu { top: 52px; right: max(8px, calc((100vw - 430px) / 2 + 8px)); width: min(210px, calc(100vw - 16px)); padding: 10px; border-radius: 8px; }
.home-dashboard, .network-label, .status-meta, .asset-summary, .telemetry-section, .watchlist-panel, .operations-panel, .bottom-nav { display: none !important; }
main { width: 100%; padding: 9px 8px 34px; }
.view-section { display: none; }
main[data-view="activity"] .view-section[data-view="activity"], main[data-view="logs"] .view-section[data-view="logs"], main[data-view="settings"] .view-section[data-view="settings"], main[data-view="wallets"] .view-section[data-view="wallets"] { display: block; }
.hero.view-section { display: none; }
main[data-view="home"] .hero.view-section { display: grid; }
main[data-view="home"] .live-panel.view-section { display: block; }
.hero { min-height: 92px; margin-bottom: 9px; padding: 12px; border-radius: 8px; background: linear-gradient(138deg, rgb(104 247 212 / 19%), transparent 46%), linear-gradient(315deg, rgb(247 197 107 / 13%), transparent 45%), linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%)); }
.hero h2 { max-width: 292px; margin-top: 4px; font-size: 19px; line-height: 1.04; }
.hero-message { max-width: 292px; margin-top: 6px; color: var(--soft-text); font-size: 11px; line-height: 1.35; }
.panel { margin-bottom: 9px; padding: 10px; border-radius: 8px; background: linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%)), var(--surface); box-shadow: 0 12px 34px rgb(0 0 0 / 20%); }
.panel-heading { margin-bottom: 8px; }
.session-actions { max-width: none; margin-bottom: 8px; }
.live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.live-card { min-height: 58px; padding: 8px; border-radius: 8px; }
.live-card strong { margin-top: 0; font-size: 12px; }
.telemetry-strip { display: none; }
.latest-event { margin-top: 8px; }
button { min-height: 29px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 9px; background: var(--surface-2); box-shadow: none; }
button::after { display: none; }
.primary-btn { border-color: rgb(104 247 212 / 44%); background: linear-gradient(135deg, rgb(104 247 212 / 21%), rgb(104 247 212 / 7%)); color: #defcf6; }
.danger { border-color: rgb(255 138 138 / 34%) !important; background: var(--surface-2) !important; color: var(--danger) !important; }

.session-actions button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.session-actions button.is-moving {
  cursor: wait;
  color: transparent !important;
  border-color: var(--cyan) !important;
  background: rgba(0, 217, 255, .08) !important;
  animation: commandMove 900ms ease-in-out infinite;
}

.session-actions button.is-moving::before {
  position: absolute;
  top: 50%;
  left: -35%;
  width: 30%;
  height: 1px;
  content: "";
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan), 18px 0 0 rgba(0, 217, 255, .5), 36px 0 0 rgba(0, 217, 255, .25);
  transform: translateY(-50%);
  animation: commandSweep 850ms linear infinite;
}

.session-actions button.is-moving::after {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: commandBeacon 700ms ease-in-out infinite;
}

.session-actions button.is-success {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, .12), 0 0 18px rgba(0, 255, 136, .18);
  animation: commandSuccess 700ms ease-out;
}

.session-actions button.is-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(255, 71, 87, .13), 0 0 18px rgba(255, 71, 87, .18);
  animation: commandError 300ms ease-in-out 2;
}

@keyframes commandMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

@keyframes commandSweep {
  from { transform: translate(-20px, -50%); }
  to { transform: translate(370px, -50%); }
}

@keyframes commandBeacon {
  0%, 100% { opacity: .35; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes commandSuccess {
  from { transform: scale(.97); }
  55% { transform: scale(1.02); }
  to { transform: scale(1); }
}

@keyframes commandError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .session-actions button.is-moving,
  .session-actions button.is-moving::before,
  .session-actions button.is-moving::after,
  .session-actions button.is-success,
  .session-actions button.is-error { animation: none; }
}

/* Futuristic telemetry feed */
.live-updates {
  position: relative;
  max-height: 190px;
  padding: 8px 6px 8px 8px;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 217, 255, .16);
  border-radius: 5px;
  background:
    linear-gradient(rgba(0, 217, 255, .025) 1px, transparent 1px),
    rgba(3, 12, 16, .86);
  background-size: 100% 22px;
  box-shadow: inset 0 0 20px rgba(0, 217, 255, .04);
}

.live-updates::-webkit-scrollbar { width: 0; height: 0; }
.live-updates::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  pointer-events: none;
}

.live-updates.telemetry-refresh::before {
  animation: telemetrySweep 900ms ease-out;
}

.live-update {
  position: relative;
  min-height: 38px;
  padding: 8px 9px 8px 13px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(182, 229, 226, .11);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0, 217, 255, .055), rgba(0, 255, 136, .018));
  animation: logMaterialize 360ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: var(--log-delay, 0ms);
}

.live-update::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  content: "";
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0, 255, 136, .55);
}

.live-update::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 4px;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px var(--cyan);
  animation: telemetryDot 1.8s ease-in-out infinite;
}

.live-update time { color: var(--cyan); font-size: 8px; letter-spacing: .05em; }
.live-update:not(:first-child) { opacity: .78; }

@keyframes telemetrySweep {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(185px); }
}

@keyframes logMaterialize {
  from { opacity: 0; transform: translateX(-8px); filter: brightness(1.8); }
  to { opacity: 1; transform: translateX(0); filter: brightness(1); }
}

@keyframes telemetryDot {
  0%, 100% { opacity: .35; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .live-updates.telemetry-refresh::before,
  .live-update,
  .live-update::after { animation: none; }
}

/* Futuristic network configuration console */
.settings-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 217, 255, .045), transparent 42%),
    rgba(9, 17, 21, .94);
}

.settings-section::before {
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .45;
}

.settings-section::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  content: "";
  border-right: 1px solid rgba(0, 255, 136, .3);
  border-bottom: 1px solid rgba(0, 255, 136, .3);
  opacity: .6;
  pointer-events: none;
}

.settings-section .panel-heading {
  position: relative;
  z-index: 1;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(182, 229, 226, .08);
}

.settings-section .panel-heading h2::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  content: "";
  border: 1px solid var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 217, 255, .65);
  animation: networkBeacon 1.8s ease-in-out infinite;
}

.settings-section .form-grid {
  position: relative;
  z-index: 1;
  gap: 9px;
}

.settings-section .form-grid label {
  position: relative;
  padding: 8px 8px 0;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.settings-section .form-grid label::before {
  position: absolute;
  top: 0;
  left: 8px;
  width: 20px;
  height: 1px;
  content: "";
  background: var(--accent);
  opacity: .5;
}

.settings-section .form-grid label.field-focus {
  border-color: rgba(0, 217, 255, .42);
  background: rgba(0, 217, 255, .045);
  transform: translateX(2px);
}

.settings-section .form-grid input {
  border-color: rgba(182, 229, 226, .16);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.settings-section .form-grid label.field-focus input {
  border-color: rgba(0, 217, 255, .65);
  background: rgba(0, 217, 255, .06);
  box-shadow: 0 0 0 2px rgba(0, 217, 255, .06), 0 0 14px rgba(0, 217, 255, .08);
}

.settings-section #saveNetworkBtn {
  position: relative;
  overflow: hidden;
  justify-self: end;
  min-width: 126px;
}

.settings-section #saveNetworkBtn.is-moving {
  color: transparent !important;
  cursor: wait;
  background: rgba(0, 217, 255, .12) !important;
  border-color: var(--cyan) !important;
  animation: networkSaveMove 850ms ease-in-out infinite;
}

.settings-section #saveNetworkBtn.is-moving::after {
  position: absolute;
  top: 50%;
  left: -30%;
  width: 25%;
  height: 1px;
  content: "";
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan), 16px 0 0 rgba(0, 217, 255, .45);
  animation: networkSaveSweep 700ms linear infinite;
}

.settings-section #saveNetworkBtn.is-success { animation: networkSaveSuccess 700ms ease-out; }
.settings-section #saveNetworkBtn.is-error { animation: networkSaveError 300ms ease-in-out 2; }
.settings-section.save-success { border-color: rgba(0, 255, 136, .55); }
.settings-section.save-error { border-color: rgba(255, 71, 87, .6); }

@keyframes networkBeacon { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes networkSaveMove { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes networkSaveSweep { from { transform: translateX(0); } to { transform: translateX(390px); } }
@keyframes networkSaveSuccess { 50% { box-shadow: 0 0 0 3px rgba(0, 255, 136, .14), 0 0 20px rgba(0, 255, 136, .22); } }
@keyframes networkSaveError { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .settings-section .panel-heading h2::before,
  .settings-section #saveNetworkBtn,
  .settings-section #saveNetworkBtn::after { animation: none; }
  .settings-section .form-grid label { transition: none; }
}

/* Futuristic secure wallet registry */
.key-vault-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 255, 136, .055), transparent 35%), rgba(9, 17, 21, .94);
}

.key-vault-panel::before {
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .6;
}

.key-vault-panel .panel-heading { position: relative; z-index: 1; border-bottom: 1px solid rgba(182, 229, 226, .08); padding-bottom: 9px; }
.key-vault-panel .eyebrow { margin-bottom: 5px; color: var(--cyan); }
.vault-state { color: var(--muted); font: 8px var(--project-font); letter-spacing: .1em; }
.vault-state i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: vaultPulse 1.8s ease-in-out infinite; }
.vault-scanline { position: absolute; top: 43px; right: 0; left: 0; height: 1px; background: var(--cyan); opacity: 0; pointer-events: none; }
.key-vault-panel:focus-within .vault-scanline { animation: vaultSweep 1.2s ease-out infinite; }
.key-form { align-items: stretch; gap: 7px; padding: 9px 0 11px; }
.key-input-wrap { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; }
.key-input-wrap > svg { position: absolute; left: 9px; z-index: 1; width: 14px; height: 14px; color: var(--accent); pointer-events: none; }
.key-input-wrap input { padding-right: 70px; padding-left: 30px; }
.key-input-wrap span { position: absolute; right: 8px; color: var(--muted); font: 7px var(--project-font); letter-spacing: .08em; pointer-events: none; }
.key-form button { min-width: 62px; }
.key-form button.is-moving { color: transparent !important; border-color: var(--cyan) !important; background: rgba(0, 217, 255, .08) !important; animation: keyDeleteMove 800ms ease-in-out infinite; }
.key-form button.is-moving::after { position: absolute; top: 50%; left: -20%; width: 24%; height: 1px; content: ""; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: keyDeleteSweep 650ms linear infinite; }
.key-form button.is-success { border-color: var(--accent) !important; color: var(--accent) !important; }
.key-form button.is-error { animation: keyDeleteError 300ms ease-in-out 2; }

.key-row { position: relative; overflow: hidden; animation: keyMaterialize 140ms ease both; animation-delay: var(--key-delay, 0ms); }
.key-row::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; background: var(--accent); box-shadow: 0 0 8px rgba(0, 255, 136, .4); }
.key-row .row-title { padding-left: 4px; font-size: 10px; }
.key-row .row-sub { padding-left: 4px; }
.key-delete { min-width: 58px; }
.key-delete .icon-inline { margin-right: 3px; }
.key-delete.is-moving { color: transparent !important; border-color: var(--cyan) !important; background: rgba(0, 217, 255, .08) !important; animation: keyDeleteMove 800ms ease-in-out infinite; }
.key-delete.is-moving::after { position: absolute; top: 50%; left: -20%; width: 24%; height: 1px; content: ""; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: keyDeleteSweep 650ms linear infinite; }
.key-delete.is-success { border-color: var(--accent) !important; color: var(--accent) !important; }
.key-delete.is-error { animation: keyDeleteError 300ms ease-in-out 2; }

/* Lightweight text hierarchy: no heavy/bold copy. */
body,
button,
input,
select,
textarea,
label,
small,
p,
span,
time,
h1,
h2,
h3,
h4,
strong,
b,
pre {
  font-weight: 400 !important;
}

h1,
h2,
h3,
h4 {
  font-weight: 500 !important;
}

.primary-btn,
.danger,
.ghost-btn,
.tab,
.menu-link,
.status-pill,
.eyebrow,
.asset-symbol,
.log-level {
  font-weight: 400 !important;
}

@keyframes vaultPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes vaultSweep { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(60px); } }
@keyframes keyMaterialize { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes keyDeleteMove { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes keyDeleteSweep { from { transform: translateX(0); } to { transform: translateX(160px); } }
@keyframes keyDeleteError { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .vault-state i, .key-vault-panel:focus-within .vault-scanline, .key-row, .key-delete.is-moving, .key-delete.is-moving::after, .key-delete.is-error { animation: none; }
}

/* One typography system for every visible text element. */
:root { --project-font: 'DM Mono', 'Space Mono', 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', 'Courier New', monospace; }
*, *::before, *::after { font-family: var(--project-font) !important; }
svg, svg * { font-family: initial !important; }
.ghost-btn { min-height: 29px; border-radius: 7px; background: var(--surface-2); }
.activity-stats { gap: 7px; margin-bottom: 9px; }
.activity-stats div { min-height: 48px; padding: 8px; border-radius: 8px; }
.settings-grid, .form-grid { grid-template-columns: 1fr; gap: 7px; }
.form-grid label:last-of-type, .settings-grid .primary-btn, .settings-grid .toggle-field { grid-column: auto; }
.split { grid-template-columns: 1fr; gap: 8px; }
.inline-form.two { grid-template-columns: 1fr; gap: 8px; }
.tabs { position: sticky; top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 -8px 9px; padding: 7px 8px; background: linear-gradient(180deg, rgb(7 9 16 / 94%), rgb(7 9 16 / 74%)); border-bottom: 1px solid var(--line); }
.toast { right: max(9px, calc((100vw - 430px) / 2 + 9px)); left: max(9px, calc((100vw - 430px) / 2 + 9px)); max-width: 412px; }

@media (min-width: 601px) {
  html, body { width: 100%; min-height: 100%; }
  body > *:not(.mobile-only-notice) { display: none; }
  .mobile-only-notice { display: grid !important; min-height: 100vh; place-items: center; padding: 24px; color: var(--soft-text); font-size: 16px; font-weight: 820; text-align: center; }
}

/* Nexmap-inspired visual system adapted to the existing mobile DOM. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #050708;
  --surface: rgba(9, 17, 21, .92);
  --surface-2: rgba(15, 29, 33, .84);
  --surface-3: rgba(16, 25, 32, .92);
  --text: #dce8e8;
  --soft-text: #a9bcbb;
  --muted: #718489;
  --line: rgba(182, 229, 226, .12);
  --line-strong: rgba(182, 229, 226, .2);
  --accent: #00ff88;
  --gold: #ff8a3d;
  --danger: #ff4757;
  --cyan: #00d9ff;
  --focus: #00d9ff;
  --shadow: 0 16px 42px rgba(0, 0, 0, .34);
}

html { background: #050708; }
body {
  background:
    radial-gradient(circle at 76% 8%, rgba(0, 217, 255, .045), transparent 25%),
    linear-gradient(135deg, #050708 0%, #071013 50%, #050708 100%);
  color: var(--text);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

body::before {
  opacity: .23;
  background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

h1, h2, button, label, small, .eyebrow, .muted, .status-pill, .row-sub, .activity-meta, .log-top time, .pagination, .live-card strong, .activity-stats span, .summary-metrics strong {
  font-family: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
}

h1, h2 { letter-spacing: .02em; }
h2 { font-weight: 500; }
.eyebrow { color: var(--muted); letter-spacing: .12em; }

.topbar {
  background: rgba(5, 9, 11, .9);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(0, 255, 136, .05);
}

.brand-mark {
  border-color: rgba(0, 255, 136, .55);
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(0, 255, 136, .06);
  box-shadow: 0 0 18px rgba(0, 255, 136, .08);
}

.brand-mark svg { color: var(--accent); }
.brand h1 { font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: .08em; }
.top-actions { gap: 5px; }

button,
.ghost-btn,
.icon-btn,
.close-btn,
.tab {
  border-color: var(--line);
  border-radius: 5px;
  background: rgba(15, 29, 33, .72);
  color: var(--soft-text);
  box-shadow: none;
}

button:hover,
button:focus-visible {
  border-color: rgba(0, 217, 255, .48);
  background: #0d191c;
  color: var(--text);
  box-shadow: 0 0 15px rgba(0, 217, 255, .08);
}

.primary-btn {
  border-color: transparent;
  border-radius: 5px;
  background: var(--accent);
  color: #04150d;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(0, 255, 136, .14);
}

.danger {
  border-color: rgba(255, 71, 87, .35) !important;
  background: rgba(255, 71, 87, .08) !important;
  color: var(--danger) !important;
}

.menu,
.panel,
.hero,
.tabs {
  border-color: var(--line);
  border-radius: 6px;
  background: rgba(9, 17, 21, .88);
  box-shadow: none;
}

.hero {
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  transform: perspective(700px) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
  background: linear-gradient(135deg, rgba(0, 255, 136, .09), transparent 48%), rgba(9, 17, 21, .88);
}

.hero h2 { font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -.02em; }
.status-pill { border-color: rgba(0, 255, 136, .35); background: rgba(0, 255, 136, .08); color: var(--accent); }
.status-pill.live { border-color: rgba(0, 255, 136, .55); color: var(--accent); }

.status-pill.running { position: relative; }
.status-pill.running::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; content: ""; background: currentColor; box-shadow: 0 0 8px currentColor; animation: runningIndicator 900ms ease-in-out infinite; }
@keyframes runningIndicator { 0%, 100% { opacity: .45; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.22); } }

@media (prefers-reduced-motion: reduce) {
  .hero { transform: none; transition: none; }
  .status-pill.running::before { animation: none; }
}

.live-card,
.activity-stats div,
.row,
.log-line,
.activity-item,
.micro-field {
  border-color: var(--line);
  border-radius: 5px;
  background: rgba(12, 23, 27, .72);
}

.live-card strong,
.activity-stats span,
.row-title { color: var(--text); }
.live-card small, .activity-stats small, .micro-field span, label { color: var(--muted); }
.latest-event { border-left-color: var(--accent); background: rgba(0, 255, 136, .06); color: var(--soft-text); }
.live-update { border-color: var(--line); border-radius: 4px; background: rgba(8, 19, 24, .8); }

input, select {
  border-color: var(--line);
  border-radius: 4px;
  background: #081318;
  color: var(--text);
  font-family: 'DM Mono', monospace;
}

.tab.active,
.menu-link.active {
  border-color: rgba(0, 255, 136, .4);
  background: linear-gradient(90deg, rgba(0, 255, 136, .15), rgba(0, 255, 136, .035));
  color: var(--accent);
}

.activity-item { animation: nexmapRise 260ms ease both; }
.panel.entering, .hero { animation: nexmapRise 300ms ease both; }
.panel:nth-child(2) { animation-delay: 40ms; }
.panel:nth-child(3) { animation-delay: 80ms; }
.panel:nth-child(4) { animation-delay: 120ms; }

@keyframes nexmapRise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nexmapPulse {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(0, 255, 136, .08); }
}

.status-dot, .activity-dot, .signal-bars { animation: nexmapPulse 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .activity-item, .panel.entering, .hero, .status-dot, .activity-dot, .signal-bars { animation: none; }
}

/* Futuristic product header */
.topbar {
  position: relative;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 12px 11px;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(0, 255, 136, .06), transparent 38%),
    linear-gradient(90deg, rgba(5, 9, 11, .98), rgba(7, 18, 22, .9));
  border-bottom: 1px solid rgba(0, 255, 136, .2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.topbar::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 12px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--accent), rgba(0, 217, 255, .4), transparent 78%);
  opacity: .7;
}

.topbar::after {
  position: absolute;
  top: 0;
  right: 12px;
  width: 42px;
  height: 3px;
  content: "";
  background: var(--accent);
  box-shadow: 0 0 16px rgba(0, 255, 136, .65);
}

.brand { position: relative; z-index: 1; gap: 10px; }
.brand-mark { position: relative; width: 38px; height: 38px; border-radius: 6px; clip-path: polygon(50% 0, 100% 23%, 100% 77%, 50% 100%, 0 77%, 0 23%); }
.brand-mark::before { position: absolute; inset: 4px; content: ""; border: 1px solid rgba(0, 255, 136, .3); clip-path: inherit; }
.brand-mark svg { position: relative; z-index: 1; width: 18px; height: 18px; }
.brand h1 { font-size: 17px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
.brand-subtitle { display: block; margin-top: 4px; color: var(--muted); font: 7px 'DM Mono', monospace; letter-spacing: .14em; }
.brand-index { color: var(--cyan); opacity: .75; }

.header-status { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.header-status-copy { display: grid; gap: 2px; white-space: nowrap; }
.header-status-copy b { color: var(--accent); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }
.header-status-copy small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.header-signal { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.header-signal i { display: block; width: 2px; background: var(--accent); animation: headerSignal 1.4s ease-in-out infinite; }
.header-signal i:nth-child(1) { height: 5px; animation-delay: 0ms; }
.header-signal i:nth-child(2) { height: 10px; animation-delay: 120ms; }
.header-signal i:nth-child(3) { height: 15px; animation-delay: 240ms; }

.top-actions { position: relative; z-index: 1; gap: 5px; }
.top-actions .icon-btn { width: 31px; min-width: 31px; height: 31px; border-color: rgba(0, 217, 255, .28); background: rgba(0, 217, 255, .04); }
.top-actions .ghost-btn { min-width: 31px; height: 31px; padding: 0 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.top-actions .ghost-btn .icon-inline { margin-right: 4px; }
.header-rail { position: absolute; right: 12px; bottom: 5px; width: 84px; height: 2px; background: repeating-linear-gradient(90deg, rgba(0, 217, 255, .6) 0 2px, transparent 2px 7px); opacity: .45; }

@keyframes headerSignal {
  0%, 100% { opacity: .35; transform: scaleY(.65); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 380px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .header-status { display: none; }
  .brand-subtitle { display: none; }
  .top-actions .ghost-btn span:not(.icon-inline) { display: none; }
  .top-actions .ghost-btn { padding: 0; }
}

@media (max-width: 600px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .header-status { display: none; }
  .brand { min-width: 0; }
  .brand > div { min-width: 0; }
  .brand h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-subtitle { font-size: 6px; }
  .top-actions .ghost-btn { padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-signal i { animation: none; }
}

/* Previous home layout row geometry */
.watchlist-labels { grid-template-columns: 1.5fr .6fr .9fr 10px; }
.watchlist-row { grid-template-columns: 1.5fr .6fr .9fr 10px; }
.operation-row { grid-template-columns: 42px minmax(0, 1fr) auto 13px; }
.operation-icon { display: none; }


/* Persistent mobile app navigation */
.app-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px max(10px, calc((100vw - 430px) / 2 + 10px)) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); background: rgb(9 13 22 / 96%); box-shadow: 0 -8px 28px rgb(0 0 0 / 28%); backdrop-filter: blur(18px); }
.app-nav .menu-link { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 48px; padding: 5px 2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 9px Manrope, sans-serif; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 100ms ease, color 100ms ease, transform 100ms ease; }
.app-nav .menu-link:active { transform: scale(.96); background: rgb(104 247 212 / 16%); }
.app-nav .menu-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app-nav .menu-link svg { width: 19px; height: 19px; }
.app-nav .menu-link.active { background: rgb(104 247 212 / 10%); color: var(--accent); }
main { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

.settings-section .network-save-status { grid-column: 1 / -1; min-height: 16px; margin: -2px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.settings-section .network-save-status.is-warning, .settings-section .network-save-status.is-error { color: #ff8c8c; }
.settings-section .network-save-status.is-pending { color: var(--cyan); }
.settings-section .network-save-status.is-saved { color: var(--accent); }