:root {
  --app-shell-bg-a: rgba(13,110,253,.16);
  --app-shell-bg-b: rgba(32,201,151,.12);
  --app-panel-bg: rgba(255,255,255,.04);
  --app-panel-border: rgba(255,255,255,.10);
  --app-soft-text: rgba(255,255,255,.72);
  --app-elev: 0 0.75rem 2rem rgba(0,0,0,.14);
}

html[data-bs-theme="light"] {
  --app-shell-bg-a: rgba(13,110,253,.09);
  --app-shell-bg-b: rgba(25,135,84,.08);
  --app-panel-bg: rgba(255,255,255,.88);
  --app-panel-border: rgba(15,23,42,.10);
  --app-soft-text: rgba(15,23,42,.70);
  --app-elev: 0 0.75rem 1.75rem rgba(15,23,42,.08);
}

.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--app-shell-bg-a), transparent 30%),
    radial-gradient(circle at top right, var(--app-shell-bg-b), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 34%);
}

.app-page {
  color: var(--app-soft-text);
}

.app-brand {
  letter-spacing: 0;
}

.app-glass,
.app-panel,
.app-card {
  border: 1px solid var(--app-panel-border);
  background: var(--app-panel-bg);
  backdrop-filter: blur(10px);
}

.app-glass {
  border-radius: .875rem;
}

.app-panel,
.app-card {
  border-radius: .75rem;
}

.app-card-lift {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-elev);
  border-color: rgba(255,255,255,.16);
}

.app-muted {
  color: var(--app-soft-text);
}

.app-metric,
.app-timer,
.app-balance,
.app-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.app-wallet {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.app-nav {
  border-bottom: 1px solid var(--app-panel-border);
  backdrop-filter: blur(12px);
  background: rgba(10,13,22,.78);
}

html[data-bs-theme="light"] .app-nav {
  background: rgba(255,255,255,.92);
}

.app-nav .btn {
  border-radius: .7rem;
  font-weight: 600;
  line-height: 1.1;
}

.app-nav .btn-nav {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}

html[data-bs-theme="light"] .app-nav .btn-nav {
  border-color: rgba(15,23,42,.12);
  background: #fff;
  color: #0f172a;
}

.app-nav .btn-nav:hover {
  filter: brightness(1.08);
}

.app-nav .btn-nav-active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.app-nav .btn-nav-active:hover {
  background: #0b5ed7;
  color: #fff;
}

.app-nav .navbar-brand {
  letter-spacing: 0;
}

.app-nav .app-wallet-badge {
  background: rgba(255,255,255,.10)!important;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff!important;
}

html[data-bs-theme="light"] .app-nav .app-wallet-badge {
  background: rgba(15,23,42,.06)!important;
  border-color: rgba(15,23,42,.12);
  color: #0f172a!important;
}

.app-table-shell {
  overflow: hidden;
  border: 1px solid var(--app-panel-border);
  border-radius: .875rem;
  background: var(--app-panel-bg);
  backdrop-filter: blur(10px);
}

.app-table-shell .table {
  margin-bottom: 0;
}

.app-table-shell .table thead th {
  white-space: nowrap;
}

.app-table-shell .table td,
.app-table-shell .table th {
  vertical-align: middle;
}