:root {
  --ss-bg: #050b12;
  --ss-bg2: #07131f;
  --ss-panel: rgba(9, 24, 39, .96);
  --ss-panel2: rgba(12, 31, 50, .92);
  --ss-border: rgba(56, 189, 248, .28);
  --ss-border-strong: rgba(34, 211, 238, .55);
  --ss-text: #eef7ff;
  --ss-muted: #8fb0ca;
  --ss-blue: #18b7ff;
  --ss-gold: #f4c542;
  --ss-green: #22c55e;
  --ss-red: #ef4444;
  --ss-warn: #f59e0b;
}

html,
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(24, 183, 255, .18), transparent 30%),
    radial-gradient(circle at 78% 0%, rgba(244, 197, 66, .10), transparent 26%),
    linear-gradient(180deg, #050b12 0%, #07131f 45%, #050b12 100%) !important;
  color: var(--ss-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  z-index: 0;
}

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

main,
.app,
.content,
.dashboard,
.page,
section {
  background: transparent !important;
}

aside,
.sidebar {
  background: linear-gradient(180deg, #050b12, #081624) !important;
  border-right: 1px solid rgba(56,189,248,.18) !important;
}

.panel,
.card,
.stat-card,
.metric-card,
.level-card,
.summary-card,
.login-card,
.admin-table,
textarea,
input,
select {
  background: linear-gradient(180deg, var(--ss-panel), rgba(6, 16, 28, .97)) !important;
  border: 1px solid var(--ss-border) !important;
  color: var(--ss-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 45px rgba(0,0,0,.28) !important;
}

.panel-head,
.card-head,
thead,
.table-head {
  background: rgba(7, 19, 31, .88) !important;
  color: var(--ss-text) !important;
  border-bottom: 1px solid rgba(56,189,248,.25) !important;
}

h1, h2, h3, h4, strong, b {
  color: var(--ss-text) !important;
}

span,
small,
label,
p,
td,
th {
  color: inherit;
}

.panel span,
.card span,
.stat-card span,
.metric-card span,
.level-card span,
small,
label {
  color: var(--ss-muted) !important;
}

textarea::placeholder,
input::placeholder {
  color: #6f8ba4 !important;
}

button,
.button,
a.button {
  border-radius: 8px !important;
  font-weight: 800 !important;
}

button:not(.primary),
a:not(.primary) {
  background: rgba(10, 24, 39, .95) !important;
  color: var(--ss-text) !important;
  border: 1px solid rgba(56,189,248,.32) !important;
}

button:not(.primary):hover,
a:not(.primary):hover {
  border-color: var(--ss-border-strong) !important;
  box-shadow: 0 0 0 2px rgba(24,183,255,.14) !important;
}

.primary,
button.primary,
button[type="submit"],
#generateBtn,
#signInBtn,
#registerBtn {
  background: linear-gradient(135deg, #0878ff, #22c7ff) !important;
  color: white !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(24,183,255,.22) !important;
}

.language button,
.lang button,
.ss-lang-flagged {
  background: rgba(8, 20, 34, .98) !important;
  color: var(--ss-text) !important;
  border: 1px solid rgba(56,189,248,.42) !important;
}

.language button.active,
.lang button.active,
.ss-lang-flagged.active,
button:focus {
  border-color: var(--ss-gold) !important;
  box-shadow: 0 0 0 2px rgba(244,197,66,.18) !important;
}

#accountStatus,
.status-warn {
  color: var(--ss-warn) !important;
  font-weight: 900 !important;
}

.status-good {
  color: var(--ss-green) !important;
}

.status-bad {
  color: var(--ss-red) !important;
}

.notice,
.warning,
.banner {
  background: linear-gradient(90deg, rgba(244,197,66,.14), rgba(24,183,255,.08)) !important;
  border: 1px solid rgba(244,197,66,.42) !important;
  color: var(--ss-text) !important;
}

table {
  color: var(--ss-text) !important;
}

tr {
  border-color: rgba(56,189,248,.18) !important;
}

td,
th {
  border-color: rgba(56,189,248,.14) !important;
}

.logo-card,
img {
  border-color: rgba(56,189,248,.22) !important;
}

#rawPoints,
#operationalTable,
#detailedReport {
  background: linear-gradient(180deg, rgba(9,24,39,.98), rgba(5,13,22,.98)) !important;
}