:root { --bg:#f4f6f8; --card:#fff; --ink:#16191f; --mute:#5f6b7a; --line:#d5dbdb; --accent:#0972d3; --warn:#8d3a00; --warnbg:#fff4e5; --ok:#037f0c; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink); }
header { background:#232f3e; color:#fff; padding:10px 20px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
header a { color:#fff; text-decoration:none; }
.brand { font-weight:700; font-size:18px; }
nav { display:flex; gap:14px; margin-left:auto; font-size:14px; }
main { max-width:1000px; margin:20px auto; padding:0 16px 60px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.card h2, .card h3 { margin:0 0 10px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1 1 200px; }
.grow { flex:1 1 100%; }
input[type=text], input[type=search], input:not([type]), textarea, select { width:100%; padding:8px; border:1px solid var(--line); border-radius:4px; font:inherit; }
textarea { min-height:90px; }
label.f { display:block; font-size:13px; color:var(--mute); }
button, .btn { background:var(--accent); color:#fff; border:0; border-radius:4px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.sec { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button.link { background:none; color:var(--accent); padding:0 4px; text-decoration:underline; }
button.danger { background:#d91515; }
.sitelist { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.sitelist a { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; color:inherit; text-decoration:none; }
.sitelist a:hover { border-color:var(--accent); }
.mute { color:var(--mute); font-size:13px; }
.tag { background:#e9f1fb; color:var(--accent); border-radius:10px; padding:1px 8px; font-size:12px; }
.tag.ok { background:#e6f4e7; color:var(--ok); }
video { width:100%; max-height:480px; background:#000; border-radius:6px; }
.snaps { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.snaps figure { margin:0; }
.snaps img { width:100%; height:130px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:zoom-in; }
.snaps img.big { position:fixed; inset:5%; width:90%; height:90%; object-fit:contain; background:#000e; z-index:9; cursor:zoom-out; }
figcaption { font-size:12px; color:var(--mute); }
table { border-collapse:collapse; width:100%; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
.banner { background:var(--warnbg); border-left:4px solid var(--warn); padding:10px 14px; color:var(--warn); border-radius:4px; margin-bottom:12px; font-weight:600; }
.warn { background:var(--warnbg); border-left:4px solid var(--warn); padding:6px 10px; color:var(--warn); margin:6px 0; font-weight:600; }
.note { background:#eef6ff; border-left:4px solid var(--accent); padding:6px 10px; margin:6px 0; }
.step { margin:6px 0; display:flex; gap:8px; align-items:flex-start; }
.step input { margin-top:4px; width:auto; }
.step .ts { color:var(--ok); font-size:12px; margin-left:6px; }
.kids { margin-left:22px; border-left:2px solid var(--line); padding-left:12px; }
.q { margin:10px 0; }
.qtext { font-weight:600; margin:0 0 4px; }
.opt { margin-right:16px; display:inline-flex; gap:4px; align-items:center; }
.opt input { width:auto; }
.report { float:right; font-size:12px; }
.err { color:#d91515; }

.snaps.wide { grid-template-columns: 1fr; }
.snaps.wide img { width:100%; height:auto; max-height:560px; object-fit:contain; background:#111; }
.snaps.wide figcaption { font-size:14px; margin-top:4px; }