/* Per-server designs inherit the Community Tool defaults and preserve personal mode preferences. */
/* Shared Community Tool mark stays compact in navigation and crisp on the sign-in screen. */
.login-brand-art { width: 92px; height: 92px; margin: 0 auto 12px; object-fit: contain; }
body { font-family: var(--brand-font, "Albert Sans", "Segoe UI", system-ui, sans-serif); font-size: var(--user-base-size, var(--brand-font-size, 14px)); }
body .panel, body .stat-card, body .settings-panel { border-radius: var(--brand-radius, 9px); }
body .panel { padding: calc(17px * var(--brand-space-scale, 1)); }
body .nav-item:hover { background: var(--brand-nav-hover, #102d40); }
body .nav-item.active, body .workspace-category.active { border-color: var(--brand-primary, #37b9e8); background: var(--brand-nav-active, #102c3c); }
body .nav-item.active { box-shadow: inset 3px 0 var(--brand-primary, #37b9e8); }
body .nav-item.active span, body .workspace-category.active span { color: var(--brand-accent, #72d3fb); }
body .button.primary { background: var(--brand-button, var(--blue)); color: var(--brand-button-text, #071522); }
body .button.primary:hover { background: var(--brand-button-hover, var(--blue)); }
body[data-brand-button-style="outline"] .button.primary { border: 1px solid var(--brand-button, var(--blue)); background: transparent; color: var(--brand-button, var(--blue)); }
body[data-brand-button-style="outline"] .button.primary:hover { background: color-mix(in srgb, var(--brand-button, var(--blue)) 14%, transparent); }
body[data-brand-card-style="flat"] .panel, body[data-brand-card-style="flat"] .stat-card { border-color: transparent; box-shadow: none; }
body .input, body input, body select, body textarea { background-color: var(--control, #0b202e); }
body .text-button, body a:not(.brand):not(.button) { color: var(--brand-link, var(--blue)); }
body .section-intro h2 { color: var(--brand-heading, var(--text)); font-size: calc(clamp(20px, 1.45em, 28px) * var(--brand-heading-scale, 1)); }
body .panel h3 { color: var(--brand-heading, var(--text)); font-size: calc(1.08em * var(--brand-heading-scale, 1)); }
body .guild-dashboard-description { margin: -9px 0 16px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--brand-radius, 9px); background: var(--panel); color: var(--muted); white-space: pre-wrap; }
body .guild-dashboard-header { display: flex; align-items: center; border: 1px solid var(--brand-header-border, var(--line)); border-radius: var(--brand-radius, 9px); margin: 0 0 16px; overflow: hidden; }
body .guild-dashboard-header h2 { margin: 0; color: var(--brand-header-color, var(--text)); font-size: calc(1.35em * var(--brand-heading-scale, 1)); }
body .guild-dashboard-header p { margin: 4px 0 0; color: inherit; opacity: .88; }
body .guild-dashboard-header.compact { min-height: 0 !important; }
body .guild-dashboard-header.compact .guild-header-copy { padding-top: 0; padding-bottom: 0; }
body .guild-header-logo { width: 48px; height: 48px; flex: 0 0 auto; margin-right: 14px; border-radius: 7px; object-fit: contain; }
body .guild-footer-custom { display: grid; gap: 9px; margin-top: 22px; }
body .guild-footer-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 18px; border: 1px solid; border-radius: var(--brand-radius, 9px); }
body .guild-footer-content > strong { color: inherit; }
body .guild-footer-content > span, body .guild-footer-content > small { color: inherit; }
body .guild-footer-logo { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 5px; object-fit: contain; }
body .guild-footer-links { display: flex; flex-wrap: wrap; gap: 12px; }
body .guild-footer-links a { color: var(--brand-footer-link, var(--brand-link, var(--blue))) !important; text-decoration: none; }
body .guild-footer-links a:hover { color: var(--brand-footer-hover, var(--brand-accent, var(--blue-light))) !important; text-decoration: underline; }
body .guild-footer-custom > .legal-links { margin: 0; }

.dashboard-branding-settings { display: grid; gap: 14px; margin: 4px 0 24px; }
.dashboard-branding-settings > .section-intro { margin-bottom: 0; }
.branding-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
.bot-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.bot-settings-layout > *, .bot-presence-panel { min-width: 0; width: 100%; }
.bot-presence-panel .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bot-presence-panel .bot-presence-text-field { grid-column: 1 / -1; }
.bot-presence-panel .button { justify-self: start; }
.branding-profile-panel, .branding-theme-panel, .branding-frame-panel, .branding-preview-panel { min-width: 0; }
.branding-frame-panel, .branding-preview-panel { grid-column: 1 / -1; }
.branding-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, auto); gap: 12px; align-items: end; }
.branding-profile-grid > label { min-width: 0; }
.branding-description-field { grid-column: 1 / -1; }
.branding-toggle-list { display: grid; gap: 7px; align-content: center; }
.branding-toggle-list label, .branding-frame-panel label:has(input[type="checkbox"]) { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.branding-avatar-row { display: flex; grid-column: 1 / -1; align-items: center; gap: 13px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.branding-avatar-row > img { width: 58px; height: 58px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); object-fit: cover; }
.branding-avatar-row p { margin: 3px 0 8px; font-size: 12px; }
.branding-avatar-row > div { min-width: 0; }
.branding-avatar-row .text-button { margin-left: 8px; }
.branding-logo-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.branding-logo-row > img { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); object-fit: contain; }
.branding-logo-row p { margin: 3px 0 8px; font-size: 12px; }
.branding-upload-button { display: inline-flex; cursor: pointer; }
.branding-logo-options { align-items: start; margin-top: 12px; }
.branding-theme-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin-bottom: 13px; }
.branding-theme-controls > label { min-width: 0; }
.branding-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; grid-column: 1 / -1; }
.branding-actions .button, .branding-profile-grid .button { min-height: 37px; font-size: 12px; }
.branding-colors-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 17px 0 7px; }
.branding-colors-heading h4, .branding-editor-subgrid h4 { margin: 0 0 8px; font-size: 13px; }
.branding-colors-heading p { margin: 0; font-size: 11px; }
.branding-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 12px; }
.branding-color-field { display: grid; min-width: 0; gap: 4px; color: var(--muted); font-size: 12px; }
.branding-color-field > span:last-child { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; }
.branding-color-field input[type="color"] { width: 38px; height: 34px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); }
.branding-color-field .input { min-width: 0; min-height: 34px; padding: 6px 7px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.branding-editor-subgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.branding-editor-subgrid > div { min-width: 0; }
.branding-editor-subgrid .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.branding-frame-panel .branding-editor-subgrid { margin-top: 0; }
.branding-frame-panel .input, .branding-profile-panel .input, .branding-theme-panel .input { width: 100%; }
.branding-preview-sizes { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }
.branding-preview-sizes button { min-height: 30px; padding: 4px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; }
.branding-preview-sizes button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.branding-preview-stage { min-height: 275px; display: grid; place-items: center; overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
.branding-preview { display: grid; width: 100%; min-width: 0; min-height: 230px; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--preview-line); border-radius: var(--preview-radius); background: var(--preview-bg); color: var(--preview-text); font-family: var(--preview-font); box-shadow: 0 8px 20px #0002; transition: width .18s ease; }
.branding-preview[data-size="tablet"] { width: min(100%, 650px); grid-template-columns: 126px minmax(0, 1fr); }
.branding-preview[data-size="phone"] { width: min(100%, 340px); grid-template-columns: 1fr; }
.branding-preview-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 13px 10px; background: var(--preview-sidebar); color: var(--preview-text); }
.branding-preview-sidebar img { width: 27px; height: 27px; border-radius: 6px; object-fit: cover; }
.branding-preview-sidebar b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.branding-preview-sidebar small { color: var(--preview-muted); }
.branding-preview-sidebar span { padding: 5px 6px; border-radius: 4px; font-size: 12px; }
.branding-preview-sidebar span:first-of-type { background: var(--preview-card); }
.branding-preview-main { display: grid; grid-template-rows: auto minmax(90px, 1fr) auto; gap: 10px; min-width: 0; padding: 14px; }
.branding-preview-main > header { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid var(--preview-line); }
.branding-preview-main > header small, .branding-preview-main article p, .branding-preview-main > footer { color: var(--preview-muted); font-size: 12px; }
.branding-preview-main article { align-self: center; padding: 11px; border: 1px solid var(--preview-line); border-radius: var(--preview-radius); background: var(--preview-panel); }
.branding-preview-main article h4 { margin: 0 0 5px; font-size: 13px; }
.branding-preview-main article p { margin: 0 0 9px; }
.branding-preview-main article button { min-height: 28px; padding: 4px 9px; border: 0; border-radius: 4px; background: var(--preview-accent); color: #071522; font: inherit; font-size: 12px; }
.branding-preview-main > footer { padding-top: 8px; border-top: 1px solid var(--preview-line); }
.branding-preview[data-size="phone"] .branding-preview-sidebar { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.branding-preview[data-size="phone"] .branding-preview-sidebar span { display: none; }
.branding-preview[data-size="phone"] .branding-preview-sidebar small { grid-column: 2; }
.branding-readonly #branding-save, .branding-readonly #branding-save-nickname { display: none; }
.dashboard-mobile-brand-logo { display: none; }
@media (max-width: 1050px) {
  .branding-layout { grid-template-columns: minmax(0, 1fr); }
  .branding-frame-panel, .branding-preview-panel { grid-column: auto; }
  .branding-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .topbar-title { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; align-items: center; }
  .dashboard-mobile-brand-logo { display: block; grid-row: 1 / span 2; border-radius: 6px; object-fit: contain; }
  .topbar-title .breadcrumbs, .topbar-title h1 { grid-column: 2; }
  .branding-theme-controls { grid-template-columns: minmax(0, 1fr); }
  .branding-actions { grid-column: auto; }
  .branding-editor-subgrid { grid-template-columns: minmax(0, 1fr); }
  .branding-color-grid { grid-template-columns: minmax(0, 1fr); }
  .branding-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .branding-avatar-row { grid-column: auto; align-items: flex-start; }
  .branding-avatar-row .text-button { display: block; margin: 8px 0 0; }
  .branding-profile-grid > label, .branding-description-field { grid-column: auto; }
  .branding-preview-stage { padding: 10px; }
  .branding-preview { grid-template-columns: 100px minmax(0, 1fr); }
  .branding-preview[data-size="tablet"] { grid-template-columns: 90px minmax(0, 1fr); }
}

/* Match the editor's inner layout to the actual dashboard column. The shell
   becomes tablet-sized before the old viewport-only 680px form breakpoint. */
@container dashboard-main (max-width: 760px) {
  .branding-theme-controls,
  .branding-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .branding-profile-grid > label,
  .branding-description-field { grid-column: auto; }
  .branding-actions { grid-column: auto; }
  .branding-avatar-row { flex-wrap: wrap; align-items: flex-start; }
  .branding-avatar-row > div { flex: 1 1 220px; }
  .branding-avatar-row .text-button { display: block; margin: 8px 0 0; text-align: left; }
}

@container dashboard-main (max-width: 620px) {
  .branding-editor-subgrid,
  .branding-color-grid,
  .branding-editor-subgrid .field-grid { grid-template-columns: minmax(0, 1fr); }
  .branding-logo-row { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 1080px) {
  /* The fixed mobile navigation must remain opaque over long settings forms. */
  body.dashboard-v3 .mobile-tabbar { background: var(--sidebar); opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@container dashboard-main (max-width: 760px) {
  body.dashboard-v3 #bot-settings-view .bot-presence-panel .field-grid,
  body.dashboard-v3 #bot-settings-view .branding-profile-grid { grid-template-columns: minmax(0, 1fr); }
  body.dashboard-v3 #bot-settings-view .branding-description-field { grid-column: auto; }
}