/* Comentarios (publico) e moderacao (painel) */
.cm { margin: 2rem auto 0; max-width: 46rem; padding: 1.1rem; border: 1px solid rgba(255, 42, 109, 0.25); border-radius: 1rem; background: rgba(255, 255, 255, 0.025); color: var(--text, #fff); }
.cm__titulo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading, inherit); font-size: 1.15rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.cm__titulo svg { width: 1.15rem; height: 1.15rem; color: var(--sakura); }
.cm__titulo span { padding: 0 0.5rem; border-radius: 9999px; background: rgba(255, 42, 109, 0.18); font-size: 0.75rem; }
.cm__form { margin-top: 0.9rem; }
.cm__form textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0.7rem; background: rgba(0, 0, 0, 0.3); color: inherit; font: inherit; font-size: 0.9rem; resize: vertical; min-height: 4.5rem; }
.cm__form textarea:focus { outline: 2px solid var(--sakura); outline-offset: 1px; }
.cm__form-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; }
.cm__form-rodape small { font-size: 0.72rem; color: var(--text-muted); }
.cm__botao { padding: 0.45rem 1.2rem; border: 0; border-radius: 9999px; background: linear-gradient(90deg, var(--sakura-hot, #ff2a6d), var(--sakura, #ff5c8a)); color: #fff; font-family: var(--font-heading, inherit); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.cm__botao:disabled { opacity: 0.5; cursor: wait; }
.cm__erro, .cm__aviso { margin-top: 0.5rem; font-size: 0.8rem; color: #ff8fa3; }
.cm__erro[hidden] { display: none; }
.cm__entrar, .cm__vazio { margin-top: 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.cm__entrar a { color: var(--sakura); font-weight: 700; }
.cm__lista { display: grid; gap: 0.7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cm__item { display: flex; gap: 0.75rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.6rem; background: rgba(12, 8, 18, 0.78); }
.cm__item--fixado { border: 1px solid rgba(246, 211, 101, 0.5); background: rgba(246, 211, 101, 0.06); }
.cm__avatar { flex: none; width: 2.5rem; height: 2.5rem; padding: 2px; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, 0.2); background: var(--bg-panel, #120a18); display: grid; place-items: center; overflow: hidden; }
.cm__avatar img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; }
.cm__avatar b { color: var(--sakura); font-family: var(--font-heading, inherit); }
.cm-moldura--simples { border-color: #f6d365; }
.cm-moldura--animada { position: relative; isolation: isolate; overflow: visible; border-color: transparent; }
.cm-moldura--animada::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 9999px; background: conic-gradient(from 0deg, var(--sakura), #f6d365, #8ec5fc, var(--sakura)); animation: cm-giro 4s linear infinite; }
@keyframes cm-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cm-moldura--animada::before { animation: none; } }
.cm__corpo { flex: 1; min-width: 0; }
.cm__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.8rem; }
.cm__cab time { font-size: 0.7rem; color: var(--text-muted); }
.cm-nome { font-family: var(--font-heading, inherit); font-size: 0.95rem; }
.cm-nome--n3 { color: #8ec5fc; } .cm-nome--n4 { color: #a5f3c0; } .cm-nome--n5 { color: #c4a8ff; }
.cm-nome--n6 { color: #ffb86b; } .cm-nome--n7 { color: #ff8fb1; } .cm-nome--n8 { color: #f6d365; }
.cm-nome--n9, .cm-nome--n10 { background: linear-gradient(90deg, #f6d365, #fda085, #f6d365); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cm__selo { padding: 0 0.45rem; border-radius: 9999px; border: 1px solid rgba(246, 211, 101, 0.6); color: #f6d365; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; }
.cm__selo--nobre { border: 0; background: linear-gradient(90deg, #f6d365, #fda085); color: #1a1020; }
.cm__fixado { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.65rem; font-weight: 700; color: #f6d365; }
.cm__fixado svg { width: 0.75rem; height: 0.75rem; }
.cm__texto { margin-top: 0.25rem; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.cm__acoes { display: flex; gap: 0.8rem; margin-top: 0.35rem; font-size: 0.7rem; color: var(--text-muted); }
.cm__acoes button, .cm__acoes summary { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; list-style: none; }
.cm__acoes summary::-webkit-details-marker { display: none; }
.cm__acoes button:hover, .cm__acoes summary:hover { color: var(--sakura); }
.cm__confirma { display: flex; align-items: center; gap: 0.5rem; }
.cm__confirma[open] button { color: #ff8fa3; font-weight: 700; }
.cm__paginas { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; font-size: 0.78rem; color: var(--text-muted); }
.cm__paginas a { color: var(--sakura); font-weight: 700; }
@media (max-width: 480px) { .cm { padding: 0.8rem; border-radius: 0.8rem; } }

/* Painel: moderacao */
.cmadm__filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.8rem; font-size: 0.8rem; }
.cmadm__filtro a { padding: 0.2rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; }
.cmadm__filtro a.is-ativo { border-color: var(--sakura); color: var(--sakura); }
.cmadm__filtro span { margin-left: auto; color: var(--text-muted); }
.cmadm { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.cmadm__item { padding: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.6rem; }
.cmadm__item.is-oculto { opacity: 0.7; border-color: rgba(255, 90, 90, 0.4); }
.cmadm__meta { font-size: 0.75rem; color: var(--text-muted); }
.cmadm__den { color: #ff8fa3; }
.cmadm__texto { margin-top: 0.4rem; font-size: 0.9rem; overflow-wrap: anywhere; }
.cmadm__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.cmadm__acoes button { padding: 0.3rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.4rem; background: none; color: inherit; font-size: 0.75rem; cursor: pointer; }
.cmadm__acoes button:hover { border-color: var(--sakura); color: var(--sakura); }
.cmadm__acoes button.is-perigo:hover { border-color: #ff5a5a; color: #ff8fa3; }
.cmadm__pag { margin-top: 1rem; font-size: 0.8rem; display: flex; gap: 1rem; justify-content: center; }

/* Aba na pagina da obra e respostas */
.cm--aba { margin: 0; max-width: none; }
.cm__respostas-item { list-style: none; }
.cm__respostas { display: grid; gap: 0.5rem; margin: 0 0 0 1.4rem; padding: 0 0 0 0.8rem; border-left: 2px solid rgba(255, 42, 109, 0.3); list-style: none; }
.cm__item--resposta { background: rgba(255, 255, 255, 0.02); }
.cm__item--resposta .cm__avatar { width: 2rem; height: 2rem; }
.cm__responder { display: block; }
.cm__responder[open] { flex-basis: 100%; }
.cm__responder summary { display: inline; }
.cm__form--resposta { margin-top: 0.5rem; }
.cm__acoes { flex-wrap: wrap; align-items: flex-start; }
.cm__item:target { box-shadow: 0 0 0 2px var(--sakura); }
.cm__capitulo { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.07); font-size: 0.65rem; color: var(--text-muted); }
.cm__capitulo svg { width: 0.7rem; height: 0.7rem; }
.cm__capitulo:hover { color: var(--sakura); }

/* Fundo do comentario por classe (vantagem) */
.cm__item--fundo1 { border-color: rgba(196, 168, 255, 0.35); background: linear-gradient(90deg, rgba(196, 168, 255, 0.14), rgba(12, 8, 18, 0.78) 70%); }
.cm__item--fundo2 { border-color: rgba(255, 92, 138, 0.45); background: linear-gradient(110deg, rgba(255, 42, 109, 0.16), rgba(142, 197, 252, 0.12), rgba(255, 42, 109, 0.16)); background-size: 220% 100%; animation: cm-fundo 7s ease-in-out infinite; }
.cm__item--fundo3 { border-color: rgba(246, 211, 101, 0.6); background: linear-gradient(110deg, rgba(246, 211, 101, 0.2), rgba(253, 160, 133, 0.12), rgba(246, 211, 101, 0.2)); background-size: 220% 100%; animation: cm-fundo 5s ease-in-out infinite; box-shadow: 0 0 14px rgba(246, 211, 101, 0.18); }
@keyframes cm-fundo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .cm__item--fundo2, .cm__item--fundo3 { animation: none; } }

/* Curtir / nao curtir e ordenacao */
.cm__votos { display: inline-flex; gap: 0.5rem; }
.cm__voto { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.72rem; cursor: pointer; }
.cm__voto svg { width: 0.9rem; height: 0.9rem; }
.cm__voto:hover:not(:disabled) { color: var(--sakura); }
.cm__voto:disabled { opacity: 0.45; cursor: default; }
.cm__voto.is-ativo { color: #7fe3a8; font-weight: 700; }
.cm__voto.is-contra { color: #ff8fa3; }
.cm__ordem { display: flex; gap: 0.5rem; margin-top: 0.8rem; font-size: 0.75rem; }
.cm__ordem a { padding: 0.15rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9999px; color: var(--text-muted); }
.cm__ordem a.is-ativo { border-color: var(--sakura); color: var(--sakura); }