:root {
  --bg: #f6f4ee;
  --panel: #ffffff;
  --ink: #23201b;
  --muted: #6d675d;
  --line: #e2ddd1;
  --accent: #2f6b4f;
  --accent-soft: #e8f1ec;
  --warn: #9a5b12;
  --warn-soft: #fdf1e0;
  --danger: #9b2f2f;
  --error: #c0182b;
  --error-soft: #fdeaec;
  --name: #1a5fb4;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1815;
    --panel: #24211d;
    --ink: #ece7dd;
    --muted: #a49c8e;
    --line: #38332c;
    --accent: #7cc4a0;
    --accent-soft: #1f3a2d;
    --warn: #e0a662;
    --warn-soft: #3a2c17;
    --danger: #e08a8a;
    --error: #ff6b7a;
    --error-soft: #3d1a1f;
    --name: #7ab8ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; gap: 14px; align-items: center; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; }

.version {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.account { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

.account label,
.field label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

input[type="text"], select {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  min-width: 180px;
}

input[type="text"]:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

button {
  font: inherit;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: transparent; }
button.link { border: 0; background: 0; padding: 2px 6px; color: var(--accent); text-decoration: underline; }
button.danger { color: var(--danger); }

/* -------------------------------------------------------------- controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}

.control-group { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }

.stats { font-size: 13px; color: var(--muted); gap: 10px; }

.warn-pill { padding: 3px 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }
.warn-pill[data-zero="true"] { background: transparent; color: var(--muted); }

/* ----------------------------------------------------------------- pages */

.pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px;
  padding: 20px 24px 60px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card[data-personalized="true"] { border-color: var(--accent); }
.card[data-inert="true"] { opacity: 0.65; }

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.letter {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 17px;
  flex: none;
}

.card-head .animal { font-size: 13px; color: var(--muted); flex: 1; }
.badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  padding: 12px 14px;
  /* Bottom-align the columns so the Name and Pronoun boxes sit on one line
     regardless of how tall their labels are. */
  align-items: end;
}

.fields .friend-field { grid-column: 1 / -1; }
.friend-field label { justify-content: flex-start; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field input, .field select { min-width: 0; width: 100%; }

/* The Name label carries an inline "reset" button. Without this it inherits the
   column direction from the shared label rule, stacking the button underneath
   and pushing the Name input below the Pronoun input. */
.field label {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
}
.hint { font-size: 11px; color: var(--muted); }

/* --------------------------------------------------------------- preview */

.preview {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  background: linear-gradient(var(--bg), var(--bg));
  font-family: Georgia, "Times New Roman", serif;
}

.preview h3 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.preview p { margin: 0 0 8px; font-size: 15.5px; }
.preview .sound { font-style: italic; }

/* Substituted names and pronouns, so the variable text is scannable.
   Only slot-generated pronouns are marked — the literal "he" belonging to
   U's seahorse and V's crow stays in body colour, which is the point. */
.preview .name,
.preview .pronoun { color: var(--name); }

/* --------------------------------------------------------- meta & alerts */

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
  font-family: system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--muted);
}

.chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.chip.grow-bad { color: var(--warn); border-color: var(--warn); }

.alerts { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }

.alert {
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 7px;
  border-left: 3px solid;
}

.alert.warn {
  background: var(--error-soft);
  color: var(--error);
  border-color: var(--error);
  font-weight: 700;
}
.alert.note { background: transparent; color: var(--muted); border-color: var(--line); }
.alert.blocker { background: var(--warn-soft); color: var(--danger); border-color: var(--danger); font-weight: 600; }

/* ----------------------------------------------------------------- login */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  text-align: center;
}

.login-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
}

.login-card h1 { margin: 0; font-size: 18px; font-weight: 650; }
.login-sub { margin: 6px 0 20px; font-size: 13px; color: var(--muted); }

.login-card form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.login-card label { font-size: 12px; color: var(--muted); }

.login-card input[type="password"] {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
}

.login-card input[type="password"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login-card button { margin-top: 6px; padding: 10px 14px; }

.login-error {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--error);
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  z-index: 50;
}

.toast[data-kind="error"] { background: var(--danger); color: #fff; }