:root { --bg:#f4f3ef; --card:#fff; --line:#e3e1da; --text:#1b1b1d; --mute:#85838a; --acc:#1b1b1d; --accfg:#fff; --gold:#c9a24a; --danger:#c0463f; }
body.dark { --bg:#0f0f10; --card:#1a1a1c; --line:#2a2a2d; --text:#f1f1f1; --mute:#8d8d93; --acc:#e6c36a; --accfg:#111; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif; }
h1 { font-size:22px; margin:0; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:0 0 10px; }
.mute { color:var(--mute); } .err { color:var(--danger); min-height:1.4em; }
a { color:inherit; }
button, .btn { background:var(--acc); color:var(--accfg); border:0; border-radius:8px; padding:9px 16px; font:600 14px inherit; font-family:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button:disabled { opacity:.5; cursor:default; }
button.ghost, .btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button.danger, .btn.danger { background:var(--danger); color:#fff; }
button.small { padding:4px 10px; font-size:13px; }
input[type=text], input[type=password], input[type=url], textarea, select {
  background:var(--card); border:1px solid var(--line); color:var(--text); padding:9px 12px; border-radius:8px; font:inherit; max-width:100%; }
textarea { width:100%; min-height:90px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.grow { flex:1; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.card p { margin:0 0 10px; }
.field { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.field:first-of-type { border-top:0; }
.field .lbl { flex:1; min-width:200px; } .field .lbl small { display:block; color:var(--mute); }
.field input[type=text], .field input[type=password], .field select { min-width:240px; }
.switch { position:relative; width:42px; height:24px; flex:none; }
.switch input { opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; z-index:1; }
.switch i { position:absolute; inset:0; background:var(--line); border-radius:12px; transition:.15s; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + i { background:var(--gold); } .switch input:checked + i::after { left:21px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#222; color:#fff; padding:10px 18px; border-radius:8px; z-index:99; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal .box { background:var(--card); border-radius:14px; padding:20px; width:100%; max-width:440px; display:flex; flex-direction:column; gap:10px; }
.modal .box input, .modal .box select { width:100%; }

/* кабінет */
body.login #root { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.loginbox { display:flex; flex-direction:column; gap:12px; width:300px; }
body.admin #root { display:flex; min-height:100vh; }
.side { width:230px; flex:none; background:#16171a; color:#e9e9ea; padding:18px 12px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow:auto; }
.side .logo { font-size:20px; font-weight:700; padding:0 10px 14px; } .side .logo b { color:var(--gold); }
.side .grp { font-size:11px; letter-spacing:.08em; color:#7d7d84; padding:14px 10px 4px; }
.side a { display:flex; gap:10px; padding:8px 10px; border-radius:8px; text-decoration:none; color:#cfcfd3; font-size:14px; }
.side a:hover { background:#222327; } .side a.on { background:#2a2b30; color:#fff; }
.side .storage { margin-top:auto; background:#1e1f23; border-radius:10px; padding:10px 12px; font-size:12px; color:#cfcfd3; }
.side .storage .mute { color:#8d8d93; }
.sbar { height:6px; background:#34353a; border-radius:3px; overflow:hidden; margin-bottom:8px; } .sbar div { height:100%; background:var(--gold); }
.side .out { margin-top:8px; }
#main { flex:1; padding:24px; min-width:0; max-width:1100px; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.gallery-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.gcard { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; display:block; }
.gcard .cover { aspect-ratio:4/3; background:#e9e7e1; } .gcard .cover img { width:100%; height:100%; object-fit:cover; display:block; }
.gcard .meta { padding:10px 12px; display:flex; flex-direction:column; font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.ph { position:relative; aspect-ratio:1; background:#e9e7e1; border-radius:8px; overflow:hidden; }
.ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ph .x { position:absolute; top:6px; right:6px; } .ph .cv { position:absolute; bottom:6px; left:6px; }
.ph.iscover { outline:3px solid var(--gold); }
.drop { border:2px dashed var(--line); border-radius:12px; padding:22px; text-align:center; color:var(--mute); }
.drop.over { border-color:var(--gold); }
.progress { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:10px; display:none; }
.progress div { height:100%; width:0; background:var(--gold); }
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.stat b { display:block; font-size:26px; }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:8px; border-top:1px solid var(--line); } th { color:var(--mute); font-weight:500; border-top:0; }
.spark { display:inline-flex; align-items:flex-end; gap:2px; height:22px; } .spark i { width:6px; background:var(--gold); display:block; min-height:2px; }
.favlist { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; } .favlist img { width:64px; height:64px; object-fit:cover; border-radius:6px; }
.stars { color:var(--gold); letter-spacing:2px; }
@media (max-width:760px) {
  .side .storage { display:none; }
  body.admin #root { flex-direction:column; }
  .side { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; padding:10px; }
  .side .grp, .side .logo { display:none; } .side .out { margin-top:0; }
  #main { padding:16px; }
  .field input[type=text], .field input[type=password], .field select { min-width:0; width:100%; }
}

/* публічні сторінки */
.wrap { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }
.pub-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.pub-head img.logo { height:38px; margin-bottom:8px; display:block; }
.ph.pubph { cursor:zoom-in; }
.ph .heart, .ph .dl { position:absolute; bottom:6px; background:rgba(0,0,0,.55); color:#fff; border-radius:16px; padding:3px 10px; font-size:15px; text-decoration:none; border:0; cursor:pointer; }
.ph .heart { left:6px; } .ph .heart.on { color:#ff6b81; } .ph .dl { right:6px; }
#lb { position:fixed; inset:0; background:rgba(0,0,0,.95); display:none; align-items:center; justify-content:center; z-index:9; color:#fff; }
#lb img { max-width:96vw; max-height:88vh; }
#lb .bar { position:absolute; top:12px; right:12px; display:flex; gap:8px; }
#lb .nav { position:absolute; top:50%; font-size:34px; background:none; color:#fff; padding:10px; }
#lb .nav.l { left:6px; } #lb .nav.r { right:6px; }
.review { max-width:520px; margin-top:34px; }
.review input, .review textarea { width:100%; margin-bottom:8px; }
.pgrid-rows { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.pgrid-columns { columns:3 220px; column-gap:12px; } .pgrid-columns .gcard { break-inside:avoid; margin-bottom:12px; }
.avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; }
.quote { border-top:1px solid var(--line); padding:12px 0; }