:root {
  --zutem-bg: #0b1020;
  --zutem-panel: #121a2d;
  --zutem-panel-2: #18233b;
  --zutem-border: rgba(148, 163, 184, .18);
  --zutem-text: #f8fafc;
  --zutem-muted: #9aa8bf;
  --zutem-accent: #ff7a00;
  --zutem-accent-2: #ffb347;
  --zutem-radius: 18px;
}

html, body {
  background: var(--zutem-bg) !important;
  color: var(--zutem-text) !important;
}

body#theAdminPage,
body#thePicturePage,
body#theCategoryPage,
body#theSearchPage,
body#theIndexPage {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,0,.12), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(59,130,246,.12), transparent 32rem),
    var(--zutem-bg) !important;
}

#theHeader {
  max-width: 1240px;
  margin: 28px auto 18px;
  padding: 34px 40px;
  border: 1px solid var(--zutem-border);
  border-radius: 26px;
  background: linear-gradient(120deg, rgba(255,122,0,.20), rgba(18,26,45,.94) 42%, rgba(37,99,235,.18));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

#theHeader h1 {
  margin: 0 0 8px;
  color: var(--zutem-text);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.04em;
}

#theHeader p {
  margin: 0;
  color: var(--zutem-muted);
  font-size: 1.05rem;
}

#content, #menubar {
  color: var(--zutem-text);
}

#content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

#menubar {
  background: rgba(18,26,45,.90) !important;
  border: 1px solid var(--zutem-border);
  border-radius: var(--zutem-radius);
  box-shadow: 0 16px 45px rgba(0,0,0,.24);
}

#menubar a, #content a { color: #ffb86b; }
#menubar a:hover, #content a:hover { color: #fff; }

.albThumbs, .thumbnailCategories {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  padding: 0 !important;
  margin: 20px 0 !important;
}

.albThumbs > li, .thumbnailCategories > li {
  width: auto !important;
  margin: 0 !important;
  list-style: none;
}

.albThumbs > li > a, .thumbnailCategory {
  display: block;
  overflow: hidden;
  border: 1px solid var(--zutem-border) !important;
  border-radius: var(--zutem-radius) !important;
  background: linear-gradient(150deg, var(--zutem-panel-2), var(--zutem-panel)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.albThumbs > li > a:hover, .thumbnailCategory:hover {
  transform: translateY(-5px);
  border-color: rgba(255,179,71,.75) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.38) !important;
}

.albImg, .thumbnailCategory .illustration img {
  width: 100% !important;
  height: 190px !important;
  max-width: none !important;
  object-fit: cover;
}

.albLegend, .thumbnailCategory .description {
  height: auto !important;
  min-height: 86px;
  padding: 16px 18px !important;
  background: transparent !important;
  color: var(--zutem-muted) !important;
}

.albLegend h4, .thumbnailCategory h3 {
  margin: 0 0 7px !important;
  color: var(--zutem-text) !important;
  font-size: 1.08rem;
}

.thumbnailCategory .text, .thumbnailCategory .Nb_images { color: var(--zutem-muted); }

.thumbnails {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  padding: 0 !important;
}

.thumbnails li { margin: 0 !important; }
.thumbnails .wrap1, .thumbnails .wrap2 {
  width: auto !important;
  height: auto !important;
  border: 1px solid var(--zutem-border) !important;
  border-radius: 14px !important;
  background: var(--zutem-panel) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20) !important;
}

.thumbnails img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

#noPhotoWelcome {
  margin: 12vh auto 28px !important;
  max-width: 700px;
  color: var(--zutem-text) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 700;
  letter-spacing: -.04em;
  text-align: center;
}

#quickconnect {
  max-width: 420px;
  margin: 0 auto !important;
  padding: 28px !important;
  border: 1px solid var(--zutem-border) !important;
  border-radius: var(--zutem-radius) !important;
  background: var(--zutem-panel) !important;
  color: var(--zutem-muted) !important;
}

