/* ==========================================================================
   BandRack BACK-OFFICE (BO) - CSS STARTER (CSSS) COMPLIANT STYLESHEET
   Design System d'administration découplé du thème public
   ========================================================================== */

:root {
  /* Standard CSSS Core Tokens (Back-Office) */
  --clr-bg: #181818;
  --clr-text-default: #f8fafc;
  --clr-text-muted: #94a3b8;
  --clr-primary: #b1c02c;
  --clr-secondary: #c5e1ea;
  --clr-danger: #ef4444;
  --clr-success: #309939;
  --clr-warning: #f59e0b;
  --clr-border: #1f2020;
  --clr-border-subtle: #1e293b;
  --clr-surface: #292929;
  --clr-surface-alt: #1e1e1c;
  --clr-surface-hover: #353630;
  --clr-text-on-primary: var(--clr-dark, #000000);
  --clr-on-primary: var(--clr-dark, #000000);

  /* Dynamically generated primary variations aligned with --clr-primary */
  --clr-primary-light: color-mix(in srgb, var(--clr-primary) 15%, transparent);
  --clr-primary-hover: color-mix(in srgb, var(--clr-primary) 85%, #ffffff);

  /* Back-office semantic aliases & surfaces mapped to CSSS core tokens */
  --bo-bg: var(--clr-bg);
  --bo-text: var(--clr-text-default);
  --bo-surface: var(--clr-surface);
  --bo-surface-alt: var(--clr-surface-alt);
  --bo-surface-hover: var(--clr-surface-hover);
  --bo-border: var(--clr-border);
  --bo-border-subtle: var(--clr-border-subtle);
  --bo-primary: var(--clr-primary);
  --bo-primary-hover: var(--clr-primary-hover);
  --bo-primary-light: var(--clr-primary-light);
  --bo-accent: #e11d48;
  --bo-accent-hover: #be123c;
  --bo-text-muted: var(--clr-text-muted);
  --bo-danger: var(--clr-danger);
  --bo-danger-hover: #dc2626;
  --bo-success: var(--clr-success);
  --bo-warning: var(--clr-warning);

  --bo-radius-sm: 0.375rem;
  --bo-radius-md: 0.5rem;
  --bo-radius-lg: 0.75rem;
  --bo-radius-full: 9999px;

  /* CSSS .nav Component Tokens (Vertical Sidebar Navigation) */
  --nav-display: flex;
  --nav-gap: 0.25rem;
  --nav-padding: 0;
  --nav-margin-block: 0;
  --nav-bg: transparent;

  /* Nav Links & Main Navigation Items */
  --nav-a-text-decoration: none;
  --nav-a-active-text-decoration: none;
  --nav-link-display: flex;
  --nav-link-align-items: center;
  --nav-link-justify-content: flex-start;
  --nav-link-gap: 0.6rem;
  --nav-link-padding: 0.65rem 0.85rem;
  --nav-link-radius: var(--bo-radius-md, 0.5rem);
  --nav-link-color: var(--clr-text-muted);
  --nav-link-color-hover: var(--clr-text-default);
  --nav-link-color-active: var(--clr-text-default);
  --nav-link-bg: transparent;
  --nav-link-bg-hover: var(--clr-surface-alt);
  --nav-link-bg-active: var(--clr-primary-light);
  --nav-link-font-size: 0.875rem;
  --nav-link-font-weight: 600;
  --nav-link-indicator-width: 3px;
  --nav-link-indicator-color: var(--clr-primary);
  --nav-link-active-indicator-width: var(--nav-link-indicator-width, 3px);
  --nav-link-active-indicator-color: var(--nav-link-indicator-color, var(--clr-primary));

  /* Nav Submenus & Subitems */
  --nav-submenu-gap: 0.15rem;
  --nav-submenu-padding-left: 0.65rem;
  --nav-submenu-margin-left: 1.15rem;
  --nav-submenu-border-clr: var(--clr-border);
  --nav-submenu-border-width: 2px;
  --nav-subitem-display: flex;
  --nav-subitem-align-items: center;
  --nav-subitem-gap: 0.55rem;
  --nav-subitem-padding: 0.35rem 0.65rem;
  --nav-subitem-radius: var(--bo-radius-sm, 0.375rem);
  --nav-subitem-color: var(--clr-text-muted);
  --nav-subitem-color-hover: var(--clr-text-default);
  --nav-subitem-color-active: var(--clr-primary);
  --nav-subitem-bg: transparent;
  --nav-subitem-bg-hover: var(--clr-surface-hover);
  --nav-subitem-bg-active: var(--clr-primary-light);
  --nav-subitem-font-size: 0.8rem;
  --nav-subitem-font-weight: 500;
  --nav-subitem-font-weight-active: 600;

  /* Native CSS Starter v1.31.0 Badge Component Tokens */
  --badge-radius: var(--bo-radius-full, 9999px);
  --badge-font-weight: 600;
  --badge-gap: 0.35rem;
  --badge-outline-color-mix: 20%;
  --badge-subtle-color-mix: 18%;

  /* Nav Badges */
  --nav-badge-bg: var(--clr-surface-alt);
  --nav-badge-color: var(--clr-text-muted);
  --nav-badge-bg-active: var(--clr-primary);
  --nav-badge-color-active: var(--clr-text-on-primary, #000000);

  --admin-topbar-height: 58px;
  --block-header-sticky-top: var(--admin-topbar-height, 58px);

  /* Native CSS Starter v1.33.0 Toolbar / App-Bar Component Tokens */
  --toolbar-bg: var(--header-bg, var(--bo-surface));
  --toolbar-bg-translucent: rgba(41, 41, 41, 0.92);
  --toolbar-border-clr: var(--bo-border);
  --toolbar-border-width: 1px;
  --toolbar-backdrop-filter: blur(12px);
  --toolbar-color: var(--clr-text-default);
  --toolbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --toolbar-radius: var(--bo-radius-md);

  /* Unified Bar & Header Aliases (CSSS .toolbar / .app-bar compliant) */
  --bar-bg: var(--toolbar-bg);
  --bar-bg-translucent: var(--toolbar-bg-translucent);
  --bar-border-clr: var(--toolbar-border-clr);
  --bar-border-width: var(--toolbar-border-width);
  --bar-border: var(--toolbar-border-width) solid var(--toolbar-border-clr);
  --bar-backdrop-filter: var(--toolbar-backdrop-filter);
  --bar-text-color: var(--toolbar-color);
  --bar-shadow: var(--toolbar-shadow);
  --bar-radius: var(--toolbar-radius);

  /* CSSS Card Component Tokens for Admin */
  --card-bg: var(--bo-surface);
  --card-border-clr: var(--bo-border);
  --card-border-width: 1px;
  --card-radius: var(--bo-radius-lg);
  --card-margin-bottom: 1.75rem;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
  --card-overflow: hidden;
  --card-header-padding: 1.25rem 1.5rem;
  --card-header-border: 1px solid var(--bo-border);
  --card-header-gap: 0.75rem;
  --card-header-bg: transparent;
  --card-body-padding: 1.5rem;

  /* CSSS Form & Label Component Tokens */
  --form-label-font-weight: 600;
  --form-label-font-size: 0.875rem;
  --form-label-color: var(--clr-text-default);
  --form-label-margin-bottom: 0;

  /* CSSS Form Control Component Tokens (CSSS 1.16.0 Compliant) */
  --form-control-bg: var(--bo-surface-alt);
  --form-control-border-clr: var(--bo-border);
  --form-control-border-width: 1px;
  --form-control-border-radius: var(--bo-radius-sm);
  --form-control-color: var(--clr-text-default);
  --form-control-padding: 0.35rem 0.55rem;
  --form-control-font-size: 0.875rem;
  --form-control-placeholder-clr: var(--bo-text-muted);
  --form-control-disabled-border-clr: var(--bo-border-subtle);
  --form-control-focus-border-clr: var(--bo-primary);
  --form-control-focus-shadow: 0 0 0 2px var(--bo-primary-light);
  --form-control-padding-sm: 0.35rem 0.6rem;
  --form-control-font-size-sm: 0.8rem;
  --form-control-valid-border-clr: var(--form-control-border-clr);

  /* CSSS Form Hint Component Tokens */
  --form-hint-color: var(--bo-text-muted);
  --form-hint-font-size: 0.8rem;
  --form-hint-line-height: 1.45;
  --form-hint-margin-top: 0.35rem;

  /* CSSS .form-check Tokens for Option Tiles */
  --form-check-tile-padding: 0.75rem 1.25rem;
  --form-check-tile-border-width: 2px;
  --form-check-tile-border-clr: var(--bo-border);
  --form-check-tile-radius: var(--bo-radius-md);
  --form-check-tile-bg: var(--bo-surface-alt);
  --form-check-tile-checked-border-clr: var(--bo-primary);
  --form-check-tile-checked-bg: var(--bo-surface-alt);

  /* CSSS Grid Layout Tokens */
  --grid-gap: .5rem;

  /* CSSS Sidebar Layout Variables */
  --sidebar-width: 290px;
  --sidebar-bg: var(--bo-surface);
  --sidebar-container-gap: 0;
  --sidebar-padding: 0;
  --sidebar-position: sticky;
  --sidebar-top: 0;

  /* CSSS Button Component Tokens for BO (CSSS 1.33.0 Compliant) */
  --btn-font-weight: 600;
  --btn-margin-bottom: 0;
  --btn-radius: var(--bo-radius-md);
  --btn-font-size: 0.875rem;
  --btn-padding-inline: 0.55rem;
  --btn-padding-block: 0.45rem;
  --btn-gap: 0.45rem;
  --btn-border-width: 1px;
  --btn-border-style: solid;
  --btn-border-color: transparent;
  --btn-text-decoration: none;
  --btn-text-decoration-hover: none;
  --btn-shadow: none;
  --btn-outline-color-mix: 0%;
  --btn-outline-hover-color-mix: 15%;
  --btn-subtle-color-mix: 12%;
  --btn-subtle-hover-color-mix: 20%;

  /* CSSS Button Variants */
  /* --btn-text-color-light: #ffffff;
  --btn-text-color-dark: var(--clr-text-default);
  --btn-bg-primary: var(--clr-primary);
  --btn-border-color-primary: var(--clr-primary);
  --btn-bg-dark: var(--bo-surface-alt);
  --btn-border-color-dark: var(--bo-border); */
  /* --btn-bg-secondary: var(--bo-surface-alt); */
  /* --btn-border-color-secondary: var(--bo-border); */
  /* --btn-bg-danger: var(--clr-danger);
  --btn-border-color-danger: var(--clr-danger);
  --btn-bg-success: var(--clr-success);
  --btn-border-color-success: var(--clr-success); */

  /* Global typography in BO */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base Body Styles for Admin */
body.admin-body {
  --header-padding-top: 0;
  background-color: var(--clr-bg);
  color: var(--clr-text-default);
  font-family: var(--font-sans);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   LAYOUT CSSS : SIDEBAR + MAIN CONTENT
   ========================================================================== */

.admin-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 1024px) {
  .admin-layout.has-sidebar {
    flex-direction: row;
  }
}

/* Sidebar Component */
.admin-sidebar {
  flex: 0 0 var(--sidebar-width);
  width: 100%;
  max-width: 100%;
  background-color: var(--bo-surface);
  border-bottom: 1px solid var(--bo-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

@media (min-width: 1024px) {
  .admin-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    border-bottom: none;
    border-right: 1px solid var(--bo-border);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.admin-sidebar-header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--bo-border);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--bo-text);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.admin-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bo-radius-md);
  background: linear-gradient(135deg, #e11d48, #3b82f6);
  color: #ffffff;
  font-size: 1rem;
}

.admin-sidebar-band-select {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-sidebar-band-select label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bo-text-muted);
}

.admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.65rem;
  gap: 0.25rem;
  flex: 1;
}

/* ==========================================================================
   SIDEBAR NAVIGATION (.nav CSS STARTER COMPLIANT)
   Configured 100% through CSSS tokens with low specificity (:where)
   ========================================================================== */
:where(.sidebar .nav, .nav.flex-column) {
  display: var(--nav-display, flex);
  flex-direction: column;
  gap: var(--nav-gap, 0.25rem);
  padding: var(--nav-padding, 0);
  margin: var(--nav-margin-block, 0);
  list-style: none;
  width: 100%;
}

:where(.sidebar .nav, .nav.flex-column) > :where(li, .nav-item) {
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  margin-bottom: 0;
}

/* Nav links & items configured via --nav-link-* tokens */
:where(.sidebar .nav, .nav.flex-column) :where(.nav-link, a, button) {
  display: var(--nav-link-display, flex);
  align-items: var(--nav-link-align-items, center);
  justify-content: var(--nav-link-justify-content, space-between);
  gap: var(--nav-link-gap, 0.6rem);
  padding: var(--nav-link-padding, var(--nav-a-padding, 0.65rem 0.85rem));
  border-radius: var(--nav-link-radius, 0.5rem);
  color: var(--nav-link-color, var(--nav-a-color, var(--clr-text-muted)));
  background-color: var(--nav-link-bg, transparent);
  border: none;
  text-align: left;
  font-weight: var(--nav-link-font-weight, 600);
  font-size: var(--nav-link-font-size, 0.875rem);
  cursor: pointer;
  width: 100%;
  text-decoration: var(--nav-a-text-decoration, none);
  box-sizing: border-box;
  transition: color 0.15s ease, background-color 0.15s ease;
}

:where(.sidebar .nav, .nav.flex-column) :where(.nav-link, a, button):hover {
  color: var(--nav-link-color-hover, var(--clr-text-default));
  background-color: var(--nav-link-bg-hover, var(--clr-surface-alt));
}

:where(.sidebar .nav, .nav.flex-column) :where(.nav-link, a, button).active {
  color: var(--nav-link-color-active, var(--nav-a-active-color, var(--clr-text-default)));
  background-color: var(--nav-link-bg-active, var(--clr-primary-light));
  font-weight: var(--nav-link-font-weight-active, 700);
  position: relative;
}

:where(.sidebar .nav, .nav.flex-column) :where(.nav-link, a, button).active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: var(--nav-link-active-indicator-width, 3px);
  background-color: var(--nav-link-active-indicator-color, var(--clr-primary));
  border-radius: 0 4px 4px 0;
}

/* .nav-item-content, .admin-nav-item-content {
  display: flex;
  align-items: center;
  gap: 0.65rem;
} */

.nav-badge, .admin-nav-badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--bo-radius-full, 9999px);
  background-color: var(--nav-badge-bg, var(--clr-surface-alt));
  color: var(--nav-badge-color, var(--clr-text-muted));
}

