/* ================================================================
   blog.css — Single post & archive specific styles
   ================================================================ */

/* ── Reading progress bar ─────────────────────────────────────── */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--cyan);
  z-index: 9999;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Single post layout ───────────────────────────────────────── */
.single-post-page { padding-top: 5rem; }

.single-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .single-layout { grid-template-columns: 260px 1fr; }
}

/* ── TOC Sidebar (desktop) ────────────────────────────────────── */
.toc-sidebar {
  display: none;
  position: sticky;
  top: 6rem;
}
@media (min-width: 1024px) {
  .toc-sidebar { display: block; }
}

.toc-sidebar-inner {
  padding: 1.25rem;
  border-radius: .75rem;
}

.toc-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 45vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.toc-list::-webkit-scrollbar { width: 4px; }
.toc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.toc-link {
  display: block;
  padding: .375rem .625rem;
  border-radius: .375rem;
  font-size: .8125rem;
  color: hsl(var(--foreground) / .6);
  text-decoration: none;
  transition: color .2s, background .2s;
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.toc-link:hover { color: var(--cyan); background: rgba(6,182,212,.08); }
.toc-link.active { color: var(--cyan); border-left-color: var(--cyan); background: rgba(6,182,212,.08); }

/* TOC tools */
.toc-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.font-size-control {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}

.font-size-btn {
  padding: .25rem .5rem;
  border-radius: .375rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .7);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.font-size-btn:hover { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.3); }

.focus-btn {
  padding: .375rem;
  border-radius: .375rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .7);
  cursor: pointer;
  transition: background .2s, color .2s;
  display: flex;
  align-items: center;
}
.focus-btn:hover, .focus-btn[aria-pressed="true"] {
  background: rgba(6,182,212,.12);
  color: var(--cyan);
  border-color: rgba(6,182,212,.3);
}

.mins-left {
  font-size: .7rem;
  color: hsl(var(--foreground) / .4);
  margin-top: .5rem;
  margin-bottom: 0;
}

/* ── TOC Drawer (mobile) ──────────────────────────────────────── */
.toc-drawer-toggle {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cyan);
  color: #000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(6,182,212,.4);
  transition: transform .2s, box-shadow .2s;
}
.toc-drawer-toggle:hover { transform: scale(1.05); }
@media (min-width: 1024px) { .toc-drawer-toggle { display: none; } }

.toc-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.toc-drawer.open { pointer-events: auto; }

.toc-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .25s;
}
.toc-drawer.open .toc-drawer-backdrop { opacity: 1; }

.toc-drawer-panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(320px, 90vw);
  background: hsl(222 47% 10%);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.toc-drawer.open .toc-drawer-panel { transform: translateX(0); }

#toc-drawer-close {
  background: none;
  border: none;
  color: hsl(var(--foreground) / .6);
  cursor: pointer;
  padding: .25rem;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  transition: color .2s;
}
#toc-drawer-close:hover { color: var(--cyan); }

/* ── Post article ─────────────────────────────────────────────── */
.post-article {
  min-width: 0;
  background: hsl(var(--background));
}

.post-featured-img { margin-bottom: 2rem; }

.post-header { margin-bottom: 2.5rem; }

.post-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  color: hsl(var(--foreground));
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.post-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(6,182,212,.3);
  flex-shrink: 0;
}

.post-meta-info { display: flex; flex-direction: column; gap: .125rem; }

.post-author-name {
  font-size: .9rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color .2s;
}
.post-author-name:hover { color: var(--cyan); }

.post-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8rem;
  color: hsl(var(--foreground) / .55);
}

.post-date, .post-read-time { font-size: .8rem; }

.post-view-count {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
}

/* Share button */
.post-share-wrap { position: relative; }

.share-btn {
  width: 38px;
  height: 38px;
  border-radius: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.share-btn:hover { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.3); }

.share-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 160px;
  padding: .5rem;
  border-radius: .625rem;
  z-index: 50;
}

.share-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .875rem;
  color: hsl(var(--foreground) / .8);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.share-item:hover { background: rgba(6,182,212,.12); color: var(--cyan); }

/* ── wp-content (article body) ────────────────────────────────── */
.wp-content { font-size: var(--article-font-size, 1.125rem); }

