:root {
  --bg: #f7f6f3;
  --ink: #24211d;
  --muted: #8a857d;
  --accent: #3d8bff;
  --card: #ffffff;
  --line: #e6e2db;
  --danger: #c0392b;
  --ok: #2e7d32;
  --warn: #b26a00;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.7rem; margin: 0 0 0.8em; }
h2 { font-family: Georgia, serif; font-weight: 500; font-size: 1.15rem; margin: 1.6em 0 0.6em; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7em 1.4em; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand a { font-family: Georgia, serif; font-size: 1.15rem; color: var(--ink); }
.topbar nav a { margin-left: 1.1em; color: var(--ink); }
.topbar nav a.active { color: var(--accent); font-weight: 600; }
.topbar nav a.muted { color: var(--muted); }

main { max-width: 1150px; margin: 1.6em auto 3em; padding: 0 1.2em; }
.foot { text-align: center; color: var(--muted); padding: 2em 0; font-size: 0.85rem; }

.flash { padding: 0.7em 1em; border-radius: 8px; margin-bottom: 1em; background: #e6f2e6; color: var(--ok); border: 1px solid #cfe5cf; }
.flash.err { background: #fbeae8; color: var(--danger); border-color: #f2d4cf; }

.stats { display: flex; gap: 1em; margin: 1em 0 1.5em; flex-wrap: wrap; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1em 1.6em; min-width: 140px; color: var(--ink);
}
.stat b { display: block; font-size: 1.7rem; font-family: Georgia, serif; }
.stat span { color: var(--muted); font-size: 0.85rem; }
.stat:hover { border-color: var(--accent); text-decoration: none; }

.steps { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.5em 1.4em 1em; }
.steps ol { margin: 0.4em 0 0; padding-left: 1.3em; }
.steps li { margin: 0.35em 0; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.9em 1.2em; margin-bottom: 1.4em; }
.panel summary { cursor: pointer; font-weight: 600; }
.formgrid { display: flex; flex-direction: column; gap: 0.8em; margin-top: 1em; max-width: 560px; }
label { display: flex; flex-direction: column; gap: 0.25em; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="number"], input[type="password"], input[name], select {
  font: inherit; padding: 0.5em 0.65em; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
input:focus, select:focus { outline: 2px solid #bcd7ff; border-color: var(--accent); }
.dims { display: flex; gap: 0.8em; align-items: flex-end; }
.dims label { flex: 1; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

button, .btn {
  font: inherit; cursor: pointer; border: none; border-radius: 8px;
  background: var(--ink); color: #fff; padding: 0.55em 1.2em; align-self: flex-start;
}
button:hover { opacity: 0.9; }
button.cta { background: var(--accent); font-size: 1.05rem; padding: 0.7em 1.6em; margin-top: 1em; }
.btn.ghost, button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.small, button.small { font-size: 0.8rem; padding: 0.25em 0.7em; vertical-align: middle; }
.linklike { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.linklike.danger { color: var(--danger); }
.inline { display: inline; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1em; }
.card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #eee; }
.card figcaption { padding: 0.6em 0.8em 0.8em; font-size: 0.88rem; }
.card figcaption b { display: block; }
.card .muted { color: var(--muted); display: block; font-size: 0.8rem; }
.rowactions { display: block; margin-top: 0.4em; font-size: 0.85rem; }

.badge { display: inline-block; font-size: 0.72rem; padding: 0.1em 0.6em; border-radius: 99px; margin-top: 0.25em; }
.badge.ok { background: #e6f2e6; color: var(--ok); }
.badge.warn { background: #fdf1df; color: var(--warn); }

.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 2em; text-align: center; }

/* Auth pages */
.authpage { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.authcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 2em 2.2em; width: 380px; max-width: 92vw; }
.authcard h1 { font-size: 1.4rem; margin-bottom: 0.2em; }
.authcard .tagline { color: var(--muted); margin-top: 0; }
.authcard form { display: flex; flex-direction: column; gap: 0.9em; margin-top: 1em; }
.authcard button { align-self: stretch; padding: 0.7em; }
.checks { list-style: none; padding: 0.8em 1em; margin: 1em 0; background: var(--bg); border-radius: 8px; font-size: 0.85rem; }
.checks .ok { color: var(--ok); }
.checks .bad { color: var(--danger); font-weight: 600; }

/* Calibration */
.calibrate-help { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.3em 1.3em; margin-bottom: 1em; font-size: 0.92rem; }
.calibrate-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #222; line-height: 0; }
#cal { cursor: crosshair; touch-action: none; max-width: 100%; }
.calibrate-form { display: flex; gap: 0.9em; align-items: flex-end; margin-top: 1em; flex-wrap: wrap; }
.calibrate-form label { min-width: 180px; }
#ppcm_out { align-self: center; }

/* Render page */
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8em; }
.pick { position: relative; cursor: pointer; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); font-weight: 400; }
.pick input { position: absolute; top: 8px; left: 8px; z-index: 2; transform: scale(1.3); }
.pick img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pick span { display: block; padding: 0.45em 0.6em; font-size: 0.85rem; }
.pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px #bcd7ff; }
.optrow { display: flex; gap: 1.5em; align-items: flex-end; flex-wrap: wrap; }
.chk { flex-direction: row; align-items: center; gap: 0.5em; }
.filterrow { margin-bottom: 1.2em; max-width: 320px; }
.inlineedit { padding: 0.6em 0.8em; display: flex; flex-direction: column; gap: 0.5em; }

/* Series */
.seriesthumbs { display: grid; gap: 2px; aspect-ratio: 4/3; background: #eee; }
.seriesthumbs.n1 { grid-template-columns: 1fr; }
.seriesthumbs.n2 { grid-template-columns: 1fr 1fr; }
.seriesthumbs.n3, .seriesthumbs.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.seriesthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seriesthumbs .noitems { display: flex; align-items: center; justify-content: center; color: var(--muted); grid-column: 1/-1; }
.subhead { font-size: 0.95rem; color: var(--muted); margin: 0.9em 0 0.4em; font-family: inherit; }
.itemsbar { display: flex; flex-wrap: wrap; gap: 0.7em; margin-bottom: 1em; }
.itemchip { display: flex; align-items: center; gap: 0.55em; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0.4em 0.7em; font-size: 0.87rem; }
.itemchip img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.itemchip .num { background: var(--ink); color: #fff; border-radius: 99px; font-size: 0.72rem; padding: 0.05em 0.55em; }
.itemchip .ttl { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemchip .chipacts { display: flex; gap: 0.45em; }
.addchip select { max-width: 13em; }
.inlinebar { display: flex; gap: 0.6em; align-items: center; }
.inlinebar input { flex: 0 1 22em; }
.arrangebar { display: flex; align-items: flex-end; gap: 1em; flex-wrap: wrap; margin-bottom: 0.7em; }
.arrangebar .grp { display: flex; gap: 0.4em; }
.arrangebar .mini { font-size: 0.8rem; }
.arrange-wrap { background: #efece6; }
#arrange { cursor: grab; touch-action: none; max-width: 100%; }