:root {
  --color-bg: #0f151d;
  --color-text: #f8f9fa;
  --color-text-muted: #9aa5b1;
  --color-surface: #1c2430;
  --color-surface-alt: #151c28;
  --color-border: #263142;
  --color-nav-bg: #111a27;
  --color-input-bg: #0f151d;
  --color-input-border: #2c374b;
  --color-accent: #4ea8ff;
  --color-alert: #202a3a;
}

[data-theme="light"] {
  --color-bg: #f5f6fb;
  --color-text: #0f172a;
  --color-text-muted: #5f6b7c;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f3f9;
  --color-border: #d7dce5;
  --color-nav-bg: #ffffff;
  --color-input-bg: #ffffff;
  --color-input-border: #d7dce5;
  --color-accent: #2563eb;
  --color-alert: #ffffff;
}

[data-theme="neutral"] {
  --color-bg: #171e28;
  --color-text: #f4f5f7;
  --color-text-muted: #b3bdca;
  --color-surface: #1f2734;
  --color-surface-alt: #242d3d;
  --color-border: #2e3747;
  --color-nav-bg: #1c2431;
  --color-input-bg: #1a2230;
  --color-input-border: #313b4e;
  --color-accent: #5dd5ff;
  --color-alert: #242d3d;
}

[data-theme="dark"] {
  --color-bg: #0f151d;
  --color-text: #f8f9fa;
  --color-text-muted: #9aa5b1;
  --color-surface: #1c2430;
  --color-surface-alt: #151c28;
  --color-border: #263142;
  --color-nav-bg: #111a27;
  --color-input-bg: #0f151d;
  --color-input-border: #2c374b;
  --color-accent: #4ea8ff;
  --color-alert: #202a3a;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

a {
  color: var(--color-accent);
}

.navbar {
  background-color: var(--color-nav-bg) !important;
  border-bottom: 1px solid var(--color-border);
}

.navbar .nav-link,
.navbar-text {
  color: var(--color-text);
}

.navbar .nav-link:hover:not(.disabled) {
  color: var(--color-accent);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.table {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-collapse: separate;
  border-spacing: 0;
  --bs-table-bg: transparent;
}

.table thead th {
  border-color: var(--color-border);
  background-color: var(--color-surface-alt);
  font-weight: 600;
}

.table thead th.sortable {
  cursor: pointer;
}

.table tbody tr {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.0125);
}

.table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

.table tbody tr:hover {
  background-color: var(--color-surface-alt);
}

.alert {
  background-color: var(--color-alert);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-outline-light {
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--color-bg);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(78, 168, 255, 0.2);
}

.nav-balance {
  background-color: var(--color-surface-alt);
  border-radius: 999px;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--color-border);
}

.nav-balance__amount {
  font-weight: 600;
  color: var(--color-text);
}

.nav-balance__refresh {
  padding: 0.1rem 0.4rem;
  line-height: 1;
}

.flash-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(320px, calc(100vw - 2rem));
  z-index: 1080;
  pointer-events: none;
}

.flash-toast {
  pointer-events: auto;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
  background-color: var(--color-surface-alt);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.form-control::placeholder,
.form-control.form-control-lg::placeholder,
.form-select::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}

.dropdown-menu {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.dropdown-item {
  color: var(--color-text);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:hover {
  color: var(--color-bg);
  background-color: var(--color-accent);
}

.pagination .page-link {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.pagination .page-link:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.pagination .page-item.active .page-link {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.pagination .page-item.disabled .page-link {
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.fluid-background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.fluid-background canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.glass-panel {
  position: relative;
  z-index: 1;
  background-color: rgba(15, 21, 29, 0.65);
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  padding: 2rem;
}