.pes-tela { padding: 24px; color: var(--ink); max-width: 1200px; overflow-wrap: anywhere; }
.pes-tela section { margin-block: 24px; }
.pes-tela h1 { font-size: 24px; }
.pes-tela h2 { font-size: 18px; }
.pes-tela h3 { font-size: 15px; margin-block: 8px; }
.pes-tela p, .pes-tela li, .pes-tela small { color: var(--muted); }
.pes-tela small { display: block; }
.pes-tela button, .pes-tela input, .pes-tela select, .pes-tela summary { min-height: 44px; cursor: pointer; }
.pes-tela input, .pes-tela select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding-inline: 8px; max-width: 100%; }
.pes-tela button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding-inline: 12px; margin: 4px 4px 4px 0; }
.pes-tela .pes-primario { border: 2px solid var(--ds-accent); font-weight: 600; }
.pes-tela .pes-link { background: none; border: 0; color: var(--ds-accent); text-decoration: underline; padding: 0 4px; }
.pes-tela :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.pes-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pes-curso, .pes-cartao, .pes-aula > section { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.pes-curso progress { width: 100%; }
.pes-diag { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pes-diag li { display: flex; justify-content: space-between; gap: 8px; }
.pes-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; align-items: end; }
.pes-form label, .pes-quest label { display: grid; gap: 4px; }
.pes-quest fieldset { border: 1px solid var(--line); border-radius: 8px; margin-block: 12px; }
.pes-quest .pes-nota { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; min-height: 44px; }
.pes-notas { display: flex; flex-wrap: wrap; gap: 8px; }
.pes-pre { white-space: pre-wrap; color: var(--ink); }
.pes-aula video { width: 100%; max-height: 420px; }
.pes-erro { color: var(--ink-err); }
.pes-skeleton div { height: 64px; margin-block: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) { .pes-skeleton div { animation: ds-shimmer 1.4s infinite; } }
@media (max-width: 700px) { .pes-tela { padding: 16px; } }