/* shared look for the home page and all the category pages */
:root {
  --bg:#0b0e1a; --panel:#131830; --accent:#6df1ff; --hot:#ff5d6c;
  --ink:#f5f7ff; --muted:#8b93b8; --line:#1f2547; --card:#0e122a; --edge:#2a3160;
}
* { box-sizing:border-box; }
body { margin:0; font-family:ui-monospace,"SF Mono",Menlo,monospace; background:var(--bg); color:var(--ink); overflow-x:hidden; }

header { padding:26px 24px 14px; text-align:center; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0b0e1a 0%,#11163a 100%); }
header h1 { margin:0; font-size:34px; letter-spacing:2px; color:var(--accent); text-shadow:0 0 12px rgba(109,241,255,.4); }
header h1 a { color:inherit; text-decoration:none; }
header p { margin:6px 0 0; color:var(--muted); font-size:14px; }

nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 16px;
  background:#0d1126; border-bottom:1px solid var(--line); }
nav a { color:var(--ink); text-decoration:none; padding:7px 14px; border:1px solid var(--edge);
  border-radius:7px; font-size:13px; transition:all .15s; }
nav a:hover { border-color:var(--accent); color:var(--accent); box-shadow:0 0 8px rgba(109,241,255,.3); }
nav a.here { background:var(--accent); color:#04121a; border-color:var(--accent); font-weight:bold; }

main { max-width:1100px; margin:0 auto; padding:22px; display:grid; gap:26px; }
section { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
h2 { margin:0 0 12px; font-size:20px; color:var(--accent); }

/* ---- search ---- */
.searchwrap { max-width:1100px; margin:18px auto 0; padding:0 22px; }
.searchbox { position:relative; }
.searchbox input { width:100%; background:#0e122a; border:1px solid var(--edge); border-radius:12px;
  color:var(--ink); font-family:inherit; font-size:15px; padding:14px 16px 14px 44px; outline:none; }
.searchbox input:focus { border-color:var(--accent); box-shadow:0 0 12px rgba(109,241,255,.2); }
.searchbox .mag { position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.7; }
.searchbox .clr { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent;
  border:0; color:var(--muted); font-family:inherit; font-size:16px; cursor:pointer; display:none; }
.searchhint { font-size:11px; color:var(--muted); margin-top:7px; text-align:center; }

/* ---- cards ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.card2 { background:var(--card); border:1px solid var(--edge); border-radius:10px; padding:18px 14px;
  text-align:center; text-decoration:none; color:var(--ink); transition:all .15s; display:block; }
.card2:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 16px rgba(109,241,255,.2); }
.card2 .ic { font-size:38px; line-height:1; margin-bottom:8px; }
.card2 .ti { font-size:14px; font-weight:bold; color:var(--accent); margin-bottom:4px; }
.card2 .de { font-size:12px; color:var(--muted); line-height:1.45; }
.card2 .tag { display:inline-block; margin-top:7px; font-size:9px; letter-spacing:1px; color:var(--muted);
  border:1px solid var(--edge); border-radius:10px; padding:2px 8px; }

/* big category tiles on the home page */
.cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.cat { background:var(--card); border:1px solid var(--edge); border-radius:14px; padding:24px 18px;
  text-decoration:none; color:var(--ink); transition:all .18s; display:block; text-align:center; }
.cat:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 6px 22px rgba(109,241,255,.22); }
.cat .ce { font-size:46px; line-height:1; margin-bottom:10px; }
.cat .ct { font-size:17px; font-weight:bold; color:var(--accent); }
.cat .cd { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.cat .cn { display:inline-block; margin-top:10px; font-size:10px; color:#0b0e1a; background:var(--accent);
  border-radius:10px; padding:3px 10px; font-weight:bold; }

/* ---- ⭐ favorites ---- */
.cardwrap { position:relative; }
.fav { position:absolute; top:7px; right:8px; z-index:3; background:transparent; border:0; cursor:pointer;
  font-size:17px; line-height:1; color:#4a5170; padding:3px; border-radius:6px; transition:.15s; font-family:inherit; }
.fav:hover { color:#ffd75e; transform:scale(1.2); background:rgba(255,215,94,.10); }
.fav.on { color:#ffd75e; }
.favempty { font-size:12px; color:var(--muted); line-height:1.7; }

.secret-hidden { display:none; }
body.secret-unlocked .secret-hidden { display:block; }

.empty2 { text-align:center; color:var(--muted); font-size:13px; padding:26px; line-height:1.7; }

footer { text-align:center; padding:24px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); margin-top:20px; }
footer a { color:var(--accent); text-decoration:none; }