/* SELFHOST.OS — blueprint/terminal theme (default) */
:root{
  --bg:#070b14; --panel:#0d1422; --panel2:#111c30; --line:#1d2c44;
  --ink:#dce6f5; --muted:#7d90b0; --cyan:#2de2e6; --pink:#ff2e88;
  --green:#39d98a; --amber:#ffb454; --purple:#b14aed;
  --font: "Inter",system-ui,Segoe UI,Roboto,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45,226,230,.08), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(255,46,136,.07), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--font); min-height:100vh;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(45,226,230,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(45,226,230,.06) 1px,transparent 1px);
  background-size:42px 42px; mask:radial-gradient(circle at 50% 30%,#000,transparent 85%);
}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:34px 20px 80px;}
.brand{font-family:var(--mono); font-weight:800; letter-spacing:2px;}
.brand .os{color:var(--cyan); text-shadow:0 0 18px rgba(45,226,230,.5);}
.brand .dot{color:var(--pink);}
h1{font-size:clamp(26px,4.4vw,44px); margin:0; line-height:1; filter:drop-shadow(0 0 22px rgba(45,226,230,.25)); letter-spacing:-.5px; font-weight:700;}
.tagline{color:var(--muted); margin:8px 0 0; font-size:14px; max-width:560px; line-height:1.6;}
.stats{font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right;}
.stats b{color:var(--green)}
.controls{position:sticky; top:0; z-index:5; margin:26px 0 22px; padding:14px;
  background:rgba(7,11,20,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
#q{flex:1; min-width:220px; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:11px 14px; border-radius:10px; font-size:14px; font-family:var(--mono);}
#q:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(45,226,230,.15);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-family:var(--mono); font-size:11px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); cursor:pointer; user-select:none; transition:.15s; background:var(--panel);}
.chip:hover{color:var(--ink); border-color:var(--cyan)}
.chip.on{color:#04101a; background:var(--cyan); border-color:var(--cyan); font-weight:700; box-shadow:0 0 14px rgba(45,226,230,.4);}
.cat{margin:34px 0 10px; display:flex; align-items:center; gap:12px;}
.cat h2{font-family:var(--mono); font-size:15px; letter-spacing:1px; color:var(--cyan);
  margin:0; text-transform:uppercase;}
.cat .ln{flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent);}
.cat .cnt{font-family:var(--mono); font-size:11px; color:var(--muted);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:14px;}
.card{background:linear-gradient(160deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:15px 16px; position:relative; overflow:hidden; transition:.16s;}
.card:hover{transform:translateY(-3px); border-color:rgba(45,226,230,.5);
  box-shadow:0 14px 36px rgba(0,0,0,.5), 0 0 22px rgba(45,226,230,.12);}
.card h3{margin:0 0 6px; font-size:15px; font-family:var(--mono);}
.card h3 a{color:var(--ink); text-decoration:none;}
.card h3 a:hover{color:var(--cyan);}
.card .desc{color:var(--muted); font-size:12.5px; line-height:1.55; margin:0 0 11px; min-height:34px;}
.card .meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.tag{font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:6px; border:1px solid var(--line); color:var(--colors,muted);}
.tag{color:var(--muted);}
.tag.lic{color:var(--green); border-color:rgba(57,217,138,.3)}
.tag.src a{color:var(--purple); text-decoration:none; border-color:rgba(177,74,237,.35)}
.tag.src a:hover{color:#fff}
.empty{color:var(--muted); text-align:center; padding:60px 0; font-family:var(--mono);}
footer{margin-top:60px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:12px;}
footer a{color:var(--cyan); text-decoration:none}
@media(max-width:560px){.stats{text-align:left}}
/* theme switcher */
.themes{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:18px 0 4px;}
.themes-label{font-family:var(--mono,monospace); font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.theme-btn{font-family:var(--mono,monospace); font-size:11px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); cursor:pointer; background:transparent; transition:.15s; letter-spacing:1px;}
.theme-btn:hover{color:var(--ink); border-color:var(--cyan);}
.theme-btn.on{color:#fff; background:var(--cyan); border-color:var(--cyan); font-weight:700;}