/* ✿ CTH.JP — Miuna Hamasaki ✿
   Retro anime 2008 kawaii uwu
   mas responsivo pra 2025 :3 */

@view-transition {
  navigation: auto;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: 0; }

/* Space Mono */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/space-mono-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/space-mono-v17-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fontes/space-mono-v17-latin-italic.woff2') format('woff2'); }
/* M PLUS Rounded 1c */
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/m-plus-rounded-1c-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/m-plus-rounded-1c-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'M PLUS Rounded 1c'; font-style: normal; font-weight: 800; font-display: swap; src: url('fontes/m-plus-rounded-1c-v20-latin-800.woff2') format('woff2'); }
/* JetBrains Mono */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontes/jetbrains-mono-v24-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('fontes/jetbrains-mono-v24-latin-italic.woff2') format('woff2'); }

/* ═══════════════════════════════════════
   RESET & VARIÁVEIS — TEMA CLARO PASTEL
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #f0f8ff;
  --surface:      #ffffff;
  --surface2:     #e8f4ff;
  --surface3:     #d8eeff;
  --border:       #aed0e8;
  --border-hi:    #68aed8;
  --accent:         #1878b4;
  --accent-light:   #3a9fd4;
  --accent-dim:     rgba(24,120,180,0.08);
  --purple:       #2060a8;
  --lavender:     #3570b0;
  --cyan:         #007fae;
  --cyan-dim:     rgba(0,127,174,0.07);
  --yellow:       #8b5a00;
  --green:        #1a9a55;
  --text:         #091830;
  --text-muted:   #284870;
  --text-dim:     #4068a0;
  --code-bg:      #e0eeff;
  --code-color:   #1a4888;
  --fn-head:      'Space Mono', monospace;
  --fn-body:      'M PLUS Rounded 1c', 'Segoe UI', sans-serif;
  --fn-mono:      'JetBrains Mono', 'Consolas', monospace;
  --r:            8px;
  --r-lg:         16px;
  --glow-accent:    0 0 14px rgba(24,120,180,0.18);
  --glow-cyan:    0 0 14px rgba(0,127,174,0.14);
  --glow-purp:    0 0 14px rgba(32,96,168,0.18);
  --title-glow:   0 0 18px rgba(24,120,180,0.35), 0 0 36px rgba(24,120,180,0.15);
  --counter-glow: 0 0 10px rgba(192,122,0,0.5);
  --green-dim:    rgba(26,154,85,0.09);
  --green-border: rgba(26,154,85,0.28);
  --divider:      rgba(100,160,210,0.3);
  --table-stripe: rgba(180,220,240,0.2);
}

/* ═══════════════════════════════════════
   DARK MODE ADAPTATIVO (OS preference)
═══════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #010b18;
    --surface:      #051220;
    --surface2:     #091c2e;
    --surface3:     #0e2438;
    --border:       #143050;
    --border-hi:    #3878aa;
    --accent:         #55c0f0;
    --accent-light:   #a8dcf8;
    --accent-dim:     rgba(85,192,240,0.12);
    --purple:       #4898d8;
    --lavender:     #88c8f0;
    --cyan:         #00e5ff;
    --cyan-dim:     rgba(0,229,255,0.08);
    --yellow:       #ffe066;
    --green:        #39ff99;
    --text:         #e0f0ff;
    --text-muted:   #78a8c8;
    --text-dim:     #5888a8;
    --code-bg:      #020c18;
    --code-color:   #a8d8f8;
    --glow-accent:    0 0 18px rgba(85,192,240,0.45);
    --glow-cyan:    0 0 18px rgba(0,229,255,0.3);
    --glow-purp:    0 0 18px rgba(72,152,216,0.4);
    --title-glow:   0 0 30px rgba(85,192,240,0.9), 0 0 60px rgba(85,192,240,0.4);
    --counter-glow: 0 0 12px rgba(255,224,102,0.7);
    --green-dim:    rgba(57,255,153,0.09);
    --green-border: rgba(57,255,153,0.25);
    --divider:      rgba(20,48,80,0.6);
    --table-stripe: rgba(255,255,255,0.015);
  }
}

/* ═══════════════════════════════════════
   DARK MODE MANUAL (sobrescreve preferência do SO)
═══════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:           #010b18;
  --surface:      #051220;
  --surface2:     #091c2e;
  --surface3:     #0e2438;
  --border:       #143050;
  --border-hi:    #3878aa;
  --accent:         #55c0f0;
  --accent-light:   #a8dcf8;
  --accent-dim:     rgba(85,192,240,0.12);
  --purple:       #4898d8;
  --lavender:     #88c8f0;
  --cyan:         #00e5ff;
  --cyan-dim:     rgba(0,229,255,0.08);
  --yellow:       #ffe066;
  --green:        #39ff99;
  --text:         #e0f0ff;
  --text-muted:   #78a8c8;
  --text-dim:     #385878;
  --code-bg:      #020c18;
  --code-color:   #a8d8f8;
  --glow-accent:    0 0 18px rgba(85,192,240,0.45);
  --glow-cyan:    0 0 18px rgba(0,229,255,0.3);
  --glow-purp:    0 0 18px rgba(72,152,216,0.4);
  --title-glow:   0 0 30px rgba(85,192,240,0.9), 0 0 60px rgba(85,192,240,0.4);
  --counter-glow: 0 0 12px rgba(255,224,102,0.7);
  --green-dim:    rgba(57,255,153,0.09);
  --green-border: rgba(57,255,153,0.25);
  --divider:      rgba(20,48,80,0.6);
  --table-stripe: rgba(255,255,255,0.015);
}

html[data-theme="light"] {
  --bg:           #f0f8ff;
  --surface:      #ffffff;
  --surface2:     #e8f4ff;
  --surface3:     #d8eeff;
  --border:       #aed0e8;
  --border-hi:    #68aed8;
  --accent:         #1878b4;
  --accent-light:   #3a9fd4;
  --accent-dim:     rgba(24,120,180,0.08);
  --purple:       #2060a8;
  --lavender:     #3570b0;
  --cyan:         #007fae;
  --cyan-dim:     rgba(0,127,174,0.07);
  --yellow:       #8b5a00;
  --green:        #1a9a55;
  --text:         #091830;
  --text-muted:   #284870;
  --text-dim:     #4068a0;
  --code-bg:      #e0eeff;
  --code-color:   #1a4888;
  --glow-accent:    0 0 14px rgba(24,120,180,0.18);
  --glow-cyan:    0 0 14px rgba(0,127,174,0.14);
  --glow-purp:    0 0 14px rgba(32,96,168,0.18);
  --title-glow:   0 0 18px rgba(24,120,180,0.35), 0 0 36px rgba(24,120,180,0.15);
  --counter-glow: 0 0 10px rgba(192,122,0,0.5);
  --green-dim:    rgba(26,154,85,0.09);
  --green-border: rgba(26,154,85,0.28);
  --divider:      rgba(100,160,210,0.3);
  --table-stripe: rgba(180,220,240,0.2);
}

html[data-theme="dark"] body::before {
  background-image:
    radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,.7) 0,transparent 100%),
    radial-gradient(1px 1px at 22% 78%, rgba(135,200,255,.6) 0,transparent 100%),
    radial-gradient(1px 1px at 38% 38%, rgba(135,200,255,.6) 0,transparent 100%),
    radial-gradient(1px 1px at 54% 62%, rgba(255,255,255,.5) 0,transparent 100%),
    radial-gradient(1px 1px at 68% 22%, rgba(0,229,255,.5)   0,transparent 100%),
    radial-gradient(1px 1px at 82% 72%, rgba(135,200,255,.6) 0,transparent 100%),
    radial-gradient(2px 2px at 14% 48%, rgba(135,200,255,.7) 0,transparent 100%),
    radial-gradient(2px 2px at 74% 55%, rgba(135,200,255,.6) 0,transparent 100%),
    radial-gradient(1px 1px at 48%  8%, rgba(0,229,255,.4)   0,transparent 100%),
    radial-gradient(1px 1px at  4% 92%, rgba(255,255,255,.5) 0,transparent 100%),
    radial-gradient(1px 1px at 92% 14%, rgba(100,180,255,.4) 0,transparent 100%),
    radial-gradient(1px 1px at 32% 95%, rgba(135,200,255,.4) 0,transparent 100%),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,.4) 0,transparent 100%),
    radial-gradient(2px 2px at 58% 88%, rgba(100,180,255,.3) 0,transparent 100%);
}

/* botao toggle de tema */
.theme-toggle {
  font-family: var(--fn-head);
  font-size: 9px;
  color: var(--lavender);
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  transition: all .25s;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  background: var(--surface2);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fn-body);
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}

