/*
|--------------------------------------------------------------------------
| e-CMS Public Website Accent System
|--------------------------------------------------------------------------
| Loaded by the public header only. The dashboard/control panel does not
| load this file; it reads the same accent cookie and maps the selected preset
| to its own light-mode --cp-accent-* variables.
|
| The selected preset is stored in the ecms_site_accent browser cookie.
| Blue is the default. Green preserves the original e-CMS public palette.
|--------------------------------------------------------------------------
*/

html[data-site-accent="blue"] {
  --site-accent: #2563eb;
  --site-accent-rgb: 37, 99, 235;
  --site-accent-darker: #172554;
  --site-accent-dark: #1e40af;
  --site-accent-mid: #1d4ed8;
  --site-accent-mid-rgb: 29, 78, 216;
  --site-accent-bright: #3b82f6;
  --site-accent-bright-rgb: 59, 130, 246;
  --site-accent-soft: #93c5fd;
  --site-accent-on: #ffffff;
}

html[data-site-accent="green"] {
  --site-accent: #198747;
  --site-accent-rgb: 25, 135, 71;
  --site-accent-darker: #0f5132;
  --site-accent-dark: #146c43;
  --site-accent-mid: #23843d;
  --site-accent-mid-rgb: 35, 132, 61;
  --site-accent-bright: #56b73e;
  --site-accent-bright-rgb: 86, 183, 62;
  --site-accent-soft: #8ff0b7;
  --site-accent-on: #ffffff;
}

html[data-site-accent="purple"] {
  --site-accent: #7c3aed;
  --site-accent-rgb: 124, 58, 237;
  --site-accent-darker: #3b0764;
  --site-accent-dark: #5b21b6;
  --site-accent-mid: #6d28d9;
  --site-accent-mid-rgb: 109, 40, 217;
  --site-accent-bright: #8b5cf6;
  --site-accent-bright-rgb: 139, 92, 246;
  --site-accent-soft: #c4b5fd;
  --site-accent-on: #ffffff;
}

html[data-site-accent="teal"] {
  --site-accent: #0f766e;
  --site-accent-rgb: 15, 118, 110;
  --site-accent-darker: #042f2e;
  --site-accent-dark: #115e59;
  --site-accent-mid: #0f766e;
  --site-accent-mid-rgb: 15, 118, 110;
  --site-accent-bright: #0d9488;
  --site-accent-bright-rgb: 13, 148, 136;
  --site-accent-soft: #99f6e4;
  --site-accent-on: #ffffff;
}

html[data-site-accent="orange"] {
  --site-accent: #c2410c;
  --site-accent-rgb: 194, 65, 12;
  --site-accent-darker: #7c2d12;
  --site-accent-dark: #9a3412;
  --site-accent-mid: #c2410c;
  --site-accent-mid-rgb: 194, 65, 12;
  --site-accent-bright: #ea580c;
  --site-accent-bright-rgb: 234, 88, 12;
  --site-accent-soft: #fdba74;
  --site-accent-on: #ffffff;
}

html[data-site-accent="red"] {
  --site-accent: #dc2626;
  --site-accent-rgb: 220, 38, 38;
  --site-accent-darker: #7f1d1d;
  --site-accent-dark: #991b1b;
  --site-accent-mid: #b91c1c;
  --site-accent-mid-rgb: 185, 28, 28;
  --site-accent-bright: #ef4444;
  --site-accent-bright-rgb: 239, 68, 68;
  --site-accent-soft: #fca5a5;
  --site-accent-on: #ffffff;
}

html[data-site-accent="pink"] {
  --site-accent: #be185d;
  --site-accent-rgb: 190, 24, 93;
  --site-accent-darker: #831843;
  --site-accent-dark: #9d174d;
  --site-accent-mid: #be185d;
  --site-accent-mid-rgb: 190, 24, 93;
  --site-accent-bright: #db2777;
  --site-accent-bright-rgb: 219, 39, 119;
  --site-accent-soft: #f9a8d4;
  --site-accent-on: #ffffff;
}

