/* Salas (visual novo): cofre, ranking e galeria de temas. Usa o kit eco2. */
.eco-hero--rooms { --eco-h: 205; }
.eco-hero--ranking { --eco-h: 38; }
.rm-page { --t: var(--accent); }
.rm-page .room-section { margin-top: 0; }
.rm-page .room-search { margin: 0; }
.rm-page .room-section h2 { font-size: 1.1rem; font-family: var(--font-display); }
.rm-page .room-card { border-radius: 20px; padding: 14px; }
.rm-page .room-card-icon { border-radius: 16px; }
.rm-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.05rem; }
.rm-h .icon { width: 20px; height: 20px; color: var(--accent-text); }

/* cofre */
.rm-pool-main { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.rm-pool-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-pool-top strong { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--t); }
.rm-pool-top span { color: var(--text-soft); }
.rm-pool-bar { height: 16px; }
.rm-pool-dist { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .88rem; color: var(--text-soft); }
.rm-pool-dist span { display: inline-flex; align-items: center; gap: 6px; }
.rm-pool-dist .icon { width: 16px; height: 16px; color: var(--t); }
.rm-pool-dist b { color: var(--text); }
.rm-deposits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rm-deposit { --t: var(--accent); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.rm-deposit.is-off { opacity: .6; }
.rm-deposit-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--t); background: color-mix(in srgb, var(--t) 16%, var(--surface-2)); }
.rm-deposit-ico .icon { width: 22px; height: 22px; }
.rm-deposit-main { display: grid; gap: 4px; min-width: 0; }
.rm-deposit-main strong { overflow-wrap: anywhere; }
.rm-deposit-main small { color: var(--text-muted); }
.rm-deposit-bar { height: 10px; }
.rm-deposit-admin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--border); }
.rm-deposit-admin form { margin: 0; }
.rm-inline { display: flex; gap: 6px; }
.rm-inline .eco-input { min-height: 40px; width: 110px; }
.rm-admin { border-top: 1px dashed var(--border-strong); padding-top: 12px; }
.rm-admin > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; cursor: pointer; list-style: none; color: var(--text-soft); }
.rm-admin > summary::-webkit-details-marker { display: none; }
.rm-admin > summary .icon { width: 18px; height: 18px; }
.rm-admin > summary .icon:last-child { margin-left: auto; transition: transform .2s ease; }
.rm-admin[open] > summary .icon:last-child { transform: rotate(180deg); }
.rm-admin-form { margin-top: 8px; }

