/* =====================================================================================================
   The student's space (demo, 03/10). Not a landing page: an app a student opens every day. A rail of seven places on
   a computer, a tab bar under the thumb on a phone. Two versions the student chooses (the promise of /alunos/):
   · Moderna — clean cards, quiet colors, everything in its place.
   · Caderno — the same content on paper: ruled sheets with the red margin, handwriting for titles, the teacher's note
     as a taped post-it, the rail as the notebook's cover with its spiral.
   Built on sistema.css tokens: every palette (color blindness, high contrast) and both themes follow by themselves.
   ===================================================================================================== */
.pagina-espaco { min-height: 100vh; }
.pagina-espaco .topo { position: sticky; top: 0; z-index: 30; }
.ea-voltar { font-size: .95rem; }

/* the strip that never lets anyone mistake Marina for a real person, and the version switch */
.ea-selo-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 8px 16px; background: var(--marca-claro); border-bottom: 1px solid color-mix(in srgb, var(--marca-texto) 55%, var(--linha)); font-size: .9rem; font-weight: 700; color: var(--tinta); }
.ea-selo-demo p::before { content: ""; display: inline-block; width: 18px; height: 7px; margin-right: 8px; border-radius: 4px; background: var(--marca-texto); transform: rotate(-4deg); vertical-align: middle; }
.ea-estilo { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--folha); border: 1px solid var(--linha-forte); }
.ea-estilo button { border: 0; background: transparent; padding: 6px 14px; min-height: 36px; border-radius: 999px; font-weight: 700; font-size: .88rem; cursor: pointer; color: var(--suave); }
.ea-estilo button[aria-pressed="true"] { background: var(--caneta); color: var(--sobre-caneta); }
.ea-estilo button[data-estilo-espaco="caderno"] { font-family: var(--mao); font-size: 1.1rem; line-height: 1; }

/* ---------- layout: rail + main ---------- */
.ea { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; padding: 28px 24px 64px; align-items: start; }
.ea-trilho { position: sticky; top: 92px; display: grid; gap: 18px; padding: 18px 14px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.ea-eu { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px dashed var(--linha-forte); }
.ea-eu strong { display: block; line-height: 1.2; }
.ea-eu small { color: var(--suave); font-size: .82rem; line-height: 1.3; display: block; }
.ea-links { display: grid; gap: 4px; }
.ea-links a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--tinta); text-decoration: none; font-weight: 700; position: relative; }
.ea-links a:hover { background: var(--caneta-claro); }
.ea-links a[aria-current="page"] { background: var(--caneta); color: var(--sobre-caneta); }
.ea-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ea-main { min-width: 0; outline: none; }
.ea-conteudo, .ea-estudo { display: grid; gap: 22px; animation: ea-entra .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes ea-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- pieces ---------- */
.ea-cabeca { display: grid; gap: 6px; }
.ea-cabeca h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); outline: none; }
.ea-cabeca-sala { grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
.ea-cabeca-sala h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.ea-sub { color: var(--suave); max-width: 44em; }
.ea-data { color: var(--suave); font-weight: 700; }
.ea-nome { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--marca-texto) 75%, transparent) 55% 92%, transparent 92%); }
.ea-sequencia { font-weight: 700; color: var(--suave); }
.ea-rotulo { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.ea-cartao { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); min-width: 0; }
.ea-cartao h2 { font-size: 1.35rem; }
.ea-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ea-frase { font-family: var(--titulo); font-size: 1.15rem; font-style: italic; color: var(--caneta-forte); }
.ea-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; font: 700 1.15rem var(--titulo); color: #fff; background: var(--caneta); }
.ea-cor-verde .ea-avatar, .ea-avatar.ea-cor-verde { background: var(--verde); }
:root[data-tema-ativo="escuro"] .ea-avatar { color: #10141f; }
.ea-avatar-eu { background: linear-gradient(135deg, #e8577a, #f5c542); color: #fff; width: 48px; height: 48px; }
.ea-avatar-mais { background: transparent; border: 2px dashed var(--linha-forte); color: var(--suave); }

/* one play button style everywhere (big target, says what it plays) */
.ea-tocar { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--papel); font-weight: 700; cursor: pointer; text-align: left; }
.ea-tocar:hover { border-color: var(--caneta); }
.ea-play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--caneta); flex: none; }
.ea-play svg { width: 16px; height: 16px; fill: var(--sobre-caneta); }
.ea-play .ic-pausa, .ea-tocar[aria-pressed="true"] .ic-tocar { display: none; }
.ea-tocar[aria-pressed="true"] .ic-pausa { display: block; }
.ea-tocar[aria-pressed="true"] { border-color: var(--caneta); background: var(--caneta-claro); }
.ea-tocar-forte { background: var(--caneta); color: var(--sobre-caneta); border-color: var(--caneta); }
.ea-tocar-forte .ea-play { background: var(--sobre-caneta); } .ea-tocar-forte .ea-play svg { fill: var(--caneta); }
.ea-tocar-forte[aria-pressed="true"] { background: var(--caneta-forte); color: var(--sobre-caneta); }
.ea-tocar-minha .ea-play { background: #e8577a; }

/* ---------- today ---------- */
.ea-grade-hoje { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.ea-proxima { grid-column: span 4; background: linear-gradient(160deg, var(--caneta-claro), var(--folha) 70%); border-color: color-mix(in srgb, var(--caneta) 30%, var(--linha)); }
.ea-tarefa-hoje { grid-column: span 2; }
.ea-recado, .ea-parou, .ea-evo-mini { grid-column: span 2; }
.ea-profs { grid-column: span 3; }
.ea-estudar { grid-column: span 3; }
.ea-proxima-topo { display: flex; gap: 14px; align-items: center; }
.ea-proxima-topo .ea-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
.ea-proxima h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.ea-quando { color: var(--suave); }
.ea-quando strong { color: var(--tinta); }
.ea-contagem.ao-vivo { color: #c8372d; font-weight: 800; }
.ea-contagem.ao-vivo::before { content: "● "; animation: ea-pisca 1.2s infinite; }
.ea-topico { font-family: var(--titulo); font-size: 1.25rem; }
.ea-antes { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--folha); border: 1px dashed var(--linha-forte); justify-items: start; }
.ea-progresso { height: 10px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.ea-progresso i, .ea-stat-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--verde); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.ea-recado { background: #fff4b8; color: #2c2c31; border-color: #ecd77a; transform: rotate(-.6deg); }
.ea-recado .ea-rotulo { color: #6b5a14; }
.ea-recado-texto { font-size: 1.45rem; line-height: 1.25; }
.ea-assina { text-align: right; font-size: 1.3rem; }
.ea-ficou { padding: 10px 14px; border-left: 4px solid var(--marca-texto); background: var(--marca-claro); border-radius: 0 10px 10px 0; margin: 0; }
.ea-stat-num { font-family: var(--titulo); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; color: var(--verde); }
.ea-stat-barra { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--margem) 25%, var(--linha)); overflow: hidden; }
.ea-profs ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ea-profs li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--linha); flex-wrap: wrap; }
.ea-profs li > span:nth-child(2) { flex: 1; min-width: 0; }
.ea-profs strong { display: block; } .ea-profs small { display: block; color: var(--suave); font-size: .85rem; }
.ea-prof-prox { width: 100%; font-weight: 700; color: var(--caneta-forte) !important; }
.ea-encontrar { border-style: dashed !important; }