/* fundo estrelado — sutil no modo claro */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at  8% 12%, rgba(80,140,200,.12) 0,transparent 100%),
    radial-gradient(1px 1px at 22% 78%, rgba(80,150,220,.10) 0,transparent 100%),
    radial-gradient(1px 1px at 38% 38%, rgba(80,130,210,.10) 0,transparent 100%),
    radial-gradient(1px 1px at 54% 62%, rgba(80,140,200,.08) 0,transparent 100%),
    radial-gradient(1px 1px at 68% 22%, rgba(40,120,200,.08)  0,transparent 100%),
    radial-gradient(1px 1px at 82% 72%, rgba(80,150,220,.10) 0,transparent 100%),
    radial-gradient(2px 2px at 14% 48%, rgba(80,150,220,.12) 0,transparent 100%),
    radial-gradient(2px 2px at 74% 55%, rgba(80,130,210,.10) 0,transparent 100%),
    radial-gradient(1px 1px at 48%  8%, rgba(40,120,200,.06)  0,transparent 100%),
    radial-gradient(1px 1px at  4% 92%, rgba(80,140,200,.08) 0,transparent 100%),
    radial-gradient(1px 1px at 92% 14%, rgba(40,120,210,.06)  0,transparent 100%),
    radial-gradient(1px 1px at 32% 95%, rgba(80,130,210,.06) 0,transparent 100%),
    radial-gradient(1px 1px at 88% 42%, rgba(80,140,200,.06) 0,transparent 100%),
    radial-gradient(2px 2px at 58% 88%, rgba(40,120,210,.05)  0,transparent 100%);
}

/* fundo estrelado brilhante no modo escuro */
@media (prefers-color-scheme: dark) {
  body::before {
    background-image:
      radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,.7) 0,transparent 100%),
      radial-gradient(1px 1px at 22% 78%, rgba(135,200,255,.6) 0,transparent 100%),
      radial-gradient(1px 1px at 38% 38%, rgba(135,200,255,.6) 0,transparent 100%),
      radial-gradient(1px 1px at 54% 62%, rgba(255,255,255,.5) 0,transparent 100%),
      radial-gradient(1px 1px at 68% 22%, rgba(0,229,255,.5)   0,transparent 100%),
      radial-gradient(1px 1px at 82% 72%, rgba(135,200,255,.6) 0,transparent 100%),
      radial-gradient(2px 2px at 14% 48%, rgba(135,200,255,.7) 0,transparent 100%),
      radial-gradient(2px 2px at 74% 55%, rgba(135,200,255,.6) 0,transparent 100%),
      radial-gradient(1px 1px at 48%  8%, rgba(0,229,255,.4)   0,transparent 100%),
      radial-gradient(1px 1px at  4% 92%, rgba(255,255,255,.5) 0,transparent 100%),
      radial-gradient(1px 1px at 92% 14%, rgba(100,180,255,.4) 0,transparent 100%),
      radial-gradient(1px 1px at 32% 95%, rgba(135,200,255,.4) 0,transparent 100%),
      radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,.4) 0,transparent 100%),
      radial-gradient(2px 2px at 58% 88%, rgba(100,180,255,.3) 0,transparent 100%);
  }
}

