:root {
  --sg-bg: #0b0d10;
  --sg-bg-soft: #11151b;
  --sg-text: #e8ecf2;
  --sg-muted: #a6b0c0;
  --sg-line: rgba(255, 255, 255, 0.12);
  --sg-card: rgba(255, 255, 255, 0.03);
  --sg-card-strong: rgba(255, 255, 255, 0.06);
  --sg-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  --sg-radius: 18px;
}

html,
body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a {
  color: inherit;
}

.panel,
.card,
.feature,
.step,
.price,
.cta,
.callout,
.metrics-panel,
.metric-card {
  background: var(--sg-card);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
  box-shadow: var(--sg-shadow);
}

.panel-header h2,
h1,
h2,
h3 {
  color: var(--sg-text);
}

.sub,
.hint,
.muted,
.meta,
.meta-note,
.article-meta,
.card-meta,
.site-footer,
.stamp,
.status {
  color: var(--sg-muted);
}

input,
select,
textarea {
  background: rgba(0, 0, 0, 0.2);
  color: var(--sg-text);
  border: 1px solid var(--sg-line);
  border-radius: 14px;
}

input::placeholder,
textarea::placeholder {
  color: var(--sg-muted);
}

.btn,
button,
input[type="submit"] {
  border-radius: 14px;
  border: 1px solid var(--sg-line);
}

.btn.primary,
.btn--primary,
button.primary,
input[type="submit"] {
  background: rgba(255, 255, 255, 0.92);
  color: #0b0d10;
}

.btn.ghost,
.btn--ghost,
button.ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--sg-text);
}

.table,
.table-row,
.table-head,
table,
thead tr,
tbody tr {
  border-color: var(--sg-line);
}

.table-head,
thead tr {
  background: rgba(255, 255, 255, 0.04);
}

.table-row,
tbody tr {
  background: rgba(255, 255, 255, 0.015);
}

.site-header,
.header {
  background: rgba(11, 13, 16, 0.62);
  border-bottom: 1px solid var(--sg-line);
  backdrop-filter: blur(12px);
}

.site-nav a,
.nav a,
.footer__link {
  color: var(--sg-muted);
}

.site-nav a:hover,
.nav a:hover,
.footer__link:hover {
  color: var(--sg-text);
}

.adminlist.metrics-table {
  border: 1px solid var(--sg-line);
  border-radius: 14px;
  overflow: hidden;
}

.adminlist.metrics-table th,
.adminlist.metrics-table td {
  background: rgba(255, 255, 255, 0.02);
  color: var(--sg-text);
  border-color: var(--sg-line);
}