*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f0f10;
  --surface:#1a1a1d;
  --border:#2a2a2e;
  --text:#e4e4e7;
  --text-dim:#8b8b8e;
  --accent:#6366f1;
  --green:#22c55e;
  --yellow:#eab308;
  --red:#ef4444;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;
  min-height:100vh;
}

header{
  position:sticky;top:0;z-index:10;
  background:rgba(15,15,16,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:16px 24px;
}

.header-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}

.logo{
  font-size:24px;font-weight:800;color:var(--text);
}
.logo span{color:var(--accent)}

.tagline{
  font-size:13px;color:var(--text-dim);margin-top:2px;
}

.updated{font-size:13px;color:var(--text-dim)}

.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.filter-group{display:flex;flex-wrap:wrap;gap:6px}

.filter-btn,.pill{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-dim);
  padding:5px 12px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  transition:all .15s;
}
.filter-btn:hover,.pill:hover{color:var(--text);border-color:var(--accent)}
.filter-btn.active,.pill.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

main{
  max-width:860px;
  margin:24px auto;
  padding:0 16px;
  display:flex;flex-direction:column;gap:12px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 20px;
  transition:border-color .15s;
}
.card:hover{border-color:var(--accent)}

.card-top{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:6px;
}

.source-badge{
  font-size:11px;font-weight:700;text-transform:uppercase;
  padding:2px 8px;border-radius:4px;letter-spacing:.5px;
}
.source-badge.hn{background:#ff660020;color:#ff6600}
.source-badge.github{background:#23863620;color:#3fb950}
.source-badge.blog{background:#6366f120;color:#818cf8}
.source-badge.youtube{background:#ff000020;color:#ff4444}
.source-badge.reddit{background:#ff450020;color:#ff6633}
.source-badge.hf_papers{background:#ffd21e20;color:#ffd21e}

.cat-pill{
  font-size:11px;
  padding:2px 8px;border-radius:4px;
  background:var(--border);color:var(--text-dim);
}

.score-badge{
  margin-left:auto;
  font-size:13px;font-weight:700;
  padding:2px 10px;border-radius:4px;
  min-width:40px;text-align:center;
  cursor:help;
}
.score-badge.high{background:#22c55e20;color:var(--green)}
.score-badge.mid{background:#eab30820;color:var(--yellow)}
.score-badge.low{background:#ef444420;color:var(--red)}

.card-title{
  font-size:16px;font-weight:600;
  margin-bottom:4px;
}
.card-title a{
  color:var(--text);text-decoration:none;
}
.card-title a:hover{color:var(--accent)}

.card-summary{
  color:#94a3b8;
  font-size:0.82rem;
  margin-top:4px;
  line-height:1.5;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.tier-badge{
  font-size:0.7rem;
  padding:2px 6px;
  border-radius:4px;
  margin-left:4px;
}

.tier-official{background:rgba(234,179,8,0.15);color:#eab308}
.tier-interview{background:rgba(168,85,247,0.15);color:#a855f7}
.tier-blog{background:rgba(59,130,246,0.15);color:#3b82f6}

.card-meta{
  font-size:13px;color:var(--text-dim);
  display:flex;gap:12px;flex-wrap:wrap;
}

footer{
  text-align:center;
  padding:32px 16px;
  color:var(--text-dim);
  font-size:13px;
  border-top:1px solid var(--border);
  margin-top:24px;
}

.day-section{
  margin-bottom:48px;
}

.day-header{
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:16px;
}

.day-header .date-label{
  font-size:1.4rem;font-weight:700;color:#e2e8f0;
}

.day-header .count-badge{
  font-size:0.8rem;
  color:var(--text-dim);
  background:var(--surface);
  border:1px solid var(--border);
  padding:2px 10px;
  border-radius:12px;
}

.empty{
  text-align:center;
  padding:48px 16px;
  color:var(--text-dim);
  font-size:15px;
}

.count{
  font-size:13px;color:var(--text-dim);
  text-align:center;
  padding:4px 0 8px;
}

@media(max-width:600px){
  header{padding:12px 16px}
  .header-top{flex-direction:column;align-items:flex-start;gap:4px}
  .filters{flex-direction:column}
  .card{padding:12px 14px}
  .card-title{font-size:15px}
  .score-badge{margin-left:0}
}