:root { --bg:#0f1720; --card:#fff; --ink:#1b2430; --muted:#6b7785; --go:#1f8a4c; --go2:#176b3b; --line:#e3e8ee; --blue:#2563eb; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); background:#f1f4f8; }
.centered { min-height:100vh; display:grid; place-items:center; background:var(--bg); }
.topbar { display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--bg); color:#fff; }
.brand { font-weight:700; }
.spacer { flex:1; }
.muted { color:var(--muted); }
.link { color:#cfe0ff; text-decoration:none; }
.wrap { max-width:880px; margin:24px auto; padding:0 16px; display:grid; gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 1px 3px rgba(20,30,50,.06); }
.card.login { width:min(380px,92vw); }
h1 { margin:.1em 0 .3em; font-size:1.4rem; }
h2 { margin:0; font-size:1.1rem; }
label { display:block; margin:12px 0; font-weight:600; }
input[name=username], input[name=password] { width:100%; margin-top:6px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; font-size:1rem; font-weight:400; }
button { cursor:pointer; border:0; border-radius:10px; padding:12px 18px; font-size:1rem; font-weight:600; color:#fff; background:var(--blue); }
.btn-go { background:var(--go); }
.btn-go:hover { background:var(--go2); }
.btn-go.big { width:100%; padding:16px; font-size:1.1rem; margin-top:10px; }
.btn-secondary { background:#eef1f5; color:var(--ink); border:1px solid var(--line); }
.small { padding:8px 12px; font-size:.9rem; }
button:disabled { opacity:.6; cursor:default; }
.dropzone { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:34px; border:2px dashed #b8c2cf; border-radius:12px; background:#fafcff; cursor:pointer; font-weight:600; }
.dropzone.hot { border-color:var(--go); background:#eefaf0; }
.spinner { margin-top:12px; text-align:center; color:var(--go2); font-weight:600; }
.row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.admin { display:flex; align-items:center; gap:16px; border-left:5px solid var(--blue); }
.admin .spacer { flex:1; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tile { margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0b1118; }
.tile img { width:100%; height:96px; object-fit:cover; display:block; }
.tile figcaption { padding:5px 8px; font-size:.8rem; color:#fff; background:#0b1118; text-align:center; }
.flash { padding:11px 14px; border-radius:9px; margin:10px 0; font-weight:600; }
.flash.ok { background:#e7f7ec; color:#176b3b; border:1px solid #b6e6c6; }
.flash.error { background:#fdeaea; color:#9b1c1c; border:1px solid #f3c0c0; }