:root{
  --bg:#0d0e12; --bg2:#14161c; --card:#171922; --line:#262936;
  --ink:#eef0f6; --mut:#9aa0b4; --mut2:#6b7185;
  --acc:#ff6a3d; --acc2:#ffd23f; --ok:#43d6a3;
  --r:14px; --maxw:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* header */
.site{border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg2),var(--bg)); position:sticky; top:0; z-index:20; backdrop-filter:blur(8px)}
.site .wrap{display:flex; align-items:baseline; justify-content:space-between; padding:16px 22px; gap:16px}
.brand{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.mark{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:26px; letter-spacing:-.01em}
.mark::after{content:"."; color:var(--acc)}
.tag{color:var(--mut); font-size:14px}
.statline{color:var(--mut2); font-size:13px; white-space:nowrap}
.statline b{color:var(--ink)}

/* hero / search */
.hero{padding:34px 22px 10px}
.searchbox{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; transition:border-color .15s}
.searchbox:focus-within{border-color:var(--acc)}
.searchbox .ico{width:20px; height:20px; color:var(--mut); flex:none}
.searchbox input{flex:1; background:none; border:0; outline:0; color:var(--ink); font-size:17px}
.searchbox input::placeholder{color:var(--mut2)}
.clear{background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer;line-height:1}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--mut); font-size:13px; font-weight:500; cursor:pointer; transition:.12s}
.chip:hover{color:var(--ink); border-color:var(--mut2)}
.chip.on{background:var(--ink); color:#0d0e12; border-color:var(--ink)}

.filters{display:flex; flex-wrap:wrap; gap:18px; margin-top:18px}
.filters label{font-size:12px; color:var(--mut2); text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:8px}
.filters select{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13px; text-transform:none; letter-spacing:0}

/* results */
.resultbar{display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 14px; color:var(--mut); font-size:14px}
#count b{color:var(--ink)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:12px; transition:.14s; min-height:160px}
.card:hover{border-color:var(--mut2); transform:translateY(-2px)}
.card .top{display:flex; gap:12px; align-items:flex-start}
.logo{width:42px; height:42px; border-radius:10px; flex:none; object-fit:cover; background:var(--bg2); display:grid; place-items:center; font-weight:600; font-size:18px; color:#0d0e12}
.card h3{margin:0; font-size:16px; font-weight:600; line-height:1.3}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--acc2)}
.co{color:var(--mut); font-size:13px; margin-top:2px}
.meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto}
.pill{font-size:11px; padding:3px 9px; border-radius:999px; background:var(--bg2); color:var(--mut); border:1px solid var(--line)}
.pill.cat{color:var(--acc2); border-color:#3a3320}
.pill.reg{color:var(--ok)}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.posted{color:var(--mut2); font-size:12px}
.apply{font-size:13px; font-weight:600; text-decoration:none; color:#0d0e12; background:var(--acc2); padding:7px 13px; border-radius:8px; white-space:nowrap}
.apply:hover{background:#fff}
.src{font-size:11px; color:var(--mut2); text-transform:uppercase; letter-spacing:.05em}

.empty{padding:60px 0; text-align:center; color:var(--mut)}
.more{display:flex; justify-content:center; padding:26px 0 60px}
#more{background:var(--card); border:1px solid var(--line); color:var(--ink); padding:11px 26px; border-radius:10px; font-size:14px; cursor:pointer}
#more:hover{border-color:var(--acc)}

.site-foot{border-top:1px solid var(--line); padding:26px 0; color:var(--mut); font-size:13px}
.site-foot a{color:var(--mut)}
.site-foot a:hover{color:var(--acc2)}
.muted{color:var(--mut2)}

@media(max-width:560px){
  .site .wrap{flex-direction:column; gap:4px}
  .statline{white-space:normal}
  .grid{grid-template-columns:1fr}
}