:where(.active) :where(.nav-badge, .admin-nav-badge) {
  background-color: var(--nav-badge-bg-active, var(--clr-primary));
  color: var(--nav-badge-color-active, #000000);
}

/* Sidebar Submenus & caret */
.submenu-caret {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--nav-link-color, var(--clr-text-muted));
  opacity: 0.7;
}

:where(.nav-item, .admin-nav-group).expanded .submenu-caret {
  transform: rotate(180deg);
  color: var(--nav-link-color-active, var(--clr-text-default));
  opacity: 1;
}

:where(.nav-submenu, .admin-nav-submenu) {
  display: none;
  flex-direction: column;
  gap: var(--nav-submenu-gap, 0.15rem);
  padding-left: var(--nav-submenu-padding-left, 0.65rem);
  margin-top: 0.25rem;
  margin-bottom: 0.45rem;
  margin-left: var(--nav-submenu-margin-left, 1.15rem);
  border-left: var(--nav-submenu-border-width, 2px) solid var(--nav-submenu-border-clr, var(--clr-border));
}

:where(.nav-item, .admin-nav-group).expanded :where(.nav-submenu, .admin-nav-submenu) {
  display: flex;
}

/* Submenu links configured via --nav-subitem-* tokens */
:where(.nav-subitem, .admin-nav-subitem) {
  display: var(--nav-subitem-display, flex);
  align-items: var(--nav-subitem-align-items, center);
  gap: var(--nav-subitem-gap, 0.55rem);
  padding: var(--nav-subitem-padding, 0.35rem 0.65rem);
  border-radius: var(--nav-subitem-radius, 0.375rem);
  color: var(--nav-subitem-color, var(--clr-text-muted));
  font-size: var(--nav-subitem-font-size, 0.8rem);
  font-weight: var(--nav-subitem-font-weight, 500);
  text-decoration: none;
  background-color: var(--nav-subitem-bg, transparent);
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  transition: color 0.15s ease, background-color 0.15s ease;
}

:where(.nav-subitem, .admin-nav-subitem):hover {
  color: var(--nav-subitem-color-hover, var(--clr-text-default));
  background-color: var(--nav-subitem-bg-hover, var(--clr-surface-hover));
}

:where(.nav-subitem, .admin-nav-subitem).active {
  color: var(--nav-subitem-color-active, var(--clr-primary));
  font-weight: var(--nav-subitem-font-weight-active, 600);
  background-color: var(--nav-subitem-bg-active, var(--clr-primary-light));
}

