:root {
  --ink: #1c2430; --muted: #64748b; --line: #e2e8f0;
  --bg: #f6f8fa; --card: #ffffff;
  --accent: #0f6b54; --accent-ink: #ffffff;
  --warn-bg: #fef3c7; --warn-ink: #92400e;
  --bad-bg: #fee2e2; --bad-ink: #991b1b;
  --ok-bg: #d1fae5; --ok-ink: #065f46;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.5; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.topbar { background: var(--ink); color: #fff; padding: 10px 0; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.brand { font-weight: 700; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 14px; }
.topbar a { color: #cbd5e1; text-decoration: none; }
.topbar a:hover { color: #fff; }
main { padding: 20px 16px 60px; }
h1 { font-size: 1.4rem; margin: 18px 0 10px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 12px 0; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #eef2f6; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.bad { background: var(--bad-bg); color: var(--bad-ink); }
.badge.muted { background: var(--line); color: var(--muted); }
.flash { background: var(--ok-bg); color: var(--ok-ink); border-radius: 8px; padding: 10px 14px; margin: 10px 0; word-break: break-all; }
form.stack { display: grid; gap: 10px; max-width: 480px; }
label { font-size: .85rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: 2px; }
input, select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; background: #fff; }
button, .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 10px 18px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
button.small, .btn.small { padding: 5px 12px; font-size: .85rem; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.progress { background: var(--line); border-radius: 999px; height: 10px; overflow: hidden; min-width: 90px; }
.progress > div { height: 100%; background: var(--accent); }
.progress.over > div { background: #b91c1c; }
.big-count { font-size: 2.2rem; font-weight: 800; }
.muted { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.photo-thumb { max-width: 72px; max-height: 72px; border-radius: 6px; display: block; }
.linkbox { font-family: ui-monospace, monospace; font-size: .82rem; background: #eef2f6; padding: 6px 8px; border-radius: 6px; word-break: break-all; }
@media (max-width: 640px) { th, td { padding: 8px; font-size: .92rem; } }