/* === RESET & BASE === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #17212b;
  --bg-card: #1e2c3a;
  --bg-code: #242f3d;
  --text: #dce1e8;
  --text-dim: #8a9ab0;
  --pink: #fecdc8;
  --pink-mid: #d4a8a3;
  --pink-dim: #a88480;
  --pink-glow: rgba(254, 205, 200, 0.08);
  --link: #6ab7e2;
  --link-hover: #8dcbf0;
  --border: #2b3d4f;
  --tag-bg: #263545;
  --tag-text: #e8a838;
  --warm: #e8a838;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', monospace;
  --max-width: 740px;
  --radius: 12px;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

/* === BACKGROUND === */
body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image:
    /* Llama silhouette pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350' viewBox='0 0 350 350'%3E%3Cdefs%3E%3Cpath id='l' d='M0,48 Q0,42 2,36 L2,16 Q2,10 5,6 Q8,2 12,2 Q16,2 18,6 Q20,10 18,16 L18,36 Q20,42 20,48 L20,56 Q20,60 16,62 L4,62 Q0,60 0,56 Z M6,8 Q4,6 4,4 Q4,2 6,1 Q8,0 9,2 Z M14,8 Q16,6 16,4 Q16,2 14,1 Q12,0 11,2 Z M7,20 A2,2 0 1,0 9,20 A2,2 0 1,0 7,20 M12,20 A2,2 0 1,0 14,20 A2,2 0 1,0 12,20 M8,26 Q10,28 12,26 M3,62 L3,72 L7,72 L7,62 M13,62 L13,72 L17,72 L17,62'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23fecdc8' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23l' transform='translate(30,25) scale(0.9)' opacity='0.04'/%3E%3Cuse href='%23l' transform='translate(240,15) scale(0.7) rotate(8,10,35)' opacity='0.03'/%3E%3Cuse href='%23l' transform='translate(155,110) scale(0.6)' opacity='0.035'/%3E%3Cuse href='%23l' transform='translate(60,195) scale(0.75) rotate(-5,10,35)' opacity='0.03'/%3E%3Cuse href='%23l' transform='translate(280,175) scale(0.85)' opacity='0.04'/%3E%3Cuse href='%23l' transform='translate(170,275) scale(0.65) rotate(6,10,35)' opacity='0.03'/%3E%3Cuse href='%23l' transform='translate(310,290) scale(0.5)' opacity='0.025'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 350px 350px;
}

/* Subtle grain overlay - lightweight static pattern instead of feTurbulence */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23fff' opacity='0.015'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23fff' opacity='0.01'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
}

/* Vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(23,33,43,0.3) 0%, transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(23,33,43,0.25) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* === BACKGROUND DECORATION === */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Mesh gradient живёт здесь, а не на body:
     background-attachment: fixed не поддерживается в iOS Safari */
  background-image:
    radial-gradient(ellipse 700px 600px at 80% 5%, rgba(254,205,200,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 5% 85%, rgba(254,205,200,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(254,205,200,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 500px 500px at 20% 20%, rgba(212,168,163,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 75% 80%, rgba(254,205,200,0.06) 0%, transparent 60%);
}

[data-theme="light"] .bg-decor {
  background-image:
    radial-gradient(ellipse 700px 600px at 80% 5%, rgba(196,86,74,.08) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 5% 85%, rgba(196,86,74,.06) 0%, transparent 65%),
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(196,86,74,.03) 0%, transparent 60%),
    radial-gradient(ellipse 500px 500px at 20% 20%, rgba(212,168,163,.05) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 75% 80%, rgba(196,86,74,.04) 0%, transparent 60%);
}

/* Gradient blobs - no blur filter, soft gradients instead */
.bg-blob {
  position: absolute;
  border-radius: 50%;
}

.bg-blob-1 {
  width: 800px;
  height: 800px;
  top: -20%;
  right: -12%;
  background: radial-gradient(circle, rgba(254,205,200,0.1) 0%, rgba(254,205,200,0.03) 30%, transparent 60%);
  animation: blob-drift-1 25s ease-in-out infinite;
}

.bg-blob-2 {
  width: 700px;
  height: 700px;
  bottom: -5%;
  left: -12%;
  background: radial-gradient(circle, rgba(212,168,163,0.08) 0%, rgba(212,168,163,0.02) 30%, transparent 60%);
  animation: blob-drift-2 30s ease-in-out infinite;
}

.bg-blob-3 {
  width: 500px;
  height: 500px;
  top: 35%;
  left: 20%;
  background: radial-gradient(circle, rgba(254,205,200,0.06) 0%, transparent 55%);
  animation: blob-drift-1 22s ease-in-out infinite reverse;
}

@keyframes blob-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-30px, 40px, 0); }
}