/* Copy code button */
.copy-code-btn {
  position: absolute;
  top: .5rem; right: .5rem;
  padding: .25rem .625rem;
  border-radius: .375rem;
  font-size: .7rem;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .2s, color .2s;
  letter-spacing: .04em;
}
.copy-code-btn:hover { background: rgba(6,182,212,.2); color: var(--cyan); border-color: rgba(6,182,212,.4); }

/* H2 anchor button */
.h2-anchor-btn {
  display: inline-flex;
  align-items: center;
  margin-left: .5rem;
  opacity: 0;
  transition: opacity .2s;
  background: none;
  border: none;
  color: hsl(var(--foreground) / .4);
  cursor: pointer;
  padding: 0 .25rem;
  vertical-align: middle;
}
.wp-content h2:hover .h2-anchor-btn,
.h2-anchor-btn:focus { opacity: 1; color: var(--cyan); }

/* ── Newsletter block ─────────────────────────────────────────── */
.newsletter-block {
  padding: 2rem;
  border-radius: .75rem;
  text-align: center;
  margin: 2.5rem 0;
  background: linear-gradient(135deg, rgba(6,182,212,.05), rgba(139,92,246,.05));
  border: 1px solid rgba(6,182,212,.2);
}

.newsletter-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.2);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.newsletter-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.newsletter-desc {
  font-size: .9rem;
  color: hsl(var(--foreground) / .65);
  max-width: 420px;
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}

.newsletter-form { max-width: 420px; margin: 0 auto; }

.newsletter-row {
  display: flex;
  gap: .5rem;
}

.newsletter-input {
  flex: 1;
  padding: .625rem 1rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: hsl(var(--foreground));
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.newsletter-input:focus { border-color: rgba(6,182,212,.5); }
.newsletter-input::placeholder { color: hsl(var(--foreground) / .35); }

.newsletter-btn {
  padding: .625rem 1.25rem;
  border-radius: .5rem;
  background: var(--cyan);
  color: #000;
  border: none;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: opacity .2s;
  display: flex;
  align-items: center;
  gap: .375rem;
  white-space: nowrap;
}
.newsletter-btn:hover { opacity: .9; }
.newsletter-btn:disabled { opacity: .6; cursor: not-allowed; }

.newsletter-msg {
  margin-top: .625rem;
  font-size: .825rem;
  border-radius: .375rem;
  padding: .5rem .75rem;
}
.newsletter-msg.success { background: rgba(34,197,94,.12); color: #22c55e; }
.newsletter-msg.error   { background: rgba(239,68,68,.12);  color: #ef4444; }

.newsletter-privacy {
  font-size: .75rem;
  color: hsl(var(--foreground) / .35);
  margin-top: .75rem;
  margin-bottom: 0;
}

/* ── FAQ section ─────────────────────────────────────────────── */
.faq-section { margin-top: 2.5rem; }

/* ── Reactions section ─────────────────────────────────────────── */
.reactions-section {
  padding: 1.5rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
  margin: 2rem 0;
}

.reactions-label {
  font-size: .875rem;
  color: hsl(var(--foreground) / .6);
  margin-bottom: 1rem;
}

.reactions-row {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.reaction-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .625rem .875rem;
  border-radius: .625rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  min-width: 64px;
}
.reaction-btn:hover { background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.3); transform: scale(1.05); }
.reaction-btn.active { background: rgba(6,182,212,.15); border-color: rgba(6,182,212,.4); transform: scale(1.05); }

.reaction-emoji { font-size: 1.5rem; line-height: 1; }

.reaction-count {
  font-size: .75rem;
  font-weight: 600;
  color: hsl(var(--foreground) / .6);
}
.reaction-btn.active .reaction-count { color: var(--cyan); }

.reaction-thanks {
  font-size: .875rem;
  color: var(--cyan);
  margin-top: .875rem;
  margin-bottom: 0;
}

/* ── Feedback section ─────────────────────────────────────────── */
.feedback-section { margin: 2rem 0; }

.feedback-inner {
  padding: 1.5rem;
  border-radius: .75rem;
  text-align: center;
}

.feedback-question {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feedback-btns {
  display: flex;
  justify-content: center;
  gap: .75rem;
}

.feedback-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.5rem;
  border-radius: .5rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: hsl(var(--foreground) / .8);
  transition: all .2s;
}
.feedback-yes:hover  { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.4);  color: #22c55e; }
.feedback-no:hover   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.4);  color: #ef4444; }
.feedback-yes.voted  { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.4);  color: #22c55e; }
.feedback-no.voted   { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.4);  color: #ef4444; }

.feedback-voted {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--cyan);
  font-size: .9rem;
  font-weight: 600;
}

