:root {
  --bg-primary: #020203;
  --bg-secondary: #07080d;
  --bg-tertiary: #0d1017;
  --bg-elevated: #141923;
  --bg-card: rgba(20, 25, 35, 0.94);
  --bg-glass: rgba(20, 25, 35, 0.72);

  --accent-primary: #00d4ff;
  --accent-primary-light: #5ce1ff;
  --accent-primary-dark: #00a8cc;
  --accent-secondary: #5ce1ff;
  --accent-success: #5ce1ff;
  --accent-warning: #ffd56a;
  --accent-danger: #ff6b6b;
  --accent-info: #00d4ff;

  --text-primary: #f8fafc;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.58);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.72);
}

html,
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  color-scheme: dark;
}

body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(0, 212, 255, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(0, 168, 204, 0.04) 0%, transparent 60%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 88%);
  opacity: 0.45;
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: var(--accent-primary) !important;
}

a:hover {
  color: var(--accent-primary-light) !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.dashboard-brand__title,
.content-card__title,
.summary-card__value {
  color: var(--text-primary) !important;
}

.text-primary { color: var(--accent-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--accent-primary-light) !important; }
.text-info { color: var(--accent-primary) !important; }
.text-muted { color: var(--text-muted) !important; }

.navbar,
.dashboard-sidebar,
.dashboard-topbar,
.container-main,
.card,
.card-shell,
.auth-shell,
.content-card,
.soft-card,
.summary-card,
.message-pill,
.bucket-progress-panel,
.modal-content,
.dropdown-menu,
.toast,
.list-group-item,
.accordion-item {
  background: var(--bg-elevated) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.navbar {
  background: rgba(6, 8, 13, 0.9) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.navbar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), #ffffff, var(--accent-primary), transparent);
  pointer-events: none;
}

.dashboard-sidebar,
.auth-side {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%) !important;
}

.dashboard-brand,
.card-header,
.content-card__header,
.summary-card,
.soft-card,
.message-pill {
  border-color: var(--border-subtle) !important;
}

.dashboard-nav__link,
.nav-link,
.dropdown-item,
.breadcrumb-item a,
.page-link,
.list-group-item,
.pill-check,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger {
  transition: all 0.2s ease;
}

.dashboard-nav__link:hover,
.nav-link:hover,
.dropdown-item:hover,
.list-group-item:hover,
.page-link:hover,
.pill-check:hover {
  background: rgba(0, 212, 255, 0.08) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
}

.dashboard-nav__link.is-active,
.nav-link[aria-current="page"],
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.list-group-item.active {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%) !important;
  color: #000 !important;
  border-color: var(--accent-primary) !important;
}

.dashboard-topbar,
.container-main,
.card,
.content-card,
.summary-card,
.soft-card,
.message-pill,
.bucket-progress-panel,
.modal-content,
.toast,
.dropdown-menu,
.offcanvas,
.accordion-item {
  border: 1px solid var(--border-medium) !important;
}

.container-main {
  background: linear-gradient(180deg, rgba(20, 25, 35, 0.98), rgba(10, 12, 18, 0.98)) !important;
}

.card,
.content-card,
.summary-card,
.soft-card,
.message-pill,
.bucket-progress-panel {
  background: linear-gradient(180deg, rgba(22, 28, 40, 0.96), rgba(14, 17, 25, 0.96)) !important;
}

.card-header,
.content-card__header {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 168, 204, 0.04)) !important;
}

.card-body,
.content-card__hint,
.summary-card__label,
.dashboard-topbar__meta,
.field-label,
.bucket-progress-panel__stats,
p, small, li, label, dt, dd, figcaption {
  color: var(--text-secondary) !important;
}

strong, b {
  color: var(--text-primary) !important;
}

code {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--accent-primary-light) !important;
  border: 1px solid rgba(0, 212, 255, 0.18) !important;
}

pre {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

input,
select,
textarea,
.form-control,
.form-select,
.dashboard-main input,
.dashboard-main select,
.dashboard-main textarea,
.auth-form input,
.card-shell input,
.label-name-input,
.project-name-input,
.workspace-search input,
.user-search input {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.dashboard-main input:focus,
.dashboard-main select:focus,
.dashboard-main textarea:focus,
.auth-form input:focus,
.card-shell input:focus,
.label-name-input:focus {
  background: var(--bg-elevated) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.16) !important;
}

.btn-primary,
.btn-success,
.btn-info {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 212, 255, 0.28) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.38) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-info {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border-medium) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover {
  color: var(--text-primary) !important;
  border-color: var(--accent-primary) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #ffd56a, #ff9800) !important;
  color: #000 !important;
  border: none !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff6b6b, #cc0000) !important;
  color: #fff !important;
  border: none !important;
}

.alert,
.alert-info,
.alert-success,
.alert-warning,
.alert-danger,
.alert-primary {
  border-color: var(--border-medium) !important;
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

.badge,
.badge-soft,
.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-secondary {
  border-color: rgba(0, 212, 255, 0.2) !important;
}

.table-responsive,
.table,
.dashboard-table,
.table > :not(caption) > * > *,
.dashboard-table th,
.dashboard-table td {
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

.table thead th,
.dashboard-table th {
  background: var(--bg-tertiary) !important;
  color: var(--accent-primary) !important;
}

.table-hover > tbody > tr:hover > *,
.dashboard-table tbody tr:hover > * {
  background: rgba(0, 212, 255, 0.06) !important;
  color: var(--text-primary) !important;
}

.bg-white,
.bg-light {
  background: var(--bg-card) !important;
}

.bg-dark {
  background: var(--bg-elevated) !important;
}

.save-bar {
  background: linear-gradient(180deg, rgba(20, 25, 35, 0.8), rgba(10, 12, 18, 1)) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.color-circle {
  border-color: #ffffff !important;
}

.auth-shell .brand-mark,
.dashboard-brand__eyebrow,
.brand-text small {
  color: var(--accent-primary-light) !important;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
}