@keyframes blob-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(40px, -30px, 0); }
}

/* Scattered llama avatars - static, no animations */
.llama-bg {
  position: absolute;
  background: url('/images/avatar.jpg') center/cover no-repeat;
  border-radius: 50%;
  pointer-events: none;
  filter: saturate(0.3) brightness(0.8);
}

.llama-bg-1 {
  width: 220px;
  height: 220px;
  top: 2%;
  left: 4%;
  opacity: 0.045;
  transform: rotate(-10deg);
}

.llama-bg-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  right: -40px;
  opacity: 0.05;
  transform: rotate(8deg);
}

.llama-bg-3 {
  width: 140px;
  height: 140px;
  top: 40%;
  right: 6%;
  opacity: 0.035;
  transform: rotate(-6deg);
}

.llama-bg-4 {
  width: 180px;
  height: 180px;
  bottom: 20%;
  left: 2%;
  opacity: 0.04;
  transform: rotate(12deg);
}


a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--link-hover);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

/* === LANGUAGE SWITCH === */
.lang-switch{display:inline-flex;align-items:center;gap:0.15rem;font-family:var(--font-mono);font-size:0.75rem;margin-left:8px}
.lang-active{color:var(--pink);font-weight:700;padding:0.2rem 0.45rem;background:rgba(254,205,200,0.08);border-radius:4px;cursor:default}
.lang-link{color:var(--text-dim);padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;transition:color .2s,background .2s;text-decoration:none}
.lang-link:hover{color:var(--pink);background:rgba(254,205,200,0.05)}

/* === FLOATING NAV === */
.float-nav {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.float-nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.float-nav-controls .lang-switch {
  margin-left: 0;
}

.float-nav-controls .theme-toggle {
  margin-left: 4px;
}

.float-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(23, 33, 43, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.float-nav-home:hover {
  border-color: var(--pink-dim);
  box-shadow: 0 0 20px rgba(254, 205, 200, 0.15);
}

.float-nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pink);
}

/* === HERO === */
.hero {
  padding: 5rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(254, 205, 200, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: hero-glow-pulse 6s ease-in-out infinite;
}

@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero-avatar-wrap {
  position: relative;
  margin-bottom: 1.5rem;
}

.hero-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pink);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 30px rgba(254, 205, 200, 0.12), 0 0 60px rgba(254, 205, 200, 0.05);
  animation: avatar-glow 4s ease-in-out infinite;
}

.hero-avatar-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(254, 205, 200, 0.2);
  animation: ring-spin 10s linear infinite;
  pointer-events: none;
}

.hero-avatar-ring::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(254, 205, 200, 0.7), 0 0 24px rgba(254, 205, 200, 0.3);
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(254, 205, 200, 0.12), 0 0 60px rgba(254, 205, 200, 0.05); }
  50% { box-shadow: 0 0 40px rgba(254, 205, 200, 0.2), 0 0 80px rgba(254, 205, 200, 0.1); }
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.4rem;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 60%, var(--pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-dot {
  -webkit-text-fill-color: var(--pink);
  font-weight: 900;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 420px;
}

.hero-terminal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.4rem 1rem;
  background: rgba(36, 47, 61, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.term-prompt {
  color: var(--pink);
  font-weight: 700;
}

.term-text {
  color: var(--text-dim);
}

.term-cursor {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  background: var(--pink);
  animation: cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
  border-radius: 1px;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* === POST CARDS === */
.posts-list {
  display: flex;
  flex-direction: column;
}

.post-card {
  padding: 1.5rem 1.3rem 1.5rem 1.6rem;
  margin-bottom: 0.6rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid transparent;
  border-left: 3px solid var(--pink-dim);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s;
}

/* Gradient top line */
.post-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--warm) 50%, transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.post-card:hover {
  border-color: rgba(254, 205, 200, 0.1);
  border-left-color: var(--pink);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.25),
    inset 3px 0 12px -6px rgba(254, 205, 200, 0.06);
  transform: translateX(3px);
  background: linear-gradient(90deg, rgba(254, 205, 200, 0.025) 0%, var(--bg-card) 25%);
}

.post-card:hover::before {
  opacity: 0.7;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.post-meta time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--tag-text);
  background: var(--tag-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

a.tag:hover {
  color: var(--tag-text);
  background: var(--pink-glow);
}

a.series-tag:hover {
  color: var(--pink);
  border-color: var(--pink-dim);
}

.post-card :is(h2, h3) {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}

.post-card :is(h2, h3) a {
  color: #fff;
  transition: color 0.2s;
}

.post-card :is(h2, h3) a:hover {
  color: var(--pink);
}

.post-summary {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* === PAGE TITLE (страницы /series/ и /posts/) === */
.page-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1.5rem;
}

[data-theme="light"] .page-title { color: var(--text); }

/* === «ЧИТАТЬ» / «ВСЕ СТАТЬИ» === */
.read-more,
.section-more {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--pink);
  text-decoration: none;
}

.read-more { margin-top: 0.6rem; }
.section-more { margin-top: 1rem; }

.read-more:hover,
.section-more:hover { color: var(--pink-mid); }

/* === BACK LINK === */
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--pink);
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.back-link:hover {
  color: var(--pink-mid);
}

