:root {
  --ink: #f3efe6;
  --ink-muted: #b9b3a4;
  --ink-faint: #85806f;
  --bg: #101211;
  --bg-alt: #171a19;
  --surface: #1c201f;
  --line: rgba(243, 239, 230, 0.1);
  --line-strong: rgba(243, 239, 230, 0.18);
  --sand: #ddceac;
  --sage: #93b0c2;
  --navy: #1c3a5e;
  --radius: 12px;
  --radius-sm: 8px;
  --danger: #d98a7a;
  /* Fixed staff-area accent — deliberately NOT theme-reactive. This page
     never loads the public site's style.css or theme.js, so this colour
     never changes no matter what theme is live on the public site. It
     exists purely so headings here read as unmistakably "staff", never
     mistakable for the live site. */
  --staff-accent: #e2483a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}

.tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.tool-title { font-family: Georgia, serif; font-weight: 700; font-size: 1.1rem; color: var(--staff-accent); }
.pill-link, .pill-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.pill-link:hover, .pill-btn:hover { border-color: var(--sand); color: var(--sand); }

.tool-main { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.section-title { font-family: Georgia, serif; font-size: 1.4rem; margin: 0 0 1rem; color: var(--staff-accent); }

label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); margin: 0.9rem 0 0.35rem; }
label:first-of-type { margin-top: 0; }
input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg-alt);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sand); }
textarea { resize: vertical; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  background: var(--sand);
  color: #171a19;
}
.btn:hover { background: var(--sage); }
.btn:disabled, .btn:disabled:hover { opacity: 0.4; cursor: not-allowed; background: var(--sand); color: #171a19; border-color: transparent; }
.btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--sand); color: var(--sand); }
.btn-secondary:disabled, .btn-secondary:disabled:hover { background: transparent; border-color: var(--line-strong); color: var(--ink-faint); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #171a19; }
.btn-danger:disabled, .btn-danger:disabled:hover { background: transparent; border-color: var(--line-strong); color: var(--ink-faint); }
.btn-small { padding: 0.4rem 0.9rem; font-size: 0.8rem; }

.form-status { font-size: 0.88rem; margin-top: 0.6rem; min-height: 1.2em; }
.form-status.error { color: var(--danger); }
.form-status.success { color: var(--sage); }

.tabs { display: flex; gap: 0.6rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.tab-btn {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.tab-btn.is-active { background: var(--sand); color: #171a19; border-color: var(--sand); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
tr:last-child td { border-bottom: none; }

.item-row {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: none; }
.item-row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.item-row-head h3 { margin: 0; font-family: Georgia, serif; font-size: 1.05rem; color: var(--staff-accent); }
.item-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.item-row-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
}
@media (max-width: 640px) { .item-row-images { grid-template-columns: 1fr; } }
.item-row-image-field { display: flex; flex-direction: column; }
.item-row-image-field label { margin: 0 0 0.4rem; }
.item-row-thumb {
  width: 100%;
  max-width: 160px;
  height: 70px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 0.4rem;
  margin-bottom: 0.5rem;
}
.item-row-image-field input[type=file] {
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
}
.item-row-images [data-image-status] { grid-column: 1 / -1; margin: 0; }

.item-edit-form label { margin-top: 0.8rem; }
.item-edit-form label:first-child { margin-top: 0; }

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(147,176,194,0.16);
  color: var(--sage);
}
.badge.status-new { background: rgba(221,206,172,0.18); color: var(--sand); }
.badge.status-closed { background: rgba(133,128,111,0.2); color: var(--ink-faint); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

.divider { border: none; border-top: 1px solid var(--line); margin: 1.75rem 0; }

.field-inline { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.field-inline input[type=checkbox] { width: auto; }
.field-inline label { margin: 0; }

.empty-note { color: var(--ink-faint); font-style: italic; padding: 1rem 0; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.theme-card {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background: var(--bg-alt);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1rem;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--sand); }
.theme-card.is-active { border-color: var(--sand); box-shadow: 0 0 0 1px var(--sand); }
.theme-card h3 { margin: 0 0 0.7rem; font-family: Georgia, serif; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.theme-swatches { display: flex; gap: 0.45rem; margin-bottom: 0.6rem; }
.theme-chip { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); flex-shrink: 0; }
.theme-active-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #171a19;
  background: var(--sand);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.theme-desc { margin: 0; font-size: 0.82rem; color: var(--ink-muted); }