/* garante que o conteúdo fique sobre o fundo */
.page-wrapper, .site-header, .site-footer { position: relative; z-index: 1; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.site-header {
  text-align: center;
  padding: 28px 16px 12px;
}

.site-title {
  font-family: var(--fn-head);
  font-size: clamp(13px, 2.8vw, 22px);
  color: var(--accent);
  text-shadow: var(--title-glow);
  letter-spacing: 3px;
  line-height: 1.6;
}

.site-subtitle {
  font-size: 11px;
  color: var(--lavender);
  margin-top: 6px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* miku quote */
.miku-quote {
  text-align: center;
  padding: 4px 0 6px;
  margin: 4px 0 10px;
}
.miku-quote-text {
  font-size: 10.5px;
  color: var(--lavender);
  opacity: .5;
  letter-spacing: .4px;
  font-style: italic;
  transition: opacity 0.6s ease;
}

/* navegação */
.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}
.site-nav a {
  font-family: var(--fn-head);
  font-size: 11px;
  color: var(--lavender);
  text-decoration: none;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  transition: all .25s;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  background: var(--surface2);
}

/* ═══════════════════════════════════════
   LAYOUT PRINCIPAL
═══════════════════════════════════════ */
.page-wrapper { max-width: 1260px; margin: 0 auto; padding: 0 16px 32px; }

.layout {
  display: grid;
  grid-template-columns: 228px 1fr 210px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .layout { grid-template-columns: 210px 1fr; }
  .sidebar-right { display: none; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar-left { order: 2; }
  .main-content { order: 1; }
}

/* ═══════════════════════════════════════
   WIDGETS (sidebar)
═══════════════════════════════════════ */
.widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .3s;
}
.widget:hover { border-color: var(--border-hi); }

/* alinha topo do primeiro widget com o article-header nas páginas de artigo */
.layout:has(.main-content .breadcrumb) .sidebar-left .widget:first-child {
  margin-top: 34px;
}

/* sticker menina — desktop/tablet only */
.sticker-menina { display: none; margin-top: 10px; text-align: center; }
.sticker-menina img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
@media (min-width: 721px) {
  .sticker-menina { display: block; }
}

/* sticker menina artigos — telas grandes apenas */
.sticker-menina-artigo { display: none; margin-top: 10px; text-align: center; }
.sticker-menina-artigo img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
@media (min-width: 1024px) {
  .sticker-menina-artigo { display: block; }
}

.widget-title {
  font-family: var(--fn-head);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.widget-title .wt-icon { color: var(--yellow); font-style: normal; font-size: 12px; }
.widget-body { padding: 12px; }

/* profile (legacy, mantido pra outras páginas) */
.profile-name {
  font-family: var(--fn-head);
  font-size: 12px;
  color: var(--accent);
  text-align: center;
  margin-bottom: 3px;
  line-height: 1.8;
}
.profile-role {
  font-size: 13px;
  color: var(--lavender);
  text-align: center;
  margin-bottom: 10px;
}
.profile-links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.profile-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-links a:hover { color: var(--accent); background: var(--accent-dim); }
.profile-email {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* nav lista */
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.nav-list a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all .2s;
}
.nav-list a:hover { color: var(--accent); background: var(--accent-dim); }
.nav-list .ni { font-style: normal; font-size: 13px; }

/* tags cloud */
.tags-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: 12px;
  color: var(--cyan);
  border: 1px solid rgba(0,127,174,.3);
  border-radius: 12px;
  padding: 3px 8px;
  text-decoration: none;
  transition: all .2s;
  background: var(--cyan-dim);
}
.tag:hover { background: rgba(0,127,174,.14); box-shadow: var(--glow-cyan); }
.tag.active { background: var(--cyan); color: var(--bg); border-color: var(--cyan); font-weight: 700; }

@media (prefers-color-scheme: dark) {
  .tag { border-color: rgba(0,229,255,.25); }
  .tag:hover { background: rgba(0,229,255,.18); }
}

/* música animada */
.now-playing .track { color: var(--lavender); font-size: 13px; font-weight: 700; margin: 4px 0; }
.now-playing .np-label { font-size: 11px; color: var(--text-muted); }
.music-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 18px;
  margin-top: 8px;
}
.music-bars span {
  display: block;
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  animation: mbounce .5s ease-in-out infinite alternate;
}
.music-bars span:nth-child(2) { animation-delay: .1s; }
.music-bars span:nth-child(3) { animation-delay: .2s; }
.music-bars span:nth-child(4) { animation-delay: .3s; }
.music-bars span:nth-child(5) { animation-delay: .4s; }
@keyframes mbounce { from{height:3px} to{height:18px} }

/* contador */
.counter-display {
  font-family: var(--fn-head);
  font-size: 16px;
  color: var(--yellow);
  text-shadow: var(--counter-glow);
  letter-spacing: 5px;
  text-align: center;
  padding: 4px 0;
}
.counter-label { font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 4px; }

/* latest posts sidebar */
.latest-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.latest-item a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: block;
  line-height: 1.4;
  transition: color .2s;
}
.latest-item a:hover { color: var(--accent); }
.latest-item-date { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* stats */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--divider);
}
.stat-row:last-child { border-bottom: none; }
.stat-val { font-family: var(--fn-head); font-size: 11px; color: var(--accent); }

/* ═══════════════════════════════════════
   HERO / ABOUT (index)
═══════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '✦ ✦ ✦';
  position: absolute;
  top: 12px; right: 18px;
  color: var(--accent);
  font-size: 13px;
  opacity: .5;
  animation: sparkle 2.5s ease-in-out infinite;
}
@keyframes sparkle { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:.8;transform:scale(1.15)} }

.hero-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}
.cth-hp-wrap { position:absolute; left:-5000px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; }

@media (max-width: 580px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } }

.hero-avatar-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: var(--glow-accent);
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.hero-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.hero-name {
  font-family: var(--fn-head);
  font-size: clamp(13px, 2.2vw, 18px);
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.7;
}
.hero-name .hl { color: var(--accent); }
.hero-desc { font-size: 15px; color: var(--text-muted); line-height: 1.8; }
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.badge {
  font-size: 12px;
  color: var(--lavender);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  background: var(--surface2);
}

/* seções portfolio */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.section-card h2 {
  font-family: var(--fn-head);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-card h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}