html[data-site-accent="gold"] {
  --site-accent: #d4a017;
  --site-accent-rgb: 212, 160, 23;
  --site-accent-darker: #713f12;
  --site-accent-dark: #a16207;
  --site-accent-mid: #ca8a04;
  --site-accent-mid-rgb: 202, 138, 4;
  --site-accent-bright: #eab308;
  --site-accent-bright-rgb: 234, 179, 8;
  --site-accent-soft: #fde68a;
  --site-accent-on: #111827;
}

/* Shared public aliases and accent-driven component variables. */
html[data-site-accent] {
  --accent: var(--site-accent);
  --accent-rgb: var(--site-accent-rgb);
  --primary-color: var(--site-accent-bright);
  --site-accent-button-bg: linear-gradient(135deg, var(--site-accent-dark), var(--site-accent));
  --site-accent-button-hover-bg: linear-gradient(135deg, var(--site-accent-darker), var(--site-accent-dark));
  --files-button-bg: var(--site-accent-button-bg);
  --files-button-hover-bg: var(--site-accent-button-hover-bg);
  --pagination-active-bg: var(--site-accent-button-bg);
  --pagination-active-color: var(--site-accent-on);
  --pagination-active-shadow: 0 8px 18px rgba(var(--site-accent-rgb), .22);

  /* Semantic green remains green when the selected brand accent is not green. */
  --ecms-success: #198754;
  --ecms-success-rgb: 25, 135, 84;

  /* Subtle public-card corner detail. Theme modes tune the final opacity below. */
  --site-card-honeycomb-opacity: .072;
  --site-card-corner-glow-opacity: .052;
  --site-card-honeycomb-width: 238px;
  --site-card-honeycomb-height: 164px;
}

