:root{
  --bg:#0a0b10;
  --panel:#111826;
  --panel-2:#172132;
  --text:#e6eefc;
  --muted:#a7b1c3;
  --accent:#4db8ff;
  --ring:rgba(77,184,255,.3);
  --border:#1e2a3b;
}

/* A11y helper for off-screen labels */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  /* GPU-cheap gradient; good contrast */
  background:linear-gradient(180deg,var(--bg) 0%,#0d111a 40%,var(--bg) 100%);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1000px; margin:0 auto; padding:1.5rem}

/* Brand */
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 .5rem; font-size:1.75rem; font-weight:600; letter-spacing:.2px;
}
.brand-icon{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  background:#0d1522; box-shadow:0 2px 10px rgba(0,0,0,.25);
  image-rendering:-webkit-optimize-contrast;
}

.sub{margin:0 0 1rem; color:var(--muted); font-size:.9rem}
.status{margin:.25rem 0 1rem; color:var(--muted); font-size:.85rem}

.controls{display:flex; flex-direction:column; gap:1rem}
.search-wrap{position:relative; max-width:600px}

#search{
  width:100%; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-size:1rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#search:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
#search::placeholder{color:#8fa2bf}

/* Suggestions dropdown */
.suggest{
  position:absolute; z-index:20; top:calc(100% + .5rem); left:0; right:0;
  margin:0; padding:.5rem 0; list-style:none; background:var(--panel);
  border:1px solid var(--border); border-radius:12px; max-height:320px; overflow-y:auto; display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.suggest.show{display:block}
.suggest li{
  padding:.5rem 1rem; cursor:pointer; border-top:1px solid #162238; font-size:.95rem;
}
.suggest li:first-child{border-top:none}
.suggest li:hover,.suggest li.active{background:var(--panel-2)}

/* Filters */
.filters{
  display:grid; grid-template-columns:repeat(4,minmax(160px,1fr));
  gap:.75rem; max-width:900px; margin-top:.25rem;
}
.filter-item{display:grid; gap:.35rem; font-size:.9rem; color:var(--muted)}
.filters select,.filters input{
  padding:.55rem .65rem; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-size:.95rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.filters select:focus,.filters input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.filter-actions{display:flex; align-items:end}
.button.subtle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:10px; border:1px dashed var(--border);
  background:transparent; color:var(--muted); font-size:.9rem; cursor:pointer;
}
.button.subtle:hover{color:var(--text); border-style:solid}

/* Results grid */
.grid{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1rem;
  contain:content; /* isolate layout/paint */
}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border); border-radius:16px; padding:1rem;
  transition:transform .2s, box-shadow .2s;
  content-visibility:auto;                     /* skip off-screen work */
  contain-intrinsic-size:240px 360px;          /* size hint for CV */
  will-change:transform;                       /* smooth hover */
}
.card:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2)}
.row{display:grid; grid-template-columns:64px 1fr; gap:.75rem; align-items:start}

.avatar{
  width:64px; height:64px; border-radius:50%; border:1px solid #283a58;
  object-fit:cover; background:#0d1522;
}
.avatar.fallback{display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:500}

h3{margin:0 0 .25rem; font-size:1.1rem; font-weight:600}
.creator{color:var(--muted); font-size:.9rem; margin:0 0 .5rem}

.meta{display:flex; flex-wrap:wrap; gap:.5rem; margin:.25rem 0 .75rem}
.badge,.chip{
  display:inline-flex; align-items:center; padding:.25rem .75rem; border-radius:999px;
  font-size:.8rem; background:#243248; color:#cfe7ff; border:1px solid #2b3c57;
}

.desc{
  margin:.5rem 0; color:var(--muted); font-size:.9rem; min-height:2.4em; line-height:1.3;
}
.tags,.versions{display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0}

.links{display:flex; gap:.75rem; margin-top:.75rem}
a.button{
  display:inline-flex; padding:.5rem 1rem; border-radius:10px; background:#243248; border:1px solid #2e415f;
  color:var(--text); text-decoration:none; font-size:.9rem; transition:border-color .2s, color .2s;
}
a.button:hover{border-color:var(--accent); color:var(--accent)}

.small{font-size:.85rem; color:var(--muted)}
mark{background:transparent; color:var(--accent); font-weight:600; text-decoration:underline dotted; text-underline-offset:2px}

.empty{margin:2rem 0; color:var(--muted); text-align:center; font-size:1rem}

/* Footer */
.foot{margin-top:2rem; color:var(--muted); text-align:center; font-size:.9rem}
.foot-link{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.foot-link:hover,.foot-link:focus{filter:brightness(1.15); outline:none}

/* Motion reduction */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
}

/* Responsive */
@media (max-width:900px){ .filters{grid-template-columns:1fr 1fr} }
@media (max-width:600px){
  .wrap{padding:1rem}
  .grid{grid-template-columns:1fr}
  .brand{font-size:1.5rem}
  .brand-icon{width:30px; height:30px}
}