/* ── Author box ───────────────────────────────────────────────── */
.author-box {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: .75rem;
}

.author-box-inner {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.author-box-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(6,182,212,.3);
  flex-shrink: 0;
}

.author-box-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: hsl(var(--foreground) / .45);
  margin-bottom: .25rem;
}

.author-box-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-decoration: none;
  margin-bottom: .5rem;
  transition: color .2s;
}
.author-box-name:hover { color: var(--cyan); }

.author-box-bio {
  font-size: .875rem;
  color: hsl(var(--foreground) / .65);
  line-height: 1.6;
  margin-bottom: .75rem;
}

.author-box-socials {
  display: flex;
  gap: .625rem;
}

.author-social-link {
  width: 32px;
  height: 32px;
  border-radius: .375rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--foreground) / .5);
  transition: background .2s, color .2s, border-color .2s;
}
.author-social-link:hover { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.3); }

/* ── Prev / Next nav ─────────────────────────────────────────── */
.prev-next-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.prev-next-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  transition: background .2s, border-color .2s;
  min-width: 0;
}
.prev-next-link:hover { background: rgba(6,182,212,.06); border-color: rgba(6,182,212,.25); }

.next-link { justify-content: flex-end; }

.prev-next-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: .5rem;
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.2);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev-next-content {
  min-width: 0;
  flex: 1;
}

.prev-next-label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan);
  margin-bottom: .25rem;
}

.prev-next-title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Related posts ────────────────────────────────────────────── */
.related-posts { margin: 2.5rem 0; }

.related-posts-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: hsl(var(--foreground));
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.related-post-card {
  border-radius: .75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s;
}
.related-post-card:hover { transform: translateY(-2px); border-color: rgba(6,182,212,.3); }

.related-card-img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; }
.related-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.related-card-img-wrap:hover .related-card-img { transform: scale(1.04); }

.related-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .375rem; }

.related-card-title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
}
.related-card-title a {
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color .2s;
}
.related-card-title a:hover { color: var(--cyan); }

.related-card-excerpt {
  font-size: .8125rem;
  color: hsl(var(--foreground) / .6);
  line-height: 1.5;
  flex: 1;
}

.related-card-date {
  font-size: .75rem;
  color: hsl(var(--foreground) / .4);
  margin-top: auto;
}

/* ── Highlight-to-share toolbar ──────────────────────────────── */
.highlight-toolbar {
  position: absolute;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .375rem;
  background: hsl(222 47% 12%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem;
  padding: .375rem .5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  transform: translateX(-50%);
  white-space: nowrap;
}

.ht-btn {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .625rem;
  border-radius: .375rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .8);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ht-btn:hover { background: rgba(6,182,212,.15); color: var(--cyan); border-color: rgba(6,182,212,.3); }

/* ── Toast notification ──────────────────────────────────────── */
.post-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(222 47% 16%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .625rem;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  color: hsl(var(--foreground));
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 9999;
  white-space: nowrap;
  animation: toast-in .2s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Post tags ───────────────────────────────────────────────── */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

/* ── Focus mode ──────────────────────────────────────────────── */
body.focus-mode .toc-sidebar { display: none; }
body.focus-mode .single-layout { grid-template-columns: 1fr; }
body.focus-mode .post-article { max-width: 720px; margin: 0 auto; }

/* ── Archive page ─────────────────────────────────────────────── */
.archive-page { padding-top: 5rem; padding-bottom: 4rem; }

.archive-hero { text-align: center; margin-bottom: 3rem; }
.archive-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(6,182,212,.3);
  background: rgba(6,182,212,.08);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}
.archive-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.archive-hero p {
  font-size: 1.0625rem;
  color: hsl(var(--foreground) / .65);
  max-width: 560px;
  margin: 0 auto;
}

/* Category filter */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.filter-btn {
  padding: .4rem .875rem;
  border-radius: 9999px;
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: hsl(var(--foreground) / .7);
  transition: all .2s;
}
.filter-btn:hover { border-color: rgba(6,182,212,.4); color: var(--cyan); background: rgba(6,182,212,.08); }
.filter-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(6,182,212,.12); }

