/* Sistema visual V5 das salas internas.
   A folha fica quieta; indigo orienta, coral marca ação/correção e verde confirma. */
html.esp-platform-v5 {
  --v5-canvas: #f5f5f2;
  --v5-paper: #fffdf8;
  --v5-ink: #171820;
  --v5-ink-2: #363947;
  --v5-muted: #667189;
  --v5-soft: #7d8494;
  --v5-line: #d9dde7;
  --v5-line-soft: #e7e8ed;
  --v5-indigo: #5c69d8;
  --v5-indigo-dark: #3e49b8;
  --v5-indigo-pale: #eceefe;
  --v5-coral: #f45d37;
  --v5-coral-dark: #c84225;
  --v5-coral-pale: #ffe8df;
  --v5-lime: #a5d93f;
  --v5-green: #167a52;
  --v5-green-pale: #e2f3e9;
  --v5-red: #b43145;
  --v5-amber: #b7791f;
  --esp-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --esp-title: var(--esp-display);
  --font-display: var(--esp-display);
  color: var(--v5-ink);
  background: var(--v5-canvas);
}

html.esp-platform-v5 body.app-body,
html.esp-platform-v5 .app-shell,
html.esp-platform-v5 .app-shell > .app-main {
  color: var(--v5-ink);
  background: var(--v5-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Cabeçalho aprovado no estudo V5. Ele pertence ao shell, por isso reaparece
   igual em Treinar, Evolução, Acervo, Simulado e Correção. */
html.esp-platform-v5 .app-v5-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  min-height: 68px;
  padding: 0 34px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--v5-line);
  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(16px);
}
html.esp-platform-v5 .app-shell > .app-v5-topbar { margin-left: 190px; }
html.esp-platform-v5 .app-v5-topbar > strong { font-size: 13px; font-weight: 700; }
html.esp-platform-v5 .app-v5-topbar .v5-top-actions { position: relative; display: flex; align-items: center; gap: 12px; }
html.esp-platform-v5 .app-v5-topbar .v5-streak { position: relative; }
html.esp-platform-v5 .app-v5-topbar .v5-streak summary {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--v5-coral);
  list-style: none;
  cursor: pointer;
}
html.esp-platform-v5 .app-v5-topbar .v5-streak summary::-webkit-details-marker { display: none; }
html.esp-platform-v5 .app-v5-topbar .v5-streak summary svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html.esp-platform-v5 .app-v5-topbar .v5-streak summary b { color: var(--v5-ink); font-size: 12px; font-weight: 700; }
html.esp-platform-v5 .app-v5-topbar .v5-streak summary > .v5-streak-unit { color: var(--v5-muted); font-size: 11px; font-weight: 500; }
html.esp-platform-v5 .app-v5-topbar .v5-streak[data-streak-ready="false"] summary > [data-streak-count] {
  display: block;
  width: 14px;
  height: 7px;
  border-radius: 999px;
  background: var(--v5-line);
  color: transparent;
}
html.esp-platform-v5 .app-v5-topbar .v5-streak[data-streak-ready="false"] summary > :is(.v5-streak-unit,.v5-streak-state-dot) { display: none; }
html.esp-platform-v5 .v5-streak.is-milestone summary .v5-flame > svg { animation: v5-shell-flame 760ms cubic-bezier(.2,.8,.2,1); }
html.esp-platform-v5 .app-v5-topbar .v5-streak-pop {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: 250px;
  padding: 18px;
  border: 1px solid var(--v5-line);
  border-radius: 16px;
  background: var(--v5-paper);
  box-shadow: 0 18px 48px rgba(23,24,32,.09);
}
html.esp-platform-v5 .app-v5-topbar .v5-streak-pop::before { content: ""; position: absolute; top: -5px; right: 24px; width: 9px; height: 9px; transform: rotate(45deg); border-top: 1px solid var(--v5-line); border-left: 1px solid var(--v5-line); background: var(--v5-paper); }
html.esp-platform-v5 .app-v5-topbar .v5-streak-pop > span { color: var(--v5-green); font: 600 9px/1.3 "IBM Plex Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
html.esp-platform-v5 .app-v5-topbar .v5-streak-pop > strong { display: block; margin: 7px 0 12px; font-size: 18px; letter-spacing: -.04em; }
html.esp-platform-v5 .app-v5-topbar .v5-streak-pop > p { margin: 0; padding-top: 12px; color: var(--v5-muted); border-top: 1px solid var(--v5-line); font-size: 12px; line-height: 1.45; }
/* A sequência fica compacta em repouso. Aberta, responde estado, ritmo,
   evidência e próxima ação sem virar um segundo painel de Evolução. */
html.esp-platform-v5 .v5-streak { color: var(--v5-ink); }
html.esp-platform-v5 .v5-streak .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html.esp-platform-v5 .v5-streak summary { border: 0; background: transparent; }
html.esp-platform-v5 .v5-flame { position: relative; display: grid; width: 22px; height: 25px; place-items: center; color: var(--v5-coral); transform-origin: 50% 88%; }
html.esp-platform-v5 .v5-flame > svg { position: relative; z-index: 2; width: 18px; height: 18px; }
html.esp-platform-v5 .v5-flame-particles { position: absolute; inset: -7px -4px auto; z-index: 1; height: 15px; pointer-events: none; }
html.esp-platform-v5 .v5-flame-particles i { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--v5-coral); opacity: 0; }
html.esp-platform-v5 .v5-flame-particles i:nth-child(1) { left: 4px; }
html.esp-platform-v5 .v5-flame-particles i:nth-child(2) { left: 10px; width: 2px; height: 2px; background: var(--v5-amber); }
html.esp-platform-v5 .v5-flame-particles i:nth-child(3) { right: 3px; width: 2px; height: 2px; }
html.esp-platform-v5 .v5-streak.is-opening .v5-flame > svg { animation: v5-streak-flame-open 620ms cubic-bezier(.18,.78,.22,1); }
html.esp-platform-v5 .v5-streak.is-closing .v5-flame > svg { animation: v5-streak-flame-close 300ms cubic-bezier(.3,.7,.3,1); }
html.esp-platform-v5 .v5-streak.is-opening .v5-flame-particles i,
html.esp-platform-v5 .v5-streak.is-closing .v5-flame-particles i { animation: v5-streak-ember 560ms cubic-bezier(.18,.7,.2,1); }
html.esp-platform-v5 .v5-streak.is-opening .v5-flame-particles i:nth-child(2) { animation-delay: 45ms; }
html.esp-platform-v5 .v5-streak.is-opening .v5-flame-particles i:nth-child(3) { animation-delay: 90ms; }
html.esp-platform-v5 .v5-streak.is-closing .v5-flame-particles i { animation-duration: 270ms; }
html.esp-platform-v5 .v5-streak-state-dot { width: 5px; height: 5px; margin-left: -1px; border-radius: 50%; background: var(--v5-soft); }
html.esp-platform-v5 .v5-streak-state-dot[data-state="done"] { background: var(--v5-green); box-shadow: 0 0 0 3px var(--v5-green-pale); }
html.esp-platform-v5 .v5-streak-state-dot[data-state="pending"] { background: var(--v5-coral); }
html.esp-platform-v5 .v5-streak-pop {
  z-index: 80;
  width: 324px;
  padding: 18px;
  color: var(--v5-ink);
  text-align: left;
}
html.esp-platform-v5 .v5-streak[open] > .v5-streak-pop { opacity: 1; transform: none; }
html.esp-platform-v5 .v5-streak.is-opening[open] > .v5-streak-pop { animation: v5-streak-pop-in 240ms cubic-bezier(.2,.76,.24,1) both; }
html.esp-platform-v5 .v5-streak.is-closing[open] > .v5-streak-pop { pointer-events: none; animation: v5-streak-pop-out 160ms ease both; }
html.esp-platform-v5 .v5-streak-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.esp-platform-v5 .v5-streak-pop-head > span { color: var(--v5-green); font: 650 9px/1.3 "IBM Plex Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
html.esp-platform-v5 .v5-streak-pop-head em { display: inline-flex; min-height: 24px; padding: 0 9px; align-items: center; gap: 6px; border: 1px solid var(--v5-line); border-radius: 999px; color: var(--v5-muted); font: 650 9px/1 Inter, sans-serif; font-style: normal; }
html.esp-platform-v5 .v5-streak-pop-head em i { width: 5px; height: 5px; border-radius: 50%; background: var(--v5-soft); }
html.esp-platform-v5 .v5-streak-pop[data-state="done"] .v5-streak-pop-head em { color: var(--v5-green); border-color: #c7dfd2; background: var(--v5-green-pale); }
html.esp-platform-v5 .v5-streak-pop[data-state="done"] .v5-streak-pop-head em i { background: var(--v5-green); }
html.esp-platform-v5 .v5-streak-pop[data-state="pending"] .v5-streak-pop-head em { color: var(--v5-coral-dark); border-color: #f4c8bc; background: var(--v5-coral-pale); }
html.esp-platform-v5 .v5-streak-pop[data-state="pending"] .v5-streak-pop-head em i { background: var(--v5-coral); }
html.esp-platform-v5 .v5-streak-hero { display: grid; margin-top: 15px; grid-template-columns: auto minmax(0,1fr); align-items: end; gap: 15px; }
html.esp-platform-v5 .v5-streak-hero > div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
html.esp-platform-v5 .v5-streak-hero > div strong { font-size: 34px; line-height: .9; letter-spacing: -.07em; }
html.esp-platform-v5 .v5-streak-hero > div span { color: var(--v5-muted); font-size: 10px; }
html.esp-platform-v5 .v5-streak-hero > b { padding-bottom: 1px; font-size: 16px; line-height: 1.12; letter-spacing: -.035em; }
html.esp-platform-v5 .v5-streak-pop > .v5-streak-support { margin: 9px 0 0; padding: 0; border: 0; color: var(--v5-muted); font-size: 10px; line-height: 1.45; }
html.esp-platform-v5 .v5-streak-pop.is-loading { min-height: 148px; }
html.esp-platform-v5 .v5-streak-pop.is-loading .v5-streak-pop-head em i { background: var(--v5-indigo); }
html.esp-platform-v5 .v5-streak-loading-copy {
  display: grid;
  margin-top: 16px;
  padding: 22px 0 4px;
  gap: 7px;
  border-top: 1px solid var(--v5-line);
}
html.esp-platform-v5 .v5-streak-loading-copy strong { font-size: 15px; letter-spacing: -.025em; }
html.esp-platform-v5 .v5-streak-loading-copy span { color: var(--v5-muted); font-size: 10px; }
html.esp-platform-v5 .v5-streak-week { display: grid; margin-top: 14px; grid-template-columns: repeat(7,1fr); gap: 5px; }
html.esp-platform-v5 .v5-streak-day { display: grid; min-width: 0; gap: 5px; place-items: center; color: var(--v5-soft); }
html.esp-platform-v5 .v5-streak-day b { font: 650 8px/1 "IBM Plex Mono", monospace; }
html.esp-platform-v5 .v5-streak-day i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--v5-line); border-radius: 50%; background: #fafaf7; }
html.esp-platform-v5 .v5-streak-day.is-done i { border-color: #b9d8c7; background: var(--v5-green); box-shadow: inset 0 0 0 5px var(--v5-green-pale); }
html.esp-platform-v5 .v5-streak-day.is-today i { outline: 2px solid var(--v5-indigo); outline-offset: 2px; }
html.esp-platform-v5 .v5-streak-evidence { margin-top: 15px; padding: 11px 12px; border-left: 3px solid var(--v5-green); background: #f2f7f4; }
html.esp-platform-v5 .v5-streak-evidence span,
html.esp-platform-v5 .v5-streak-milestone span { display: block; color: var(--v5-soft); font: 650 8px/1.2 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
html.esp-platform-v5 .v5-streak-evidence strong { display: block; margin-top: 5px; font-size: 10px; line-height: 1.35; }
html.esp-platform-v5 .v5-streak-milestone { display: grid; margin-top: 13px; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 12px; }
html.esp-platform-v5 .v5-streak-milestone strong { display: block; margin-top: 4px; font-size: 10px; }
html.esp-platform-v5 .v5-streak-progress { position: relative; display: block; height: 4px; overflow: hidden; background: var(--v5-line-soft); }
html.esp-platform-v5 .v5-streak-progress i { position: absolute; inset: 0 auto 0 0; background: var(--v5-indigo); }
html.esp-platform-v5 .v5-streak-cta { display: flex; min-height: 49px; margin-top: 14px; padding: 0 13px; align-items: center; justify-content: space-between; color: white; border-radius: 11px; background: var(--v5-ink); text-decoration: none; }
html.esp-platform-v5 .v5-streak-cta span { display: grid; gap: 2px; }
html.esp-platform-v5 .v5-streak-cta strong { font-size: 11px; }
html.esp-platform-v5 .v5-streak-cta small { color: #cbd0da; font-size: 8px; }
html.esp-platform-v5 .v5-streak-cta > b { font-size: 15px; font-weight: 400; }
html.esp-platform-v5 .v5-streak-foot { display: grid; margin-top: 13px; padding-top: 11px; gap: 8px; border-top: 1px solid var(--v5-line); }
html.esp-platform-v5 .v5-streak-foot p { display: grid; margin: 0; gap: 3px; }
html.esp-platform-v5 .v5-streak-foot p b { color: var(--v5-ink-2); font-size: 9px; }
html.esp-platform-v5 .v5-streak-foot p span,
html.esp-platform-v5 .v5-streak-foot > span { color: var(--v5-muted); font-size: 8.5px; line-height: 1.35; }
html.esp-platform-v5 .app-v5-topbar .v5-avatar { display: grid; width: 44px; min-width: 44px; height: 44px; place-items: center; border: 1px solid #cfd3e6; border-radius: 50%; background: var(--v5-indigo-pale); color: var(--v5-indigo-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
html.esp-platform-v5 .app-shell > .app-v5-topbar + .app-main { min-height: calc(100vh - 68px); }
html.esp-platform-v5 body.app-drill-session .app-shell > .app-v5-topbar { display: none; }
html.esp-platform-v5 body.app-drill-session .app-shell > .app-v5-topbar + .app-main { min-height: 100vh; }

html.esp-platform-v5 :where(button, a, summary, select, input, textarea):focus-visible {
  outline: 2px solid var(--v5-indigo);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  html.esp-platform-v5 :where(button, a, summary, select) {
    transition-duration: 140ms;
    transition-timing-function: ease;
  }
  html.esp-platform-v5 :where(button, a, summary, select):active {
    transform: translateY(1px);
    transition-duration: 90ms;
  }
}

@keyframes v5-shell-flame {
  0%, 100% { transform: scale(1) rotate(0); }
  38% { transform: scale(1.18,1.25) rotate(-4deg); }
  68% { transform: scale(.97,1.08) rotate(3deg); }
}
@keyframes v5-streak-flame-open {
  0% { transform: scale(.92,1.04) rotate(0); filter: brightness(1); }
  32% { transform: scale(1.15,1.2) rotate(-4deg); filter: brightness(1.08); }
  67% { transform: scale(.98,1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0); filter: none; }
}
@keyframes v5-streak-flame-close {
  0% { transform: scale(1) rotate(0); }
  45% { transform: scale(.9,1.08) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes v5-streak-ember {
  0% { opacity: 0; transform: translate3d(0,4px,0) scale(.7); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(2px,-10px,0) scale(.3); }
}
@keyframes v5-streak-pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes v5-streak-pop-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-3px) scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  html.esp-platform-v5 *,
  html.esp-platform-v5 *::before,
  html.esp-platform-v5 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* O mesmo shell aprovado na Home e na sala de correção. */
@media (min-width: 821px) {
  html.esp-platform-v5 .app-v5-topbar .v5-streak { display: none; }
  html.esp-platform-v5 .app-shell > .app-sidebar {
    width: 190px;
    padding: 25px 18px 18px;
    color: var(--v5-ink);
    border-right: 1px solid var(--v5-line);
    background: #fafaf7;
    box-shadow: none;
  }
  html.esp-platform-v5 .app-shell > .app-sidebar::after { display: none; }
  html.esp-platform-v5 .app-shell > .app-main { margin-left: 190px; }
  html.esp-platform-v5 .app-shell .app-sidebar-logo {
    min-height: 44px;
    margin: 0 8px 38px;
    padding: 0;
    color: var(--v5-ink);
    border: 0;
  }
  html.esp-platform-v5 .app-shell .app-logo-mark {
    width: 23px;
    height: 23px;
    margin-right: 10px;
    color: var(--v5-indigo);
    filter: none;
  }
  html.esp-platform-v5 .app-shell .app-sidebar-logo strong {
    color: var(--v5-ink);
    font: 600 14px/1 Inter, sans-serif;
    letter-spacing: -.04em;
  }
  html.esp-platform-v5 .app-shell .app-sidebar-logo em { color: inherit; }
  html.esp-platform-v5 .app-shell .app-sidebar-logo small {
    margin-left: 5px;
    color: var(--v5-soft);
    font: 600 9px/1 Inter, sans-serif;
  }
  html.esp-platform-v5 .app-shell .app-nav { gap: 5px; }
  html.esp-platform-v5 .app-shell .app-nav-label {
    margin: 0 11px 7px;
    color: var(--v5-soft);
    font: 700 10px/1.3 "IBM Plex Mono", monospace;
    letter-spacing: .13em;
  }
  html.esp-platform-v5 .app-shell .app-nav-label--evaluation { margin-top: 24px; }
  html.esp-platform-v5 .app-shell .app-nav-item {
    min-height: 44px;
    padding: 0 11px;
    gap: 11px;
    color: var(--v5-muted);
    border-radius: 11px;
    background: transparent;
    font: 600 13px/1.2 Inter, sans-serif;
  }
  html.esp-platform-v5 .app-shell .app-nav-item::before {
    left: -18px;
    width: 3px;
    height: 22px;
    background: var(--v5-indigo);
  }
  html.esp-platform-v5 .app-shell .app-nav-item svg {
    width: 18px;
    height: 18px;
    padding: 0;
    color: currentColor;
    border: 0;
    background: transparent;
    box-shadow: none;
    stroke-width: 1.75;
  }
  html.esp-platform-v5 .app-shell .app-nav-item:is(:hover,.active) {
    color: var(--v5-indigo-dark);
    background: var(--v5-indigo-pale);
  }
  html.esp-platform-v5 .app-shell .app-progresso {
    display: block;
    margin-top: auto;
    margin-bottom: 0;
    padding: 12px 7px 5px;
    border-top: 1px solid var(--v5-line);
    border-bottom: 0;
  }
  html.esp-platform-v5 .app-shell .app-progresso-item--streak { display: block; }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar { position: relative; display: block; }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar > summary { display: flex; width: 100%; min-height: 52px; padding: 5px 3px; align-items: center; gap: 8px; color: var(--v5-ink); list-style: none; cursor: pointer; }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar > summary::-webkit-details-marker { display: none; }
  html.esp-platform-v5 .app-shell .v5-sidebar-streak-copy { display: grid; min-width: 0; flex: 1; gap: 5px; }
  html.esp-platform-v5 .app-shell .v5-sidebar-streak-copy b { color: var(--v5-ink); font: 650 13px/1 Inter, sans-serif; letter-spacing: -.02em; }
  html.esp-platform-v5 .app-shell .v5-sidebar-streak-copy small { display: flex; align-items: center; gap: 5px; color: var(--v5-muted); font: 500 8.5px/1 Inter, sans-serif; }
  html.esp-platform-v5 .app-shell .v5-sidebar-streak-copy small i { width: 5px; height: 5px; border-radius: 50%; background: var(--v5-green); box-shadow: 0 0 0 3px var(--v5-green-pale); }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar[data-state="pending"] .v5-sidebar-streak-copy small i { background: var(--v5-coral); box-shadow: none; }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar[data-state="start"] .v5-sidebar-streak-copy small i,
  html.esp-platform-v5 .app-shell .v5-streak--sidebar[data-state="comeback"] .v5-sidebar-streak-copy small i { background: var(--v5-soft); box-shadow: none; }
  html.esp-platform-v5 .app-shell .v5-sidebar-streak-arrow { color: var(--v5-soft); font-size: 13px; transition: transform 180ms ease; }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar[open] .v5-sidebar-streak-arrow { transform: rotate(180deg); }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar > .v5-streak-pop { position: fixed; top: auto; right: auto; bottom: 18px; left: 174px; width: 324px; padding: 18px; border: 1px solid var(--v5-line); border-radius: 16px; background: var(--v5-paper); box-shadow: 0 18px 48px rgba(23,24,32,.12); }
  html.esp-platform-v5 .app-shell .v5-streak--sidebar > .v5-streak-pop::before { content: ""; position: absolute; top: auto; right: auto; bottom: 35px; left: -5px; width: 9px; height: 9px; transform: rotate(-45deg); border-top: 1px solid var(--v5-line); border-left: 1px solid var(--v5-line); background: var(--v5-paper); }
  html.esp-platform-v5 .app-shell .app-progresso-item--deadline { display: block; min-height: 0; margin-top: 5px; padding: 13px 3px 0; border: 0; border-top: 1px solid var(--v5-line-soft); }
  html.esp-platform-v5 .app-shell .app-progresso-phase { display: block; color: var(--v5-soft); font: 700 9px/1.2 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
  html.esp-platform-v5 .app-shell .app-progresso-item--deadline b { display: block; margin-top: 6px; color: var(--v5-ink); font: 600 16px/1 Inter, sans-serif; letter-spacing: -.03em; text-align: left; }
  html.esp-platform-v5 .app-shell .app-progresso-item--deadline small { color: var(--v5-muted); font: 500 10px/1.3 Inter, sans-serif; }
  html.esp-platform-v5 .app-shell .app-user { display: none; }
}

html.esp-platform-v5 :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--v5-indigo);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  html.esp-platform-v5 .app-shell > .app-v5-topbar {
    min-height: 62px;
    margin-left: 0;
    padding: 0 18px;
  }
  html.esp-platform-v5 .app-v5-topbar > strong { min-width: 0; }
  html.esp-platform-v5 .app-v5-topbar > strong { font-size: 12px; }
  html.esp-platform-v5 .app-v5-topbar .v5-streak summary > .v5-streak-unit { display: none; }
  html.esp-platform-v5 .app-v5-topbar .v5-streak-pop { position: fixed; top: 69px; right: 12px; width: min(324px, calc(100vw - 24px)); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
  html.esp-platform-v5 .app-v5-topbar .v5-streak-pop::before { right: 78px; }
  html.esp-platform-v5 .v5-streak-day i { width: 22px; height: 22px; }
  html.esp-platform-v5 .app-shell > .app-v5-topbar + .app-main { min-height: calc(100vh - 62px); }
  html.esp-platform-v5 .app-shell > .app-main {
    margin-left: 0;
    padding-bottom: calc(102px + env(safe-area-inset-bottom));
  }
  html.esp-platform-v5 .app-shell > .app-bottombar {
    min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px max(4px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    color: var(--v5-muted);
    border-top: 1px solid var(--v5-line);
    background: rgba(255,253,248,.97);
    box-shadow: none;
    backdrop-filter: blur(14px);
  }
  html.esp-platform-v5 .app-shell > .app-bottombar::before { background: var(--v5-line); }
  html.esp-platform-v5 .app-shell .app-bottombar .app-nav-item {
    min-height: 56px;
    padding: 5px 2px 3px;
    gap: 4px;
    color: var(--v5-muted);
    border-radius: 0;
    background: transparent;
    font: 600 12px/1 Inter, sans-serif;
    letter-spacing: 0;
  }
  html.esp-platform-v5 .app-shell .app-bottombar .app-nav-item::before {
    top: -5px;
    width: 25px;
    height: 3px;
    border-radius: 0;
    background: var(--v5-indigo);
  }
  html.esp-platform-v5 .app-shell .app-bottombar .app-nav-item svg {
    width: 20px;
    height: 20px;
    padding: 0;
    color: currentColor;
    background: transparent;
    stroke-width: 1.75;
  }
  html.esp-platform-v5 .app-shell .app-bottombar .app-nav-item.active {
    color: var(--v5-indigo-dark);
    background: transparent;
  }
  html.esp-platform-v5 .app-shell .app-bottombar .app-nav-item.active svg { color: currentColor; background: transparent; }
  html.esp-platform-v5 .app-shell > .app-streak-dock { display: none; }
  html.esp-platform-v5 .app-shell .app-streak-trigger {
    color: var(--v5-green);
    border-color: #c8dfd2;
    background: rgba(255,253,248,.97);
    box-shadow: 0 8px 22px rgba(31, 39, 54, .1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.esp-platform-v5 *,
  html.esp-platform-v5 *::before,
  html.esp-platform-v5 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}