:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f6f4ef; color: #222; }
/* ── dark mode (manual toggle via data-theme, falls back to system) ── */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #1a1a1e; color: #e8e8e8; }
html[data-theme="dark"] .card { background: #26262c; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
html[data-theme="dark"] .muted { color: #aaa; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #1e1e24; border-color: #444; color: #e8e8e8; }
html[data-theme="dark"] .page-card { border-color: #444; }
html[data-theme="dark"] .text-row { border-color: #444; }
html[data-theme="dark"] .thumb { background: #333; }
html[data-theme="dark"] #asset-modal .box { background: #26262c; }
html[data-theme="dark"] .asset-item:hover { background: #33333c; }
html[data-theme="dark"] button.ghost { color: #b8a9e8; }
.theme-btn { background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  padding: 6px 12px; font-size: 1.1rem; cursor: pointer; margin-left: auto; }
.topbar { display: flex; align-items: center; }
.topbar { background: #5b4b8a; color: #fff; padding: 12px 20px; }
.topbar h1 { margin: 0; font-size: 1.2rem; }
.admin-logo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: -7px; margin-right: 6px; }
main { max-width: 720px; margin: 20px auto; padding: 0 16px; }
.card { background: #fff; border-radius: 10px; padding: 16px; margin: 12px 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.row { display: flex; align-items: center; gap: 12px; }
.row .muted { flex: 1; }
.muted { color: #888; font-size: .9rem; }
label { display: block; margin: 10px 0; }
input { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; }
button { background: #5b4b8a; color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-size: 1rem; cursor: pointer; }
button.ghost { background: transparent; color: #5b4b8a; }
button.danger { background: #c0392b; }
button.danger:hover { background: #a93226; }
.error { color: #c0392b; }
.btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
select { width: 100%; padding: 10px; font-size: 1rem; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; }
/* ── Mobile: nav buttons wrap into a grid, story cards stack vertically ── */
@media (max-width: 600px) {
  #v3-stories-view > .row { flex-wrap: wrap; gap: 8px; }
  #v3-stories-view > .row h2 { flex: 1 1 100%; margin: 0 0 4px; }
  #v3-stories-view > .row button { margin-left: 0 !important; flex: 1 1 30%; padding: 10px 6px; font-size: .9rem; }
  #story-list .card { flex-direction: column; align-items: stretch; gap: 8px; }
  #story-list .card strong { font-size: 1.1rem; }
  #story-list .card .muted { flex: none; }
  #story-list .card button { align-self: flex-end; }
}
/* ── Image placeholder (shown when page image is hidden) ── */
.img-placeholder { width: 100%; max-width: 500px; aspect-ratio: 4/3; border-radius: 12px;
  background: linear-gradient(135deg, #2a2a3e, #1a1a2e);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: #fff; text-align: center; padding: 16px; box-sizing: border-box; }
.img-placeholder[hidden] { display: none; }
.img-placeholder-title { font-size: 1.4rem; font-weight: bold; }
.img-placeholder-sub { font-size: 0.95rem; opacity: 0.7; }
.preview-link { display: inline-block; padding: 6px 12px; border-radius: 8px;
  background: #2a2a3e; color: #9db4ff; text-decoration: none; font-size: 0.9rem; }
.preview-link:hover { background: #35355a; }

/* ── V2 submit form (theme-aware) ── */
.v2-level-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #f9f9f9;
  width: 100%;
  max-width: 520px;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.v2-level-card.checked {
  border-color: #999;
  background: #f0f0f0;
}
html[data-theme="dark"] .v2-level-card {
  border-color: #333;
  background: #161616;
}
html[data-theme="dark"] .v2-level-card.checked {
  border-color: #5a5a5a;
  background: #202020;
}