/* Gold needs a bright hover gradient so its dark button text remains readable. */
html[data-site-accent="gold"] {
  --site-accent-button-bg: linear-gradient(135deg, #d4a017, #eab308);
  --site-accent-button-hover-bg: linear-gradient(135deg, #b77905, #d4a017);
}

/*
|--------------------------------------------------------------------------
| Light mode accent coverage
|--------------------------------------------------------------------------
| The original light theme intentionally used slate for many branded pieces.
| These public-only overrides connect those pieces to the selected preset
| without changing the shared theme file used by the dashboard.
|--------------------------------------------------------------------------
*/
html[data-site-accent][data-color-mode="light"] {
  --accent-text: var(--site-accent-dark);
  --ecms-success-text: #146c43;
  --site-card-honeycomb-opacity: .038;
  --site-card-corner-glow-opacity: .028;

  --audio-dj-color: var(--site-accent-dark);

  --files-section-accent: linear-gradient(90deg, rgba(var(--site-accent-mid-rgb), .88), rgba(var(--site-accent-bright-rgb), .18), transparent);
  --files-kicker-color: var(--site-accent-dark);
  --files-section-icon-color: var(--site-accent-dark);
  --files-section-icon-bg: rgba(var(--site-accent-rgb), .085);
  --files-section-icon-border: rgba(var(--site-accent-rgb), .20);
  --files-card-hover-border: rgba(var(--site-accent-rgb), .28);
  --files-card-hover-shadow: 0 16px 30px rgba(17, 24, 39, .12), 0 0 0 1px rgba(var(--site-accent-rgb), .06);
  --files-card-accent: linear-gradient(90deg, rgba(var(--site-accent-mid-rgb), .90), rgba(var(--site-accent-bright-rgb), .18), transparent);
  --files-meta-icon-color: var(--site-accent-dark);

  --files-sidebar-accent: linear-gradient(90deg, rgba(var(--site-accent-mid-rgb), .88), rgba(var(--site-accent-bright-rgb), .18), transparent);
  --files-sidebar-kicker: var(--site-accent-dark);
  --files-sidebar-row-hover-bg: rgba(var(--site-accent-rgb), .075);
  --files-sidebar-row-hover-border: rgba(var(--site-accent-rgb), .24);
  --files-sidebar-icon-color: var(--site-accent-dark);
  --files-sidebar-badge-bg: rgba(var(--site-accent-rgb), .09);
  --files-sidebar-badge-color: var(--site-accent-dark);
  --files-sidebar-badge-border: rgba(var(--site-accent-rgb), .22);

  --pagination-hover-color: var(--site-accent-dark);
  --pagination-hover-bg: rgba(var(--site-accent-rgb), .12);
  --pagination-hover-shadow: inset 0 0 0 1px rgba(var(--site-accent-rgb), .26);

  --footer-a-hover-color: var(--site-accent-dark);
  --footer-accent: var(--site-accent-dark);
  --footer-orb-bg: radial-gradient(circle, rgba(var(--site-accent-rgb), .20), rgba(var(--site-accent-rgb), 0) 68%);

  --side-menu-topline: linear-gradient(90deg, rgba(var(--site-accent-mid-rgb), .64), rgba(var(--site-accent-bright-rgb), .13), transparent);
  --side-menu-hover-bg: rgba(var(--site-accent-rgb), .08);
  --side-menu-badge: var(--site-accent-dark);
  --side-menu-badge-bg: rgba(var(--site-accent-rgb), .08);
  --side-menu-badge-border: rgba(var(--site-accent-rgb), .20);
  --side-menu-icon-bg: rgba(var(--site-accent-rgb), .10);
  --side-menu-icon-color: var(--site-accent-dark);
  --side-menu-action-bg: rgba(var(--site-accent-rgb), .07);
  --side-menu-action-border: rgba(var(--site-accent-rgb), .16);
  --side-menu-action-color: var(--site-accent-dark);
  --side-menu-action-hover-bg: rgba(var(--site-accent-rgb), .14);
  --side-menu-action-hover-border: rgba(var(--site-accent-rgb), .30);
  --side-menu-focus-shadow: rgba(var(--site-accent-rgb), .14);
  --side-menu-button-bg: var(--site-accent-dark);
  --side-menu-button-border: rgba(var(--site-accent-rgb), .32);
  --side-menu-button-color: var(--site-accent-on);
  --side-menu-button-hover-bg: var(--site-accent-darker);
  --side-menu-button-hover-color: var(--site-accent-on);

  --thread-page-post-user-username: var(--site-accent-dark);
  --post-content-blockquote-border-left: var(--site-accent-dark);
  --post-content-blockquote-strong-color: var(--site-accent-darker);

  --latest-posts-accent-bar: linear-gradient(90deg, var(--site-accent-dark), rgba(var(--site-accent-rgb), .12));
  --latest-posts-icon-color: var(--site-accent-dark);
  --latest-posts-icon-bg: rgba(var(--site-accent-rgb), .10);
  --latest-posts-icon-border: rgba(var(--site-accent-rgb), .22);
  --latest-posts-all-color: var(--site-accent-dark);
  --latest-posts-all-bg: rgba(var(--site-accent-rgb), .08);
  --latest-posts-all-border: rgba(var(--site-accent-rgb), .20);
  --latest-posts-all-hover-color: var(--site-accent-on);
  --latest-posts-all-hover-bg: var(--site-accent-dark);
  --latest-posts-item-hover-border: rgba(var(--site-accent-rgb), .26);
  --latest-posts-avatar-border: rgba(var(--site-accent-rgb), .30);
  --latest-posts-title-hover-color: var(--site-accent-dark);

  --profile-tabs-active-color: var(--site-accent-dark);
  --profile-tabs-active-border: var(--site-accent) var(--site-accent) transparent var(--site-accent);

  --posts-activity-hover: var(--site-accent-dark);
  --posts-activity-title-hover-color: var(--site-accent-dark);

  --chat-holder-primary-dark: var(--site-accent-dark);
  --chat-holder-input-focus-shadow: 0 0 0 2px rgba(var(--site-accent-rgb), .20);
  --chat-holder-room-active-bg: rgba(var(--site-accent-rgb), .12);
  --chat-holder-msg-hover-border: rgba(var(--site-accent-rgb), .28);
  --chat-holder-system-bg: rgba(var(--site-accent-rgb), .08);
  --chat-holder-system-border: rgba(var(--site-accent-rgb), .22);
  --chat-holder-system-text: var(--site-accent-dark);
  --chat-holder-link: var(--site-accent-dark);
  --chat-holder-link-hover: var(--site-accent-darker);

  --gallery-accent-bar: linear-gradient(90deg, var(--site-accent-dark), rgba(var(--site-accent-rgb), .12), transparent);
  --gallery-kicker-color: var(--site-accent-dark);
  --gallery-icon-color: var(--site-accent-dark);
  --gallery-icon-bg: rgba(var(--site-accent-rgb), .10);
  --gallery-icon-border: rgba(var(--site-accent-rgb), .22);
  --gallery-pill-color: var(--site-accent-dark);
  --gallery-pill-bg: rgba(var(--site-accent-rgb), .08);
  --gallery-pill-border: rgba(var(--site-accent-rgb), .20);
  --gallery-card-hover-border: rgba(var(--site-accent-rgb), .26);
  --gallery-card-hover-shadow: 0 16px 30px rgba(17, 24, 39, .12), 0 0 0 1px rgba(var(--site-accent-rgb), .06);
  --gallery-card-accent: linear-gradient(90deg, rgba(var(--site-accent-mid-rgb), .90), rgba(var(--site-accent-bright-rgb), .18), transparent);
  --gallery-title-hover-color: var(--site-accent-dark);
  --gallery-detail-btn-bg: rgba(var(--site-accent-rgb), .08);
  --gallery-detail-btn-border: rgba(var(--site-accent-rgb), .22);
  --gallery-detail-btn-color: var(--site-accent-dark);
  --gallery-detail-btn-hover-bg: var(--site-accent-dark);
  --gallery-detail-btn-hover-border: var(--site-accent-dark);
  --gallery-detail-btn-hover-color: var(--site-accent-on);
}

html[data-site-accent][data-color-mode="dark"] {
  --accent-text: var(--site-accent-soft);
  --ecms-success-text: #8ff0b7;
  --site-card-honeycomb-opacity: .078;
  --site-card-corner-glow-opacity: .058;
}

/* Public primary actions follow the selected website accent. Status alerts,
   .bg-success, and other semantic Bootstrap success elements remain green. */
html[data-site-accent] .btn-primary:not(.paypal-action-button),
html[data-site-accent] .btn-success:not(.badge-online) {
  --bs-btn-color: var(--site-accent-on);
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-accent-on);
  --bs-btn-hover-bg: var(--site-accent-dark);
  --bs-btn-hover-border-color: var(--site-accent-dark);
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
  --bs-btn-active-color: var(--site-accent-on);
  --bs-btn-active-bg: var(--site-accent-darker);
  --bs-btn-active-border-color: var(--site-accent-darker);
  background: var(--site-accent-button-bg) !important;
  border-color: var(--site-accent) !important;
  color: var(--site-accent-on) !important;
}

html[data-site-accent] .btn-primary:not(.paypal-action-button):hover,
html[data-site-accent] .btn-primary:not(.paypal-action-button):focus,
html[data-site-accent] .btn-primary:not(.paypal-action-button):active,
html[data-site-accent] .btn-success:not(.badge-online):hover,
html[data-site-accent] .btn-success:not(.badge-online):focus,
html[data-site-accent] .btn-success:not(.badge-online):active {
  background: var(--site-accent-button-hover-bg) !important;
  border-color: var(--site-accent-dark) !important;
  color: var(--site-accent-on) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--site-accent-rgb), .20) !important;
}

