:root {
  color-scheme: dark;
  --mc-bg: #0d0b0b;
  --mc-surface: #151212;
  --mc-border: #2e2424;
  --mc-text: #ede8e8;
  --mc-muted: #a39494;
  --mc-accent: #9c1313;
  --mc-accent-hover: #c41e1e;
  --mc-warm: #e8a849;
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--mc-bg); color: var(--mc-text); }
a { color: var(--mc-warm); text-decoration: none; }
a:hover { color: var(--mc-text); }

.mc-shell { min-height: 100vh; }
.mc-header {
  align-items: center;
  background: rgb(13 11 11 / 92%);
  border-bottom: 1px solid var(--mc-border);
  display: flex;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  position: sticky;
  top: 0;
}
.mc-brand { color: var(--mc-text); font-size: 1.25rem; font-weight: 700; }
.mc-nav { align-items: center; display: flex; gap: 1rem; }
.mc-main { margin: 0 auto; max-width: 80rem; padding: 2rem clamp(1rem, 4vw, 3rem); }
.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: .75rem;
  padding: 1.25rem;
}
.mc-button {
  background: var(--mc-accent);
  border: 0;
  border-radius: .5rem;
  color: var(--mc-text);
  cursor: pointer;
  font-weight: 600;
  padding: .7rem 1rem;
}
.mc-button:hover { background: var(--mc-accent-hover); }
.mc-muted { color: var(--mc-muted); }
.mc-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.mc-table { border-collapse: collapse; width: 100%; }
.mc-table th, .mc-table td {
  border-bottom: 1px solid var(--mc-border);
  padding: .8rem;
  text-align: left;
}
.mc-form { display: grid; gap: 1rem; max-width: 48rem; }
.mc-field { display: grid; gap: .35rem; }
.mc-field input, .mc-field textarea {
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: .4rem;
  color: var(--mc-text);
  padding: .7rem;
}
.mc-actions { display: flex; gap: .75rem; }
.validation-message { color: #f87171; }
.mc-chat { bottom: 1rem; position: fixed; right: 1rem; z-index: 100; }
.mc-chat-panel { display: grid; gap: .75rem; margin-top: .5rem; width: min(24rem, calc(100vw - 2rem)); }
.mc-chat-log { max-height: 18rem; overflow-y: auto; }
.mc-chat-panel textarea {
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  border-radius: .4rem;
  color: var(--mc-text);
  min-height: 5rem;
  padding: .7rem;
  resize: vertical;
}