:root {
  --bg: #ece7df;
  --panel: #fffdfa;
  --panel-2: #f7f1e8;
  --ink: #1d2228;
  --muted: #5d655f;
  --line: #cdc1b3;
  --accent: #194d52;
  --accent-soft: #dbe9e8;
  --success: #2f6a44;
  --warning: #8b5e14;
  --danger: #8e2c2c;
  --shadow: 0 12px 30px rgba(32, 36, 40, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
  background:
    linear-gradient(135deg, rgba(25, 77, 82, 0.09), transparent 35%),
    linear-gradient(180deg, #f5f0e8 0%, #ece4d8 100%);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: min(1380px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
}

.sidebar,
.card,
.status-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: var(--shadow);
}

.sidebar {
  padding: 1rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  overflow: auto;
}

.brand h1,
.topbar h2,
.card h3 {
  margin: 0;
}

.eyebrow {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--accent);
}

.sidebar-copy,
.section-head p,
.module-row p,
.meta,
.empty-state {
  margin: 0;
  color: var(--muted);
}

.stack {
  display: grid;
  gap: 0.8rem;
}

.nav button,
.secondary,
input,
select,
button,
.banner,
.notice,
.output,
.list-item,
.stat-card,
.module-row {
  border-radius: 0.95rem;
}

.nav button,
input,
select,
button {
  border: 1px solid var(--line);
  padding: 0.8rem 0.9rem;
  background: #fff;
  color: var(--ink);
}

.nav button.active,
button:not(.secondary) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.status-card,
.card {
  padding: 1rem;
}

.status-row,
.section-head,
.list-item,
.module-row,
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.content {
  display: grid;
  gap: 1rem;
}

.topbar {
  align-items: center;
}

.banner {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.banner.success,
.badge.success {
  background: #e6f3ea;
  color: var(--success);
}

.banner.danger,
.badge.danger,
.notice.warning {
  background: #fae8e5;
  color: var(--danger);
}

.banner.muted {
  color: var(--muted);
}

.view {
  display: none;
}

.view.active {
  display: grid;
}

.protected-view.blocked {
  opacity: 0.55;
}

.form-panel,
.inline-form {
  display: grid;
  gap: 0.8rem;
}

.inline-form {
  grid-template-columns: minmax(0, 1.5fr) 0.8fr auto;
}

label {
  display: grid;
  gap: 0.3rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.stat-card {
  background: var(--panel-2);
  padding: 0.9rem;
  border: 1px solid var(--line);
  display: grid;
  gap: 0.3rem;
}

.stat-card span {
  font-size: 1.6rem;
  font-weight: 700;
}

.list {
  display: grid;
  gap: 0.75rem;
}

.list-item,
.module-row {
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.9rem;
  align-items: center;
}

.badge {
  border: 1px solid currentColor;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.output,
.notice {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: #172126;
  color: #d7ede8;
  overflow: auto;
  min-height: 5rem;
  white-space: pre-wrap;
}

.notice {
  min-height: auto;
  white-space: normal;
}

.output.tall {
  min-height: 16rem;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100vw - 1rem, 100%);
  }

  .inline-form,
  .stats-grid,
  .section-head,
  .list-item,
  .module-row,
  .topbar {
    grid-template-columns: 1fr;
    display: grid;
  }
}