/* Abas de 02/11/26: Minhas tarefas, Treinamentos, Conquistas, Meus Status, Conexões. Mesmas cores e cantos do app.css. */

/* ---------- 2ª linha do menu, faixa do Discord e peças comuns */
.subnav { border-top: 1px solid var(--borda); }
.subnav-in { max-width: 1240px; margin: 0 auto; padding: 6px 24px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a { text-decoration: none; color: var(--suave); font-weight: 700; font-size: 13.5px; padding: 6px 12px; border-radius: 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.subnav a:hover { color: var(--tinta); background: var(--cartao); }
.subnav a[aria-current="page"] { color: var(--tinta); background: var(--trilho); }
.faixa-discord { max-width: 1240px; margin: 14px auto 0; padding: 12px 18px; border-radius: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; font-weight: 700; background: color-mix(in srgb, #5865F2 14%, var(--painel)); border: 1px solid color-mix(in srgb, #5865F2 30%, transparent); width: calc(100% - 48px); }
.botao-p { min-height: 36px; padding: 6px 14px; font-size: 14px; border-radius: 10px; }
.faixa-discord .botao-p { background: #5865F2; border-color: #5865F2; }

.ab-cab .ab-sub, .ab-sub { color: var(--suave); margin-top: 8px; max-width: 72ch; line-height: 1.5; }
.ab-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ab-msg { padding: 12px 16px; border-radius: 12px; font-weight: 700; margin: 0 0 14px; }
.ab-msg-ok { background: color-mix(in srgb, #1BA35B 16%, var(--painel)); }
.ab-msg-erro { background: color-mix(in srgb, #D8191E 14%, var(--painel)); }
.ab-voltar { margin: 0; }
.ab-voltar a { color: var(--suave); text-decoration: none; font-weight: 700; font-size: 14px; }
.ab-voltar a:hover { color: var(--tinta); }
.ab-vazio { text-align: center; padding: 44px 32px; }
.ab-vazio h2 { margin-bottom: 10px; }
.ab-vazio p { color: var(--suave); max-width: 60ch; margin: 0 auto 18px; line-height: 1.55; }
.ab-rodape { color: var(--suave); font-size: 14px; text-align: center; }
.ab-inline { display: inline; }
.ab-linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.ab-linha-botoes form { margin: 0; }
/* larguras das barras (a CSP não deixa style no HTML) */
.ab-l-0 { width: 0; } .ab-l-5 { width: 5%; } .ab-l-10 { width: 10%; } .ab-l-15 { width: 15%; } .ab-l-20 { width: 20%; } .ab-l-25 { width: 25%; } .ab-l-30 { width: 30%; }
.ab-l-35 { width: 35%; } .ab-l-40 { width: 40%; } .ab-l-45 { width: 45%; } .ab-l-50 { width: 50%; } .ab-l-55 { width: 55%; } .ab-l-60 { width: 60%; } .ab-l-65 { width: 65%; }
.ab-l-70 { width: 70%; } .ab-l-75 { width: 75%; } .ab-l-80 { width: 80%; } .ab-l-85 { width: 85%; } .ab-l-90 { width: 90%; } .ab-l-95 { width: 95%; } .ab-l-100 { width: 100%; }

/* ---------- Minhas tarefas */
.tf-grupo h2 { font-size: 19px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.tf-n { font: 700 12px/1 var(--titulo); background: var(--trilho); border-radius: 10px; padding: 5px 9px; color: var(--suave); }
.tf-lista, .tf-coments { list-style: none; margin: 0; padding: 0; }
.tf-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--borda); }
.tf-item:first-child { border-top: 0; }
.tf-check { margin: 0; flex: none; }
.tf-check button, .tf-check-fora { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--borda); background: var(--painel); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 1px; text-decoration: none; color: var(--suave); font-size: 13px; }
.tf-check button:hover { border-color: #1BA35B; background: color-mix(in srgb, #1BA35B 14%, var(--painel)); }
.tf-check button:hover::after { content: "✓"; color: #1BA35B; font-weight: 700; }
.tf-corpo { min-width: 0; flex: 1; }
.tf-titulo { font-weight: 700; font-size: 16px; text-decoration: none; line-height: 1.35; }
.tf-titulo:hover { text-decoration: underline; }
.tf-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--suave); font-size: 13.5px; }
.tf-proj { font-weight: 700; color: var(--tinta); }
.tf-atrasada { color: #D8191E; font-weight: 700; }
.tf-hoje { color: #C27A00; font-weight: 700; }
.tf-prio { color: var(--marca); font-weight: 700; }
.tf-item-atrasada .tf-check button { border-color: color-mix(in srgb, #D8191E 50%, var(--borda)); }
.tf-proj-cab { color: var(--suave); font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.tf-detalhe h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.tf-feita { text-decoration: line-through; color: var(--suave); }
.tf-meta-cab { margin-top: 12px; }
.tf-desc { margin-top: 18px; padding: 16px 18px; background: var(--cartao); border-radius: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.tf-coment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--borda); }
.tf-coment:first-child { border-top: 0; }
.tf-coment p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.tf-coment-quem { font-size: 14px; margin-bottom: 4px !important; }
.tf-coment-quem span { color: var(--suave); font-size: 13px; margin-left: 6px; }
.tf-ini { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--trilho); display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--titulo); }
.tf-comentar { margin-top: 18px; }
.tf-comentar .botao { margin-top: 12px; }
.tf-proj-form { max-width: 520px; }
.tf-nova { margin-top: 22px; border-top: 1px solid var(--borda); padding-top: 22px; }
.tf-gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tf-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; font-size: 14.5px; }
.tf-pessoa:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, var(--painel)); }
.tf-pessoa input { accent-color: var(--marca); width: 18px; height: 18px; }
.tf-avisar span:last-child { display: flex; align-items: center; gap: 8px; min-height: 48px; }

/* ---------- Treinamentos */
.tr-cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.tr-cartao { display: flex; gap: 18px; text-decoration: none; height: 100%; border: 1px solid var(--borda); }
.tr-cartao:hover { border-color: var(--marca); }
.tr-icone { font-size: 38px; line-height: 1; flex: none; }
.tr-cartao { position: relative; }
.tr-cartao-feito { border-color: color-mix(in srgb, #1BA35B 55%, var(--borda)); }
.tr-check { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%; background: #1BA35B; color: #fff; font: 800 18px/34px var(--titulo); text-align: center; box-shadow: 0 4px 12px rgba(27, 163, 91, .4); }
.tr-icone-grande { position: relative; display: inline-block !important; }
.tr-check-grande { top: -6px; right: -16px; width: 30px; height: 30px; font-size: 16px; line-height: 30px; }
.tr-cartao-txt { display: flex; flex-direction: column; gap: 6px; }
.tr-cartao-txt b { font: 700 18px/1.25 var(--titulo); }
.tr-cartao-txt > span { color: var(--suave); font-size: 14.5px; line-height: 1.45; }
.tr-cartao-meta { color: var(--suave); font-size: 13px !important; }
.tr-estado { display: inline-flex; align-self: flex-start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--trilho); font: 700 12.5px var(--titulo); color: var(--tinta) !important; }
.tr-ok { background: color-mix(in srgb, #1BA35B 18%, var(--painel)); }
.tr-novo { background: color-mix(in srgb, var(--marca) 14%, var(--painel)); }
.tr-grade { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.tr-lado { position: sticky; top: 120px; padding: 22px; }
.tr-modulos { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.tr-modulos li { counter-increment: m; }
.tr-modulos a { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; color: var(--suave); line-height: 1.3; }
.tr-modulos a::before { content: counter(m); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--trilho); color: var(--tinta); font: 700 11.5px/22px var(--titulo); text-align: center; }
.tr-modulos .tr-quiz-item a::before { content: "?"; }
.tr-modulos .tr-visto a::before { content: "✓"; background: color-mix(in srgb, #1BA35B 22%, var(--painel)); }
.tr-modulos .tr-atual a { background: var(--trilho); color: var(--tinta); font-weight: 700; }
.tr-modulos a:hover { color: var(--tinta); }
.tr-intro { text-align: left; }
.tr-icone-grande { font-size: 56px; display: block; margin-bottom: 10px; }
.tr-modulo h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.tr-passo { color: var(--marca); font: 700 12px var(--titulo); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.tr-modulo > p, .tr-modulo li { font-size: 16.5px; line-height: 1.7; max-width: 70ch; }
.tr-modulo > p { margin: 0 0 14px; }
.tr-modulo code { background: var(--trilho); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.tr-lista, .tr-passos { margin: 0 0 16px; padding-left: 22px; }
.tr-passos li::marker { font-weight: 700; color: var(--marca); }
.tr-caixa { display: flex; gap: 12px; padding: 14px 18px; border-radius: 14px; margin: 0 0 16px; max-width: 74ch; }
.tr-caixa p { margin: 0; line-height: 1.6; }
.tr-dica { background: color-mix(in srgb, var(--marca) 10%, var(--painel)); }
.tr-alerta { background: color-mix(in srgb, #ECB51C 20%, var(--painel)); }
.tr-exemplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.tr-exemplo > div { padding: 14px 16px; border-radius: 14px; }
.tr-exemplo b { font: 700 12px var(--titulo); letter-spacing: .06em; text-transform: uppercase; }
.tr-exemplo p { margin: 6px 0 0; line-height: 1.55; }
.tr-ruim { background: color-mix(in srgb, #D8191E 9%, var(--painel)); }
.tr-bom { background: color-mix(in srgb, #1BA35B 11%, var(--painel)); }
.tr-porque { grid-column: 1 / -1; color: var(--suave); margin: 0; }
.tr-faca-nao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.tr-faca-nao > div { padding: 14px 18px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--borda); }
.tr-faca-nao ul { margin: 8px 0 0; padding-left: 18px; }
.tr-faca-nao li { font-size: 15px; line-height: 1.55; }
.tr-chat { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 18px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--borda); max-width: 74ch; }
.tr-fala { max-width: 86%; padding: 10px 14px; border-radius: 16px; }
.tr-fala p { margin: 4px 0 0; line-height: 1.5; font-size: 15px; }
.tr-quem { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--titulo); color: var(--suave); }
.tr-quem .bola { width: 20px; height: 20px; outline-width: 1px; outline-offset: 1px; }
.tr-cliff { font-size: 16px; }
.tr-fala-voce { align-self: flex-end; background: color-mix(in srgb, var(--marca) 14%, var(--painel)); border-bottom-right-radius: 4px; }
.tr-fala-cliff { align-self: flex-start; background: var(--painel); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.tr-fala-sis { align-self: center; margin: 0; padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, #ECB51C 18%, var(--painel)); font-size: 13.5px; font-weight: 700; text-align: center; }
.tr-navega { justify-content: space-between; border-top: 1px solid var(--borda); padding-top: 20px; margin-top: 28px; }
.tr-quiz { display: flex; flex-direction: column; gap: 16px; }
.tr-pergunta { border: 1px solid var(--borda); border-radius: 16px; padding: 18px 20px; margin: 0; min-width: 0; }
.tr-pergunta legend { display: flex; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.45; padding: 0 6px; }
.tr-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--trilho); font: 700 12.5px/26px var(--titulo); text-align: center; }
.tr-certa { border-color: color-mix(in srgb, #1BA35B 55%, var(--borda)); }
.tr-errada { border-color: color-mix(in srgb, #D8191E 50%, var(--borda)); }
.tr-opcao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer; margin-top: 6px; line-height: 1.45; }
.tr-opcao:hover { background: var(--cartao); }
.tr-opcao input { accent-color: var(--marca); margin-top: 3px; width: 18px; height: 18px; flex: none; }
.tr-opcao-certa { background: color-mix(in srgb, #1BA35B 14%, var(--painel)); }
.tr-opcao-errada { background: color-mix(in srgb, #D8191E 11%, var(--painel)); }
.tr-explica { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--cartao); font-size: 14.5px; line-height: 1.5; }
.tr-resultado { padding: 20px 22px; border-radius: 16px; margin-bottom: 18px; }
.tr-resultado > b { font: 800 34px var(--titulo); }
.tr-resultado p { margin: 4px 0 0; font-weight: 700; }
.tr-passou { background: color-mix(in srgb, #1BA35B 16%, var(--painel)); }
.tr-nao { background: color-mix(in srgb, #ECB51C 18%, var(--painel)); }
.tr-gente { list-style: none; margin: 0; padding: 0; }
.tr-gente li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.tr-gente li:first-child { border-top: 0; }
.tr-gente a { font-weight: 700; text-decoration: none; }
.tr-gente span { color: var(--suave); font-size: 13.5px; margin-left: auto; }

/* ---------- Conexões */
.cx-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cx-cartao h2 { margin-bottom: 12px; }
.cx-cartao p { line-height: 1.55; }
.cx-cartao .botao { margin-top: 8px; }
.cx-estado { padding: 12px 14px; border-radius: 12px; background: var(--cartao); font-weight: 700; }

/* ---------- Meus Status */
.st-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.st-bloco h2 { font-size: 20px; margin-bottom: 16px; }
.st-bloco h3 { font-size: 14px; margin: 22px 0 10px; color: var(--suave); letter-spacing: .04em; text-transform: uppercase; }
.st-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.st-num { padding: 14px 16px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-num small { font: 700 11px var(--titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.st-num b { font: 800 26px/1.1 var(--titulo); overflow-wrap: anywhere; }
.st-num span { font-size: 12.5px; color: var(--suave); }
.st-num-txt b { font-size: 18px; line-height: 1.25; }
.st-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-barras li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.st-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-trilho { height: 10px; border-radius: 5px; background: var(--trilho); overflow: hidden; }
.st-barra { display: block; height: 100%; border-radius: 5px; background: var(--marca); }
.st-barras b { font: 700 13px var(--titulo); white-space: nowrap; }
.st-barras li:has(> a.st-linha) { display: block; }
a.st-linha { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: center; color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
a.st-linha:hover .st-rot, a.st-linha:focus-visible .st-rot { color: var(--marca); text-decoration: underline; }
a.st-linha:hover .st-barra { background: var(--marca-hover); }
a.st-linha:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (max-width: 760px) { a.st-linha { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; } }
.st-bloco h3 small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.st-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--suave); }
.st-cab .painel-cab-linha { align-items: center; flex-wrap: nowrap; gap: 28px; }
.st-cab .painel-cab-linha > div:first-child { flex: 1 1 auto; }
.st-cab .ab-sub { max-width: 95ch; }
.st-cab .ab-acoes { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 12px; }
.st-cab .st-meta { padding: 12px 16px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--borda); max-width: 300px; }
@media (max-width: 860px) { .st-cab .painel-cab-linha { flex-wrap: wrap; gap: 16px; } .st-cab .ab-acoes { flex: 1 1 100%; min-width: 0; align-items: stretch; } .st-cab .st-meta { max-width: none; } }
.st-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #ECB51C 16%, var(--painel)); font-size: 13.5px; line-height: 1.45; }
.st-filtros { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding: 18px 22px; }
.st-filtros label { display: flex; flex-direction: column; gap: 6px; min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.st-filtros span { font: 700 11.5px var(--titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.st-filtros select { border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); padding: 10px 12px; font-size: 15px; min-height: 44px; }
.st-filtros .link { align-self: center; }

/* ---------- Conquistas e insígnias */
.insignia { display: block; flex: none; filter: drop-shadow(0 3px 6px rgba(20, 26, 46, .22)); }
.insignia text { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ins-perfil h2 small { color: var(--suave); font-weight: 600; font-size: 14px; }
.ins-linha { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ins-linha a { display: block; transition: transform .15s; }
.ins-linha a:hover { transform: translateY(-3px) scale(1.06); }
.cq-placar { text-align: right; line-height: 1; }
.cq-placar b { font: 800 46px var(--titulo); letter-spacing: -.02em; }
.cq-placar span { font: 800 22px var(--titulo); color: var(--marca); margin-left: 4px; }
.cq-grade { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cq-cartao { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--borda); scroll-margin-top: 140px; }
.cq-cartao:target { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 25%, transparent); }
.cq-txt { min-width: 0; }
.cq-txt b { font: 700 16px/1.25 var(--titulo); }
.cq-txt b a, a.cq-quem { color: inherit; text-decoration: none; }
.cq-txt b a:hover, a.cq-quem:hover { text-decoration: underline; }
a.cq-quem { color: var(--suave); }
a.cq-quem.cq-raro { color: #8E58D9; }
.cq-ins { flex: none; display: block; transition: transform .15s; }
.cq-ins:hover { transform: scale(1.06); }
.cq-uma { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.cq-uma h1 { font-size: clamp(28px, 3.4vw, 40px); }
.cq-uma .cq-meta { margin-top: 12px; font-size: 14px; }
.cq-pessoa span:last-child { margin-left: auto; color: var(--suave); font-size: 13px; }
.cq-txt p { margin: 4px 0 6px; color: var(--suave); font-size: 14px; line-height: 1.45; }
.cq-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--suave); }
.cq-g { font: 800 12.5px var(--titulo); color: var(--tinta); }
.cq-raro { color: #8E58D9; font-weight: 700; }
.cq-tambem { color: #1BA35B; font-weight: 700; }
.cq-falta { color: var(--marca); font-weight: 700; }
.cq-platina { background: linear-gradient(135deg, color-mix(in srgb, #9FD9F2 16%, var(--cartao)), var(--cartao) 60%); }
.cq-ouro { background: linear-gradient(135deg, color-mix(in srgb, #EDBB28 12%, var(--cartao)), var(--cartao) 60%); }
.cq-ranking { list-style: none; margin: 16px 0 0; padding: 0; }
.painel > h2 small { margin-left: 4px; }
.cq-ranking li { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--borda); }
.cq-ranking li:first-child { border-top: 0; }
.cq-ranking a { font-weight: 700; text-decoration: none; }
.cq-ranking b { margin-left: auto; font: 800 14px var(--titulo); }
.cq-pos { width: 30px; font: 800 14px var(--titulo); color: var(--suave); }
.cq-eu { background: var(--trilho); border-radius: 12px; }
/* aviso de conquista nova, no canto, estilo Xbox */
.cq-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.cq-toast { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 999px 18px 18px 999px; background: #141A2E; color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); animation: cq-entra .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.cq-toast:nth-child(2) { animation-delay: .25s; }
.cq-toast:nth-child(3) { animation-delay: .5s; }
.cq-toast small { display: block; font: 700 11px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: #9FD9F2; }
.cq-toast b { display: block; font: 700 16px/1.25 var(--titulo); }
.cq-toast span span { display: block; font-size: 13px; color: #C3CAD4; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cq-toast-mais { justify-content: center; font: 700 14px var(--titulo); border-radius: 999px; }
.cq-toasts.sai .cq-toast { animation: cq-sai .5s ease-in both; }
@keyframes cq-entra { from { opacity: 0; transform: translateX(60px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cq-sai { to { opacity: 0; transform: translateY(20px); } }

/* ---------- Confirmar área */
.ac-lista { list-style: none; margin: 0; padding: 0; }
.ac-linha { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--borda); }
.ac-linha:first-child { border-top: 0; }
.ac-quem { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.ac-quem span { display: flex; flex-direction: column; }
.ac-quem small { color: var(--suave); font-size: 13px; }
.ac-escolheu { color: #C27A00 !important; font-weight: 700; }
.ac-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.ac-form select { border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); padding: 9px 10px; font-size: 14.5px; min-height: 42px; }

/* ---------- telas menores */
@media (max-width: 980px) {
  .tr-grade, .st-grade, .cx-grade { grid-template-columns: minmax(0, 1fr); }
  .tr-lado { position: static; }
}
@media (max-width: 760px) {
  .subnav-in { padding: 4px 12px; }
  .faixa-discord { width: calc(100% - 24px); margin-top: 10px; }
  .tr-exemplo, .tr-faca-nao { grid-template-columns: 1fr; }
  .cq-grade, .tr-cartoes { grid-template-columns: minmax(0, 1fr); }
  .cq-placar b { font-size: 34px; }
  .st-barras li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; }
  .tr-fala { max-width: 100%; }
  .cq-toasts { right: 10px; left: 10px; bottom: 10px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .cq-toast { animation: none; } }