:root{--bg:#f3f5f7;--ink:#14202b;--mute:#5b6b7a;--line:#c9d1d9;--blue:#1f5fbf;--tag:#f2c200;--card:#fff;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#10171e;--ink:#e8edf2;--mute:#93a3b3;--line:#2b3947;--blue:#6fa3f0;--card:#17212b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 "Segoe UI",system-ui,sans-serif}
main{max-width:860px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:2rem;line-height:1.15;margin:.3em 0;font-weight:800}
a{color:var(--blue)}
.mute{color:var(--mute)}
.hide{display:none}
.row{display:flex;gap:14px;align-items:center;padding:12px 14px;margin:0 0 10px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--tag);border-radius:4px;color:inherit;text-decoration:none}
.row img,.row .ph{width:64px;height:64px;object-fit:cover;border-radius:4px;background:var(--line);flex:none}
.row b{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
figure{margin:0}
figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;cursor:zoom-in;background:var(--line)}
figcaption{font-size:.9rem;color:var(--mute);padding-top:4px}
button,input,textarea{font:inherit}
button{background:var(--blue);color:#fff;border:0;border-radius:4px;padding:10px 16px;cursor:pointer}
button.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.del{background:#b3261e;color:#fff}
input,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);margin:4px 0 10px}
:focus-visible{outline:3px solid var(--tag);outline-offset:2px}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);overflow:auto;display:none;z-index:9}
#lb.on{display:block}
#lb img{width:100%;max-height:100vh;object-fit:contain;display:block;margin:auto}
#lb.zoom img{max-height:none;width:250%;object-fit:initial}
#lb button{position:fixed;top:10px;right:10px}