/* =========================================================
   COMMAND CENTER UNIFIED UI SYSTEM
   Shared typography, colors, spacing, panels, buttons, tables.
   ========================================================= */

:root {
  --cc-bg: #020816;
  --cc-bg-2: #031427;
  --cc-bg-3: #061b2e;
  --cc-panel: rgba(5, 20, 35, 0.84);
  --cc-panel-2: rgba(7, 30, 50, 0.90);
  --cc-line: rgba(40, 231, 255, 0.22);
  --cc-line-strong: rgba(40, 231, 255, 0.44);
  --cc-cyan: #28e7ff;
  --cc-green: #43ffbd;
  --cc-yellow: #ffd166;
  --cc-red: #ff4d75;
  --cc-text: #eaffff;
  --cc-muted: #9fc0d5;
  --cc-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cc-radius-xl: 24px;
  --cc-radius-lg: 18px;
  --cc-radius-md: 14px;
  --cc-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

html {
  background: var(--cc-bg);
}

body {
  font-family: var(--cc-font) !important;
  color: var(--cc-text) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(40,231,255,.12), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(67,255,189,.08), transparent 28%),
    linear-gradient(135deg, var(--cc-bg) 0%, var(--cc-bg-2) 48%, var(--cc-bg-3) 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(40,231,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,231,255,.045) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

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

h1, h2, h3, h4, h5, h6,
p, span, small, label, input, button, textarea, select, td, th, a {
  font-family: var(--cc-font) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  letter-spacing: -0.045em;
}

button,
input,
textarea,
select {
  border-radius: var(--cc-radius-md) !important;
}

input,
textarea,
select {
  background: rgba(0, 8, 18, 0.70) !important;
  color: var(--cc-text) !important;
  border: 1px solid var(--cc-line) !important;
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(67,255,189,.70) !important;
  box-shadow: 0 0 0 4px rgba(67,255,189,.08) !important;
}

button,
.nav-btn,
.bs-nav a {
  font-weight: 900 !important;
}

th {
  color: var(--cc-cyan) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

td {
  color: var(--cc-text) !important;
  font-weight: 750 !important;
}

.bs-kpis article,
.bs-accounts-panel,
.bs-dashboard-panel,
.bs-form-card,
.bs-history-card,
.bs-current-balance-card,
.bs-file-card,
.bs-final-card,
.bs-guide-card {
  border: 1px solid var(--cc-line) !important;
  border-radius: var(--cc-radius-xl) !important;
  background: var(--cc-panel) !important;
  box-shadow: var(--cc-shadow), inset 0 0 42px rgba(40,231,255,.04) !important;
}