:root { --bg: #0b0d10; --fg: #e5e7eb; --muted:#9ca3af; --card:#111317; --accent:#60a5fa; --stroke:#1f2937; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); }
a { color: var(--accent); text-decoration: none; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--stroke); background:#0e1116; }
.brand { font-weight:700; letter-spacing:.3px; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.flash > div { background:#1a2332; border:1px solid #22314a; padding:8px 12px; margin:12px 0; border-radius:8px; }
label { display:block; margin:12px 0 6px; color: var(--muted); }
input, textarea { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--stroke); background:#0f1217; color:var(--fg); }
button { margin-top:12px; padding:10px 16px; border-radius:8px; border:1px solid #2b3344; background:#1b2333; color:#dbeafe; cursor:pointer; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.card { display:block; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; background: var(--card); }
.card img { width:100%; height:160px; object-fit:cover; display:block; }
.card .meta { padding:10px 12px; }
.card .title { font-weight:600; }
.card .sub { color: var(--muted); font-size: 12px; margin-top:4px; }
.post .full { width:100%; max-height:65vh; object-fit:contain; border:1px solid var(--stroke); border-radius:12px; }
details.desc { margin-top:12px; }
.foot { border-top:1px solid var(--stroke); color:var(--muted); padding:16px; text-align:center; margin-top:40px; }