html[data-site-accent] .btn-outline-primary,
html[data-site-accent] .btn-outline-success,
html[data-site-accent] .btn-outline-green {
  border-color: var(--site-accent) !important;
  color: var(--accent-text) !important;
  background: transparent !important;
}

html[data-site-accent] .btn-outline-primary:hover,
html[data-site-accent] .btn-outline-primary:focus,
html[data-site-accent] .btn-outline-success:hover,
html[data-site-accent] .btn-outline-success:focus,
html[data-site-accent] .btn-outline-green:hover,
html[data-site-accent] .btn-outline-green:focus {
  border-color: var(--site-accent-dark) !important;
  background: rgba(var(--site-accent-rgb), .12) !important;
  color: var(--accent-text) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--site-accent-rgb), .16) !important;
}

/* Approval, acceptance, and unblock controls carry a real success meaning. */
html[data-site-accent] .btn-success.btn-semantic-success {
  background: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

html[data-site-accent] .btn-success.btn-semantic-success:hover,
html[data-site-accent] .btn-success.btn-semantic-success:focus,
html[data-site-accent] .btn-success.btn-semantic-success:active {
  background: #146c43 !important;
  border-color: #146c43 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ecms-success-rgb), .20) !important;
}

html[data-site-accent] .btn-outline-success.btn-semantic-success {
  background: transparent !important;
  border-color: var(--ecms-success) !important;
  color: var(--ecms-success-text) !important;
}

html[data-site-accent] .btn-outline-success.btn-semantic-success:hover,
html[data-site-accent] .btn-outline-success.btn-semantic-success:focus {
  background: rgba(var(--ecms-success-rgb), .14) !important;
  border-color: var(--ecms-success) !important;
  color: var(--ecms-success-text) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--ecms-success-rgb), .18) !important;
}

