:root{
  --bg:#0a0a0a;
  --panel:#12121a;
  --card:#171a22;
  --ink:#ffffff;
  --muted:#ffffff;
  --stroke:#ffffff33;
  --accent:var(--nh48-accent, #22c55e);
  --accent-strong:var(--nh48-accent, #22c55e);
  --gap:10px;
}
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Navigation Menu */
.top-nav{
  background:var(--panel);
  border-bottom:1px solid var(--stroke);
  padding:12px 0;
  margin-bottom:16px;
}
.nav-container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.nav-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.nav-brand img{
  height:40px;
  width:auto;
}
.page-breadcrumbs{
  margin:0 0 12px;
  padding:0;
  color:var(--muted);
  font-size:.95rem;
}
.page-breadcrumbs ol{
  display:flex;
  gap:8px;
  padding:0;
  margin:0;
  list-style:none;
}
.page-breadcrumbs li+li::before{
  content:"/";
  color:var(--muted);
  margin-right:6px;
}
.page-breadcrumbs a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.page-breadcrumbs a:hover,
.page-breadcrumbs a:focus-visible{
  text-decoration:underline;
}
.range-jump{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:var(--panel);
}
.range-jump__label{
  font-weight:700;
  color:var(--muted);
}
.range-jump__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  list-style:none;
  margin:0;
  padding:0;
}
.range-jump__list a{
  color:var(--accent);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:600;
}
.range-jump__list a:hover,
.range-jump__list a:focus-visible{
  text-decoration:underline;
}
.nav-links{
  display:flex;
  gap:24px;
  align-items:center;
}
.nav-links a{
  color:var(--ink);
  text-decoration:none;
  font-size:0.95rem;
  transition:color 0.2s ease;
  white-space:nowrap;
}
.nav-links a:hover{
  color:var(--accent);
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:var(--ink);
  font-size:1.5rem;
  cursor:pointer;
  padding:4px;
}
@media(max-width:640px){
  .top-nav{ padding:10px 0; margin-bottom:12px; }
  .nav-container{ padding:0 12px; flex-wrap:wrap; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:none;
    width:100%;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--stroke);
    align-items:flex-start;
  }
  .nav-links.active{
    display:flex;
  }
  .nav-brand img{ height:32px; }
}
.wrap{
  /* Responsive width - scales wider on large screens */
  max-width:1130px;
  margin:0 auto;
  padding:16px;
}
/* Scale container wider on large desktop screens */
@media(min-width:1400px){
  .wrap{ max-width:1400px; }
}
@media(min-width:1800px){
  .wrap{ max-width:1600px; }
}
@media(max-width:640px){
  .wrap{ padding:12px; }
}
.breadcrumb-trail{
  margin:0 0 18px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:rgba(18, 18, 26, 0.7);
}
.breadcrumb-trail ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  align-items:center;
}
.breadcrumb-trail li+li::before{
  content:"/";
  margin-right:6px;
  color:var(--muted);
}
.breadcrumb-trail a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.breadcrumb-trail a:hover,
.breadcrumb-trail a:focus-visible{
  text-decoration:underline;
}

/* ===== NEW CATALOG CONTROLS PANEL ===== */
.catalog-controls-panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
}
.catalog-hero{
  margin-bottom:18px;
}
.catalog-hero h1{
  margin:0 0 6px;
  font-size:clamp(26px,4vw,34px);
  line-height:1.15;
}
.catalog-hero p{
  margin:0;
  color:var(--muted);
  max-width:72ch;
}
@media(max-width:640px){
  .breadcrumb-trail{ margin-bottom:16px; }
  .catalog-controls-panel{ padding:16px; }
  .catalog-hero h1{ font-size:clamp(22px,6vw,26px); }
  .catalog-hero p{ font-size:0.95rem; }
}

