:root{
  --bg:#fafafa; --card:#ffffff; --text:#111; --muted:#666;
  --border:#e9e9e9; --radius:18px;
}
*{ box-sizing:border-box; }
body{ font-family:system-ui,-apple-system,Segoe UI,Arial; margin:0; background:var(--bg); color:var(--text); }
a{ color:inherit; }
.wrap{ max-width:1100px; margin:0 auto; padding:18px; }

.topbar{ position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); z-index:10; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ font-weight:800; letter-spacing:.2px; }
.nav a{ text-decoration:none; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); }

.hero-head{ padding:18px 0 8px; }
.hero-head h1{ margin:0; font-size:32px; }
.hero-head p{ margin:8px 0 0; color:var(--muted); }

.filters{ display:flex; gap:10px; flex-wrap:wrap; padding:12px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); }
.filters select, .filters input{ padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:#fff; }

.chk{ display:flex; align-items:center; gap:8px; color:var(--muted); padding:8px 4px; }

button, .btn{
  cursor:pointer;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  display:inline-block;
}
.btn.primary{ background:#111; color:#fff; border-color:#111; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px; }

/* cards */
.card{
  position: relative;
  display:block;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.card img{ width:100%; height:220px; object-fit:cover; display:block; background:#f3f3f3; }

.meta{ padding:12px; }
.name{ font-weight:800; font-size:18px; }
.sub{ color:var(--muted); font-size:14px; margin-top:4px; }

/* badges over the image */
.card-badges{
  position:absolute;
  top:10px; left:10px; right:10px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  pointer-events:none;
}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  backdrop-filter: blur(6px);
}

.empty{ margin:26px 0; padding:18px; background:var(--card); border:1px dashed var(--border); border-radius:var(--radius); color:var(--muted); }
.hidden{ display:none; }

.back{ display:inline-block; margin:10px 0 14px; text-decoration:none; color:var(--muted); }

/* public cat page */
.cat-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start; }
.hero{ width:100%; border-radius:var(--radius); border:1px solid var(--border); }
.thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.thumb{ width:78px; height:78px; object-fit:cover; border-radius:14px; border:1px solid var(--border); cursor:pointer; background:#f3f3f3; }

.panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.panel h3{ margin:16px 0 8px; }
.panel p{ margin:0 0 10px; color:#222; line-height:1.5; }

.pill{
  display:inline-block;
  margin:0 8px 8px 0;
  padding:7px 10px;
  border-radius:999px;
  background:#f3f3f3;
  font-size:13px;
  color:#222;
}
.contacts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
hr.sep{ border:none; border-top:1px solid var(--border); margin:14px 0; }

/* lightbox */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:center; justify-content:center; padding:18px; z-index:50; }
.modal.open{ display:flex; }
.modal img{ max-width:min(100%, 980px); max-height: 86vh; border-radius:22px; background:#111; }
.modal .x{ position:absolute; top:16px; right:16px; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 12px; }

/* forms */
.form{ max-width:980px; display:grid; gap:10px; }
.form input, .form textarea, .form select{ width:100%; padding:10px 12px; border-radius:14px; border:1px solid var(--border); background:#fff; }
.form textarea{ min-height:120px; resize:vertical; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.error{ padding:12px; border:1px solid #ffd0d0; background:#fff0f0; border-radius:14px; color:#a40000; }
.ok{ padding:12px; border:1px solid #cfead6; background:#effaf1; border-radius:14px; color:#0b6b1a; }

.tbl{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tbl th, .tbl td{ padding:12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
.tbl th{ background:#fbfbfb; color:#333; font-weight:700; }
.small{ color:var(--muted); font-size:13px; }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.photo-item{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; }
.photo-item img{ width:100%; height:120px; object-fit:cover; display:block; }
.photo-item .bar{ padding:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* admin “like public”: photos left, form right */
.admin-like-public{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .admin-like-public{ grid-template-columns: 1fr; }
  .cat-layout{ grid-template-columns:1fr; }
  .hero-head h1{ font-size:28px; }
}

.admin-hero-wrap{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.photo-grid-admin{
  margin-top:12px;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
}
.photo-item-admin{ cursor:grab; }
.photo-item-admin:active{ cursor:grabbing; }
.photo-item-admin.dragging{ opacity:.55; }

/* Dropzone */
.dropzone{
  border:1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding:14px;
  text-align:center;
  color: var(--muted);
}
.dropzone.dragover{
  border-style: solid;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.dropzone .dz-actions{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}