:root{
  --bg: #16181c;
  --panel: #1e2126;
  --line: #2b2f36;
  --text: #e8e9eb;
  --text-dim: #8b9099;
  --accent: #ff8a3d;
  --missing-bg: #2a1f18;
  --missing-border: #7a4a24;
  --broken-bg: #2a2410;
  --broken-border: #7a6a1f;
  --broken-accent: #e8c547;
  --focus: #6db3ff;
  --focus-glow: rgba(109,179,255,0.25);
  --hover-border: #3a3f47;
  --thumb-bg: #101215;
  --available-border: #3f7a4f;
  --available-accent: #7fce93;
  --bg-translucent: rgba(22,24,28,0.92);
  --radius: 6px;
  --gap: 14px;
}

/* Light theme: not a naive inversion — panel/line/text-dim values chosen
   for real contrast rather than mirrored hex values, since a straight
   invert of a dark palette usually looks washed out. Missing/broken accent
   colors are darkened slightly from their dark-theme counterparts so they
   stay readable against light backgrounds instead of looking pale. */
[data-theme="light"]{
  --bg: #f5f4f2;
  --panel: #ffffff;
  --line: #ddd9d4;
  --text: #211e1a;
  --text-dim: #6b655c;
  --accent: #c15a1a;
  --missing-bg: #fbeee0;
  --missing-border: #d9a066;
  --broken-bg: #fbf3d9;
  --broken-border: #c9a83a;
  --broken-accent: #8a6d0f;
  --focus: #1c6fd6;
  --focus-glow: rgba(28,111,214,0.18);
  --hover-border: #b8b2a8;
  --thumb-bg: #eae7e2;
  --available-border: #4c9a63;
  --available-accent: #2e7d46;
  --bg-translucent: rgba(245,244,242,0.92);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family: "Inter", "Segoe UI", -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family: "SF Mono","Consolas","Roboto Mono", monospace; }