/* Search Row */
.search-row{
  margin-bottom:14px;
}
.search-wrapper{
  position:relative;
  display:flex;
  align-items:center;
}
.search-icon{
  position:absolute;
  left:14px;
  color:var(--muted);
  pointer-events:none;
}
.search-wrapper input{
  width:100%;
  height:44px;
  padding:0 14px 0 44px;
  font-size:16px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  outline:none;
  box-sizing:border-box;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-wrapper input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34, 197, 94, 0.15);
}
.search-wrapper input::placeholder{
  color:var(--muted);
}

/* Filters Row */
.filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.filter-group{
  display:flex;
  align-items:center;
  gap:6px;
}
.filter-group label{
  font-size:0.8rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:500;
}
.filter-group select{
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--stroke);
  border-radius:7px;
  min-height:36px;
  padding:6px 30px 6px 10px;
  font-size:0.88rem;
  line-height:1.2;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px;
  transition:border-color 0.2s ease;
}
.filter-group select:hover,
.filter-group select:focus{
  border-color:var(--accent);
  outline:none;
}
.filter-group input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--accent);
  cursor:pointer;
}
.lang-control{
  margin-left:auto;
}
.submit-edit-btn{
  display:inline-flex;
  align-items:center;
  margin-left:auto;
  padding:8px 16px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  transition:background 0.2s ease, transform 0.1s ease;
}
.submit-edit-btn:hover{
  background:var(--nh48-accent-dark, #166534);
  transform:translateY(-1px);
}

/* Range Jump Bar */
.range-jump-bar{
  display:none;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--stroke);
}
.range-jump-bar.visible{
  display:flex;
}
.jump-label{
  font-size:0.85rem;
  color:var(--muted);
  font-weight:500;
  white-space:nowrap;
}
.jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
}
.jump-links a{
  font-size:0.85rem;
  color:var(--accent);
  text-decoration:none;
  transition:color 0.15s ease;
}
.jump-links a:hover{
  color:var(--accent-strong);
  text-decoration:underline;
}

