:root { --bg:#111; --fg:#f4f4f4; --mut:#9a9a9a; --card:#1c1c1e; --acc:#3ddc84; --err:#ff6b6b; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f5f7; --fg:#111; --mut:#666; --card:#fff; --acc:#12a150; --err:#d33; } }
* { box-sizing: border-box; }
body { margin:0 auto; background:var(--bg); color:var(--fg); font:17px/1.4 -apple-system, system-ui, sans-serif; min-height:100dvh; padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; max-width:640px; }
h1 { font-size:22px; margin:8px 0 0; } h2 { font-size:18px; margin:0; }
a { color:var(--acc); }
nav { display:flex; gap:16px; font-size:15px; }
.card { background:var(--card); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; }
button, .btn { font:inherit; font-weight:600; border:0; border-radius:14px; padding:16px; background:var(--acc); color:#000; text-align:center; cursor:pointer; text-decoration:none; display:block; }
button.sec, .btn.sec { background:transparent; color:var(--fg); border:1px solid var(--mut); }
button:disabled { opacity:.5; }
input[type=text], input[type=password] { font:inherit; padding:14px; border-radius:12px; border:1px solid var(--mut); background:transparent; color:var(--fg); width:100%; }
.small { font-size:14px; color:var(--mut); }
.err { color:var(--err); }
#preview { width:100%; border-radius:12px; display:none; max-height:50dvh; object-fit:contain; background:#000; }
#status { min-height:1.4em; text-align:center; color:var(--mut); } #status.ok { color:var(--acc); } #status.err { color:var(--err); }
input[type=file] { display:none; }
.months a { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #8883; text-decoration:none; color:var(--fg); }
.months a:last-child { border:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.item { background:var(--card); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.item img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#000; }
.item div { padding:10px; font-size:14px; display:flex; flex-direction:column; gap:2px; }