.section-card h2 .sh { color: var(--accent); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.info-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
}
.info-item-label { font-size: 10px; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.info-item-value { font-size: 14px; color: var(--text); font-weight: 700; }

.text-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.text-list li { font-size: 14px; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid var(--divider); }
.text-list li:last-child { border-bottom: none; }
.text-list li .emoji { margin-right: 6px; }

.skill-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.skill-tbl th { background: var(--surface2); color: var(--lavender); font-weight: 700; padding: 8px 12px; text-align: left; border: 1px solid var(--border); font-size: 11px; }
.skill-tbl td { padding: 7px 12px; border: 1px solid var(--border); color: var(--text-muted); }
.skill-tbl tr:nth-child(even) td { background: var(--table-stripe); }

.callout-box {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  margin: 12px 0;
}
.callout-box p { font-size: 14px; color: var(--text-muted); margin: 4px 0; }
.callout-title { font-family: var(--fn-head); font-size: 10px; color: var(--accent); margin-bottom: 8px; letter-spacing: 1px; }

.video-wrap { margin: 16px 0; }
.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: block;
}

/* ═══════════════════════════════════════
   ARTICLES / CARDS
═══════════════════════════════════════ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.article-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-dim) 0, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.article-card:hover { border-color: var(--accent); box-shadow: var(--glow-accent); transform: translateY(-2px); }
.article-card:hover::before { opacity: 1; }

.card-tags { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 9px; overflow: hidden; }
.card-tag {
  font-size: 11px;
  color: var(--cyan);
  border: 1px solid rgba(0,127,174,.3);
  border-radius: 10px;
  padding: 2px 7px;
  background: var(--cyan-dim);
  flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
  .card-tag { border-color: rgba(0,229,255,.25); }
}
.card-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 7px; line-height: 1.45; }
.card-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 10px; color: var(--text-dim); }
.card-date { color: var(--lavender); }
.card-date:empty { display: none; }
.card-read { color: var(--accent); }

/* ═══════════════════════════════════════
   PÁGINA DE ARTIGO
═══════════════════════════════════════ */
.article-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 16px;
}
.article-header-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; justify-content: center; }
.article-header-title { font-size: clamp(16px, 2.8vw, 26px); font-weight: 800; color: var(--text); line-height: 1.4; margin-bottom: 10px; text-align: center; }
.article-header-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.article-header-meta span { color: var(--lavender); }

.article-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  margin-bottom: 16px;
}

/* tipografia do artigo */
.article-body h2 {
  font-family: var(--fn-head);
  font-size: 13px;
  color: var(--accent);
  margin: 30px 0 12px;
  letter-spacing: 1px;
  line-height: 1.8;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.article-body h3 {
  font-family: var(--fn-head);
  font-size: 11px;
  color: var(--lavender);
  margin: 22px 0 10px;
  letter-spacing: 1px;
  line-height: 1.8;
}
.article-body h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin: 18px 0 8px;
}
.article-body p { margin: 10px 0; color: var(--text); line-height: 1.85; }
.article-body ul, .article-body ol { margin: 10px 0; padding-left: 22px; }
.article-body li { margin: 5px 0; color: var(--text); line-height: 1.75; }
.article-body strong { color: var(--accent); font-weight: 800; }
.article-body em { color: var(--lavender); font-style: italic; }

.article-body a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(0,127,174,.3); transition: all .2s; }
.article-body a:hover { color: var(--accent); border-color: var(--accent-dim); }
@media (prefers-color-scheme: dark) {
  .article-body a { border-bottom-color: rgba(0,229,255,.3); }
  .article-body strong { color: var(--accent-light); }
}

/* code */
.article-body pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-body pre code {
  font-family: var(--fn-mono);
  font-size: 13px;
  color: var(--code-color);
  line-height: 1.65;
  background: transparent;
  padding: 0;
}
.article-body code {
  font-family: var(--fn-mono);
  font-size: 13px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 4px;
}

/* tables */
.article-body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; border-radius: var(--r); border: 1px solid var(--border); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 400px; }
.article-body th { background: var(--surface2); color: var(--lavender); font-weight: 700; padding: 9px 13px; text-align: left; border: 1px solid var(--border); font-size: 11px; white-space: nowrap; }
.article-body td { padding: 7px 13px; border: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
.article-body tr:nth-child(even) td { background: var(--table-stripe); }

/* images */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: block;
  margin: 14px auto;
}
.article-body figure { margin: 16px 0; }
.article-body figcaption { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 6px; font-style: italic; }

/* vídeos */
.article-body .video-embed {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r);
  border: 1px solid var(--border);
  display: block;
  margin: 14px 0;
}

