:root{color-scheme:dark;--bg:#09111f;--panel:#111d30;--line:#263754;--text:#eaf1fb;--muted:#a8b5c8;--accent:#60a5fa}*{box-sizing:border-box}body{margin:0;background:linear-gradient(160deg,#07101d,#101d31);color:var(--text);font:16px/1.5 system-ui,sans-serif;min-height:100vh}header,main,footer{width:min(1120px,calc(100% - 2rem));margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--line)}nav{display:flex;gap:1rem}a{color:var(--accent);text-decoration:none}.brand{font-weight:800;color:var(--text)}main{padding:2rem 0}.hero h1{font-size:clamp(2rem,7vw,4.5rem);line-height:1;margin:.3rem 0}.hero p,.hint{color:var(--muted)}.panel{background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:1rem;padding:1.25rem;margin:1.5rem 0;box-shadow:0 12px 35px #0005}form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;align-items:end}label{display:grid;gap:.35rem;font-weight:700}input,button{font:inherit;border-radius:.6rem;border:1px solid var(--line);padding:.7rem;background:#081322;color:var(--text)}button{background:#1d4ed8;border-color:#3b82f6;font-weight:800;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}output{grid-column:1/-1;min-height:1.5rem}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:2rem}.card{margin:0;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;background:var(--panel)}.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#050a12}.card figcaption{padding:.8rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}.card small{color:var(--muted)}.delete{background:#991b1b;padding:.4rem .65rem}.storage{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}progress{width:100%;height:1rem;accent-color:var(--accent)}.pager{display:flex;justify-content:center;align-items:center;gap:1rem;padding:2rem}.empty{text-align:center;color:var(--muted);grid-column:1/-1}footer{color:var(--muted);padding:2rem 0;border-top:1px solid var(--line)}@media(max-width:520px){header{align-items:flex-start}.gallery{grid-template-columns:1fr 1fr}.card figcaption{display:block}.delete{margin-top:.5rem;width:100%}}@media(prefers-reduced-motion:no-preference){.card{transition:transform .15s}.card:hover{transform:translateY(-3px)}}