:root { --forum-info-icon-color: #6485ad; }
/* Compact UCP sidebar with a shared profile and navigation card. */
#cp-menu.ucp-menu-card {
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(67, 89, 113, .08);
  padding: 12px;
  box-sizing: border-box;
}
.ucp-menu-card .ucp-mini-profile-card {
  display: grid;
  grid-template-columns: 55.2px minmax(0, 1fr);
  column-gap: 12px;
  text-align: left;
  padding: 0 4px 14px;
  margin: 0 0 10px;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #e6edf4;
}
.ucp-menu-card .ucp-mini-profile-avatar { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.ucp-menu-card .ucp-mini-profile-avatar img { width: 55.2px !important; height: 55.2px !important; border-radius: 50%; object-fit: cover; margin: 0; }
.ucp-menu-card .ucp-mini-profile-name { grid-column: 2; margin: 0; color: #172b4d; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.ucp-menu-card .ucp-mini-profile-rank { grid-column: 2; margin: 0; color: #536b89; font-size: 12px; line-height: 1.5; }
.ucp-menu-card .ucp-mini-profile-link { grid-column: 2; margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #fc0000; }
#navigation.ucp-sidebar-card { float: none; width: 100%; padding: 0; margin: 0; background: transparent; box-shadow: none; }
#navigation.ucp-sidebar-card ul { padding: 0; }
#navigation.ucp-sidebar-card li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin: 2px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #486184;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#navigation.ucp-sidebar-card li > a i { width: 20px; flex: 0 0 20px; font-size: 19px; text-align: center; }
#navigation.ucp-sidebar-card li > a:hover { color: #fc0000; background: #fff2f4; }
#navigation.ucp-sidebar-card li.active-subsection > a { color: #fff; background: #fc0000; font-weight: 700; }
#navigation.ucp-sidebar-card li.ucp-nav-group-start { border-top: 1px solid #e6edf4; margin-top: 12px; padding-top: 12px; }
#navigation.ucp-sidebar-card a:focus-visible { outline: 2px solid #fc0000; outline-offset: 2px; }
.ucp-menu-card .cp-mini { margin-top: 16px; }
.ucp-menu-card .cp-mini > .inner { box-shadow: none; padding: 8px 4px; }
@media (max-width: 900px) {
  #cp-menu.ucp-menu-card { width: 100%; float: none; margin-bottom: 20px; }
  #navigation.ucp-sidebar-card li > a { min-height: 44px; }
}
@media (max-width: 900px) { #cp-main.ucp-main { width: 100%; float: none; clear: both; } }

.ucp-options-header { padding-bottom: 16px; border-bottom: 1px solid #e6edf4; }
#cp-main .ucp-options-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0; border: 0; color: #172b4d; font-family: inherit; font-size: 20px; font-weight: 700; text-transform: none; }
.ucp-options-title .bx { font-size: 22px; }
.ucp-options-subtitle { margin: 0; color: #536b89; font-size: 14px; line-height: 1.5; }
/* Personal preferences: compact rows and aligned controls. */
.ucp-personal-options .card-body { padding: 20px; }
.ucp-personal-options .ucp-setting-row { gap: 14px; padding: 11px 0; border-color: #e6edf4; }
.ucp-personal-options .ucp-setting-icon { width: 24px; height: 28px; color: #435b7b; }
.ucp-personal-options .ucp-setting-icon .bx { font-size: 22px; }
.ucp-personal-options .ucp-setting-text { flex: 1 1 220px; }
.ucp-personal-options .ucp-setting-label { color: #172b4d; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ucp-personal-options .ucp-setting-desc { color: #7b8da8; font-size: 12px; line-height: 1.5; margin-top: 2px; }
.ucp-personal-options .ucp-setting-control { flex: 0 1 340px; width: 340px; max-width: 100%; }
.ucp-personal-options .ucp-setting-control-inline { gap: 8px; }
.ucp-personal-options .form-select,
.ucp-personal-options .form-control { min-width: 0; min-height: 36px; border: 1px solid #d5dfeb; border-radius: 4px; color: #172b4d; font-size: 13px; }
.ucp-personal-options .ucp-toggle { justify-content: flex-end; }
.ucp-personal-options .ucp-toggle-track { background: #dce2e9; }
.ucp-personal-options .ucp-toggle-input-yes:checked ~ .ucp-toggle-track { background: #fc0000; }
.ucp-personal-options .ucp-toggle-yes,
.ucp-personal-options .ucp-toggle-no { font-size: 12px; }
.ucp-personal-options .ucp-toggle-track:focus-visible { outline: 2px solid #006bff; outline-offset: 3px; }
.ucp-options-footer { display: flex; align-items: center; gap: 16px; padding-top: 18px; }
.ucp-options-notice { display: flex; align-items: center; gap: 12px; flex: 1; padding: 14px; border: 1px solid #dfebff; border-radius: 6px; background: #f5f9ff; color: #7185a5; font-size: 12px; line-height: 1.5; }
.ucp-options-notice .bx { flex-shrink: 0; font-size: 22px; color: var(--forum-info-icon-color); }
.ucp-options-save { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; background: #fc0000; border: 1px solid #fc0000; color: #fff; font-weight: 600; }
.ucp-options-save:hover, .ucp-options-save:focus { background: #dc0000; border-color: #dc0000; color: #fff; }
.ucp-options-save .bx { font-size: 20px; }
@media (max-width: 1199px) {
  .ucp-personal-options .ucp-setting-control { flex-basis: 280px; width: 280px; }
}
@media (max-width: 600px) {
  .ucp-personal-options .card-body { padding: 16px; }
  .ucp-personal-options .ucp-setting-control { flex: 1 1 100%; width: 100%; margin-left: 38px; }
  .ucp-options-footer { flex-wrap: wrap; }
  .ucp-options-notice { flex-basis: 100%; }
  .ucp-options-save { margin-left: auto; min-height: 44px; }
}
/* Overview shares the preferences card typography and spacing. */
.ucp-overview .card-body { padding: 20px; }
.ucp-overview-welcome { margin: 16px 0 20px; color: #7185a5; font-size: 13px; line-height: 1.6; }
.ucp-overview-welcome p:last-child { margin-bottom: 0; }
#cp-main .ucp-overview-section { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 0 0 12px; border-bottom: 1px solid #e6edf4; color: #172b4d; font-family: inherit; font-size: 16px; font-weight: 600; text-transform: none; }
.ucp-overview-section .bx { font-size: 22px; color: #435b7b; }
.ucp-overview .list-group-item { padding: 12px 0; border: 0; border-bottom: 1px solid #e6edf4; border-radius: 0; background: transparent; font-size: 14px; }
.ucp-overview .list-group-item .small { font-size: 12px; color: #7b8da8 !important; line-height: 1.5; }
.ucp-overview-details { display: grid; grid-template-columns: minmax(180px, 40%) minmax(0, 1fr); margin: 0; }
.ucp-overview-details > dt, .ucp-overview-details > dd { width: auto; margin: 0; padding: 13px 0; border-bottom: 1px solid #e6edf4; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ucp-overview-details > dt { display: flex; align-items: flex-start; gap: 14px; padding-right: 16px; color: #172b4d; font-weight: 600; }
.ucp-overview-details > dt .bx { flex: 0 0 24px; width: 24px; padding-top: 2px; color: #435b7b; font-size: 22px; }
.ucp-overview-details > dd { color: #536b89; }
.ucp-overview a { color: #fc0000; }
.ucp-overview a:hover { color: #fc0000; }
.ucp-overview a:focus-visible { outline: 2px solid #fc0000; outline-offset: 3px; }
@media (max-width: 600px) {
  .ucp-overview .card-body { padding: 16px; }
  .ucp-overview-details { grid-template-columns: minmax(0, 1fr); }
  .ucp-overview-details > dt { border: 0; padding-bottom: 3px; }
  .ucp-overview-details > dd { padding-top: 0; padding-left: 38px; }
}
/* Profile fields retain phpBB's native controls, validation and field types. */
.ucp-profile-birthday { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; }
.ucp-profile-birthday > div { min-width: 0; }
.ucp-profile-options .ucp-setting-control input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.ucp-profile-options .ucp-setting-control select,
.ucp-profile-options .ucp-setting-control textarea {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 36px;
  padding: 7px 10px; border: 1px solid #d5dfeb; border-radius: 4px; background-color: #fff;
  color: #172b4d; font-family: inherit; font-size: 13px; line-height: 1.5;
}
.ucp-profile-options .ucp-setting-control .form-select { padding-right: 30px; }
.ucp-profile-options .ucp-setting-control textarea { min-height: 90px; resize: vertical; }
.ucp-profile-options .ucp-setting-control input:focus,
.ucp-profile-options .ucp-setting-control select:focus,
.ucp-profile-options .ucp-setting-control textarea:focus { outline: 2px solid #fc0000; outline-offset: 2px; }
.ucp-profile-options .ucp-options-notice a { color: #fc0000; }
.ucp-profile-options .ucp-setting-control label { color: #536b89; font-size: 13px; }
/* Grouped profile editor, matching the reference layout. */
.ucp-profile-design .ucp-options-header { margin-bottom: 16px; }
.ucp-profile-intro { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; margin-bottom: 16px; border-radius: 6px; background: #edf4ff; color: #435b7b; font-size: 13px; line-height: 1.6; }
.ucp-profile-intro > .bx { flex-shrink: 0; font-size: 28px; color: var(--forum-info-icon-color); }
.ucp-profile-section { padding: 18px; margin-bottom: 16px; border: 1px solid #e3eaf3; border-radius: 7px; }
.ucp-profile-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #e6edf4; }
#cp-main .ucp-profile-section-title { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 17px; font-weight: 700; color: #172b4d; text-transform: none; }
.ucp-profile-section-title .bx { font-size: 24px; }
.ucp-profile-section-header p { margin: 0; font-size: 12px; color: #7b8da8; }
.ucp-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; padding-top: 18px; }
.ucp-profile-grid-social, .ucp-profile-grid-gaming { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ucp-profile-design .ucp-profile-grid .ucp-setting-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 6px 14px; padding: 0; border: 0; min-width: 0; }
.ucp-profile-design .ucp-profile-grid .ucp-setting-icon { grid-column: 1; grid-row: 1 / 3; }
.ucp-profile-design .ucp-profile-grid .ucp-setting-text { grid-column: 2; }
.ucp-profile-design .ucp-profile-grid .ucp-setting-control { grid-column: 2; width: 100%; max-width: 100%; margin: 0; min-width: 0; }
.ucp-profile-field-wide { grid-column: 1 / -1; }
.ucp-profile-counter { margin-top: 4px; text-align: right; color: #7b8da8; font-size: 12px; }
.ucp-profile-design .ucp-options-footer { justify-content: flex-end; padding: 14px; background: transparent; border-radius: 6px; }
.ucp-profile-reset { color: #435b7b; background: #e3eaf2; border: 1px solid #e3eaf2; }
.ucp-profile-reset:hover { color: #172b4d; background: #d5dfeb; }
.ucp-profile-reset:focus-visible { outline: 2px solid #fc0000; outline-offset: 2px; }
.ucp-profile-design a { color: #fc0000; }
@media (max-width: 1199px) {
  .ucp-profile-grid-social, .ucp-profile-grid-gaming { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ucp-profile-section-header { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (max-width: 600px) {
  .ucp-profile-section { padding: 14px; }
  .ucp-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ucp-profile-design .ucp-options-footer { gap: 10px; }
  .ucp-profile-design .ucp-options-save { margin-left: 0; }
  .ucp-profile-design .ucp-options-footer button { min-height: 44px; }
}
/* Informational notice icons use the shared muted blue. */
.alert-info .bx-info-circle, .alert-info .bxs-info-circle, .alert-info .fa-info-circle { color: var(--forum-info-icon-color); }

/* Avatar editor: native phpBB upload and gallery drivers, side by side. */
.ucp-avatar-editor .card-body { padding: 22px; }
.ucp-avatar-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #e3eaf3; }
.ucp-avatar-help { color: #435b7b; background: #edf2f8; border: 1px solid #d5dfeb; }
.ucp-avatar-info { display: flex; align-items: center; gap: 16px; padding: 14px; margin-bottom: 16px; background: #edf4ff; border: 1px solid #dfebff; border-radius: 6px; color: #435b7b; font-size: 13px; line-height: 1.5; }
.ucp-avatar-info[hidden] { display: none; }
.ucp-avatar-info .bx { color: var(--forum-info-icon-color); font-size: 28px; flex-shrink: 0; }
.ucp-avatar-method { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: #536b89; }
.ucp-avatar-method select { max-width: 280px; }
.ucp-avatar-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ucp-avatar-panel { min-width: 0; padding: 18px; border: 1px solid #e3eaf3; border-radius: 7px; }
.ucp-avatar-panel.is-selected { border-color: #c4d0e0; }
.ucp-avatar-panel h4 { font-family: inherit; font-size: 17px; font-weight: 700; color: #172b4d; margin: 0 0 6px; }
.ucp-avatar-description { color: #7185a5; font-size: 12px; line-height: 1.6; }
.ucp-avatar-panel dl { margin: 12px 0; }
.ucp-avatar-panel dl > dt, .ucp-avatar-panel dl > dd { float: none; width: auto; margin: 0; }
.ucp-avatar-panel dl > dt { margin-bottom: 6px; color: #536b89; font-size: 13px; }
.ucp-avatar-panel input[type="url"], .ucp-avatar-panel select { max-width: 100%; border: 1px solid #d5dfeb; padding: 7px; border-radius: 4px; color: #172b4d; background: #fff; font-size: 13px; }
.ucp-avatar-dropzone { position: relative; padding: 26px 14px; text-align: center; border: 1px dashed #b9cbe1; border-radius: 6px; background: #f8fafd; color: #172b4d; font-size: 13px; }
.ucp-avatar-dropzone > .bx { font-size: 52px; color: #536b89; }
.ucp-avatar-dropzone.is-dragging { background: #edf4ff; border-color: #6485ad; }
.ucp-avatar-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ucp-avatar-editor #gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin-top: 14px; }
.ucp-avatar-editor #gallery label { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 6px; min-width: 0; border: 1px solid #e3eaf3; border-radius: 5px; cursor: pointer; }
.ucp-avatar-editor #gallery label:has(input:checked) { border-color: #fc0000; box-shadow: 0 0 0 1px #fc0000; }
.ucp-avatar-editor #gallery label:focus-within { outline: 2px solid #6485ad; }
.ucp-avatar-editor #gallery img { width: 76px; max-width: 100%; aspect-ratio: 1; height: auto; object-fit: contain; border-radius: 4px; }
.ucp-avatar-editor #gallery br { display: none; }
.ucp-avatar-editor input[type="radio"], .ucp-avatar-editor input[type="checkbox"] { accent-color: #fc0000; }
.ucp-avatar-current { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.ucp-avatar-preview-label { display: block; margin-bottom: 8px; font-size: 13px; color: #536b89; }
#avatar-preview img { width: 116px; height: 116px; object-fit: cover; border-radius: 50%; }
.ucp-avatar-tip { display: flex; gap: 12px; max-width: 440px; padding: 14px; background: #edf4ff; border-radius: 6px; color: #536b89; font-size: 12px; line-height: 1.6; }
.ucp-avatar-tip .bx { font-size: 26px; color: var(--forum-info-icon-color); }
.ucp-avatar-tip p { margin: 4px 0; }
.ucp-avatar-delete { display: flex; align-items: center; gap: 8px; color: #536b89; font-size: 13px; }
.ucp-avatar-status { color: #536b89; font-size: 13px; margin-top: 12px; }
.ucp-avatar-editor .ucp-options-footer { justify-content: flex-end; border-top: 1px solid #e3eaf3; margin-top: 18px; }
@media (max-width: 1100px) { .ucp-avatar-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
 .ucp-avatar-editor .card-body { padding: 16px; }
 .ucp-avatar-current { align-items: flex-start; flex-direction: column; }
 .ucp-avatar-method { align-items: flex-start; flex-direction: column; }
 .ucp-avatar-editor .ucp-options-footer { flex-wrap: wrap; }
}
/* Upload with preview on the left, OR divider, gallery on the right. */
.ucp-avatar-columns.has-avatar-choices { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px; }
.has-avatar-choices > .ucp-avatar-upload { grid-column: 1; grid-row: 1; }
.has-avatar-choices > .ucp-avatar-local { grid-column: 3; grid-row: 1; }
.has-avatar-choices > .ucp-avatar-panel:not(.ucp-avatar-upload):not(.ucp-avatar-local) { grid-column: 1 / -1; }
.ucp-avatar-separator { display: flex; flex-direction: column; align-items: center; gap: 0; grid-column: 2; grid-row: 1; padding: 32px 0; }
.ucp-avatar-separator::before, .ucp-avatar-separator::after { content: ''; width: 1px; background: #dce5ef; flex: 1; }
.ucp-avatar-separator span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #edf2f8; color: #536b89; font-size: 12px; font-weight: 700; }
.ucp-avatar-upload .ucp-avatar-current { gap: 16px; align-items: flex-start; }
.ucp-avatar-upload .ucp-avatar-tip { flex: 1; min-width: 0; }
.ucp-avatar-upload #avatar-preview img { width: 100px; height: 100px; }
@media (max-width: 1100px) {
  .ucp-avatar-columns.has-avatar-choices { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .has-avatar-choices > .ucp-avatar-upload, .has-avatar-choices > .ucp-avatar-local, .ucp-avatar-separator { grid-column: 1; grid-row: auto; }
  .ucp-avatar-separator { flex-direction: row; padding: 0 24px; }
  .ucp-avatar-separator::before, .ucp-avatar-separator::after { width: auto; height: 1px; }
}
@media (max-width: 600px) {
  .ucp-avatar-upload .ucp-avatar-current { align-items: flex-start; }
}
/* Center the preview caption and lift only the avatar preview. */
.ucp-avatar-upload .ucp-avatar-current > div:first-child { text-align: center; }

.ucp-avatar-dropzone:focus-within label[for="avatar_upload_file"] { outline: 2px solid #6485ad; outline-offset: 3px; }

/* Signature composer: existing phpBB toolbar, smilies and server preview. */
.ucp-signature-editor .card-body { padding: 22px; }
.ucp-signature-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ucp-signature-heading .btn { flex-shrink: 0; }
.ucp-signature-editor a { color: #fc0000; }
.ucp-signature-editor a.ucp-avatar-help { color: #435b7b; }
.ucp-signature-compose .fields1 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px 16px; margin: 0; padding: 0; min-width: 0; }
.ucp-signature-editor #format-buttons { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px; border: 1px solid #e3eaf3; border-radius: 6px; }
.ucp-signature-editor #format-buttons .button { background: #fff; border: 1px solid #d5dfeb; border-radius: 5px; color: #435b7b; min-height: 36px; }
.ucp-signature-editor #format-buttons select { max-width: 150px; }
.ucp-signature-editor #colour_palette { grid-column: 1; }
.ucp-signature-editor #message-box { grid-column: 1; grid-row: 2; width: auto; margin: 0; min-width: 0; }
.ucp-signature-editor #signature { box-sizing: border-box; width: 100%; height: 200px !important; min-height: 160px; padding: 12px; border: 1px solid #d5dfeb; border-radius: 6px; color: #172b4d; font: inherit; resize: vertical; }
.ucp-signature-editor #signature:focus { outline: 2px solid #6485ad; outline-offset: 2px; }
.ucp-signature-editor #smiley-box { grid-column: 2; grid-row: 1 / 3; float: none; width: auto; margin: 0; padding: 14px; border: 1px solid #e3eaf3; border-radius: 6px; background: #fafcfe; font-size: 13px; }
.ucp-signature-editor #smiley-box > strong { display: block; color: #172b4d; font-size: 16px; margin-bottom: 10px; }
.ucp-signature-editor #smiley-box > a:has(img) { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 2px; border: 1px solid #e6edf4; border-radius: 5px; background: #fff; }
.ucp-signature-editor #smiley-box .bbcode-status { color: #7b8da8; font-size: 12px; line-height: 1.5; margin-top: 12px; }
.ucp-signature-compose .error { grid-column: 1 / -1; color: #d60000; }
.ucp-signature-counter { margin: 6px 316px 0 0; text-align: right; color: #7185a5; font-size: 12px; }
.ucp-signature-counter.is-over-limit { color: #d60000; font-weight: 600; }
.ucp-signature-explain { margin-top: 6px; font-size: 13px; color: #536b89; }
.ucp-signature-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding-top: 18px; margin-top: 18px; border-top: 1px solid #e3eaf3; }
#cp-main .ucp-signature-section-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; border: 0; padding: 0; font-family: inherit; font-size: 17px; font-weight: 700; color: #172b4d; text-transform: none; }
.ucp-signature-section-title .bx { font-size: 24px; }
.ucp-signature-option, .ucp-signature-smilies-option { margin: 10px 0; color: #536b89; font-size: 13px; }
.ucp-signature-smilies-option[hidden] { display: none; }
.ucp-signature-editor input[type="checkbox"] { accent-color: #fc0000; }
.ucp-signature-smilies-toggle { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 12px; color: #172b4d; font-size: 13px; margin: 16px 0; }
.ucp-signature-switch { appearance: none; width: 44px; height: 24px; border: 0; border-radius: 20px; background: #dce2e9; position: relative; cursor: pointer; }
.ucp-signature-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.ucp-signature-switch:checked { background: #fc0000; }
.ucp-signature-switch:checked::after { left: 23px; }
.ucp-signature-switch:focus-visible { outline: 2px solid #6485ad; outline-offset: 3px; }
.ucp-signature-smilies-toggle p { grid-column: 2; margin: 0; font-size: 12px; color: #7b8da8; line-height: 1.5; }
.ucp-signature-tips { display: flex; gap: 12px; padding: 16px; background: #edf4ff; border-radius: 6px; font-size: 13px; color: #435b7b; }
.ucp-signature-tips > .bx { font-size: 26px; color: var(--forum-info-icon-color); }
.ucp-signature-tips ul { padding-left: 18px; margin: 8px 0 0; line-height: 1.6; }
.ucp-signature-preview { padding: 16px; margin-top: 18px; border: 1px solid #e3eaf3; border-radius: 6px; }
.ucp-signature-preview-content { padding: 14px; border: 1px solid #e3eaf3; border-left: 4px solid #fc0000; border-radius: 5px; background: #f8fafd; overflow-wrap: anywhere; }
.ucp-signature-preview-content .signature { float: none; width: auto; border: 0; padding: 0; margin: 0; }
.ucp-signature-preview-content img { max-width: 100%; height: auto; }
.ucp-signature-preview-empty { margin: 0; color: #7b8da8; font-size: 13px; }
.ucp-signature-editor .ucp-options-footer { justify-content: flex-end; }
@media (max-width: 1200px) {
 .ucp-signature-compose .fields1 { grid-template-columns: minmax(0, 1fr) 220px; }
 .ucp-signature-counter { margin-right: 236px; }
}
@media (max-width: 900px) {
 .ucp-signature-compose .fields1 { grid-template-columns: minmax(0, 1fr); }
 .ucp-signature-editor #smiley-box { grid-column: 1; grid-row: 3; }
 .ucp-signature-counter { margin-right: 0; }
 .ucp-signature-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
 .ucp-signature-editor .card-body { padding: 16px; }
 .ucp-signature-heading { align-items: flex-start; flex-direction: column; }
 .ucp-signature-editor .ucp-options-footer { flex-wrap: wrap; }
}
/* Keep the text column independent of the taller emoji panel. */
.ucp-signature-compose .fields1 { align-items: start; grid-template-rows: auto; }
.ucp-signature-text-column { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ucp-signature-editor #format-buttons { align-items: center; align-content: flex-start; align-self: start; width: 100%; box-sizing: border-box; }
.ucp-signature-editor #format-buttons .button { height: 36px; min-height: 36px; padding: 6px 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.ucp-signature-editor #format-buttons select { height: 36px; min-height: 36px; padding: 4px 8px; border: 1px solid #d5dfeb; border-radius: 5px; color: #435b7b; background: #fff; }
/* Additional media/product BBCode shortcuts are omitted on this editor. */
.ucp-signature-editor #format-buttons .button-secondary { display: none; }
.ucp-signature-editor #message-box { width: 100%; }
.ucp-signature-text-column .ucp-signature-counter { margin: -4px 0 0; }
.ucp-signature-text-column .ucp-signature-explain { margin: 0; }
.ucp-signature-editor #smiley-box { grid-row: 1; align-self: start; }
.ucp-signature-editor #smiley-box .sm-tw-favorites { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ucp-signature-editor #smiley-box .sm-tw-icon { display: flex; justify-content: center; align-items: center; min-width: 0; height: 36px; padding: 5px; border: 1px solid #e6edf4; background: #fff; border-radius: 5px; }
.ucp-signature-editor #smiley-box .sm-tw-open { border: 1px solid #d5dfeb; border-radius: 5px; background: #fff; color: #fc0000; padding: 7px 10px; white-space: normal; }
@media (max-width: 900px) {
 .ucp-signature-editor #smiley-box { grid-row: 2; }
}
/* Account details: email, password fields and advice in a shared card. */
.ucp-account-editor .card-body { padding: 22px; }
#cp-main .ucp-account-editor .ucp-signature-section-title { display: flex; align-items: center; gap: 12px; border: 0; margin: 0 0 18px; padding: 0; color: #172b4d; font-family: inherit; font-size: 18px; font-weight: 700; text-transform: none; }
.ucp-account-email { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid #e3eaf3; }
.ucp-account-editor .form-label { display: block; margin-bottom: 6px; color: #172b4d; font-size: 13px; font-weight: 600; }
.ucp-account-editor .form-control { min-height: 38px; border: 1px solid #d5dfeb; border-radius: 4px; color: #172b4d; font-size: 13px; }
.ucp-account-description { margin: 5px 0 0; color: #7b8da8; font-size: 12px; line-height: 1.5; }
.ucp-account-columns { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ucp-account-field { margin-bottom: 18px; }
.ucp-account-field:last-child { margin-bottom: 0; }
.ucp-password-input { position: relative; }
.ucp-password-input .form-control { padding-right: 44px; }
.ucp-password-reveal { position: absolute; top: 0; right: 0; width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #7185a5; cursor: pointer; }
.ucp-password-reveal .bx { font-size: 20px; }
.ucp-password-reveal:focus-visible { outline: 2px solid #6485ad; outline-offset: -3px; border-radius: 4px; }
.ucp-password-meter { height: 5px; margin-top: 8px; border-radius: 3px; background: #e3eaf3; overflow: hidden; }
#password-strength-bar { display: block; height: 100%; width: 0; background: #fc0000; transition: width .15s; }
#password-strength-bar[data-score="3"] { background: #6485ad; }
#password-strength-bar[data-score="4"] { background: #46886a; }
.ucp-account-editor .ucp-options-footer { border-top: 1px solid #e3eaf3; margin-top: 20px; padding-top: 16px; }
@media (max-width: 700px) { .ucp-account-columns { grid-template-columns: minmax(0, 1fr); } .ucp-account-editor .card-body { padding: 16px; } }
/* Consistent spacing across all UCP page headers. */
.ucp-page-header { margin: 6px 0 10px; }
.ucp-page-header h2.ucp-title { color: #000; margin: 0 0 2px !important; line-height: 1.05; }
.ucp-page-header .ucp-page-subtitle { margin: 0; line-height: 1.5; }

/* Contain both UCP columns and keep the footer gap consistent on every module. */
.ucp-layout { display: flow-root; }
.page-body:has(.ucp-layout) { margin-bottom: 12px; }
.ucp-layout #cp-main > :last-child,
.ucp-layout #cp-main > form:last-child > .ucp-card:last-child { margin-bottom: 0; }
/* Compact friends card at the bottom of the personal-area navigation. */
#cp-menu .ucp-friends-card { margin-top: 22px; padding: 12px; border: 1px solid #e5ecf5; border-radius: 7px; background: #f6f8fc; color: #435b7b; }
.ucp-friends-card-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.ucp-friends-card-heading > .bx { color: #fc0000; font-size: 21px; }
#cp-menu .ucp-friends-card-heading h3 { border: 0; padding: 0; margin: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: #29466d; text-transform: none; }
.ucp-friends-count { padding: 1px 7px; border-radius: 12px; background: #e2e9f3; color: #435b7b; font-size: 11px; font-weight: 600; }
#cp-menu .ucp-friends-heading-link { margin-left: auto; color: #6485ad; font-size: 19px; }
#cp-menu .ucp-friends-list { list-style: none; padding: 0; margin: 0; }
.ucp-friends-row { display: grid; grid-template-columns: 24px 7px minmax(0, 1fr) 23px 23px; align-items: center; gap: 7px; min-height: 28px; position: relative; }
#cp-menu .ucp-friends-avatar { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #e2e9f3; color: #6485ad; }
.ucp-friends-avatar img { width: 24px !important; height: 24px !important; object-fit: cover; border-radius: 50%; }
.ucp-friends-status { width: 7px; height: 7px; border-radius: 50%; background: #abb5c3; }
.ucp-friends-status.is-online { background: #29bd30; }
.ucp-friends-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#cp-menu .ucp-friends-name a { color: #435b7b; font-weight: 500; }
#cp-menu .ucp-friends-message { grid-column: 4; display: flex; justify-content: center; color: #6485ad; font-size: 17px; }
.ucp-friends-actions { grid-column: 5; position: relative; }
.ucp-friends-actions summary { display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; color: #6485ad; font-size: 18px; }
.ucp-friends-actions summary::-webkit-details-marker { display: none; }
.ucp-friends-actions-menu { position: absolute; right: 0; top: 24px; width: 155px; padding: 5px; border: 1px solid #dce5f0; border-radius: 5px; background: #fff; box-shadow: 0 4px 14px #172b4d18; z-index: 20; }
#cp-menu .ucp-friends-actions-menu a { display: block; padding: 7px 8px; color: #435b7b; font-size: 12px; }
#cp-menu .ucp-friends-actions-menu a:hover { background: #edf2f8; }
#cp-menu .ucp-friends-manage { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 8px; border-radius: 5px; background: #eaf0f8; color: #416c9e; font-size: 12px; font-weight: 500; }
.ucp-friends-manage .bx { font-size: 18px; }
.ucp-friends-card .ucp-friends-add { grid-column: 3 / -1; justify-self: end; margin: 2px 0 5px; }
.ucp-friends-card a:focus-visible, .ucp-friends-card summary:focus-visible { outline: 2px solid #6485ad; outline-offset: 2px; border-radius: 3px; }
/* Message colour key uses the same card treatment as the friends widget. */
#cp-menu .ucp-pm-legend-card { margin-top: 16px; padding: 12px; border: 1px solid #e5ecf5; border-radius: 7px; background: #f6f8fc; color: #435b7b; }
#cp-menu .ucp-pm-legend-card h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 0; border: 0; color: #29466d; font-family: inherit; font-size: 13px; font-weight: 700; text-transform: none; }
.ucp-pm-legend-card h3 .bx { color: #fc0000; font-size: 21px; flex-shrink: 0; }
#cp-menu .ucp-pm-legend-list { margin: 0; padding: 0; }
#cp-menu .ucp-pm-legend-list .pm-legend { margin: 0 0 7px; padding: 2px 0 2px 9px; border-left-width: 7px; border-left-style: solid; border-right-width: 0; color: #435b7b; font-size: 12px; line-height: 1.45; }
#cp-menu .ucp-pm-legend-list .pm-legend:last-child { margin-bottom: 0; }