/* ── Root Variables ──────────────────────────────────────────────── */
:root {
  --gold:          #C9A227;
  --gold-dim:      #a88520;
  --gold-dark:     #7a6018;
  --gold-glow:     rgba(201, 162, 39, 0.12);
  --gold-border:   rgba(201, 162, 39, 0.28);
  --bg-base:       #080808;
  --bg-card:       #0d0d0d;
  --bg-input:      #0a0a0a;
  --border:        #1a1a1a;
  --border-strong: #252525;
  --text:          #f0f0f0;
  --text-dim:      #999999;
  --text-muted:    #555555;
  --red:           #e05252;
  --red-glow:      rgba(224, 82, 82, 0.12);
  --red-border:    rgba(224, 82, 82, 0.28);
  --amber:         #f59e0b;
  --blue:          #60a5fa;
  --green:         #4ade80;
  --green-glow:    rgba(74, 222, 128, 0.12);
  --green-border:  rgba(74, 222, 128, 0.28);
}

[data-bs-theme="dark"] {
  --bs-body-bg:       var(--bg-base);
  --bs-body-color:    var(--text);
  --bs-primary-rgb:   201, 162, 39;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  background-color: var(--bg-base);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background-color: var(--bg-card);
  border-color: var(--border) !important;
  border-radius: 8px;
}

/* ── Forms ──────────────────────────────────────────────────────── */
.form-control,
.form-select,
.input-group-text {
  background-color: var(--bg-input);
  border-color: var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.875rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-input);
  border-color: var(--gold);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-select option {
  background-color: #111;
}

textarea.form-control {
  resize: vertical;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: all 0.15s ease;
}

.btn-primary {
  --bs-btn-bg:              var(--gold);
  --bs-btn-border-color:    var(--gold);
  --bs-btn-color:           #000;
  --bs-btn-hover-bg:        var(--gold-dim);
  --bs-btn-hover-border-color: var(--gold-dim);
  --bs-btn-hover-color:     #000;
  --bs-btn-active-bg:       var(--gold-dark);
  --bs-btn-active-border-color: var(--gold-dark);
  --bs-btn-active-color:    #000;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.btn-secondary {
  --bs-btn-bg:              #161616;
  --bs-btn-border-color:    var(--border-strong);
  --bs-btn-color:           var(--text-dim);
  --bs-btn-hover-bg:        #1e1e1e;
  --bs-btn-hover-border-color: #333;
  --bs-btn-hover-color:     var(--text);
}

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert-danger {
  background-color: var(--red-glow);
  border-color: var(--red-border);
  color: var(--red);
}

/* ── Spinner gold ───────────────────────────────────────────────── */
.spinner-border.text-success {
  color: var(--gold) !important;
}

/* ── Monospace ──────────────────────────────────────────────────── */
.font-monospace {
  font-size: 0.8em;
}

/* ── Subdomain preview ──────────────────────────────────────────── */
.subdomain-preview {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.subdomain-preview .domain-suffix {
  color: var(--text-dim);
}

.subdomain-preview .subdomain-value {
  color: var(--gold);
  font-weight: 600;
}

.subdomain-status {
  font-size: 0.72rem;
  margin-top: 0.25rem;
}

.subdomain-status.available   { color: var(--green); }
.subdomain-status.unavailable { color: var(--red); }
.subdomain-status.checking    { color: var(--text-muted); }

/* ── Live links ─────────────────────────────────────────────────── */
.store-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s;
}

.store-link:hover {
  border-color: var(--gold-border);
  background: var(--gold-glow);
  color: var(--gold);
}

.store-link .link-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  display: block;
}

/* ── Progress bar ───────────────────────────────────────────────── */
.provision-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  overflow: hidden;
  margin: 1rem 0;
}

.provision-progress-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── Provision log ──────────────────────────────────────────────── */
.provision-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
  transition: color 0.2s;
}

.provision-step.done    { color: var(--text-dim); }
.provision-step.active  { color: var(--text); }
.provision-step.failed  { color: var(--red); }

.provision-step .step-icon {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}