/* callouts */
.article-body .info-important {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  margin: 14px 0;
}
.article-body .info-note {
  border-left: 3px solid var(--cyan);
  background: var(--cyan-dim);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  margin: 14px 0;
}
.article-body .info-warning {
  border-left: 3px solid var(--yellow);
  background: rgba(192,122,0,.08);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  margin: 14px 0;
}
@media (prefers-color-scheme: dark) {
  .article-body .info-warning { background: rgba(255,224,102,.07); }
}
.article-body .info-tip {
  border-left: 3px solid var(--green);
  background: var(--green-dim);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  margin: 14px 0;
}
.info-label {
  font-family: var(--fn-head);
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.info-important .info-label { color: var(--accent); }
.info-note .info-label { color: var(--cyan); }
.info-warning .info-label { color: var(--yellow); }
.info-tip .info-label { color: var(--green); }
.info-important .info-label::before { content: "[!!] "; }
.info-note .info-label::before { content: "[i] "; }
.info-warning .info-label::before { content: "[!] "; }
.info-tip .info-label::before { content: "[>] "; }

/* blockquote */
.article-body blockquote {
  border-left: 3px solid var(--purple);
  background: var(--accent-dim);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 12px 18px;
  margin: 12px 0;
  color: var(--text-muted);
  font-style: italic;
}
@media (prefers-color-scheme: dark) {
  .article-body blockquote { background: rgba(48,120,180,.08); }
}

/* ═══════════════════════════════════════
   BREADCRUMB / VOLTAR
═══════════════════════════════════════ */
.breadcrumb {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--lavender); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--text-dim); }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fn-head);
  font-size: 11px;
  color: var(--lavender);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 15px;
  background: var(--surface);
  transition: all .25s;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.back-btn:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow-accent); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer {
  text-align: center;
  padding: 28px 16px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  position: relative;
  z-index: 1;
}
.site-footer a { color: var(--lavender); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-kawaii { font-size: 22px; display: block; margin-bottom: 8px; }
.footer-sep { color: var(--accent); margin: 0 8px; }

/* ═══════════════════════════════════════
   DIVIDER DECORATIVO
═══════════════════════════════════════ */
.divider-cute {
  text-align: center;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 10px;
  margin: 20px 0;
  opacity: .6;
  user-select: none;
}

/* ═══════════════════════════════════════
   SCROLL & SELEÇÃO
═══════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
::-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(--border-hi); }
::selection { background: rgba(24,120,180,.22); color: var(--text); }
@media (prefers-color-scheme: dark) {
  ::selection { background: rgba(85,192,240,.3); }
}

/* ═══════════════════════════════════════
   RESPONSIVO (mobile tweaks)
═══════════════════════════════════════ */
@media (max-width: 580px) {
  .article-body { padding: 20px 16px; }
  .article-header { padding: 20px 16px; }
  .hero { padding: 20px 16px; }
  .section-card { padding: 18px 14px; }
  .site-title { letter-spacing: 1px; }
  .site-nav { gap: 6px; padding: 10px 12px; }
  .site-nav a { font-size: 9px; padding: 7px 10px; }
  .info-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .article-body pre { padding: 14px 12px; }
  .article-body pre code { font-size: 12px; }
  .hero-avatar-wrap { width: 72px; height: 72px; margin: 0 auto; }
}

@media (max-width: 400px) {
  .site-nav a { font-size: 8px; padding: 6px 8px; }
  .articles-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   SEÇÃO LINKEDIN (index)
═══════════════════════════════════════ */
.linkedin-posts { display: flex; flex-direction: column; gap: 12px; }
.linkedin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  transition: all .3s;
}
.linkedin-card:hover { border-color: rgba(0,119,181,.5); box-shadow: 0 0 18px rgba(0,119,181,.25); }
.linkedin-card-year { font-size: 10px; color: var(--text-dim); margin-bottom: 4px; }
.linkedin-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.linkedin-card-title a { color: var(--cyan); text-decoration: none; }
.linkedin-card-title a:hover { color: var(--accent); }
.linkedin-card-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; }


/* ═══════════════════════════════════════
   ACESSIBILIDADE - FOCO TECLADO
═══════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ═══════════════════════════════════════
   ESTUDOS — seção de resumos acadêmicos
═══════════════════════════════════════ */
.estudos-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: all .3s;
}
.estudos-hero:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}
.estudos-hero-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.estudos-hero-content { flex: 1; }
.estudos-hero-title {
  font-family: var(--fn-head);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.estudos-hero-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.estudos-hero-arrow {
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.discipline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.discipline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-dim) 0, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.discipline-card:hover { border-color: var(--accent); box-shadow: var(--glow-accent); transform: translateY(-2px); }
.discipline-card:hover::before { opacity: 1; }
.discipline-card-icon {
  font-size: 22px;
  margin-bottom: 10px;
}
.discipline-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.discipline-card-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.discipline-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}
.discipline-card-footer {
  margin-top: 12px;
  font-size: 11px;
  color: var(--accent);
  font-family: var(--fn-head);
  letter-spacing: 1px;
}

