:root {
  --bg:#faf7fb; --card:#ffffff; --ink:#3a3446; --muted:#8c8798;
  --line:#ece7f2; --accent:#a98fd6; --hot:#e8735a; --danger:#c94f6d;
  --shadow:0 1px 2px rgba(80,60,110,.05), 0 4px 16px rgba(80,60,110,.05);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a171f; --card:#242029; --ink:#e9e4f0; --muted:#9a94a6;
          --line:#332e3c; --hot:#f08a6c; --danger:#e8809a;
          --shadow:0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.25); }
}
* { box-sizing:border-box; }
html { color-scheme:light dark; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:15px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:860px; margin:0 auto; padding:0 16px; }
button, input, select { font:inherit; color:inherit; }
code { background:var(--line); padding:1px 6px; border-radius:5px; font-size:12px; }

/* ---- header ---- */
header { padding:28px 0 4px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
h1 { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em;
     background:linear-gradient(100deg,#e88aa6,#a98fd6 45%,#6bb6e6);
     -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sub { color:var(--muted); font-size:13px; margin-top:2px; }
.sections { display:flex; margin-left:auto; border:1px solid var(--line); background:var(--card);
            border-radius:11px; padding:3px; gap:2px; }
.sections button { cursor:pointer; border:0; background:none; border-radius:8px; padding:5px 12px;
                   font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.sections button.active { background:var(--ink); color:var(--bg); }
.iconbtn { cursor:pointer; border:1px solid var(--line); background:var(--card); border-radius:10px;
           width:36px; height:36px; font-size:16px; color:var(--muted); flex:0 0 auto; }
.iconbtn:hover { color:var(--ink); box-shadow:var(--shadow); }

/* ---- sticky bar ---- */
.bar { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 90%, transparent);
       backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin-top:14px; }
nav { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0 4px; }
@media (max-width:640px) {
  nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:12px 16px 4px; }
  nav::-webkit-scrollbar { display:none; }
}
.pill { --c:var(--muted); display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
        color:var(--ink); font-size:13px; font-weight:500;
        border:1px solid var(--line); background:var(--card); padding:5px 12px; border-radius:999px;
        transition:transform .08s ease, box-shadow .12s ease; }
.pill:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.pill .dot { width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.pill .n { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.pill.active { background:color-mix(in srgb, var(--c) 20%, var(--card));
               border-color:color-mix(in srgb, var(--c) 55%, var(--card)); font-weight:600; }

.controls { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 0 10px; }
.sortbar { display:flex; gap:14px; font-size:13px; }
.sortbar button { border:0; background:none; padding:0 0 2px; cursor:pointer; color:var(--muted); }
.sortbar button.active { color:var(--ink); font-weight:600; border-bottom:2px solid var(--ink); }
.newonly { font-size:13px; color:var(--muted); display:flex; gap:5px; align-items:center; cursor:pointer; }
#search { flex:1 1 200px; min-width:0; border:1px solid var(--line); background:var(--card);
          border-radius:10px; padding:6px 11px; font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 10px; }
.chips:empty { display:none; }
.chip { cursor:pointer; border:1px solid var(--line); background:var(--card); border-radius:999px;
        font-size:12px; padding:3px 10px; color:var(--muted); }
.chip.active { color:var(--ink); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--card)); }

/* ---- cards ---- */
main { padding:12px 0 24px; }
.paper { --c:var(--muted); display:flex; gap:14px;
         background:var(--card); border:1px solid var(--line); border-left:4px solid var(--c);
         border-radius:14px; padding:15px 17px; margin-bottom:12px; box-shadow:var(--shadow); }
.actions { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.actions button { cursor:pointer; border:1px solid var(--line); border-radius:10px; width:40px; height:34px;
                  font-size:15px; line-height:1; color:var(--muted); background:var(--bg);
                  transition:all .12s ease; }
.actions button:hover { color:var(--c); border-color:var(--c); transform:translateY(-1px); }
.actions button.on { color:var(--card); background:var(--c); border-color:var(--c); }
.actions button.hide { height:26px; font-size:12px; border-color:transparent; background:none; }
.body { min-width:0; flex:1; }
.body h3 { margin:0 0 5px; font-size:16px; line-height:1.35; overflow-wrap:anywhere; }
.body h3 a { color:var(--ink); text-decoration:none; }
.body h3 a:hover { color:var(--c); }
.meta { color:var(--muted); font-size:12px; margin-bottom:6px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.authors { color:var(--muted); font-size:12px; margin-bottom:7px; overflow:hidden; text-overflow:ellipsis;
           white-space:nowrap; }
.authors b { color:var(--ink); }
.badge { --c:var(--muted); display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:2px 8px;
         font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap;
         background:color-mix(in srgb, var(--c) 20%, var(--card));
         color:color-mix(in srgb, var(--c) 60%, var(--ink)); }
.badge.venue { --c:var(--ink); background:var(--line); color:var(--ink); }
.badge.pi { --c:#a98fd6; }
.badge.hot { --c:var(--hot); }
.badge.new { --c:#5cc0a0; }
.badge.org { --c:var(--muted); background:none; border:1px solid var(--line); color:var(--muted); font-weight:500; }
.tldr { font-size:13px; line-height:1.5; margin-bottom:6px; padding:6px 10px; border-radius:8px;
        background:color-mix(in srgb, var(--c) 9%, var(--card)); }
.tldr b { font-size:11px; letter-spacing:.04em; color:color-mix(in srgb, var(--c) 65%, var(--ink)); margin-right:4px; }
.date { font-variant-numeric:tabular-nums; }
.abstract { color:var(--muted); font-size:13px; line-height:1.5; cursor:pointer;
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.abstract.open { display:block; }
.links { font-size:12px; margin-top:6px; display:flex; flex-wrap:wrap; gap:4px 12px; }
.links a { color:var(--muted); }
.empty { color:var(--muted); text-align:center; padding:56px 0; }
.more { text-align:center; padding:0 0 64px; }
.more button { cursor:pointer; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:7px 20px; }

/* ---- settings ---- */
dialog { border:1px solid var(--line); border-radius:16px; padding:0; background:var(--card); color:var(--ink);
         width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(20,15,30,.35); }
.settings { padding:18px 20px 22px; }
.settings-head { display:flex; justify-content:space-between; align-items:center; }
.settings h2 { margin:0; font-size:18px; }
.settings h3 { margin:18px 0 2px; font-size:14px; }
.hint { color:var(--muted); font-size:12px; margin:0 0 10px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; margin:6px 0; }
#weights .row { display:grid; grid-template-columns:1fr minmax(100px,200px) 2.5em; }
.row input[type=range] { flex:0 1 220px; accent-color:var(--accent); min-width:0; }
.row output { width:2.5em; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.row select { border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:3px 6px; }
.tab-editor { list-style:none; padding:0; margin:0; }
.tab-editor li { display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0; border-bottom:1px solid var(--line); }
.tab-editor .name { flex:1; display:flex; align-items:center; gap:7px; min-width:0; }
.tab-editor .dot { width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.tab-editor input[type=range] { width:90px; accent-color:var(--accent); }
.tab-editor output { width:2em; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.tab-editor button { cursor:pointer; border:1px solid var(--line); background:var(--bg); border-radius:6px; width:26px; height:24px; color:var(--muted); }
.btnrow { display:flex; flex-wrap:wrap; gap:8px; }
.btnrow button { cursor:pointer; border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:5px 11px; font-size:13px; }
.btnrow .danger { color:var(--danger); }
.btnrow input[type=password] { flex:1 1 200px; min-width:0; border:1px solid var(--line); background:var(--bg); color:inherit; border-radius:8px; padding:5px 10px; font-size:13px; }
.sync-error { color:var(--danger); margin-top:8px; }

/* ---- AI score + map ---- */
.badge.ai { color:var(--muted); }
.badge.ai.hi { color:#b8860b; border-color:#e6b422; font-weight:600; }
.tldr .why { color:var(--muted); }
.linkbtn { cursor:pointer; border:0; background:none; padding:0; font:inherit; color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.mapview { margin:14px 0 6px; }
.map-wrap { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
.map-wrap canvas { display:block; touch-action:none; cursor:grab; }
.map-wrap canvas:active { cursor:grabbing; }
.map-tip { position:absolute; max-width:250px; pointer-events:none; background:var(--ink); color:var(--bg); font-size:12px; line-height:1.35; padding:5px 8px; border-radius:6px; }
.map-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:6px; font-size:12px; color:var(--muted); }
.map-bar span:first-child { flex:1 1 260px; }
.map-bar .heart { color:var(--hot); }
.map-bar button { cursor:pointer; border:1px solid var(--line); background:var(--bg); color:inherit; border-radius:8px; padding:3px 9px; font-size:12px; }
.map-h { margin:22px 0 4px; font-size:13px; color:var(--muted); font-weight:600; }