:root{
  --bg: #ffffff;
  --text:#111;
  --muted:#666;
  --line:#d8d8d8;
  --link:#0b57d0;
  --tagbg:#eef5ff;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.brand{ font-size:24px; font-weight:700; }
.brandLink{ color:inherit; }

.layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap:18px;
  padding:14px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; }
  .sideCol{ order: 2; }
}

.mainCol{ min-width:0; }
.sideCol{ min-width:0; }

.panel{
  border:1px solid #b5e8b5;
  padding:10px;
  background:#f7fff7;
}
.panelTitle{
  font-weight:700;
  margin-bottom:8px;
}

.entries{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.entry{
  display:grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap:12px;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
}

.thumbBox{
  width:92px;
  height:92px;
  border:1px solid var(--line);
  background:#f6f6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumbImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.audioBox{
  background:#fff7e6;
  border-color:#ffd28a;
}

.playBtn{
  padding:8px 10px;
  border:1px solid #999;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.playBtn.playing{
  background:#0b57d0;
  color:white;
  border-color:#0b57d0;
}

.entryTitle{
  margin:0 0 6px 0;
  font-size:20px;
  line-height:1.2;
}
.entryDesc{
  color:var(--text);
  margin-bottom:6px;
}
.entryMeta{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.metaLink{ font-size:12px; }

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tag{
  display:inline-block;
  padding:3px 6px;
  border:1px solid #cfe2ff;
  background:var(--tagbg);
  border-radius:3px;
  font-size:12px;
}

.tagCloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
}

.cloudTag{
  display:inline-block;
  padding:4px 6px;
  border:1px solid #d3f0d3;
  background:#fff;
  line-height:1;
}

/* Weight classes (font size) */
.cloudTag.w1{ font-size:12px; }
.cloudTag.w2{ font-size:13px; }
.cloudTag.w3{ font-size:14px; }
.cloudTag.w4{ font-size:16px; }
.cloudTag.w5{ font-size:18px; }
.cloudTag.w6{ font-size:20px; font-weight:700; }
 
.cloudCount{ color:var(--muted); }

.filterUI{
  display:flex;
  align-items:center;
  gap:10px;
}
.filterInput{
  width: 320px;
  max-width: 55vw;
  padding:7px 9px;
  border:1px solid var(--line);
}
.activeTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.chip{
  display:inline-flex;
  gap:6px;
  align-items:center;
  border:1px solid #bbb;
  padding:3px 6px;
  background:#fff;
  border-radius:14px;
  font-size:12px;
}
.chipBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:700;
  line-height:1;
}
.clearBtn{
  border:1px solid var(--line);
  background:#fff;
  padding:6px 8px;
  cursor:pointer;
}

.hidden{ display:none !important; }
.noResults{ color:var(--muted); padding:12px 8px; }

.entryPage{
  max-width: 900px;
  margin: 0 auto;
  padding: 14px;
}
.entryHeader{ margin-bottom: 16px; }
.crumbs{ margin-bottom: 8px; }
.section{
  margin: 18px 0;
}
.post{
  line-height: 1.55;
}
.post img{ max-width: 100%; height:auto; }

.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.galleryItem{
  border:1px solid var(--line);
  background:#fafafa;
  display:block;
  overflow:hidden;
}
.galleryItem img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}