:root{
  --bg:#0b0f14; --card:#101826; --text:#e8eef7; --muted:#9fb0c3;
  --line:#1d2a3b; --accent:#7dd3fc; --accent2:#a78bfa; --btn:#142033;
}
:root.light{
  --bg:#f6f8fb; --card:#ffffff; --text:#0c1220; --muted:#53657c;
  --line:#e6ebf2; --accent:#0284c7; --accent2:#7c3aed; --btn:#f0f4fa;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:22px 16px}
h1{margin:0 0 6px 0;font-size:28px}
.muted{color:var(--muted);margin:0}
.small{font-size:12px}
.top{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.controls{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.input{
  flex:1; min-width:240px; padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);outline:none;
}
.input:focus{border-color:var(--accent)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  border:1px solid var(--line); background:transparent; color:var(--text);
  padding:8px 10px; border-radius:999px; cursor:pointer; font-size:13px;
}
.tag.active{border-color:var(--accent); box-shadow:0 0 0 3px rgba(125,211,252,.15)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.card{
  border:1px solid var(--line); background:var(--card); border-radius:16px;
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.card h3{margin:0;font-size:16px}
.meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.btn{
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--btn); color:var(--text); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#071019}
.btn.ghost{background:transparent}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:12px; padding:10px; border-radius:12px;
  border:1px dashed var(--line); background:rgba(255,255,255,.03);
  color:var(--text); overflow:auto;
}
.footer-card{
  margin-top:18px; padding:16px; border-radius:16px;
  border:1px solid var(--line); background:var(--card);
}
a{color:inherit}