:root{
  --bg: #fff7ed;
  --card: #ffffff;
  --ink: #111827;
  --accent: #1d4ed8;
  --accent2: #f59e0b;
}

body{background: radial-gradient(900px 500px at 10% 0%, rgba(245,158,11,.18), transparent 60%), radial-gradient(700px 500px at 90% 10%, rgba(29,78,216,.14), 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;}

.topbar{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06);}
.topbar__row{display:flex; gap:1rem; align-items:center; padding:.8rem 0;}
.topbar__title{min-width:0;}
.topbar__tools{margin-left:auto; display:flex; gap:.5rem;}

.masonry{padding:1rem 0 1.5rem;}
.masonry__content{
  column-count: 2;
  column-gap: 1rem;
}
.masonry__content > *{
  break-inside: avoid;
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:1rem;
  margin:0 0 1rem;
}
.masonry__content h1, .masonry__content h2, .masonry__content h3{margin-top:0;}

@media (max-width: 900px){
  .masonry__content{column-count:1;}
}

.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(17,24,39,.75); display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .4rem; border-radius:12px;}
.tabbar__item.is-active{background:rgba(29,78,216,.10); 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:960px; margin:0 auto; padding:1.2rem;}