:root{
  --bg:#0b0f12;
  --layer:#0f1318;
  --card:#11181f;
  --ink:#e8f4ff;
  --muted:#90a4b2;
  --accent:#26f39a;
  --accent2:#00a3ff;
  --good:#5af78e;
  --ring:0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
  --bad:#ff5370;
  --warn:#ffd166;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 70% -10%, #102233 0%, var(--bg) 60%);
  color:var(--ink);
}

.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.25;
  background-image: linear-gradient(transparent 24px, rgba(38,243,154,.08) 25px),
                    linear-gradient(90deg, transparent 24px, rgba(38,243,154,.08) 25px);
  background-size:25px 25px;
  mask-image: radial-gradient(900px 600px at 50% 15%, #000 30%, transparent 100%);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:linear-gradient(180deg, rgba(15,19,24,.95), rgba(15,19,24,.7));
  backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:12px}
.dot{width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #afffd6, var(--accent)); box-shadow:0 0 12px var(--accent)}
.titles h1{margin:0; font-size:1.3rem}
.sub{margin:0; color:var(--muted); font-size:.9rem}
.actions{display:flex; gap:10px; align-items:center}

.wrap{max-width:1080px; margin:24px auto; padding:0 16px}

.featured{
  display:grid; grid-template-columns:1.4fr .6fr; gap:14px; align-items:stretch;
  margin-bottom:18px;
}
.featured .tile{
  background:linear-gradient(180deg, rgba(17,24,31,1), rgba(17,24,31,.6));
  border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.featured .title{margin:0 0 6px 0}
.featured .desc{margin:8px 0 12px 0; color:var(--muted)}
.featured .pills{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.pill{display:inline-flex; align-items:center; gap:6px; font-weight:700;
  font-size:.83rem; padding:6px 10px; border-radius:999px; color:#0f1419;
  background:linear-gradient(180deg, #b7ffe0, #69ffc1);
}
.pill.alt{background:linear-gradient(180deg, #c6e9ff,#90d1ff)}
.pill.warn{background:linear-gradient(180deg, #ffeab8,#ffd166); color:#241e00}
.featured .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.controls{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 14px 0 10px 0;
}
.search{flex:1; min-width:240px}
.search input{
  width:100%; background:var(--card); color:var(--ink);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px 12px;
}
.filters{display:flex; gap:10px; flex-wrap:wrap}
.select{display:flex; gap:8px; align-items:center; color:var(--muted)}
select{background:var(--card); color:var(--ink); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:8px 10px}

.grid{
  display:grid; gap:12px; grid-template-columns: repeat(3, 1fr);
}
@media (max-width:960px){ .grid{grid-template-columns: repeat(2, 1fr)} .featured{grid-template-columns:1fr} }
@media (max-width:620px){ .grid{grid-template-columns: 1fr} }

.card{
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(180deg, rgba(16,22,29,1), rgba(16,22,29,.6));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; gap:10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.card-head{display:flex; justify-content:space-between; align-items:center}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{font-size:.72rem; color:#0f1419; font-weight:800; padding:4px 8px; border-radius:999px;
  background:linear-gradient(180deg,#e3f3ff,#bfe5ff)}
.fav{background:transparent; color:#ffd166; border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:4px 8px; cursor:pointer}
.fav[aria-pressed="true"]{box-shadow: inset 0 0 0 2px #ffd166}

.title{margin:0; font-size:1.1rem}
.desc{margin:0; color:var(--muted)}

.meta{display:flex; gap:8px; flex-wrap:wrap}
.pill-diff{}
.pill-cat{}

.progress{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.progress-item{background:#0f1419; border:1px solid rgba(255,255,255,.06); padding:4px 8px; border-radius:8px}

.card-actions{display:flex; gap:10px; margin-top:4px}
.btn{
  background:#151b22; color:var(--ink); border:1px solid rgba(255,255,255,.12);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{border-color: rgba(255,255,255,.3)}
.btn.primary{background:linear-gradient(180deg, #1a2330, #121a23); border-color: rgba(38,243,154,.5)}
.btn.ghost{background:transparent}

.empty{
  margin:16px 0; padding:18px; text-align:center;
  background:linear-gradient(180deg, rgba(17,24,31,1), rgba(17,24,31,.6));
  border:1px solid rgba(255,255,255,.08); border-radius:16px;
}
.hidden{display:none}

.cta{
  margin:28px 0 40px 0; text-align:center;
  color:var(--muted);
}

/* subtle pulse */
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(38,243,154,.5)} 70%{box-shadow:0 0 0 12px rgba(38,243,154,0)} 100%{box-shadow:0 0 0 0 rgba(38,243,154,0)} }
.pulse{animation:pulse .8s ease}

/* utility */
.btn.warn{border-color:#ffd166}