/* Semantic state protection. */
html[data-site-accent] .green,
html[data-site-accent] .polls-status-open {
  color: var(--ecms-success-text) !important;
}

html[data-site-accent] .warninglabel.green i,
html[data-site-accent] .f-ava .dot.on,
html[data-site-accent] .chat-status-dot.is-ok {
  color: var(--ecms-success-text) !important;
  background-color: var(--ecms-success) !important;
}

html[data-site-accent] .warninglabel.green i {
  background-color: transparent !important;
}

html[data-site-accent] .btn-icon.success {
  color: var(--ecms-success-text) !important;
  border-color: rgba(var(--ecms-success-rgb), .48) !important;
  background: rgba(var(--ecms-success-rgb), .15) !important;
}

html[data-site-accent] .text-accent {
  color: var(--accent-text) !important;
}

/* Remaining public components that previously contained fixed green branding. */
html[data-site-accent] .friends-modern-page .friends-tabs .nav-link:hover,
html[data-site-accent] .friends-modern-page .friends-tabs .nav-link.active {
  border-color: rgba(var(--site-accent-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--site-accent-rgb), .16), var(--files-card-bg));
}

html[data-site-accent] .friends-modern-page .friends-tabs .badge {
  background: rgba(var(--site-accent-rgb), .16) !important;
}

html[data-site-accent] .friends-modern-page .f-empty i {
  background: rgba(var(--site-accent-rgb), .10);
  border-color: rgba(var(--site-accent-rgb), .20);
}

html[data-site-accent] .messages-page .dm-chat {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--site-accent-rgb), .08), transparent 30%),
    var(--dm-bg, var(--normalbg));
}

