.app { width: min(1120px, 100% - 32px); margin: 28px auto 64px; }
.titulo h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.025em; margin: 0 0 8px; }
.titulo p { color: var(--texto-2); margin: 0 0 24px; max-width: 70ch; }
code { font-family: var(--mono); font-size: .88em; background: var(--superficie-2); border: 1px solid var(--borda); padding: 1px 6px; border-radius: 6px; }
.duas { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .duas { grid-template-columns: 1fr; } }

/* compositor */
.compositor { background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.janela-topo { background: var(--superficie-2); padding: 10px 16px; font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--borda); }
.campo { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--borda); }
.campo label { width: 62px; flex: none; color: var(--texto-2); font-size: .88rem; }
.campo input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--texto); font: inherit; padding: 13px 0; outline: none; }
.campo:focus-within { background: color-mix(in srgb, var(--destaque) 6%, transparent); box-shadow: inset 3px 0 0 var(--destaque); }
.campo input[readonly] { color: var(--texto-2); }
.campo.corpo { padding: 0; border-bottom: 0; display: block; }
.campo.corpo:focus-within { box-shadow: inset 3px 0 0 var(--destaque); }
textarea { width: 100%; background: transparent; border: 0; color: var(--texto); font: inherit; padding: 14px 16px; resize: vertical; outline: none; min-height: 150px; line-height: 1.5; }
.eco { padding: 9px 16px 9px 90px; font-family: var(--mono); font-size: .85rem; border-bottom: 1px solid var(--borda); background: var(--superficie-2); min-height: 38px; overflow-wrap: anywhere; color: var(--texto-2); }
.eco .tk { padding: 1px 5px; border-radius: 5px; }
.eco .tag { background: color-mix(in srgb, var(--destaque) 22%, transparent); color: var(--destaque); }
.eco .prio { background: color-mix(in srgb, var(--perigo) 20%, transparent); color: var(--perigo); }
.eco .lista { background: color-mix(in srgb, #c792ea 22%, transparent); color: #c792ea; }
.eco .data { background: color-mix(in srgb, var(--destaque-2) 20%, transparent); color: var(--destaque-2); }
.eco .tit { color: var(--texto); }
.rodape-comp { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--superficie-2); flex-wrap: wrap; }
.enviar { background: linear-gradient(120deg, var(--destaque), color-mix(in srgb, var(--destaque) 55%, var(--destaque-2))); color: #0a0d16; border: 0; padding: 9px 22px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .2s; }
.enviar:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dica { font-size: .8rem; color: var(--texto-2); flex: 1; min-width: 200px; }

/* resultado */
.resultado h2 { font-size: 1rem; margin: 0 0 10px; color: var(--texto-2); font-weight: 600; letter-spacing: .02em; }
.tarefa { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--sombra); overflow: hidden; }
.tarefa-cab { display: flex; gap: 12px; align-items: flex-start; }
.check { flex: none; width: 20px; height: 20px; border: 2px solid var(--texto-2); border-radius: 6px; margin-top: 2px; transition: border-color .2s; }
.tarefa[data-prio="5"] .check { border-color: #ff6b6b; }
.tarefa[data-prio="3"] .check { border-color: #ffc46b; }
.tarefa[data-prio="1"] .check { border-color: #6ba8ff; }
.tarefa-titulo { flex: 1; font-size: 1.15rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.bandeira { flex: none; width: 24px; height: 24px; color: var(--borda); transition: color .2s; }
.bandeira svg { width: 100%; height: 100%; display: block; }
.tarefa[data-prio="5"] .bandeira { color: #ff6b6b; }
.tarefa[data-prio="3"] .bandeira { color: #ffc46b; }
.tarefa[data-prio="1"] .bandeira { color: #6ba8ff; }
.tarefa-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0 32px; font-size: .88rem; }
.meta-item { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); }
.meta-item svg { width: 15px; height: 15px; }
.meta-item.data-ok { color: var(--destaque-2); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 32px; }
.chips:empty { display: none; }
.chip-tag { background: color-mix(in srgb, var(--destaque) 18%, transparent); color: var(--destaque); border-radius: 999px; padding: 2px 11px; font-size: .8rem; font-weight: 600; animation: surge .25s ease-out; }
@keyframes surge { from { opacity: 0; transform: scale(.85); } }
.descricao { margin: 14px 0 0 32px; padding: 10px 12px; border-left: 3px solid var(--borda); color: var(--texto-2); font: inherit; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.descricao:empty { display: none; }
.criada { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(2px); font-weight: 700; color: var(--destaque-2); font-size: 1.1rem; animation: surge .3s ease-out; }
.criada::before { content: "\2713"; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--destaque-2); color: #0a0d16; font-size: 1.4rem; margin: 0 auto 8px; }
.criada { align-content: center; justify-items: center; }
.criada[hidden] { display: none; }

.json { margin-top: 14px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; }
.json summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .9rem; }
.json summary code { font-weight: 400; }
.json pre { margin: 0; padding: 14px 16px; border-top: 1px solid var(--borda); background: var(--superficie-2); font-family: var(--mono); font-size: .82rem; overflow: auto; border-radius: 0 0 12px 12px; line-height: 1.55; }
.json .k { color: var(--destaque); } .json .s { color: var(--destaque-2); } .json .n { color: #ffc46b; }

/* exemplos e cola */
.exemplos, .cola { margin-top: 36px; }
.exemplos h2, .cola h2 { font-size: 1.2rem; margin: 0 0 12px; letter-spacing: -.01em; }
.chips-ex { display: flex; flex-wrap: wrap; gap: 10px; }
.chips-ex button { font-family: var(--mono); font-size: .84rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; padding: 8px 14px; cursor: pointer; color: var(--texto); text-align: left; max-width: 100%; overflow-wrap: anywhere; transition: border-color .2s, transform .15s; }
.chips-ex button:hover { border-color: var(--destaque); transform: translateY(-1px); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
.nota { color: var(--texto-2); font-size: .88rem; margin: 12px 2px 0; }
@media (max-width: 520px) { td:first-child { white-space: normal; } .eco { padding-left: 16px; } }