:root{
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #0f172a;
  --accent: #3b82f6;
}

body{background:radial-gradient(900px 520px at 10% 0%, rgba(59,130,246,.10), transparent 60%), var(--bg); color:var(--ink); padding-bottom:84px;}
#logo img{height:34px; width:auto; display:block;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.top{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.88); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06);}
.top__row{display:flex; gap:1rem; align-items:center; padding:.85rem 0;}
.top__meta{min-width:0;}

.layout{display:grid; grid-template-columns: minmax(0, 1fr) 420px; gap:1rem; padding:1rem 0 1.5rem;}
.reader{background:var(--panel); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.2rem;}
.cards{align-self:start;}
.cards__grid{display:block;}
.card-item{width: 200px; margin-bottom: 12px;}
.card{border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;}

@media (max-width: 1100px){
  .layout{grid-template-columns: 1fr;}
  .card-item{width: 46%;}
}
@media (max-width: 640px){
  .card-item{width: 100%;}
}

.tabbar{position:fixed; left:0; right:0; bottom:0; display:flex; gap:.25rem; justify-content:space-around; padding:.4rem; background:rgba(255,255,255,.92); border-top:1px solid rgba(0,0,0,.08);}
.tabbar__item{flex:1; text-decoration:none; color:rgba(15,23,42,.75); display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .4rem; border-radius:12px;}
.tabbar__item.is-active{background:rgba(59,130,246,.12); color:var(--accent);}
.tabbar__label{font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 11ch;}

#footer{background:#fff; border-top:1px solid rgba(0,0,0,.06);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}