html[data-site-accent] .messages-page .dm-input:focus {
  box-shadow: 0 0 0 .18rem rgba(var(--site-accent-rgb), .12), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/*
|--------------------------------------------------------------------------
| Accent-aware public card corner detail
|--------------------------------------------------------------------------
| A restrained honeycomb fragment sits in the bottom-right corner of major
| public content holders. It is deliberately limited to primary cards rather
| than every nested control, badge, or alert. The dashboard never loads this
| stylesheet, so the effect remains public-site only.
|--------------------------------------------------------------------------
*/
html[data-site-accent] :where(
  .blog-post-card,
  .blog-post-single-modern,
  .side-menu,
  .latest-posts,
  .image-slider-holder,
  .file-card,
  .gallery-picture-modern,
  .gallery-picture-content-card,
  .about-panel,
  .about-sidebar-card,
  .auth-main-card,
  .utility-content-card,
  .forum-post-hero,
  .forum-post-card,
  .forum-reply-panel
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html[data-site-accent] :where(
  .blog-post-card,
  .blog-post-single-modern,
  .side-menu,
  .latest-posts,
  .image-slider-holder,
  .file-card,
  .gallery-picture-modern,
  .gallery-picture-content-card,
  .about-panel,
  .about-sidebar-card,
  .auth-main-card,
  .utility-content-card,
  .forum-post-hero,
  .forum-post-card,
  .forum-reply-panel
) > * {
  position: relative;
  z-index: 1;
}

html[data-site-accent] :where(
  .blog-post-card,
  .blog-post-single-modern,
  .side-menu,
  .latest-posts,
  .image-slider-holder,
  .file-card,
  .gallery-picture-modern,
  .gallery-picture-content-card,
  .about-panel,
  .about-sidebar-card,
  .auth-main-card,
  .utility-content-card,
  .forum-post-hero,
  .forum-post-card,
  .forum-reply-panel
)::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -38px;
  z-index: 0;
  width: var(--site-card-honeycomb-width);
  height: var(--site-card-honeycomb-height);
  pointer-events: none;
  background-image:
    radial-gradient(
      ellipse at 100% 100%,
      rgba(var(--site-accent-rgb), var(--site-card-corner-glow-opacity)) 0%,
      rgba(var(--site-accent-rgb), var(--site-card-corner-glow-opacity)) 30%,
      transparent 72%
    ),
    linear-gradient(30deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 12%,
      transparent 12.5%, transparent 87%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 87.5%),
    linear-gradient(150deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 12%,
      transparent 12.5%, transparent 87%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 87.5%),
    linear-gradient(30deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 12%,
      transparent 12.5%, transparent 87%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 87.5%),
    linear-gradient(150deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 12%,
      transparent 12.5%, transparent 87%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 87.5%),
    linear-gradient(60deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 25%,
      transparent 25.5%, transparent 75%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 75%),
    linear-gradient(60deg,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 25%,
      transparent 25.5%, transparent 75%,
      rgba(var(--site-accent-rgb), var(--site-card-honeycomb-opacity)) 75%);
  background-position:
    0 0,
    0 0,
    0 0,
    14px 24px,
    14px 24px,
    0 0,
    14px 24px;
  background-size:
    auto,
    28px 49px,
    28px 49px,
    28px 49px,
    28px 49px,
    28px 49px,
    28px 49px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  -webkit-mask-image: radial-gradient(
    ellipse at 100% 100%,
    #000 0%,
    rgba(0, 0, 0, .96) 28%,
    rgba(0, 0, 0, .58) 52%,
    rgba(0, 0, 0, .16) 72%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse at 100% 100%,
    #000 0%,
    rgba(0, 0, 0, .96) 28%,
    rgba(0, 0, 0, .58) 52%,
    rgba(0, 0, 0, .16) 72%,
    transparent 88%
  );
}

/* Smaller cards receive a reduced fragment so the decoration never dominates. */
html[data-site-accent] :where(.file-card, .utility-content-card)::after {
  right: -42px;
  bottom: -46px;
  width: 196px;
  height: 138px;
}

@media (max-width: 575.98px) {
  html[data-site-accent] :where(
    .blog-post-card,
    .blog-post-single-modern,
    .side-menu,
    .latest-posts,
    .image-slider-holder,
    .file-card,
    .gallery-picture-modern,
    .gallery-picture-content-card,
    .about-panel,
    .about-sidebar-card,
    .auth-main-card,
    .utility-content-card,
    .forum-post-hero,
    .forum-post-card,
    .forum-reply-panel
  )::after {
    right: -48px;
    bottom: -48px;
    width: 190px;
    height: 132px;
  }
}

/*
|--------------------------------------------------------------------------
| Navigation accent picker
|--------------------------------------------------------------------------
*/
.navbar-mainmenu .navbar-nav-utility .accent-picker-nav > .nav-link {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0 !important;
  border-radius: 999px !important;
}

.navbar-mainmenu .accent-picker-nav > .nav-link .ecms-nav-icon {
  color: var(--site-accent-bright);
  filter: drop-shadow(0 0 8px rgba(var(--site-accent-rgb), .24));
}

.navbar-mainmenu .accent-picker-nav > .nav-link:hover,
.navbar-mainmenu .accent-picker-nav > .nav-link:focus,
.navbar-mainmenu .accent-picker-nav > .nav-link.show {
  color: var(--main-nav-icon-hover-color, var(--accent)) !important;
  background: var(--main-nav-utility-hover-bg, rgba(var(--site-accent-rgb), .10)) !important;
}

.navbar-mainmenu .site-accent-menu {
  width: min(284px, calc(100vw - 24px));
  min-width: 284px;
  padding: 0 !important;
  overflow: hidden;
}

.site-accent-menu-heading {
  display: grid;
  gap: 2px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--main-nav-dropdown-border, rgba(255,255,255,.10));
}

