/* Vibe Seguro: painel de código, checklist do deploy e blocos para copiar. Complementa treino.css e agentes.css. */

.vs-mono { font-family: var(--mono); }
.vs-code, .vs-check { order: -1; min-width: 0; border-radius: 18px; overflow: hidden; background: #0B1220; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
@media (min-width: 900px) {
  .vs-code, .vs-check { order: 0; position: sticky; top: 16px; margin-top: 14px; }
}
.vs-code-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: #1F2044; font-size: 13px; font-weight: 700; color: #C9D6EA; }
.vs-dots { display: inline-flex; gap: 5px; }
.vs-dots i { width: 10px; height: 10px; border-radius: 50%; background: #F04438; }
.vs-dots i:nth-child(2) { background: #F5B700; }
.vs-dots i:nth-child(3) { background: #12B76A; }
.vs-code pre { margin: 0; padding: 12px 0; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: #E6EDF7; }
.vs-code code { display: block; min-width: max-content; }
.vs-line { display: block; padding: 0 14px; white-space: pre; border-left: 4px solid transparent; }
.vs-line.bad { background: rgba(240, 68, 56, .2); border-left-color: #F04438; }
.vs-line.good { background: rgba(18, 183, 106, .18); border-left-color: #12B76A; }
.vs-code.fixed .vs-code-head { background: #054F31; color: #D1FADF; }
.vs-code.changed, .vs-check.changed { animation: glowin 1s ease; }

.vs-check ul { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; }
.vs-check li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; color: rgba(255, 255, 255, .55); }
.vs-check li strong { display: block; color: inherit; }
.vs-check li span span { display: block; font-size: 13px; color: var(--soft); }
.vs-check li.now { background: rgba(255, 122, 26, .14); color: #FCFCFD; outline: 1px solid rgba(255, 122, 26, .5); }
.vs-check li.on { color: #FCFCFD; }
.vs-box { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .35); }
.vs-check li.on .vs-box { background: #12B76A; border-color: #12B76A; color: #FFFFFF; }
.vs-box .icon { width: 14px; height: 14px; stroke-width: 3; }

.vs-section-title { margin: 40px 0 0; font-size: clamp(24px, 4vw, 32px); }
.vs-copy { max-width: 860px; }
.vs-copy-text { margin: 0; padding: 14px 16px; border-radius: 12px; background: #0B1220; color: #E6EDF7; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.vs-copy .tr-actions { margin-bottom: 0; }
.vs-copy .tr-copy-status { color: var(--ok); }
.treino .btn-secondary { background: #FFFFFF; color: var(--blue); border-color: var(--blue); }

.ag-mini-icon.deploy { background: rgba(18, 183, 106, .2); color: #6CE9A6; }
.ag-mini-icon.deploy .icon { width: 30px; height: 30px; stroke-width: 3; }
.ag-mini-icon.vs-mono { font-size: 20px; }
.ag-type[data-key="stack"] { background: #C2410C; }
.ag-type[data-key="nexo"] { background: #5E60CE; }
.ag-type[data-key="lumi"] { background: #0A6CFF; }
.ag-tcard[data-key="stack"] { background: linear-gradient(135deg, #FF7A1A, #FFB800); }
.ag-tcard[data-key="nexo"] { background: linear-gradient(135deg, #5E60CE, #A5A6F6); }

@media (prefers-reduced-motion: reduce) {
  .vs-code.changed, .vs-check.changed { animation: none; }
}

/* O código quebra linha em qualquer tela: a parte com problema precisa aparecer inteira */
.vs-code code { min-width: 0; }
.vs-line { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .seguro .ag-battle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}