/* Conta › Tokens de IA */
.tk { display: flex; flex-direction: column; gap: 22px; }
.tk-ic { width: 18px; height: 18px; flex: none; }
.tk-aviso { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 102, 153, .08); color: var(--ig-text); font-size: 14px; }

.tk-cards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.tk-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--ig-line); border-radius: 18px; background: var(--ig-surface); }
.tk-card-destaque { border: 0; background: linear-gradient(135deg, #013252, #006699); color: #fff; box-shadow: 0 18px 40px -22px rgba(1, 50, 82, .7); }
.tk-rotulo { display: flex; align-items: center; gap: 8px; color: var(--ig-text-2); font-size: 13px; font-weight: 700; }
.tk-card-destaque .tk-rotulo, .tk-card-destaque .tk-dica { color: #bfe3f2; }
.tk-numero { font-size: 36px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.tk-numero-sm { color: var(--ig-text); font-size: 24px; font-weight: 800; }
.tk-numero-sm small { color: var(--ig-text-2); font-size: 14px; font-weight: 600; }
.tk-dica { color: var(--ig-text-2); font-size: 12.5px; }
.tk-barra { height: 8px; border-radius: 999px; background: rgba(2, 26, 51, .08); overflow: hidden; }
.tk-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ig-brand), var(--ig-accent)); }
.tk-barra-alerta i { background: linear-gradient(90deg, #f59e0b, #ef4444); }

.tk-secao { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--ig-line); border-radius: 18px; background: var(--ig-surface); }
.tk-secao h3 { margin: 0 0 4px; color: var(--ig-text); font-size: 15px; font-weight: 800; }
.tk-pacotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tk-pacote { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid rgba(0, 102, 153, .25); border-radius: 14px; background: rgba(0, 102, 153, .04); color: var(--ig-text); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tk-pacote:hover { border-color: var(--ig-brand); box-shadow: 0 8px 22px -14px rgba(0, 102, 153, .6); transform: translateY(-1px); }
.tk-pacote strong { font-size: 18px; font-weight: 800; }
.tk-pacote span { color: var(--ig-text-2); font-size: 13px; }
.tk-pacote-livre { border-style: dashed; background: none; }

.tk-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tk-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ig-line); }
.tk-linha div { display: flex; flex-direction: column; min-width: 0; }
.tk-linha strong { color: var(--ig-text); font-size: 14px; font-weight: 700; }
.tk-linha small { color: var(--ig-text-2); font-size: 12px; }
.tk-valor { flex: none; color: var(--ig-text-2); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-valor-mais { color: #059669; }
.tk-valor-apagado { opacity: .5; }
.tk-pendente { color: #b45309; font-weight: 700; }
.tk-link { color: var(--ig-brand); font-weight: 700; }
.tk-vazio { margin: 0; color: var(--ig-text-2); font-size: 14px; }

html.dark .tk-card:not(.tk-card-destaque), html.dark .tk-secao { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
html.dark .tk-numero-sm, html.dark .tk-secao h3, html.dark .tk-linha strong, html.dark .tk-pacote { color: #eaf2f8; }

@media (max-width: 1024px) {
    .tk-cards, .tk-colunas { grid-template-columns: 1fr; }
}