.unit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.unit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cyan-dim) 0, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.unit-card:hover { border-color: var(--cyan); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.unit-card:hover::before { opacity: 1; }
.unit-card-num {
  font-family: var(--fn-head);
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.unit-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.unit-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}
.unit-card-footer {
  margin-top: 10px;
  font-size: 11px;
  color: var(--cyan);
  font-family: var(--fn-head);
  letter-spacing: 1px;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topic-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .25s;
}
.topic-item:hover {
  border-color: var(--accent);
  border-left-color: var(--cyan);
  box-shadow: var(--glow-accent);
}
.topic-item-num {
  font-family: var(--fn-head);
  font-size: 14px;
  color: var(--accent);
  min-width: 28px;
  text-align: center;
}
.topic-item-content { flex: 1; }
.topic-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.topic-item-status {
  font-size: 11px;
  color: var(--text-dim);
}
.topic-item-arrow {
  font-size: 14px;
  color: var(--accent);
}

/* ═══════════════════════════════════════
   QUIZ — verdadeiro ou falso
═══════════════════════════════════════ */
.quiz-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-top: 20px;
}
.quiz-section h2 {
  font-family: var(--fn-head);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 18px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-progress {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-family: var(--fn-head);
}
.quiz-progress-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
  border-radius: 3px;
  transition: width .4s ease;
  width: 0%;
}
.quiz-question {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
  font-weight: 700;
}
.quiz-question-number {
  color: var(--accent);
  font-family: var(--fn-head);
  margin-right: 6px;
}
.quiz-options {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.quiz-btn {
  font-family: var(--fn-body);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.quiz-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}
.quiz-btn:disabled { cursor: default; opacity: .8; }
.quiz-btn.correct {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.quiz-btn.wrong {
  background: rgba(220,60,60,.09);
  border-color: rgba(220,60,60,.5);
  color: #c04040;
}
@media (prefers-color-scheme: dark) {
  .quiz-btn.wrong {
    background: rgba(255,100,100,.09);
    border-color: rgba(255,100,100,.4);
    color: #ff7070;
  }
}
.quiz-feedback {
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.7;
  display: none;
  animation: fadeIn .3s ease;
}
.quiz-feedback.show { display: block; }
.quiz-feedback.correct {
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
}
.quiz-feedback.wrong {
  background: rgba(220,60,60,.07);
  border: 1px solid rgba(220,60,60,.3);
  color: #c04040;
}
@media (prefers-color-scheme: dark) {
  .quiz-feedback.wrong {
    background: rgba(255,100,100,.07);
    border-color: rgba(255,100,100,.2);
    color: #ff9090;
  }
}
.quiz-feedback-title {
  font-family: var(--fn-head);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 700;
}
.quiz-feedback p { margin: 0; }
.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.quiz-nav-btn {
  font-family: var(--fn-head);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--lavender);
  cursor: pointer;
  transition: all .2s;
  min-height: 36px;
}
.quiz-nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow-accent);
}
.quiz-nav-btn:disabled { opacity: .4; cursor: default; }
.quiz-score {
  text-align: center;
  padding: 20px;
}
.quiz-score-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.quiz-score-title {
  font-family: var(--fn-head);
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 8px;
}
.quiz-score-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.quiz-score-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.quiz-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s ease;
}
.quiz-score-detail {
  font-family: var(--fn-head);
  font-size: 12px;
  color: var(--text-dim);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   PENSAMENTOS — feed de posts curtos
═══════════════════════════════════════ */
.thought-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thought-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.thought-card:hover {
  border-color: var(--accent);
  border-left-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.thought-date {
  font-family: var(--fn-head);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.thought-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.75;
  white-space: pre-line;
}

/* widget sidebar — últimos pensamentos */
.thought-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thought-mini-item {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 7px 10px;
  border-left: 2px solid var(--border-hi);
  border-radius: 0 4px 4px 0;
  transition: border-color .2s, color .2s;
}
.thought-mini-item:hover {
  border-left-color: var(--accent);
  color: var(--text);
}
.thought-mini-date {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 2px;
  font-family: var(--fn-head);
}

/* ═══════════════════════════════════════
   RECURSOS INTERATIVOS — SIMULADORES
═══════════════════════════════════════ */
.sim-section-head {
  font-family: var(--fn-head);
  font-size: 11px;
  color: var(--text);
  margin: 32px 0 16px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-section-head span:first-child { color: var(--accent); }
.sim-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.video-card:hover { border-color: var(--border-hi); box-shadow: var(--glow-accent); }
.video-label {
  font-family: var(--fn-head);
  font-size: 10px;
  color: var(--text-muted);
  padding: 10px 14px 8px;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}
.yt-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.yt-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.sim-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.sim-title {
  font-family: var(--fn-head);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sim-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }

.bit-display { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.bit-btn {
  width: 44px; height: 44px;
  font-family: var(--fn-mono);
  font-size: 18px; font-weight: 700;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.bit-btn:hover { border-color: var(--border-hi); }
.bit-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); box-shadow: var(--glow-accent); }
.bit-pos { font-size: 8px; position: absolute; bottom: 2px; right: 3px; font-family: var(--fn-mono); color: var(--text-dim); pointer-events: none; }

.sim-result-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sim-result-item { flex: 1; min-width: 110px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; }
.sim-result-label { font-family: var(--fn-head); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 4px; }
.sim-result-val { font-family: var(--fn-mono); font-size: 15px; color: var(--accent); font-weight: 700; word-break: break-all; }

.sim-text-input, .sim-select, .sim-num-input {
  font-family: var(--fn-mono);
  font-size: 14px;
  padding: 9px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.sim-text-input:focus, .sim-select:focus, .sim-num-input:focus { border-color: var(--accent); box-shadow: var(--glow-accent); }
.sim-text-input { width: 100%; margin-bottom: 12px; }
.sim-num-input { width: 140px; letter-spacing: 2px; }

.char-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.char-cell { background: var(--surface3); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; text-align: center; min-width: 70px; transition: border-color .15s; }
.char-cell:hover { border-color: var(--border-hi); }
.char-cell-char { font-family: var(--fn-mono); font-size: 17px; color: var(--accent); font-weight: 700; }
.char-cell-dec { font-family: var(--fn-mono); font-size: 10px; color: var(--text-muted); }
.char-cell-bin { font-family: var(--fn-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; margin-top: 2px; word-break: break-all; }

.conv-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.conv-field { display: flex; flex-direction: column; gap: 4px; }
.conv-label { font-family: var(--fn-head); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; }
.conv-step-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  font-family: var(--fn-mono);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.9;
  min-height: 60px;
  margin-top: 8px;
}
.step-hi { color: var(--accent); font-weight: 700; }
.step-ok { color: var(--green); font-weight: 700; font-size: 14px; }

.sim-btn {
  font-family: var(--fn-head);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 9px 16px;
  background: var(--accent);
  border: none;
  border-radius: var(--r);
  color: white;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
  white-space: nowrap;
}
.sim-btn:hover { opacity: .85; box-shadow: var(--glow-accent); }

.calc-steps {
  font-family: var(--fn-mono);
  font-size: 12.5px;
  line-height: 1.9;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text);
  min-height: 60px;
}
.c-carry { color: var(--yellow); font-size: 10px; vertical-align: super; }
.c-ok { color: var(--green); font-weight: 700; }
.c-sep { color: var(--border-hi); }

.gate-inputs-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.gate-input-btn {
  width: 64px; height: 64px;
  font-family: var(--fn-mono);
  font-size: 24px; font-weight: 700;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gate-input-btn:hover { border-color: var(--border-hi); }
.gate-input-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); box-shadow: var(--glow-accent); }
.gate-in-label { font-size: 8px; font-family: var(--fn-head); color: var(--text-dim); letter-spacing: 1px; }

.gate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gate-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.gate-card.out1 { border-color: var(--accent); box-shadow: var(--glow-accent); background: var(--accent-dim); }
.gate-svg { width: 52px; height: 34px; flex-shrink: 0; color: var(--text-muted); }
.gate-card.out1 .gate-svg { color: var(--accent); }
.gate-info { flex: 1; }
.gate-name { font-family: var(--fn-head); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.gate-card.out1 .gate-name { color: var(--accent); }
.gate-expr { font-family: var(--fn-mono); font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.gate-out-val { font-family: var(--fn-mono); font-size: 26px; font-weight: 700; color: var(--text-muted); transition: color .15s; }
.gate-card.out1 .gate-out-val { color: var(--accent); }

.adder-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.adder-sim {
  flex: 1; min-width: 260px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}
.adder-sim-title { font-family: var(--fn-head); font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; margin-bottom: 14px; }
.adder-ins { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.adder-io-btn {
  padding: 8px 14px;
  font-family: var(--fn-mono); font-size: 16px; font-weight: 700;
  border: 2px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.adder-io-btn .io-lbl { font-size: 8px; letter-spacing: 1px; color: var(--text-dim); font-family: var(--fn-head); }
.adder-io-btn.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.adder-outs { display: flex; gap: 10px; flex-wrap: wrap; }
.adder-out { flex: 1; background: var(--surface3); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; text-align: center; transition: border-color .2s, box-shadow .2s; }
.adder-out.lit { border-color: var(--accent); box-shadow: var(--glow-accent); }
.adder-out-lbl { font-family: var(--fn-head); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 2px; }
.adder-out-val { font-family: var(--fn-mono); font-size: 30px; font-weight: 700; color: var(--text-muted); transition: color .15s; }
.adder-out.lit .adder-out-val { color: var(--accent); }
.adder-explain { font-family: var(--fn-mono); font-size: 11px; color: var(--text-dim); margin-top: 10px; line-height: 1.7; }

/* ═══════════════════════════════════════
   SISTEMA DE COMENTÁRIOS
═══════════════════════════════════════ */
.cth-comments-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.cth-comments-title {
  font-family: var(--fn-head); font-size: 12px; letter-spacing: 2px; color: var(--text);
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.cth-comments-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); }
.cth-comments-count { font-family: var(--fn-head); font-size: 11px; color: var(--accent); background: var(--accent-dim); padding: 2px 8px; border-radius: 10px; }

.cth-comment-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 24px; }
.cth-form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cth-comment-input, .cth-comment-textarea {
  font-family: var(--fn-body); font-size: 14px; color: var(--text); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; outline: none;
  transition: all .25s; width: 100%;
}
.cth-comment-input { flex: 1; min-width: 120px; }
.cth-comment-input:focus, .cth-comment-textarea:focus { border-color: var(--accent); box-shadow: var(--glow-accent); }
.cth-comment-textarea { resize: vertical; min-height: 80px; line-height: 1.7; }

.cth-form-meta { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.cth-cancel-reply { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; text-decoration: underline; margin-left: 8px; }

.cth-comment-submit {
  font-family: var(--fn-head); font-size: 11px; color: var(--bg); background: var(--accent); border: none;
  border-radius: var(--r); padding: 10px 20px; cursor: pointer; transition: all .25s; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
}
.cth-comment-submit:hover { box-shadow: var(--glow-accent); transform: translateY(-1px); }
.cth-comment-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

#cth-form-error { color: #ff6b6b; font-size: 12px; margin-top: 8px; }

.cth-comments-list { display: flex; flex-direction: column; gap: 14px; }
.cth-loading, .cth-empty { text-align: center; color: var(--text-dim); font-size: 14px; padding: 32px; font-style: italic; }

.cth-comment {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px;
  animation: commentIn 0.4s ease; transition: border-color .2s;
}
.cth-comment:hover { border-color: var(--border-hi); }
.cth-comment-reply {
  margin-left: 32px; border-left: 2px solid var(--cyan); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--cyan-dim);
}
@keyframes commentIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.cth-comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cth-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--fn-head); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.cth-comment-meta { display: flex; flex-direction: column; gap: 2px; }
.cth-comment-name { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.cth-comment-author-badge { font-size: 9px; color: var(--green); background: var(--green-dim); border: 1px solid var(--green-border); padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: 1px; }
.cth-comment-time { font-size: 11px; color: var(--text-dim); }
.cth-comment-body { font-size: 14px; color: var(--text-muted); line-height: 1.75; word-break: break-word; }
.cth-comment-body strong { color: var(--accent); }
.cth-comment-body em { color: var(--lavender); font-style: italic; }
.cth-comment-body code { font-family: var(--fn-mono); font-size: 13px; color: var(--accent); background: var(--accent-dim); padding: 2px 6px; border-radius: 4px; }

.cth-comment-actions { display: flex; gap: 12px; margin-top: 10px; align-items: center; }
.cth-comment-action { font-size: 11px; color: var(--text-dim); background: none; border: none; cursor: pointer; transition: color .2s; display: inline-flex; align-items: center; gap: 4px; }
.cth-comment-action:hover { color: var(--accent); }
.cth-delete-btn { color: var(--text-dim); font-size: 11px; background: none; border: none; cursor: pointer; margin-left: auto; }
.cth-delete-btn:hover { color: #ff6b6b; }

@media (max-width: 580px) {
  .cth-comments-section { margin-top: 24px; padding-top: 16px; }
  .cth-comment-form-wrap { padding: 14px; margin-bottom: 18px; }
  .cth-form-row { flex-direction: column; gap: 8px; }
  .cth-comment-input { min-width: 0; font-size: 16px; }
  .cth-comment-textarea { min-height: 70px; font-size: 16px; }
  .cth-comment-submit { width: 100%; justify-content: center; padding: 12px; }
  .cth-comment { padding: 14px; }
  .cth-comment-reply { margin-left: 12px; }
  .cth-avatar { width: 32px; height: 32px; font-size: 12px; }
  .cth-comment-name { font-size: 13px; flex-wrap: wrap; }
  .cth-comment-body { font-size: 13px; }
  .cth-comment-actions { gap: 10px; flex-wrap: wrap; }
  .cth-delete-btn { margin-left: 0; }
  .cth-loading, .cth-empty { padding: 24px 16px; }
}

/* ═══════════════════════════════════════
   LAIN BOT — Widget flutuante
   Serial Experiments Lain
═══════════════════════════════════════ */

#miku-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  font-family: var(--fn-body);
  --lain-bg: #0b0b10;
  --lain-surface: #11111a;
  --lain-surface2: #161620;
  --lain-border: #2a2a38;
  --lain-border-hi: #3a3a50;
  --lain-text: #c8c8d5;
  --lain-text-muted: #8888a0;
  --lain-text-dim: #555570;
  --lain-accent: #8b1e1e;
  --lain-accent-light: #b52a2a;
  --lain-accent-dim: rgba(139,30,30,0.12);
  --lain-green: #4a9a6a;
  --lain-cyan: #5a7a8a;
}

.miku-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--lain-accent);
  background: var(--lain-surface);
  color: var(--lain-accent-light);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--glow-accent), 0 4px 14px rgba(0,0,0,0.15);
  transition: transform .25s, box-shadow .25s, background .2s;
}
.miku-toggle:hover {
  transform: scale(1.08) rotate(-8deg);
  background: var(--lain-accent-dim);
  box-shadow: 0 0 16px rgba(139,30,30,0.35), 0 6px 20px rgba(0,0,0,0.4);
}
.miku-toggle:active { transform: scale(0.95); }

.miku-panel {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 340px;
  max-height: 520px;
  background: var(--lain-surface);
  border: 1px solid var(--lain-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.miku-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.miku-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--lain-accent-dim), transparent);
  border-bottom: 1px solid var(--lain-border);
}
.miku-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lain-accent), #1a0a0a);
  color: #e0d0d0;
  font-family: var(--fn-head);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(139,30,30,0.4);
}
.miku-info { flex: 1; min-width: 0; }
.miku-name { font-family: var(--fn-head); font-size: 13px; font-weight: 700; color: var(--lain-text); letter-spacing: 1px; }
.miku-status { font-size: 11px; color: var(--lain-green); display: flex; align-items: center; gap: 4px; }
.miku-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lain-green);
  animation: miku-pulse 2s infinite;
}
@keyframes miku-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.miku-clear {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--lain-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: color .2s, background .2s;
}
.miku-clear:hover { color: #d06060; background: rgba(180,60,60,0.12); }
.miku-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--lain-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: color .2s, background .2s;
}
.miku-close:hover { color: var(--lain-text); background: var(--lain-surface2); }