.subitem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* SVG Icon styling & typographic alignment */
.wb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.wb-icon-inline {
  margin-right: 0.35rem;
}

/* Unified Bar & Header selectors aligned with CSSS 1.33.0 .toolbar */
:where(.toolbar, .app-bar, .bar, .admin-topbar, .hub-header, .admin-floating-bar, .preview-toolbar, .section-header-sticky, .admin-sidebar-header) {
  background-color: var(--toolbar-bg);
  border-color: var(--toolbar-border-clr);
  color: var(--toolbar-color);
}

:where(.toolbar-translucent, .app-bar-translucent, .admin-topbar, .hub-header, .admin-floating-bar) {
  background: var(--toolbar-bg-translucent);
  backdrop-filter: var(--toolbar-backdrop-filter);
  -webkit-backdrop-filter: var(--toolbar-backdrop-filter);
  border-color: var(--toolbar-border-clr);
}

.subitem-icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Section scroll target pulse glow */
.highlight-section {
  animation: bo-section-glow 1.2s ease-out;
}

@keyframes bo-section-glow {
  0% {
    box-shadow: 0 0 0 3px var(--bo-primary);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.admin-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bo-border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background-color: var(--bo-surface);
}

/* Action button in sidebar - prioritized via CSSS --btn-* tokens */
.btn-sidebar-preview {
  --btn-bg: rgba(59, 130, 246, 0.12);
  --btn-border-color: rgba(59, 130, 246, 0.35);
  --btn-text-color: #93c5fd;
  --btn-bg-hover: rgba(59, 130, 246, 0.25);
  --btn-border-color-hover: var(--bo-primary);
  --btn-text-color-hover: #ffffff;
  --btn-padding-inline: 0.85rem;
  --btn-padding-block: 0.6rem;
  --btn-font-size: 0.85rem;
  --btn-radius: var(--bo-radius-md);
  width: 100%;
}

.btn-sidebar-preview.active {
  --btn-bg: var(--bo-primary);
  --btn-border-color: var(--bo-primary);
  --btn-text-color: #ffffff;
}

.sidebar-secondary-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
}

/* Main Content Area */
.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-bg);
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.5rem;
  min-height: 54px;
  box-sizing: border-box;
  background: var(--bar-bg-translucent, var(--bo-surface));
  backdrop-filter: var(--bar-backdrop-filter, blur(12px));
  -webkit-backdrop-filter: var(--bar-backdrop-filter, blur(12px));
  border-bottom: 1px solid var(--bar-border-clr, var(--bo-border));
  position: sticky;
  top: 0;
  z-index: 90;
  gap: 1rem;
}

.admin-topbar-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.band-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bo-text);
}

.band-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bo-success);
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-content-wrapper {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 60px);
  position: relative;
}

.admin-form-container {
  flex: 1;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  transition: max-width 0.2s ease;
}

.admin-content-wrapper.preview-active {
  --block-header-sticky-top: 0px;
}

.admin-content-wrapper.preview-active .admin-form-container {
  max-width: none;
  flex: 1 1 55%;
  overflow-y: auto;
  height: calc(100vh - var(--admin-topbar-height, 58px));
}

/* ==========================================================================
   LIVE REAL-TIME PREVIEW PANEL
   ========================================================================== */

.preview-panel {
  display: none;
  flex-direction: column;
  background-color: #030712;
  border-left: 1px solid var(--bo-border);
  position: sticky;
  top: var(--admin-topbar-height, 58px);
  height: calc(100vh - var(--admin-topbar-height, 58px));
  overflow: hidden;
  z-index: 80;
}

.admin-content-wrapper.preview-active .preview-panel {
  display: flex;
  flex: 1 1 45%;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background-color: var(--bar-bg, var(--bo-surface));
  border-bottom: 1px solid var(--bar-border-clr, var(--bo-border));
  gap: 0.75rem;
}

.preview-toolbar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bo-text);
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bo-success);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: var(--bo-radius-full);
}

.live-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bo-success);
  animation: pulse-live 1.5s infinite;
}

@keyframes pulse-live {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.preview-viewport-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--bo-surface-alt);
  padding: 0.2rem;
  border-radius: var(--bo-radius-md);
  border: 1px solid var(--bo-border);
}

.btn-viewport {
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: none;
  color: var(--bo-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--bo-radius-sm);
  cursor: pointer;
}

.btn-viewport.active,
.btn-viewport:hover {
  color: #ffffff;
  background-color: var(--bo-surface);
}

.preview-iframe-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: #000000;
  overflow: hidden;
  padding: 0.5rem;
}

.preview-iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  background-color: #ffffff;
  transition: width 0.25s ease;
}

.preview-iframe.viewport-mobile {
  width: 375px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.preview-iframe.viewport-tablet {
  width: 768px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.preview-iframe.viewport-desktop {
  width: 100%;
}

/* ==========================================================================
   CARDS & PANELS (CSSS .card COMPLIANT)
   ========================================================================== */

:where(.card, .admin-card) {
  background-color: var(--card-bg, var(--bo-surface));
  border: var(--card-border-width, 1px) solid var(--card-border-clr, var(--bo-border));
  border-radius: var(--card-radius, var(--bo-radius-lg));
  margin-block-end: var(--card-margin-bottom, 1.75rem);
  overflow: var(--card-overflow, hidden);
  box-shadow: var(--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1));
  scroll-margin-top: 80px;
}

:where(.card-header, .admin-card-header) {
  padding: var(--card-header-padding, 1.25rem 1.5rem);
  border-bottom: var(--card-header-border, 1px solid var(--bo-border));
  display: var(--card-header-display, flex);
  justify-content: var(--card-header-justify-content, space-between);
  align-items: var(--card-header-align-items, center);
  flex-wrap: var(--card-header-flex-wrap, wrap);
  gap: var(--card-header-gap, 0.75rem);
  background-color: var(--card-header-bg, transparent);
}

:where(.card-title, .admin-card-title) {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text-default, var(--bo-text));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.card-desc, .admin-card-desc) {
  margin: 0.35rem 0 0 0;
  color: var(--bo-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

:where(.card-body, .admin-card-body) {
  padding: var(--card-body-padding, 1.5rem);
  background-color: var(--card-body-bg, transparent);
}

/* ==========================================================================
   COMPONENT CUSTOMIZER SECTIONS (POINT 7)
   ========================================================================== */

.component-box {
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease;
}

.component-box:hover {
  border-color: var(--bo-primary);
}

.component-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bo-border-subtle);
}

