:root { --bg:#0b0d10; --card:#131720; --text:#e9eef6; --muted:#97a3b6; --accent:#7aa2ff; --border:#232a37; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.container { max-width: 980px; margin: 0 auto; padding: 18px; }
.topbar { position: sticky; top:0; background: rgba(11,13,16,0.9); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.row { display:flex; align-items:center; gap: 12px; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.brand { font-weight: 800; font-size: 18px; color: var(--text); }
h1 { margin: 18px 0 10px; font-size: 28px; }
h2 { margin: 22px 0 10px; font-size: 20px; }
.muted { color: var(--muted); }
.error { color: #ff9aa5; }
.card { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 14px; margin: 12px 0; }
.card.small { width: 280px; }
.card.grow { flex: 1; min-width: 280px; }
.btn { background: var(--accent); color: #061225; border: none; padding: 10px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
input[type="file"], input { width: 100%; margin: 8px 0 12px; padding: 10px 10px; border-radius: 10px; border: 1px solid var(--border); background: #0f131b; color: var(--text); }
label { display:block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.footer { border-top:1px solid var(--border); margin-top: 24px; padding-top: 16px; }
.list { display:flex; flex-direction: column; gap: 10px; }
.listitem { display:block; background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 12px; }
.pill { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.pill.done { border-color: rgba(122,162,255,0.5); color: var(--accent); }
.pill.error { border-color: rgba(255,154,165,0.5); color: #ff9aa5; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.imgcard { border:1px solid var(--border); border-radius: 14px; padding: 10px; background: #0f131b; }
.imgcard img { width: 100%; border-radius: 12px; display:block; }
.label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.placeholder { height: 280px; display:flex; align-items:center; justify-content:center; color: var(--muted); border:1px dashed var(--border); border-radius: 12px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .card.small { width: 100%; } }