@media(max-width:900px){
  .filters-row{
    flex-direction:column;
    align-items:stretch;
  }
  .filter-group{
    justify-content:space-between;
  }
  .filter-group select{
    flex:1;
    min-width:0;
  }
  .submit-edit-btn{
    width:100%;
    justify-content:center;
  }
  .range-jump-bar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Range Sections */
.range-section{
  margin-bottom:32px;
  scroll-margin-top:100px; /* Account for nav bar height */
}
.range-section:last-child{
  margin-bottom:0;
}
.range-heading{
  font-size:1.3rem;
  font-weight:600;
  color:var(--accent);
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--accent);
  scroll-margin-top:100px; /* Account for nav bar height */
}
.range-count{
  font-size:0.9rem;
  font-weight:400;
  color:var(--muted);
}
.range-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.range-grid[data-columns="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.range-grid[data-columns="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.range-grid[data-columns="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.range-grid[data-columns="5"]{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:1400px){
  .range-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px){
  .range-grid{ grid-template-columns:1fr; }
}

/* Legacy styles for backwards compatibility */
.search{
  margin-bottom:12px;
}
.search input{
  width:100%;
  height:40px;
  padding:0 14px;
  font-size:16px;
  border:1px solid #ffffff;
  border-radius:10px;
  background:var(--card);
  color:var(--ink);
  outline:none;
  box-sizing:border-box;
}
/* Make datalist dropdown full width */
.search input::-webkit-calendar-picker-indicator {
  display: none;
}
input[list]::-webkit-list-button {
  display: none;
}
@media(max-width:640px){
  .search{ margin-bottom:12px; }
  .search input{ height:36px; font-size:14px; padding:0 10px; }
}

/* Column selector (desktop only) - now inside controls */
.column-selector-control{
  display:flex;
  align-items:center;
  gap:8px;
}
@media(max-width:900px){
  .column-selector-control{ display:none; }
}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
  align-items:center;
}
.submit-edit-control{
  margin-left:auto;
}
.submit-edit-link{
  display:inline-block;
  padding:8px 16px;
  border-radius:10px;
  background:var(--accent);
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
  transition:background 0.2s ease, transform 0.2s ease;
}
.submit-edit-link:hover,
.submit-edit-link:focus-visible{
  background:var(--nh48-accent-dark, #166534);
  transform:translateY(-1px);
}
@media(max-width:640px){
  .submit-edit-control{
    width:100%;
    margin-left:0;
  }
  .submit-edit-link{
    width:100%;
    text-align:center;
  }
}
.controls .control.is-disabled{
  opacity:0.65;
}
.controls label{
  font-size:0.85rem;
  color:#ffffff;
  margin-right:4px;
}
.controls select{
  background:var(--card);
  color:var(--ink);
  border:1px solid #ffffff;
  border-radius:10px;
  padding:6px 10px;
  font-size:0.9rem;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
}
.controls input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.loading-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--accent);
  font-weight:600;
  padding:24px 0;
}
.loading-indicator[hidden]{
  display:none;
}
.loading-spinner{
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid rgba(34, 197, 94, 0.25);
  border-top-color:var(--accent);
  animation:spin 0.9s linear infinite;
}
.loading-text{
  font-size:0.9rem;
  color:var(--muted);
}
.nh48-lang{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.nh48-lang-menu{
  position:relative;
}
.nh48-lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:3px 8px;
  border-radius:9px;
  border:1px solid #ffffff;
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.45px;
}
.nh48-lang-toggle .flag{
  font-size:16px;
}
.nh48-lang-toggle-text{
  white-space:nowrap;
}
.nh48-lang-caret{
  font-size:0.58rem;
  margin-left:2px;
  opacity:0.8;
}
.nh48-lang-options{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:var(--card);
  border:1px solid #ffffff;
  border-radius:12px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  min-width:220px;
  box-shadow:0 12px 28px rgba(15, 23, 42, 0.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.15s ease, transform 0.15s ease;
  z-index:4;
}
.nh48-lang-menu.open .nh48-lang-options{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.nh48-lang-label{
  font-size:0.75rem;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin-right:4px;
}
.nh48-flag{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid #ffffff;
  background:var(--card);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.nh48-flag .flag{
  font-size:18px;
  line-height:1;
}
.nh48-flag.active{
  border-color:var(--nh48-accent, #22c55e);
  box-shadow:0 0 0 2px rgba(34, 197, 94, 0.25);
}
.nh48-flag:focus-visible{
  outline:2px solid var(--nh48-accent, #22c55e);
  outline-offset:2px;
}
@media(max-width:640px){
  /* Improve mobile layout for controls */
  .controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Each control takes full width and spaces label & input */
  .controls .control {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  /* Make selects grow to fill remaining space */
  .controls .control select {
    width: 100%;
    min-width: 0;
    padding:4px 8px;
    font-size:0.8rem;
  }

  /* Adjust language picker to stretch like other controls */
  .controls .control.nh48-lang-control {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Reduce font size slightly for long labels */
  .controls label {
    font-size: 0.75rem;
    margin-right: 4px;
  }

  .nh48-flag{ width:32px; height:32px; }
}

/* GRID: Dynamic columns on desktop, 1 column on mobile */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.grid.range-view{
  display:block;
}
.grid[data-view="list"]{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Dynamic column layouts (desktop only) - responsive to container width */
@media(min-width:901px){
  .grid[data-columns="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid[data-columns="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid[data-columns="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grid[data-columns="5"]{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media(max-width:1400px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Additional column option for very wide screens */
@media(min-width:1600px){
  .grid[data-columns="5"]{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .grid[data-columns="6"]{ grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@media(max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

@media(max-width:900px){
  .range-grid,
  .range-grid[data-columns],
  .range-grid[data-columns="2"],
  .range-grid[data-columns="3"],
  .range-grid[data-columns="4"],
  .range-grid[data-columns="5"],
  .grid,
  .grid[data-columns],
  .grid[data-columns="2"],
  .grid[data-columns="3"],
  .grid[data-columns="4"],
  .grid[data-columns="5"]{
    grid-template-columns:1fr;
  }
}

.card{
  background:var(--card);
  border:2px solid #ffffff;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover,
.card:focus-within{
  transform:translateY(-2px);
  box-shadow:0 8px 20px #0005;
}
.card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
}
.card-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.thumb{
  aspect-ratio:5/3;
  background:var(--panel);
  position:relative;
  overflow:hidden;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Spinner overlay inside catalog thumbnails */
.thumb-loading{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.thumb-loading.hidden{
  display:none;
}
/* Override spinner dimensions and colours for catalog thumbnails */
.thumb-loading .loading-spinner{
  width:25px;
  height:25px;
  border-radius:50%;
  border:3px solid rgba(34, 197, 94, 0.25);
  border-top-color:var(--accent);
  animation:spin 0.9s linear infinite; /* matches the existing spinner animation */
}
.lazy-thumb{
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease;
}
.lazy-thumb.is-visible{
  opacity:1;
  visibility:visible;
}
.body{
  padding:14px;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.body h3{
  margin:0;
  font-size:1.1rem;
}

/* "General info" block inside card */
.card-meta{
  margin-top:2px;
  border-top:1px solid var(--stroke);
  padding-top:6px;
}
.meta-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:4px 0;
  border-bottom:1px dotted var(--stroke);
  font-size:0.85rem;
}
.meta-row:last-child{
  border-bottom:none;
}
.meta-label{
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-size:0.75rem;
  color:var(--muted);
  max-width:45%;
}
.meta-value{
  text-align:right;
  color:var(--ink);
  flex:1 1 auto;
  word-wrap:break-word;
  white-space:normal;
}

.list-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid #ffffff;
  background:var(--card);
  transition:transform .12s ease, box-shadow .12s ease;
}
.list-item:hover,
.list-item:focus-within{
  transform:translateY(-2px);
  box-shadow:0 8px 20px #0005;
}
.list-thumb-link{
  display:block;
  flex:0 0 auto;
}
.list-thumb-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:10px;
}
.list-thumb{
  width:160px;
  height:96px;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel);
  flex:0 0 auto;
  position:relative;
}
.list-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.list-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:1 1 auto;
}
.list-main h3{
  margin:0 0 4px;
  font-size:1.05rem;
}
.list-title-link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.list-meta{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:0.85rem;
}
.list-meta span{
  display:block;
}
.list-label{
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-size:0.72rem;
  color:var(--muted);
}
.list-link{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  border-bottom:1px solid transparent;
}
.list-title-link:hover,
.list-title-link:focus-visible,
.list-link:focus-visible,
.list-link:hover{
  border-bottom-color:var(--ink);
}

@media(max-width:640px){
  .body{ padding:12px; }
  .body h3{ font-size:0.98rem; }
  .meta-row{ font-size:0.8rem; }
  .meta-label{ font-size:0.72rem; }
  .list-item{
    flex-direction:column;
    align-items:flex-start;
  }
  .list-thumb{
    width:100%;
    height:160px;
  }
  .list-content{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }
  .list-link{
    margin-top:4px;
  }
}

.empty{
  padding:40px;
  text-align:center;
  color:var(--muted);
  font-size:1rem;
}

/* Range Jump Links */
.range-jump-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  padding:12px 16px;
  background:var(--panel);
  border-radius:6px;
  margin-bottom:16px;
}
.range-jump-links strong{
  color:var(--muted);
  font-size:0.9rem;
  margin-right:4px;
}
.range-jump-links a{
  color:var(--accent);
  text-decoration:none;
  font-size:0.9rem;
  transition:color 0.2s ease;
}
.range-jump-links a:hover{
  color:var(--accent-strong);
  text-decoration:underline;
}

/* Range Headings and Dividers */
.range-heading{
  grid-column:1 / -1;
  margin:24px 0 16px;
  padding-bottom:8px;
  font-size:1.4rem;
  font-weight:600;
  color:var(--accent);
  border-bottom:2px solid var(--accent);
}
.range-heading:first-child{
  margin-top:0;
}
.range-divider{
  grid-column:1 / -1;
  height:1px;
  border:none;
  background:var(--stroke);
  margin:32px 0;
}