/* Toolbar */
.archive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 2rem;
}
.archive-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.archive-search-wrap svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: hsl(var(--foreground) / .4);
  pointer-events: none;
}
.archive-search {
  width: 100%;
  padding: .5rem .75rem .5rem 2.25rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground));
  font-size: .875rem;
  outline: none;
  transition: border-color .2s;
}
.archive-search:focus { border-color: rgba(6,182,212,.4); }
.archive-search::placeholder { color: hsl(var(--foreground) / .3); }

.toolbar-btn {
  padding: .5rem .875rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .7);
  font-size: .8125rem;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: .375rem;
  white-space: nowrap;
}
.toolbar-btn:hover { background: rgba(6,182,212,.1); color: var(--cyan); border-color: rgba(6,182,212,.3); }
.toolbar-btn.active { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.4); }

.view-toggle { display: flex; gap: .25rem; }
.view-toggle-btn {
  width: 36px; height: 36px;
  border-radius: .375rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: hsl(var(--foreground) / .6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.view-toggle-btn.active { background: rgba(6,182,212,.12); color: var(--cyan); border-color: rgba(6,182,212,.4); }

/* Posts grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.posts-grid.list-view { grid-template-columns: 1fr; }

/* Post card (archive) */
.post-card {
  border-radius: .875rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, border-color .25s;
  text-decoration: none;
  color: inherit;
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(6,182,212,.35); }

.post-card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.post-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.post-card:hover .post-card-img { transform: scale(1.04); }

.post-card-badge {
  display: inline-block;
  padding: .2rem .625rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 600;
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.25);
  color: var(--cyan);
  letter-spacing: .04em;
}

.post-card-new-badge {
  display: inline-block;
  padding: .2rem .625rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(139,92,246,.15);
  border: 1px solid rgba(139,92,246,.3);
  color: #a78bfa;
}

.post-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.post-card-date, .post-card-read-time {
  font-size: .75rem;
  color: hsl(var(--foreground) / .45);
}

.post-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: hsl(var(--foreground));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-excerpt {
  font-size: .85rem;
  color: hsl(var(--foreground) / .6);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.post-card-read-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: gap .2s;
}
.post-card-read-link:hover { gap: .5rem; }

.bookmark-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: hsl(var(--foreground) / .35);
  padding: .25rem;
  border-radius: .375rem;
  display: flex;
  align-items: center;
  transition: color .2s;
}
.bookmark-btn:hover, .bookmark-btn.bookmarked { color: var(--cyan); }

/* No results */
.no-posts {
  text-align: center;
  padding: 4rem 1rem;
  color: hsl(var(--foreground) / .5);
  grid-column: 1 / -1;
}

/* Archive sentinel (infinite scroll trigger) */
#archive-sentinel { height: 60px; }

/* Loading spinner */
.archive-loading {
  display: flex;
  justify-content: center;
  padding: 2rem;
  grid-column: 1 / -1;
}

/* Light mode overrides */
[data-theme="light"] .toc-link            { color: hsl(var(--foreground) / .65); }
[data-theme="light"] .toc-drawer-panel    { background: hsl(0 0% 97%); }
[data-theme="light"] .post-card           { background: #fff; }
[data-theme="light"] .newsletter-input    { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .reaction-btn        { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .share-menu          { background: #fff; }
[data-theme="light"] .prev-next-link      { background: rgba(0,0,0,.03); }
[data-theme="light"] .author-box          { background: rgba(0,0,0,.03); }
[data-theme="light"] .feedback-inner      { background: rgba(0,0,0,.03); }
[data-theme="light"] .post-toast          { background: #fff; border-color: rgba(0,0,0,.12); color: #111; }
[data-theme="light"] .highlight-toolbar   { background: #fff; border-color: rgba(0,0,0,.12); }