:root{
  --bg:#fafaf9; --surface:#ffffff; --ink:#16181d; --muted:#6b7280;
  --muted2:#8f98a8; --line:#e7e5e1; --accent:#4f46e5; --chip:#f1f0ee;
  --radius:12px; --shadow:0 1px 2px rgba(20,20,30,.04),0 6px 16px rgba(20,20,30,.05);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0d0f14; --surface:#13161e; --ink:#dde0ea; --muted:#6e7a90;
    --muted2:#8892a8; --line:#1c2030; --accent:#7b8cf5; --chip:#181c27;
    --shadow:0 1px 3px rgba(0,0,0,.5),0 8px 28px rgba(0,0,0,.45);}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── top bar ── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;
  padding:13px clamp(16px,4vw,44px);
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
.brand-mark{width:26px;height:26px;border-radius:6px;flex-shrink:0}
.tabs{display:flex;gap:3px;margin-left:auto;background:var(--chip);
  padding:3px;border-radius:999px}
.tab{border:0;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:13.5px;
  padding:6px 17px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);background:var(--surface);box-shadow:var(--shadow)}

/* ── layout ── */
main{max-width:1520px;margin:0 auto;padding:20px clamp(16px,4vw,44px) 80px}

/* ── date strip ── */
.datestrip{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 16px;scrollbar-width:none}
.datestrip::-webkit-scrollbar{display:none}
.date{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:5px 12px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.date:hover{color:var(--ink);border-color:var(--muted2)}
.date.active{color:var(--ink);background:var(--chip);border-color:var(--muted2)}

.dayhead{display:flex;align-items:baseline;gap:12px;margin:4px 0 18px;flex-wrap:wrap}
.dayhead h1{font-size:clamp(20px,2.6vw,27px);font-weight:700;letter-spacing:-.025em;margin:0}
.count{color:var(--muted);font-size:13px;font-weight:500}

/* ── grid ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;align-items:start}

/* ── flip card shell ── */
.card{
  perspective:1200px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.card:hover{
  border-color:var(--muted2);
  box-shadow:0 2px 6px rgba(0,0,0,.1),0 16px 40px rgba(0,0,0,.18);
}
.card-inner{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .52s cubic-bezier(.4,0,.2,1);
}
.card.flipped .card-inner{transform:rotateY(180deg)}

.card-front,.card-back{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:var(--surface);
}

/* ── front face ── */
.card-front{
  display:flex;flex-direction:column;
  padding:20px 20px 16px;
}
.card h2{font-size:15px;font-weight:700;line-height:1.42;letter-spacing:-.012em;margin:0 0 9px}
.card h2 a:hover{color:var(--accent)}
.summary{margin:0 0 13px;font-size:13.5px;color:var(--ink);opacity:.84;line-height:1.65}

/* ── tags ── */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:13px}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;letter-spacing:.008em;
  color:var(--c);
  background:color-mix(in srgb,var(--c) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}

/* ── meta (authors + date) ── */
.meta{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);
  margin-top:auto;padding-top:2px}
.authors{line-height:1.5;word-break:break-word}
.card-date{font-weight:600;color:var(--muted2)}

/* ── front actions row (abstract toggle + upvote) ── */
.card-actions{display:flex;align-items:center;gap:10px;margin-top:13px}
.abstract-toggle{border:0;background:none;
  color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  padding:0;opacity:.75;transition:opacity .15s;letter-spacing:.01em}
.abstract-toggle:hover{opacity:1}
.upvote{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  font:inherit;font-size:12px;font-weight:700;line-height:1;
  padding:4px 9px;border-radius:999px;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s,transform .08s}
.upvote svg{width:11px;height:11px;fill:currentColor}
.upvote:hover{color:var(--accent);border-color:var(--muted2)}
.upvote:active{transform:scale(.92)}
.upvote.voted{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ── back face ── */
.card-back{
  position:absolute;inset:0;
  transform:rotateY(180deg);
  padding:18px 20px 14px;
  display:flex;flex-direction:column;
}
.back-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;flex-shrink:0}
.abstract{
  flex:1;overflow-y:auto;margin:0;
  font-size:13px;line-height:1.72;color:var(--ink);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.abstract::-webkit-scrollbar{width:4px}
.abstract::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.abstract-close{
  flex-shrink:0;margin-top:10px;border:0;background:none;
  color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;padding:0;opacity:.75;transition:opacity .15s;
  align-self:flex-start;letter-spacing:.01em;
}
.abstract-close:hover{opacity:1}

/* ── search ── */
.searchbar{margin:6px 0 14px}
#search-input{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:15px;outline:none;
  transition:border-color .15s,box-shadow .15s}
#search-input:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pill{border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:5px 13px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.pill:hover{color:var(--ink);border-color:var(--muted2)}
.pill.active{color:#fff;background:var(--c,var(--accent));border-color:var(--c,var(--accent))}

.empty{color:var(--muted);text-align:center;padding:60px 0;font-size:15px}

/* ── KaTeX inline sizing ── */
.katex{font-size:1em}

@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .topbar{gap:12px}
  .card-front{padding:17px 16px 14px}
  .card-back{padding:16px 16px 12px}
}