:root { --bg:#f4f5f9; --card:#fff; --line:#e3e6ef; --text:#1b1f2e; --muted:#6b7280; --accent:#5b5bd6; --accent-2:#4a4ac0;
  --good:#1a8a53; --good-bg:#e7f6ee; --bad:#c0392b; --bad-bg:#fdeceb; --warn:#9a6700; --warn-bg:#fff4d6;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); min-height: 100vh; font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
nav.top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:14px max(16px, calc((100vw - 1180px)/2)); background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
nav.top .brand { font-weight:800; color:var(--text); text-decoration:none; margin-right:10px; }
nav.top a { color:#3b4262; text-decoration:none; font-weight:600; }
nav.top a.active, nav.top a:hover { color:var(--accent); }
nav.top form { margin-left:auto; }
main { max-width:1180px; margin:0 auto; padding:28px 16px 60px; }
h1 { font-size:clamp(24px,4vw,34px); margin:0 0 6px; }
h2 { font-size:20px; margin:0 0 12px; }
.lead { color:var(--muted); margin:0 0 22px; max-width:780px; }
.muted { color:var(--muted); } .small { font-size:13px; } .good { color:var(--good); } .bad { color:var(--bad); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:18px 0 26px; }
.card, .panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.panel { margin-bottom:18px; }
.number { font-size:30px; font-weight:800; color:var(--accent); line-height:1.1; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.banner { border-radius:10px; padding:12px 16px; margin-bottom:18px; font-weight:600; }
.banner.good { background:var(--good-bg); color:var(--good); } .banner.bad { background:var(--bad-bg); color:var(--bad); }
.banner.warn { background:var(--warn-bg); color:var(--warn); }
input, select, textarea, button { font: inherit; border-radius:9px; border:1px solid #cfd4e2; padding:9px 11px; background:#fff; color:var(--text); }
textarea { width:100%; resize:vertical; min-height:70px; }
input[type=text], input[type=number], input[type=password], select { width:100%; }
input[type=color] { padding:2px; height:40px; width:56px; }
input[type=checkbox] { width:auto; }
label { display:grid; gap:5px; font-size:13px; color:#4b5470; font-weight:600; }
label.inline { display:inline-flex; align-items:center; gap:6px; font-weight:500; margin-right:12px; }
button, .btn { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:var(--accent-2); }
button.secondary, .btn.secondary { background:#eef0f7; color:#3b4262; border-color:#d9ddea; }
button.danger { background:#fff; color:var(--bad); border-color:#efc4bf; }
button.linklike { background:none; border:none; color:#3b4262; padding:0; font-weight:600; }
button.small, .btn.small { padding:5px 10px; font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:end; }
.form-grid .wide { grid-column: 1 / -1; }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.actions form { display:inline; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tabs a { padding:6px 13px; border-radius:999px; border:1px solid #d7dcec; background:#fff; color:#3b4262; text-decoration:none; font-weight:600; font-size:14px; }
.tabs a.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.badge { display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:1px 9px; background:#eef0fb; color:var(--accent); border:1px solid #d9dcf6; white-space:nowrap; }
.badge.sig { background:var(--warn-bg); color:var(--warn); border-color:#f1dc9c; }
.badge.err { background:var(--bad-bg); color:var(--bad); border-color:#f3c2bd; }
.badge.ok { background:var(--good-bg); color:var(--good); border-color:#bfe6cf; }
.badge.gray { background:#f1f2f6; color:#6b7280; border-color:#e3e6ef; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { padding:10px 12px; text-align:left; border-bottom:1px solid #eceff5; vertical-align:top; }
th { color:var(--muted); font-size:13px; font-weight:600; }
.item { display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; }
.item.dim { opacity:.55; }
.item img { width:96px; height:96px; object-fit:cover; border-radius:10px; flex-shrink:0; background:#eee; }
.item .body { min-width:0; flex:1; }
.item .meta { color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:4px; }
.item .title { font-weight:700; margin:2px 0 4px; }
.item .angle { font-size:14px; color:#3b4262; margin-top:4px; }
.score { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:#eef0fb; color:var(--accent); font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; }
details.edit > summary { cursor:pointer; color:var(--accent); font-weight:600; list-style:none; }
details.edit[open] { background:#fafbfe; }
.row-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.row-card.off { opacity:.6; }
.row-head { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:16px; }
.filters label { min-width:140px; }
.login { max-width:360px; margin:12vh auto; }
.chk-group { display:flex; flex-wrap:wrap; gap:4px 0; }
@media (max-width:760px) { .grid2 { grid-template-columns:1fr; } .item img { width:64px; height:64px; } nav.top form { margin-left:0; } }
.img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:12px 0; }
.img-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; }
.img-grid img, .img-card img { width:100%; height:auto; display:block; border-radius:8px; }
.item img { height:96px; }
.block { margin-top:14px; }