/* Minha conta dos salões contratados (Sibela) */
.cs-pagina { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.cs-card { background: var(--cor-fundo-cartao, #fff); border: 1px solid var(--cor-borda, #e6dedb); border-radius: 14px; padding: 18px 20px; }
.cs-card h3 { margin: 0 0 8px; font-size: 16px; }
.cs-card h4 { margin: 14px 0 6px; font-size: 14px; }
.cs-card p { margin: 6px 0; }
.cs-card .num, .cs-pagina .num { text-align: right; white-space: nowrap; }
.cs-estado { display: flex; flex-direction: column; gap: 6px; border-left: 5px solid var(--cor-neutro, #9a8f8c); }
.cs-estado.cs-teste { border-left-color: var(--cor-atencao, #b7791f); }
.cs-estado.cs-ativa { border-left-color: var(--cor-sucesso, #2f7d4f); }
.cs-estado.cs-atrasada, .cs-estado.cs-bloqueada { border-left-color: var(--cor-alerta, #c0392b); }
.cs-botoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cs-total td { border-top: 2px solid var(--cor-borda, #e6dedb); }
.cs-aviso-teste { font-size: 12px; }
.cs-logo { display: flex; gap: 16px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.cs-logo-previa { width: 150px; height: 84px; border: 1px dashed var(--cor-borda, #d9cfcb); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cor-marca-claro, #f4ece9); overflow: hidden; }
.cs-logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }
.botao-arquivo { display: inline-block; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--cor-borda, #d9cfcb); cursor: pointer; background: transparent; }
.cs-link { margin: 10px 0; }
.cs-link code { word-break: break-all; font-size: 13px; }
.cs-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.cs-modulo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cs-modulo.on { border-color: var(--cor-sucesso, #2f7d4f); }
.cs-preco { font-size: 20px; font-weight: 700; margin: 8px 0; }
.cs-preco small { font-size: 12px; font-weight: 400; color: var(--cor-neutro, #7a6f6c); }
.cs-chat-lista { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--cor-marca-claro, #f7f1ef); border-radius: 12px; margin: 10px 0; }
.cs-bolha { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.cs-bolha small { display: block; margin-top: 3px; font-size: 11px; opacity: .65; }
.cs-nos { align-self: flex-end; background: var(--cor-marca, #8a4b5c); color: #fff; border-bottom-right-radius: 4px; }
.cs-eles { align-self: flex-start; background: #fff; color: #2a2323; border: 1px solid var(--cor-borda, #e6dedb); border-bottom-left-radius: 4px; }
.cs-chat-form { display: flex; gap: 8px; align-items: flex-end; }
.cs-chat-form textarea { flex: 1; resize: vertical; min-height: 44px; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--cor-borda, #d9cfcb); }
.cs-bolinha { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--cor-alerta, #c0392b); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
.faixa-conta { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 9px 16px; font-size: 14px; font-weight: 600; }
.faixa-conta a { color: inherit; text-decoration: underline; }
.faixa-conta--atencao { background: #fbf1e0; color: #7a4d0b; }
.faixa-conta--alerta { background: #fbeae5; color: #8c2a1b; }
html[data-tema="escuro"] .cs-eles { background: #2b2527; color: #eee; border-color: #3a3235; }
html[data-tema="escuro"] .faixa-conta--atencao { background: #3a2f1a; color: #f0cf8e; }
html[data-tema="escuro"] .faixa-conta--alerta { background: #3d2320; color: #f3b3a8; }
@media (max-width: 640px) { .cs-card { padding: 14px; } .cs-bolha { max-width: 90%; } .cs-chat-lista { height: 300px; } }