:root { --bg:#fafafa; --fg:#222; --muted:#777; --card:#fff; --line:#e4e4e4; --on:#2e7d32; --off:#b0b0b0; --accent:#1a73e8; }
@media (prefers-color-scheme: dark) { :root { --bg:#141414; --fg:#eee; --muted:#999; --card:#1e1e1e; --line:#2c2c2c; --off:#555; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.4 system-ui, sans-serif; }
a { color:inherit; text-decoration:none; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); gap:12px; }
.brand { font-weight:600; font-size:17px; }
nav { display:flex; align-items:center; gap:14px; color:var(--muted); }
nav a:hover { color:var(--fg); }
main { padding:16px; max-width:1400px; margin:0 auto; }
.flash { background:#fde7e7; color:#8a1c1c; padding:8px 16px; }
.inline { display:inline; }
button { font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:6px; padding:5px 10px; }
button.link { border:0; background:none; color:var(--muted); padding:0; }
button.link:hover { color:var(--fg); }
button.small { font-size:13px; padding:3px 8px; }
.badge.admin { font-size:12px; background:var(--accent); color:#fff; padding:2px 7px; border-radius:10px; }
.grid { display:grid; gap:12px; }
.grid.albums { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.grid.photos { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.card.private { border-style:dashed; opacity:.85; }
.cover { display:block; aspect-ratio:4/3; background:var(--line); }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.nocover { display:grid; place-items:center; height:100%; color:var(--muted); }
.meta { padding:10px 12px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.meta .title { font-weight:600; flex:1 1 100%; }
.count { color:var(--muted); font-size:13px; }
.toggle { border-radius:12px; font-size:12px; padding:2px 9px; }
.toggle.on { background:var(--on); color:#fff; border-color:var(--on); }
.toggle.off { background:var(--off); color:#fff; border-color:var(--off); }
.tile { position:relative; aspect-ratio:1; background:var(--line); border-radius:8px; overflow:hidden; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; }
.tile.private img { opacity:.45; }
.dot { position:absolute; top:6px; right:6px; width:16px; height:16px; border-radius:50%; padding:0; border:2px solid #fff; box-shadow:0 0 3px rgba(0,0,0,.5); }
.dot.on { background:var(--on); } .dot.off { background:var(--off); }
.albumhead { margin-bottom:14px; }
.albumhead h1 { margin:0 0 6px; font-size:22px; }
.adminbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.hint { color:var(--muted); font-size:13px; }
.titleform input { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); min-width:260px; }
.viewer { position:relative; display:flex; justify-content:center; align-items:center; min-height:60vh; }
.viewer img { max-width:100%; max-height:82vh; display:block; border-radius:4px; }
.arrow { position:absolute; top:0; bottom:0; width:18%; display:flex; align-items:center; font-size:64px; color:#fff; text-shadow:0 0 8px rgba(0,0,0,.7); opacity:0; transition:opacity .15s; }
.arrow.left { left:0; justify-content:flex-start; padding-left:12px; } .arrow.right { right:0; justify-content:flex-end; padding-right:12px; }
.viewer:hover .arrow { opacity:.9; }
.caption { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:10px; }
.caption p { margin:0; }
.pos { font-variant-numeric:tabular-nums; }
.loginbox { max-width:360px; margin:60px auto; text-align:center; }
.loginbox label { display:block; margin-bottom:12px; }
.loginbox input { display:block; width:100%; margin-top:6px; font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
.empty { color:var(--muted); text-align:center; margin:60px 0; }
@media (max-width:600px) { main { padding:10px; } .grid.photos { grid-template-columns:repeat(3, 1fr); gap:6px; } .titleform input { min-width:0; width:100%; } }