:root {
    color-scheme: light;
    --papel: #f3f7fd;
    --cartao: #ffffff;
    --superficie: #ffffff;
    --superficie-2: #e7eefb;
    --tinta: #07101f;
    --muted: #4a5d80;
    --linha: #d5e2f5;
    --primario: #4f46e5;
    --primario-hover: #3730a3;
    --realce: rgb(59 130 246 / 14%);
    --erro: #b91c1c;
    --alerta: #fee2e2;
    --sombra: 0 16px 40px rgb(7 16 31 / 8%);
    --brilho: rgb(59 130 246 / 16%);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top left, var(--brilho), transparent 32rem),
        var(--papel);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
}

.pular {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--primario);
    color: #fff;
    padding: 0.5rem 0.75rem;
}

.pular:focus {
    top: 1rem;
}

.topo,
.rodape,
main {
    width: min(960px, calc(100% - 2rem));
    margin-inline: auto;
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
}

.marca {
    color: var(--tinta);
    font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
}

main {
    flex: 1;
    padding-bottom: 2rem;
}

h1 {
    margin: 0.2rem 0 0.6rem;
    font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.olho {
    margin: 0;
    color: var(--primario);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.apoio,
.nota {
    color: var(--muted);
    max-width: 42rem;
}

.cartao,
.painel {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 1.25rem;
    box-shadow: var(--sombra);
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.cartao {
    max-width: 28rem;
    margin-top: 1rem;
}

form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.campo {
    display: grid;
    gap: 0.35rem;
}

label {
    font-weight: 650;
}

input,
select {
    width: 100%;
    border: 1px solid var(--linha);
    border-radius: 0.7rem;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    padding: 0.75rem 0.85rem;
}

.erro {
    color: var(--erro);
    min-height: 1.2rem;
}

.alerta:not(:empty) {
    background: var(--alerta);
    border-radius: 0.7rem;
    color: var(--erro);
    padding: 0.75rem 0.9rem;
}

.alerta ul {
    margin: 0;
    padding-left: 1.1rem;
}

button,
.primario {
    border: 0;
    border-radius: 999px;
    background: var(--primario);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.75rem 1.15rem;
    text-decoration: none;
}

button:hover,
.primario:hover {
    background: var(--primario-hover);
}

.link {
    display: inline-block;
    margin-top: 0.5rem;
}

.sair {
    margin: 0;
}

.sair button {
    background: transparent;
    color: var(--primario);
    border: 1px solid var(--primario);
}

.sair button:hover {
    background: var(--primario);
    color: #fff;
}

.ficha {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.ficha div {
    border-top: 1px solid var(--linha);
    padding-top: 0.8rem;
}

dt {
    color: var(--muted);
    font-size: 0.85rem;
}

dd {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
}

.rodape {
    color: var(--muted);
    font-size: 0.9rem;
    padding: 1rem 0 1.5rem;
}

:focus-visible {
    outline: 3px solid var(--primario);
    outline-offset: 3px;
}

.topo {
    gap: 1rem;
    flex-wrap: wrap;
}

.topo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
}

.topo-acoes .sair,
#tema-global {
    margin: 0;
}

.menu {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.menu a {
    color: var(--primario);
    font-weight: 700;
    text-decoration: none;
}

.secundario {
    background: transparent;
    color: var(--primario);
    border: 1px solid var(--primario);
}

.secundario:hover {
    background: var(--primario);
    color: #fff;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.acoes form,
.acoes-linha form {
    margin: 0;
}

.acoes-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cartao-largo {
    max-width: 40rem;
}

textarea {
    width: 100%;
    border: 1px solid var(--linha);
    border-radius: 0.7rem;
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
    padding: 0.75rem 0.85rem;
}

.tabela-rolagem {
    overflow-x: auto;
    margin-top: 1rem;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela caption {
    text-align: left;
    margin-bottom: 0.5rem;
}

.tabela th,
.tabela td {
    border-bottom: 1px solid var(--linha);
    padding: 0.75rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.tabela a {
    color: var(--primario);
    font-weight: 700;
}

.paginacao {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.importar,
fieldset {
    border: 1px solid var(--linha);
    border-radius: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.importar h2,
.painel h2,
legend {
    font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
}

.opcao,
.campo-check {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 0.4rem 0;
}

.opcao input,
.campo-check input {
    width: auto;
}

.grade {
    display: grid;
    gap: 1rem;
}

.enunciado,
.desafio {
    margin-top: 1.5rem;
}

.enunciado {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 1rem;
    padding: 0.25rem 1.25rem 1rem;
}

.codigo,
.enunciado pre,
.enunciado code {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.92rem;
}

.codigo {
    overflow-x: auto;
    background: var(--superficie-2);
    border-radius: 0.7rem;
    padding: 0.75rem;
    white-space: pre-wrap;
}

.arquivo {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linha);
}

@media (min-width: 720px) {
    .grade,
    .ficha {
        grid-template-columns: 1fr 1fr;
    }
}

button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

main.laboratorio {
    width: min(1180px, calc(100% - 2rem));
}

.lista-desafios {
    list-style: none;
    padding: 0;
}

.lista-desafios a {
    color: var(--primario);
    font-weight: 700;
}

.barra-editor,
.explorador button {
    font: inherit;
}

.barra-editor {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.bancada {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.explorador {
    border: 1px solid var(--linha);
    border-radius: 1rem;
    background: var(--cartao);
    padding: 0.5rem;
}

.explorador ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.explorador button {
    width: 100%;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--tinta);
    text-align: left;
    padding: 0.55rem 0.7rem;
}

.explorador button[aria-current="true"] {
    background: var(--realce);
}

.explorador button.modificado::before {
    content: "● ";
    color: var(--primario);
}

#editor {
    min-height: 32rem;
    border: 1px solid var(--linha);
    border-radius: 1rem;
    overflow: hidden;
}

.execucao {
    margin-top: 1.5rem;
}

html[data-tema="escuro"] {
    color-scheme: dark;
    --papel: #07101f;
    --cartao: #0f1d33;
    --superficie: #15273f;
    --superficie-2: #0b1628;
    --tinta: #e8eefc;
    --muted: #9fb0cf;
    --linha: rgb(148 184 255 / 22%);
    --primario: #818cf8;
    --primario-hover: #a5b4fc;
    --realce: rgb(59 130 246 / 22%);
    --erro: #fca5a5;
    --alerta: rgb(239 68 68 / 16%);
    --sombra: 0 16px 40px rgb(2 8 23 / 45%);
    --brilho: rgb(6 182 212 / 18%);
}

@media (min-width: 800px) {
    .bancada {
        grid-template-columns: 16rem 1fr;
    }
}

body.aplicacao {
    display: block;
}

body.aplicacao main,
body.aplicacao main.laboratorio {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1rem 1.25rem 2.5rem;
}

.casco {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    min-height: 100vh;
}

.lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1rem;
    background: var(--cartao);
    border-right: 1px solid var(--linha);
}

.marca-lateral {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    color: var(--tinta);
    text-decoration: none;
    font-weight: 700;
}

.marca-lateral small,
.grupo-nav {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.selo,
.selo-portal {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: var(--primario);
    color: #fff;
    font-size: 0.85rem;
}

.menu-lateral {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.menu-lateral a {
    border-radius: 0.7rem;
    color: var(--tinta);
    padding: 0.55rem 0.7rem;
    text-decoration: none;
}

.menu-lateral a.atual,
.menu-lateral a:hover {
    background: var(--realce);
    color: var(--primario);
}

.barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--linha);
    background: var(--cartao);
}

.marca-curta,
.nav-mobile {
    display: none;
}

.quem {
    color: var(--muted);
    font-size: 0.9rem;
}

.portal-main {
    width: min(26rem, calc(100% - 1.5rem));
    margin: 0 auto 2rem;
}

.portal-topo {
    display: flex;
    justify-content: flex-end;
    width: min(26rem, calc(100% - 1.5rem));
    margin: 1rem auto 0.5rem;
}

.portal-cartao button.primario,
.portal-cartao button.largo {
    width: 100%;
}

.campo-linha {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.campo-linha input {
    flex: 1;
    min-width: 0;
}

.campo-linha .contorno {
    width: auto;
    flex: 0 0 auto;
}

.portal-cartao {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 1.25rem;
    box-shadow: var(--sombra);
    padding: 1.25rem;
}

.portal-cartao h1,
.centro {
    text-align: center;
}

.selo-portal {
    margin: 0 auto 0.75rem;
}

.abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 1rem;
}

.aba {
    border-radius: 999px;
    padding: 0.65rem 0.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--tinta);
    background: var(--superficie-2);
    font-weight: 700;
}

.aba.atual {
    background: var(--primario);
    color: #fff;
}

.diretrizes {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
}

.metricas,
.grade-painel {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.metricas article,
.grade-painel > section,
.lista-desafios.cartoes li {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.metricas p,
.metricas span {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.metricas strong {
    display: block;
    font-size: 1.6rem;
}

.ide {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 0.75rem;
    align-items: start;
}

.coluna-ide,
.coluna-editor {
    min-width: 0;
}

.ide-topo {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
}

.ide-topo h1 {
    font-size: clamp(1.4rem, 2vw, 2rem);
}

.suite-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.suite-lista li {
    border: 1px solid var(--linha);
    border-radius: 0.8rem;
    padding: 0.7rem 0.8rem;
    display: grid;
    gap: 0.15rem;
}

.suite-lista .ok {
    background: rgb(16 185 129 / 12%);
}

.suite-lista .falha {
    background: var(--alerta);
}

html[data-tema="escuro"] button,
html[data-tema="escuro"] .primario,
html[data-tema="escuro"] .aba.atual,
html[data-tema="escuro"] .selo,
html[data-tema="escuro"] .selo-portal {
    color: #07101f;
}

html[data-tema="escuro"] .secundario,
html[data-tema="escuro"] .sair button,
html[data-tema="escuro"] .explorador button,
html[data-tema="escuro"] .nav-mobile a,
html[data-tema="escuro"] .nav-mobile button {
    color: var(--tinta);
}

html[data-tema="escuro"] .secundario,
html[data-tema="escuro"] .sair button {
    color: var(--primario);
}

@media (max-width: 900px) {
    .casco {
        display: block;
    }

    .lateral,
    .barra .menu {
        display: none;
    }

    .marca-curta,
    .nav-mobile {
        display: flex;
    }

    .nav-mobile {
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--linha);
        background: var(--cartao);
    }

    .nav-mobile a,
    .nav-mobile button {
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--superficie-2);
        color: var(--tinta);
        padding: 0.45rem 0.8rem;
        text-decoration: none;
        font-weight: 700;
    }

    .ide,
    .metricas,
    .grade-painel {
        grid-template-columns: 1fr;
    }

    .ide-topo,
    .ide-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .portal-main {
        margin-top: 0.75rem;
    }
}

@media (min-width: 720px) {
    .metricas {
        grid-template-columns: repeat(3, 1fr);
    }

    .grade-painel {
        grid-template-columns: 1.4fr 0.8fr;
    }
}

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.icone {
    display: inline-block;
    vertical-align: -0.2em;
    flex: 0 0 auto;
}

.etiqueta,
.pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
}

.pilula.ok,
.etiqueta.ok {
    background: rgb(16 185 129 / 14%);
    color: #047857;
}

button.contorno,
a.contorno,
.icone-botao,
.sair button {
    background: var(--cartao);
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: 0.7rem;
    box-shadow: none;
}

button.primario,
a.primario,
button.largo {
    background: #4f46e5;
    color: #fff;
    border: 0;
    border-radius: 0.7rem;
}

button.primario:hover,
a.primario:hover {
    background: #3730a3;
    color: #fff;
}

button.largo,
a.primario.largo {
    width: 100%;
}

.marca-texto {
    display: grid;
    gap: 0.1rem;
    line-height: 1.2;
}

.marca-texto .etiqueta {
    margin-left: 0.35rem;
    text-transform: none;
    letter-spacing: 0;
}

.lateral-rodape {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
    display: grid;
    gap: 0.75rem;
}

.lateral-rodape .interruptor {
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 0.7rem;
    background: var(--superficie-2);
}

.lateral-rodape p {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--tinta);
    font-weight: 700;
}

.lateral {
    display: flex;
    flex-direction: column;
}

.menu-lateral a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 650;
}

.menu-lateral a.atual {
    background: #eef2ff;
    color: #4338ca;
}

.abas-topo {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.abas-topo a {
    border-radius: 0.7rem;
    color: var(--muted);
    padding: 0.45rem 0.7rem;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.abas-topo a.atual {
    background: #eef2ff;
    color: #4338ca;
}

.topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.titulo-barra {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    color: var(--tinta);
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-topo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--linha);
}

.avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
}

.avatar.mini {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.75rem;
}

.quem {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.quem small,
.quem span small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.painel-figma {
    display: grid;
    gap: 0.9rem;
}

.cabecalho-painel,
.titulo-cartao,
.linha-status,
.campo-linha,
.rotulo-linha {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.cabecalho-painel {
    align-items: stretch;
}

.cabecalho-painel h1 {
    font-family: inherit;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.cartao-janela,
.cartao-painel {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.cartao-janela p,
.cartao-janela span,
.metricas p {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.cartao-janela strong {
    display: block;
    margin: 0.25rem 0;
}

.metricas.cinco {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.grade-tres,
.grade-resultado {
    display: grid;
    gap: 0.75rem;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tabela th,
.tabela td {
    border-bottom: 1px solid var(--linha);
    padding: 0.55rem 0.2rem;
    text-align: left;
}

.lista-linhas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.lista-linhas li {
    display: grid;
    gap: 0.15rem;
}

.faixa-sessao {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--linha);
    border-radius: 0.8rem;
    background: var(--superficie);
}

.faixa-sessao strong,
.faixa-sessao small {
    display: block;
}

.ponto {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #10b981;
}

.abas .aba {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.aba.atual {
    background: #4f46e5;
    color: #fff;
}

.otp {
    display: flex;
    gap: 0.4rem;
}

.otp input {
    width: 2.5rem;
    height: 2.8rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.campo-linha input {
    flex: 1;
}

.secundario-cartao h2,
.isolamento p {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.diretrizes.icones {
    list-style: none;
    padding: 0;
}

.diretrizes.icones li {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    margin-top: 0.45rem;
}

.rodape-portal {
    color: var(--muted);
    text-align: center;
    font-size: 0.8rem;
}

.nota-cartao {
    display: grid;
    justify-items: center;
    text-align: center;
}

.anel {
    --progresso: 0%;
    display: grid;
    place-items: center;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 999px;
    background: conic-gradient(#4f46e5 var(--progresso), var(--superficie-2) 0);
}

.anel .miolo {
    display: grid;
    place-items: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 999px;
    background: var(--cartao);
    text-align: center;
}

.anel strong {
    font-size: 1.8rem;
    line-height: 1;
}

.anel span {
    color: var(--muted);
    font-size: 0.8rem;
}

html[data-tema="escuro"] .menu-lateral a.atual,
html[data-tema="escuro"] .abas-topo a.atual {
    background: rgb(129 140 248 / 18%);
    color: #c7d2fe;
}

html[data-tema="escuro"] button.primario,
html[data-tema="escuro"] a.primario,
html[data-tema="escuro"] .aba.atual,
html[data-tema="escuro"] .avatar {
    color: #fff;
    background: #4f46e5;
}

html[data-tema="escuro"] button.contorno,
html[data-tema="escuro"] a.contorno,
html[data-tema="escuro"] .icone-botao,
html[data-tema="escuro"] .sair button {
    color: var(--tinta);
    background: transparent;
}

@media (min-width: 960px) {
    .grade-tres {
        grid-template-columns: 0.9fr 1.1fr 0.9fr;
    }

    .grade-resultado {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .cabecalho-painel {
        grid-template-columns: 1.4fr 0.6fr 0.6fr;
    }
}

@media (max-width: 900px) {
    .titulo-barra,
    .abas-topo,
    .pilula.ok,
    .quem small {
        display: none;
    }

    .topo-acoes .pilula {
        display: none;
    }
}

button,
.primario,
.secundario,
.contorno,
a.primario,
a.contorno,
a.secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.55rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

button.largo,
.primario.largo {
    min-height: 2.5rem;
    width: 100%;
    font-size: 0.95rem;
}

button.miudo {
    min-width: 2.2rem;
    padding-inline: 0.4rem;
}

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.15rem 0.2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
}

.interruptor-trilho {
    position: relative;
    width: 2.45rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #d7e0f2;
    border: 1px solid var(--linha);
}

.interruptor-bolinha {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(7 16 31 / 25%);
    transition: transform 0.16s ease;
}

.interruptor[aria-checked="true"] .interruptor-trilho {
    background: #4f46e5;
    border-color: #4f46e5;
}

.interruptor[aria-checked="true"] .interruptor-bolinha {
    transform: translateX(1.1rem);
}

.interruptor[aria-checked="true"] {
    color: var(--tinta);
}

.interruptor .icone {
    width: 15px;
    height: 15px;
}

body.aplicacao main,
body.aplicacao main.laboratorio {
    padding: 0.75rem 1rem 1.6rem;
}

.painel,
.portal-cartao,
.cartao {
    padding: 1rem 1.05rem;
}

.painel-figma {
    gap: 0.7rem;
}

.titulo-cartao {
    align-items: end;
    margin-bottom: 0.15rem;
}

.titulo-cartao h1,
.cabecalho-painel h1,
.ide-topo h1 {
    margin: 0.1rem 0 0.2rem;
}

.metricas,
.grade-painel,
.grade-tres {
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.metricas article,
.cartao-painel,
.cartao-janela,
.lista-desafios.cartoes li {
    padding: 0.7rem 0.8rem;
    border-radius: 0.85rem;
}

.metricas strong {
    font-size: 1.35rem;
}

form {
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.campo {
    gap: 0.28rem;
}

.abas {
    margin-top: 0.7rem;
    gap: 0.35rem;
}

.aba {
    padding: 0.45rem 0.55rem;
}

.faixa-sessao {
    margin-top: 0.75rem;
    padding: 0.55rem 0.7rem;
}

.painel-figma .tabela-rolagem,
.painel-figma form.importar {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 0.85rem;
    padding: 0.35rem 0.75rem 0.75rem;
}

.ide {
    gap: 0.55rem;
    align-items: stretch;
}

.coluna-ide,
.coluna-editor {
    background: var(--cartao);
    border: 1px solid var(--linha);
    border-radius: 0.85rem;
    padding: 0.65rem 0.7rem 0.75rem;
}

.coluna-editor {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.coluna-ide h2 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.15rem 0 0.4rem;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.enunciado {
    max-height: 14rem;
    margin-top: 0;
    padding: 0.35rem 0.75rem 0.6rem;
    border-radius: 0.65rem;
    font-size: 0.9rem;
    overflow: auto;
}

.barra-editor,
.ide-acoes {
    gap: 0.4rem;
    margin: 0;
}

#editor {
    flex: 1 1 auto;
    width: 100%;
    height: calc(100dvh - 11.5rem);
    min-height: calc(100dvh - 11.5rem);
    border-radius: 0.6rem;
}

.ide-pagina {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 5.2rem);
}

.ide-topo {
    margin-bottom: 0.35rem;
}

.ide-topo h1 {
    font-size: 1.25rem;
}

.ide {
    flex: 1;
    align-items: stretch;
    grid-template-columns: 12.5rem minmax(0, 1fr) 14.5rem;
}

.coluna-ide {
    max-height: calc(100dvh - 8.5rem);
    overflow: auto;
}

.coluna-editor {
    min-height: calc(100dvh - 8.5rem);
}

button.interruptor,
button.interruptor:hover,
html[data-tema="escuro"] button.interruptor,
html[data-tema="escuro"] button.interruptor:hover {
    background: transparent;
    color: var(--tinta);
    border: 0;
    min-height: 2rem;
    padding: 0.15rem 0.35rem;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.interruptor-trilho {
    width: 2.8rem;
    height: 1.55rem;
}

.interruptor-bolinha {
    width: 1.15rem;
    height: 1.15rem;
}

.interruptor[aria-checked="true"] .interruptor-bolinha {
    transform: translateX(1.25rem);
}

@media (max-width: 900px) {
    .ide {
        display: flex;
        flex-direction: column;
    }

    .coluna-editor {
        order: -1;
    }

    #editor,
    .coluna-editor,
    .coluna-ide {
        min-height: 0;
        max-height: none;
        height: auto;
    }

    #editor {
        height: 72dvh;
        min-height: 72dvh;
    }
}

.explorador button {
    width: 100%;
    justify-content: flex-start;
    min-height: 1.9rem;
    padding: 0.28rem 0.5rem;
    border-radius: 0.45rem;
    font-size: 0.8rem;
    font-weight: 650;
}

.suite-lista {
    gap: 0.4rem;
}

.suite-lista li {
    padding: 0.5rem 0.6rem;
}

html[data-tema="escuro"] .interruptor {
    background: transparent;
    color: var(--muted);
}

html[data-tema="escuro"] .interruptor-trilho {
    background: #15273f;
}

html[data-tema="escuro"] .interruptor[aria-checked="true"] .interruptor-trilho {
    background: #4f46e5;
}

.lateral-rodape .interruptor,
.lateral-rodape .interruptor:hover,
html[data-tema="escuro"] .lateral-rodape .interruptor,
html[data-tema="escuro"] .lateral-rodape .interruptor:hover {
    justify-content: space-between;
    width: 100%;
    background: var(--superficie-2);
    color: var(--tinta);
}

.tema-lateral {
    margin-top: 0.85rem;
}

.tema-lateral button.interruptor,
.tema-lateral button.interruptor:hover,
.topo-acoes button.interruptor,
.topo-acoes button.interruptor:hover,
html[data-tema="escuro"] .tema-lateral button.interruptor,
html[data-tema="escuro"] .topo-acoes button.interruptor {
    background: var(--superficie-2);
    color: var(--tinta);
}

.tema-lateral button.interruptor {
    width: 100%;
    justify-content: space-between;
}

@media (min-width: 901px) {
    body.tela-cheia .abas-topo {
        display: none;
    }

    body.tela-cheia main {
        padding: 0.4rem 0.55rem 0.55rem;
    }

    body.tela-cheia .ide-pagina,
    body.tela-cheia .coluna-editor,
    body.tela-cheia .coluna-ide {
        min-height: 0;
        max-height: none;
    }

    body.tela-cheia .ide-pagina {
        height: calc(100dvh - 4.2rem);
    }

    body.tela-cheia .ide {
        height: 100%;
        min-height: 0;
    }

    body.tela-cheia #editor {
        height: auto;
        min-height: 0;
        flex: 1 1 auto;
    }
}

.topo-lateral {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.marca-lateral {
    flex: 1;
    min-width: 0;
}

button.contrair-menu,
button.contrair-menu:hover,
html[data-tema="escuro"] button.contrair-menu,
html[data-tema="escuro"] button.contrair-menu:hover {
    display: grid;
    place-items: center;
    width: 2.2rem;
    min-height: 2.2rem;
    padding: 0;
    border: 1px solid var(--linha);
    border-radius: 0.55rem;
    background: var(--superficie-2);
    color: var(--tinta);
}

html[data-menu="contraido"] .casco {
    grid-template-columns: 4.75rem minmax(0, 1fr);
}

html[data-menu="contraido"] .lateral {
    padding-inline: 0.55rem;
}

html[data-menu="contraido"] .rotulo-menu,
html[data-menu="contraido"] .grupo-nav {
    display: none;
}

html[data-menu="contraido"] .topo-lateral {
    flex-direction: column;
    align-items: center;
}

html[data-menu="contraido"] .marca-lateral,
html[data-menu="contraido"] .menu-lateral a,
html[data-menu="contraido"] .lateral-rodape p {
    justify-content: center;
}

html[data-menu="contraido"] .contrair-menu .icone {
    transform: rotate(180deg);
}

html[data-menu="contraido"] .tema-lateral button.interruptor {
    width: auto;
    justify-content: center;
    padding-inline: 0.15rem;
}

@media (min-width: 901px) {
    .tema-topo {
        display: none;
    }
}

.portal-main {
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .lateral,
    html[data-menu="contraido"] .lateral {
        display: none;
    }
}