:root {
  --bg: 238 248 247;
  --bg-secondary: 244 255 253;
  --surface: 255 255 255;
  --surface-soft: 248 255 254;
  --text: 7 39 45;
  --text-muted: 83 117 123;
  --primary: 22 200 186;
  --primary-strong: 17 141 149;
  --success: 34 197 94;
  --warning: 245 158 11;
  --danger: 239 68 68;
  --border: 210 231 230;
  --shadow: 3 24 28;
  --bg-tint-a: 22 200 186;
  --bg-tint-b: 17 141 149;
  --bg-glow-a: 22 200 186;
  --bg-glow-b: 17 141 149;
}

html.dark {
  --bg: 3 24 28;
  --bg-secondary: 7 39 45;
  --surface: 10 48 54;
  --surface-soft: 13 59 65;
  --text: 238 255 253;
  --text-muted: 170 215 213;
  --primary: 22 200 186;
  --primary-strong: 35 222 207;
  --border: 42 91 96;
  --shadow: 0 0 0;
  --bg-tint-a: 22 200 186;
  --bg-tint-b: 17 141 149;
  --bg-glow-a: 22 200 186;
  --bg-glow-b: 17 141 149;
}

.brand-title::after {
  content: " by TECHM8";
  color: rgb(var(--text-muted));
  font-weight: 600;
}

.brand-mark {
  background: linear-gradient(135deg, #16c8ba, #118d95) !important;
}

.nav-actions {
  display: none !important;
}

.connect-banner,
.connect-page {
  min-height: calc(100vh - 102px);
}

.connect-card {
  min-height: calc(100vh - 126px) !important;
  align-items: flex-start !important;
  padding-top: clamp(44px, 8vh, 82px) !important;
  padding-bottom: clamp(44px, 8vh, 82px) !important;
}

.el-button--primary {
  --el-button-bg-color: #16c8ba;
  --el-button-border-color: #16c8ba;
  --el-button-hover-bg-color: #118d95;
  --el-button-hover-border-color: #118d95;
  --el-button-active-bg-color: #0f979b;
  --el-button-active-border-color: #0f979b;
}