:root {
  --bg: #eef1f5;
  --panel: #fff;
  --text: #1a2330;
  --muted: #5c6b7f;
  --border: #cfd8e3;
  --brand: #1e5a8a;
  --danger: #b83232;
  --ok: #1e7a4a;
}
* { box-sizing: border-box; }
body.admin { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
.inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.admin-top {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.admin-top .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; }
.admin-top a { color: var(--brand); text-decoration: none; margin-right: 0.65rem; font-size: 0.92rem; }
.admin-top a:hover { text-decoration: underline; }
.admin-main { padding-bottom: 2rem; }
.admin-main h1 { font-size: 1.35rem; margin-top: 0; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.card h2 { margin-top: 0; font-size: 1.05rem; }
label { display: block; margin: 0.65rem 0; font-size: 0.88rem; }
input[type="text"], input[type="number"], input[type="email"], input[type="file"], input[type="password"], select, textarea {
  width: 100%; max-width: 40rem; margin-top: 0.25rem; padding: 0.4rem 0.5rem; font: inherit;
  border: 1px solid var(--border); border-radius: 6px;
}
textarea.code { font-family: ui-monospace, monospace; font-size: 0.82rem; max-width: 100%; }
button {
  font: inherit; padding: 0.45rem 1rem; border-radius: 6px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; cursor: pointer;
}
button.danger { background: var(--danger); border-color: #8b2222; }
button.sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
a.btn { display: inline-block; padding: 0.45rem 1rem; border-radius: 6px; background: var(--brand); color: #fff; text-decoration: none; font-size: 0.9rem; }
a.btn.secondary { background: transparent; color: var(--brand); border: 1px solid var(--border); }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.stack label { max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tbl th, .tbl td { border: 1px solid var(--border); padding: 0.4rem 0.5rem; text-align: left; vertical-align: middle; }
.tbl th { background: #f0f4f8; }
.tbl.wide { table-layout: auto; }
.thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; }
.thumb.wide-thumb { width: 160px; height: 54px; }
.num { width: 5rem; }
.error { color: var(--danger); }
.ok { color: var(--ok); }
.grid-2 { display: grid; grid-template-columns: 200px 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.side-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.side-nav a { padding: 0.35rem 0.5rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.side-nav a.active, .side-nav a:hover { background: #e3eaf3; color: var(--brand); }
span.sw { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 1px solid #999; }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { background: var(--panel); padding: 1.5rem 2rem; border-radius: 12px; border: 1px solid var(--border); width: min(100%, 360px); }
.login-box h1 { margin-top: 0; }
.login-box .hint { font-size: 0.8rem; color: var(--muted); }