/* ranking */
.rm-board, .rm-users, .rm-prizes, .rm-how { margin: 0; padding: 0; list-style: none; }
.rm-board { display: grid; gap: 14px; }
.rm-rank { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.rm-rank.is-gold { border-color: #eab308; background: linear-gradient(160deg, color-mix(in srgb, #eab308 14%, var(--surface)), var(--surface) 60%); box-shadow: 0 18px 34px -24px #eab308; }
.rm-rank.is-silver { border-color: #94a3b8; background: linear-gradient(160deg, color-mix(in srgb, #94a3b8 14%, var(--surface)), var(--surface) 60%); }
.rm-rank.is-bronze { border-color: #c2763a; background: linear-gradient(160deg, color-mix(in srgb, #c2763a 14%, var(--surface)), var(--surface) 60%); }
.rm-rank-head { display: grid; grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rm-pos { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 14px; font-family: var(--font-display); font-weight: 800; background: var(--surface-3); }
.is-gold .rm-pos { background: linear-gradient(135deg, #fde047, #eab308); color: #422006; }
.is-silver .rm-pos { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.is-bronze .rm-pos { background: linear-gradient(135deg, #fdba74, #c2763a); color: #431407; }
.rm-room-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; overflow: hidden; background: var(--surface-2); color: var(--text-muted); }
.rm-room-ico img { width: 100%; height: 100%; object-fit: cover; }
.rm-rank-title { display: grid; min-width: 0; }
.rm-rank-title a { color: inherit; text-decoration: none; }
.rm-rank-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-rank-title small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-score { display: grid; text-align: right; }
.rm-score strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.rm-score small { color: var(--text-muted); font-size: .7rem; }
.rm-rank-bar { height: 8px; }
.rm-earn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rm-earn-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: .82rem; font-weight: 800; color: var(--text-soft); }
.rm-earn-label .icon { width: 15px; height: 15px; }
.rm-tops { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.rm-tops-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.rm-tops-title .icon { width: 15px; height: 15px; }
.rm-users { display: grid; gap: 8px; }
.rm-users li { display: grid; grid-template-columns: 22px 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rm-u-pos { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 800; background: var(--surface-3); }
.rm-users li:first-child .rm-u-pos { background: #eab308; color: #422006; }
.rm-u-main { display: grid; gap: 4px; min-width: 0; }
.rm-u-main b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-u-bar { height: 5px; }
.rm-u-pts { font-weight: 800; font-size: .9rem; }
.rm-rest > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; cursor: pointer; list-style: none; }
.rm-rest > summary::-webkit-details-marker { display: none; }
.rm-rest > summary .icon:first-child { width: 18px; height: 18px; }
.rm-rest > summary .icon:last-child { margin-left: auto; width: 18px; height: 18px; transition: transform .2s ease; }
.rm-rest[open] > summary .icon:last-child { transform: rotate(180deg); }
.rm-prizes { display: grid; gap: 6px; }
.rm-prizes li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.rm-prizes strong { text-align: right; overflow-wrap: anywhere; }
.rm-how { display: grid; gap: 8px; }
.rm-how li { display: flex; align-items: baseline; gap: 10px; color: var(--text-soft); }
.rm-how b { flex: none; min-width: 34px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: .8rem; color: var(--accent-text); background: var(--accent-soft); }
.rm-weeks { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-weeks a { text-decoration: none; }

@media (min-width: 900px) {
  .rm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .rm-deposit { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .rm-deposit-admin { grid-column: auto; border-top: 0; padding-top: 0; }
}
@media (max-width: 420px) {
  .rm-rank-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rm-room-ico { display: none; }
  .rm-rank { padding: 14px 12px; }
}
.rm-page [hidden], .rm-themes [hidden] { display: none !important; }

/* galeria de temas com prévia (minissala) */
.rm-trybar { position: sticky; top: calc(var(--header-height, 64px) + 6px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); }
.rm-trybar > span { flex: 1 1 180px; min-width: 0; }
.rm-trybar .icon { width: 18px; height: 18px; color: var(--accent-text); }
.rm-theme-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.rm-theme { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--surface); min-width: 0; transition: transform .18s ease, box-shadow .18s ease; }
.rm-theme:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(0,0,0,.6); }
.rm-theme.is-applied { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rm-prev { position: relative; display: grid; gap: 8px; padding: 10px; background: #1b1b22; border-bottom: 1px solid var(--border); }
.rm-prev-bar, .rm-prev-input { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; border: 1px solid transparent; background: #26262f; font-size: .78rem; }
.rm-prev-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-prev-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #888; }
.rm-prev-live { flex: none; width: 22px; height: 6px; border-radius: 3px; background: #888; opacity: .6; }
.rm-prev-body { display: grid; gap: 6px; padding: 2px 0; }
.rm-prev-msg { display: grid; gap: 5px; width: 72%; padding: 8px 10px; border-radius: 14px 14px 14px 4px; border: 1px solid transparent; background: #26262f; }
.rm-prev-msg.is-me { justify-self: end; border-radius: 14px 14px 4px 14px; background: #888; }
.rm-prev-line { display: block; height: 6px; border-radius: 3px; background: #888; opacity: .75; }
.rm-prev-msg.is-me .rm-prev-line { background: currentColor; opacity: .55; }
.rm-w1 { width: 90%; } .rm-w2 { width: 60%; } .rm-w3 { width: 80%; } .rm-w4 { width: 55%; }
.rm-prev-send { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #888; }
.rm-prev-input .rm-prev-line { flex: 1; }
.rm-prev-badge { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.rm-prev-badge .icon { width: 12px; height: 12px; }
.rm-theme-body { display: grid; gap: 8px; padding: 14px; align-content: start; flex: 1; }
.rm-theme-body > strong { font-size: 1.02rem; }
.rm-theme-body small { color: var(--text-muted); }
.rm-theme-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.rm-theme-actions form { margin: 0; }
.rm-theme-actions [aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); }

/* Membros e moderação (gerenciar sala) */
.rm-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rm-person { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.rm-person-main { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.rm-person-main strong { overflow-wrap: anywhere; }
.rm-role { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); }
.rm-role--amber { background: color-mix(in srgb, #f59e0b 20%, var(--surface)); color: #b45309; border-color: transparent; }
.rm-role--violet { background: color-mix(in srgb, #8b5cf6 18%, var(--surface)); color: #6d28d9; border-color: transparent; }
:root[data-theme="dark"] .rm-role--amber { color: #fbbf24; }
:root[data-theme="dark"] .rm-role--violet { color: #c4b5fd; }
.rm-person-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 14px; font-weight: 700; cursor: pointer; background: var(--surface); border: 1px solid var(--border); }
.rm-person-menu > summary::-webkit-details-marker { display: none; }
.rm-person-menu > summary .icon { width: 18px; height: 18px; }
.rm-person-menu[open] > summary { background: var(--accent); color: var(--accent-contrast, #1a1203); border-color: transparent; }
.rm-person-panel { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.rm-person-menu { grid-column: 1 / -1; }
.rm-person-menu > summary { position: absolute; top: 12px; right: 12px; }
.rm-person { row-gap: 0; padding-right: 116px; }
.rm-person-menu { padding-right: 0; }
.rm-person-panel { margin-right: -104px; }
.rm-person:not(:has(.rm-person-menu)) { padding-right: 12px; }
.rm-person-panel form { margin: 0; }
.rm-act { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; text-align: left; cursor: pointer; color: var(--text); background: var(--surface-2); }
.rm-act:hover, .rm-act:focus-visible { background: var(--hover); }
.rm-act .icon { width: 18px; height: 18px; flex: none; }
.rm-act--danger { color: #b91c1c; }
:root[data-theme="dark"] .rm-act--danger { color: #f87171; }
.rm-act--inline { width: auto; }
.rm-mute { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rm-mute .rm-act { width: auto; background: var(--accent-soft, var(--surface-2)); }
.rm-people--plain .rm-person { grid-template-columns: minmax(0, 1fr) auto auto; }
.rm-people--plain .rm-person > span:first-child { font-weight: 700; overflow-wrap: anywhere; }
.rm-people--plain .rm-person form { margin: 0; }

/* ---------------------------------------------------------------- compacto (alpha.94) */
.rm-page { display: grid; gap: 12px; }
.rm-page .eco-hero { padding: 14px 16px; gap: 10px; border-radius: 18px; }
.rm-page .eco-hero .eco-kicker { display: none; }
.rm-page .eco-hero h1 { margin: 0; font-size: clamp(1.25rem, 4.5vw, 1.6rem); }
.rm-page .eco-hero p { font-size: .86rem; line-height: 1.4; max-width: 62ch; }
.rm-page .eco-hero-copy { gap: 4px; }
.rm-page .eco-hero-actions { gap: 8px; margin-top: 6px; }
.rm-page .eco-hero .btn { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.rm-page .eco-hero .eco-coin { display: none; }
@media (max-width: 520px) { .rm-page .eco-hero-actions .btn { flex: 1 1 calc(50% - 8px); } }

.rm-pool { padding: 14px; gap: 10px; border-radius: 18px; }
.rm-pool .eco-sec-head p:not(.eco-eyebrow) { margin: 2px 0 0; font-size: .82rem; line-height: 1.4; color: var(--text-soft); }
.rm-pool .eco-sec-head h2 { margin: 0; font-size: 1rem; }
.rm-pool-main { padding: 10px 12px; gap: 6px; border-radius: 14px; }
.rm-pool-top strong { font-size: 1.5rem; }
.rm-pool-top span { font-size: .82rem; }
.rm-pool-bar { height: 10px; }
.rm-pool-dist { font-size: .8rem; gap: 4px 12px; }
.rm-deposits { gap: 6px; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.rm-deposit { grid-template-columns: 32px minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: 12px; align-items: center; }
.rm-deposit-ico { width: 32px; height: 32px; border-radius: 10px; }
.rm-deposit-ico .icon { width: 16px; height: 16px; }
.rm-deposit-main { gap: 2px; }
.rm-deposit-main strong { font-size: .86rem; }
.rm-deposit-main small { font-size: .74rem; line-height: 1.3; }
.rm-deposit-bar { height: 6px; }
.rm-deposit-admin { padding-top: 6px; }
.rm-inline .eco-input { min-height: 34px; width: 90px; }

.rm-page .room-card { padding: 10px 12px; border-radius: 14px; }
.rm-page .room-card-icon { width: 40px; height: 40px; border-radius: 12px; }
.rm-page .room-section { display: grid; gap: 8px; }
.rm-page .room-section h2 { margin: 0; }
.rm-page .room-grid { gap: 8px; }