:root{
  --bg:#0a0f0a;
  --panel:#0e1611;
  --ink:#eaffec;
  --muted:#9af3b3cc;
  --neon:#00ff88;
  --cy:#5cffd6;
  --line:rgba(0,255,136,.25);
  --shadow:0 0 .8rem rgba(0,255,136,.35), inset 0 0 .6rem rgba(0,255,136,.15);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background: radial-gradient(1000px 600px at 10% -10%, rgba(0,255,136,.07), transparent),
              radial-gradient(900px 400px at 120% 0, rgba(92,255,214,.06), transparent),
              #071009;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.15px;
}
.scanlines{position:fixed;inset:0;pointer-events:none;mix-blend-mode:screen;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  opacity:.8}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1rem;background:rgba(8,14,10,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:'Share Tech Mono', monospace}
.brand .mark{color:var(--neon);font-weight:800;letter-spacing:.8px}
.brand .sep{opacity:.5}
.nav{display:flex;align-items:center;gap:.6rem}
.btn{
  border:1px solid var(--neon); color:var(--ink); background:transparent;
  padding:.45rem .8rem; border-radius:.7rem; text-decoration:none; cursor:pointer;
  font-family:'Share Tech Mono', monospace; letter-spacing:.5px; box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 1rem rgba(0,255,136,.5), inset 0 0 .7rem rgba(0,255,136,.3)}
.search{
  min-width:240px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:.55rem .8rem; border-radius:.6rem; box-shadow:var(--shadow); outline:none;
}
.search:focus{border-color:var(--neon)}
.wrap{display:grid;grid-template-columns:320px 1fr; gap:1rem; max-width:1280px; margin:1rem auto; padding:0 1rem}
@media (max-width: 980px){ .wrap{ grid-template-columns: 1fr } .aside{ order:2 } .content{ order:1 } }

.aside{position:relative}
.box{
  background:linear-gradient(180deg, rgba(0,255,136,.05), rgba(0,255,136,.02) 40%, rgba(0,255,136,.04));
  border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow);
  padding:1rem; margin-bottom:1rem;
}
.box h3{margin:.2rem 0 .6rem; font-family:'Share Tech Mono', monospace}
.box p{margin:.3rem 0 .3rem; color:var(--muted)}
.categories .cat{display:flex;align-items:center;justify-content:space-between; gap:.8rem; margin:.4rem 0}
.categories .cat .name{font-family:'Share Tech Mono', monospace}
.categories .cat .count{color:var(--muted); font-size:.85rem}
.categories .cat .filter{border:1px dashed var(--line); background:transparent; color:var(--ink); padding:.2rem .5rem; border-radius:.5rem; cursor:pointer}
.categories .cat .filter:hover{border-color:var(--neon)}

.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:1rem}
.card{
  display:flex; flex-direction:column; gap:.6rem;
  background:linear-gradient(180deg, rgba(0,255,136,.04), rgba(0,255,136,.02) 40%, rgba(0,255,136,.04));
  border:1px solid var(--line); border-radius:1rem; box-shadow:var(--shadow);
  padding:1rem; position:relative;
}
.card .head{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.card .badge{font-size:.75rem; padding:.22rem .45rem; border:1px solid var(--cy); color:var(--cy); border-radius:.5rem; font-family:'Share Tech Mono', monospace}
.card .title{margin:.1rem 0 .2rem; font-size:1.2rem}
.card .desc{color:var(--muted); margin:.1rem 0 .4rem}
.tools{display:flex; flex-direction:column; gap:.45rem}
.tool{
  display:flex; gap:.6rem; align-items:flex-start; padding:.5rem; border:1px dashed rgba(0,255,136,.18); border-radius:.6rem;
}
.tool .name{font-weight:600}
.tool .meta{color:var(--muted); font-size:.9rem}
.tool .actions{margin-left:auto; display:flex; gap:.4rem}
.link{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--neon); color:var(--ink); text-decoration:none; background:transparent;
  padding:.28rem .5rem; border-radius:.5rem; font-family:'Share Tech Mono', monospace;
}
.link.gh{border-color:#8be9fd}
.link.site{border-color:var(--neon)}
.link:hover{box-shadow:0 0 .6rem rgba(0,255,136,.45) inset, 0 0 .6rem rgba(0,255,136,.25)}

.foot{padding:1.2rem; text-align:center; color:var(--muted)}