.miku-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  max-height: 340px;
}
.miku-msg { display: flex; }
.miku-bot { justify-content: flex-start; }
.miku-user { justify-content: flex-end; }

.miku-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.65;
  word-break: break-word;
}
.miku-bot .miku-bubble {
  background: var(--lain-surface2);
  color: var(--lain-text-muted);
  border: 1px solid var(--lain-border);
  border-bottom-left-radius: 4px;
}
.miku-user .miku-bubble {
  background: linear-gradient(135deg, var(--lain-accent), #2a0a0a);
  color: #e8d0d0;
  border-bottom-right-radius: 4px;
}
.miku-bubble.miku-error {
  background: rgba(180,60,60,0.12);
  border-color: rgba(180,60,60,0.35);
  color: #d06060;
}

.miku-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}
.miku-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lain-text-dim);
  animation: miku-bounce 1.2s infinite ease-in-out;
}
.miku-typing-dots span:nth-child(2) { animation-delay: .15s; }
.miku-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes miku-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}

.miku-turnstile {
  padding: 4px 12px 0;
  min-height: 0;
  transition: min-height .2s, opacity .2s;
  filter: invert(1) hue-rotate(180deg) contrast(0.9);
  position: relative;
  z-index: 1;
}
.miku-turnstile.done {
  opacity: 0;
  pointer-events: none;
  min-height: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.miku-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--lain-border);
  background: var(--lain-surface);
}
.miku-cooldown {
  width: 100%;
  font-size: 11px;
  color: var(--lain-accent-light);
  text-align: center;
  letter-spacing: .5px;
  display: none;
}
.miku-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--lain-border);
  background: var(--lain-bg);
  color: var(--lain-text);
  font-family: var(--fn-body);
  font-size: 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.miku-input:focus {
  border-color: var(--lain-accent);
  box-shadow: 0 0 0 3px var(--lain-accent-dim);
}
.miku-input::placeholder { color: var(--lain-text-dim); }
.miku-input:disabled { opacity: .5; cursor: not-allowed; }
.miku-send {
  width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: var(--lain-accent);
  color: #e0d0d0;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, opacity .2s, background .2s;
}
.miku-send:hover:not(:disabled) { transform: scale(1.08); background: var(--lain-accent-light); }
.miku-send:active:not(:disabled) { transform: scale(0.95); }
.miku-send:disabled { opacity: .5; cursor: not-allowed; }