/* === SINGLE POST === */
.post-full {
  padding: 2rem 0 4rem;
}

.post-header {
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}

.post-header h1 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* === POST CONTENT === */
.post-content {
  font-size: 1rem;
  line-height: 1.8;
}

.post-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 2.2rem 0 0.8rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.post-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 1.8rem 0 0.6rem;
}

.post-content p {
  margin-bottom: 1.1rem;
}

.post-content ul, .post-content ol {
  margin-bottom: 1.1rem;
  padding-left: 1.5rem;
}

.post-content li {
  margin-bottom: 0.35rem;
}

.post-content strong {
  color: #fff;
  font-weight: 600;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}

.post-content blockquote {
  border-left: 3px solid var(--pink);
  padding: 0.7rem 1.1rem;
  margin: 1.3rem 0;
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-dim);
}

.post-content blockquote p {
  margin-bottom: 0;
}

.post-content code {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.87em;
  background: var(--bg-code);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--pink);
}

.post-content pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  margin: 1.3rem 0;
  line-height: 1.5;
}

.post-content pre code {
  overflow-wrap: normal;
  background: none;
  padding: 0;
  font-size: 0.84rem;
  color: var(--text);
}

.post-content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(106, 183, 226, 0.3);
  text-underline-offset: 3px;
}

.post-content a:hover {
  text-decoration-color: var(--pink);
  color: var(--pink);
}

.post-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.3rem 0;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.post-content th,
.post-content td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.75rem;
  text-align: left;
}

.post-content th {
  background: var(--bg-card);
  color: #fff;
  font-weight: 600;
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* === POST NAV (prev/next) === */
.post-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

.post-nav-link,
.post-nav-up {
  color: var(--pink);
  text-decoration: none;
  transition: color 0.2s;
}

.post-nav-link:hover,
.post-nav-up:hover {
  color: var(--pink-mid);
}

.post-nav-up { margin-right: auto; }

.post-nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-nav-sep {
  color: var(--border);
}

/* === FOOTER === */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 1.3rem 0;
}

.footer-llama {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--pink-dim);
  margin-bottom: 0.4rem;
  opacity: 0.5;
  transition: opacity 0.3s;
  letter-spacing: 0.05em;
}

.footer-llama:hover {
  opacity: 1;
}

.site-footer p {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}

.site-footer a {
  color: var(--pink-dim);
  transition: color 0.2s;
}

.site-footer a:hover {
  color: var(--pink);
}

/* === RESPONSIVE === */
/* Плавающая навигация фиксирована и не занимает места в потоке —
   на узких экранах она ложилась на breadcrumb и полосу прогресса статьи */
