:root {
  --soft-dark-bg:#1f2430;
  --soft-dark-card:#252b39;
  --soft-dark-text:#e7e7ea;
  --brand:#2f6fed;
  --brand-dark:#6f8dff;
  --switch:#2f6fed;
  --link:#2f6fed;
  --pill-bg:#ffffff;
  --pill-bd:rgba(0,0,0,0.06);
  --pill-bg-hover:#eef4ff;
}
body { background:#f2f3f7; }
html[data-theme=dark] body { background:var(--soft-dark-bg); color:var(--soft-dark-text); }
html[data-theme=dark] .card,
html[data-theme=dark] .navbar,
html[data-theme=dark] .modal-content { background:var(--soft-dark-card); color:var(--soft-dark-text); }
a { color: var(--link); }
html[data-theme=dark] a { color: var(--brand-dark); }
.form-check-input { accent-color: var(--switch); }
html[data-theme=dark] .form-check-input { accent-color: var(--brand-dark); }
.hero { background:#f0f4fb; padding:2rem 0; margin-bottom:0; }
html[data-theme=dark] .hero { background:#1b2030; }
.category-strip { background:#e9f2ff; }
html[data-theme=dark] .category-strip { background:#2a3246; }
.cat-link {
  padding:.35rem .75rem;
  border-radius:999px;
  text-decoration:none;
  background:var(--pill-bg);
  border:1px solid var(--pill-bd);
  display:inline-block;
  transition:background-color .15s;
}
.cat-link:hover { background:var(--pill-bg-hover); }
.cat-link.active { background:var(--brand); color:#fff; border-color:var(--brand); }
html[data-theme=dark] .cat-link { background:#313a52; border-color:#3b4666; }
html[data-theme=dark] .cat-link:hover { background:#394768; }
html[data-theme=dark] .cat-link.active { background:var(--brand-dark); }
.thumb { object-fit:cover; width:100%; height:220px; border-radius:0 0 .6rem .6rem; }
.photo-count {
  position:absolute;
  right:.5rem;
  top:.5rem;
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.8rem;
}
.photo-desc {
  position:absolute;
  left:.5rem;
  top:.5rem;
  background:rgba(0,0,0,.50);
  color:#fff;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lightbox .photo-desc { top:1rem; left:1rem; }
.card-thumb-wrap { position:relative; }
.badge-type { text-transform:capitalize; }
.pillbits { margin:.25rem 0 .75rem 0; }
.navbar-brand { font-weight:600; }
.dark-toggle {
  margin-left:.5rem;
  width:28px;
  height:28px;
  cursor:pointer;
  object-fit:contain;
}
html[data-theme=dark] .dark-toggle { filter:brightness(1.2); }
.max-w-xl { max-width:720px; }
.link-unstyled { text-decoration:none; color:inherit; }
.link-unstyled:hover { text-decoration:none; color:inherit; }
.photo-tile { cursor:grab; }
.photo-tile.active-thumb { outline:2px solid var(--brand); }
.file-tile { cursor:grab; }
.file-pill {
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:.75rem;
  font-weight:600;
}
html[data-theme=dark] .file-pill { background:var(--brand-dark); }
.small-note { font-size:.8rem; color:#888; }
.top-links .cat-link { margin-left:.25rem; }
.dropzone {
  border:2px dashed #9eb3ff;
  border-radius:.75rem;
  padding:1rem;
  text-align:center;
  background:#f7f9ff;
}
.dropzone.dragover { background:#eef4ff; border-color:#6f8dff; }
html[data-theme=dark] .dropzone { background:#2a3246; border-color:#3b4666; }
html[data-theme=dark] .dropzone.dragover { background:#394768; border-color:#6f8dff; }
.site-footer { margin-top:2rem; padding:2rem 0; background:#eef2f8; }
html[data-theme=dark] .site-footer { background:#2a3246; }
.copyright { font-size:.85rem; opacity:.8; }
.overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.overlay .dialog {
  background:#fff;
  padding:1.25rem;
  border-radius:.75rem;
  width:min(520px, 90vw);
}
html[data-theme=dark] .overlay .dialog { background:var(--soft-dark-card); color:var(--soft-dark-text); }
.lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}
.lightbox img {
  max-width:90vw;
  max-height:90vh;
  border-radius:.5rem;
  transform:scale(.97);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.lightbox.show img { transform:scale(1); opacity:1; }
.lightbox-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:3rem;
  height:3rem;
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,0.4);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.75rem;
  cursor:pointer;
  transition:background-color .15s ease;
  z-index:1;
  font-family:inherit;
}
.lightbox-nav:hover { background:rgba(0,0,0,0.65); }
.lightbox-nav:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lightbox-prev { left:1.25rem; }
.lightbox-next { right:1.25rem; }
.lightbox-counter {
  position:absolute;
  bottom:1.25rem;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.5);
  color:#fff;
  padding:.35rem .85rem;
  border-radius:999px;
  font-size:.9rem;
  letter-spacing:.05em;
  display:none;
  font-weight:600;
  font-family:inherit;
}
.lightbox-counter::before {
  content:'';
  display:inline-block;
  width:.35rem;
  height:.35rem;
  margin-right:.35rem;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
}
html[data-theme=dark] .lightbox-nav { background:rgba(255,255,255,0.18); color:#fff; }
html[data-theme=dark] .lightbox-nav:hover { background:rgba(255,255,255,0.28); }
.thumb-grid img { width:100%; height:120px; object-fit:cover; border-radius:.5rem; cursor:pointer; }
@media (min-width:768px) { .mobile-photos { display:none; } }
@media (max-width:767.98px) { .desktop-thumbs { display:none; } }
@media (max-width:575.98px) {
  .lightbox-nav { width:2.5rem; height:2.5rem; font-size:1.5rem; }
  .lightbox-prev { left:.75rem; }
  .lightbox-next { right:.75rem; }
  .lightbox-counter { bottom:.75rem; font-size:.8rem; }
}
.icon-btn { background:none; border:none; padding:0; cursor:pointer; }
.icon { width:20px; height:20px; object-fit:contain; vertical-align:middle; }
.icon-lg { width:22px; height:22px; object-fit:contain; vertical-align:middle; }
.icon-status { width:18px; height:18px; object-fit:contain; vertical-align:middle; }
.timestamp-small {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.15rem .55rem;
  border-radius:999px;
  background:rgba(47,111,237,0.12);
  color:#2f396a;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
.timestamp-small::before {
  content:'';
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:#2f6fed;
  box-shadow:0 0 0 2px rgba(47,111,237,0.18);
}
html[data-theme=dark] .timestamp-small {
  background:rgba(111,141,255,0.18);
  color:#dbe1ff;
}
html[data-theme=dark] .timestamp-small::before {
  background:#6f8dff;
  box-shadow:0 0 0 2px rgba(111,141,255,0.25);
}
.timestamp-small:hover {
  background:rgba(47,111,237,0.18);
  color:#1d2856;
}
html[data-theme=dark] .timestamp-small:hover {
  background:rgba(111,141,255,0.24);
  color:#f5f7ff;
}
.table tbody tr:nth-child(even) { background:rgba(0,0,0,0.03); }
html[data-theme=dark] .table tbody tr:nth-child(even) { background:rgba(255,255,255,0.04); }
.table tbody tr:hover { background:rgba(47,111,237,0.08); }
html[data-theme=dark] .table tbody tr:hover { background:rgba(111,141,255,0.12); }
.badge { background:var(--brand) !important; color:#f8f9fb !important; }
.filter-wrap { display:flex; gap:.5rem; align-items:center; }
.filter-input { max-width:260px; }
.toast-wrap {
  position:fixed;
  right:1rem;
  top:1rem;
  z-index:12000;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.toast-msg {
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  padding:.5rem .75rem;
  border-radius:.5rem;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
html[data-theme=dark] .toast-msg { background:var(--soft-dark-card); color:var(--soft-dark-text); border-color:rgba(255,255,255,.08); }
.toast-ok { border-left:4px solid #2e7d32; }
.toast-err { border-left:4px solid #c62828; }
.settings-grid { display:grid; gap:1.5rem; }
.setting-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.setting-copy { flex:1 1 auto; }
.setting-controls { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.setting-status { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.setting-controls .form-check-label { font-size:.8rem; color:#6c757d; }
html[data-theme=dark] .setting-controls .form-check-label { color:#aeb8d7; }
.setting-item { padding:.75rem 0; border-top:1px solid rgba(0,0,0,0.08); }
.setting-item:first-child { border-top:none; }
.setting-item .fw-semibold { font-size:.95rem; }
html[data-theme=dark] .setting-item { border-top-color:rgba(255,255,255,0.12); }
.soft-deleted-row { opacity:0.6; transition:opacity .2s ease, background-color .2s ease; }
body:not([data-show-hidden="1"]) .soft-deleted-row { display:none; }
body[data-show-hidden="1"] .soft-deleted-row { display:table-row; opacity:1; background:rgba(255,193,7,0.14); }
html[data-theme=dark] body[data-show-hidden="1"] .soft-deleted-row { background:rgba(111,141,255,0.16); }
.lightbox-close { position:absolute; top:1rem; right:1rem; }