/* ---------- the lesson room ---------- */
.ea-aviso-sim { padding: 10px 14px; border-radius: 12px; background: var(--caneta-claro); color: var(--tinta); font-weight: 600; font-size: .95rem; }
.ea-sala { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.ea-palco { display: grid; gap: 14px; }
.ea-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--quadro); border: 10px solid var(--quadro-moldura); box-shadow: var(--sombra-forte); padding: 6% 8%; color: var(--quadro-tinta); overflow: hidden; }
.ea-q-titulo { font: 600 clamp(1.1rem, .6rem + 2vw, 2.1rem) var(--titulo); }
.ea-q-pares { list-style: none; padding: 0; margin: 6% 0 0; display: grid; gap: .3em; font: 600 clamp(1.2rem, .7rem + 2.2vw, 2.4rem) var(--mao); }
.ea-q-pares li { opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; }
.ea-q-pares b { color: #c8372d; }
:root[data-tema-ativo="escuro"] .ea-q-pares b { color: #ffb36b; }
.ea-q-tinta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: #c8372d; stroke-width: 3.5; stroke-linecap: round; }
:root[data-tema-ativo="escuro"] .ea-q-tinta { stroke: #ffb36b; }
.ea-q-tinta path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s ease-out; }
.ea-q-dica { position: absolute; right: 7%; bottom: 14%; font-size: clamp(1rem, .6rem + 1.4vw, 1.7rem); color: #c8372d; transform: rotate(-5deg); opacity: 0; transition: opacity .5s .6s; }
:root[data-tema-ativo="escuro"] .ea-q-dica { color: #ffb36b; }
.ea-palco:not([class*="passo-"]) .ea-q-pares li, .ea-palco[class*="passo-"] .ea-q-pares li { opacity: 1; transform: none; }
.ea-palco.passo-1 .ea-q-pares li { transition-delay: calc(var(--i, 0) * .3s); }
.ea-palco.passo-1:not(.passo-2) .ea-q-pares li:nth-child(n) { animation: ea-giz .5s both; }
.ea-palco.passo-1 .ea-q-pares li:nth-child(2) { animation-delay: .35s; } .ea-palco.passo-1 .ea-q-pares li:nth-child(3) { animation-delay: .7s; }
@keyframes ea-giz { from { opacity: 0; transform: translateX(-10px); } }
.ea-palco.passo-2 .ea-q-tinta path { stroke-dashoffset: 0; }
.ea-palco.passo-2 .ea-q-dica { opacity: 1; }
.ea-frase-aula { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--folha); border: 1px solid var(--linha); }
.ea-frase-aula p { font: 600 clamp(1.15rem, .9rem + 1vw, 1.6rem) var(--titulo); }
.ea-palco.passo-3 .ea-frase-aula { border-color: #c8372d; box-shadow: 0 0 0 3px color-mix(in srgb, #c8372d 25%, transparent); }
.ea-grav-faixa { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #c8372d; color: #fff; }
.ea-grav-faixa small { display: block; opacity: .92; }
.ea-grav-faixa > span:nth-child(2) { flex: 1; }
.ea-grav-seg { font-variant-numeric: tabular-nums; font-weight: 800; }
.ea-rec { width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: ea-pisca 1s infinite; flex: none; }
@keyframes ea-pisca { 50% { opacity: .25; } }
.ea-roteiro { min-height: 1.6em; font-weight: 700; color: var(--suave); }
.ea-lado-sala { display: grid; gap: 12px; }
.ea-video { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #1d2433; display: grid; place-items: center; color: #fff; }
.ea-video .ea-avatar { width: 72px; height: 72px; font-size: 1.8rem; color: #fff; }
.ea-video-nome { position: absolute; left: 10px; bottom: 8px; font-size: .85rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgb(0 0 0 / .45); }
.ea-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.ea-video-eu.ligada video { display: block; }
.ea-video-eu.ligada .ea-video-off { display: none; }
.ea-video-off { font-size: .9rem; opacity: .8; }
.ea-onda-fala { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 3px; align-items: end; height: 18px; }
.ea-onda-fala i { width: 4px; height: 30%; border-radius: 2px; background: #7fd6a6; }
.ea-video-prof.falando { box-shadow: 0 0 0 3px #7fd6a6 inset; }
.ea-video-prof.falando .ea-onda-fala i { animation: ea-fala .5s infinite alternate; }
.ea-onda-fala i:nth-child(2) { animation-delay: .15s !important; } .ea-onda-fala i:nth-child(3) { animation-delay: .3s !important; } .ea-onda-fala i:nth-child(4) { animation-delay: .05s !important; }
@keyframes ea-fala { to { height: 100%; } }
.ea-mic { position: absolute; right: 10px; bottom: 8px; width: 8px; height: 26px; border-radius: 4px; background: rgb(255 255 255 / .25); overflow: hidden; display: flex; align-items: end; }
.ea-mic i { width: 100%; height: 100%; background: #7fd6a6; transform: scaleY(0); transform-origin: bottom; }
.ea-teste { width: 100%; }
.ea-liberados { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; background: var(--folha); }
.ea-liberados summary { font-weight: 800; cursor: pointer; }
.ea-liberados ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.ea-liberados .ea-tocar span:last-child { font-size: .88rem; }
.ea-notas { display: grid; gap: 6px; font-weight: 800; }
.ea-notas textarea { width: 100%; resize: vertical; border-radius: 12px; border: 1px solid var(--linha-forte); padding: 10px 12px; background: var(--folha); font: 400 1.2rem/1.4 var(--mao); }

/* ---------- tasks ---------- */
.ea-lista { display: grid; gap: 16px; }
.ea-tarefa-topo { display: flex; gap: 14px; align-items: center; }
.ea-tarefa-topo > div { flex: 1; min-width: 0; }
.ea-check { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; font-weight: 800; color: #fff; }
.ea-tarefa.feita .ea-check { background: var(--verde); border-color: var(--verde); }
:root[data-tema-ativo="escuro"] .ea-tarefa.feita .ea-check { color: #10141f; }
.ea-tarefa.feita h2 { text-decoration: line-through; text-decoration-color: var(--marca-texto); text-decoration-thickness: 3px; }
.ea-tarefa > .botao-secundario { justify-self: start; }
.ea-gravador { display: grid; gap: 12px; padding: 16px; border-radius: 14px; border: 1px dashed var(--linha-forte); }
.ea-grav-linha, .ea-clips-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ea-grav-botao::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #ff6b6b; }
.ea-gravador.gravando .ea-grav-botao { background: #c8372d; }
.ea-gravador.gravando .ea-grav-botao::before { border-radius: 3px; background: #fff; animation: ea-pisca 1s infinite; }
.ea-grav-tempo { font-variant-numeric: tabular-nums; font-weight: 800; color: #c8372d; }
.ea-apagar { font-size: .9rem; }
.ea-quiz { margin: 0; padding-left: 1.4em; display: grid; gap: 14px; }
.ea-q { display: grid; gap: 8px; }
.ea-q-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ea-q-form input { width: 9em; min-height: 42px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); }
.ea-q-res { font-weight: 800; color: var(--margem); }
.ea-q.certo .ea-q-res { color: var(--verde); }
.ea-q.certo input { border-color: var(--verde); }
.ea-q-conta summary { cursor: pointer; color: var(--caneta-forte); font-weight: 700; font-size: .9rem; }

/* ---------- progress ---------- */
.ea-frase-evo { gap: 16px; }
.ea-frase-evo .ea-frase { font-size: 1.4rem; }
.ea-stat-linha { display: grid; grid-template-columns: auto minmax(120px, 1fr); gap: 16px 24px; align-items: center; }
.ea-clips { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ea-clip { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linha); }
.ea-clip canvas { width: 100%; height: 40px; color: var(--caneta); }
.ea-clip:last-child canvas { color: var(--verde); }
.ea-clip-info { display: grid; text-align: right; color: var(--suave); font-variant-numeric: tabular-nums; }
.ea-clip-info small:last-child { font-weight: 800; color: var(--tinta); }
.ea-clip-nota { grid-column: 1 / -1; font-size: .92rem; color: var(--suave); }
.ea-clip-nota span { font-weight: 800; }
.ea-clip-minha { grid-template-columns: auto 1fr; border-style: dashed; }

/* ---------- path ---------- */
.ea-abas { display: flex; gap: 10px; flex-wrap: wrap; }
.ea-abas button { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--folha); font-weight: 700; cursor: pointer; }
.ea-abas .ea-avatar { width: 34px; height: 34px; font-size: 1rem; }
.ea-abas button[aria-selected="true"] { border-color: var(--caneta); box-shadow: 0 0 0 2px var(--caneta); }
.ea-trilha { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; --cor: var(--caneta); }
.ea-trilha.ea-cor-verde { --cor: var(--verde); }
.ea-no { display: grid; grid-template-columns: 48px 1fr; gap: 16px; position: relative; padding-bottom: 26px; }
.ea-no::before { content: ""; position: absolute; left: 22px; top: 48px; bottom: 0; width: 4px; border-radius: 2px; background: var(--cor); }
.ea-no:last-child::before { display: none; }
.ea-no.atual::before, .ea-no.planejado::before { background: repeating-linear-gradient(var(--linha-forte) 0 8px, transparent 8px 14px); }
.ea-no-marca { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 1.2rem var(--titulo); background: var(--cor); color: var(--sobre-caneta); position: relative; z-index: 1; }
.ea-no.atual .ea-no-marca { background: var(--marca-texto); color: #2c2c31; box-shadow: 0 0 0 6px color-mix(in srgb, var(--marca-texto) 35%, transparent); animation: ea-pulso 2s infinite; }
@keyframes ea-pulso { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--marca-texto) 10%, transparent); } }
.ea-no.planejado .ea-no-marca { background: var(--folha); color: var(--suave); border: 2px dashed var(--linha-forte); }
.ea-no > div { display: grid; gap: 6px; padding-top: 8px; }
.ea-no h2 { font-size: 1.25rem; }
.ea-no.planejado h2 { color: var(--suave); }

/* ---------- week ---------- */
.ea-semana { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ea-dia { min-height: 150px; padding: 10px; border-radius: 14px; background: var(--folha); border: 1px solid var(--linha); display: grid; gap: 8px; align-content: start; }
.ea-dia.passado { opacity: .72; }
.ea-dia.hoje { border-color: var(--caneta); box-shadow: 0 0 0 2px var(--caneta); }
.ea-dia-nome { display: flex; justify-content: space-between; align-items: baseline; color: var(--suave); text-transform: capitalize; font-size: .85rem; font-weight: 700; }
.ea-dia-nome strong { font: 600 1.4rem var(--titulo); color: var(--tinta); }
.ea-ag-aula { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--caneta-claro); border-left: 4px solid var(--caneta); font-size: .86rem; line-height: 1.3; }
.ea-ag-aula.ea-cor-verde { background: var(--verde-claro); border-left-color: var(--verde); }
.ea-ag-hora { font-weight: 800; }
.ea-ag-aula small { color: var(--suave); }
.ea-ag-estado { font-weight: 800; color: var(--verde); }
.ea-ics { min-height: 36px; padding: 4px 0; justify-content: start; font-size: .84rem; }
.ea-livre { color: var(--suave); font-size: .82rem; }

/* ---------- study: the shelf (notebooks standing like books, labs like lab doors) and the desk ---------- */
.ea-estudo, .ea-estante { display: grid; gap: 22px; }
main > section.ea-estudo { max-width: none; margin: 0; padding: 0; }
.ea-prateleira-titulo { font-size: 1.45rem; margin-top: 8px; }
.ea-prateleira { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ea-livros { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 0 12px 18px; background: linear-gradient(transparent calc(100% - 14px), var(--madeira) calc(100% - 14px)); border-radius: 0 0 6px 6px; }
.ea-livro { display: grid; gap: 6px; text-decoration: none; color: var(--tinta); justify-items: start; }
.ea-capa { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 4px 12px 12px 4px; box-shadow: inset 6px 0 0 rgb(0 0 0 / .14), 0 10px 22px -10px rgb(40 30 10 / .5); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; position: relative; overflow: hidden; }
.ea-capa i { position: absolute; left: 18%; right: 14%; top: 18%; height: 20%; border-radius: 4px; background: #fffdf5; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.ea-livro:hover .ea-capa, .ea-livro:focus-visible .ea-capa { transform: translateY(-8px) rotate(-1.5deg); box-shadow: inset 6px 0 0 rgb(0 0 0 / .14), 0 18px 28px -12px rgb(40 30 10 / .55); }
.ea-livro strong { font: 600 1.1rem var(--titulo); }
.ea-livro small, .ea-labcard small { color: var(--suave); font-size: .86rem; line-height: 1.35; }
.ea-livro-caderno .ea-capa { background: linear-gradient(90deg, #d9dde3 0 10px, #2544a8 10px); }
.ea-livro-diario .ea-capa { background: linear-gradient(90deg, transparent 0 72%, #c8372d 72% 80%, transparent 80%), #7a4a32; }
.ea-livro-agenda .ea-capa { background: linear-gradient(#f5c542 0 16%, #2f5e4e 16%); }
.ea-livro-desenho .ea-capa { background: linear-gradient(#1e1e22 0 12%, #fbfaf6 12%); }
.ea-livro-desenho .ea-capa i { background: transparent; box-shadow: none; border: 2px dashed #8a8f99; }
.ea-livro-tela .ea-capa { background: radial-gradient(circle at 30% 65%, #e8577a 0 12%, transparent 13%), radial-gradient(circle at 62% 58%, #7aa5ff 0 14%, transparent 15%), radial-gradient(circle at 48% 80%, #f5c542 0 11%, transparent 12%), #f3ede0; box-shadow: inset 0 0 0 8px #a8743f, 0 10px 22px -10px rgb(40 30 10 / .5); border-radius: 4px; }
.ea-livro-tela .ea-capa i { display: none; }
.ea-livro-partitura .ea-capa { background: repeating-linear-gradient(transparent 0 7px, #3b3b40 7px 8px) 0 50% / 100% 40px no-repeat, #fff; border: 1px solid var(--linha-forte); }
.ea-livro-partitura .ea-capa i { top: 10%; height: 14%; background: #3b3b40; }
.ea-labs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ea-labcard { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); height: 100%; transition: transform .2s, border-color .2s; }
.ea-labcard:hover, .ea-labcard:focus-visible { transform: translateY(-3px); border-color: var(--caneta); }
.ea-labcard strong { font: 600 1.1rem var(--titulo); }
.ea-labcard small { grid-column: 2; }
.ea-lab-ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--caneta-claro); color: var(--caneta-forte); }
.ea-lab-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ea-lab-quimica .ea-lab-ic, .ea-lab-biologia .ea-lab-ic { background: var(--verde-claro); color: var(--verde); }
.ea-lab-financas .ea-lab-ic, .ea-lab-historia .ea-lab-ic { background: var(--marca-claro); color: #6b4f00; }
:root[data-tema-ativo="escuro"] :is(.ea-lab-financas, .ea-lab-historia) .ea-lab-ic { color: #f2d27a; }
.ea-mesa { display: grid; gap: 16px; }
.ea-mesa-topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ea-mesa-titulo { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); outline: none; }
.ea-mesa-caderno { display: grid; gap: 12px; }
.ea-mesa-caderno .caderno-app { max-width: 920px; }
.ea-mesa-lab { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.ea-notas-lab textarea { min-height: 220px; }
.ea-atalhos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ea-atalho { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .92rem; }
.ea-atalho:hover { border-color: var(--caneta); }
.ea-atalho i { width: 22px; height: 28px; flex: none; border-radius: 2px 5px 5px 2px; box-shadow: 0 2px 4px rgb(0 0 0 / .2); }
.ea-atalho-caderno-agenda i { background: linear-gradient(#f5c542 0 6px, #2f5e4e 6px); }
.ea-atalho-lab-quimica i { background: linear-gradient(transparent 55%, #7fcf7d 55%), #e2f2e8; border-radius: 4px 4px 10px 10px; }
.ea-atalho-lab-matematica i { background: linear-gradient(#a9c7e8 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(90deg, #a9c7e8 1px, transparent 1px) 0 0 / 6px 6px, #fffefa; }
.ea-atalho-caderno-tela i { background: radial-gradient(circle at 40% 55%, #e8577a 0 25%, transparent 26%), #f3ede0; box-shadow: inset 0 0 0 3px #a8743f; }
@media (max-width: 1080px) { .ea-mesa-lab { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .ea-livros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ea-atalhos { grid-template-columns: 1fr; } }

/* =====================================================================================================
   Version "Caderno": the same space, on paper
   ===================================================================================================== */
.estilo-caderno .ea-cartao, .estilo-caderno .ea-dia, .estilo-caderno .ea-frase-aula, .estilo-caderno .ea-liberados {
  --linha-papel: #b9d1ec;
  background: #fffdf5 repeating-linear-gradient(transparent 0 31px, var(--linha-papel) 31px 32px) 0 14px;
  border: 0; border-radius: 4px 10px 10px 4px; box-shadow: 0 1px 1px rgb(60 45 20 / .12), 0 10px 26px -12px rgb(60 45 20 / .35);
  color: #2c2c31; padding-left: 38px;
}
.estilo-caderno .ea-cartao::before, .estilo-caderno .ea-dia::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #e58a8a; }
.estilo-caderno .ea-dia { position: relative; padding-left: 32px; } .estilo-caderno .ea-dia::before { left: 20px; }
/* on paper the ink is always the light-room ink, whatever the theme (a dark token on paper would vanish) */
.estilo-caderno :is(.ea-cartao, .ea-dia, .ea-frase-aula, .ea-liberados) { --tinta: #2c2c31; --suave: #55565e; --caneta: #2544a8; --caneta-forte: #1b3380; --caneta-claro: #e8edf9; --folha: #fffdf5; --papel: #fffdf5; --linha: #e3dac4; --linha-forte: #cbbd9f; --verde: #2f7a52; --verde-claro: #e2f2e8; --marca-claro: #fdf3cf; --sobre-caneta: #ffffff; --margem: #c8372d; }
:root[data-cores="vv"] .estilo-caderno :is(.ea-cartao, .ea-dia, .ea-frase-aula, .ea-liberados) { --verde: #0072b2; --verde-claro: #ddeefa; --margem: #d55e00; }
:root[data-cores="az"] .estilo-caderno :is(.ea-cartao, .ea-dia, .ea-frase-aula, .ea-liberados) { --caneta: #c4006b; --caneta-forte: #8f004e; --caneta-claro: #fbe3ef; }
:root[data-cores="contraste"] .estilo-caderno :is(.ea-cartao, .ea-dia, .ea-frase-aula, .ea-liberados) { --linha-papel: #6d8fb8; --suave: #222; --tinta: #000; color: #000; background-color: #fff; }
.estilo-caderno .ea-cartao h2, .estilo-caderno .ea-cabeca h1, .estilo-caderno .ea-no h2, .estilo-caderno .ea-topico { font-family: var(--mao); font-weight: 700; letter-spacing: 0; }
.estilo-caderno .ea-cartao h2 { font-size: 1.85rem; line-height: 1.05; }
.estilo-caderno .ea-cabeca h1 { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.8rem); }
.estilo-caderno .ea-topico { font-size: 1.7rem; }
.estilo-caderno .ea-proxima { background: #fffdf5 repeating-linear-gradient(transparent 0 31px, var(--linha-papel) 31px 32px) 0 14px; }
.estilo-caderno .ea-recado { background: #fff27a; transform: rotate(-1.6deg); padding-left: 22px; border-radius: 2px; }
.estilo-caderno .ea-recado::before { left: 50%; top: -12px; bottom: auto; width: 90px; height: 26px; margin-left: -45px; background: rgb(255 255 255 / .55); border: 1px solid rgb(0 0 0 / .06); transform: rotate(3deg); }
.estilo-caderno .ea-evo-mini { transform: rotate(.5deg); }
.estilo-caderno .ea-tarefa-hoje { transform: rotate(-.4deg); }
.estilo-caderno .ea-ficou { background: transparent; border-left: 0; padding: 0; font-family: var(--mao); font-size: 1.3rem; line-height: 1.3; }
.estilo-caderno .ea-ficou strong { background: linear-gradient(transparent 50%, #f5c542aa 50% 90%, transparent 90%); }
.estilo-caderno .ea-recado-texto, .estilo-caderno .ea-notas textarea { font-size: 1.55rem; }
.estilo-caderno .ea-notas textarea { background: #fffdf5 repeating-linear-gradient(transparent 0 33px, #b9d1ec 33px 34px); line-height: 34px; color: #2c2c31; padding-top: 0; }
/* the rail becomes the notebook's INDEX page (Kayky 03/10: the blue cover with a tilted yellow block was ugly): cream
   paper with the red margin, the name on a label, and each place a coloured divider tab sticking out of the edge;
   the open one sticks out further and is underlined with the highlighter, like the tab you are holding. */
.estilo-caderno .ea-trilho { --tinta: #2c2c31; --suave: #6a6152; background: #fffdf5 repeating-linear-gradient(transparent 0 37px, #c9dbef 37px 38px) 0 92px; border: 0; color: #2c2c31; padding: 18px 0 18px 30px; border-radius: 4px 10px 10px 4px; box-shadow: 0 1px 1px rgb(60 45 20 / .12), 0 14px 30px -14px rgb(60 45 20 / .4); overflow: visible; }
.estilo-caderno .ea-trilho::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #e58a8a; }
.estilo-caderno .ea-eu { background: transparent; border: 0; border-bottom: 2px solid #2c2c31; border-radius: 0; padding: 0 16px 12px 4px; margin-right: 16px; transform: none; }
.estilo-caderno .ea-eu strong { font: 700 1.35rem/1.05 var(--mao); white-space: nowrap; }
.estilo-caderno .ea-eu small { color: #6a6152; }
.estilo-caderno .ea-links { gap: 2px; margin-right: -14px; }
.estilo-caderno .ea-links a { --aba: #7aa5ff; color: #2c2c31; border-radius: 0 10px 10px 0; padding: 7px 14px 7px 6px; background: transparent; position: relative; }
.estilo-caderno .ea-links a::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 10px; border-radius: 0 6px 6px 0; background: var(--aba); box-shadow: 1px 1px 0 rgb(0 0 0 / .12); transition: width .2s; }
.estilo-caderno .ea-links a:nth-child(1) { --aba: #f5c542; } .estilo-caderno .ea-links a:nth-child(2) { --aba: #7aa5ff; } .estilo-caderno .ea-links a:nth-child(3) { --aba: #e8577a; }
.estilo-caderno .ea-links a:nth-child(4) { --aba: #7fcf7d; } .estilo-caderno .ea-links a:nth-child(5) { --aba: #b18cf0; } .estilo-caderno .ea-links a:nth-child(6) { --aba: #f39a4a; } .estilo-caderno .ea-links a:nth-child(7) { --aba: #5fc4c9; }
.estilo-caderno .ea-links a:hover { background: color-mix(in srgb, var(--aba) 14%, transparent); }
.estilo-caderno .ea-links a:hover::after { width: 14px; }
.estilo-caderno .ea-links a[aria-current="page"] { background: color-mix(in srgb, var(--aba) 22%, transparent); color: #2c2c31; transform: none; box-shadow: none; border-radius: 0 10px 10px 0; }
.estilo-caderno .ea-links a[aria-current="page"]::after { width: 22px; right: -8px; }
.estilo-caderno .ea-links a[aria-current="page"] span { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--aba) 70%, transparent) 55% 92%, transparent 92%); }
.estilo-caderno .ea-links span { font-family: var(--mao); font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.estilo-caderno .ea-links .ea-ic { color: #55565e; }
:root[data-tema-ativo="escuro"] .estilo-caderno .ea-trilho { background-color: #f3eedc; }
.estilo-caderno .ea-no-marca { font-family: var(--mao); font-size: 1.5rem; }
.estilo-caderno .ea-no.feito .ea-no-marca { border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%; }
.estilo-caderno .ea-semana { gap: 14px; }

/* ---------- phone: the rail becomes a tab bar under the thumb ---------- */
@media (max-width: 1080px) {
  .ea-grade-hoje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-proxima, .ea-profs, .ea-estudar { grid-column: 1 / -1; }
  .ea-tarefa-hoje, .ea-recado, .ea-parou, .ea-evo-mini { grid-column: span 1; }
  .ea-sala { grid-template-columns: 1fr; }
  .ea-lado-sala { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-lado-sala > :is(.ea-teste, .ea-teste-nota, .ea-liberados, .ea-notas) { grid-column: 1 / -1; }
  .ea-semana { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 860px) {
  .ea { grid-template-columns: 1fr; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); gap: 0; }
  .ea-trilho { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; gap: 0; }
  .ea-eu, .estilo-caderno .ea-trilho::before { display: none; }
  .estilo-caderno .ea-trilho { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background-image: none; border-radius: 14px 14px 0 0; }
  .estilo-caderno .ea-links { margin-right: 0; }
  .estilo-caderno .ea-links a { border-radius: 10px; padding: 6px 0; }
  .estilo-caderno .ea-links a::after { top: 0; bottom: auto; left: 20%; right: 20%; width: auto; height: 4px; border-radius: 0 0 4px 4px; }
  .estilo-caderno .ea-links a[aria-current="page"]::after { width: auto; right: 10%; left: 10%; height: 6px; }
  .estilo-caderno .ea-links a[aria-current="page"] span { background: none; }
  .ea-links { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .ea-links a { flex-direction: column; gap: 2px; padding: 6px 0; font-size: .68rem; text-align: center; border-radius: 12px; min-width: 0; }
  .ea-links span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .estilo-caderno .ea-links span { font-size: .95rem; }
  .estilo-caderno .ea-links a[aria-current="page"] { transform: none; }
  .ea-grade-hoje { grid-template-columns: 1fr; }
  .ea-tarefa-hoje, .ea-recado, .ea-parou, .ea-evo-mini { grid-column: 1 / -1; }
  .ea-cabeca-sala { grid-template-columns: 1fr; }
  .ea-lado-sala { grid-template-columns: 1fr; }
  .ea-clip { grid-template-columns: 1fr auto; }
  .ea-clip canvas { grid-column: 1 / -1; grid-row: 2; }
  .ea-stat-linha { grid-template-columns: 1fr; }
  .ea-semana { grid-template-columns: 1fr; }
  .ea-dia { min-height: 0; }
  .ea-dia:not(.hoje):has(.ea-livre) { padding-block: 6px; }
  .ea-cartao { padding: 18px; }
  .estilo-caderno .ea-cartao { padding-left: 34px; }
  .ea-selo-demo { justify-content: space-between; font-size: .82rem; }
}

/* calm: no rotation, no pulse, no slide-in for whoever asked for less motion or the simple version */
@media (prefers-reduced-motion: reduce) { .ea-conteudo, .ea-estudo { animation: none; } .ea-no.atual .ea-no-marca, .ea-rec, .ea-contagem.ao-vivo::before { animation: none; } }
:root[data-versao="simples"] :is(.ea-conteudo, .ea-estudo, .ea-no-marca, .ea-rec) { animation: none !important; }
:root[data-versao="simples"] .estilo-caderno :is(.ea-cartao, .ea-links a) { transform: none !important; }

/* ---------- tasks: where each one came from, new ones, the arrival notice, the badge ---------- */
.ea-abas button[data-filtro] { padding: 8px 16px; }
.ea-abas button[data-filtro][aria-pressed="true"] { border-color: var(--caneta); box-shadow: 0 0 0 2px var(--caneta); }
.ea-conta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--caneta-claro); color: var(--caneta-forte); font-size: .8rem; }
.ea-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: var(--suave); }
.ea-origem-enviada { color: var(--caneta-forte); }
.ea-novo { padding: 2px 8px; border-radius: 999px; background: #c8372d; color: #fff; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.ea-tarefa.nova { box-shadow: 0 0 0 2px var(--caneta), var(--sombra); }
.ea-resposta { display: grid; gap: 10px; justify-items: start; }
.ea-resposta label, .ea-resposta textarea { width: 100%; }
.ea-resposta textarea { resize: vertical; min-height: 110px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--linha-forte); background: var(--papel); color: var(--tinta); font: 400 1rem/1.5 var(--texto); }
.ea-entregue { font-weight: 700; color: var(--verde); }
.ea-badge { margin-left: auto; position: static; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #c8372d; color: #fff; font: 800 .74rem/20px var(--texto); text-align: center; box-shadow: 0 0 0 2px var(--folha); }
.ea-chegou { position: fixed; z-index: 60; right: 20px; top: 84px; display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 16px; background: var(--folha); color: var(--tinta); border: 1px solid var(--linha); box-shadow: var(--sombra-forte); animation: ea-chega .4s cubic-bezier(.2, .7, .2, 1); }
.ea-chegou > span:not(.ea-avatar) { display: grid; flex: 1; min-width: 0; } .ea-chegou small { color: var(--suave); }
.ea-chegou .botao { min-height: 40px; padding: 8px 16px; }
.ea-chegou-fechar { border: 0; background: transparent; font-size: 1.4rem; cursor: pointer; color: var(--suave); width: 32px; height: 32px; }
@keyframes ea-chega { from { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 860px) { .ea-chegou { left: 16px; right: 16px; top: 72px; } .ea-badge { position: absolute; left: 50%; margin-left: 4px; top: 2px; } }

/* =====================================================================================================
   Version "Moderna", end to end (Kayky 03/10: "TUDO tem que ser moderno… pegar todos os públicos"). For whoever does
   not want the notebook look: plain background, a sans-serif everywhere (no handwriting, no serif titles), flat
   cards, flat book tiles, a clean whiteboard, a clean notebook (caderno.mjs "limpo", switched by espaco-aluno.mjs).
   ===================================================================================================== */
.pagina-espaco .caderno-estilos { display: none; } /* the space's own switch (top) decides for the notebook too */
.estilo-moderno.pagina-espaco { background: var(--papel); }
.estilo-moderno :is(.ea-main, .ea-trilho, .ea-selo-demo) :is(h1, h2, h3), .estilo-moderno .ea-frase, .estilo-moderno .ea-topico, .estilo-moderno .ea-stat-num, .estilo-moderno .ea-dia-nome strong, .estilo-moderno .ea-no-marca, .estilo-moderno :is(.ea-livro, .ea-labcard) strong, .estilo-moderno .ea-q-titulo, .estilo-moderno .ea-frase-aula p, .estilo-moderno .ea-avatar {
  font-family: var(--texto); letter-spacing: -.015em; font-style: normal; font-variation-settings: normal; }
.estilo-moderno .ea-cabeca h1 { font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.estilo-moderno .ea-cartao h2, .estilo-moderno .ea-no h2 { font-weight: 800; font-size: 1.15rem; }
.estilo-moderno .ea-frase { font-weight: 600; color: var(--caneta-forte); }
.estilo-moderno .ea-nome { background: none; color: var(--caneta); }
.estilo-moderno :is(.mao, .ea-recado-texto, .ea-assina, .ea-q-pares, .ea-q-dica, .ea-notas textarea) { font-family: var(--texto); font-weight: 500; letter-spacing: 0; }
.estilo-moderno .ea-cartao { border-radius: 14px; box-shadow: 0 1px 2px rgb(20 30 60 / .06); }
.estilo-moderno .ea-proxima { background: var(--folha); border: 1px solid var(--linha); border-top: 4px solid var(--caneta); }
.estilo-moderno .ea-recado { background: var(--folha); color: var(--tinta); border: 1px solid var(--linha); border-left: 4px solid var(--marca-texto); transform: none; }
.estilo-moderno .ea-recado .ea-rotulo { color: var(--suave); }
.estilo-moderno .ea-recado-texto { font-size: 1rem; line-height: 1.55; }
.estilo-moderno .ea-assina { font-size: .95rem; color: var(--suave); }
.estilo-moderno .ea-ficou { border-left-width: 3px; background: var(--caneta-claro); border-left-color: var(--caneta); }
.estilo-moderno .ea-trilho { border-radius: 14px; box-shadow: 0 1px 2px rgb(20 30 60 / .06); }
.estilo-moderno .ea-links a { border-radius: 10px; }
.estilo-moderno .ea-tocar, .estilo-moderno .ea-abas button { border-width: 1px; }
.estilo-moderno .botao-secundario::after, .estilo-moderno .botao-link::after { display: none; }
.estilo-moderno .botao-secundario { border-width: 1px; }
.estilo-moderno .botao, .estilo-moderno .botao-secundario { border-radius: 10px; box-shadow: none; }
/* the lesson board: a clean whiteboard */
.estilo-moderno .ea-quadro { background: #ffffff; color: #1d2433; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: 0 1px 2px rgb(20 30 60 / .06); }
.estilo-moderno .ea-q-pares { font-size: clamp(1rem, .6rem + 1.6vw, 1.8rem); font-weight: 600; }
.estilo-moderno .ea-q-dica { font-size: clamp(.8rem, .5rem + .9vw, 1.1rem); font-weight: 700; transform: none; background: #fdecea; padding: 4px 10px; border-radius: 999px; }
:root[data-tema-ativo="escuro"] .estilo-moderno .ea-quadro { background: #22262d; color: #f1ede4; }
/* the shelf: flat app tiles instead of standing books */
.estilo-moderno .ea-livros { background: none; padding: 0; }
.estilo-moderno .ea-capa { aspect-ratio: 4 / 3; border-radius: 14px; box-shadow: none; border: 1px solid var(--linha); }
.estilo-moderno .ea-livro:hover .ea-capa, .estilo-moderno .ea-livro:focus-visible .ea-capa { transform: translateY(-3px); box-shadow: 0 10px 20px -14px rgb(20 30 60 / .4); }
.estilo-moderno .ea-capa i { left: 30%; right: 30%; top: 30%; height: 40%; border-radius: 10px; box-shadow: none; opacity: .9; }
.estilo-moderno .ea-livro-caderno .ea-capa { background: #e8edf9; } .estilo-moderno .ea-livro-caderno .ea-capa i { background: linear-gradient(#2544a8 0 0) 0 30% / 100% 2px no-repeat, linear-gradient(#2544a8 0 0) 0 60% / 100% 2px no-repeat, #fff; }
.estilo-moderno .ea-livro-diario .ea-capa { background: #f6e7e1; } .estilo-moderno .ea-livro-diario .ea-capa i { background: #b5533f; }
.estilo-moderno .ea-livro-agenda .ea-capa { background: #e3f1ea; } .estilo-moderno .ea-livro-agenda .ea-capa i { background: linear-gradient(#2f7a52 0 28%, #fff 28%); }
.estilo-moderno .ea-livro-desenho .ea-capa { background: #f1f1f4; } .estilo-moderno .ea-livro-desenho .ea-capa i { border: 2px dashed #8a8f99; background: #fff; }
.estilo-moderno .ea-livro-tela .ea-capa { background: radial-gradient(circle at 40% 55%, #e8577a 0 10%, transparent 11%), radial-gradient(circle at 58% 48%, #7aa5ff 0 10%, transparent 11%), radial-gradient(circle at 50% 62%, #f5c542 0 9%, transparent 10%), #fbf3ea; }
.estilo-moderno .ea-livro-partitura .ea-capa { background: #efeaf9; } .estilo-moderno .ea-livro-partitura .ea-capa i { background: repeating-linear-gradient(#5b3cc4 0 2px, #fff 2px 9px); }
:root[data-tema-ativo="escuro"] .estilo-moderno .ea-capa { filter: brightness(.82); }
.estilo-moderno .ea-labcard { border-radius: 14px; box-shadow: none; }
.estilo-moderno .ea-lab-ic { border-radius: 12px; }
/* the path and the week: flat */
.estilo-moderno .ea-no.atual .ea-no-marca { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-texto) 35%, transparent); }
.estilo-moderno .ea-dia { border-radius: 12px; }
/* the notebook in Moderna: every model flat and clean — no spiral, no coloured board, no handwriting header */
.estilo-moderno .caderno-app .caderno-modelos .modelo { border-width: 1px; border-radius: 10px; }
.estilo-moderno .caderno-app[data-estilo="limpo"] .caderno-livro, .estilo-moderno .caderno-app[data-estilo="limpo"][data-modelo] .caderno-livro { background: var(--folha); padding: 10px; border: 1px solid var(--linha); border-radius: 14px; box-shadow: none; }
.estilo-moderno .caderno-app[data-estilo="limpo"] .caderno-livro::before, .estilo-moderno .caderno-app[data-estilo="limpo"] .caderno-livro::after { display: none; }
.estilo-moderno .caderno-app[data-estilo="limpo"] .caderno-pagina { border-radius: 10px; box-shadow: none; }
.estilo-moderno .caderno-app[data-estilo="limpo"] .caderno-pagina::before { font-family: var(--texto); font-weight: 700; }
.estilo-moderno .caderno-app[data-estilo="limpo"] :is(.caderno-barra, .caderno-gaveta) { border-radius: 14px; box-shadow: none; }
.estilo-moderno .caderno-app[data-estilo="limpo"] :is(.ferramenta, .botao-pequeno, .chip-estilo, .amostra) { border-width: 1px; border-radius: 10px; }

/* =====================================================================================================
   Study: search, quick tools, filters, the library sections, and the built-in tools on the desk (03/10)
   ===================================================================================================== */
.ea-busca { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; background: var(--folha); border: 1.5px solid var(--linha-forte); box-shadow: var(--sombra); }
.ea-busca:focus-within { border-color: var(--caneta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--caneta) 25%, transparent), var(--sombra); }
.ea-busca .ea-ic { color: var(--suave); }
.ea-busca input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.08rem; padding: 10px 4px; outline: none; color: var(--tinta); }
.ea-busca .botao { min-height: 44px; padding: 10px 20px; }
.ea-busca-nota { margin-top: -10px; }
.ea-busca-resultados { display: grid; gap: 14px; padding: 18px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); scroll-margin-top: 90px; }
.ea-busca-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ea-busca-topo h2 { font-size: 1.3rem; }
.ea-busca-grade { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 16px; align-items: start; }
.ea-busca-bloco { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ea-busca-bloco h3 { font-size: .8rem; font-family: var(--texto); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.ea-wiki { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); }
.ea-wiki h4 { margin: 0; font-size: 1.1rem; }
.ea-wiki p { font-size: .95rem; line-height: 1.5; }
.ea-busca-lista, .ea-livros-achados { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ea-busca-lista a, .ea-livros-achados a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--tinta); border: 1px solid transparent; }
.ea-busca-lista a:hover, .ea-livros-achados a:hover { border-color: var(--linha-forte); background: var(--papel); }
.ea-busca-lista strong, .ea-livros-achados strong { display: block; font-size: .95rem; line-height: 1.3; }
.ea-busca-lista small, .ea-livros-achados small { display: block; color: var(--suave); font-size: .82rem; }
.ea-livros-achados img, .ea-capa-vazia { width: 40px; height: 60px; flex: none; border-radius: 3px; object-fit: cover; background: linear-gradient(135deg, var(--caneta-claro), var(--linha)); box-shadow: 0 2px 5px rgb(0 0 0 / .2); }
.ea-erro { color: var(--margem) !important; }
.ea-rapidas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ea-rapida { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px; height: 100%; border-radius: var(--raio); text-decoration: none; color: var(--tinta); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); transition: transform .2s, border-color .2s; }
.ea-rapida:hover, .ea-rapida:focus-visible { transform: translateY(-3px); border-color: var(--caneta); }
.ea-rapida strong { font: 700 1.08rem var(--texto); } .ea-rapida small { grid-column: 2; color: var(--suave); font-size: .86rem; line-height: 1.35; }
.ea-rapida-ic { grid-row: span 2; width: 48px; height: 48px; border-radius: 14px; }
.ea-rapida-desafio .ea-rapida-ic { background: #fdecc8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M9 21h6M10 17h4'/%3E%3C/svg%3E") center / 26px no-repeat; }
.ea-rapida-pomodoro .ea-rapida-ic { background: #fde3e1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8372d' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2M9 2h6'/%3E%3C/svg%3E") center / 26px no-repeat; }
.ea-rapida-trivia .ea-rapida-ic { background: #e3ebfd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232544a8' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17.5v.01'/%3E%3C/svg%3E") center / 26px no-repeat; }
.ea-atalho-ferramenta-desafio i { background: #fdecc8; box-shadow: inset 0 0 0 2px #e0a800; border-radius: 50%; width: 26px; height: 26px; }
.ea-atalho-ferramenta-pomodoro i { background: #fde3e1; box-shadow: inset 0 0 0 2px #c8372d; border-radius: 50%; width: 26px; height: 26px; }
/* filters */
.ea-filtros { display: grid; gap: 10px; position: sticky; top: 72px; z-index: 5; padding: 12px 0; background: var(--papel); }
.ea-filtro-mat, .ea-filtro-niv { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.ea-filtros button { flex: none; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--folha); color: var(--tinta); font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; }
.ea-filtros button:hover { border-color: var(--caneta); }
.ea-filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.ea-filtro-niv button[aria-pressed="true"] { background: var(--caneta); border-color: var(--caneta); color: var(--sobre-caneta); }
/* the sections */
.ea-biblioteca { display: grid; gap: 30px; }
.ea-secao { display: grid; gap: 14px; }
.ea-secao-topo { display: flex; align-items: center; gap: 12px; }
.ea-secao-topo h2 { font-size: 1.45rem; }
.ea-secao-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--caneta-claro); color: var(--caneta-forte); flex: none; }
.ea-secao-n { margin-left: auto; color: var(--suave); font-weight: 700; font-size: .85rem; }
.ea-secao-provas .ea-secao-ic { background: #fde3e1; color: #a32a22; }
.ea-secao-desafios .ea-secao-ic { background: #fdecc8; color: #8a6400; }
.ea-secao-simuladores .ea-secao-ic { background: var(--verde-claro); color: var(--verde); }
.ea-secao-ferramentas .ea-secao-ic { background: #efeaf9; color: #5b3cc4; }
.ea-recursos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ea-recurso { display: grid; gap: 6px; align-content: start; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--folha); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ea-recurso:hover, .ea-recurso:focus-visible { transform: translateY(-2px); border-color: var(--caneta); box-shadow: var(--sombra); }
.ea-recurso-topo { display: flex; justify-content: space-between; gap: 8px; }
.ea-recurso-topo strong { font-size: 1rem; line-height: 1.3; }
.ea-recurso-sai { color: var(--caneta); font-weight: 800; }
.ea-recurso-prov { color: var(--suave); font-size: .8rem; font-weight: 700; }
.ea-recurso-d { font-size: .9rem; line-height: 1.45; color: color-mix(in srgb, var(--tinta) 85%, var(--folha)); }
.ea-recurso-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ea-tag { font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); color: var(--suave); }
.ea-tag-niv { background: var(--caneta-claro); border-color: transparent; color: var(--caneta-forte); }
.ea-tag-gratis { background: var(--verde-claro); border-color: transparent; color: var(--verde); }
.ea-labs-lugar { display: grid; gap: 8px; }
.ea-labs-rotulo { font-weight: 800; font-size: .85rem; color: var(--suave); }
/* the tools on the desk */
.ea-mesa-ferramenta { display: grid; gap: 16px; max-width: 820px; }
.ea-ferramenta-cab { display: grid; gap: 10px; justify-items: start; }
.ea-niveis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ea-nivel { display: grid; gap: 6px; padding: 22px 18px; border-radius: var(--raio); border: 1.5px solid var(--linha-forte); background: var(--folha); color: var(--tinta); cursor: pointer; text-align: left; transition: transform .2s, border-color .2s; }
.ea-nivel:hover { transform: translateY(-3px); border-color: var(--caneta); }
.ea-nivel strong { font-size: 1.25rem; } .ea-nivel small { color: var(--suave); }
.ea-nivel-1 { border-top: 5px solid #7fcf7d; } .ea-nivel-2 { border-top: 5px solid #f5c542; } .ea-nivel-3 { border-top: 5px solid #e2574c; }
.ea-rodada { display: grid; gap: 16px; padding: 24px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.ea-rodada-n { color: var(--suave); font-weight: 800; font-size: .85rem; }
.ea-rodada-q { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.25; }
.ea-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ea-opcao { min-height: 56px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--linha-forte); background: var(--papel); color: var(--tinta); font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer; }
.ea-opcao:hover:not([disabled]) { border-color: var(--caneta); }
.ea-opcao.certa { background: var(--verde-claro); border-color: var(--verde); color: var(--tinta); }
.ea-opcao.certa::before { content: "✓ "; color: var(--verde); }
.ea-opcao.errada { background: #fde3e1; border-color: #c8372d; color: #5c1712; }
.ea-opcao.errada::before { content: "✗ "; }
.ea-opcao[disabled] { cursor: default; }
.ea-rodada-por { font-weight: 600; min-height: 1.5em; }
.ea-rodada [data-seguir] { justify-self: start; }
.ea-placar { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 30px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); }
.ea-placar-n { font: 800 3.4rem/1 var(--texto); color: var(--caneta); }
.ea-pomo { display: grid; gap: 18px; justify-items: center; padding: 26px; border-radius: var(--raio); background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); --cor-fase: #c8372d; }
.ea-pomo[data-fase="pausa"] { --cor-fase: var(--verde); }
.ea-pomo-presets { display: flex; gap: 8px; }
.ea-pomo-presets button { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta); font-weight: 800; cursor: pointer; }
.ea-pomo-presets button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.ea-pomo-anel { position: relative; width: min(280px, 70vw); aspect-ratio: 1; }
.ea-pomo-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ea-pomo-fundo { fill: none; stroke: var(--linha); stroke-width: 8; }
.ea-pomo-arco { fill: none; stroke: var(--cor-fase); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.ea-pomo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ea-pomo-fase { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-fase); }
.ea-pomo-tempo { font: 800 clamp(2.6rem, 2rem + 3vw, 3.8rem)/1 var(--texto); font-variant-numeric: tabular-nums; }
.ea-pomo-ciclos { font-weight: 700; }
.ea-trivia-jogo { display: grid; gap: 12px; }
/* the Caderno version: paper cards for the library too */
.estilo-caderno :is(.ea-recurso, .ea-rapida, .ea-rodada, .ea-placar, .ea-pomo, .ea-busca-resultados, .ea-nivel) { --tinta: #2c2c31; --suave: #55565e; --caneta: #2544a8; --caneta-forte: #1b3380; --caneta-claro: #e8edf9; --folha: #fffdf5; --papel: #fffdf5; --linha: #e3dac4; --linha-forte: #cbbd9f; --verde: #2f7a52; --verde-claro: #e2f2e8; --sobre-caneta: #fff; --margem: #c8372d; background-color: #fffdf5; color: #2c2c31; }
.estilo-caderno .ea-secao-topo h2, .estilo-caderno .ea-rodada-q, .estilo-caderno .ea-rapida strong { font-family: var(--mao); font-weight: 700; letter-spacing: 0; }
.estilo-caderno .ea-secao-topo h2 { font-size: 1.9rem; }
.estilo-caderno .ea-rodada-q { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.estilo-caderno .ea-rapida strong { font-size: 1.45rem; }
.estilo-caderno .ea-recurso { border-radius: 4px 10px 10px 4px; box-shadow: inset 4px 0 0 #e58a8a, 0 1px 1px rgb(60 45 20 / .1); }
@media (max-width: 1080px) { .ea-busca-grade { grid-template-columns: 1fr; } .ea-rapidas { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .ea-niveis, .ea-opcoes { grid-template-columns: 1fr; } .ea-filtros { top: 56px; } .ea-busca .botao { padding: 10px 14px; } }