#quickconnect input { box-sizing: border-box; max-width: 100%; border-radius: 10px; }
#quickconnect input[type=submit] { background: var(--zutem-accent) !important; color: white !important; }

@media (max-width: 700px) {
  #theHeader { margin: 14px; padding: 26px 22px; }
  #content { padding: 0 14px 42px; }
  .albThumbs, .thumbnailCategories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .albImg, .thumbnailCategory .illustration img { height: 135px !important; }
  .thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .thumbnails img { height: 130px !important; }
}

/* Full-width gallery shell. Modus is a flex layout; its default fixed
   content width becomes a very narrow strip when the browser is zoomed out. */
body#theCategoryPage,
body#theIndexPage {
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: start;
  column-gap: 28px;
}

body#theCategoryPage #theHeader,
body#theIndexPage #theHeader {
  grid-column: 1 / -1;
  width: auto;
  max-width: none;
  margin: 24px 0 0;
}

#the_page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 24px 64px !important;
  box-sizing: border-box;
}

body#theCategoryPage #menubar,
body#theIndexPage #menubar {
  grid-column: 1;
  grid-row: 1;
  flex: 0 0 260px !important;
  width: auto !important;
  max-width: 260px !important;
  margin: 24px 0 !important;
  box-sizing: border-box;
}

body#theCategoryPage #content,
body#theIndexPage #content {
  grid-column: 2;
  grid-row: 1;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 24px 0 0 !important;
  padding: 0 0 64px !important;
  box-sizing: border-box;
}

body#theCategoryPage #menuSwitcher,
body#theIndexPage #menuSwitcher {
  display: none;
}

body#theCategoryPage .contentWithMenu,
body#theIndexPage .contentWithMenu {
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 900px) {
  body#theCategoryPage,
  body#theIndexPage {
    display: block !important;
  }
  #the_page { padding: 0 14px 42px !important; }
  body#theCategoryPage #menubar,
  body#theIndexPage #menubar {
    grid-column: auto;
    grid-row: auto;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 14px 0 !important;
  }
  body#theCategoryPage #content,
  body#theIndexPage #content {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0 !important;
  }
  body#theCategoryPage #menuSwitcher,
  body#theIndexPage #menuSwitcher {
    display: block;
  }
}

