/* === n.80aj v5 — Anthropic-style warm humanist ===
 * Background  : cream / warm paper
 * Headings    : Source Serif (italic for brand mark)
 * Body        : modern sans
 * Accents     : 赤陶红 #D67052, 芥末黄 #F0B857, 海军蓝 #2C4A6E
 * NO neon, NO pure black.
 */
:root{
  --bg:#F3F0E9;
  --bg-paper:#FBF8F0;
  --bg-soft:#EAE5D8;
  --bg-band:#E7DFCD;
  --fg:#2A2620;
  --fg-2:#6B6358;
  --fg-3:#9C948A;
  --line:rgba(42,38,32,.12);
  --line-soft:rgba(42,38,32,.06);

  --accent:#D67052;
  --accent-dark:#B85B40;
  --accent-soft:#F4DDD0;
  --warm:#F0B857;
  --warm-soft:#FBE9C2;
  --warm-dark:#C28A33;
  --nav:#2C4A6E;
  --nav-soft:#D8E0EC;

  --radius:8px;
  --radius-sm:5px;
  --radius-lg:14px;

  --shadow-1:0 1px 0 var(--line-soft);
  --shadow-2:0 2px 12px rgba(42,38,32,.06);

  --serif:"Source Serif Pro","Source Serif 4",ui-serif,"Songti SC","Noto Serif SC","STSong",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","PingFang SC","Helvetica Neue","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --tab-bar-h:64px;

  --safe-top:env(safe-area-inset-top);
  --safe-bot:env(safe-area-inset-bottom);
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1A1714;
    --bg-paper:#221E19;
    --bg-soft:#2B2620;
    --bg-band:#2F2A23;
    --fg:#EAE3D3;
    --fg-2:#A39B8A;
    --fg-3:#6F6859;
    --line:rgba(234,227,211,.10);
    --line-soft:rgba(234,227,211,.05);
    --accent:#E08362;
    --accent-dark:#C46E4F;
    --accent-soft:rgba(224,131,98,.18);
    --warm:#F0B857;
    --warm-soft:rgba(240,184,87,.16);
    --warm-dark:#D49B3F;
    --nav:#9DB4D2;
    --nav-soft:rgba(157,180,210,.16);
    --shadow-2:0 2px 12px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
body{
  font-family:var(--sans);
  font-size:15px;line-height:1.6;letter-spacing:.005em;
  padding-bottom:calc(var(--tab-bar-h) + var(--safe-bot));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* paper grain */
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/><feColorMatrix values="0 0 0 0 .16  0 0 0 0 .15  0 0 0 0 .12  0 0 0 .035 0"/></filter><rect width="200" height="200" filter="url(%23n)"/></svg>');
  background-attachment:fixed;
}
a{color:inherit}
button{font-family:inherit}

/* === hero (warm band, brand mark in italic serif) === */
.hero{
  background:var(--bg);
  padding:calc(20px + var(--safe-top)) 20px 18px;
  position:relative;
  border-bottom:1px solid var(--line);
}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hero-brand{display:flex;align-items:baseline;gap:0}
.hero-brand .name{
  font-family:var(--serif);
  font-size:26px;font-weight:700;
  letter-spacing:.005em;color:var(--fg);
  margin:0;line-height:1;
}
.hero-brand .name::after{
  content:"n.80aj.com";
  font-family:var(--sans);
  font-size:12px;color:var(--fg-2);
  font-style:normal;font-weight:600;
  margin-left:10px;letter-spacing:.02em;
  vertical-align:3px;
}
.hero-brand .dot,.hero-brand .sub{display:none}
.hero-btn{
  background:var(--bg-paper);border:1px solid var(--line);color:var(--fg);
  width:34px;height:34px;border-radius:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:transform .3s;
}
.hero-btn.spin{transform:rotate(360deg)}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;font-size:11px;
  color:var(--fg-2);letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.hero-tag::before{content:"";width:18px;height:1px;background:var(--accent)}
.hero-title{
  font-family:var(--serif);
  font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  color:var(--fg);margin:8px 0 4px;
}
.hero-sub{font-size:13px;color:var(--fg-2);margin-top:2px;font-weight:500}
.date-strip{
  display:flex;gap:8px;margin:14px -20px 0;padding:2px 20px 6px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.date-strip::-webkit-scrollbar{display:none}
.date-chip{
  flex:0 0 auto;scroll-snap-align:start;
  background:var(--bg-paper);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--sans);min-width:54px;line-height:1;
  transition:transform .12s, background .15s, border-color .15s;
}
.date-chip:active{transform:scale(.96)}
.date-chip .lbl{
  font-size:11px;color:var(--fg-2);font-weight:600;letter-spacing:.02em;
}
.date-chip .mmdd{
  font-size:15px;color:var(--fg);font-weight:700;
  font-family:var(--serif);font-variant-numeric:tabular-nums;
}
.date-chip.today{border-color:var(--accent)}
.date-chip.today .lbl{color:var(--accent)}
.date-chip.active{background:var(--accent);border-color:var(--accent)}
.date-chip.active .lbl,.date-chip.active .mmdd{color:#fff}

/* a small terracotta band with abstract mark, replaces the previous gradient blob */
.hero::after{
  content:"";display:block;
  margin-top:18px;height:8px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 60%,var(--warm) 60%,var(--warm) 100%);
  border-radius:2px;
  width:64px;
}

/* === stats: minimal, no shadow, divider-only === */
.stats{
  margin:18px 14px 6px;
  background:var(--bg-paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:14px 6px;text-align:center}
.stat .v{
  font-family:var(--serif);font-size:24px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--fg);line-height:1.1;
}
.stat .v .delta{font-size:11px;color:var(--accent);font-weight:700;margin-left:3px;vertical-align:top}
.stat .l{font-size:10px;color:var(--fg-2);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.stat + .stat{border-left:1px solid var(--line-soft)}

/* === diff strip === */
.diff-strip{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:14px 16px 0;max-width:var(--maxw,680px);margin:0 auto;
}
.diff-strip::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;background:var(--bg-paper);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--radius-sm);padding:6px 12px;font-size:12px;cursor:pointer;
  display:inline-flex;gap:6px;align-items:center;font-weight:600;
}
.chip .ic{display:none}
.chip b{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px}
.chip-new b{color:var(--nav)}
.chip-hot b{color:var(--accent)}
.chip-cold b{color:var(--warm-dark)}
.chip-gone b{color:var(--fg-3)}

