:root {
  --bg-1: #07111f;
  --bg-2: #0f172a;
  --bg-3: #08111d;
  --surface: rgba(7, 17, 32, 0.86);
  --surface-strong: rgba(6, 14, 27, 0.96);
  --text: #f8fafc;
  --muted: #94a3b8;
  --brand: #34d399;
  --brand-strong: #10b981;
  --accent: #7dd3fc;
  --line: rgba(148, 163, 184, 0.18);
  --shadow: 0 24px 80px rgba(2, 6, 23, 0.45);
}

* {
  box-sizing: border-box;
}

body {
  color: var(--text);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(52, 211, 153, 0.14), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(125, 211, 252, 0.12), transparent 28%),
    linear-gradient(150deg, var(--bg-1) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
}

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

.card,
.panel,
.hero,
.table-wrap,
.builder-preview-card,
.builder-preview-block,
.stat {
  background: linear-gradient(160deg, rgba(7, 17, 32, 0.92), rgba(9, 22, 40, 0.84));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.btn,
button.primary,
button.btn,
.primary {
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), #2dd4bf);
  color: #03221a;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.35);
}

.btn:hover,
button.primary:hover,
button.btn:hover,
.primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--brand-strong), #14b8a6);
}

.btn-ghost,
.secondary,
.ghost {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 17, 31, 0.78);
  color: var(--text);
}

input,
select,
textarea {
  border: 1px solid var(--line);
  background: rgba(7, 15, 29, 0.9);
  color: var(--text);
  border-radius: 14px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(52, 211, 153, 0.75);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14);
}

a {
  color: #bbf7d0;
}

table th {
  background: rgba(9, 18, 33, 0.95);
}