/* Dashboard home presentation */
.zutem-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding: 0 24px;
  background: rgba(8, 10, 16, .96);
  border-bottom: 1px solid rgba(148,163,184,.14);
  box-sizing: border-box;
}
.zutem-shell #menubar { grid-row: 2 !important; }
.zutem-shell #content { grid-row: 2 !important; }
.zutem-shell #menuSwitcher { grid-row: 2 !important; }
.zutem-brand { display:flex; align-items:center; gap:9px; color:#f8fafc !important; font-size:1.15rem; font-weight:700; text-decoration:none !important; white-space:nowrap; }
.zutem-brand img { width:29px; height:29px; border-radius:8px; }
.zutem-search { display:flex; align-items:center; gap:10px; width:min(570px, 50vw); margin:0 auto; padding:8px 16px; border-radius:24px; background:#20232b; color:#aab2c1; }
.zutem-search span { font-size:1.55rem; line-height:1; }
.zutem-search input { flex:1; min-width:0; border:0; outline:0; color:#f8fafc; background:transparent; font:inherit; }
.zutem-search input::placeholder { color:#9aa1ad; }
.zutem-actions { display:flex; align-items:center; gap:22px; margin-left:auto; }
.zutem-actions a { color:#e5e7eb !important; text-decoration:none !important; white-space:nowrap; }
.zutem-actions a:hover { color:#ffb347 !important; }
.zutem-actions > a:nth-child(2) { width:22px; height:22px; border:1px solid #cbd5e1; border-radius:50%; display:grid; place-items:center; font-weight:700; }
.zutem-user { display:flex; align-items:center; gap:8px; }
.zutem-user b { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:white; background:#4778cf; }

.zutem-home #menubar { border:0; border-radius:0; background:linear-gradient(180deg,#11151c,#0c0f15) !important; box-shadow:none; padding:22px 14px; }
.zutem-home #menubar,
.zutem-shell #menubar { overflow:visible; }
.zutem-home #menubar dl,
.zutem-shell #menubar dl { display:block !important; float:none !important; width:100% !important; margin:0 0 18px !important; padding:0 !important; box-sizing:border-box; }
.zutem-home #menubar dt,
.zutem-shell #menubar dt { display:block !important; float:none !important; width:100% !important; padding:0 !important; margin:0 0 8px !important; box-sizing:border-box; }
.zutem-home #menubar dd,
.zutem-shell #menubar dd { display:block !important; position:static !important; float:none !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; line-height:1.55 !important; background:transparent !important; box-shadow:none !important; box-sizing:border-box; }
.zutem-home #menubar ul,
.zutem-shell #menubar ul { display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important; list-style:none !important; box-sizing:border-box; }
.zutem-home #menubar li,
.zutem-shell #menubar li { display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box; }
.zutem-home #menubar li a,
.zutem-shell #menubar li a { display:inline-block !important; max-width:100%; box-sizing:border-box; }
.zutem-home #menubar .badge,
.zutem-shell #menubar .badge { background:transparent !important; border:0 !important; padding:2px 5px !important; }
.zutem-home #menubar #qsearchInput,
.zutem-shell #menubar #qsearchInput { width:100% !important; max-width:none !important; box-sizing:border-box; padding:9px 10px !important; border:1px solid rgba(148,163,184,.35) !important; border-radius:7px; background:#161d2a !important; color:#f8fafc !important; }
.zutem-side-nav { display:flex; flex-direction:column; gap:4px; margin:0 0 28px; padding-bottom:18px; border-bottom:1px solid rgba(148,163,184,.14); }
.zutem-side-nav a { display:flex !important; align-items:center; gap:12px; padding:10px 12px; border-radius:7px; color:#d6dce8 !important; font-size:.95rem; font-weight:600; text-decoration:none !important; }
.zutem-side-nav a.active { background:rgba(71,120,207,.22); color:#ffb347 !important; }
.zutem-side-nav a:hover { background:rgba(71,120,207,.14); color:#fff !important; }
.zutem-menu-label { margin:2px 0 9px; color:#7f8da4; font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.zutem-home #mbCategories > dt[hidden], .zutem-home #mbSpecials > dt[hidden] { display:none !important; }

/* Fallback for a cached/blocked dashboard script: keep the native menu
   vertical and readable even before the enhancement script runs. */
body#theCategoryPage #menubar dl { display:block !important; float:none !important; width:100% !important; margin:0 0 18px !important; padding:0 !important; }
body#theCategoryPage #menubar dd { display:block !important; position:static !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; line-height:1.55 !important; background:transparent !important; box-shadow:none !important; }
body#theCategoryPage #menubar ul { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; list-style:none !important; }
body#theCategoryPage #menubar li { display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important; }
body#theCategoryPage #menubar li a { display:inline-block !important; }
.zutem-home #menubar dt a { color:#f3f4f6 !important; font-weight:600; }
.zutem-home #menubar dl:first-child dt a { display:block; padding:11px 12px; border-radius:7px; background:rgba(71,120,207,.2); color:#ffb347 !important; }
.zutem-home #menubar dd { color:#aab2c1; }
.zutem-home #menubar dd li { padding:3px 0; }
.zutem-home #menubar dd li a { color:#cbd5e1 !important; }
.zutem-home #menubar .badge { color:#8e99aa; }
.zutem-home #menubar .totalImages { color:#8e99aa; }

.zutem-hero { position:relative; min-height:286px; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; margin:0 -24px 28px; padding:36px 34px; background-image:linear-gradient(90deg,rgba(8,10,16,.96) 0%,rgba(8,10,16,.79) 34%,rgba(8,10,16,.18) 100%), var(--hero-image, linear-gradient(120deg,#1e293b,#111827)); background-position:center; background-size:cover; box-sizing:border-box; }
.zutem-hero-copy { max-width:500px; position:relative; z-index:1; }
.zutem-kicker { color:#91a0b9; font-size:.77rem; letter-spacing:.16em; font-weight:700; }
.zutem-hero h1 { margin:8px 0 4px; color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); letter-spacing:-.04em; }
.zutem-hero p { margin:10px 0 20px; color:#d8dee9; font-size:1rem; line-height:1.55; }
.zutem-hero-button { display:inline-flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(8,10,16,.72); color:#fff !important; font-size:.9rem; font-weight:700; text-decoration:none !important; }
.zutem-hero-button:hover { background:#ff7a00; color:#111 !important; }
.zutem-stat-grid { display:grid; grid-template-columns:repeat(4, minmax(108px, 1fr)); gap:14px; min-width:min(52%, 540px); position:relative; z-index:1; }
.zutem-stat-card { display:flex; min-height:112px; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 10px; border:1px solid rgba(255,255,255,.13); border-radius:12px; background:rgba(30,35,43,.78); color:#fff; text-align:center; box-shadow:0 14px 30px rgba(0,0,0,.2); }
.zutem-stat-icon { color:#dce4ef; font-size:1.45rem; line-height:1; }
.zutem-stat-card b { font-size:1.2rem; }
.zutem-stat-card small { color:#d3d8e0; font-size:.78rem; }
.zutem-home .titrePage { display:none; }
.zutem-section-heading { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.zutem-section-heading h2 { margin:0; color:#f8fafc; font-size:1.3rem; }
.zutem-section-heading a { color:#6ea1ff !important; font-size:.9rem; }
.zutem-home .albThumbs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.zutem-home .albThumbs > li { height:auto !important; aspect-ratio:4 / 3; overflow:hidden; }
.zutem-home .albThumbs > li > a { position:relative; isolation:isolate; aspect-ratio:auto; height:100%; min-height:0; border-radius:12px !important; background:#0d1526 !important; }
.zutem-home .albThumbs > li > a::before { content:""; position:absolute; z-index:0; inset:-22px; background-image:var(--cover-image); background-position:center; background-size:cover; filter:blur(18px); opacity:.62; transform:scale(1.08); }
.zutem-home .albImg { position:absolute; inset:0; z-index:1; width:100% !important; height:100% !important; object-fit:contain; background:transparent; }
.zutem-home .albLegend { position:absolute; right:0; bottom:0; left:0; z-index:2; min-height:0; padding:70px 18px 17px !important; background:linear-gradient(transparent,rgba(4,7,12,.94)) !important; color:#dce4ef !important; }
.zutem-home .albLegend h4 { margin:0 0 5px !important; color:#fff !important; font-size:1rem; }
.zutem-home .albLegend span, .zutem-home .albLegend div { color:#d3d8e0 !important; }
.zutem-card-copy { margin:7px 0 0; color:#aab2c1; font-size:.82rem; line-height:1.4; }
.zutem-home #copyright { grid-column:1 / -1; }

@media (max-width: 900px) {
  .zutem-topbar { gap:12px; padding:0 14px; }
  .zutem-search { order:3; width:100%; margin:8px 0; }
  .zutem-topbar { flex-wrap:wrap; padding-top:10px; padding-bottom:10px; }
  .zutem-actions { margin-left:auto; gap:10px; }
  .zutem-actions > a:first-child span { display:none; }
  .zutem-hero { align-items:flex-start; flex-direction:column; margin:0 -14px 22px; padding:28px 22px; min-height:250px; }
  .zutem-stat-grid { width:100%; min-width:0; }
  .zutem-stat-card { min-height:92px; }
}

@media (max-width: 1150px) {
  .zutem-home .albThumbs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .zutem-home .albThumbs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .zutem-home .albThumbs > li { height:auto !important; aspect-ratio:4 / 3; }
  .zutem-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}