@media (max-width: 768px) {
  /* Аватар и контролы в одну строку: вертикальный стек занимал ~110px
     и накрывал бейдж части вместе с полосой прогресса */
  .float-nav {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
  }

  .float-nav-home {
    width: 40px;
    height: 40px;
  }

  .float-nav-avatar {
    width: 28px;
    height: 28px;
  }

  .post-full,
  .series-landing { padding-top: 4.5rem; }

  .hero { padding-top: 4.5rem; }

  .float-nav-controls {
    padding: 0.2rem 0.55rem;
    background: rgba(23, 33, 43, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 100px;
  }

  [data-theme="light"] .float-nav-controls {
    background: rgba(255, 255, 255, 0.92);
    border-color: #b8aea6;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }

  .hero {
    padding: 3rem 0 2rem;
  }

  .hero-avatar {
    width: 96px;
    height: 96px;
  }

  .hero-avatar-ring {
    inset: -6px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-glow {
    width: 300px;
    height: 300px;
  }

  .post-header h1 {
    font-size: 1.4rem;
  }

  .post-card {
    padding: 1.2rem 1rem 1.2rem 1.15rem;
  }

  .post-card:hover {
    transform: none;
  }

  .llama-bg { display: none; }
  .bg-blob-1 { width: 350px; height: 350px; }
  .bg-blob-2 { width: 300px; height: 300px; }
  .bg-blob-3 { display: none; }

  .float-nav {
    top: 0.75rem;
    right: 0.75rem;
  }

  .post-meta {
    padding-right: 0;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-glow,
  .bg-blob,
  .hero-avatar,
  .hero-avatar-ring,
  .term-cursor,
  .vt-cursor { animation: none; }
}

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
  border-radius: 3px;
}

.vt-row:focus-visible,
.vt-more:focus-visible { outline-offset: -2px; background: var(--pink-glow); }

/* === SELECTION === */
::selection {
  background: rgba(254, 205, 200, 0.25);
  color: #fff;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pink-dim);
}

/* ===== THEME SYSTEM ===== */
.theme-toggle{background:none;border:1px solid var(--pink-dim);border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--pink);transition:all .2s;flex-shrink:0;font-size:16px;padding:0;margin-left:4px}
.theme-toggle:hover{color:var(--pink);border-color:var(--pink);background:var(--pink-glow)}
.theme-toggle .ico-sun{display:block}
.theme-toggle .ico-moon{display:none;align-items:center;justify-content:center}
[data-theme="light"] .theme-toggle{color:#17212b;border-color:#2b3d4f}
[data-theme="light"] .theme-toggle:hover{color:#17212b;border-color:#17212b;background:rgba(23,33,43,.08)}
[data-theme="light"] .theme-toggle .ico-sun{display:none}
[data-theme="light"] .theme-toggle .ico-moon{display:inline-flex;text-shadow:0 0 3px #17212b,0 0 3px #17212b,0 0 5px #17212b,0 0 7px #17212b}

/* Light theme variables */
[data-theme="light"] {
  --bg: #f4f0ec;
  --bg-card: #ffffff;
  --bg-code: #ece7e2;
  --text: #2a2724;
  --text-dim: #6e6862;
  --pink: #c4564a;
  --pink-mid: #d4736a;
  --pink-dim: #c99089;
  --pink-glow: rgba(196,86,74,0.06);
  --link: #1a6bab;
  --link-hover: #135685;
  --border: #d8d0c9;
  --tag-bg: #f0e8e0;
  --tag-text: #9a7209;
  --warm: #9a7209;
}

/* Light body backgrounds */
[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350' viewBox='0 0 350 350'%3E%3Cdefs%3E%3Cpath id='l' d='M0,48 Q0,42 2,36 L2,16 Q2,10 5,6 Q8,2 12,2 Q16,2 18,6 Q20,10 18,16 L18,36 Q20,42 20,48 L20,56 Q20,60 16,62 L4,62 Q0,60 0,56 Z M6,8 Q4,6 4,4 Q4,2 6,1 Q8,0 9,2 Z M14,8 Q16,6 16,4 Q16,2 14,1 Q12,0 11,2 Z M7,20 A2,2 0 1,0 9,20 A2,2 0 1,0 7,20 M12,20 A2,2 0 1,0 14,20 A2,2 0 1,0 12,20 M8,26 Q10,28 12,26 M3,62 L3,72 L7,72 L7,62 M13,62 L13,72 L17,72 L17,62'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23c4564a' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cuse href='%23l' transform='translate(30,25) scale(0.9)' opacity='0.06'/%3E%3Cuse href='%23l' transform='translate(240,15) scale(0.7) rotate(8,10,35)' opacity='0.04'/%3E%3Cuse href='%23l' transform='translate(155,110) scale(0.6)' opacity='0.05'/%3E%3Cuse href='%23l' transform='translate(60,195) scale(0.75) rotate(-5,10,35)' opacity='0.04'/%3E%3Cuse href='%23l' transform='translate(280,175) scale(0.85)' opacity='0.06'/%3E%3Cuse href='%23l' transform='translate(170,275) scale(0.65) rotate(6,10,35)' opacity='0.04'/%3E%3Cuse href='%23l' transform='translate(310,290) scale(0.5)' opacity='0.035'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 350px 350px;
}
[data-theme="light"] body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000' opacity='0.02'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000' opacity='0.015'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after {
  background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(244,240,236,.4) 0%, transparent 60%),
              radial-gradient(ellipse 100% 50% at 50% 100%, rgba(244,240,236,.3) 0%, transparent 50%);
}
[data-theme="light"] .bg-blob-1 { background: radial-gradient(circle, rgba(196,86,74,.07) 0%, rgba(196,86,74,.02) 30%, transparent 60%); }
[data-theme="light"] .bg-blob-2 { background: radial-gradient(circle, rgba(212,168,163,.06) 0%, rgba(212,168,163,.015) 30%, transparent 60%); }
[data-theme="light"] .bg-blob-3 { background: radial-gradient(circle, rgba(196,86,74,.04) 0%, transparent 55%); }
[data-theme="light"] .llama-bg { filter: saturate(.4) brightness(.6); }
[data-theme="light"] ::selection { background: rgba(196,86,74,.25); color: #000; }

/* Light: float-nav */
[data-theme="light"] .float-nav-home { background: rgba(255,255,255,.9); border-color: #b8aea6; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
[data-theme="light"] .float-nav-home:hover { border-color: var(--pink); box-shadow: 0 2px 12px rgba(196,86,74,.18); }

/* Light: hero */
[data-theme="light"] .hero-glow { background: radial-gradient(circle, rgba(196,86,74,.06) 0%, transparent 65%); }
[data-theme="light"] .hero-title { background: linear-gradient(135deg, #1a1714 60%, #b5443a 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .hero-sub { color: #564f49; }
[data-theme="light"] .hero-terminal { background: rgba(36,47,61,0.85); }
[data-theme="light"] .hero { border-bottom-color: #c5bbb3; }
[data-theme="light"] .term-text { color: #d0d8e0; }
[data-theme="light"] .term-prompt { color: #fecdc8; }
[data-theme="light"] .hero-avatar-ring { border-color: rgba(196,86,74,.25); }

/* Light: post cards */
[data-theme="light"] .post-card { background: var(--bg-card); border: 1px solid rgba(196,86,74,.1); border-left: 3px solid rgba(196,86,74,.3); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
[data-theme="light"] .post-card :is(h2, h3) a { color: var(--text); }
[data-theme="light"] .post-card :is(h2, h3) a:hover { color: var(--pink); }
[data-theme="light"] .post-card:hover { border-color: rgba(196,86,74,.15); border-left-color: var(--pink); box-shadow: 0 8px 28px rgba(0,0,0,.06), inset 3px 0 12px -6px rgba(196,86,74,.08); background: linear-gradient(90deg, rgba(196,86,74,.03) 0%, var(--bg-card) 25%); }
[data-theme="light"] .post-summary { color: #5a534d; }
[data-theme="light"] .post-meta time { color: var(--text-dim); }

/* Light: tags */
[data-theme="light"] .tag { color: #7a5c00; background: #f0e8e0; border: 1px solid #ddd2c5; }

/* Light: мелкий моно-текст акцентом — #c4564a даёт лишь 3.88:1, нужен темнее */
[data-theme="light"] .back-link,
[data-theme="light"] .post-nav-link,
[data-theme="light"] .post-nav-up,
[data-theme="light"] .series-nav-label,
[data-theme="light"] .series-hero-count,
[data-theme="light"] .lang-active,
[data-theme="light"] .series-badge,
[data-theme="light"] .vt-prompt,
[data-theme="light"] .vt-hash,
[data-theme="light"] .vt-name { color: #a83f34; }

/* Light: номера статей в оглавлении серии — 2.68:1 */
[data-theme="light"] .series-toc-num,
[data-theme="light"] .series-mini-toc-list .num { color: #a8564a; }

/* Light: lang */
[data-theme="light"] .lang-active{background:rgba(196,86,74,0.08)}
[data-theme="light"] .lang-link:hover{background:rgba(196,86,74,0.05)}

/* Light: article content — CRITICAL: white text on white bg fix */
[data-theme="light"] .post-header h1,
[data-theme="light"] .post-content h2,
[data-theme="light"] .post-content h3,
[data-theme="light"] .post-content strong,
[data-theme="light"] .post-content th { color: var(--text); }

/* Light: code blocks — keep dark style for readability */
[data-theme="light"] pre { background: #1e2c3a !important; color: #dce1e8 !important; border: 1px solid #2b3d4f !important; }
[data-theme="light"] .post-content pre code { color: #dce1e8 !important; }
[data-theme="light"] code:not(pre code) { background: rgba(196,86,74,.12); color: #b5423a; }
[data-theme="light"] pre::-webkit-scrollbar-track { background: #242f3d; }
[data-theme="light"] pre::-webkit-scrollbar-thumb { background: #2b3d4f; }
[data-theme="light"] pre::-webkit-scrollbar-thumb:hover { background: #a88480; }

/* Light: scrollbar, toc, footer */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0b7af; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a8706a; }
[data-theme="light"] .series-mini-toc-list li a:hover { background: rgba(196,86,74,.06); }
[data-theme="light"] .site-footer p { color: #5a544e; }
[data-theme="light"] .site-footer a { color: #8f544c; }
[data-theme="light"] .site-footer a:hover { color: var(--pink); }

/* === SYNTAX HIGHLIGHTING (dark/monokai) === */
.chroma { color:#f8f8f2; background-color: var(--bg-code); }
.chroma .err { color:#960050; background-color:#1e0010 }
.chroma .lnlinks { text-decoration:none; color:inherit }
.chroma .hl { background-color:#3c3d38 }
.chroma .lnt,.chroma .ln { color:#7f7f7f }
.chroma .k,.chroma .kc,.chroma .kd,.chroma .kp,.chroma .kr,.chroma .kt { color:#66d9ef }
.chroma .kn { color:#f92672 }
.chroma .na,.chroma .nc,.chroma .nd,.chroma .ne,.chroma .nx,.chroma .nf,.chroma .fm { color:#a6e22e }
.chroma .no { color:#66d9ef }
.chroma .nt { color:#f92672 }
.chroma .l,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,.chroma .mo,.chroma .se { color:#ae81ff }
.chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss,.chroma .ld { color:#e6db74 }
.chroma .o,.chroma .ow { color:#f92672 }
.chroma .c,.chroma .ch,.chroma .cm,.chroma .c1,.chroma .cs,.chroma .cp,.chroma .cpf,.chroma .gu { color:#75715e }
.chroma .gd { color:#f92672 }
.chroma .gi { color:#a6e22e }
.chroma .ge { font-style:italic }
.chroma .gs { font-weight:bold }

/* === SYNTAX HIGHLIGHTING (light theme uses same monokai on dark bg) === */
[data-theme="light"] .chroma { color:#f8f8f2; background-color: #242f3d; }

/* Smooth transitions */
html[data-theme] { transition: background-color .3s; }
html[data-theme] body,
html[data-theme] .float-nav-home,
html[data-theme] .post-card,
html[data-theme] .hero { transition: background .3s, border-color .3s, color .3s; }

/* === СЕРИИ: листинг каталога (ls -l ~/series) === */
.vt-window {
  font-family: var(--font-mono);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}

/* Заголовок секции = командная строка */
.vt-cmd {
  display: block;
  margin: 0;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-code);
  border-bottom: 1px solid var(--border);
}

.vt-prompt { color: var(--pink); font-weight: 700; }
.vt-flag   { color: var(--text-dim); }
.vt-path   { color: var(--warm); }

/* Текст заголовка для скринридеров (визуально скрыт) */
.vt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vt-total {
  padding: 0.55rem 1.1rem 0.15rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

.vt-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0;
}

.vt-row {
  display: grid;
  grid-template-columns: 10ch 13ch minmax(0, 1fr) 9ch 10ch 10ch;
  column-gap: 1rem;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}

.vt-li + .vt-li .vt-row { border-top: 1px solid var(--border); }

.vt-row:hover { background: var(--pink-glow); }
.vt-row:hover .vt-name { text-decoration: underline; text-underline-offset: 3px; }

.vt-mode {
  color: var(--text-dim);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
}

.vt-name {
  color: var(--pink);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-title {
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-count {
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}

.vt-date {
  color: var(--text-dim);
  white-space: nowrap;
}

.vt-status { white-space: nowrap; font-size: 0.74rem; }

/* Описание серии — комментарием во всю ширину строки (страница /series/) */
.vt-row-desc { align-items: start; row-gap: 0.35rem; }

.vt-desc {
  grid-column: 1 / -1;
  white-space: normal;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.vt-hash { color: var(--pink-dim); }
.vt-status-done { color: var(--pink-mid); }
.vt-status-live { color: var(--warm); }
.vt-status-soon { color: var(--warm); }

.vt-cursor {
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 3px;
  background: var(--warm);
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: cursor-blink 1s step-end infinite;
}

/* Хвостовая команда — ссылка на страницу всех серий */
.vt-more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  background: var(--bg-code);
  transition: background 0.15s, color 0.15s;
}

.vt-more:hover { background: var(--pink-glow); color: var(--text); }
.vt-more:hover .vt-cd { color: var(--pink); }
.vt-more .vt-comment { color: var(--text-dim); }

/* Светлая тема: листинг */
[data-theme="light"] .vt-window { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
[data-theme="light"] .vt-mode { opacity: 0.75; }
[data-theme="light"] .vt-status-done { color: var(--pink); }
[data-theme="light"] .vt-status-live,
[data-theme="light"] .vt-status-soon { color: #8a6600; }
[data-theme="light"] .vt-cursor { background: #8a6600; }

/* === HOME SECTIONS === */
.home-section {
  margin-bottom: 2rem;
}

.home-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  margin-bottom: 1rem;
  padding-left: 0.2rem;
}

/* === SERIES LANDING === */
.series-landing {
  padding: 2rem 0 4rem;
}

.series-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.series-hero-tag {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pink);
  background: rgba(254, 205, 200, 0.08);
  border: 1px solid rgba(254, 205, 200, 0.15);
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-top: 0.25rem;
}

.series-hero-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.series-hero-desc {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.series-hero-count {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--pink-dim);
}

/* === SERIES TOC === */
.series-toc {
  list-style: none;
  counter-reset: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.series-toc-item {
  list-style: none;
}

.series-toc-item a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.2rem;
  border-radius: 100px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid rgba(254, 205, 200, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
}

.series-toc-item a:hover {
  border-color: var(--pink-dim);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(254, 205, 200, 0.08);
  background: linear-gradient(90deg, rgba(254, 205, 200, 0.05) 0%, var(--bg-card) 30%);
  transform: translateX(3px);
}

.series-toc-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--pink-mid);
  min-width: 1.8rem;
  flex-shrink: 0;
}

.series-toc-item a:hover .series-toc-num {
  color: var(--pink);
}

.series-toc-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

.series-toc-item a:hover .series-toc-title {
  color: #fff;
}

/* === SERIES BADGE (clickable link) === */
.series-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--pink);
  background: rgba(254, 205, 200, 0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(254, 205, 200, 0.12);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.series-badge:hover {
  background: rgba(254, 205, 200, 0.15);
  border-color: var(--pink);
  color: var(--pink);
}

/* === SERIES BREADCRUMB (back-link + badge in one row) === */
.series-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.series-breadcrumb .back-link {
  margin-bottom: 0;
}

/* === SERIES PROGRESS BAR === */
.series-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 1.2rem;
  overflow: hidden;
}

.series-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--warm));
  border-radius: 2px;
  width: calc(var(--n) / var(--total) * 100%);
}

/* === SERIES MINI TOC (collapsible) === */
.series-mini-toc {
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}

.series-mini-toc-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text-dim);
  list-style: none;
}

.series-mini-toc-toggle::-webkit-details-marker { display: none; }

.series-mini-toc-chevron {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text-dim);
  transition: transform 0.2s;
}

.series-mini-toc-chevron::before {
  content: "▼";
}

.series-mini-toc[open] .series-mini-toc-chevron {
  transform: rotate(180deg);
}

.series-mini-toc-list {
  list-style: none;
  padding: 0 0.5rem 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.series-mini-toc-list li a {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.series-mini-toc-list li a:hover {
  background: rgba(254, 205, 200, 0.05);
  color: var(--text);
}

.series-mini-toc-list li.current a {
  color: var(--pink);
  background: rgba(254, 205, 200, 0.08);
  font-weight: 600;
}

.series-mini-toc-list .num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--pink-mid);
  min-width: 1.5rem;
  flex-shrink: 0;
}

.series-mini-toc-list li.current .num {
  color: var(--pink);
}

/* === SERIES NAV BOTTOM (prev/next with titles) === */
.series-nav-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.series-nav-prev,
.series-nav-next {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.series-nav-next { text-align: right; grid-column: 2; }
.series-nav-prev { grid-column: 1; }

.series-nav-prev:hover,
.series-nav-next:hover {
  border-color: var(--pink-dim);
  background: rgba(254, 205, 200, 0.03);
}

.series-nav-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--pink);
}

.series-nav-title {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.35;
}

/* === SERIES TAG (on homepage latest) === */
.series-tag {
  background: rgba(254, 205, 200, 0.08);
  border: 1px solid rgba(254, 205, 200, 0.12);
  color: var(--pink);
}

/* === LIGHT THEME: SERIES === */
[data-theme="light"] .series-hero-title { color: var(--text); }
[data-theme="light"] .series-toc-item a { background: var(--bg-card); border-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
[data-theme="light"] .series-toc-item a:hover { border-color: var(--pink); box-shadow: 0 4px 12px rgba(0,0,0,.06); background: linear-gradient(90deg, rgba(196,86,74,.03) 0%, var(--bg-card) 30%); }
[data-theme="light"] .series-toc-item a:hover .series-toc-title { color: var(--text); }
[data-theme="light"] .series-badge { background: rgba(196,86,74,.08); border-color: rgba(196,86,74,.12); }
[data-theme="light"] .series-badge:hover { background: rgba(196,86,74,.15); }
[data-theme="light"] .series-hero-tag { background: rgba(196,86,74,.06); border-color: rgba(196,86,74,.15); }
[data-theme="light"] .series-mini-toc { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .series-mini-toc-list li.current a { background: rgba(196,86,74,.08); }
[data-theme="light"] .series-nav-prev,
[data-theme="light"] .series-nav-next { border-color: var(--border); }
[data-theme="light"] .series-nav-prev:hover,
[data-theme="light"] .series-nav-next:hover { border-color: var(--pink); background: rgba(196,86,74,.03); }
[data-theme="light"] .series-tag { background: rgba(196,86,74,.06); border-color: rgba(196,86,74,.12); }
[data-theme="light"] .series-progress { background: var(--border); }
[data-theme="light"] .series-progress-bar { background: linear-gradient(90deg, var(--pink), var(--warm)); }

/* === RESPONSIVE: SERIES === */
@media (max-width: 640px) {
  /* Листинг: прячем декоративные колонки, строки не переносятся */
  .vt-row {
    grid-template-columns: minmax(0, 1fr) 9ch 10ch;
    column-gap: 0.7rem;
    padding: 0.55rem 0.9rem;
  }

  .vt-mode,
  .vt-title,
  .vt-date { display: none; }

  .vt-cmd,
  .vt-total,
  .vt-more { padding-left: 0.9rem; padding-right: 0.9rem; }

  .series-hero {
    flex-direction: column;
    gap: 0.6rem;
  }

  .series-hero-tag {
    font-size: 0.88rem;
    padding: 0.5rem 0.7rem;
  }

  .series-hero-title {
    font-size: 1.4rem;
  }

  .series-toc-item a {
    padding: 0.75rem 0.8rem;
    gap: 0.6rem;
  }

  .series-toc-title {
    font-size: 0.92rem;
  }

  .series-toc-item a {
    min-height: 44px;
  }

  /* Touch target fixes */
  .theme-toggle {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .lang-switch {
    min-height: 44px;
    align-items: center;
  }

  .lang-active,
  .lang-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
  }

  .back-link {
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .post-nav-link,
  .post-nav-up {
    padding: 0.5rem 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .series-badge {
    padding: 0.4rem 0.7rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Series nav bottom mobile */
  .series-nav-bottom {
    grid-template-columns: 1fr;
  }

  .series-nav-next {
    grid-column: 1;
    text-align: left;
  }

  .series-mini-toc-list {
    max-height: 250px;
  }

  .series-mini-toc-toggle {
    min-height: 44px;
    align-items: center;
  }

  .series-mini-toc-list li a {
    min-height: 44px;
    align-items: center;
  }

  .post-nav-links {
    gap: 1rem;
  }
}

/* === СЕРИЯ БЕЗ СТАТЕЙ (анонс) === */
.series-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 1.2rem 1.1rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* === ПАГИНАЦИЯ (архив /posts/) === */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.pagination .page-item { list-style: none; }

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.pagination .page-link:hover {
  border-color: var(--pink-dim);
  color: var(--pink);
  background: var(--pink-glow);
}

.pagination .page-item.active .page-link {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-glow);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}