#tabs { list-style: none; margin: 0 0 -1px; padding: 0; }
#tabs li { display: inline-block; margin-right: 3px; }
#tabs a {
  display: block;
  padding: 5px 18px;
  border: 1px solid #ccc;
  background: #f4f4f4;
  color: #444;
  font-size: 13px;
}
#tabs a:hover { background: #ececec; color: #d00; text-decoration: none; }
#tabs a.on { background: #fff; border-bottom-color: #fff; color: #000; font-weight: bold; }
#panel { border: 1px solid #ccc; padding: 12px 14px; }

.bar { position: relative; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 11px; color: #777; }
.bar input { font: 12px Verdana, Tahoma, sans-serif; border: 1px solid #bbb; padding: 3px 5px; width: 190px; }
.bar .count { white-space: nowrap; }
#about { margin-left: auto; }
#about.hide { display: none; }
#about-link { font-size: 11px; }
.pop {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 20;
  width: 380px;
  max-width: 92%;
  background: #fff;
  border: 1px solid #808080;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
  font-size: 12px;
  color: #111;
  text-align: left;
}
.pop .titlebar { display: flex; align-items: center; gap: 6px; background: #dcdcdc; border-bottom: 1px solid #aaa; padding: 3px 4px 3px 7px; font-size: 11px; font-weight: bold; color: #333; }
.pop .titlebar .spacer { flex: 1; }
.pop .titlebar button { font: bold 11px Verdana, Tahoma, sans-serif; line-height: 1; padding: 2px 6px; cursor: pointer; background: #dedede; color: #222; border: 2px solid; border-color: #fff #808080 #808080 #fff; }
.pop .titlebar button:active { border-color: #808080 #fff #fff #808080; }
.pop .body { display: block; padding: 10px 12px; line-height: 1.6; }
.pop .body > span { display: block; margin: 0 0 6px; }
.pop .body > span:last-child { margin-bottom: 0; }
.pop .body .expand { font-size: 13px; letter-spacing: -0.2px; }
.pop .body .expand b { color: #000; }

ul.posts { list-style: none; margin: 0; padding: 0; }
ul.posts > li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dotted #ddd; content-visibility: auto; contain-intrinsic-size: 132px; }
ul.posts > li:first-child { padding-top: 0; }
.thumb { flex: 0 0 auto; width: 130px; height: 130px; border: 1px solid #ccc; background: #f7f7f7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
a.thumb:hover { background: #eee; text-decoration: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .ph { font-size: 10px; color: #888; letter-spacing: 0.5px; }
.meta { min-width: 0; padding-top: 1px; }
.title { margin: 0; font-size: 14px; font-weight: normal; }
.title .date { margin-left: 8px; color: #888; font-size: 11px; font-weight: normal; }
.desc { margin: 3px 0 5px; color: #444; font-size: 12px; }
.tags { font-size: 11px; }
.tags a { margin-right: 6px; }
.tags .t-copy a, a.t-copy { color: #a800a8; }
.tags .t-char a, a.t-char { color: #00a000; }
.tags .t-artist a, a.t-artist { color: #a00000; }
.tags .t-meta a, a.t-meta { color: #ee8800; }