:root {
  --bg: #171615;
  --card: #211f1c;
  --surface: #292520;
  --text: #f2eee7;
  --sub: #aaa198;
  --muted: #807970;
  --gold: #b58a62;
  --accent: #879276;
  --line: #3a342e;
  --danger: #c9796d;
  --focus: #d2b08a;
}

html { background: var(--bg); }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
}

a { color: var(--gold); }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.nav, .topbar, .mi-topbar {
  background: rgba(23, 22, 21, .96) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(14px);
}
.nav a, .topbar a, .mi-topbar .mi-nav-link { color: var(--sub) !important; }
.nav a:hover, .topbar a:hover, .mi-topbar .mi-nav-link:hover { color: var(--text) !important; }
.nav .cta, .topbar .cta, .mi-topbar .mi-nav-link.invite { color: var(--gold) !important; }

.cta-btn, .btn-primary, .btn, .primary { background: var(--gold) !important; border-color: var(--gold) !important; color: #21170f !important; }
/* The topbar credit pill has its own foreground colours. Keeping it out of
   the generic button rule prevents the number from becoming gold on gold. */
.mi-credits-badge { background: #c9a96e !important; border-color: #c9a96e !important; color: #21170f !important; }
.mi-credits-badge .mi-credits-val { color: #21170f !important; }
.mi-credits-badge .mi-credits-lbl { color: #4c3824 !important; }
.cta-btn:hover, .btn-primary:hover, .btn:hover, .primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.outline, .btn-outline { background: transparent !important; border-color: var(--line) !important; color: var(--text) !important; }

.panel, .task-card, .quick-card, .step-box, .g-card, .proposal-preview, .services-section {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}
.field input, .field textarea, .form-group input, .form-group textarea, .style-chip, .svc-tab, .amount-item, .pay-option {
  background: #1b1917 !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.style-chip.selected, .svc-tab.active, .mi-topbar .mi-nav-link.active { background: var(--gold) !important; color: #21170f !important; }

.mi-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(181, 138, 98, .5);
  border-radius: 999px;
  color: #e0c09d;
  font-size: 11px;
  letter-spacing: .02em;
  background: rgba(181, 138, 98, .08);
}
.mi-ai-badge::before { content: "AI"; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.mi-generated-media { position: relative; overflow: hidden; }
.mi-generated-media .mi-generated-badge, .mi-generated-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(28, 24, 20, .78);
  color: #f3dfc4;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .02em;
  pointer-events: none;
}
.mi-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.mi-legal-links a { color: var(--muted); font-size: 12px; text-decoration: none; }
.mi-legal-links a:hover { color: var(--gold); }