:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0e1210;
  color: #e8ede9;
}
.topnav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topnav .brand { font-weight: 700; margin-right: auto; }
.topnav a { color: inherit; text-decoration: none; opacity: 0.85; }
.topnav a:hover { opacity: 1; text-decoration: underline; }
.page { max-width: 48rem; margin: 0 auto; padding: 2rem; }
.link-button {
  background: none; border: none; color: inherit; opacity: 0.85;
  font: inherit; cursor: pointer; padding: 0; text-decoration: underline;
}
form.stacked { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; }
form.stacked label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  color: inherit;
  font: inherit;
}
button.primary {
  background: #2d5a3d; color: #d7f5e3; border: none;
  padding: 0.6rem 1.1rem; border-radius: 6px; cursor: pointer; font: inherit;
}
.error-banner {
  background: rgba(216, 90, 48, 0.15);
  border: 1px solid rgba(216, 90, 48, 0.4);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.story-card {
  display: flex; gap: 1rem; padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.story-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.tag { font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.08); margin-right: 0.3rem; }
.dimension-group { margin-bottom: 0.75rem; }
.dimension-group h4 { font-size: 0.8rem; text-transform: uppercase; opacity: 0.6; margin: 0.75rem 0 0.35rem; }
.dimension-checks label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0.6rem 0.15rem 0; font-size: 0.85rem; font-weight: normal; }
canvas.scene-canvas { width: 100%; height: 360px; border-radius: 8px; background: rgba(255,255,255,0.03); }
table.admin-queue { width: 100%; border-collapse: collapse; }
table.admin-queue td, table.admin-queue th { padding: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; font-size: 0.9rem; }
.pending { font-style: italic; opacity: 0.5; font-size: 0.85rem; }
.unfold-layer { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }
.unfold-layer h3 { margin: 0 0 0.75rem 0; font-size: 1.1rem; }
.unfold-divisions { display: flex; flex-wrap: wrap; gap: 1rem; }
.division { flex: 1; min-width: 220px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 1rem; }
.division-header h4 { margin: 0 0 0.5rem 0; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.85; }
.narrative :where(p) { margin: 0 0 0.6rem 0; }