:root {
  --bg: #0f172a;
  --fg: #e5e7eb;
  --muted: #94a3b8;
  --primary: #38bdf8;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg); }
.container { max-width: 1000px; margin: 0 auto; padding: 16px; }
.site-header, .site-footer { background: #111827; }
.site-title { margin:0; }
nav a { color: var(--muted); text-decoration: none; margin-right: 12px; }
nav a:hover { color: var(--primary); }
h1,h2,h3 { color: var(--fg); }
.page-content img { max-width: 100%; height: auto; border-radius: 6px; }
.attachments { margin-top: 24px; }
.attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }
.attachment-item { background: #0b1220; border: 1px solid #1f2937; padding: 8px; border-radius: 8px; text-align: center; }
.attachment-item img { display: block; width: 100%; height: 140px; object-fit: cover; }
form label { display:block; margin-top:12px; margin-bottom:4px; color: var(--muted); }
input[type="text"], textarea, select { width:100%; padding:10px; border-radius:6px; border:1px solid #1f2937; background:#0b1220; color:var(--fg); }
input[type="checkbox"] { transform: scale(1.2); margin-right: 8px; }
button, .btn { background: var(--primary); color: #001018; border: none; padding: 10px 14px; border-radius: 6px; cursor: pointer; margin-top: 12px; }
button:hover, .btn:hover { filter: brightness(1.05); }
.hint { color: var(--muted); font-size: 12px; }
#file-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 8px; margin-top: 12px; }
#file-previews .preview { border:1px solid #1f2937; border-radius: 6px; padding: 6px; background:#0b1220; text-align:center; }