.site-accent-menu-heading strong {
  color: var(--main-nav-dropdown-link-hover, var(--normaltext));
  font-size: .92rem;
  font-weight: 800;
}

.site-accent-menu-heading span {
  color: var(--text-muted, #7c858e);
  font-size: .74rem;
  font-weight: 600;
}

.site-accent-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
}

.navbar-mainmenu .site-accent-menu .site-accent-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--main-nav-dropdown-link, var(--normaltext));
  font-size: .82rem;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.navbar-mainmenu .site-accent-menu .site-accent-option:hover,
.navbar-mainmenu .site-accent-menu .site-accent-option:focus {
  border-color: rgba(var(--site-accent-rgb), .20);
  background: var(--main-nav-dropdown-link-hover-bg, rgba(var(--site-accent-rgb), .10));
  color: var(--main-nav-dropdown-link-hover, var(--normalhover));
  outline: none;
}

.navbar-mainmenu .site-accent-menu .site-accent-option.is-active {
  border-color: rgba(var(--site-accent-rgb), .34);
  background: rgba(var(--site-accent-rgb), .12);
  color: var(--main-nav-dropdown-link-hover, var(--normalhover));
}

.site-accent-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.64);
  border-radius: 999px;
  background: var(--site-accent-swatch);
  box-shadow: 0 0 0 1px rgba(15,23,42,.22), 0 2px 5px rgba(0,0,0,.16);
}

html[data-color-mode="light"] .site-accent-swatch {
  border-color: rgba(255,255,255,.92);
}

.site-accent-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-accent-option-check {
  color: var(--site-accent-bright);
  font-size: .72rem;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .15s ease, transform .15s ease;
}

.site-accent-option.is-active .site-accent-option-check {
  opacity: 1;
  transform: scale(1);
}

.site-accent-menu-footer {
  padding: 9px 10px 10px;
  border-top: 1px solid var(--main-nav-dropdown-border, rgba(255,255,255,.10));
}

.site-accent-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--main-nav-dropdown-border, rgba(255,255,255,.10));
  border-radius: 9px;
  background: transparent;
  color: var(--main-nav-dropdown-link, var(--normaltext));
  font-size: .78rem;
  font-weight: 750;
}

.site-accent-reset:hover,
.site-accent-reset:focus {
  border-color: rgba(var(--site-accent-rgb), .32);
  background: rgba(var(--site-accent-rgb), .10);
  color: var(--main-nav-dropdown-link-hover, var(--normalhover));
  outline: none;
}

@media (max-width: 991.98px) {
  .navbar-mainmenu .navbar-nav-utility .accent-picker-nav {
    width: 100%;
  }

  .navbar-mainmenu .navbar-nav-utility .accent-picker-nav > .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 42px;
    padding: .62rem .75rem !important;
    border-radius: 10px !important;
  }

  .navbar-mainmenu .navbar-nav-utility .accent-picker-nav .ecms-nav-label {
    display: inline-flex !important;
  }

  .navbar-mainmenu .site-accent-menu {
    position: static !important;
    width: 100%;
    min-width: 0;
    margin: 4px 0 8px !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .site-accent-options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-accent-option-check {
    transition: none;
  }
}