/* Ajuda > Preferências. Colors here are re-tinted with the active style. */
.preferences-page .pref-block{margin:0 0 38px;max-width:1240px}
.preferences-page .pref-block>header h2{font-size:18px;font-weight:600;color:#0f172a;margin:0 0 6px}
.preferences-page .pref-block>header p{font-size:14px;line-height:1.6;color:#64748b;margin:0 0 18px;max-width:680px}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:16px}
.style-card{display:flex;flex-direction:column;min-width:0;border:1px solid #e2e8f0;border-radius:16px;background:#fff;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.style-card:hover{border-color:#cfe0ff;box-shadow:0 10px 28px #0f172a10}
.style-card.is-current{border-color:#0066ff;box-shadow:0 0 0 3px #0066ff22}
.style-info{flex:1;padding:16px 18px 4px}
.style-info h3{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:600;color:#0f172a;margin:0 0 5px}
.style-badge{font-style:normal;font-size:11px;font-weight:600;color:#0066ff;background:#eaf2ff;border-radius:99px;padding:4px 9px}
.style-tagline{font-size:13px;font-weight:500;line-height:1.5;color:#334155;margin:0 0 8px}
.style-desc{font-size:12.5px;line-height:1.65;color:#64748b;margin:0 0 12px}
.style-traits{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.style-traits li{font-size:11px;color:#475569;background:#f1f5f9;border-radius:6px;padding:4px 8px}
.style-card>footer{padding:14px 18px 18px}
.style-apply{width:100%;min-height:40px;border:1px solid #cfe0ff;border-radius:10px;background:#f5f9ff;color:#0066ff;font-weight:600;font-size:13px;cursor:pointer}
.style-apply:hover{background:#eaf2ff}
.style-card.is-current .style-apply{background:#0066ff;border-color:#0066ff;color:#fff;cursor:default}
.mode-switch{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:#f1f5f9}
.mode-switch button{border:0;background:transparent;border-radius:9px;padding:9px 20px;font-size:13px;font-weight:600;color:#475569;cursor:pointer}
.mode-switch button[aria-pressed="true"]{background:#fff;color:#0066ff;box-shadow:0 1px 3px #0f172a1f}

html[data-theme="dark"] .style-card{background:var(--dark-surface)!important;border-color:var(--dark-line)!important}
html[data-theme="dark"] .style-card:hover{border-color:#34507c!important}
html[data-theme="dark"] .style-card.is-current{border-color:#4b8dff!important;box-shadow:0 0 0 3px #4b8dff33!important}
html[data-theme="dark"] .style-info h3{color:#edf3ff!important}
html[data-theme="dark"] .style-tagline{color:#c7d5ed!important}
html[data-theme="dark"] .style-desc,html[data-theme="dark"] .preferences-page .pref-block>header p{color:#9babc3!important}
html[data-theme="dark"] .style-badge{background:var(--dark-raised)!important;color:#8ab6ff!important}
html[data-theme="dark"] .style-traits li{background:var(--dark-raised)!important;color:#c7d5ed!important}
html[data-theme="dark"] .style-apply{background:var(--dark-raised)!important;border-color:var(--dark-line)!important;color:#8ab6ff!important}
html[data-theme="dark"] .style-apply:hover{background:var(--dark-hover)!important}
html[data-theme="dark"] .style-card.is-current .style-apply{background:#0b6cff!important;border-color:#0b6cff!important;color:#fff!important}
html[data-theme="dark"] .mode-switch{background:var(--dark-shell)!important;border:1px solid var(--dark-line)}
html[data-theme="dark"] .mode-switch button{color:#9babc3!important}
html[data-theme="dark"] .mode-switch button[aria-pressed="true"]{background:var(--dark-raised)!important;color:#8ab6ff!important;box-shadow:none!important}

.layout-options{display:grid;gap:12px;max-width:1000px}
.layout-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 18px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.layout-row h3{font-size:15px;font-weight:600;color:#0f172a;margin:0 0 4px}
.layout-row p{font-size:13px;line-height:1.55;color:#64748b;margin:0;max-width:560px}
.layout-switch{flex:none}
.layout-switch button{display:inline-flex;align-items:center;gap:8px}
.layout-switch svg{width:24px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.layout-switch svg .fill{fill:currentColor;stroke:none;opacity:.55}
html[data-theme="dark"] .layout-row{background:var(--dark-surface)!important;border-color:var(--dark-line)!important}
html[data-theme="dark"] .layout-row p{color:#9babc3!important}

/* Floating "Novo chat" (Preferências > Disposição). Also a .primary, so styles restyle it. */
.krewia-fab{display:none}
html[data-fab] #businessApp .krewia-fab{position:fixed;right:28px;bottom:28px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:14px 22px 14px 18px!important;border-radius:999px;box-shadow:0 12px 30px #0066ff40;font-size:14px;font-weight:600;cursor:pointer}
.krewia-fab>span:first-child{font-size:20px;line-height:1}
html[data-fab] #businessApp:has(#b-chat.active,#channels.active,#direct-messages.active) .krewia-fab{display:none}

@media(max-width:800px){html[data-fab] #businessApp .krewia-fab{display:none}}
@media(max-width:760px){.style-grid{grid-template-columns:1fr}.mode-switch{display:flex}.mode-switch button{flex:1}.layout-row{flex-direction:column;align-items:stretch}}