.tool{max-width:860px;margin:28px 0;padding:24px;background:#fff;border:1px solid #e1e7ee;border-radius:14px}
.tool-step{margin:0 0 22px}
.tool-step>strong,.tool-step>label>strong{display:block;color:#08284f;font-size:16px;margin-bottom:4px}
.tool-hint{display:block;font-size:14px;color:#5b6e82;margin-bottom:10px;line-height:1.5}
.tool textarea,.tool input[type=text],.tool input[type=number]{width:100%;font:16px/1.5 system-ui,sans-serif;color:#15304e;border:1px solid #d7dfe8;border-radius:8px;padding:10px 12px;background:#fff}
.tool textarea{resize:vertical;min-height:150px}
.tool textarea:focus,.tool input:focus{outline:3px solid #b99754;outline-offset:1px;border-color:#08284f}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;align-items:start}
.tool-grid label{display:block}
.tool-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 0}
.tool-button{font:600 15px system-ui,sans-serif;background:#08284f;color:#fff;border:1px solid #08284f;border-radius:10px;padding:12px 20px;cursor:pointer}
.tool-button:hover{background:#0d3a6e;border-color:#0d3a6e}
.tool-button-ghost{background:#fff;color:#184c77;border-color:#d7dfe8}
.tool-button-ghost:hover{background:#f5f7fa}
.tool-button:focus-visible{outline:3px solid #b99754;outline-offset:3px}
/* O position:relative não é enfeite: sem ele o .sr-only "Remover", que é
   absoluto, escapa da caixa que rola e vai parar no canto da tela — dois
   pixels invisíveis que fazem a página inteira rolar para o lado. */
.tool-scroll{position:relative;overflow-x:auto;margin:12px 0}
.tool-table{width:100%;border-collapse:collapse;font-size:15px;margin:10px 0}
.tool-table th{text-align:left;font:600 13px system-ui,sans-serif;color:#5b6e82;letter-spacing:.02em;padding:6px 8px;border-bottom:1px solid #e1e7ee;white-space:nowrap}
.tool-table td{padding:6px 8px;vertical-align:middle;border-bottom:1px solid #f0f4f8}
.tool-table input[type=number]{max-width:92px}
.tool-result td{color:#2c4763}
.tool-result tr.is-risk td{background:#fdf3f0}
.tool-remove{background:none;border:0;color:#9aa8b5;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.tool-remove:hover{color:#a3402c;background:#fdf3f0}
.tool-output{margin-top:26px;padding-top:22px;border-top:1px solid #e1e7ee}
.tool-output h3{font:600 19px/1.35 Georgia,serif;color:#08284f;margin:22px 0 10px}
.tool-progress{margin:0 0 18px}
.tool-progress-bar{height:10px;border-radius:999px;background:#e8edf3;overflow:hidden}
.tool-progress-bar span{display:block;height:100%;width:0;background:#08284f;border-radius:999px;transition:width .25s ease}
.tool-progress p{margin:8px 0 0;font-size:14px;color:#5b6e82}
.tool-group{margin:0 0 22px}
.tool-group h3{font:600 15px system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#85662c;margin:0 0 8px}
.tool-check{list-style:none;padding:0;margin:0}
.tool-check li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f0f4f8}
.tool-check input[type=checkbox]{margin-top:4px;width:19px;height:19px;flex:0 0 auto;accent-color:#08284f}
.tool-topic{flex:1;line-height:1.55;color:#15304e;padding:2px 4px;border-radius:6px;min-width:0}
.tool-topic:focus{outline:2px solid #b99754;background:#fffdf7}
.tool-check li.is-done .tool-topic{color:#8a97a3;text-decoration:line-through}
.tool-verdict{max-width:780px;font-size:17px;line-height:1.65;color:#12314f;border-left:4px solid #b99754;padding:6px 0 6px 16px;margin:14px 0}
.tool-verdict.is-ok{border-left-color:#2f7d52}
.tool-verdict.is-risk{border-left-color:#a3402c;color:#7a3222}
.tool-path{max-width:780px;padding-left:20px;margin:10px 0}
.tool-path li{margin-bottom:8px}
.tool-note{max-width:780px;font-size:14px;line-height:1.65;color:#5b6e82;margin:12px 0}
.tool-saved{font-size:13px;color:#2f7d52;margin:14px 0 0}
/* O aviso de sincronização diz respeito a outro aparelho, não a este, e por
   isso não pode usar o verde do "salvo": quem lê os dois juntos precisa ver
   que são duas garantias diferentes. Ele também nunca some sozinho — se a
   última tentativa falhou, a pessoa tem que continuar sabendo disso. */
.tool-sync{font-size:13px;color:#4a5b6d;margin:14px 0 0;padding-left:16px;border-left:3px solid #caa65a}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:28px 0;max-width:1000px}
.tool-card{border:1px solid #e1e7ee;border-radius:14px;padding:22px;background:#fff}
.tool-card h3{font:400 21px/1.3 Georgia,serif;color:#08284f;margin:0 0 8px}
.tool-card h3 a{text-decoration:none;color:inherit}
.tool-card h3 a:hover{text-decoration:underline}
.tool-card p{margin:0 0 12px;font-size:15px}
.tool-card .tool-card-tag{display:inline-block;font:600 12px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#2f7d52;background:#eef7f1;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.trilha-fase{border:1px solid #e1e7ee;border-left:4px solid #b99754;border-radius:12px;padding:14px 18px;margin:0 0 18px;background:#fffdf7}
.trilha-fase-tag{display:inline-block;font:600 12px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#85662c;margin-right:10px}
.trilha-fase strong{font:600 16px system-ui,sans-serif;color:#08284f}
.trilha-fase p{margin:6px 0 0;font-size:15px;line-height:1.6;color:#2c4763}
.trilha-total{font:600 17px system-ui,sans-serif;color:#08284f;margin:0 0 14px}
.trilha-lista{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.trilha-bloco{border:1px solid #e1e7ee;border-radius:12px;padding:16px 18px;background:#fff}
.trilha-bloco-hora{display:block;font:600 12px system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5b6e82;margin-bottom:4px}
.trilha-bloco>strong{display:block;font:400 20px/1.3 Georgia,serif;color:#08284f}
.trilha-bloco-acao{margin:8px 0 0;font-size:16px;line-height:1.6;color:#15304e}
.trilha-bloco-acao b{color:#08284f}
.trilha-bloco-motivo{margin:4px 0 0;font-size:14px;color:#5b6e82}
/* O bloco de revisão abre o dia e não é mais uma matéria na fila: é a única
   parte do plano que veio do histórico da pessoa, e não de uma estimativa.
   A cor diferente faz essa diferença ser vista antes de ser lida. */
.trilha-bloco.is-revisao{border-left:4px solid #2f7d52;background:#f4fbf7}
.trilha-bloco.is-revisao .trilha-bloco-hora{color:#2f7d52}
.trilha-bloco.is-revisao a{color:#1d4733}
.trilha-fonte{max-width:780px;margin:0 0 16px;font-size:15px;line-height:1.6;color:#5b6e82}
.trilha-fonte a{color:#184c77}
.trilha-micro{margin:20px 0 0;padding:16px 18px;border-radius:12px;background:#eef7f1;border:1px solid #d3e7db}
.trilha-micro strong{display:block;font:600 14px system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#2f7d52;margin-bottom:6px}
.trilha-micro p{margin:0;font-size:16px;line-height:1.6;color:#1d4733}
/* Caderno de erros. Três blocos com pesos diferentes de propósito: a fila do
   dia é para agir, o diagnóstico é para entender e a tabela por matéria é
   para conferir. */
.caderno-motivos{display:grid;gap:8px;margin-top:10px}
.caderno-motivo{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1px solid #e1e7ee;border-radius:10px;background:#fff;cursor:pointer;font-size:16px;line-height:1.5;color:#15304e}
.caderno-motivo:hover{border-color:#b99754;background:#fffdf7}
.caderno-motivo input{margin-top:4px;accent-color:#85662c}
.caderno-motivo:focus-within{outline:3px solid #b99754;outline-offset:2px}
.caderno-placar{margin:0 0 18px;font:400 20px/1.4 Georgia,serif;color:#08284f}
.caderno-bloco{margin:0 0 22px;padding:18px 20px;border:1px solid #e1e7ee;border-radius:14px;background:#fff}
.caderno-bloco h3{margin:0 0 6px;font:400 24px/1.25 Georgia,serif;color:#08284f}
.caderno-explica{margin:6px 0 0;font-size:15px;line-height:1.6;color:#5b6e82}
.caderno-fila{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.caderno-card{border:1px solid #e1e7ee;border-left:4px solid #b99754;border-radius:12px;padding:14px 16px;background:#fffdf7}
.caderno-card-topo{display:block;font:600 17px system-ui,-apple-system,sans-serif;color:#08284f}
.caderno-atraso{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#fbe9e7;color:#9c3b2c;font:600 12px system-ui,sans-serif;vertical-align:middle}
.caderno-hoje{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef7f1;color:#2f7d52;font:600 12px system-ui,sans-serif;vertical-align:middle}
.caderno-card-nota{margin:8px 0 0;font-size:16px;line-height:1.55;color:#15304e}
.caderno-card-motivo{margin:4px 0 0;font-size:14px;color:#5b6e82}
.caderno-card-motivo b{color:#9c3b2c}
.caderno-card-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.caderno-veredito{margin:8px 0 0;font:400 21px/1.4 Georgia,serif;color:#08284f}
.caderno-receita{margin:8px 0 0;font-size:16px;line-height:1.65;color:#2c4763}
.caderno-barras{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.caderno-barras li{display:grid;grid-template-columns:minmax(120px,1fr) minmax(90px,2fr) auto;align-items:center;gap:12px}
.caderno-barra-rotulo{font-size:14px;color:#15304e}
.caderno-barra{display:block;height:9px;border-radius:999px;background:#eef1f5;overflow:hidden}
.caderno-barra i{display:block;height:100%;border-radius:999px;background:#b99754}
.caderno-barra-valor{font:600 13px system-ui,sans-serif;color:#5b6e82;white-space:nowrap}
.caderno-teimosos{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#fbe9e7;border:1px solid #f0cec7;font-size:15px;line-height:1.6;color:#7d2f22}
.caderno-teimosos strong{color:#9c3b2c}
/* A oferta da assinatura fica dentro da ferramenta, e por isso não pode ter
   cara de anúncio: mesma tipografia, sem cor de promoção, sem borda gritando.
   O que a separa do resto é só uma linha acima — ela aparece depois que a
   pessoa já anotou erros, como continuação do que estava fazendo. */
.tool-assinatura{margin:26px 0 0;padding:22px 0 0;border-top:1px solid #e1e7ee}
.tool-assinatura h3{font:400 21px/1.3 Georgia,serif;color:#08284f;margin:0 0 10px}
.tool-assinatura p{max-width:640px;font-size:15px;line-height:1.65;color:#3c4a59;margin:0 0 12px}
.tool-assinatura form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:18px 0 0;max-width:640px}
.tool-assinatura label{display:block;width:100%;font:600 13px system-ui,sans-serif;color:#5b6e82;margin-bottom:-4px}
.tool-assinatura input{flex:1 1 240px;min-width:0;font:400 15px system-ui,sans-serif;color:#15304e;border:1px solid #cfd8e3;border-radius:10px;padding:12px 14px;background:#fff}
.tool-assinatura input:focus-visible{outline:2px solid #08284f;outline-offset:1px}
.tool-erro{margin:12px 0 0;font-size:14px;line-height:1.6;color:#9c3b2c}
/* O Stripe desenha dentro de um iframe que precisa da largura inteira; sem a
   altura mínima a página dá um pulo no instante entre montar e pintar. */
[data-assinatura-palco]{margin:18px 0 0;min-height:360px}
/* No celular a tabela é a única coisa larga da página. O .tool-scroll impede
   que ela empurre o site inteiro para o lado — mas uma tabela que rola por
   dentro esconde a coluna do "×", e quem não vê o botão não remove a linha.
   Por isso o recuo e o nowrap do cabeçalho saem: com o título quebrando em
   duas linhas, a tabela cabe sozinha e a barra de rolagem nunca aparece. */
@media(max-width:650px){.tool{padding:18px}.tool-table{font-size:14px}.tool-table th{white-space:normal;padding:6px 4px}.tool-table td{padding:6px 4px}.tool-table input[type=number]{max-width:56px}.tool-table input[type=text]{padding:10px 8px}.tool-table select{max-width:104px}.tool-verdict{font-size:16px}.caderno-barras li{grid-template-columns:1fr;gap:4px}.caderno-card-acoes .tool-button{flex:1 1 auto}.tool-assinatura form{gap:12px}.tool-assinatura input{flex:1 1 100%}.tool-assinatura .tool-button{width:100%}}
@media print{.guide-header,.site-footer,.tool-actions,.tool-step,.tool-remove,.newsletter-invite{display:none!important}.tool{border:0;padding:0}.tool-output{border-top:0}}