.component-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bo-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.component-box-badge {
  font-size: 0.75rem;
  font-family: monospace;
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  color: var(--bo-text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: var(--bo-radius-sm);
}

/* Accordéons de composants rétractables pour alléger l'UI */
details.collapsable-component {
  padding: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

details.collapsable-component summary.component-box-header {
  margin-bottom: 0;
  padding: 0.85rem 1.25rem;
  border-bottom: none;
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details.collapsable-component summary::-webkit-details-marker {
  display: none;
}

details.collapsable-component[open] summary.component-box-header {
  border-bottom: 1px solid var(--bo-border-subtle);
  background-color: rgba(0, 0, 0, 0.1);
}

details.collapsable-component .component-box-body {
  padding: 1.25rem;
}

.component-toggle-arrow {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--bo-primary);
  transition: transform 0.2s ease;
  margin-right: 0.35rem;
}

details.collapsable-component[open] > summary .component-toggle-arrow {
  transform: rotate(90deg);
}

/* ==========================================================================
   PALETTES PREDEFINIES (POINT 5)
   ========================================================================== */

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

:where(.palette-card) {
  --card-bg: var(--clr-surface-alt, #1a2236);
  --card-padding: 0.85rem;
  --card-margin-bottom: 0;
  --card-content-gap: 0.65rem;
  --card-cursor: pointer;
  --card-hover-border-clr: var(--clr-primary);
  --card-hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.palette-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-default);
  margin: 0;
}

.palette-card-genre {
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  margin: 0;
}

.palette-swatches {
  display: flex;
  gap: 0.35rem;
  height: 24px;
  border-radius: var(--bo-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.palette-swatch {
  flex: 1;
  height: 100%;
}

/* Palette swatches pre-styled (zero inline styles) */
.swatch-velvet-1 { background-color: #e11d48; }
.swatch-velvet-2 { background-color: #f43f5e; }
.swatch-velvet-3 { background-color: #121827; }
.swatch-velvet-4 { background-color: #0b0f19; }
.swatch-velvet-5 { background-color: #f8fafc; }

.swatch-synth-1 { background-color: #06b6d4; }
.swatch-synth-2 { background-color: #d946ef; }
.swatch-synth-3 { background-color: #150d2e; }
.swatch-synth-4 { background-color: #0b071a; }
.swatch-synth-5 { background-color: #f1f5f9; }

.swatch-folk-1 { background-color: #d97706; }
.swatch-folk-2 { background-color: #84cc16; }
.swatch-folk-3 { background-color: #292524; }
.swatch-folk-4 { background-color: #1c1917; }
.swatch-folk-5 { background-color: #fafaf9; }

.swatch-metal-1 { background-color: #ea580c; }
.swatch-metal-2 { background-color: #84cc16; }
.swatch-metal-3 { background-color: #141417; }
.swatch-metal-4 { background-color: #09090b; }
.swatch-metal-5 { background-color: #f4f4f5; }

.swatch-jazz-1 { background-color: #eab308; }
.swatch-jazz-2 { background-color: #38bdf8; }
.swatch-jazz-3 { background-color: #0b1329; }
.swatch-jazz-4 { background-color: #030712; }
.swatch-jazz-5 { background-color: #f8fafc; }

.swatch-mono-1 { background-color: #ffffff; }
.swatch-mono-2 { background-color: #94a3b8; }
.swatch-mono-3 { background-color: #1c1c1c; }
.swatch-mono-4 { background-color: #121212; }
.swatch-mono-5 { background-color: #e2e8f0; }

/* ==========================================================================
   SMART COLOR PICKER WITH ALPHA / OPACITY (POINT 6)
   ========================================================================== */

.color-token-field {
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.color-token-field-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.color-token-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bo-text);
}

.color-token-name {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--bo-text-muted);
}

.color-token-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-picker-native {
  width: 42px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.color-text-input {
  flex: 1;
  font-family: monospace;
  font-size: 0.82rem;
}

.color-opacity-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bo-text-muted);
  background-color: var(--bo-surface-alt);
  padding: 0.35rem 0.65rem;
  border-radius: var(--bo-radius-sm);
}

.color-opacity-slider {
  flex: 1;
  height: 5px;
  cursor: pointer;
  accent-color: var(--bo-primary);
}

.color-opacity-val {
  min-width: 32px;
  text-align: right;
  font-weight: 700;
  color: var(--bo-text);
}

/* Callout Info for Color Format */
.info-callout {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid var(--bo-primary);
  border-radius: 0 var(--bo-radius-md) var(--bo-radius-md) 0;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: #bfdbfe;
  margin-bottom: 1.25rem;
}

.info-callout p {
  margin: 0 0 0.4rem 0;
}

.info-callout p:last-child {
  margin: 0;
}

/* ==========================================================================
   IMAGE UPLOAD & PREVIEW COMPONENT
   ========================================================================== */

.image-preview-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--bo-surface);
  border: 1px dashed var(--bo-border);
  border-radius: var(--bo-radius-md);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  user-select: none;
}

.image-preview-box:hover {
  border-color: var(--bo-primary);
  background-color: var(--bo-surface-alt);
}

.image-preview-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--bo-radius-sm);
  background-color: #0b0f19;
  border: 1px solid var(--bo-border);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.image-preview-box:hover .image-preview-thumb {
  transform: scale(1.03);
}

.image-preview-overlay {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.image-preview-action-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bo-text);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.image-preview-hint {
  font-size: 0.72rem;
  color: var(--bo-text-muted);
}

.stage-plot-thumb {
  width: 130px;
  height: 72px;
  object-fit: contain;
}

.post-gallery-upload-icon-circle {
  width: 54px;
  height: 54px;
  border-radius: var(--bo-radius-sm, 6px);
  background-color: var(--bo-surface-alt, #0b0f19);
  border: 1px solid var(--bo-border, #1e293b);
  color: var(--bo-primary, #e11d48);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.image-preview-box:hover .post-gallery-upload-icon-circle {
  transform: scale(1.05);
  border-color: var(--bo-primary, #e11d48);
}

.quick-post-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: var(--bo-surface-alt, #0b0f19);
  border: 1px solid var(--bo-border, #1e293b);
  border-radius: var(--bo-radius-md, 8px);
  max-height: 220px;
  overflow-y: auto;
}

.gallery-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--bo-radius-sm, 6px);
  overflow: hidden;
  background-color: #000;
  border: 1px solid var(--bo-border, #1e293b);
  transition: border-color 0.15s ease;
}

.gallery-preview-item:hover {
  border-color: var(--bo-primary, #e11d48);
}

.gallery-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-preview-remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.gallery-preview-remove-btn:hover {
  background: var(--clr-danger, #ef4444);
  transform: scale(1.1);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   CSSS CARD MODIFIER: .card-compact / .card-item (CSSS 1.16.0 Native)
   Inherits native CSSS .card-compact / .card-sm with native .card-header,
   .card-body, .card-footer sub-components and compact padding tokens.
   ========================================================================== */
:where(.card-compact, .card-item, .item-row) {
  --card-display: block;
  --card-header-bg: var(--bo-surface-alt);
  --card-border-clr: var(--bo-border);
  --card-border-width: 1px;
  --card-radius: var(--bo-radius-md);
  --card-margin-bottom: 0.65rem;
  --card-shadow: none;
  --card-overflow: visible;
  --card-header-border: 1px solid var(--bo-border-subtle);
  --card-footer-border: 1px solid var(--bo-border-subtle);
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(.card-compact, .card-item, .item-row):hover {
  --card-border-clr: #4b5563;
}

:where(.item-row.is-expanded) {
  --card-border-clr: var(--bo-primary, #6366f1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  margin-bottom: 1.15rem;
}

:where(.token-row) {
  --card-padding: 0.75rem 1rem;
  --card-content-gap: 1rem;
}

/* Card Header for .item-row: compact one-line strip by default */
:where(.item-row) .item-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  user-select: none;
  background-color: var(--bo-surface);
  border-bottom: none;
  border-radius: calc(var(--bo-radius-md) - 1px);
  transition: background-color 0.15s ease;
  gap: 0.75rem;
}

:where(.item-row) .item-row-header:hover {
  background-color: var(--bo-surface-hover, rgba(255, 255, 255, 0.04));
}

:where(.item-row.is-expanded) .item-row-header {
  border-bottom: 1px solid var(--bo-border-subtle);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--bo-surface-alt);
}

/* Card Body: collapsed by default, expanded on demand */
.item-row:not(.is-expanded) > .card-body,
.item-row:not(.is-expanded) > .item-row-body,
.item-row:not(.is-expanded) .item-row-body,
.item-row:not(.is-expanded) .compact-item-body {
  display: none !important;
}

.item-row.is-expanded > .item-row-body:not(.compact-item-body),
.item-row.is-expanded .item-row-body:not(.compact-item-body) {
  display: block !important;
  padding: 1rem 1.15rem;
  animation: fadeIn 0.15s ease-out;
}

.item-row.is-expanded > .compact-item-body,
.item-row.is-expanded .compact-item-body {
  display: flex !important;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  animation: fadeIn 0.15s ease-out;
}

@media (max-width: 640px) {
  .item-row.is-expanded > .compact-item-body,
  .item-row.is-expanded .compact-item-body {
    flex-direction: column;
    align-items: center;
  }
}

/* Compact Thumbnails in item-row-header */
.item-row-thumb {
  width: 32px;
  height: 32px;
  border-radius: var(--bo-radius-sm);
  object-fit: cover;
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.item-row-thumb.is-circle {
  border-radius: 50%;
}

:where(.item-row-title-group, .card-item-title-group) {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  flex-wrap: wrap;
}

.item-row-main-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bo-text);
  margin-right: 0.2rem;
}

.item-row-meta-text {
  font-size: 0.8rem;
  color: var(--bo-text-muted);
}

:where(.item-row-order-badge, .card-item-order-badge) {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--bo-radius-sm);
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  color: var(--bo-primary);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.item-row-actions-quick {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.item-row-body-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bo-border-subtle);
}

.item-row-body-footer .btn:not(.btn-danger) {
  --btn-text-color: var(--bo-text, #f3f4f6);
  --btn-border-color: var(--bo-border, #4b5563);
  --btn-bg: var(--bo-surface-alt, #1e2430);
  color: var(--bo-text, #f3f4f6);
  border-color: var(--bo-border, #4b5563);
}

.item-row-body-footer .btn:not(.btn-danger):hover {
  --btn-text-color-hover: #ffffff;
  --btn-bg-hover: var(--bo-surface-hover, #2e384d);
  color: #ffffff;
}

/* Card Footer backward-compat alias for legacy .item-row-actions class */
:where(.item-row-actions) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--card-footer-padding);
  border-top: var(--card-footer-border);
}

/* Compact Avatar & Cover Pickers */
.avatar-picker-compact {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--bo-radius-md);
  border: 1px dashed var(--bo-border);
  overflow: hidden;
  background-color: var(--bo-surface);
  transition: all 0.2s ease;
  user-select: none;
}

.avatar-picker-compact:hover {
  border-color: var(--bo-primary);
  transform: scale(1.02);
}

.avatar-picker-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-picker-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11, 15, 25, 0.75);
  color: #ffffff;
  font-size: 0.65rem;
  text-align: center;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  opacity: 0.85;
  transition: all 0.2s ease;
}

.avatar-picker-compact:hover .avatar-picker-badge {
  background: var(--bo-primary);
  opacity: 1;
}

.release-cover-compact,
.event-poster-compact {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--bo-radius-sm);
  border: 1px dashed var(--bo-border);
  overflow: hidden;
  background-color: #0b0f19;
  transition: all 0.2s ease;
  user-select: none;
}

.release-cover-compact:hover,
.event-poster-compact:hover {
  border-color: var(--bo-primary);
  transform: scale(1.02);
}

.release-cover-compact img,
.event-poster-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.release-cover-compact:hover .avatar-picker-badge,
.event-poster-compact:hover .avatar-picker-badge {
  background: var(--bo-primary);
  opacity: 1;
}

.track-cover-compact {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--bo-radius-sm);
  border: 1px solid var(--bo-border);
  overflow: hidden;
  background-color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.track-cover-compact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.track-cover-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11, 15, 25, 0.85);
  color: #ff5500;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

/* Compact layout fields for member & release items */

.compact-item-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

/* ==========================================================================
   MODULAR SUB-BLOCKS (SOUS-BLOCS ORDONNABLES & ACTIVABLES)
   ========================================================================== */

.sub-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sub-block-item {
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  transition: all 0.2s ease;
  overflow: hidden;
}

.sub-block-item:hover {
  border-color: #4b5563;
}

.sub-block-item.is-disabled {
  opacity: 0.6;
}

.sub-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.15rem;
  background-color: var(--bo-surface-alt);
  border-bottom: 1px solid var(--bo-border-subtle);
  gap: 1rem;
  flex-wrap: wrap;
}

.sub-block-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sub-block-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.sub-block-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--bo-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sub-block-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--bo-text-muted);
}

.sub-block-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sub-block-body {
  padding: 1.25rem;
}



/* ==========================================================================
   FLOATING ACTION BAR
   ========================================================================== */

.admin-floating-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 90;
  margin-top: 2rem;
  background: var(--bar-bg-translucent, rgba(41, 41, 41, 0.94));
  backdrop-filter: var(--bar-backdrop-filter, blur(12px));
  -webkit-backdrop-filter: var(--bar-backdrop-filter, blur(12px));
  border: 1px solid var(--bar-border-clr, var(--bo-border));
  border-radius: var(--bo-radius-lg);
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.admin-floating-status {
  font-size: 0.85rem;
  color: var(--bo-text-muted);
}

.admin-floating-status strong {
  color: #ffffff;
}

.btn-save-main {
  --btn-padding-inline: 1.3rem;
  --btn-padding-block: 0.55rem;
  --btn-font-size: .8rem;
}

/* ==========================================================================
   GRIDS (.grid, .grid-1..12, .grid-auto, .col-full)
   Native CSS Starter layout component.
   Mobile collapse (< 768px) driven by CSSS token:
   ========================================================================== */
@media (max-width: 768px) {
  :where([class^='grid-'], [class*=' grid-']):not(.grid-no-collapse) {
    --grid-cols-count: 1;
  }
}

.form-group {
  --form-group-gap: .2rem;
  --form-group-margin-bottom: .5rem;
}

/* Secondary muted label */
.form-label-muted {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bo-text-muted);
}

/* Flexible label header (title on left, hint/badge on right) */
.form-label-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Modifier for CSSS .form-check as selectable card / tile */
:where(.form-check-tile, .form-check-card) {
  --form-check-padding: var(--form-check-tile-padding, 0.75rem 1.25rem);
  --form-check-border-width: var(--form-check-tile-border-width, 2px);
  --form-check-border-clr: var(--form-check-tile-border-clr, var(--bo-border));
  --form-check-radius: var(--form-check-tile-radius, var(--bo-radius-md));
  --form-check-bg: var(--form-check-tile-bg, var(--bo-surface-alt));
  --form-check-checked-border-clr: var(--form-check-tile-checked-border-clr, var(--bo-primary));
  --form-check-checked-bg: var(--form-check-tile-checked-bg, var(--bo-surface-alt));
  --form-check-checked-shadow: 0 0 0 1px var(--bo-primary);
  font-weight: 600;
}

/* Card modifier for settings callout blocks (following CSSS recommendation: use .card) */
:where(.card-setting) {
  --card-padding: 1.1rem 1.25rem;
  --card-margin-bottom: 1rem;
}

/* Spaced modifier for CSSS native .form-group-inline */
.form-group-spaced {
  --form-group-justify-content: space-between;
  --form-group-align-items: center;
  --form-group-flex-wrap: wrap;
}

/* Helper for description text inside card / setting panels */
.form-panel-desc {
  max-width: 650px;
}

.form-panel-desc label {
  margin-bottom: 0.25rem;
}

.form-panel-desc small,
.form-panel-desc .text-muted {
  display: block;
  line-height: 1.5;
}

/* Tag buttons list (e.g. instruments, roles suggestions) */
.form-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.tag-badge-btn {
  cursor: pointer;
  font-size: 0.78rem;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.tag-badge-btn:hover {
  filter: brightness(1.15);
}

.tag-badge-btn:active {
  transform: scale(0.96);
}

/* Monospace input (API tokens, webhooks, keys) */
.form-control-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
}

:where(.form-group small, .form-hint, .form-control-description) {
  display: var(--form-hint-display, block);
  font-size: var(--form-hint-font-size, 0.8rem);
  color: var(--form-hint-color, var(--bo-text-muted));
  margin-top: var(--form-hint-margin-top, 0.35rem);
  line-height: var(--form-hint-line-height, 1.45);
}

/* ==========================================================================
   CSSS FORM CONTROL COMPONENT (.form-control)
   Handled natively by CSS Starter 1.16.0 (--form-control-* in :root).
   ========================================================================== */

/* ==========================================================================
   CSSS BUTTON COMPONENT (.btn)
   All styling strictly governed by CSS Starter tokens (--btn-*)
   ========================================================================== */
:where(button, .btn) {
  --btn-margin-bottom: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

:where(button, .btn):hover {
  text-decoration: var(--btn-text-decoration-hover, none);
}

/* .btn-primary {
  --btn-bg: var(--bo-primary);
  --btn-border-color: var(--bo-primary);
  --btn-text-color: var(--clr-text-on-primary);
  --btn-bg-hover: var(--bo-primary-hover);
  --btn-border-color-hover: var(--bo-primary-hover);
  --btn-text-color-hover: var(--clr-text-on-primary);
}

.btn-dark {
  --btn-bg: var(--bo-surface-alt);
  --btn-border-color: var(--bo-border);
  --btn-text-color: var(--bo-text);
  --btn-bg-hover: var(--bo-surface-hover);
  --btn-border-color-hover: var(--bo-border-subtle);
  --btn-text-color-hover: #ffffff;
}

.btn-danger {
  --btn-bg: var(--bo-danger);
  --btn-border-color: var(--bo-danger);
  --btn-text-color: #ffffff;
  --btn-bg-hover: var(--bo-danger-hover);
  --btn-border-color-hover: var(--bo-danger-hover);
  --btn-text-color-hover: #ffffff;
}

.btn-success {
  --btn-bg: var(--bo-success);
  --btn-border-color: var(--bo-success);
  --btn-text-color: #ffffff;
  --btn-bg-hover: #059669;
  --btn-border-color-hover: #059669;
  --btn-text-color-hover: #ffffff;
} */

/* :where(button, .btn).btn-outline {
  --btn-bg: transparent;
  --btn-border-width: 1px;
} */

/* :where(button, .btn).btn-outline.btn-danger {
  --btn-border-color: rgba(239, 68, 68, 0.45);
  --btn-text-color: #f87171;
  --btn-bg: rgba(239, 68, 68, 0.08);
  --btn-bg-hover: var(--bo-danger);
  --btn-border-color-hover: var(--bo-danger);
  --btn-text-color-hover: #ffffff;
}

:where(button, .btn).btn-outline.btn-primary {
  --btn-border-color: var(--bo-primary);
  --btn-text-color: #93c5fd;
  --btn-bg: rgba(59, 130, 246, 0.08);
  --btn-bg-hover: var(--bo-primary);
  --btn-border-color-hover: var(--bo-primary);
  --btn-text-color-hover: #ffffff;
}

:where(button, .btn).btn-outline.btn-dark {
  --btn-border-color: var(--bo-border);
  --btn-text-color: var(--bo-text-muted);
  --btn-bg: transparent;
  --btn-bg-hover: var(--bo-surface-hover);
  --btn-border-color-hover: var(--bo-border);
  --btn-text-color-hover: var(--bo-text);
} */

:where(button, .btn).btn-sm {
  --btn-font-size: 0.8rem;
  --btn-padding-inline: 0.65rem;
  --btn-padding-block: 0.35rem;
  --btn-radius: var(--bo-radius-sm);
}

:where(button, .btn).btn-lg {
  --btn-font-size: 1.05rem;
  --btn-padding-inline: 1.75rem;
  --btn-padding-block: 0.75rem;
  --btn-radius: var(--bo-radius-md);
}

/* Token Pills */
.token-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  padding: 0.3rem 0.6rem;
  border-radius: var(--bo-radius-sm);
  font-size: 0.78rem;
  margin: 0.2rem;
  cursor: pointer;
  color: var(--bo-text-muted);
  transition: all 0.15s ease;
}

.token-pill:hover {
  border-color: var(--bo-primary);
  color: #ffffff;
  background-color: var(--bo-surface-hover);
}

/* Modals */
.admin-modal {
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-lg);
  background: var(--bo-surface);
  color: var(--bo-text);
  max-width: 480px;
  width: 90%;
  padding: 1.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.admin-modal::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.admin-modal-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-modal-desc {
  margin: 0 0 1.25rem 0;
  color: var(--bo-text-muted);
  font-size: 0.85rem;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Tables */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  background-color: var(--bo-surface-alt);
  color: var(--bo-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--bo-border);
  text-align: left;
}

.admin-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--bo-border-subtle);
  vertical-align: middle;
}

.col-ch { width: 60px; }
.col-phantom { width: 70px; text-align: center; }
.col-actions { width: 50px; }
.table-responsive { overflow-x: auto; }

/* Alerts */
.admin-alert {
  padding: 0.85rem 1.25rem;
  border-radius: var(--bo-radius-md);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-alert-success {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
}

.admin-alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

/* Tab Panes */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Utility Helpers without Utility Salad */
.text-danger { color: var(--bo-danger); }
.text-success { color: var(--bo-success); }
.text-muted { color: var(--bo-text-muted); }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.font-mono { font-family: monospace; }
.flex-1 { flex: 1; }
.flex-1-5 { flex: 1.5; }
.flex-wrap { flex-wrap: wrap; }
.flex-row-between { display: flex; justify-content: space-between; align-items: center; }
.flex-row-center { display: flex; align-items: center; gap: 0.5rem; }
.w-100 { width: 100%; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.cursor-pointer { cursor: pointer; }

.font-presets-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.admin-section-divider {
  font-size: 1.1rem;
  margin: 1.5rem 0 1rem;
  border-top: 1px solid var(--bo-border);
  padding-top: 1.25rem;
}

.admin-section-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0 0.75rem;
  border-top: 1px solid var(--bo-border);
  padding-top: 1.25rem;
}

.admin-section-subhead-title {
  font-size: 1.1rem;
  margin: 0;
}

.token-catalog-summary {
  color: var(--bo-primary);
  font-weight: 700;
}

/* Login Page Styles */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background-color: var(--clr-bg);
}

.login-container {
  width: 100%;
  max-width: 420px;
}

.login-header {
  text-align: center;
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid var(--bo-border);
}

.login-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--bo-text);
  font-weight: 800;
}

.login-desc {
  margin: 0.35rem 0 0 0;
  color: var(--bo-text-muted);
  font-size: 0.85rem;
}

.login-body {
  padding: 1.75rem;
}

.login-footer {
  text-align: center;
  padding: 1rem;
  border-top: 1px solid var(--bo-border);
  font-size: 0.85rem;
}

/* ==========================================================================
   GATEWAYS (BANDSINTOWN / SOUNDCLOUD) & PLATFORM ICONS STYLING
   ========================================================================== */

.form-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--bo-text);
}

.form-label-with-icon svg {
  flex-shrink: 0;
  color: var(--bo-primary);
}

.gateway-actions-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.gateway-preview-panel {
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  padding: 1rem;
}

.gateway-preview-panel.hidden {
  display: none !important;
}

.gateway-event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--bo-border-subtle);
  gap: 1rem;
  font-size: 0.875rem;
}

.gateway-event-item:last-child {
  border-bottom: none;
}

.gateway-event-meta {
  color: var(--bo-text-muted);
  font-size: 0.8rem;
}

.flex-row-gap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.alert-gateway {
  padding: 0.85rem 1rem;
  border-radius: var(--bo-radius-md);
  background-color: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--bo-danger);
  color: #fca5a5;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  line-height: 1.45;
}

.alert-gateway-info {
  padding: 0.85rem 1rem;
  border-radius: var(--bo-radius-md);
  background-color: rgba(59, 130, 246, 0.12);
  border: 1px solid var(--bo-primary);
  color: #93c5fd;
  font-size: 0.875rem;
  margin-top: 0.75rem;
  line-height: 1.45;
}

/* ==========================================================================
   LINKTREE-INSPIRED MODULAR CONTENT BLOCKS & PROFILE SUMMARY
   ========================================================================== */

/* Profile Summary Card (Top of Contenu / Identité) */
:where(.profile-summary-card, .profile-summary-bar) {
  --card-display: flex;
  --card-flex-direction: row;
  --card-align-items: center;
  --card-justify-content: space-between;
  --card-padding: 1.25rem 1.5rem;
  --card-margin-bottom: 1.75rem;
  --card-content-gap: 1.25rem;
  flex-wrap: wrap;
}

.profile-summary-info,
.profile-summary-left {
  display: flex;
  align-items: center;
  gap: 1.15rem;
}

.profile-summary-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--clr-surface-alt, #1e293b);
  border: 2px solid var(--clr-border, #334155);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  overflow: hidden;
}

.profile-summary-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-summary-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-text-default);
}

.profile-summary-desc {
  margin: 0.25rem 0 0 0;
  color: var(--clr-text-muted);
  font-size: 0.875rem;
}

.profile-summary-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.profile-summary-link {
  color: var(--clr-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-summary-link:hover {
  text-decoration: underline;
}

.profile-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.profile-summary-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.profile-summary-social-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--clr-surface-alt, #1e293b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  font-size: 0.75rem;
  border: 1px solid var(--clr-border-subtle, var(--clr-border));
}

.profile-summary-social-icon svg {
  width: 13px;
  height: 13px;
}

/* Modular Content Blocks List */
.content-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.content-block-item {
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-lg);
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-margin-top: 80px;
}

.content-block-item:hover {
  border-color: var(--bo-surface-hover);
}

.content-block-item.is-disabled {
  opacity: 0.65;
  background-color: rgba(17, 24, 39, 0.5);
}

.content-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: var(--bo-surface);
  user-select: none;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: var(--block-header-sticky-top, var(--admin-topbar-height, 58px));
  z-index: 25;
  border-radius: calc(var(--bo-radius-lg) - 1px);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
}

.content-block-item.expanded .content-block-header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--bo-border-subtle);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.content-block-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 220px;
}

.content-block-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--bo-radius-md);
  background-color: var(--bo-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border: 1px solid var(--bo-border);
  flex-shrink: 0;
  color: var(--bo-primary);
}

.content-block-icon-badge svg {
  width: 20px;
  height: 20px;
}

.content-block-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bo-text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.content-block-subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.8rem;
  color: var(--bo-text-muted);
}

.content-block-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Reorder Buttons */
.btn-reorder-group {
  display: inline-flex;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-sm);
  overflow: hidden;
}

.btn-reorder {
  background-color: var(--bo-surface-alt);
  color: var(--bo-text-muted);
  border: none;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-reorder:hover:not(:disabled) {
  background-color: var(--bo-surface-hover);
  color: var(--bo-text);
}

.btn-reorder:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Toggle Switch (Linktree Style) */
.toggle-switch-container {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--bo-text-muted);
}

.toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--bo-success);
  border-color: var(--bo-success);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(18px);
}

/* Accordion Toggle Button */
.btn-accordion-toggle {
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  color: var(--bo-text);
  border-radius: var(--bo-radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background-color 0.15s ease;
}

.btn-accordion-toggle:hover {
  background-color: var(--bo-surface-hover);
}

.btn-accordion-toggle .caret {
  transition: transform 0.2s ease;
}

.content-block-item.expanded .btn-accordion-toggle .caret {
  transform: rotate(180deg);
}

/* Accordion Content Body */
.content-block-body {
  display: none;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: none;
  background-color: var(--clr-bg);
  border-bottom-left-radius: calc(var(--bo-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--bo-radius-lg) - 1px);
}

.content-block-item.expanded .content-block-body {
  display: block;
}

/* Palettes Collapsible Drawer */
.palette-drawer {
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-lg);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.palette-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.palette-drawer-content {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--bo-border-subtle);
  padding-top: 1rem;
}

.palette-drawer-content.hidden {
  display: none !important;
}

.hidden {
  display: none !important;
}

/* Block header contextual action buttons (visible only when expanded) */
.block-header-actions-extra {
  display: none;
}

.content-block-item.expanded .block-header-actions-extra {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Block settings bar & quick rename */
.block-settings-bar {
  display: none;
  background-color: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.block-settings-bar.is-open {
  display: block;
  animation: fadeIn 0.2s ease;
}

.block-settings-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-icon-subtle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  opacity: 0.65;
  border-radius: var(--bo-radius-sm);
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-icon-subtle:hover {
  opacity: 1;
  background-color: var(--bo-surface-hover);
  transform: scale(1.1);
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--bo-primary);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.8rem;
  transition: color 0.15s ease;
}

.btn-link:hover {
  color: var(--bo-primary-hover);
}

/* ==========================================================================
   SUPERADMIN CONSOLE (CSSS COMPLIANT)
   ========================================================================== */

:where(.superadmin-content) {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.25rem;
}

:where(.superadmin-header) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

:where(.superadmin-title-group) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

:where(.superadmin-title) {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0;
  color: var(--clr-text-default);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  letter-spacing: -0.02em;
}

:where(.superadmin-desc) {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

:where(.superadmin-actions) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Sidebar Specific for Superadmin */
:where(.sidebar-superadmin-badge) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--bo-radius-full);
  background-color: rgba(225, 29, 72, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(225, 29, 72, 0.3);
  margin-top: 0.25rem;
}

:where(.sidebar-user-card) {
  --card-display: flex;
  --card-flex-direction: row;
  --card-align-items: center;
  --card-content-gap: 0.75rem;
  --card-padding: 0.75rem 0.85rem;
  --card-margin-bottom: 0;
  --card-bg: var(--clr-surface-alt, #1a2236);
}

:where(.sidebar-user-avatar) {
  width: 38px;
  height: 38px;
  border-radius: var(--bo-radius-full);
  background: linear-gradient(135deg, var(--clr-primary), #0284c7);
  color: #ffffff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

:where(.sidebar-user-info) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

:where(.sidebar-user-name) {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.sidebar-user-email) {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.btn-sidebar-logout) {
  --btn-bg: rgba(239, 68, 68, 0.12);
  --btn-border-color: rgba(239, 68, 68, 0.3);
  --btn-text-color: #fca5a5;
  --btn-bg-hover: rgba(239, 68, 68, 0.25);
  --btn-border-color-hover: var(--clr-danger);
  --btn-text-color-hover: #ffffff;
  --btn-padding-inline: 0.75rem;
  --btn-padding-block: 0.55rem;
  --btn-font-size: 0.85rem;
  --btn-radius: var(--bo-radius-md);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Stats KPI Cards */
:where(.stats-kpi-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

:where(.stats-kpi-card) {
  --card-display: flex;
  --card-flex-direction: row;
  --card-align-items: center;
  --card-content-gap: 1.15rem;
  --card-padding: 1.25rem 1.35rem;
  --card-margin-bottom: 0;
  --card-hover-border-clr: var(--clr-surface-hover, var(--clr-border));
  --card-hover-transform: translateY(-2px);
}

:where(.stats-kpi-icon) {
  width: 50px;
  height: 50px;
  border-radius: var(--bo-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

:where(.stats-kpi-icon.icon-users) {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

:where(.stats-kpi-icon.icon-bands) {
  background: rgba(177, 192, 44, 0.15);
  color: var(--clr-primary);
}

:where(.stats-kpi-icon.icon-requests) {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

:where(.stats-kpi-icon.icon-music) {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

:where(.stats-kpi-icon.icon-events) {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}

:where(.stats-kpi-icon.icon-storage) {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

:where(.stats-kpi-info) {
  display: flex;
  flex-direction: column;
}

:where(.stats-kpi-val) {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--clr-text-default);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

:where(.stats-kpi-label) {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

:where(.stats-breakdown-grid) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 960px) {
  :where(.stats-breakdown-grid) {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tables in Superadmin */
:where(.admin-table-container) {
  overflow-x: auto;
  border-radius: var(--bo-radius-md);
}

:where(.admin-table) {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.925rem;
}

:where(.admin-table th) {
  background-color: rgba(15, 23, 42, 0.6);
  padding: 0.95rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  border-bottom: 1px solid var(--bo-border);
}

:where(.admin-table td) {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--bo-border);
  vertical-align: middle;
}

:where(.admin-table tr:last-child td) {
  border-bottom: none;
}

:where(.admin-table tr:hover td) {
  background-color: rgba(255, 255, 255, 0.02);
}

:where(.user-cell) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

:where(.user-avatar-circle) {
  width: 40px;
  height: 40px;
  border-radius: var(--bo-radius-full);
  background-color: var(--clr-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

:where(.user-info-text) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

:where(.user-name-title) {
  font-weight: 600;
  color: var(--clr-text-default);
}

:where(.user-email-subtitle) {
  font-size: 0.825rem;
  color: var(--clr-text-muted);
}

:where(.role-badge-superadmin) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--bo-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(225, 29, 72, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(225, 29, 72, 0.3);
}

:where(.role-badge-user) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--bo-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

:where(.band-badges-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

:where(.band-badge-item) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--bo-radius-sm);
  background-color: var(--bo-surface-alt);
  border: 1px solid var(--bo-border);
  font-size: 0.825rem;
}

:where(.band-badge-role) {
  font-size: 0.7rem;
  color: var(--clr-text-muted);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.35rem;
  border-radius: var(--bo-radius-sm);
}

:where(.table-actions-cell) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Requests Grid & Cards */
:where(.requests-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.35rem;
  margin-top: 1rem;
}

:where(.request-card) {
  --card-padding: 1.35rem;
  --card-margin-bottom: 0;
  --card-content-gap: 1rem;
}

:where(.request-card-header) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

:where(.request-artist-name) {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clr-text-default);
  margin: 0;
}

:where(.request-slug-info) {
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin-top: 0.25rem;
}

:where(.request-details-box) {
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-2, 0.5rem);
  padding: 1rem;
  font-size: 0.885rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

:where(.request-message-quote) {
  font-style: italic;
  color: var(--clr-text-muted);
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

:where(.request-card-actions) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--clr-border);
}

/* Logs Terminal */
:where(.log-terminal) {
  background-color: #080c14;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-md);
  padding: 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #cbd5e1;
  max-height: 72vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
}

:where(.log-meta-bar) {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  margin-top: 0.25rem;
}

/* CSSS Compliant Structural Utilities (No inline styles) */
:where(.flex-row) { display: flex; flex-direction: row; }
:where(.flex-column) { display: flex; flex-direction: column; }
:where(.flex-between) { display: flex; justify-content: space-between; align-items: center; }
:where(.flex-start) { display: flex; justify-content: flex-start; align-items: center; }
:where(.flex-end) { display: flex; justify-content: flex-end; align-items: center; }
:where(.flex-center) { display: flex; justify-content: center; align-items: center; }
:where(.flex-wrap) { flex-wrap: wrap; }
:where(.gap-xs) { gap: 0.35rem; }
:where(.gap-sm) { gap: 0.5rem; }
:where(.gap-md) { gap: 0.85rem; }
:where(.gap-lg) { gap: 1.25rem; }
:where(.text-right) { text-align: right; }
:where(.text-center) { text-align: center; }
:where(.text-muted) { color: var(--clr-text-muted); }
:where(.font-semibold) { font-weight: 600; }
:where(.font-bold) { font-weight: 700; }
:where(.font-mono) { font-family: ui-monospace, Menlo, Consolas, monospace; }
:where(.w-100) { width: 100%; }
:where(.inline-form) { display: inline; margin: 0; }
:where(.m-0) { margin: 0; }
:where(.p-3) { padding: 1.5rem; }
:where(.p-4) { padding: 2rem; }
:where(.empty-state-icon) { font-size: 2.75rem; margin-bottom: 0.85rem; }
:where(.empty-state-title) { margin: 0 0 0.5rem 0; font-size: 1.25rem; color: var(--clr-text-default); }
:where(.empty-state-desc) { color: var(--clr-text-muted); margin: 0; font-size: 0.925rem; }
:where(.subtext-tag) { font-size: 0.75rem; color: #10b981; margin-left: 0.4rem; }
:where(.history-details) { margin-top: 1.5rem; }
:where(.history-summary) { cursor: pointer; padding: 0.65rem 0; font-weight: 600; color: var(--clr-text-muted); font-size: 0.9rem; }
:where(.history-summary:hover) { color: var(--clr-text-default); }
:where(.dialog-form-grid) { display: flex; flex-direction: column; gap: 1.15rem; }
:where(.modal-header-title) { margin: 0; font-size: 1.25rem; font-weight: 700; }
:where(.badge-pill-success) { background: rgba(48, 153, 57, 0.15); color: #4ade80; border: 1px solid rgba(48, 153, 57, 0.3); }
:where(.badge-pill-danger) { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }

/* ==========================================================================
   CSS STARTER MODALS (.modal, .modal-dialog, .modal-content, etc.)
   ========================================================================== */

:where(.modal, dialog.modal, dialog.admin-modal) {
  --modal-bg: var(--bo-surface, #1e1e1e);
  --modal-backdrop-bg: rgba(0, 0, 0, 0.75);
  --modal-backdrop-filter: blur(6px);
  --modal-border: 1px solid var(--bo-border, #333333);
  --modal-border-radius: var(--bo-radius-lg, 12px);
  --modal-width: 92vw;
  --modal-max-width: 560px;
  --modal-max-height: min(90vh, calc(100dvh - 2rem));
  --modal-header-bg: var(--bo-surface, #1e1e1e);
  --modal-header-color: var(--clr-text-default, #f3f4f6);
  --modal-header-border-bottom: 1px solid var(--bo-border, #333333);
  --modal-body-bg: var(--bo-surface, #1e1e1e);
  --modal-footer-bg: var(--bo-surface, #1e1e1e);
  --modal-footer-border-top: 1px solid var(--bo-border, #333333);
  --modal-close-color: var(--bo-text-muted, #94a3b8);
  --modal-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
}

:where(.modal[hidden]) {
  display: none !important;
}

:where(.modal:not([hidden]), .modal.show) {
  display: flex;
}

:where(.modal form.modal-content) {
  --form-margin-block: 0;
  margin: 0;
  width: 100%;
}

:where(.modal .modal-title) {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

:where(.modal .modal-desc) {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--bo-text-muted, #94a3b8);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

:where(dialog.admin-modal) {
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-lg);
  background-color: var(--bo-surface);
  color: var(--clr-text-default);
  max-width: 580px;
  width: 92vw;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  margin: auto;
}

:where(dialog.admin-modal::backdrop) {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   FLOATING ACTION BUTTON (FAB) & SPEED DIAL MENU
   ========================================================================== */

:where(.admin-fab-container) {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 990;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.65rem;
  pointer-events: none;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(body:has(.preview-active) .admin-fab-container) {
  right: calc(45% + 1.5rem);
}

:where(.admin-fab-container > *) {
  pointer-events: auto;
}

:where(.admin-fab-btn) {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--clr-primary, #ff3366);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  outline: none;
}

:where(.admin-fab-btn:hover) {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
}

:where(.admin-fab-btn .fab-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.admin-fab-container.is-open .admin-fab-btn .fab-icon) {
  transform: rotate(45deg);
}

:where(.admin-speed-dial-menu) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
  pointer-events: none;
  margin-bottom: 0.25rem;
}

:where(.admin-fab-container.is-open .admin-speed-dial-menu) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

:where(.admin-speed-dial-item) {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

:where(.admin-speed-dial-label) {
  background: var(--bo-surface, #1e1e1e);
  color: var(--clr-text-default, #f3f4f6);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: var(--bo-radius-md, 8px);
  border: 1px solid var(--bo-border, #333333);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:where(.admin-speed-dial-action) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bo-surface, #242424);
  color: var(--clr-text-default, #f3f4f6);
  border: 1px solid var(--bo-border, #3a3a3a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:where(.admin-speed-dial-item:hover .admin-speed-dial-label) {
  background: var(--bo-surface-hover, #282828);
  border-color: var(--clr-primary, #ff3366);
  color: #ffffff;
}

:where(.admin-speed-dial-item:hover .admin-speed-dial-action) {
  background: var(--clr-primary, #ff3366);
  color: #ffffff;
  border-color: var(--clr-primary, #ff3366);
  transform: scale(1.08);
}

:where(.admin-speed-dial-item.item-primary .admin-speed-dial-action) {
  background: rgba(255, 51, 102, 0.15);
  color: var(--clr-primary, #ff3366);
  border-color: rgba(255, 51, 102, 0.4);
}

:where(.admin-speed-dial-item.item-primary:hover .admin-speed-dial-action) {
  background: var(--clr-primary, #ff3366);
  color: #ffffff;
}

:where(.admin-speed-dial-backdrop) {
  position: fixed;
  inset: 0;
  z-index: 989;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

:where(.admin-speed-dial-backdrop.is-active) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 768px) {
  :where(.admin-fab-container) {
    bottom: 1.25rem;
    right: 1.25rem;
  }
  :where(body:has(.preview-active) .admin-fab-container) {
    right: 1.25rem;
  }
}

/* ==========================================================================
   Composant Autocomplétion des Mentions (@) & Suggestions d'Événements
   Zero emoji - Token-driven CSS Starter
   ========================================================================== */

.wb-mention-wrapper {
  position: relative;
  width: 100%;
}

.wb-mention-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1050;
  background: var(--bo-surface, #1e1e1e);
  border: 1px solid var(--bo-border, #334155);
  border-radius: var(--radius-2, 8px);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  max-height: 280px;
  overflow-y: auto;
  padding: 0.25rem 0;
  box-sizing: border-box;
}

.wb-mention-header {
  padding: 0.4rem 0.75rem 0.3rem 0.75rem;
  border-bottom: 1px solid var(--clr-border, #334155);
}

.wb-mention-list {
  display: flex;
  flex-direction: column;
}

.wb-mention-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.wb-mention-item:hover,
.wb-mention-item.is-selected {
  background: rgba(99, 102, 241, 0.14);
}

.wb-mention-media {
  flex-shrink: 0;
}

.wb-mention-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.wb-mention-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-surface-alt, #0f172a);
  border: 1px solid var(--clr-border, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted, #94a3b8);
}

.wb-mention-body {
  flex: 1;
  min-width: 0;
}

.wb-mention-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.wb-mention-name {
  font-size: 0.88rem;
  color: var(--clr-text, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-mention-subtitle {
  font-size: 0.75rem;
  color: var(--clr-text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.wb-mention-empty {
  padding: 0.85rem 1rem;
  text-align: center;
}

/* Boîte de proposition d'ajout comme participant à l'événement */
.mention-event-prompt-box {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-2, 8px);
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  animation: wbFadeSlideIn 0.2s ease-out;
}

.mention-event-prompt-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--clr-text, #f8fafc);
  flex: 1;
  min-width: 0;
}

.mention-event-prompt-info svg {
  color: var(--clr-primary, #6366f1);
  flex-shrink: 0;
}

.mention-event-prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Section Événement & Participants dans modal quick post */
.quick-post-event-section {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--clr-border, #334155);
  border-radius: var(--radius-2, 8px);
  padding: 0.85rem;
  margin-top: 0.85rem;
  animation: wbFadeSlideIn 0.25s ease-out;
}

.quick-post-event-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--clr-border, #334155);
}

.quick-post-event-title {
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--clr-text, #f8fafc);
  margin: 0;
}

.quick-post-participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.35rem;
}

.quick-post-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--clr-surface, #1e293b);
  border: 1px solid var(--clr-border, #334155);
  font-size: 0.82rem;
  color: var(--clr-text, #f8fafc);
}

.quick-post-participant-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--clr-text-muted, #94a3b8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.quick-post-participant-remove:hover {
  color: var(--clr-danger, #ef4444);
}

/* Liens mentions dans les posts */
.mention-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-weight: 600;
  color: var(--clr-primary, #6366f1);
  background: rgba(99, 102, 241, 0.12);
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  vertical-align: baseline;
}

.mention-link:hover {
  background: var(--clr-primary, #6366f1);
  color: #ffffff !important;
  text-decoration: none;
}

.mention-link .mention-symbol {
  opacity: 0.8;
  font-weight: 400;
}

@keyframes wbFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}