/* === sub-categories pill bar (still scrollable, but secondary) === */
.tagbar{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding:14px 14px 14px;max-width:var(--maxw,680px);margin:0 auto;
}
.tagbar::-webkit-scrollbar{display:none}
.tag-pill{
  flex:0 0 auto;background:transparent;border:1px solid var(--line);
  color:var(--fg-2);border-radius:var(--radius-sm);padding:6px 12px;font-size:12.5px;
  cursor:pointer;white-space:nowrap;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.tag-pill .ico{display:none}
.tag-pill.active{
  background:var(--fg);color:var(--bg-paper);border-color:var(--fg);
}
.tag-pill .cnt{
  opacity:.55;font-size:10.5px;font-variant-numeric:tabular-nums;font-weight:700;
}
.tag-pill.active .cnt{opacity:.75}
.tag-pill.tp-topics{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
.tag-pill.tp-topics.active{background:var(--accent);color:#fff}
.tag-pill.tp-brief{background:var(--warm-soft);color:var(--warm-dark);border-color:transparent}
.tag-pill.tp-brief.active{background:var(--warm);color:var(--fg)}

/* === feed === */
.feed{
  max-width:var(--maxw,680px);margin:0 auto;padding:4px 14px 0;
  display:flex;flex-direction:column;gap:22px;
}
.tag-section{display:flex;flex-direction:column;gap:10px}
.tag-section-h{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:6px 4px 4px;border-bottom:1px solid var(--line);
}
.tag-section-h .name{
  font-family:var(--serif);font-weight:700;font-size:18px;
  display:flex;align-items:baseline;gap:8px;color:var(--fg);
}
.tag-section-h .name .e{display:none}
.tag-section-h .name .n{
  font-family:var(--sans);font-size:11px;background:transparent;color:var(--accent);
  padding:0 0 0 4px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.05em;
}
.tag-section-h .desc{
  color:var(--fg-3);font-size:11px;text-align:right;max-width:55%;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  letter-spacing:.02em;
}

/* === card v3 (warm paper, serif title) === */
.card{
  background:var(--bg-paper);
  border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:14px 16px;display:flex;gap:14px;cursor:pointer;
  transition:transform .15s ease, border-color .2s;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-1);
}
.card:active{transform:translateY(1px)}
.card:hover{border-color:var(--line)}
.card-logo{
  flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:13px;color:#fff;
  background:var(--accent);
  letter-spacing:.02em;user-select:none;
}
.card-logo.v-warm{background:var(--warm);color:var(--fg)}
.card-logo.v-nav{background:var(--nav);color:#fff}
.card-logo.v-soft{background:var(--bg-soft);color:var(--fg-2)}

.card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.card-title{
  font-family:var(--serif);
  font-size:15.5px;font-weight:600;line-height:1.45;color:var(--fg);
  word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  letter-spacing:.005em;
}
.card-meta{
  display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--fg-2);
  align-items:center;letter-spacing:.02em;
}
.card-meta .pf{font-weight:600;color:var(--fg)}
.card-meta .rank{font-variant-numeric:tabular-nums;color:var(--fg-2)}
.card-meta .crawl{color:var(--fg-3);font-variant-numeric:tabular-nums}
.card-meta .changed{color:var(--accent);font-weight:700}
.card-meta .ai{
  background:transparent;color:var(--accent);border:1px solid var(--accent-soft);
  padding:0 5px;border-radius:3px;font-weight:700;font-size:10px;letter-spacing:.04em;
}

.card-side{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:space-between;gap:6px;min-width:54px;
}
.hot-num{
  font-family:var(--serif);
  font-size:20px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;
  line-height:1;display:flex;align-items:baseline;gap:2px;
}
.hot-num .arrow{font-size:11px;color:var(--fg-3);font-weight:700}
.hot-num.tier-3{color:var(--accent)}
.hot-num.tier-2{color:var(--warm-dark)}
.hot-num.tier-1{color:var(--nav)}
.hot-num.tier-0{color:var(--fg-3)}
.spark{width:56px;height:16px;flex-shrink:0;opacity:.7}
.spark path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.spark .area{fill:color-mix(in srgb,currentColor 18%,transparent);stroke:none}
.hot-num.tier-3 + .spark{color:var(--accent)}
.hot-num.tier-2 + .spark{color:var(--warm-dark)}
.hot-num.tier-1 + .spark{color:var(--nav)}
.hot-num.tier-0 + .spark{color:var(--fg-3)}

.card.rss .card-title{-webkit-line-clamp:2}
.card-summary{
  font-size:12.5px;color:var(--fg-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-style:italic;
}

/* === topic card === */
.topic-card{
  background:var(--bg-paper);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:10px;cursor:pointer;
  transition:transform .15s,border-color .2s;
  box-shadow:var(--shadow-1);
  position:relative;
}
.topic-card::before{
  content:"";position:absolute;top:0;left:0;bottom:0;width:3px;
  background:var(--accent);opacity:0;border-radius:var(--radius) 0 0 var(--radius);
  transition:opacity .2s;
}
.topic-card:hover::before,.topic-card.is-multi::before{opacity:1}
.topic-card:active{transform:translateY(1px)}
.topic-card .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.topic-card .tit{
  font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.4;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;
  letter-spacing:-.005em;
}
.topic-card .badge{
  flex-shrink:0;background:transparent;color:var(--fg-3);
  font-size:10.5px;font-weight:700;padding:2px 0;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  letter-spacing:.06em;text-transform:uppercase;
}
.topic-card .badge.days-multi{color:var(--accent);font-weight:800}
.topic-card .badge.days-1{color:var(--nav)}
.topic-card .sum{font-size:13.5px;color:var(--fg-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.topic-card .foot{display:flex;gap:14px;font-size:11px;color:var(--fg-3);align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:10px}
.topic-card .foot .tag{
  background:transparent;color:var(--accent);padding:0;border-radius:0;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.topic-card .foot .n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--fg-2)}

/* === topic detail (pane) === */
.td-head{padding:6px 4px 14px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.td-head .tag{
  display:inline-block;background:transparent;color:var(--accent);
  font-size:11px;font-weight:700;padding:0;margin-bottom:10px;
  letter-spacing:.08em;text-transform:uppercase;
}
.td-head .sum{
  font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--fg);line-height:1.65;margin-top:8px;
}
.td-mini{display:flex;gap:16px;margin-top:18px;font-size:11px;color:var(--fg-3);flex-wrap:wrap;
  letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.td-mini .m{display:flex;align-items:baseline;gap:5px}
.td-mini .m b{
  font-family:var(--serif);font-size:18px;font-weight:700;color:var(--fg);
  font-variant-numeric:tabular-nums;letter-spacing:normal;text-transform:none;
}

.timeline-day{padding:14px 0 4px}
.timeline-day .day-hdr{
  position:sticky;top:0;background:linear-gradient(to bottom,var(--bg-pane,var(--bg-paper)) 70%,transparent);
  padding:8px 0 10px;display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;color:var(--fg-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.timeline-day .day-hdr .d{
  font-family:var(--serif);font-size:15px;color:var(--fg);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:normal;text-transform:none;
}
.timeline-day .day-hdr .first{color:var(--accent);font-weight:700;font-size:10px;
  background:transparent;padding:0;border-radius:0;letter-spacing:.08em}
.timeline-day .day-hdr .n{font-size:11px;color:var(--fg-3);font-variant-numeric:tabular-nums}

.timeline-item{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;
}
.timeline-item:last-child{border-bottom:0}
.timeline-item .ti-logo{
  flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:11px;font-weight:700;color:#fff;
  background:var(--accent);user-select:none;
}
.timeline-item .ti-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.timeline-item .ti-title{
  font-family:var(--serif);font-size:14px;font-weight:600;line-height:1.45;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.timeline-item .ti-meta{font-size:10.5px;color:var(--fg-3);display:flex;gap:10px;flex-wrap:wrap;
  letter-spacing:.02em}
.timeline-item .ti-meta .pf{color:var(--fg-2);font-weight:600}
.timeline-item .ti-meta .hot{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-size:12px}
.timeline-item .ti-meta .hot.tier-3{color:var(--accent)}
.timeline-item .ti-meta .hot.tier-2{color:var(--warm-dark)}

.td-loading{padding:60px 0;text-align:center;color:var(--fg-3);font-size:13px}

/* === brief view === */
.brief-view{max-width:var(--maxw,680px);margin:0 auto;padding:6px 18px 24px;
  display:flex;flex-direction:column;gap:8px}
.brief-date-nav{
  display:flex;justify-content:center;align-items:center;gap:14px;
  padding:8px 0 14px;color:var(--fg-2);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;
}
.brief-date-nav button{
  background:transparent;border:1px solid var(--line);color:var(--fg);
  width:30px;height:30px;border-radius:15px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.brief-date-nav button:disabled{opacity:.3;cursor:not-allowed}
.brief-date-nav .d{
  font-family:var(--serif);font-size:14px;color:var(--fg);font-weight:600;
  letter-spacing:normal;text-transform:none;
}
.brief-title{
  font-family:var(--serif);
  font-size:30px;font-weight:600;font-style:italic;line-height:1.25;
  margin:6px 0 4px;color:var(--fg);letter-spacing:-.01em;
}
.brief-author{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--fg-2);font-weight:700;
  padding:6px 0;width:fit-content;margin-bottom:8px;
  letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}
.brief-author::before{content:"";width:14px;height:1px;background:var(--accent)}
.brief-greeting{
  font-family:var(--serif);font-style:italic;
  font-size:16px;line-height:1.7;color:var(--fg);
  background:transparent;border:0;padding:8px 0 14px;
  margin-bottom:0;border-bottom:1px solid var(--line-soft);
}
.brief-section{
  background:transparent;border:0;border-bottom:1px solid var(--line-soft);
  border-radius:0;padding:18px 0 6px;margin-top:0;
}
.brief-section:last-of-type{border-bottom:0}
.brief-section .h{
  display:flex;align-items:baseline;gap:8px;margin-bottom:12px;
}
.brief-section .h .e{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--accent);flex-shrink:0;align-self:center;
  font-size:0;
}
.brief-section .h{
  font-family:var(--serif);
  font-size:20px;font-weight:600;color:var(--fg);line-height:1.3;letter-spacing:-.005em;
}
.brief-section .body{
  font-size:15px;line-height:1.75;color:var(--fg);
  white-space:pre-wrap;
}
.brief-section ul{
  list-style:none;padding-left:0;margin:14px 0 4px;
  display:flex;flex-direction:column;gap:6px;
  border-left:2px solid var(--accent-soft);padding-left:14px;
}
.brief-section li{
  font-size:13px;color:var(--fg-2);line-height:1.6;
  position:relative;
}
.brief-related{
  background:var(--bg-paper);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:16px;margin-top:24px;
}
.brief-related .h{
  font-size:11px;font-weight:700;color:var(--fg-2);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;letter-spacing:.1em;text-transform:uppercase;
}
.brief-related .h .n{
  background:transparent;color:var(--accent);font-size:11px;padding:0;border-radius:0;font-weight:800;
}
.brief-related ul{list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:0}
.brief-related li{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;cursor:pointer;
  border-top:1px solid var(--line-soft);
}
.brief-related li:first-child{border-top:0}
.brief-related li .name{
  font-family:var(--serif);font-size:14px;color:var(--fg);font-weight:600;flex:1;min-width:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.brief-related li .tag{
  font-size:10px;color:var(--accent);background:transparent;
  padding:2px 0;border-radius:0;font-weight:700;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;
}
.brief-meta{
  text-align:center;font-size:10px;color:var(--fg-3);margin-top:24px;
  font-variant-numeric:tabular-nums;letter-spacing:.05em;
}
.brief-empty{padding:60px 0;text-align:center;color:var(--fg-3);font-size:13px;line-height:1.7;font-style:italic}
.brief-empty .em{font-size:36px;display:block;margin-bottom:10px;opacity:.5;font-style:normal}

/* === pane (slide-up dialog) === */
.pane{
  border:0;padding:0;background:transparent;width:100%;max-width:100%;
  max-height:100dvh;height:100dvh;margin:0;
}
.pane::backdrop{background:rgba(42,38,32,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pane[open]{display:flex;flex-direction:column;animation:slideup .25s cubic-bezier(.2,.8,.2,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pane-hdr{
  background:var(--bg-paper);border-radius:16px 16px 0 0;
  padding:calc(16px + var(--safe-top)) 16px 14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;
}
.pane-hdr h2{
  margin:0;font-family:var(--serif);font-size:19px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;
}
.pane-close{
  background:transparent;border:0;color:var(--fg);font-size:22px;line-height:1;
  cursor:pointer;padding:4px 8px;border-radius:50%;
}
.pane-close:active{background:var(--bg-soft)}
.pane-body{
  background:var(--bg-paper);flex:1;overflow-y:auto;
  padding:8px 16px calc(40px + var(--safe-bot));
}
.pane-body .empty{color:var(--fg-3);text-align:center;padding:60px 0;font-size:13px;font-style:italic}
.pane-body .item-row{
  padding:14px 4px;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:6px;
}
.pane-body .item-row:last-child{border-bottom:0}
.pane-body .item-row a{
  color:var(--fg);text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.45;
  font-family:var(--serif);
}
.pane-body .item-row .meta{font-size:11px;color:var(--fg-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center;letter-spacing:.02em}
.pane-body .item-row .meta .pf{font-weight:600;color:var(--fg-2)}
.pane-body .item-row .delta-up{color:var(--accent);font-weight:700;font-family:var(--serif)}
.pane-body .item-row .delta-down{color:var(--nav);font-weight:700;font-family:var(--serif)}

/* === bottom tab bar (new) === */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:color-mix(in srgb,var(--bg-paper) 96%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
  display:flex;
  padding:6px 4px calc(6px + var(--safe-bot));
}
.tabbar button{
  flex:1;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--fg-3);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;padding:6px 0 2px;border-radius:var(--radius-sm);
  transition:color .15s;
}
.tabbar button .lbl{display:block}
.tabbar svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.tabbar button.active{color:var(--accent)}
.tabbar button.active svg{stroke-width:2}
.tabbar button:active{transform:translateY(1px)}

/* push the old fixed footer out of the way (we keep it hidden) */
.app-footer{display:none!important}

/* === skeleton === */
.skeleton{
  background:linear-gradient(90deg,var(--bg-paper) 25%,var(--bg-soft) 50%,var(--bg-paper) 75%);
  background-size:200% 100%;border-radius:var(--radius);height:100px;animation:sk 1.6s infinite;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(min-width:720px){
  body{max-width:680px;margin:0 auto;background:var(--bg)}
  html{background:var(--bg-soft)}
  .tabbar{max-width:680px;margin:0 auto}
}