/* scrollbar do painel */
.miku-messages::-webkit-scrollbar { width: 5px; }
.miku-messages::-webkit-scrollbar-track { background: transparent; }
.miku-messages::-webkit-scrollbar-thumb { background: var(--lain-border); border-radius: 10px; }

/* mobile */
@media (max-width: 480px) {
  #miku-chat-widget { bottom: 12px; right: 12px; }
  .miku-toggle { width: 52px; height: 52px; font-size: 20px; }
  .miku-panel {
    width: calc(100vw - 24px);
    right: 0;
    bottom: 60px;
    max-height: 75vh;
    border-radius: var(--r);
  }
  .miku-header { padding: 10px 12px; gap: 8px; }
  .miku-avatar { width: 32px; height: 32px; font-size: 12px; }
  .miku-name { font-size: 12px; }
  .miku-status { font-size: 10px; }
  .miku-clear, .miku-close { width: 26px; height: 26px; font-size: 12px; }
  .miku-messages { padding: 10px; gap: 8px; min-height: 140px; }
  .miku-bubble { font-size: 12.5px; padding: 9px 12px; }
  .miku-input-wrap { padding: 8px 10px 10px; }
  .miku-input { padding: 9px 12px; font-size: 16px; } /* 16px previne zoom do iOS */
  .miku-send { width: 38px; height: 38px; }
}

/* landscape em mobile pequeno */
@media (max-height: 500px) and (max-width: 480px) {
  .miku-panel { max-height: 85vh; }
  .miku-messages { max-height: 260px; }
}