header{
  position:sticky; top:0; z-index:20;
  background:var(--bg-translucent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  padding: 10px 14px;
  transition: transform 0.25s ease;
}
header.hide-on-scroll{ transform: translateY(-100%); }

.header-top{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
header h1{
  font-size:15px; font-weight:600; letter-spacing:0.02em;
  margin:0; text-transform:uppercase; color:var(--text);
}
header .stat{
  font-size:12px; color:var(--text-dim);
  padding: 3px 9px; border:1px solid var(--line); border-radius: 999px;
}
header .stat.has-missing{ color: var(--accent); border-color: var(--missing-border); }

/* Mobile-first controls: filters group and actions group stack as
   visually distinct blocks, separated so an action (has side effects,
   can fail, shows a loading state) doesn't read like a filter. */
.controls{
  display:flex; flex-direction:column; gap:12px;
}
.filters{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.actions{
  display:flex; gap:8px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.search-wrap{
  grid-column: 1 / -1;
  position:relative;
}
input[type="search"]{
  width:100%;
  background: var(--panel); border:1px solid var(--line); color:var(--text);
  padding:11px 40px 11px 14px; border-radius: var(--radius); font-size:15px;
  min-height:44px;
  outline:none;
}
input[type="search"]:focus{ border-color: var(--focus); box-shadow:0 0 0 2px var(--focus-glow); }
/* hide native browser clear-X so it doesn't double up with ours */
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.search-clear{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:15px; border-radius:999px;
}
.search-clear[hidden]{ display:none; }
.search-clear:hover{ color:var(--text); background:var(--line); }
.search-clear:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }

select, .toggle-btn{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:11px 12px; border-radius: var(--radius); font-size:14px; cursor:pointer;
  min-height:44px;
}
.actions .toggle-btn{ flex:1; }
.icon-btn{
  flex:none !important;
  display:flex; align-items:center; justify-content:center;
  width:44px; padding:0 !important;
}
.toggle-btn[aria-pressed="true"]{ border-color: var(--accent); color: var(--accent); }
.toggle-btn:disabled{ opacity:0.55; cursor:default; }
.toggle-btn:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* three-way status cycle: neutral (all) / green-ish (available) / accent (missing) */
#statusToggle[data-state="available"]{ border-color:var(--available-border); color:var(--available-accent); }
#statusToggle[data-state="missing"]{ border-color: var(--missing-border); color: var(--accent); }

/* Desktop: collapse back to a single tidy row, compact control sizing. */
@media (min-width: 720px){
  header{ padding: 14px 20px; display:flex; align-items:center; gap:14px; }
  .header-top{ margin-bottom:0; flex-wrap:nowrap; }
  .controls{
    flex-direction:row; align-items:center; gap:10px; margin-left:auto;
  }
  .filters{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .actions{
    padding-top:0; border-top:none;
    padding-left:10px; border-left:1px solid var(--line);
  }
  .actions .toggle-btn{ flex:none; }
  .icon-btn{ width:32px; height:32px; }
  .search-wrap{ width:200px; }
  input[type="search"]{ padding:7px 34px 7px 12px; font-size:13px; min-height:0; }
  .search-clear{ width:28px; height:28px; }
  select, .toggle-btn{ padding:7px 10px; font-size:13px; min-height:0; }
}

main{ padding: 20px; max-width:1600px; margin:0 auto; }

.series-block{ margin-bottom: 36px; }
.series-head{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.series-head h2{ font-size:16px; margin:0; font-weight:600; }
.series-head .count{ font-size:12px; color:var(--text-dim); }
.series-head .missing-flag{ font-size:12px; color:var(--accent); }

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--gap);
}
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.card:hover{ border-color:var(--hover-border); transform: translateY(-2px); }
.card:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.thumb{
  aspect-ratio: 1/1;
  background: var(--thumb-bg);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.thumb img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.card.missing .thumb{ background: var(--missing-bg); }
.card.missing{ border-color: var(--missing-border); }
.card.broken .thumb{ background: var(--broken-bg); }
.card.broken{ border-color: var(--broken-border); }
.placeholder-icon{
  width:38%; height:38%; color: var(--missing-border);
}
.broken-icon{ color: var(--broken-border); }

.card-label{
  padding: 8px 10px;
  font-size:12px;
  display:flex; justify-content:space-between; align-items:center; gap:6px;
}
.card-label .sku{ color:var(--text); }
.card.missing .card-label .sku{ color: var(--accent); }
.card.broken .card-label .sku{ color: var(--broken-accent); }
.missing-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--accent); white-space:nowrap;
}
.broken-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--broken-accent); white-space:nowrap;
}

.empty-state{
  color:var(--text-dim); font-size:13px; padding:40px 0; text-align:center;
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(10,11,13,0.92);
  display:none; flex-direction:column; z-index:100;
}
.lightbox.open{ display:flex; }
.lightbox-bar{
  display:flex; justify-content:flex-end;
  padding: 10px 14px;
  flex-shrink:0;
}
.lightbox-body{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding: 0 20px 20px;
}
.lightbox img{ max-width:min(92vw, 800px); max-height:100%; border-radius:4px; }
.lightbox-meta{
  flex-shrink:0; text-align:center;
  font-size:13px; color: var(--text-dim);
  padding: 4px 14px 18px;
}
.lightbox-close{
  background:none; border:1px solid var(--line); color:var(--text);
  width:44px; height:44px; border-radius: 999px; cursor:pointer; font-size:16px;
  flex-shrink:0;
}
.lightbox-close:hover{ border-color:#3a3f47; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

/* first-load skeleton, shown until manifest.json resolves */
@keyframes skeleton-shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.skeleton-head, .skeleton-card{
  background: linear-gradient(90deg, var(--panel) 25%, var(--line) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}
.skeleton-head{
  width: 160px; height: 20px; margin-bottom: 14px;
}
.skeleton-card{
  aspect-ratio: 1/1;
  border: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .skeleton-head, .skeleton-card{ animation:none; }
}