/* Destruitor Idle — janela do Programa de criadores (public/criadores.js) e a linha "Seu gold hoje compra..." da ficha
   do personagem (app.js). Usa as cores e as janelas do app.css. */
.modal.cr { width: min(640px, calc(100vw - 16px)); max-height: calc(100vh - 40px); }
.cr-tit b { display: block; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.cr-tit small { color: var(--dim); font-size: 12.5px; }
.modal.cr .modal-b.cr-b { display: flex; flex-direction: column; gap: 10px; }
.cr-carrega { padding: 24px 0; text-align: center; color: var(--dim); }
.cr-intro { margin: 0; font-size: 14px; line-height: 1.5; color: #d6d3cb; }
.cr-h3 { margin: 6px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.cr-regras-l { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.45; color: #c9ccd6; }
.cr-regras { border: 1px solid #2c3346; border-radius: 6px; background: #0d1018; padding: 8px 10px; }
.cr-regras summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--gold-2); }
.cr-regras[open] summary { margin-bottom: 8px; }

/* formulario */
.cr-form { display: flex; flex-direction: column; }
.cr-form input[type=date] { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: #0c0e14; font-size: 16px; color: inherit; color-scheme: dark; }
.cr-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cr-err { display: block; min-height: 0; color: #ff9d8f; font-size: 12px; margin-top: 3px; }
.cr-err:empty { display: none; }
.cr-aceite { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 13.5px; cursor: pointer; }
.cr-aceite input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--gold); }
.cr-nota { margin: 10px 0; font-size: 12px; color: var(--dim); line-height: 1.45; }
.cr-erro { padding: 8px 10px; border-radius: 6px; background: #3a1d1b; border: 1px solid #5a2a26; color: #ffb4aa; font-size: 13px; margin-bottom: 10px; }

/* com cadastro */
.cr-status { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; border: 1px solid #2c3346; background: #141826; font-size: 13px; }
.cr-status b { font-size: 14px; }
.cr-status.st-pendente { border-color: #5a4720; }
.cr-status.st-pendente b { color: var(--gold-2); }
.cr-status.st-aprovado { border-color: #2f5a34; }
.cr-status.st-aprovado b { color: var(--ok); }
.cr-status.st-recusado, .cr-status.st-bloqueado { border-color: #5a2a26; }
.cr-status.st-recusado b, .cr-status.st-bloqueado b { color: var(--bad); }
.cr-motivo { color: #ffb4aa; }
.cr-cod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 6px; background: #1d1a12; border: 1px solid #6b5626; }
.cr-cod-l small { display: block; color: var(--dim); font-size: 12px; }
.cr-cod-l b { font-size: 26px; letter-spacing: .22em; color: var(--gold-2); font-family: ui-monospace, Consolas, monospace; }
.cr-link { display: flex; gap: 8px; }
.cr-link input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13.5px; }
.cr-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cr-nums > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; background: #141826; border: 1px solid #2c3346; min-width: 0; }
.cr-nums small { color: var(--dim); font-size: 11.5px; line-height: 1.3; }
.cr-nums b { font-size: 17px; }
.cr-nums em { font-style: normal; color: var(--dim); font-size: 11px; }
.cr-prox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.cr-prox span { color: var(--dim); }
.cr-prox b { color: var(--gold-2); }
.cr-prox em { font-style: normal; color: var(--dim); font-size: 12.5px; }
.cr-dados { display: flex; flex-direction: column; gap: 4px; }
.cr-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.cr-kv span { color: var(--dim); }
.cr-kv b { overflow-wrap: anywhere; text-align: right; }
.g .ti.cr-ic { width: 22px; height: 22px; padding: 2px; image-rendering: auto; }
.g .g-gmenu .ti.cr-ic { width: 24px; height: 24px; margin: 0 2px; }

/* ficha do personagem: quanto o gold do banco compra de Premium pelo preco da moeda no mercado */
.kv-ouro { margin: 2px 0 6px; font-size: 12.5px; color: var(--gold-2); }

@media (max-width: 520px) {
  .cr-2 { grid-template-columns: 1fr; }
  .cr-cod-l b { font-size: 22px; }
  .cr-link { flex-direction: column; }
}