:root {
  --bg: #05070f;
  --text: #eef2ff;
  --muted: rgba(255, 255, 255, 0.72);
  --card: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  --blue1: #60a5fa;
  --blue2: #2563eb;
  --green1: #22c55e;
  --green2: #16a34a;
  --danger: rgba(255, 80, 80, 0.2);
  --sidebar-width: 290px;
  --page-ambient-primary: rgba(96, 165, 250, 0.18);
  --page-ambient-secondary: rgba(37, 99, 235, 0.14);
  --page-loading-primary: rgba(96, 165, 250, 0.2);
  --page-loading-secondary: rgba(59, 130, 246, 0.14);
  --page-loading-spinner-main: rgba(96, 165, 250, 0.95);
  --page-loading-spinner-accent: rgba(191, 219, 254, 0.6);
  --page-loading-spinner-glow: rgba(96, 165, 250, 0.22);
  --page-loading-title-glow: rgba(96, 165, 250, 0.12);
}

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

.dashboardAssistantRoot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.dashboardAssistantToggle {
  display: inline-grid;
  grid-template-columns: 30px 0fr;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  padding: 0;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.94), rgba(37, 99, 235, 0.9));
  color: #f8fbff;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 28px rgba(56, 189, 248, 0.26);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    grid-template-columns 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

.dashboardAssistantToggle:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow:
    0 26px 64px rgba(15, 23, 42, 0.42),
    0 0 34px rgba(56, 189, 248, 0.32);
}

.dashboardAssistantRoot:not(.panel-open):not(.is-booting) .dashboardAssistantToggle:hover,
.dashboardAssistantRoot:not(.panel-open):not(.is-booting) .dashboardAssistantToggle:focus-visible {
  grid-template-columns: 30px 1fr;
  width: 232px;
  justify-content: center;
  gap: 12px;
  padding-inline: 18px 22px;
}

.dashboardAssistantToggle:focus-visible,
.dashboardAssistantPanel button:focus-visible,
.dashboardAssistantPanel textarea:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.92);
  outline-offset: 2px;
}

.dashboardAssistantToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-self: center;
}

.dashboardAssistantToggleIconSvg {
  display: block;
  width: 30px;
  height: 30px;
}

.dashboardAssistantToggleText {
  min-width: 0;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  line-height: 1;
  transform: translateX(4px);
  transition:
    max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboardAssistantRoot:not(.panel-open):not(.is-booting) .dashboardAssistantToggle:hover .dashboardAssistantToggleText,
.dashboardAssistantRoot:not(.panel-open):not(.is-booting) .dashboardAssistantToggle:focus-visible .dashboardAssistantToggleText {
  max-width: 150px;
  opacity: 1;
  transform: translateX(0);
}

.dashboardAssistantToggleSpinner {
  display: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-self: center;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.96);
  animation: dashboardAssistantSpin 0.8s linear infinite;
}

.dashboardAssistantRoot.is-booting .dashboardAssistantToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  padding: 0;
}

.dashboardAssistantRoot.is-booting .dashboardAssistantToggleIcon,
.dashboardAssistantRoot.is-booting .dashboardAssistantToggleText {
  display: none;
}

.dashboardAssistantRoot.is-booting .dashboardAssistantToggleSpinner {
  display: inline-flex;
}

.dashboardAssistantPanel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(430px, calc(100vw - 36px));
  height: min(720px, calc(100vh - 36px));
  max-height: calc(100vh - 36px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, var(--page-ambient-primary), transparent 48%),
    linear-gradient(180deg, rgba(12, 18, 30, 0.98), rgba(8, 12, 22, 0.98));
  box-shadow:
    0 28px 90px rgba(3, 8, 20, 0.54),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.dashboardAssistantPanel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dashboardAssistantRoot.panel-open .dashboardAssistantToggle {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  pointer-events: none;
}

.dashboardAssistantHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.dashboardAssistantHeadText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.dashboardAssistantTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.dashboardAssistantTitleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.dashboardAssistantTitleIconSvg {
  display: block;
  width: 24px;
  height: 24px;
}

.dashboardAssistantBeta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.12)),
    rgba(15, 23, 42, 0.42);
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(22, 163, 74, 0.12);
}

.dashboardAssistantQuota {
  margin-top: 7px;
  color: #fda4af;
  font-size: 12px;
  font-weight: 800;
}

.dashboardAssistantHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dashboardAssistantResetBtn {
  width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboardAssistantCloseBtn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
}

.dashboardAssistantIconBtnSvg {
  width: 32px;
  height: 32px;
}

.dashboardAssistantMessages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  gap: 14px;
}

.dashboardAssistantMessage {
  display: flex;
  width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
}

.dashboardAssistantMessage--user {
  justify-content: flex-end;
  align-self: flex-end;
}

.dashboardAssistantMessage--assistant {
  justify-content: flex-start;
  align-self: flex-start;
}

.dashboardAssistantMessage--pending .dashboardAssistantBubble {
  padding: 12px 14px;
}

.dashboardAssistantBubble {
  width: fit-content;
  max-width: min(100%, 94%);
  padding: 14px 15px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(3, 8, 20, 0.18);
}

.dashboardAssistantMessage--user .dashboardAssistantBubble {
  border-color: rgba(125, 211, 252, 0.24);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.15)),
    rgba(255, 255, 255, 0.06);
  max-width: min(74%, 360px);
  margin-right: 2px;
  padding: 14px 18px;
}

.dashboardAssistantBubble p {
  margin: 0;
  color: rgba(242, 247, 255, 0.96);
  font-size: 14px;
  line-height: 1.62;
}

.dashboardAssistantBubble p + p {
  margin-top: 10px;
}

.dashboardAssistantRichParagraph {
  margin: 0;
  color: rgba(242, 247, 255, 0.96);
  font-size: 14px;
  line-height: 1.72;
}

.dashboardAssistantRichParagraph + .dashboardAssistantRichParagraph,
.dashboardAssistantRichParagraph + .dashboardAssistantRichList,
.dashboardAssistantRichList + .dashboardAssistantRichParagraph,
.dashboardAssistantRichList + .dashboardAssistantRichList {
  margin-top: 12px;
}

.dashboardAssistantRichParagraph--lead {
  color: #f8fbff;
  font-weight: 500;
}

.dashboardAssistantRichParagraph strong,
.dashboardAssistantRichList strong {
  color: #f8fbff;
  font-weight: 900;
}

.dashboardAssistantRichList {
  margin: 0;
  padding-left: 18px;
  color: rgba(232, 240, 255, 0.92);
  font-size: 14px;
  line-height: 1.72;
}

.dashboardAssistantRichList li + li {
  margin-top: 8px;
}

.dashboardAssistantRichList li::marker {
  color: rgba(125, 211, 252, 0.95);
  font-weight: 800;
}

.dashboardAssistantStepCard,
.dashboardAssistantAdviceCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(125, 211, 252, 0.12);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.03)
  );
}

.dashboardAssistantAdviceCard {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border-color: rgba(251, 191, 36, 0.16);
  background: linear-gradient(
    180deg,
    rgba(245, 158, 11, 0.08),
    rgba(245, 158, 11, 0.035)
  );
}

.dashboardAssistantStepBadge {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(37, 99, 235, 0.18));
  color: #eff6ff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14);
}

.dashboardAssistantStepBody {
  min-width: 0;
}

.dashboardAssistantStepTitle,
.dashboardAssistantAdviceTitle {
  color: #f8fbff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.dashboardAssistantStepCopy,
.dashboardAssistantAdviceCopy {
  margin-top: 6px;
  color: rgba(236, 244, 255, 0.92);
  font-size: 14px;
  line-height: 1.72;
}

.dashboardAssistantStepCopy strong,
.dashboardAssistantAdviceCopy strong {
  color: #f8fbff;
  font-weight: 900;
}

.dashboardAssistantMetaRow {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboardAssistantMetaTitle {
  margin-bottom: 8px;
  color: rgba(191, 219, 254, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboardAssistantChipRow,
.dashboardAssistantActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboardAssistantChip {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: rgba(10, 18, 34, 0.7);
  color: #ecf7ff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.dashboardAssistantChip:hover {
  background: rgba(56, 189, 248, 0.14);
}

.dashboardAssistantActionBtn {
  min-height: 40px;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
}

.dashboardAssistantSuggestionGrid {
  display: grid;
  gap: 9px;
}

.dashboardAssistantSuggestionCard {
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  color: rgba(244, 248, 255, 0.95);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.dashboardAssistantSuggestionCard:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.22);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(37, 99, 235, 0.06));
}

.dashboardAssistantEmptyCard {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.04);
}

.dashboardAssistantEmptyTitle {
  font-size: 18px;
  font-weight: 900;
}

.dashboardAssistantEmptyText {
  margin: 8px 0 16px;
  color: rgba(232, 240, 255, 0.78);
  font-size: 14px;
  line-height: 1.58;
}

.dashboardAssistantInlineLoader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboardAssistantInlineLoader span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(191, 219, 254, 0.88);
  animation: dashboardAssistantInlinePulse 1s ease-in-out infinite;
}

.dashboardAssistantInlineLoader span:nth-child(2) {
  animation-delay: 0.16s;
}

.dashboardAssistantInlineLoader span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes dashboardAssistantInlinePulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.88);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.dashboardAssistantLoadingOverlay {
  position: absolute;
  inset: 76px 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, rgba(7, 12, 22, 0.56), rgba(7, 12, 22, 0.72));
  backdrop-filter: blur(8px);
  z-index: 2;
}

.dashboardAssistantLoadingCard {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  background: rgba(10, 18, 34, 0.82);
  box-shadow: 0 14px 34px rgba(3, 8, 20, 0.28);
}

.dashboardAssistantLoadingSpinner {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(125, 211, 252, 0.18);
  border-top-color: rgba(125, 211, 252, 0.96);
  animation: dashboardAssistantSpin 0.8s linear infinite;
}

.dashboardAssistantLoadingText {
  color: rgba(241, 246, 255, 0.92);
  font-size: 13px;
  font-weight: 800;
}

.dashboardAssistantComposer {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 14, 24, 0.92);
}

.dashboardAssistantComposerField {
  position: relative;
}

.dashboardAssistantComposer.is-busy .dashboardAssistantComposerField {
  opacity: 0.72;
}

.dashboardAssistantInput {
  width: 100%;
  resize: none;
  min-height: 54px;
  max-height: 180px;
  overflow-y: auto;
  padding: 15px 66px 15px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fbff;
  font: inherit;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

.dashboardAssistantInput::placeholder {
  color: rgba(226, 232, 240, 0.56);
  line-height: 1.45;
}

.dashboardAssistantInput:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 251, 255, 0.7);
}

.dashboardAssistantSendBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboardAssistantSendBtnSvg {
  width: 28px;
  height: 28px;
}

.dashboardAssistantSendBtn:disabled {
  opacity: 0.86;
}

.dashboardAssistantSendBtn.is-loading .dashboardAssistantSendBtnSvg {
  opacity: 0;
}

.dashboardAssistantSendBtn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: dashboardAssistantSpin 0.8s linear infinite;
}

@keyframes dashboardAssistantSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 960px) {
  .dashboardAssistantRoot {
    right: 16px;
    bottom: 16px;
  }

  .dashboardAssistantToggle {
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    grid-template-columns: 28px 0fr;
  }

  .dashboardAssistantPanel {
    right: 0;
    bottom: 0;
    width: min(420px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    border-radius: 24px;
  }

  .dashboardAssistantHead {
    gap: 12px;
    padding: 12px 14px;
  }

  .dashboardAssistantHeadActions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .dashboardAssistantResetBtn {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
}

@media (max-width: 640px) {
  .dashboardAssistantRoot {
    right: 14px;
    bottom: 14px;
    left: auto;
  }

  .dashboardAssistantPanel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: min(720px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 22px;
  }

  .dashboardAssistantTitle {
    font-size: 16px;
    line-height: 1.15;
  }

  .dashboardAssistantBeta {
    margin-top: 5px;
    padding: 4px 9px;
    font-size: 10px;
    letter-spacing: 0.07em;
  }

  .dashboardAssistantBubble {
    max-width: 100%;
  }

  .dashboardAssistantHead {
    gap: 10px;
    padding: 10px 12px;
  }

  .dashboardAssistantResetBtn,
  .dashboardAssistantCloseBtn {
    width: 46px;
    height: 46px;
    min-height: 46px;
    flex: 0 0 46px;
  }

  .dashboardAssistantIconBtnSvg {
    width: 28px;
    height: 28px;
  }

  .dashboardAssistantMessages {
    padding: 14px 14px 10px;
  }

  .dashboardAssistantComposer {
    padding: 12px 14px 14px;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body[data-page-theme="company"] {
  --page-ambient-primary: rgba(34, 211, 238, 0.19);
  --page-ambient-secondary: rgba(6, 182, 212, 0.14);
  --page-loading-primary: rgba(34, 211, 238, 0.22);
  --page-loading-secondary: rgba(6, 182, 212, 0.15);
  --page-loading-spinner-main: rgba(34, 211, 238, 0.95);
  --page-loading-spinner-accent: rgba(103, 232, 249, 0.65);
  --page-loading-spinner-glow: rgba(34, 211, 238, 0.25);
  --page-loading-title-glow: rgba(34, 211, 238, 0.14);
}

body[data-page-theme="links-qr"] {
  --page-ambient-primary: rgba(251, 146, 60, 0.19);
  --page-ambient-secondary: rgba(245, 158, 11, 0.14);
  --page-loading-primary: rgba(251, 146, 60, 0.23);
  --page-loading-secondary: rgba(245, 158, 11, 0.16);
  --page-loading-spinner-main: rgba(251, 146, 60, 0.95);
  --page-loading-spinner-accent: rgba(254, 215, 170, 0.66);
  --page-loading-spinner-glow: rgba(251, 146, 60, 0.26);
  --page-loading-title-glow: rgba(251, 146, 60, 0.15);
}

body[data-page-theme="menu"] {
  --page-ambient-primary: rgba(34, 197, 94, 0.19);
  --page-ambient-secondary: rgba(16, 185, 129, 0.14);
  --page-loading-primary: rgba(34, 197, 94, 0.22);
  --page-loading-secondary: rgba(16, 185, 129, 0.15);
  --page-loading-spinner-main: rgba(34, 197, 94, 0.95);
  --page-loading-spinner-accent: rgba(187, 247, 208, 0.66);
  --page-loading-spinner-glow: rgba(34, 197, 94, 0.25);
  --page-loading-title-glow: rgba(34, 197, 94, 0.14);
}

body[data-page-theme="products-services"] {
  --page-ambient-primary: rgba(180, 83, 9, 0.2);
  --page-ambient-secondary: rgba(120, 53, 15, 0.15);
  --page-loading-primary: rgba(180, 83, 9, 0.24);
  --page-loading-secondary: rgba(120, 53, 15, 0.17);
  --page-loading-spinner-main: rgba(217, 119, 6, 0.95);
  --page-loading-spinner-accent: rgba(254, 215, 170, 0.68);
  --page-loading-spinner-glow: rgba(180, 83, 9, 0.27);
  --page-loading-title-glow: rgba(180, 83, 9, 0.16);
}

body[data-page-theme="loyalty"] {
  --page-ambient-primary: rgba(236, 72, 153, 0.2);
  --page-ambient-secondary: rgba(244, 114, 182, 0.15);
  --page-loading-primary: rgba(236, 72, 153, 0.24);
  --page-loading-secondary: rgba(244, 114, 182, 0.17);
  --page-loading-spinner-main: rgba(236, 72, 153, 0.95);
  --page-loading-spinner-accent: rgba(251, 207, 232, 0.68);
  --page-loading-spinner-glow: rgba(236, 72, 153, 0.27);
  --page-loading-title-glow: rgba(236, 72, 153, 0.16);
}

body[data-page-theme="events"] {
  --page-ambient-primary: rgba(192, 132, 252, 0.19);
  --page-ambient-secondary: rgba(168, 85, 247, 0.14);
  --page-loading-primary: rgba(192, 132, 252, 0.23);
  --page-loading-secondary: rgba(168, 85, 247, 0.16);
  --page-loading-spinner-main: rgba(192, 132, 252, 0.95);
  --page-loading-spinner-accent: rgba(233, 213, 255, 0.67);
  --page-loading-spinner-glow: rgba(192, 132, 252, 0.26);
  --page-loading-title-glow: rgba(192, 132, 252, 0.15);
}

body[data-page-theme="special-offer"] {
  --page-ambient-primary: rgba(250, 204, 21, 0.2);
  --page-ambient-secondary: rgba(245, 158, 11, 0.15);
  --page-loading-primary: rgba(250, 204, 21, 0.24);
  --page-loading-secondary: rgba(245, 158, 11, 0.17);
  --page-loading-spinner-main: rgba(250, 204, 21, 0.95);
  --page-loading-spinner-accent: rgba(254, 240, 138, 0.67);
  --page-loading-spinner-glow: rgba(250, 204, 21, 0.27);
  --page-loading-title-glow: rgba(250, 204, 21, 0.16);
}

body[data-page-theme="contacts"] {
  --page-ambient-primary: rgba(59, 130, 246, 0.19);
  --page-ambient-secondary: rgba(37, 99, 235, 0.14);
  --page-loading-primary: rgba(59, 130, 246, 0.23);
  --page-loading-secondary: rgba(37, 99, 235, 0.15);
  --page-loading-spinner-main: rgba(59, 130, 246, 0.95);
  --page-loading-spinner-accent: rgba(191, 219, 254, 0.66);
  --page-loading-spinner-glow: rgba(59, 130, 246, 0.26);
  --page-loading-title-glow: rgba(59, 130, 246, 0.15);
}

body[data-page-theme="retargeting-mail"] {
  --page-ambient-primary: rgba(99, 102, 241, 0.2);
  --page-ambient-secondary: rgba(79, 70, 229, 0.14);
  --page-loading-primary: rgba(99, 102, 241, 0.24);
  --page-loading-secondary: rgba(79, 70, 229, 0.16);
  --page-loading-spinner-main: rgba(99, 102, 241, 0.95);
  --page-loading-spinner-accent: rgba(199, 210, 254, 0.67);
  --page-loading-spinner-glow: rgba(99, 102, 241, 0.27);
  --page-loading-title-glow: rgba(99, 102, 241, 0.15);
}

body[data-page-theme="sms-marketing"] {
  --page-ambient-primary: rgba(45, 212, 191, 0.2);
  --page-ambient-secondary: rgba(20, 184, 166, 0.14);
  --page-loading-primary: rgba(45, 212, 191, 0.24);
  --page-loading-secondary: rgba(20, 184, 166, 0.16);
  --page-loading-spinner-main: rgba(45, 212, 191, 0.95);
  --page-loading-spinner-accent: rgba(153, 246, 228, 0.68);
  --page-loading-spinner-glow: rgba(45, 212, 191, 0.27);
  --page-loading-title-glow: rgba(45, 212, 191, 0.15);
}

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      900px 500px at 18% 10%,
      var(--page-ambient-primary),
      transparent 60%
    ),
    radial-gradient(
      900px 520px at 78% 22%,
      var(--page-ambient-secondary),
      transparent 60%
    ),
    linear-gradient(180deg, #04050a 0%, #070b14 45%, #04050a 100%);
}

.brandRowEmpty {
  justify-content: flex-end;
  min-height: 18px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 18px 44px;
  position: relative;
  z-index: 1;
}
.guardScreen {
  position: relative;
  z-index: 1;
}
.centerCard {
  max-width: 720px;
  margin: 60px auto 0;
  text-align: center;
}
.dashboardBootLoaderCard {
  position: relative;
  overflow: visible;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 26px;
  gap: 30px;
  padding: 0;
  min-height: 0;
  background: transparent;
  width: min(92vw, 760px);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateY(0) scale(1);
  opacity: 1;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboardBootLoaderCard::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(78vw, 540px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    rgba(96, 165, 250, 0),
    rgba(96, 165, 250, 0.26),
    rgba(34, 211, 238, 0.12),
    rgba(96, 165, 250, 0)
  );
  filter: blur(26px);
  animation:
    dashboardBootSweep 7.2s linear infinite,
    dashboardBootHaloPalette 11s ease-in-out infinite;
  pointer-events: none;
}

.dashboardBootLoaderCard::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  border-radius: 999px;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0) 82%
  );
  opacity: 0;
  transform: translateX(-34%) rotate(-8deg);
  filter: blur(4px);
  animation: dashboardBootShimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}

.dashboardBootFullscreen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 16% 10%, rgba(96, 165, 250, 0.2), transparent 38%),
    radial-gradient(circle at 84% 14%, rgba(168, 85, 247, 0.18), transparent 36%),
    radial-gradient(circle at 50% 86%, rgba(45, 212, 191, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(5, 7, 15, 0.9), rgba(3, 6, 13, 0.9));
  backdrop-filter: blur(12px) saturate(120%);
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboardBootFullscreen.is-enter-from {
  opacity: 0;
  transform: scale(1.02);
  filter: blur(8px) saturate(112%);
}

.dashboardBootFullscreen.is-enter-to {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(118%);
}

.dashboardBootFullscreen.is-exiting {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(8px) saturate(126%);
}

.dashboardBootFullscreen.is-exiting .dashboardBootLoaderCard {
  transform: translateY(-10px) scale(0.965);
  opacity: 0;
  filter: blur(2px);
}

.dashboardBootFullscreen.is-exiting .dashboardBootLoaderCard::before {
  animation:
    dashboardBootSweep 1.3s linear 1,
    dashboardBootHaloBurst 0.42s ease-out 1;
}

.dashboardBootFullscreen.is-exiting .dashboardBootLoaderCard::after {
  animation: dashboardBootExitFlash 0.4s ease-out 1;
}

.dashboard.is-reveal-from {
  opacity: 0;
  transform: translateY(12px) scale(0.996);
  filter: blur(2px);
}

.dashboard.is-reveal-to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboardBootLoaderVisual {
  position: relative;
  width: clamp(108px, 12vw, 146px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
}

.dashboardBootCore {
  width: 36%;
  height: 36%;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #dbeafe, #60a5fa 58%, #1d4ed8);
  box-shadow:
    0 0 0 8px rgba(96, 165, 250, 0.08),
    0 0 30px rgba(96, 165, 250, 0.44);
  animation:
    dashboardBootPulse 2.1s ease-in-out infinite,
    dashboardBootCoreFlicker 4.6s ease-in-out infinite;
}

.dashboardBootOrb {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.42);
}

.dashboardBootOrb--a {
  width: 100%;
  height: 100%;
  animation: dashboardBootRotate 4.8s linear infinite;
}

.dashboardBootOrb--b {
  width: 78%;
  height: 78%;
  border-color: rgba(147, 197, 253, 0.54);
  animation: dashboardBootRotateReverse 3.4s linear infinite;
}

.dashboardBootOrb--c {
  width: 126%;
  height: 58%;
  border-color: rgba(125, 211, 252, 0.38);
  animation: dashboardBootRotate 6.2s linear infinite;
}

.dashboardLoadErrorOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 24% 12%, rgba(239, 68, 68, 0.16), transparent 34%),
    radial-gradient(circle at 76% 20%, rgba(251, 191, 36, 0.12), transparent 36%),
    rgba(2, 6, 14, 0.58);
  backdrop-filter: blur(16px) saturate(120%);
}

.dashboardLoadErrorCard {
  max-width: 560px;
  width: min(560px, 100%);
  margin: 0;
  border-color: rgba(248, 113, 113, 0.38);
  background:
    radial-gradient(circle at 18% 16%, rgba(248, 113, 113, 0.16), transparent 42%),
    radial-gradient(circle at 82% 22%, rgba(251, 191, 36, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(20, 10, 12, 0.88), rgba(14, 8, 10, 0.82));
}

.guardTitle {
  font-size: 24px;
  font-weight: 950;
}
.guardText {
  margin-top: 8px;
  color: var(--muted);
}
.guardActions {
  margin-top: 16px;
}
.errorCard {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 80, 80, 0.28);
}

@keyframes dashboardBootRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dashboardBootRotateReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes dashboardBootPulse {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes dashboardBootCoreFlicker {
  0%,
  100% {
    box-shadow:
      0 0 0 8px rgba(96, 165, 250, 0.08),
      0 0 30px rgba(96, 165, 250, 0.44);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(96, 165, 250, 0.11),
      0 0 42px rgba(96, 165, 250, 0.56);
  }
}

@keyframes dashboardBootSweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dashboardBootHaloPalette {
  0% {
    filter: blur(26px) hue-rotate(0deg) saturate(1.06);
    opacity: 0.84;
  }
  16% {
    filter: blur(26px) hue-rotate(30deg) saturate(1.14);
    opacity: 0.92;
  }
  33% {
    filter: blur(26px) hue-rotate(72deg) saturate(1.2);
    opacity: 0.9;
  }
  50% {
    filter: blur(26px) hue-rotate(128deg) saturate(1.16);
    opacity: 0.88;
  }
  66% {
    filter: blur(26px) hue-rotate(186deg) saturate(1.12);
    opacity: 0.91;
  }
  83% {
    filter: blur(26px) hue-rotate(248deg) saturate(1.18);
    opacity: 0.89;
  }
  100% {
    filter: blur(26px) hue-rotate(320deg) saturate(1.1);
    opacity: 0.86;
  }
}

@keyframes dashboardBootShimmer {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-34%) rotate(-8deg);
  }
  36% {
    opacity: 0;
  }
  52% {
    opacity: 0.66;
  }
  68% {
    opacity: 0;
    transform: translateX(36%) rotate(-8deg);
  }
}

@keyframes dashboardBootHaloBurst {
  from {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(24px);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.14);
    filter: blur(34px);
  }
}

@keyframes dashboardBootExitFlash {
  0% {
    opacity: 0;
    transform: translateX(-24%) rotate(-8deg);
  }
  45% {
    opacity: 0.74;
  }
  100% {
    opacity: 0;
    transform: translateX(24%) rotate(-8deg);
  }
}

.dashboard {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(3, 6, 13, 0.72);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-area: sidebar;
  order: 0;
  justify-self: stretch;
  align-self: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebarTop,
.sidebarBottom {
  display: grid;
  gap: 12px;
}
.brandRow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brandLogo {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}
.brandName {
  font-size: 24px;
  font-weight: 980;
  letter-spacing: 0.2px;
}
.brandSub {
  display: none;
}

.menu {
  display: grid;
  gap: 22px;
}
.menuSection {
  display: grid;
  gap: 10px;
}

.menuSection + .menuSection {
  position: relative;
  padding-top: 18px;
}

.menuSection + .menuSection::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0)
  );
}

.sidebarSectionDivider {
  height: 1px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
}
.menuSectionTitle {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a5d8ff, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.menuItem {
  --menu-accent-rgb: 96, 165, 250;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  font-size: 17px;
  line-height: 1.2;
  padding: 16px 16px;
  cursor: pointer;
  font-weight: 900;
  transition: 0.18s ease;
  text-decoration: none;
}
.menuItem::before,
.menuItem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.menuItem::before {
  background: radial-gradient(
    118% 132% at -24% -36%,
    rgba(var(--menu-accent-rgb), 0.28) 0%,
    rgba(255, 255, 255, 0) 78%
  );
  opacity: 0.9;
}

.menuItem::after {
  background: radial-gradient(
    92% 106% at 120% 128%,
    rgba(var(--menu-accent-rgb), 0.18) 0%,
    rgba(255, 255, 255, 0) 80%
  );
  opacity: 0.8;
}

.menuItem > * {
  position: relative;
  z-index: 1;
}

.menuItem[data-page="home"] {
  --menu-accent-rgb: 59, 130, 246;
}

.menuItem[data-page="company"] {
  --menu-accent-rgb: 34, 211, 238;
}

.menuItem[data-page="links-qr"] {
  --menu-accent-rgb: 245, 158, 11;
}

.menuItem[data-page="menu"] {
  --menu-accent-rgb: 34, 197, 94;
}

.menuItem[data-page="products-services"] {
  --menu-accent-rgb: 180, 83, 9;
}

.menuItem[data-page="loyalty"] {
  --menu-accent-rgb: 236, 72, 153;
}

.menuItem[data-page="events"] {
  --menu-accent-rgb: 192, 132, 252;
}

.menuItem[data-page="special-offer"] {
  --menu-accent-rgb: 250, 204, 21;
}

.menuItem[data-page="contacts"] {
  --menu-accent-rgb: 59, 130, 246;
}

.menuItem[data-page="retargeting-mail"] {
  --menu-accent-rgb: 99, 102, 241;
}

.menuItem[data-page="sms-marketing"] {
  --menu-accent-rgb: 45, 212, 191;
}

.menuItem:hover {
  border-color: rgba(var(--menu-accent-rgb), 0.44);
  background: rgba(255, 255, 255, 0.07);
}
.menuItem.is-active {
  background: linear-gradient(
    135deg,
    rgba(var(--menu-accent-rgb), 0.34),
    rgba(var(--menu-accent-rgb), 0.24)
  );
  border-color: rgba(var(--menu-accent-rgb), 0.56);
  box-shadow:
    inset 0 0 22px rgba(var(--menu-accent-rgb), 0.16),
    0 12px 35px rgba(0, 0, 0, 0.2);
}

.menuItem.is-active::before {
  opacity: 0.96;
}

.menuItem.is-active::after {
  opacity: 0.82;
}

.mobileCloseMenuBtn {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none !important;
}

.sidebarFooterBrand {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 980;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #86c5ff, #60a5fa, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbarTitleWrap h1 {
  margin: 0;
}

.sidebarBottom {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 10px;
}

.sidebarBottomDivider {
  height: 1px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0)
  );
  margin-bottom: 4px;
}

.sidebarFooterBtn {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  border-radius: 16px;
}

.sidebarFooterBtnPrimary {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.primaryBtn.sidebarFooterBtnPrimary {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 22% 18%, rgba(96, 165, 250, 0.16), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(96, 165, 250, 0.34);
  box-shadow:
    inset 0 0 16px rgba(96, 165, 250, 0.11),
    inset 0 0 0 1px rgba(96, 165, 250, 0.08),
    0 10px 24px rgba(30, 64, 175, 0.12);
}

.primaryBtn.sidebarFooterBtnPrimary:hover {
  border-color: rgba(147, 197, 253, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(96, 165, 250, 0.2), rgba(255, 255, 255, 0.07) 62%);
  box-shadow:
    inset 0 0 20px rgba(96, 165, 250, 0.13),
    inset 0 0 0 1px rgba(147, 197, 253, 0.12),
    0 12px 28px rgba(30, 64, 175, 0.16);
  filter: none;
}

.sidebarFooterBtnSupport,
.sidebarFooterBtnVideo,
.sidebarFooterBtnSubscription {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}

.sidebarFooterBtnSupport {
  border-color: rgba(250, 204, 21, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, 0.08),
    0 10px 24px rgba(124, 69, 7, 0.12);
  color: #fcd34d;
}

.sidebarFooterBtnSupport:hover,
.sidebarFooterBtnVideo:hover,
.sidebarFooterBtnSubscription:hover {
  background: rgba(255, 255, 255, 0.07);
}

.sidebarFooterBtnSupport:hover {
  border-color: rgba(250, 204, 21, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, 0.14),
    0 12px 28px rgba(124, 69, 7, 0.16);
}

.sidebarFooterBtnVideo {
  border-color: rgba(74, 222, 128, 0.34);
  color: #86efac;
  box-shadow:
    inset 0 0 0 1px rgba(74, 222, 128, 0.08),
    0 10px 24px rgba(22, 101, 52, 0.12);
}

.sidebarFooterBtnVideo:hover {
  border-color: rgba(74, 222, 128, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(74, 222, 128, 0.14),
    0 12px 28px rgba(22, 101, 52, 0.16);
}

.sidebarFooterBtnSubscription {
  border-color: rgba(192, 132, 252, 0.34);
  color: #d8b4fe;
  box-shadow:
    inset 0 0 0 1px rgba(192, 132, 252, 0.08),
    0 10px 24px rgba(107, 33, 168, 0.12);
}

.sidebarFooterBtnSubscription:hover {
  border-color: rgba(192, 132, 252, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(192, 132, 252, 0.14),
    0 12px 28px rgba(107, 33, 168, 0.16);
}

.sidebarLegalLinks {
  margin-top: 10px;
  padding-top: 4px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.sidebarLegalLinks a {
  color: rgba(255, 255, 255, 0.46);
  text-decoration: none;
  transition:
    color 0.18s ease,
    transform 0.18s ease,
    text-shadow 0.18s ease;
}

.sidebarLegalLinks a:hover {
  color: rgba(255, 255, 255, 0.76);
  transform: translateY(-1px);
  text-shadow: 0 0 14px rgba(147, 197, 253, 0.12);
}

.sidebarLegalLinks span {
  color: rgba(255, 255, 255, 0.22);
}

.smsMarketingPlaceholder {
  min-height: 280px;
  display: grid;
  align-content: center;
  gap: 12px;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
}

.mainArea {
  grid-area: main;
  order: 1;
  min-width: 0;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.viewStage {
  position: relative;
  min-height: calc(100vh - 88px);
}

.viewMount {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.viewMount > * {
  min-width: 0;
}

.viewMount.is-loading {
  visibility: hidden;
  pointer-events: none;
}

.viewMount.is-transition-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.992);
  filter: blur(3px);
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.viewMount.is-transition-hold {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.viewLoadingOverlay {
  position: fixed;
  left: var(--view-loading-left, 0px);
  top: var(--view-loading-top, 0px);
  width: var(--view-loading-width, 100vw);
  height: var(--view-loading-height, 100vh);
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 24% 10%, var(--page-loading-primary), transparent 34%),
    radial-gradient(circle at 76% 14%, var(--page-loading-secondary), transparent 36%),
    rgba(5, 7, 15, 0.42);
  backdrop-filter: blur(14px) saturate(126%);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.viewLoadingOverlay.is-enter-from {
  opacity: 0;
  transform: translateY(18px) scale(1.02);
  filter: blur(8px) saturate(112%);
}

.viewLoadingOverlay.is-enter-to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(124%);
}

.viewLoadingOverlay.is-exiting {
  opacity: 0;
  transform: translateY(-8px) scale(1.03);
  filter: blur(8px) saturate(126%);
  pointer-events: none;
}

.viewLoadingCard {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 20% 20%, var(--page-loading-primary), transparent 44%),
    radial-gradient(circle at 80% 24%, var(--page-loading-secondary), transparent 46%),
    linear-gradient(180deg, rgba(9, 13, 25, 0.86), rgba(6, 10, 19, 0.82));
  box-shadow:
    0 28px 80px rgba(2, 6, 23, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px) saturate(130%);
  transform: translateY(0) scale(1);
  opacity: 1;
  transition:
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.viewLoadingCard::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(66vw, 420px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0),
    var(--page-loading-primary),
    var(--page-loading-secondary),
    rgba(255, 255, 255, 0)
  );
  filter: blur(24px);
  opacity: 0.86;
  animation:
    dashboardBootSweep 7.2s linear infinite,
    viewLoaderHaloBreath 4.2s ease-in-out infinite;
  pointer-events: none;
}

.viewLoadingCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    114deg,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0.13) 46%,
    rgba(255, 255, 255, 0) 78%
  );
  opacity: 0;
  transform: translateX(-36%);
  filter: blur(3px);
  animation: viewLoaderCardSweep 2.9s ease-in-out infinite;
  pointer-events: none;
}

.viewLoadingVisual {
  position: relative;
  width: clamp(106px, 12vw, 148px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.viewLoadingVisual::before {
  content: "";
  position: absolute;
  width: 144%;
  height: 144%;
  border-radius: 999px;
  border: 1px dashed color-mix(in oklab, var(--page-loading-spinner-accent), transparent 44%);
  opacity: 0.42;
  animation: viewLoaderDashedOrbit 8.6s linear infinite;
}

.viewLoadingOrb {
  position: absolute;
  border-radius: 999px;
  border: 1px solid var(--page-loading-spinner-accent);
}

.viewLoadingOrb--a {
  width: 100%;
  height: 100%;
  animation: dashboardBootRotate 4.8s linear infinite;
}

.viewLoadingOrb--b {
  width: 78%;
  height: 78%;
  border-color: var(--page-loading-spinner-main);
  animation: dashboardBootRotateReverse 3.4s linear infinite;
}

.viewLoadingOrb--c {
  width: 126%;
  height: 58%;
  border-color: var(--page-loading-primary);
  animation: dashboardBootRotate 6.2s linear infinite;
}

.viewLoadingCore {
  width: 36%;
  height: 36%;
  border-radius: 999px;
  background: radial-gradient(
    circle at 35% 30%,
    #ffffff,
    var(--page-loading-spinner-main) 58%,
    var(--page-loading-secondary)
  );
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.06),
    0 0 30px var(--page-loading-spinner-glow);
  animation:
    dashboardBootPulse 2.1s ease-in-out infinite,
    viewLoaderCoreSpark 4.2s ease-in-out infinite;
}

.viewLoadingTitle {
  font-size: clamp(22px, 2.35vw, 32px);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #eff6ff;
  text-shadow: 0 0 20px var(--page-loading-title-glow);
  transform: translateY(0);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.viewLoadingOverlay.is-exiting .viewLoadingCard {
  transform: translateY(-14px) scale(0.955);
  opacity: 0;
  filter: blur(2px);
}

.viewLoadingOverlay.is-exiting .viewLoadingCard::before {
  animation:
    dashboardBootSweep 1.2s linear 1,
    viewLoaderHaloExit 0.34s ease-out 1;
}

.viewLoadingOverlay.is-exiting .viewLoadingCard::after {
  animation: viewLoaderExitFlash 0.34s ease-out 1;
}

.viewLoadingOverlay.is-exiting .viewLoadingTitle {
  transform: translateY(-6px);
  opacity: 0;
}

.viewLoadingOverlay.is-spin-restart .viewLoadingCard::before,
.viewLoadingOverlay.is-spin-restart .viewLoadingCard::after,
.viewLoadingOverlay.is-spin-restart .viewLoadingVisual::before,
.viewLoadingOverlay.is-spin-restart .viewLoadingOrb,
.viewLoadingOverlay.is-spin-restart .viewLoadingCore {
  animation: none !important;
}

.viewMount.is-reveal-from {
  opacity: 0;
  transform: translateY(14px) scale(0.996);
  filter: blur(2px);
}

.viewMount.is-reveal-to {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.44s cubic-bezier(0.22, 1, 0.36, 1);
  animation: viewContentRevealGlow 0.56s ease-out 1;
}
.viewSection {
  display: grid;
  gap: 18px;
}
.stackLg {
  display: grid;
  gap: 20px;
}

.glassCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px 0;
  padding: 14px 18px;
  min-height: 92px;
  background: rgba(8, 12, 22, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
  min-height: 92px;
  width: 100%;
  background: rgba(8, 12, 22, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
}

.topbarIdentity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.topbarLogo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.topbarTrialBanner {
  position: sticky;
  top: 92px;
  z-index: 29;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0;
  padding: 16px 22px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.24),
    rgba(139, 92, 246, 0.24)
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-size: 16px;
}

.topbarTrialBanner[hidden] {
  display: none;
}

.topbarTrialBadge {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ecfdf5;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.topbarTrialLabel {
  color: rgba(241, 245, 249, 0.88);
  font-weight: 700;
  font-size: 16px;
}

.topbarTrialTimer {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.topbarTrialTimer.is-expired {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.4);
}

.topbarTrialBtn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #8b5cf6);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.topbarTrialBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.3);
}

@media (max-width: 640px) {
  .topbarTrialBanner {
    top: 0;
    position: relative;
  }

  .topbarTrialLabel {
    display: none;
  }

  .topbarTrialBtn {
    margin-left: 0;
  }
}

.topbarTitleWrap {
  min-width: 0;
}

.topbarTitleWrap h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 980;
}

.topbarEyebrow,
.sectionEyebrow,
.heroEyebrow {
  color: var(--blue1);
  font-size: 18px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.topbarTitleWrap h1,
.sectionTitle,
.heroTitle {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 980;
}

.sectionHeaderContent > .sectionEyebrow,
.linksPageIntro > .sectionEyebrow,
.contactsHeroIntro > .sectionEyebrow,
.menuHeroCopy > .sectionEyebrow,
.loyaltyStatusCopy > .sectionEyebrow,
.placeholderCard > .sectionEyebrow {
  font-size: 26px;
  line-height: 1.05;
}
.chipsRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.qrBtnCopy {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.qrBtnCopy:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.25);
}

.qrBtnDownload {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.qrBtnDownload:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}

.heroText,
.sectionText,
.cardText,
.modalText {
  color: var(--muted);
  line-height: 1.45;
}
/* Lien direct vers une section de la page publique (header de section) */
.sectionDeepLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 12px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.sectionDeepLink[hidden] {
  display: none;
}
.sectionDeepLinkIco {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
  flex: 0 0 auto;
}
.sectionDeepLinkUrl {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.sectionDeepLinkUrl:hover {
  color: #fff;
  text-decoration: underline;
}
.sectionDeepLinkCopy {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.sectionDeepLinkCopy:hover {
  background: rgba(255, 255, 255, 0.2);
}
.sectionDeepLinkCopy:active {
  transform: scale(0.96);
}
.sectionDeepLinkCopy.is-copied {
  background: rgba(34, 197, 94, 0.32);
}
.heroGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.summaryCard,
.kpiCard {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.summaryCard .summaryLabel,
.kpiLabel {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 850;
  font-size: 12px;
}
.summaryCard .summaryValue,
.kpiValue {
  font-size: 30px;
  font-weight: 980;
  margin-top: 8px;
}
.summaryCard .summarySub,
.kpiSub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.homeDashboardPage {
  gap: 22px;
}

.homeHeroCard,
.homeQuickActionsCard,
.homeMetricsCard,
.homeWatchCard,
.homeModulesCard,
.homeRecentCard {
  padding: 22px;
}

.homeHeroCard {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 18px;
  padding-bottom: 18px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 38%),
    radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
}

.homeHeroGlow {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.8;
  pointer-events: none;
}

.homeHeroGlowA {
  top: -42px;
  right: 40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.24), transparent 72%);
}

.homeHeroGlowB {
  bottom: -48px;
  left: -22px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 74%);
}

.homeHeroHead,
.homeSectionHead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.homeQuickAccessBtn {
  align-self: flex-start;
  white-space: nowrap;
  min-height: 46px;
  padding-inline: 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.2px;
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.12),
    0 16px 34px rgba(37, 99, 235, 0.2);
}

.homeHeroCopy {
  min-width: 0;
}

.homeHeroTopRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.homeHeroEyebrow {
  display: block;
  margin-bottom: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.homeSubscriptionBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.96);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.homeSubscriptionBadge:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.homeSubscriptionBadge--gratuit {
  background:
    radial-gradient(circle at 18% 18%, rgba(134, 239, 172, 0.18), rgba(255, 255, 255, 0.06) 62%),
    rgba(6, 18, 10, 0.28);
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.06);
  color: #dcfce7;
}

.homeSubscriptionBadge--essentiel {
  background:
    radial-gradient(circle at 18% 18%, rgba(147, 197, 253, 0.2), rgba(255, 255, 255, 0.06) 62%),
    rgba(6, 12, 22, 0.28);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.06);
  color: #dbeafe;
}

.homeSubscriptionBadge--pro {
  background:
    radial-gradient(circle at 18% 18%, rgba(216, 180, 254, 0.2), rgba(255, 255, 255, 0.06) 62%),
    rgba(18, 10, 26, 0.28);
  border-color: rgba(139, 92, 246, 0.32);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.08);
  color: #ede9fe;
}

.homeHeroText {
  margin-top: 10px;
  max-width: 620px;
  font-size: 16px;
}

.homeHeroTitle {
  font-size: 36px;
  line-height: 1;
}

.homeSummaryStatus {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.homeSummaryStatus.warning {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(120, 53, 15, 0.26);
}

.homeHeroAside {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 12px;
  flex: 0 0 auto;
}

.homeHeroActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(460px, 100%);
}

.homeHeroActionsSingle {
  grid-template-columns: minmax(0, 1fr);
  width: min(230px, 100%);
  justify-self: end;
}

.homeHeroActionBtn {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.2px;
}

.primaryBtn.homeHeroActionBtnPublic {
  color: #f8fcff;
  background:
    radial-gradient(circle at 22% 18%, rgba(96, 165, 250, 0.26), rgba(255, 255, 255, 0.06) 60%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(96, 165, 250, 0.92));
  box-shadow:
    inset 0 0 18px rgba(96, 165, 250, 0.14),
    0 14px 28px rgba(37, 99, 235, 0.2);
}

.primaryBtn.homeHeroActionBtnPublic:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 0 22px rgba(96, 165, 250, 0.18),
    0 16px 30px rgba(37, 99, 235, 0.24);
}

.ghostBtn.homeHeroActionBtnVideo {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 18% 18%, rgba(129, 140, 248, 0.16), rgba(255, 255, 255, 0.05) 62%),
    rgba(4, 10, 24, 0.26);
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.05);
}

.ghostBtn.homeHeroActionBtnVideo:hover {
  border-color: rgba(129, 140, 248, 0.42);
  background:
    radial-gradient(circle at 18% 18%, rgba(129, 140, 248, 0.2), rgba(255, 255, 255, 0.07) 62%),
    rgba(7, 14, 30, 0.32);
}

.ghostBtn.dashboardGuideBtn {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 212, 191, 0.3), rgba(255, 255, 255, 0.08) 62%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.42), rgba(13, 22, 30, 0.88));
  border-color: rgba(45, 212, 191, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(45, 212, 191, 0.12),
    0 14px 30px rgba(20, 184, 166, 0.18);
}

.ghostBtn.dashboardGuideBtn:hover {
  border-color: rgba(94, 234, 212, 0.74);
  background:
    radial-gradient(circle at 18% 18%, rgba(94, 234, 212, 0.34), rgba(255, 255, 255, 0.1) 62%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.82), rgba(8, 18, 24, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(94, 234, 212, 0.16),
    0 16px 34px rgba(20, 184, 166, 0.22);
}

.ghostBtn.companyConfigHeaderBtn {
  color: rgba(255, 255, 255, 0.98);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.2px;
  background:
    radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.3), rgba(255, 255, 255, 0.08) 62%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(13, 22, 30, 0.88));
  border-color: rgba(56, 189, 248, 0.54);
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.12),
    0 14px 30px rgba(37, 99, 235, 0.18);
}

.ghostBtn.companyConfigHeaderBtn:hover {
  border-color: rgba(125, 211, 252, 0.76);
  background:
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, 0.34), rgba(255, 255, 255, 0.1) 62%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(8, 18, 24, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.16),
    0 16px 34px rgba(37, 99, 235, 0.24);
}

.emailMarketingHeaderActions .dashboardGuideBtn,
.smsMarketingHeaderActions .dashboardGuideBtn {
  align-self: start;
  min-height: 48px;
  height: auto;
}

.homeQuickActionsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.homeQuickActionsGrid.homeQuickActionsGridDual {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  align-items: start;
}

.homeQuickActionsGrid.homeQuickActionsGridSingle {
  grid-template-columns: 1fr;
}

.homeQuickGroup {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.homeQuickGroupLoyalty {
  align-content: start;
}

.homeQuickGroupOffer {
  align-content: start;
}

.homeQuickGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeQuickGroupTitle {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 980;
}

.homeQuickGroupButtons {
  display: grid;
  gap: 14px;
}

.homeQuickGroupButtonsLoyalty {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homeQuickAction {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.homeQuickAction:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.homeQuickAction:disabled {
  opacity: 0.6;
  cursor: wait;
}

.homeQuickActionPoints {
  background: linear-gradient(135deg, #4f8df8 0%, #2d6cdf 52%, #1f55c7 100%);
}

.homeQuickActionReward {
  background: linear-gradient(135deg, #2449b8 0%, #1b3f9c 52%, #122b73 100%);
}

.homeQuickActionOffer {
  background: linear-gradient(135deg, #af560e 0%, #d97706 52%, #f3b43f 100%);
}

.homeQuickActionIcon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.homeQuickActionCopy {
  min-width: 0;
}

.homeQuickActionLabel {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
  white-space: normal;
  overflow-wrap: anywhere;
}

.homeEmptyState {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.homeMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.homeMetricsLoading {
  min-height: 236px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 28px 20px;
}

.homeMetricsLoadingOrb {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(96, 165, 250, 0.95);
  border-right-color: rgba(59, 130, 246, 0.8);
  box-shadow:
    0 0 0 8px rgba(96, 165, 250, 0.08),
    0 18px 36px rgba(37, 99, 235, 0.16);
  animation: homeMetricsSpin 0.9s linear infinite;
}

.homeMetricsLoadingText {
  font-size: 15px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

@keyframes homeMetricsSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.homeMetricCard {
  min-height: 150px;
  padding: 18px 18px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 38px rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 12px;
  align-content: start;
}

.homeMetricCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeMetricCardTitle {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.96);
}

.homeMetricCardPeriod {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.homeMetricStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.homeMetricCardLoyalty .homeMetricStatsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.homeMetricCardAutoSpan2 {
  grid-column: span 2;
}

.homeMetricStat {
  min-width: 0;
  padding: 14px 15px 12px;
  border-radius: 18px;
  background: rgba(8, 12, 22, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 6px;
  align-content: start;
}

.homeMetricStatValue {
  font-size: 34px;
  line-height: 0.98;
  font-weight: 980;
  color: #fff;
  letter-spacing: -0.03em;
}

.homeMetricStatValue.is-loading {
  position: relative;
  color: transparent;
  min-height: 1em;
  user-select: none;
}

.homeMetricStatValue.is-loading::after {
  content: "";
  display: block;
  width: min(92px, 88%);
  max-width: 100%;
  height: 0.78em;
  margin-top: 0.06em;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.16)
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: homeMetricValuePulse 1.15s ease-in-out infinite;
}

.homeMetricCardLoyalty .homeMetricStatValue.is-loading::after {
  width: min(110px, 92%);
}

@keyframes homeMetricValuePulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleX(0.985);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.homeMetricStatLabel {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.72);
}

.homeMetricCardPage {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(34, 211, 238, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(6, 182, 212, 0.2), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardContacts {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(59, 130, 246, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(37, 99, 235, 0.21), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardLoyalty {
  grid-column: span 2;
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(236, 72, 153, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(244, 114, 182, 0.22), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardOffers {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(250, 204, 21, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(245, 158, 11, 0.21), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardMenu {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(34, 197, 94, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(16, 185, 129, 0.21), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardProductsServices {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(180, 83, 9, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(120, 53, 15, 0.21), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeMetricCardEvents {
  background:
    radial-gradient(360px 220px at 10% 0%, rgba(192, 132, 252, 0.34), transparent 68%),
    radial-gradient(280px 180px at 85% 100%, rgba(168, 85, 247, 0.22), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
}

.homeBottomGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.homeMainStack,
.homeSideStack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.homeInsightList {
  display: grid;
  gap: 10px;
}

.homeInsightItem {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.homeInsightItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.homeInsightLabel {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.homeInsightMeta {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.homeInsightTitle {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.homeInsightText {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.homeModulesGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.homeModuleCard {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.homeModuleTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.homeModuleName {
  font-size: 15px;
  font-weight: 900;
}

.homeModuleBadge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
}

.homeModuleBadge.active {
  color: #d1fae5;
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(52, 211, 153, 0.3);
}

.homeModuleBadge.inactive {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(248, 113, 113, 0.25);
}

.homeModuleText {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.loyaltyQuickCard {
  display: grid;
  gap: 16px;
}

.loyaltyQuickHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.loyaltyQuickTitle {
  font-size: 24px;
}

.loyaltyQuickText {
  margin-top: 8px;
}

.loyaltyQuickGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.loyaltyQuickBtn {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 24px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  font-weight: 950;
  transition: 0.18s ease;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.loyaltyQuickBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.loyaltyQuickBtnPoints {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.92));
}

.loyaltyQuickBtnReward {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.92));
}

.loyaltyQuickBtnOffer {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(124, 58, 237, 0.92));
}

.loyaltyQuickEmoji {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 30px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: 0 0 auto;
}

.loyaltyQuickCopy {
  display: grid;
  gap: 4px;
}

.loyaltyQuickLabel {
  font-size: 24px;
  line-height: 1.05;
}

.loyaltyQuickSub {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.84);
}

.primaryBtn,
.ghostBtn,
.smallBtn,
.successBtn,
.iconBtn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.18s ease;
  touch-action: manipulation;
}
.primaryBtn {
  color: #071327;
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
}
.primaryBtn:hover,
.successBtn:hover {
  filter: brightness(1.04);
}
.ghostBtn,
.smallBtn,
.iconBtn {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.ghostBtn:hover,
.smallBtn:hover,
.iconBtn:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.ghostBtn.sidebarFooterBtnSupport {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 22% 18%, rgba(251, 191, 36, 0.09), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(250, 204, 21, 0.34);
  box-shadow:
    inset 0 0 14px rgba(251, 191, 36, 0.08),
    inset 0 0 0 1px rgba(251, 191, 36, 0.08),
    0 10px 24px rgba(124, 69, 7, 0.12);
}

.ghostBtn.sidebarFooterBtnSupport:hover {
  border-color: rgba(250, 204, 21, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(251, 191, 36, 0.12), rgba(255, 255, 255, 0.07) 62%);
  box-shadow:
    inset 0 0 18px rgba(251, 191, 36, 0.1),
    inset 0 0 0 1px rgba(251, 191, 36, 0.14),
    0 12px 28px rgba(124, 69, 7, 0.16);
}

.ghostBtn.sidebarFooterBtnVideo {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 22% 18%, rgba(74, 222, 128, 0.09), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(74, 222, 128, 0.34);
  box-shadow:
    inset 0 0 14px rgba(74, 222, 128, 0.08),
    inset 0 0 0 1px rgba(74, 222, 128, 0.08),
    0 10px 24px rgba(22, 101, 52, 0.12);
}

.ghostBtn.sidebarFooterBtnVideo:hover {
  border-color: rgba(74, 222, 128, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(74, 222, 128, 0.12), rgba(255, 255, 255, 0.07) 62%);
  box-shadow:
    inset 0 0 18px rgba(74, 222, 128, 0.1),
    inset 0 0 0 1px rgba(74, 222, 128, 0.14),
    0 12px 28px rgba(22, 101, 52, 0.16);
}

.ghostBtn.sidebarFooterBtnGuide {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 22% 18%, rgba(45, 212, 191, 0.09), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(45, 212, 191, 0.34);
  box-shadow:
    inset 0 0 14px rgba(45, 212, 191, 0.08),
    inset 0 0 0 1px rgba(45, 212, 191, 0.08),
    0 10px 24px rgba(17, 94, 89, 0.12);
}

.ghostBtn.sidebarFooterBtnGuide:hover {
  border-color: rgba(45, 212, 191, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(45, 212, 191, 0.12), rgba(255, 255, 255, 0.07) 62%);
  box-shadow:
    inset 0 0 18px rgba(45, 212, 191, 0.1),
    inset 0 0 0 1px rgba(45, 212, 191, 0.14),
    0 12px 28px rgba(17, 94, 89, 0.16);
}

.ghostBtn.sidebarFooterBtnSubscription {
  color: rgba(255, 255, 255, 0.96);
  background:
    radial-gradient(circle at 22% 18%, rgba(192, 132, 252, 0.09), rgba(255, 255, 255, 0.04) 62%);
  border: 1px solid rgba(192, 132, 252, 0.34);
  box-shadow:
    inset 0 0 14px rgba(192, 132, 252, 0.08),
    inset 0 0 0 1px rgba(192, 132, 252, 0.08),
    0 10px 24px rgba(107, 33, 168, 0.12);
}

.ghostBtn.sidebarFooterBtnSubscription:hover {
  border-color: rgba(192, 132, 252, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(192, 132, 252, 0.12), rgba(255, 255, 255, 0.07) 62%);
  box-shadow:
    inset 0 0 18px rgba(192, 132, 252, 0.1),
    inset 0 0 0 1px rgba(192, 132, 252, 0.14),
    0 12px 28px rgba(107, 33, 168, 0.16);
}

.successBtn {
  color: #071327;
  background: linear-gradient(135deg, var(--green1), var(--green2));
}
.altLink {
  width: auto;
}
.fullWidth {
  width: 100%;
}
.mobileMenuBtn {
  display: none;
}

.mobileMenuBtnIcon {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.sectionHeaderCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sectionHeaderContent {
  min-width: 0;
}
.sectionHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.companyHeaderBtn {
  min-height: 48px;
  white-space: nowrap;
}

.sectionHeaderActions .primaryBtn.companyHeaderBtn {
  color: rgba(255, 255, 255, 0.96);
}

.moduleHeaderHalo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --module-halo-primary: rgba(96, 165, 250, 0.32);
  --module-halo-secondary: rgba(129, 140, 248, 0.2);
}

.moduleHeaderHalo > * {
  position: relative;
  z-index: 1;
}

.moduleHeaderHalo::before,
.moduleHeaderHalo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.moduleHeaderHalo::before {
  background:
    radial-gradient(
      108% 124% at -22% -34%,
      var(--module-halo-primary) 0%,
      rgba(255, 255, 255, 0) 78%
    );
  filter: saturate(1.1);
}

.moduleHeaderHalo::after {
  background: radial-gradient(
    84% 98% at 118% 124%,
    var(--module-halo-secondary) 0%,
    rgba(255, 255, 255, 0) 76%
  );
  filter: saturate(1.1);
}

.myqrHeaderCard {
  --module-halo-primary: rgba(34, 211, 238, 0.39);
  --module-halo-secondary: rgba(6, 182, 212, 0.22);
}

.linksQrHeaderCard {
  --module-halo-primary: rgba(251, 146, 60, 0.39);
  --module-halo-secondary: rgba(245, 158, 11, 0.23);
}

.menuHeaderCard {
  --module-halo-primary: rgba(34, 197, 94, 0.39);
  --module-halo-secondary: rgba(16, 185, 129, 0.22);
}

.productsServicesHeaderCard {
  --module-halo-primary: rgba(180, 83, 9, 0.39);
  --module-halo-secondary: rgba(120, 53, 15, 0.22);
}

.loyaltyHeaderCard {
  --module-halo-primary: rgba(236, 72, 153, 0.41);
  --module-halo-secondary: rgba(244, 114, 182, 0.25);
}

.eventsHeaderCard {
  --module-halo-primary: rgba(192, 132, 252, 0.4);
  --module-halo-secondary: rgba(168, 85, 247, 0.24);
}

.specialOffersHeaderCard {
  --module-halo-primary: rgba(250, 204, 21, 0.4);
  --module-halo-secondary: rgba(245, 158, 11, 0.25);
}

.contactsHeaderCard {
  --module-halo-primary: rgba(59, 130, 246, 0.4);
  --module-halo-secondary: rgba(37, 99, 235, 0.24);
}

.emailMarketingModuleHeaderCard {
  --module-halo-primary: rgba(99, 102, 241, 0.39);
  --module-halo-secondary: rgba(79, 70, 229, 0.23);
}

.smsMarketingModuleHeaderCard {
  --module-halo-primary: rgba(45, 212, 191, 0.39);
  --module-halo-secondary: rgba(20, 184, 166, 0.23);
}

/* Module-wide premium halo on main cards (excludes modals and trial cards). */
#viewMount[data-page-theme="company"],
#viewMount[data-page-theme="links-qr"],
#viewMount[data-page-theme="menu"],
#viewMount[data-page-theme="products-services"],
#viewMount[data-page-theme="loyalty"],
#viewMount[data-page-theme="events"],
#viewMount[data-page-theme="special-offer"],
#viewMount[data-page-theme="contacts"],
#viewMount[data-page-theme="retargeting-mail"],
#viewMount[data-page-theme="sms-marketing"] {
  --page-halo-primary: rgba(96, 165, 250, 0.22);
  --page-halo-secondary: rgba(129, 140, 248, 0.12);
  --page-title-color: #bfdbfe;
}

#viewMount[data-page-theme="company"] {
  --page-halo-primary: rgba(34, 211, 238, 0.23);
  --page-halo-secondary: rgba(6, 182, 212, 0.14);
  --page-title-color: #67e8f9;
}

#viewMount[data-page-theme="links-qr"] {
  --page-halo-primary: rgba(251, 146, 60, 0.24);
  --page-halo-secondary: rgba(245, 158, 11, 0.15);
  --page-title-color: #fdba74;
}

#viewMount[data-page-theme="menu"] {
  --page-halo-primary: rgba(34, 197, 94, 0.23);
  --page-halo-secondary: rgba(16, 185, 129, 0.14);
  --page-title-color: #86efac;
}

#viewMount[data-page-theme="products-services"] {
  --page-halo-primary: rgba(180, 83, 9, 0.24);
  --page-halo-secondary: rgba(120, 53, 15, 0.16);
  --page-title-color: #fdba74;
}

#viewMount[data-page-theme="loyalty"] {
  --page-halo-primary: rgba(236, 72, 153, 0.24);
  --page-halo-secondary: rgba(244, 114, 182, 0.16);
  --page-title-color: #f9a8d4;
}

#viewMount[data-page-theme="events"] {
  --page-halo-primary: rgba(192, 132, 252, 0.23);
  --page-halo-secondary: rgba(168, 85, 247, 0.14);
  --page-title-color: #d8b4fe;
}

#viewMount[data-page-theme="special-offer"] {
  --page-halo-primary: rgba(250, 204, 21, 0.25);
  --page-halo-secondary: rgba(245, 158, 11, 0.16);
  --page-title-color: #fcd34d;
}

#viewMount[data-page-theme="contacts"] {
  --page-halo-primary: rgba(59, 130, 246, 0.24);
  --page-halo-secondary: rgba(37, 99, 235, 0.15);
  --page-title-color: #93c5fd;
}

#viewMount[data-page-theme="retargeting-mail"] {
  --page-halo-primary: rgba(99, 102, 241, 0.24);
  --page-halo-secondary: rgba(79, 70, 229, 0.15);
  --page-title-color: #a5b4fc;
}

#viewMount[data-page-theme="sms-marketing"] {
  --page-halo-primary: rgba(45, 212, 191, 0.24);
  --page-halo-secondary: rgba(20, 184, 166, 0.15);
  --page-title-color: #99f6e4;
}

#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo),
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before {
  background: radial-gradient(
    96% 112% at -22% -32%,
    var(--page-halo-primary) 0%,
    rgba(255, 255, 255, 0) 76%
  );
}

#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after,
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after {
  background: radial-gradient(
    74% 88% at 118% 126%,
    var(--page-halo-secondary) 0%,
    rgba(255, 255, 255, 0) 74%
  );
}

#viewMount[data-page-theme="company"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="links-qr"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="menu"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="products-services"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="loyalty"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="events"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="special-offer"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="contacts"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="retargeting-mail"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *,
#viewMount[data-page-theme="sms-marketing"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > * {
  position: relative;
  z-index: 1;
}

/* Accueil : même léger halo sur les cases en verre que les autres modules.
   La page d'accueil n'ayant pas de couleur de module dédiée, on reprend la
   teinte bleutée neutre du bloc par défaut. */
#viewMount[data-page-theme="home"] {
  --page-halo-primary: rgba(96, 165, 250, 0.22);
  --page-halo-secondary: rgba(129, 140, 248, 0.12);
}

#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before,
#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::before {
  background: radial-gradient(
    96% 112% at -22% -32%,
    var(--page-halo-primary) 0%,
    rgba(255, 255, 255, 0) 76%
  );
}

#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)::after {
  background: radial-gradient(
    74% 88% at 118% 126%,
    var(--page-halo-secondary) 0%,
    rgba(255, 255, 255, 0) 74%
  );
}

#viewMount[data-page-theme="home"] .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo) > *:not([aria-hidden="true"]) {
  position: relative;
  z-index: 1;
}

/* Page title tint by module color (lighter for readability on dark UI). */
#viewMount[data-page-theme="company"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="links-qr"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="menu"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="products-services"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="loyalty"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="events"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="special-offer"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="contacts"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="retargeting-mail"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="sms-marketing"] .moduleHeaderHalo .sectionEyebrow,
#viewMount[data-page-theme="company"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="links-qr"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="menu"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="products-services"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="loyalty"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="events"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="special-offer"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="contacts"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="retargeting-mail"] .moduleHeaderHalo .sectionTitle,
#viewMount[data-page-theme="sms-marketing"] .moduleHeaderHalo .sectionTitle {
  color: var(--page-title-color);
}

.companyConfigModal {
  width: min(760px, 96vw);
}

.companyConfigModalBody {
  gap: 18px;
}

.companyConfigGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.companyConfigOptionBtn {
  min-width: 0;
  min-height: 180px;
  padding: 22px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 16% 14%, rgba(96, 165, 250, 0.18), transparent 38%),
    radial-gradient(circle at 84% 18%, rgba(168, 85, 247, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 54px rgba(2, 6, 23, 0.28);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.companyConfigOptionBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.06),
    0 28px 60px rgba(2, 6, 23, 0.34);
  filter: brightness(1.03);
}

.companyConfigOptionIcon {
  font-size: 34px;
  line-height: 1;
}

.companyConfigOptionLabel {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.18;
}

.sectionMiniTitle,
.cardTitle {
  font-size: 25px;
  font-weight: 950;
}
/* === Carte « partage lien & QR » — premium (accueil + page myQR) === */
.qrShareCard {
  display: flex;
  align-items: center;
  gap: 30px;
}
/* Le toast de statut (page myQR) ne réserve pas d'espace tant qu'il est vide. */
.qrCard .toast:empty {
  display: none;
}
/* QR encadré dans un panneau premium */
.qrSharePanel {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 172px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.qrSharePanel .qrBox {
  width: 140px;
  height: 140px;
  border-radius: 16px;
}
.qrSharePanel .qrImg {
  width: 118px;
  height: 118px;
  padding: 7px;
  border-radius: 11px;
}
.qrShareMiniBtn {
  width: 100%;
  justify-content: center;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 800;
}
.qrShareBody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Empilement normal, espaces réguliers et un peu aérés (pas de répartition). */
  gap: 22px;
}
.qrShareHead {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.qrShareTitle {
  font-size: 25px;
  font-weight: 950;
  line-height: 1.12;
}
.qrShareSub {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
/* Lien : on réutilise le composant slim « .sectionDeepLink » des fonctionnalités
   (avec son animation .is-copied), juste rehaussé pour ce bloc hero + accent
   bleu de marque sur le bouton Copier. */
.qrShareDeepLink {
  margin-top: 0;
  max-width: 480px;
  padding: 7px 7px 7px 15px;
}
.qrShareDeepLink .sectionDeepLinkIco {
  font-size: 15px;
}
.qrShareDeepLink .sectionDeepLinkUrl {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
}
.qrShareDeepLink .sectionDeepLinkCopy {
  padding: 7px 17px;
  font-size: 13px;
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
.qrShareDeepLink .sectionDeepLinkCopy:hover {
  background: linear-gradient(135deg, var(--blue1), var(--blue2));
  filter: brightness(1.08);
}
.qrShareDeepLink .sectionDeepLinkCopy.is-copied {
  background: rgba(34, 197, 94, 0.4);
  box-shadow: none;
}
/* « Diffusez partout » : liste inline discrète (PAS des boutons), compacte. */
.qrShareSpread {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);
}
.qrShareSpreadLabel {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.84);
  margin-right: 11px;
}
.qrShareSpreadItem {
  font-weight: 600;
  white-space: nowrap;
}
.qrShareSpreadItem:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: rgba(255, 255, 255, 0.32);
  font-weight: 700;
}
/* Version groupée « En ligne / En physique » : visible uniquement en mobile. */
.qrShareGrouped {
  display: none;
}
@media (max-width: 760px) {
  /* Mobile : QR + titre/sous-titre en haut, lien dessous, diffusion groupée
     en 3 lignes centrées. On passe la carte en grille et on laisse les
     éléments du body remonter dans cette grille (display: contents). */
  .qrShareCard {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "panel head"
      "panel spread"
      "link link";
    align-items: stretch;
    gap: 16px 14px;
    text-align: left;
  }
  .qrShareBody {
    display: contents;
  }
  .qrSharePanel {
    grid-area: panel;
    align-self: stretch;
    width: auto;
    padding: 12px;
    gap: 9px;
    border-radius: 18px;
  }
  .qrSharePanel .qrBox {
    width: 104px;
    height: 104px;
    border-radius: 14px;
  }
  .qrSharePanel .qrImg {
    width: 86px;
    height: 86px;
    padding: 6px;
    border-radius: 10px;
  }
  .qrShareMiniBtn {
    padding: 8px 6px;
    font-size: 11.5px;
  }
  .qrShareHead {
    grid-area: head;
    align-self: end;
    align-items: flex-start;
    text-align: left;
    gap: 5px;
  }
  .qrShareTitle {
    font-size: 18px;
  }
  .qrShareSub {
    font-size: 12.5px;
  }
  .qrShareDeepLink {
    grid-area: link;
    width: 100%;
    max-width: none;
  }
  .qrShareSpreadFlat {
    display: none;
  }
  .qrShareGrouped {
    grid-area: spread;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
    line-height: 1.45;
  }
  .qrShareGroupedLabel {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.84);
    margin-bottom: 1px;
  }
  .qrShareGroupLine {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
  }
  .qrShareGroupLine b {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
  }
}
.sectionMiniHead {
  margin-bottom: 14px;
}

.contactsListInfo {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.52);
}

.placeholderCard {
  min-height: 220px;
  align-content: start;
}

.loyaltyHeroCard,
.loyaltyStatusCard,
.loyaltyStatsCard {
  padding: 22px;
}

.loyaltyHeroCard {
  display: grid;
  gap: 16px;
}

.loyaltyIntroText {
  max-width: 760px;
}

.loyaltyHeroTotal {
  margin-top: 14px;
}

.loyaltyLockedCard {
  padding: 22px;
}

.loyaltyLockedTitle {
  color: #f9a8d4;
}

.loyaltyLockedText {
  max-width: 720px;
}

.loyaltyLockedUpgradeText {
  color: #86efac;
  font-weight: 800;
}

.loyaltyLockedUpgradeBtn {
  margin-top: 16px;
  min-height: 56px;
  padding-inline: 26px;
  font-size: 17px;
  font-weight: 800;
  color: #f8fcff;
  justify-self: start;
  text-decoration: none;
}

.loyaltyStatusHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.loyaltyStatusCopy {
  min-width: 0;
  flex: 1 1 320px;
}

.loyaltyStatusActions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 14px;
}

.loyaltyToggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.loyaltyToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.loyaltyToggleTrack {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: 0.18s ease;
}

.loyaltyToggleTrack::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  transition: 0.18s ease;
}

.loyaltyToggle input:checked + .loyaltyToggleTrack {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.loyaltyToggle input:checked + .loyaltyToggleTrack::after {
  transform: translateX(22px);
}

.loyaltyToggleLabel {
  font-size: 14px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
}

.kpiGrid.loyaltyKpiGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
  align-items: stretch;
}

.kpiGrid.loyaltyKpiGrid .kpiCard {
  min-width: 0;
  padding: 14px;
  overflow-wrap: anywhere;
}

.kpiGrid.loyaltyKpiGrid .kpiValue {
  font-size: clamp(24px, 2vw, 30px);
}

.kpiGrid.loyaltyKpiGrid .kpiSub {
  font-size: 11px;
}

.kpiGrid.loyaltyKpiGrid .kpiLabel,
.loyaltyIndicatorCard .summaryLabel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.loyaltyFiltersGrid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(
      220px,
      280px
    );
  gap: 12px;
  align-items: end;
}

.loyaltyDatesRow {
  margin: 0;
}

.loyaltyChartBox {
  margin-top: 18px;
}

.loyaltyPeriodSummary {
  margin-top: 12px;
}

.loyaltyIndicatorsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.loyaltyIndicatorCard {
  min-height: 112px;
}

.loyaltyIndicatorValue {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 980;
}

/* === Pop-up Configurer la carte de fidélité — design premium === */
.loyaltyConfigModal {
  width: min(620px, 96vw);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.2);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55);
}

.loyaltyCfgClose {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: 0.18s ease;
}
.loyaltyCfgClose:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.loyaltyCfgHero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 60px 18px 22px;
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(244, 114, 182, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(236, 72, 153, 0.6), rgba(168, 85, 247, 0.48)),
    rgba(10, 14, 26, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.loyaltyCfgHeroBadge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: linear-gradient(
    135deg,
    rgba(249, 168, 212, 0.95),
    rgba(236, 72, 153, 0.95)
  );
  box-shadow: 0 12px 26px rgba(236, 72, 153, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.loyaltyCfgHeroTitle {
  font-size: 22px;
  font-weight: 980;
  letter-spacing: -0.02em;
  color: #fff;
}

.loyaltyConfigModal .loyaltyConfigForm {
  display: grid;
  gap: 14px;
  padding: 22px 24px 24px;
}

.loyaltyConfigGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.loyaltyConfigFull {
  grid-column: 1 / -1;
}

.loyaltyCfgField {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.18s ease;
}
.loyaltyCfgField:focus-within {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.07);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.loyaltyCfgFieldIcon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.24);
}

.loyaltyCfgFieldMain {
  flex: 1;
  min-width: 0;
  display: block;
}

.loyaltyCfgFieldLabel {
  display: block;
  margin-bottom: 9px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.005em;
  color: #fff;
}

.loyaltyConfigModal .loyaltyCfgField input {
  font-size: 16px;
  font-weight: 700;
  padding: 13px 14px;
  border-radius: 13px;
}

.loyaltyRuleInputRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.loyaltyRuleInputRow > input {
  min-width: 0;
}

.loyaltyRuleSuffix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 13px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.14);
  color: #cfe2ff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.loyaltyConfigActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.loyaltyCfgSaveBtn {
  padding: 14px 28px;
  font-size: 15.5px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42);
}
.loyaltyCfgSaveBtn:hover {
  transform: translateY(-1px);
}

.brandRowTop {
  justify-content: center;
  align-items: center;
  min-height: 44px;
  position: relative;
}

.sidebarTopBrand {
  text-align: left;
  font-size: 26px;
  font-weight: 980;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, #86c5ff, #60a5fa, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sidebarTopBrandImage {
  display: block;
  width: auto;
  height: 42px;
  max-width: 190px;
  object-fit: contain;
  margin: 0 auto;
}

.sidebarTopBrandLink {
  display: inline-block;
  line-height: 0;
}

.brandRowTop .mobileCloseMenuBtn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.qrGrid {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
}
.qrBox {
  width: 170px;
  height: 170px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.qrBox.loading .qrImg {
  opacity: 0;
}
.qrLoader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.qrBox.loading .qrLoader {
  display: flex;
}
.qrSpinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--blue1);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.qrImg {
  width: 145px;
  height: 145px;
  display: block;
  border-radius: 14px;
  background: white;
  padding: 10px;
}
.qrLinkRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.qrLink {
  flex: 1 1 320px;
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.homeMyQrActionRow {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.homeMyQrConfigureBtn {
  min-height: 46px;
}

.controlsGrid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: end;
}
.datesRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.86);
}
select,
input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #e5e7eb;
  padding: 11px 12px;
  outline: none;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  min-width: 0;
  max-width: 100%;
}
select:focus,
input:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}
textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: #e5e7eb;
  padding: 11px 12px;
  outline: none;
  resize: vertical;
  min-height: 120px;
  font: inherit;
}
textarea:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
}

.kpiGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.twoCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.innerCard {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.miniControls {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 10px;
  margin-top: 12px;
  align-items: end;
}
.chartBox {
  margin-top: 14px;
  min-height: 280px;
}
.chartBox canvas {
  width: 100% !important;
  height: 280px !important;
}

.dataTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}
.dataTable th,
.dataTable td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.dataTable th {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pillDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue1);
}

.statsButtonLabel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
}

.statsButtonLabelMain {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.96);
}

.statsButtonLabelSub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

.leadsHead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.leadsCount {
  min-width: 120px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.leadsCount span {
  font-size: 38px;
  font-weight: 980;
  background: linear-gradient(135deg, #86efac, #22c55e, #16a34a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.leadsActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.toast {
  min-height: 18px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

.modalBack {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}
.modalCard {
  width: min(520px, 94vw);
  background: rgba(10, 14, 26, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  overflow-y: auto;
}
.modalHead {
  padding: 16px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.modalTitle {
  font-size: 20px;
  font-weight: 980;
}
.modalBody {
  padding: 14px 16px 18px;
  display: grid;
  gap: 12px;
}
.modalInput {
  margin-top: 2px;
}
.modalStatus {
  min-height: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}
.centerResult {
  text-align: center;
}
.resultIcon {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.resultIcon.ok {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.34);
}
.resultIcon.used {
  background: rgba(234, 179, 8, 0.16);
  border-color: rgba(234, 179, 8, 0.34);
}
.resultIcon.expired {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.34);
}
.resultIcon.notfound {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.34);
}
.resultText {
  font-size: 18px;
  font-weight: 900;
}
.resultCodeWrap {
  color: var(--muted);
}

.sidebarOverlay {
  display: none;
}

.dashboardToastViewport {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 220;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}

.dashboardToast {
  border-radius: 18px;
  padding: 14px 16px;
  color: #fff;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: auto;
  animation: dashboardToastIn 0.2s ease;
}

.dashboardToast.success {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(20, 38, 27, 0.96);
  color: #bbf7d0;
}

.dashboardToast.error {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(56, 22, 22, 0.96);
  color: #fecaca;
}

.dashboardToast.info {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(18, 33, 56, 0.96);
  color: #dbeafe;
}

@keyframes dashboardToastIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[hidden]:not(.modalBack) {
  display: none !important;
}

@media (max-width: 1100px) {
  .heroGrid,
  .kpiGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .twoCols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }

  .mainArea {
    grid-area: main;
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(90vw, 348px);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    z-index: 120;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .dashboard.menu-open .sidebar {
    transform: translateX(0);
  }

  .mobileMenuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    width: 56px;
    height: 56px;
    padding: 0;
    flex: 0 0 auto;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    margin-left: auto;
    position: relative;
    z-index: 60;
  }
  .mobileCloseMenuBtn {
    display: none !important;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    width: 50px;
    height: 50px;
    padding: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex !important;
  }

  .sidebarBottom {
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  .menu {
    flex: 0 0 auto;
    overflow: visible;
    min-height: auto;
  }

  .menuItem {
    font-size: 15px;
    line-height: 1.15;
    padding: 11px 12px;
    border-radius: 14px;
    min-height: 52px;
  }

  .sidebarBottom .primaryBtn,
  .sidebarBottom .ghostBtn,
  .sidebarFooterBtn {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }

  .sidebarOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 110;
  }

  .dashboard.menu-open .sidebarOverlay {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboardBootLoaderCard::before,
  .dashboardBootOrb--a,
  .dashboardBootOrb--b,
  .dashboardBootOrb--c,
  .dashboardBootCore,
  .viewLoadingCard::before,
  .viewLoadingOrb--a,
  .viewLoadingOrb--b,
  .viewLoadingOrb--c,
  .viewLoadingCore {
    animation: none !important;
  }

  .dashboardBootLoaderCard::after,
  .viewLoadingCard::after,
  .viewLoadingVisual::before {
    animation: none !important;
  }

  .dashboardBootFullscreen,
  .dashboard,
  .viewLoadingOverlay,
  .viewMount {
    transition: none !important;
  }
}

@keyframes viewLoaderHaloBreath {
  0%,
  100% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity: 0.98;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes viewLoaderCardSweep {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-36%);
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 0.55;
  }
  70% {
    opacity: 0;
    transform: translateX(36%);
  }
}

@keyframes viewLoaderDashedOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes viewLoaderCoreSpark {
  0%,
  100% {
    filter: brightness(1);
  }
  48% {
    filter: brightness(1.14);
  }
}

@keyframes viewLoaderHaloExit {
  from {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(24px);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.16);
    filter: blur(34px);
  }
}

@keyframes viewLoaderExitFlash {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  42% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(26%);
  }
}

@keyframes viewContentRevealGlow {
  0% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  }
  38% {
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--page-loading-primary), transparent 58%);
  }
  100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  }
}

@media (max-width: 720px) {
  .sectionHeaderCard {
    flex-direction: column;
    align-items: stretch;
  }

  .sectionHeaderActions {
    width: 100%;
    justify-content: stretch;
  }

  .sectionHeaderActions > * {
    width: 100%;
  }

  .companyConfigGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .companyConfigOptionBtn {
    min-height: 124px;
    padding: 18px 16px;
    gap: 10px;
  }

  .companyConfigOptionIcon {
    font-size: 28px;
  }

  .companyConfigOptionLabel {
    font-size: 16px;
  }

  .topbar {
    min-height: 82px;
    padding: 0 12px;
    align-items: center;
  }

  .topbarMain {
    min-width: 0;
    flex: 1 1 auto;
  }

  .mobileMenuBtn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-right: 2px;
    font-size: 30px;
    line-height: 1;
    padding: 0;
  }

  .mobileMenuBtnIcon {
    font-size: 30px;
    line-height: 1;
    transform: translateY(-1.5px);
  }

  .topbarTitleWrap h1 {
    font-size: 24px;
  }
  .topbarTitleWrap h1 {
    font-size: 24px;
  }
  .topbarTitleWrap h1,
  .sectionTitle,
  .heroTitle {
    font-size: 25px;
  }
  .topbarActions {
    display: none;
  }
  .qrGrid,
  .controlsGrid,
  .miniControls,
  .heroGrid,
  .kpiGrid {
    grid-template-columns: 1fr;
  }
  .datesRow {
    grid-template-columns: 1fr 1fr;
  }
  .qrBox {
    width: 160px;
    height: 160px;
  }
  .qrImg {
    width: 138px;
    height: 138px;
  }
  .leadsActions {
    flex-direction: column;
  }
  .leadsActions > * {
    width: 100%;
  }

  .qrLinkRow {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .qrLink {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .homeMyQrActionRow {
    width: 100%;
  }
  .homeMyQrConfigureBtn {
    width: 100%;
  }

  .editorGridTwoCols,
  .companyLinkRow {
    grid-template-columns: 1fr;
  }

  .identityFieldsCol,
  .identityAsideCol {
    gap: 12px;
  }

  .companyLinkRow {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    gap: 10px;
  }

  .linkActions {
    justify-content: flex-end;
  }

  .modalActionsStack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .companyLinkRow {
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    gap: 10px;
  }

  .companyLinksList {
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .datesRow {
    grid-template-columns: 1fr;
  }
  .qrLinkRow {
    flex-direction: column;
    align-items: stretch;
  }
}

.linksQrPage {
  display: grid;
  gap: 22px;
}

.linksIntroCard {
  display: grid;
  gap: 20px;
  padding: 22px;
}

.linksIntroTop {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  flex-wrap: wrap;
}

.linksHeroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.miniStat {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.miniStatLabel {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.miniStatValue {
  font-size: 30px;
  font-weight: 950;
}

.createLinkPanel {
  padding: 22px;
}

.createLinkForm {
  display: grid;
  gap: 18px;
}

.formGridTwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.aliasInputWrap {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.aliasPrefix {
  padding: 0 14px;
  color: var(--muted);
  white-space: nowrap;
  font-size: 14px;
}

.aliasInputWrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
}

.aliasStatus {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid transparent;
}

.aliasStatus.neutral {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.aliasStatus.checking {
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.2);
}

.aliasStatus.success {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.2);
}

.aliasStatus.warning {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.2);
}

.aliasStatus.error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
}

.formAlert {
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}

.formAlert.error {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.formAlert.success {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

/* === Pop-up "Modifier mes infos" — design premium === */
.companyEditorModal {
  width: min(900px, 96vw);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.2);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55);
}

.companyEditorClose {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: 0.18s ease;
}
.companyEditorClose:hover {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.companyEditorHero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 60px 18px 22px;
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(96, 165, 250, 0.3),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(124, 58, 237, 0.2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.companyEditorHeroBadge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: linear-gradient(
    135deg,
    rgba(125, 211, 252, 0.95),
    rgba(37, 99, 235, 0.95)
  );
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.companyEditorHeroTitle {
  font-size: 22px;
  font-weight: 980;
  letter-spacing: -0.02em;
  color: #fff;
}

/* En-tête héro réutilisé pour Horaires / Événement / Offre spéciale :
   on ancre le bouton fermer (.companyEditorClose en position absolue). */
.companyHoursModal,
.eventsEditorModal,
.companyFeatureListModal {
  position: relative;
}

/* Les modales menuPremiumModal (événement, offre, menu, produits) ont un léger
   halo bleu en fond : on rend le dégradé du héro plus opaque + on pose une base
   sombre pour que la couleur thématique ressorte bien par-dessus. */

/* Événement : héro dans le thème violet de la fonctionnalité */
.companyEditorHero--events {
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(192, 132, 252, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(124, 58, 237, 0.48)),
    rgba(10, 14, 26, 0.96);
}
.companyEditorHero--events .companyEditorHeroBadge {
  background: linear-gradient(
    135deg,
    rgba(216, 180, 254, 0.95),
    rgba(168, 85, 247, 0.95)
  );
  box-shadow: 0 12px 26px rgba(168, 85, 247, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Offre spéciale : héro dans le thème jaune/ambre de la fonctionnalité */
.companyEditorHero--offer {
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(250, 204, 21, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(217, 119, 6, 0.48)),
    rgba(10, 14, 26, 0.96);
}
.companyEditorHero--offer .companyEditorHeroBadge {
  background: linear-gradient(
    135deg,
    rgba(253, 224, 71, 0.95),
    rgba(245, 158, 11, 0.95)
  );
  box-shadow: 0 12px 26px rgba(245, 158, 11, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Menu numérique : héro dans le thème vert de la fonctionnalité */
.companyEditorHero--menu {
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(134, 239, 172, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(34, 197, 94, 0.6), rgba(16, 185, 129, 0.48)),
    rgba(10, 14, 26, 0.96);
}
.companyEditorHero--menu .companyEditorHeroBadge {
  background: linear-gradient(
    135deg,
    rgba(134, 239, 172, 0.95),
    rgba(34, 197, 94, 0.95)
  );
  box-shadow: 0 12px 26px rgba(34, 197, 94, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Produits / Services : héro dans le thème orange de la fonctionnalité */
.companyEditorHero--products {
  background: radial-gradient(
      130% 220% at 0% -40%,
      rgba(253, 186, 116, 0.5),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(217, 119, 6, 0.6), rgba(180, 83, 9, 0.48)),
    rgba(10, 14, 26, 0.96);
}
.companyEditorHero--products .companyEditorHeroBadge {
  background: linear-gradient(
    135deg,
    rgba(253, 186, 116, 0.95),
    rgba(217, 119, 6, 0.95)
  );
  box-shadow: 0 12px 26px rgba(217, 119, 6, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.companyEditorModal .companyEditorBody {
  display: grid;
  gap: 18px;
  padding: 24px 28px 28px;
}

/* Champs en cartes premium (icône + label + contrôle) */
.companyEditorModal .identityFieldsCol {
  gap: 14px;
}

.companyEditorField {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.18s ease;
}
.companyEditorField:focus-within {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.06);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.companyEditorFieldHead {
  display: flex;
  align-items: center;
  gap: 11px;
}

.companyEditorFieldIcon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.24);
}

.companyEditorModal .companyEditorFieldLabel {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.005em;
  color: #fff;
}

.companyEditorModal .identityPreviewHead .fieldLabelLite {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 850;
  color: #fff;
}

.companyEditorModal .modalInput,
.companyEditorModal .modalTextarea {
  font-size: 15.5px;
  font-weight: 600;
  padding: 13px 14px;
  border-radius: 13px;
}

/* Dropzone logo allégée dans la carte (pas d'effet boîte-dans-boîte) */
.companyEditorField .imageUploadDropzone {
  min-height: 104px;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.14);
}

.companyLinksEditorModal {
  width: min(1360px, 97vw);
}

.companyLinksEditorBody {
  gap: 14px;
}

.editorGridTwoCols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.identityFieldsCol {
  display: grid;
  gap: 10px;
  align-content: start;
}

.identityAsideCol {
  display: grid;
  gap: 12px;
  align-content: start;
}

.formGroupWide {
  display: grid;
  gap: 6px;
}

.compactFieldGroup {
  gap: 4px;
}

.imageUploadDropzone {
  min-height: 126px;
  border-radius: 18px;
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.imageUploadDropzone:hover,
.imageUploadDropzone:focus-visible,
.imageUploadDropzone.is-dragover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.08);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.18);
}

.imageUploadDropzone.is-uploading {
  pointer-events: none;
  border-style: solid;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.08);
}

.imageUploadDropzoneIcon {
  font-size: 24px;
  line-height: 1;
}

.imageUploadDropzoneTitle {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}

.imageUploadDropzoneHint {
  font-size: 13px;
  color: var(--muted);
}

.fieldHint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.fieldLabelLite {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 850;
}

.modalTextarea {
  min-height: 150px;
}

.identityAsideCard {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(
    160deg,
    rgba(96, 165, 250, 0.1),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(96, 165, 250, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.companyEditorModal .modalActionsStack .primaryBtn {
  padding: 15px 26px;
  font-size: 16px;
  letter-spacing: 0.3px;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.42);
}
.companyEditorModal .modalActionsStack .primaryBtn:hover {
  transform: translateY(-1px);
}

.companyHoursToggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.companyHoursToggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.companyHoursToggleTrack {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: 0.18s ease;
}

.companyHoursToggleTrack::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  transition: 0.18s ease;
}

.companyHoursToggle input:checked + .companyHoursToggleTrack {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.companyHoursToggle input:checked + .companyHoursToggleTrack::after {
  transform: translateX(22px);
}

.companyHoursToggleLabel {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

.companyHoursTopCard {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(
      220px 120px at 8% 0%,
      rgba(96, 165, 250, 0.12),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.92),
      rgba(15, 23, 42, 0.82)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 36px rgba(2, 6, 23, 0.16);
}

.companyHoursTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.companyHoursTopCopy {
  display: grid;
  gap: 4px;
}

.identityPreviewHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.colorPreviewSwatch {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.colorFieldRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
}

.colorDarkWarning {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(251, 146, 60, 0.44);
  background: rgba(251, 146, 60, 0.12);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 12px;
}

.colorDarkWarningText {
  grid-column: 1 / -1;
  color: rgba(255, 237, 213, 0.96);
  font-size: 14px;
  font-weight: 860;
  margin-bottom: 2px;
}

.colorDarkWarningPreview {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.colorDarkWarningSwatchWrap {
  display: inline-grid;
  justify-items: center;
  gap: 7px;
}

.colorDarkWarningSwatchLabel {
  color: rgba(255, 237, 213, 0.85);
  font-size: 12px;
  font-weight: 800;
}

.colorDarkWarningSwatch {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.24);
}

.colorDarkWarningArrow {
  color: rgba(255, 237, 213, 0.92);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.colorDarkWarning .warningBtn {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
}

.colorPickerTriggerBtn {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px;
}

.colorPickerTriggerIcon {
  width: 22px;
  height: 22px;
  display: block;
}

.colorPickerModalCard {
  width: min(460px, 96vw);
}

.colorPickerModalHead {
  display: flex;
  align-items: center;
  gap: 14px;
}

.colorPickerCurrentSwatch {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.16),
    0 10px 24px rgba(15, 23, 42, 0.22);
  background: #0f172a;
}

.colorPickerModalBody {
  gap: 18px;
}

.companyHoursModal {
  width: min(880px, 96vw);
}

.companyHoursModalBody {
  display: grid;
  gap: 16px;
}

.companyHoursIntroCard {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(
      240px 120px at 8% 0%,
      rgba(96, 165, 250, 0.14),
      transparent 74%
    ),
    rgba(255, 255, 255, 0.04);
}

.companyHoursIntroTitle {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.companyHoursIntroText {
  color: rgba(226, 232, 240, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.companyHoursEditorDays {
  display: grid;
  gap: 14px;
}

.companyHoursDayCard {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(20, 30, 52, 0.92), rgba(12, 20, 36, 0.9)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 18px 42px rgba(3, 7, 18, 0.24);
}

.companyHoursDayCard.is-open {
  border-color: rgba(52, 211, 153, 0.22);
  background:
    linear-gradient(180deg, rgba(19, 52, 52, 0.9), rgba(10, 24, 28, 0.9)),
    rgba(255, 255, 255, 0.04);
}

.companyHoursDayCard.is-closed {
  border-style: dashed;
  opacity: 0.96;
}

.companyHoursDayHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.companyHoursDayHeadMain {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.companyHoursDayTitle {
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  min-width: 0;
}

.companyHoursDayStatusSelect {
  min-width: 162px;
  width: auto;
  flex: 0 0 auto;
}

.companyHoursSlots {
  display: grid;
  gap: 10px;
}

.companyHoursSlotRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 15, 28, 0.42);
}

.companyHoursSlotOvernight {
  grid-column: 1 / 4;
  margin-top: -4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(196, 181, 253, 0.92);
}

.companyHoursTimeField {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.companyHoursTimeLabel {
  color: rgba(226, 232, 240, 0.82);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.companyHoursTimeControl {
  position: relative;
}

.companyHoursTimeSegments {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 42px 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 10, 20, 0.6);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.companyHoursTimeSegments:focus-within {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
  background: rgba(8, 16, 30, 0.82);
}

.companyHoursTimeSegments.is-invalid {
  border-color: rgba(248, 113, 113, 0.44);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.companyHoursTimeSegment {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.companyHoursTimeSegment::placeholder {
  color: rgba(148, 163, 184, 0.42);
}

.companyHoursTimeColon {
  color: rgba(241, 245, 249, 0.74);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.companyHoursTimePickerInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

.companyHoursTimePickerBtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.companyHoursTimeIcon {
  position: static;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  opacity: 0.98;
}

.companyHoursSlotSeparator {
  color: rgba(226, 232, 240, 0.7);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.companyHoursSlotRemoveBtn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
}

.companyHoursAddSlotBtn {
  white-space: nowrap;
}

.companyHoursDayFooter {
  display: flex;
  justify-content: flex-start;
}

.companyHoursDayActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.companyHoursQuickActionBtn,
.companyHoursAddSlotBtn {
  min-height: 40px;
  padding-inline: 14px;
  border-width: 1.5px;
}

.companyHoursQuickActionDanger {
  border-color: rgba(248, 113, 113, 0.28);
  color: rgba(254, 202, 202, 0.98);
}

.colorPickerPanel {
  position: relative;
  width: 100%;
  aspect-ratio: 1.18 / 1;
  min-height: 180px;
  max-height: 220px;
  border-radius: 20px;
  overflow: hidden;
  cursor: crosshair;
  background: #3b82f6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 38px rgba(2, 6, 23, 0.26);
  touch-action: none;
}

.colorPickerPanelWhite,
.colorPickerPanelBlack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.colorPickerPanelWhite {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.colorPickerPanelBlack {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.colorPickerPanelHandle {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.34),
    0 8px 20px rgba(2, 6, 23, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.colorPickerHueSlider {
  position: relative;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 16.66%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.66%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(2, 6, 23, 0.22);
  cursor: ew-resize;
  touch-action: none;
}

.colorPickerHueSliderHandle {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: transparent;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.34),
    0 8px 18px rgba(2, 6, 23, 0.26);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.colorPickerValueRow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.colorPickerPreviewSwatch {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(2, 6, 23, 0.22);
  background: #0f172a;
}

.colorPickerHexInput {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.identityLogoPreviewWrap {
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.identityLogoPreview {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}

.identityLogoPreviewLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}

.identityLogoPreviewSpinner {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.96);
  animation: spin 0.8s linear infinite;
}

.identityLogoPlaceholder {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.companyButtonStyleCard {
  flex: 1 1 100%;
  padding: 14px 16px;
  margin-bottom: 0;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    radial-gradient(
      180px 90px at 8% 0%,
      rgba(59, 130, 246, 0.14),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.92),
      rgba(15, 23, 42, 0.82)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(2, 6, 23, 0.22);
}

.companyButtonStyleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.companyButtonStyleHead {
  display: grid;
  gap: 4px;
}

.companyButtonStyleTitle {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.companyButtonStyleText {
  color: rgba(226, 232, 240, 0.74);
  font-size: 12px;
  line-height: 1.45;
}

.companyButtonStyleSelect {
  min-width: 230px;
  max-width: 280px;
  width: 100%;
  flex: 0 0 auto;
  font-weight: 800;
  border-color: rgba(96, 165, 250, 0.24);
  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.86),
      rgba(15, 23, 42, 0.74)
    ),
    rgba(255, 255, 255, 0.04);
}

.linksEditorActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.companyLinksStickyHead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 96px;
  padding: 16px 18px;
  background:
    radial-gradient(
      130% 220% at 0% -40%,
      rgba(96, 165, 250, 0.3),
      transparent 60%
    ),
    linear-gradient(135deg, rgba(37, 99, 235, 0.26), rgba(124, 58, 237, 0.22)),
    linear-gradient(180deg, rgba(10, 14, 26, 0.98), rgba(10, 14, 26, 0.96));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 30px rgba(2, 6, 23, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.companyLinksHeroMain {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.companyLinksHeadActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  align-self: center;
}

.companyLinksHeaderSaveBtn {
  min-height: 50px;
  padding-inline: 24px;
  font-size: 15px;
  letter-spacing: 0.3px;
  align-self: center;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
}
.companyLinksHeaderSaveBtn:hover {
  transform: translateY(-1px);
}

#closeCompanyLinksModalBtn {
  align-self: center;
}

.companyLinksStickyActions {
  position: sticky;
  top: calc(var(--company-links-head-offset, 98px) - 2px);
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.88));
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
}

.companyLinksAddBtn {
  min-height: 52px;
  padding-inline: 18px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.01em;
  width: 100%;
}

.companyLinksAddClassicBtn {
  border-color: rgba(34, 197, 94, 0.55);
  color: #f8fafc;
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.98), rgba(22, 163, 74, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.companyLinksAddClassicBtn:hover {
  border-color: rgba(74, 222, 128, 0.72);
  background:
    linear-gradient(180deg, rgba(74, 222, 128, 1), rgba(22, 163, 74, 0.98));
}

.companyLinksAddFeatureBtn {
  border-color: rgba(96, 165, 250, 0.55);
  color: #f8fafc;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.98), rgba(59, 130, 246, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.companyLinksAddFeatureBtn:hover {
  border-color: rgba(147, 197, 253, 0.72);
  background:
    linear-gradient(180deg, rgba(147, 197, 253, 1), rgba(59, 130, 246, 0.98));
}

.companyLinksAddSeparatorBtn {
  border-width: 1.6px;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 6, 23, 0.12);
}

.companyLinksAddSeparatorBtn:hover {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.075);
}

.companyLinksDisableConfirmModal {
  width: min(460px, 94vw);
}

.companyLinksFeaturePickerModal {
  width: min(760px, 94vw);
}

.companyLinksFeaturePickerBody {
  display: grid;
  gap: 16px;
}

.companyLinksFeaturePickerStatus {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background:
    linear-gradient(180deg, rgba(120, 53, 15, 0.34), rgba(69, 26, 3, 0.28));
  color: rgba(254, 240, 138, 0.95);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.companyLinksFeaturePickerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.companyLinksFeatureCard {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 46%),
    rgba(15, 23, 42, 0.9);
  color: rgba(255, 255, 255, 0.94);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.companyLinksFeatureCard:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.38);
  box-shadow:
    0 14px 30px rgba(2, 6, 23, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.companyLinksFeatureCard.is-disabled {
  cursor: default;
  opacity: 0.64;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.84));
  box-shadow: none;
}

.companyLinksFeatureCard.is-disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.companyLinksFeatureCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.companyLinksFeatureCardTitle {
  color: rgba(255, 255, 255, 0.96);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.companyLinksFeatureCardText {
  color: rgba(226, 232, 240, 0.8);
  font-size: 13px;
  line-height: 1.45;
}

.companyLinksFeatureBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.companyLinksFeatureBadge.is-active {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.92);
}

.companyLinksFeatureBadge.is-available {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.16);
  color: rgba(220, 252, 231, 0.96);
}

.companyLinksFeatureBadge.is-locked {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.14);
  color: rgba(254, 240, 138, 0.96);
}

/* Add-button picker: wider modal with a scrollable, colour-coded grid. */
.companyLinksTypePickerModal {
  width: min(840px, 95vw);
}

.companyLinksTypePickerModal .modalTitle {
  font-size: 19px;
}

.companyLinksTypePickerModal .companyLinksFeaturePickerBody {
  max-height: min(68vh, 600px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.companyLinksTypePickerGroups {
  display: grid;
  gap: 22px;
}

.companyLinksTypePickerGroup {
  display: grid;
  gap: 12px;
}

.companyLinksTypePickerGroupTitle {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(226, 232, 240, 0.96);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.companyLinksTypePickerGroupDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat-accent, #94a3b8);
  box-shadow: 0 0 0 4px
    color-mix(in oklab, var(--cat-accent, #94a3b8) 22%, transparent);
}

.companyLinksTypePickerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 10px;
}

.companyLinksTypeCard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 11px 13px;
  border-radius: 15px;
  border: 1px solid
    color-mix(in oklab, var(--type-from, #60a5fa) 20%, rgba(255, 255, 255, 0.09));
  background: rgba(15, 23, 42, 0.78);
  color: rgba(255, 255, 255, 0.94);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.companyLinksTypeCard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--type-from, #60a5fa) 50%, transparent);
  background: rgba(23, 33, 56, 0.92);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.28);
}

.companyLinksTypeCard:focus-visible {
  outline: 2px solid
    color-mix(in oklab, var(--type-from, #60a5fa) 70%, #ffffff);
  outline-offset: 2px;
}

.companyLinksTypeCardIcon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    var(--type-from, #60a5fa),
    var(--type-to, #334155)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #fff;
}

.companyLinksTypeCardIcon--emoji {
  font-size: 19px;
  line-height: 1;
}

.companyLinksTypeCardIcon--logo svg {
  width: 19px;
  height: 19px;
  display: block;
}

.companyLinksTypeCardLabel {
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.97);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.2;
}

.companyLinksTypeCardAdd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(
    in oklab,
    var(--type-from, #60a5fa) 22%,
    rgba(255, 255, 255, 0.06)
  );
  color: color-mix(in oklab, var(--type-from, #60a5fa) 58%, #ffffff);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.companyLinksTypeCard:hover .companyLinksTypeCardAdd {
  opacity: 1;
  transform: scale(1);
}

.companyLinksDisableConfirmHint {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
  color: rgba(226, 232, 240, 0.82);
  font-size: 14px;
  line-height: 1.5;
}

#companyLinksDisableConfirmText {
  margin-top: 12px;
  color: rgba(248, 250, 252, 0.92);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

#cancelCompanyLinksDisableConfirmBtn,
#confirmCompanyLinksDisableConfirmBtn {
  min-height: 50px;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.03em;
}

.companyLinksNavigateConfirmActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#companyLinksNavigateConfirmText {
  margin-top: 12px;
  color: rgba(248, 250, 252, 0.92);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.companyLinksNavigateConfirmActions > .ghostBtn,
.companyLinksNavigateConfirmActions > .primaryBtn {
  min-height: 50px;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 900;
}

.companyAutoManagedRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.companyAutoManagedText {
  color: rgba(226, 232, 240, 0.74);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 10px 2px;
}

.companyAutoManagedConfigureBtn {
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.companyLinksList {
  display: grid;
  gap: 12px;
}

.companyLinkRow {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.2fr) 140px;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid
    color-mix(
      in oklab,
      var(--company-link-row-accent, #94a3b8) 18%,
      rgba(255, 255, 255, 0.08)
    );
  background:
    radial-gradient(
      circle at top left,
      color-mix(
        in oklab,
        var(--company-link-row-accent, #94a3b8) 20%,
        transparent
      ),
      transparent 44%
    ),
    linear-gradient(
      135deg,
      color-mix(
        in oklab,
        var(--company-link-row-grad-from, #94a3b8) 16%,
        rgba(255, 255, 255, 0.055)
      ),
      color-mix(
        in oklab,
        var(--company-link-row-grad-to, #334155) 14%,
        rgba(255, 255, 255, 0.03)
      )
    );
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.companyLinkRow > * {
  min-width: 0;
}

@keyframes companyLinkRowSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.94);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Pulses twice so the highlight is still flashing once the editor has
   finished smooth-scrolling the new row back into view. */
@keyframes companyLinkRowGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 10px 24px rgba(2, 6, 23, 0.1);
  }
  12%,
  56% {
    box-shadow:
      0 0 0 6px
        color-mix(
          in oklab,
          var(--company-link-row-accent, #60a5fa) 78%,
          #93c5fd
        ),
      0 0 30px 8px
        color-mix(
          in oklab,
          var(--company-link-row-accent, #60a5fa) 60%,
          transparent
        ),
      0 22px 46px rgba(2, 6, 23, 0.34);
  }
  34%,
  78% {
    box-shadow:
      0 0 0 2px
        color-mix(
          in oklab,
          var(--company-link-row-accent, #60a5fa) 28%,
          transparent
        ),
      0 12px 26px rgba(2, 6, 23, 0.14);
  }
}

.companyLinkRow.is-just-added {
  position: relative;
  z-index: 2;
  animation:
    companyLinkRowSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    companyLinkRowGlow 2.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .companyLinkRow.is-just-added {
    animation: companyLinkRowGlow 2.4s ease-in-out;
  }
}

/* Reorder feedback: a quick highlight pulse on the row that just moved
   (via the up/down arrows or drag & drop), on top of the FLIP slide. */
@keyframes companyLinkRowMoved {
  0%,
  100% {
    box-shadow:
      0 0 0 0 transparent,
      0 10px 24px rgba(2, 6, 23, 0.1);
  }
  30% {
    box-shadow:
      0 0 0 4px
        color-mix(
          in oklab,
          var(--company-link-row-accent, #60a5fa) 64%,
          #93c5fd
        ),
      0 18px 38px rgba(2, 6, 23, 0.3);
  }
}

.companyLinkRow.is-moved {
  position: relative;
  z-index: 3;
  animation: companyLinkRowMoved 0.9s ease-in-out;
}

/* Removal: shrink + fade out with a red signal before the row leaves. */
@keyframes companyLinkRowRemove {
  0% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateX(28px);
  }
}

.companyLinkRow.is-removing {
  position: relative;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-color: rgba(248, 113, 113, 0.6) !important;
  box-shadow:
    0 0 0 3px rgba(248, 113, 113, 0.4),
    0 16px 34px rgba(2, 6, 23, 0.28) !important;
  animation: companyLinkRowRemove 0.28s ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
  .companyLinkRow.is-moved {
    animation: companyLinkRowMoved 0.7s ease-in-out;
  }

  .companyLinkRow.is-removing {
    animation: companyLinkRowRemove 0.2s ease-in forwards;
  }
}

/* Same add / move / remove animations for the Menu & Produits/Services lists
   (category rows and in-category item rows both carry .menuEntityRow). */
.menuEntityRow.is-just-added {
  position: relative;
  z-index: 2;
  animation:
    companyLinkRowSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    companyLinkRowGlow 2.4s ease-in-out;
}

.menuEntityRow.is-moved {
  position: relative;
  z-index: 3;
  animation: companyLinkRowMoved 0.9s ease-in-out;
}

.menuEntityRow.is-removing {
  position: relative;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-color: rgba(248, 113, 113, 0.6) !important;
  box-shadow:
    0 0 0 3px rgba(248, 113, 113, 0.4),
    0 16px 34px rgba(2, 6, 23, 0.28) !important;
  animation: companyLinkRowRemove 0.28s ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
  .menuEntityRow.is-moved {
    animation: companyLinkRowMoved 0.7s ease-in-out;
  }

  .menuEntityRow.is-removing {
    animation: companyLinkRowRemove 0.2s ease-in forwards;
  }
}

.companyLinkRow.is-customize {
  grid-template-columns: 160px 142px minmax(120px, 0.75fr) minmax(150px, 1fr) 140px;
  grid-auto-flow: dense;
  align-items: center;
}

.companyLinkRow.is-customize .companyLinkTypeSelect {
  grid-column: 1;
}

.companyLinkRow.is-customize .companyCustomButtonConfig {
  grid-column: 2;
}

.companyLinkRow.is-customize .companyLinkLabelInput {
  grid-column: 3;
}

.companyLinkRow.is-customize .companyLinkValueWrap {
  grid-column: 4;
}

.companyLinkRow.is-customize .linkActions {
  grid-column: 5;
  justify-content: flex-end;
}

.companyLinkTypeSelect {
  min-height: 50px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.companyLinkLabelInput,
.companyLinkValueInput {
  min-height: 50px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.companyLinkValueWrap {
  position: relative;
}

.companyLinkValuePrefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.95;
}

.companyLinkValueWrap .companyLinkValueInput {
  width: 100%;
  padding-left: 42px;
}

.companyLinkRow.is-separator {
  grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.2fr) 140px;
  min-height: 42px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  background: linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.06),
    rgba(255, 255, 255, 0.03)
  );
}

.companyLinkRow.is-separator .companyLinkSeparatorPreview {
  grid-column: 2 / 4;
}

.companyLinkRow.is-separator .linkActions {
  grid-column: 4;
  justify-content: flex-end;
}

.companyLinkSeparatorBadge {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 900;
}

.companyLinkSeparatorPreview {
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
}

.companyLinkSeparatorLine {
  height: 1px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12),
    rgba(148, 163, 184, 0.52),
    rgba(148, 163, 184, 0.12)
  );
}

.companyGoogleReviewConfig {
  min-width: 0;
}

.companyLinkActions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.companyCustomButtonConfig {
  min-width: 0;
}

.companyCustomButtonConfigGrid {
  display: grid;
  grid-template-columns: 66px 66px;
  gap: 8px;
  align-items: center;
}

.companyCustomField {
  min-width: 0;
  position: relative;
}

.companyCustomVisualSelectWrap {
  position: relative;
}

.companyCustomVisualTrigger {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #fff;
  cursor: pointer;
}

.companyCustomVisualCurrentIcon {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

.companyCustomVisualCurrentGradient {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.companyCustomVisualChevron {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 900;
}

.companyCustomVisualMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 18;
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 30, 0.98);
  box-shadow: 0 20px 38px rgba(2, 6, 23, 0.45);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.companyCustomVisualMenu.is-floating {
  position: fixed;
}

.companyCustomVisualMenuGradients {
  grid-template-columns: 1fr;
  min-width: 248px;
}

.companyCustomGradientCategoryBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.companyCustomGradientCategoryBtn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 9px;
  min-height: 30px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.companyCustomGradientCategoryBtn.is-active {
  border-color: rgba(96, 165, 250, 0.85);
  background: rgba(96, 165, 250, 0.2);
  color: #eaf2ff;
}

.companyCustomGradientSwatchGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.companyCustomVisualItem {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  width: 100%;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.companyCustomVisualItem img {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) invert(1);
}

.companyCustomVisualItem.is-active {
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.38) inset;
}

.companyCustomVisualSwatch {
  position: relative;
  border-radius: 10px;
}

.companyCustomVisualCompanyBadge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 2px 10px rgba(2, 6, 23, 0.38);
}

.companyGoogleReviewTriggerBtn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06)),
    rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
  min-height: 52px;
  box-sizing: border-box;
}

.companyGoogleReviewTriggerBtn.is-selected {
  border-color: rgba(96, 165, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06)),
    rgba(255, 255, 255, 0.04);
}

.companyGoogleReviewTriggerBtn.is-unselected {
  border-color: rgba(248, 113, 113, 0.4);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.22), rgba(239, 68, 68, 0.14)),
    rgba(255, 255, 255, 0.02);
}

.companyGoogleReviewTriggerBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
}

.companyGoogleReviewTriggerBtn.is-selected:hover {
  border-color: rgba(96, 165, 250, 0.34);
}

.companyGoogleReviewTriggerBtn.is-unselected:hover {
  border-color: rgba(248, 113, 113, 0.38);
}

.companyGoogleReviewTriggerIcon {
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.companyGoogleReviewTriggerTextWrap {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.companyGoogleReviewTriggerText {
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0;
  line-height: 1.35;
}

.companyGoogleReviewTriggerMeta {
  color: rgba(203, 213, 225, 0.72);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.companyGoogleReviewPickerModal {
  width: min(720px, calc(100vw - 32px));
}

.companyGoogleReviewPickerBody {
  display: grid;
  gap: 14px;
}

.companyGoogleReviewPickerSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.companyGoogleReviewPickerStatus[data-state="error"] {
  color: #fca5a5;
}

.companyGoogleReviewPickerStatus[data-state="success"] {
  color: #86efac;
}

.companyGoogleReviewPickerSelected {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.08);
}

.companyGoogleReviewPickerSelectedTitle {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

.companyGoogleReviewPickerSelectedName,
.companyGoogleReviewPickerResultName {
  font-weight: 900;
}

.companyGoogleReviewPickerSelectedAddress,
.companyGoogleReviewPickerResultAddress {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.companyGoogleReviewPickerResults {
  display: grid;
  gap: 9px;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding-right: 2px;
}

.companyGoogleReviewPickerResult {
  width: 100%;
  text-align: left;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.companyGoogleReviewPickerResult:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
}

.companyFileLinkPickerModal {
  width: min(560px, calc(100vw - 32px));
}

.companyFileLinkPickerBody {
  display: grid;
  gap: 16px;
}

.companyFileLinkPickerCurrent {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(
      160px 96px at 0% 0%,
      rgba(96, 165, 250, 0.12),
      transparent 72%
    ),
    rgba(255, 255, 255, 0.04);
}

.companyFileLinkPickerPreview {
  width: 92px;
  height: 92px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.72);
}

.companyFileLinkPickerPreviewImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.companyFileLinkPickerCurrentMeta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.companyFileLinkPickerName {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  word-break: break-word;
}

.companyFileLinkPickerMeta {
  color: rgba(203, 213, 225, 0.76);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.companyFileLinkPickerActions {
  display: grid;
  gap: 8px;
}

.companyFileLinkPickerFormats {
  color: rgba(203, 213, 225, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.companyWifiConfigForm {
  display: grid;
  gap: 12px;
}

.companyWifiConfigScanSection {
  display: grid;
  gap: 8px;
}

.companyWifiConfigScanHint {
  color: rgba(191, 219, 254, 0.92);
  font-size: 13px;
  font-weight: 800;
}

.companyWifiConfigScanBtn {
  justify-self: start;
}

.companyWifiConfigHiddenToggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.9);
}

.companyWifiConfigDivider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.45) 12%,
    rgba(148, 163, 184, 0.45) 88%,
    transparent 100%
  );
  margin: 2px 0;
}

.companyWifiConfigManualTitle {
  color: rgba(226, 232, 240, 0.9);
  font-size: 13px;
  font-weight: 900;
}

.companyWifiConfigHiddenToggle input {
  width: 16px;
  height: 16px;
}

.companyWifiConfigScannerWrap {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  overflow: hidden;
  background: rgba(2, 6, 23, 0.6);
  margin: 0 auto;
}

.companyWifiConfigScannerVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.companyWifiConfigScannerOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(15, 23, 42, 0) 28%,
      rgba(15, 23, 42, 0.42) 72%
    );
}

.companyWifiConfigScannerFrame {
  width: min(68%, 220px);
  aspect-ratio: 1 / 1;
  border: 2px solid rgba(96, 165, 250, 0.95);
  border-radius: 18px;
  box-shadow:
    0 0 0 999px rgba(2, 6, 23, 0.26),
    0 0 22px rgba(59, 130, 246, 0.4);
}

.companyWifiConfigScannerHint {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(239, 246, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.linkActions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.orderBtn,
.xBtn,
.menuDragHandleBtn {
  width: 44px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 950;
  cursor: pointer;
}

.orderBtn:hover,
.xBtn:hover,
.menuDragHandleBtn:hover {
  filter: brightness(1.05);
  border-color: rgba(255, 255, 255, 0.22);
}

.orderBtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.menuDragHandleBtn {
  letter-spacing: -1px;
  cursor: grab;
}

.menuDragHandleBtn:active {
  cursor: grabbing;
}

.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.modalActionsStack {
  justify-content: stretch;
}

.modalActionsStack > * {
  width: 100%;
}

/* Bouton Enregistrer des sections de personnalisation : grand et bien visible */
.companySectionSaveBtn {
  flex: 1 1 auto;
  min-width: 220px;
  padding: 17px 26px;
  font-size: 17px;
  letter-spacing: 0.4px;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.42);
}
.companySectionSaveBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.5);
}

@media (max-width: 720px) {
  .editorGridTwoCols {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .identityFieldsCol,
  .identityAsideCol {
    gap: 12px;
  }

  .identityFieldsCol {
    order: 1;
  }

  .identityAsideCol {
    order: 2;
  }

  .companyEditorBody {
    gap: 16px;
  }

  .modalActionsStack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .colorPickerPanel {
    min-height: 170px;
    max-height: 190px;
  }

  .companyLinksList {
    gap: 14px;
  }

  .companyLinkRow {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    align-items: stretch;
  }

  .companyLinkRow.is-separator {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .companyLinkRow.is-separator .companyLinkSeparatorPreview,
  .companyLinkRow.is-separator .linkActions {
    grid-column: auto;
  }

  .companyLinkRow > * {
    width: 100%;
  }

  .companyLinkRow.is-customize {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .companyLinkRow.is-customize .companyLinkTypeSelect,
  .companyLinkRow.is-customize .companyLinkLabelInput,
  .companyLinkRow.is-customize .companyLinkValueWrap,
  .companyLinkRow.is-customize .companyCustomButtonConfig,
  .companyLinkRow.is-customize .linkActions {
    grid-column: 1;
  }

  .companyCustomButtonConfigGrid {
    grid-template-columns: 66px 66px;
    gap: 8px;
    justify-content: start;
  }

  .companyHoursTopRow,
  .companyHoursDayFooter {
    align-items: stretch;
  }

  .companyHoursDayHead {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .companyHoursDayStatusSelect {
    width: 100%;
    min-width: 0;
  }

  .companyHoursSlotRow {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 34px;
    gap: 8px;
    padding: 10px;
  }

  .companyHoursSlotRemoveBtn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .companyHoursTimeSegments {
    min-height: 46px;
    padding-left: 10px;
    padding-right: 34px;
    gap: 6px;
  }

  .companyHoursTimeSegment {
    font-size: 18px;
  }

  .companyHoursTimePickerBtn {
    right: 4px;
    width: 24px;
    height: 24px;
  }

  .companyHoursTimeIcon {
    font-size: 14px;
  }

  .companyHoursSlotSeparator {
    font-size: 11px;
  }

  .companyHoursDayActions {
    width: 100%;
  }

  .companyHoursQuickActionBtn,
  .companyHoursAddSlotBtn {
    width: 100%;
    justify-content: center;
  }

  .companyButtonStyleRow {
    align-items: stretch;
  }

  .companyButtonStyleSelect {
    max-width: none;
  }

  .companyLinksHeadActions {
    width: 100%;
    justify-content: flex-end;
  }

  .companyLinksStickyActions {
    grid-template-columns: 1fr;
    margin: 2px 0 12px;
    padding: 12px;
  }

  .companyLinksNavigateConfirmActions {
    grid-template-columns: 1fr;
  }

  .companyLinksFeaturePickerGrid {
    grid-template-columns: 1fr;
  }

  .companyLinksTypePickerGrid {
    grid-template-columns: 1fr;
  }

  .linksEditorActions {
    width: 100%;
  }

  .linksEditorActions > * {
    flex: initial;
  }

  .companyGoogleReviewPickerSearchRow {
    grid-template-columns: 1fr;
  }

  .companyFileLinkPickerCurrent {
    grid-template-columns: 1fr;
  }

  .companyFileLinkPickerPreview {
    width: 100%;
    max-width: 120px;
    height: 120px;
  }

  .linkActions {
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
}

.linksQrLayout {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 22px;
  align-items: start;
}

.linksListCard,
.linkDetailsCard {
  padding: 22px;
}

.linksList {
  display: grid;
  gap: 14px;
}

.shortLinkItem {
  width: 100%;
  text-align: left;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: 0.15s ease;
}

.shortLinkItem:hover,
.shortLinkItem.is-active {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
}

.shortLinkItemTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.shortLinkName {
  font-size: 17px;
  font-weight: 900;
  color: #ffffff !important;
}

.shortLinkItem {
  color: #ffffff;
}

.shortLinkItem * {
  color: inherit;
}

.shortLinkAlias {
  color: #93c5fd !important;
}

.shortLinkTarget {
  color: var(--muted) !important;
}

.shortLinkBadge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.shortLinkAlias {
  margin-bottom: 8px;
  color: #93c5fd;
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.shortLinkTarget {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.emptyState {
  padding: 26px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.emptyStateTitle {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.emptyStateText {
  color: var(--muted);
  line-height: 1.4;
}

.contactsLoadingState {
  display: grid;
  gap: 10px;
  padding: 24px 20px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  margin-bottom: 12px;
}

.contactsLoadingState .inlineLoaderRow {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.contactsLoadingHint {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.contactsInlineLoadingState {
  padding: 8px 0 4px;
}

.linkDetailsCard {
  display: grid;
  gap: 18px;
}

.linkDetailsHeader {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  flex-wrap: wrap;
}

.linkDetailsActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.linkDetailsGrid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.shortQrCard {
  padding: 16px;
}

.shortStatsCol {
  display: grid;
  gap: 16px;
}

.shortKpiGrid {
  align-content: start;
}

.shortStatsControls {
  padding: 16px;
}

.shortChartCard {
  padding: 16px;
}

.kpiValueSmall {
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .linksQrLayout,
  .linkDetailsGrid,
  .formGridTwo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contactsLoadingState {
    padding: 18px 16px;
  }

  .linksHeroStats {
    grid-template-columns: 1fr;
  }

  .linksIntroCard,
  .createLinkPanel,
  .linksListCard,
  .linkDetailsCard {
    padding: 18px;
  }

  .shortLinkItem {
    padding: 15px;
  }
}

.linksPageHeader {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.linksPageHeaderTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.linksPageIntro {
  max-width: 760px;
}

.linksPageHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.addLinkBigBtn {
  min-height: 64px;
  padding: 0 28px;
  font-size: 18px;
  font-weight: 950;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28);
}

.linksTopControls {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.linksTopControls .statsFilters {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 14px;
}

.linksQrPage {
  display: grid;
  gap: 22px;
}

.linksQrLayout {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 22px;
  align-items: start;
}

.linksListCard,
.linkDetailsCard {
  padding: 22px;
}

.linksList {
  display: grid;
  gap: 14px;
}

.shortLinkItem {
  width: 100%;
  text-align: left;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: 0.18s ease;
}

.shortLinkItem:hover,
.shortLinkItem.is-active {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.09);
}

.shortLinkItem.is-inactive {
  opacity: 0.66;
}

.shortLinkItemTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.shortLinkName {
  font-size: 17px;
  font-weight: 900;
}

.shortLinkBadge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.shortLinkBadge.inactive {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.shortLinkAlias {
  margin-bottom: 8px;
  color: #93c5fd;
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.shortLinkTarget {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.linkDetailsCard {
  display: grid;
  gap: 18px;
}

.linkDetailsHeader {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  flex-wrap: wrap;
}

.linkDetailsActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.linkDetailsGrid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}

.shortQrCard {
  padding: 16px;
  display: grid;
  gap: 16px;
}

.shortLinkMeta {
  display: grid;
  gap: 12px;
}

.shortMetaLine {
  display: grid;
  gap: 6px;
}

.shortMetaLabel {
  font-size: 13px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.82);
}

.shortTargetLink {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.35;
  word-break: break-word;
  color: var(--muted);
}

.linkDetailsActionsBottom {
  margin-top: 2px;
}

.shortStatsCol {
  display: grid;
  gap: 16px;
}

.shortKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shortChartCard {
  padding: 16px;
}

.shortChartWrap {
  position: relative;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
}

.shortChartWrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.inlineLoaderRow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  min-height: 22px;
}

.miniSpinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--blue1);
  animation: spin 0.9s linear infinite;
}

.largeModalCard {
  width: min(760px, 96vw);
}

.dangerGhostBtn {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
}

.dangerGhostBtn:hover {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.12);
}

@media (max-width: 1100px) {
  .linksQrLayout,
  .linkDetailsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .linksTopControls .statsFilters {
    grid-template-columns: 1fr;
  }

  .shortKpiGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .linksPageHeader,
  .linksListCard,
  .linkDetailsCard {
    padding: 18px;
  }

  .addLinkBigBtn {
    width: 100%;
    min-height: 58px;
    font-size: 17px;
  }

  .linksPageHeaderActions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .linksPageHeaderActions .dashboardGuideBtn,
  .linksPageHeaderActions .addLinkBigBtn {
    width: 100%;
  }

  .shortChartWrap {
    height: 240px;
    max-height: 240px;
  }
}

.modalBack {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.modalBack[hidden] {
  display: none;
  pointer-events: none;
}

.modalCard {
  width: min(760px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.modalCard.companyEditorModal {
  width: min(920px, 96vw);
}

/* === Pop-ups d'accueil du dashboard (nouveautés / bienvenue) === */
/* Volontairement grandes et premium : grosse pop-up à l'arrivée. */
.modalCard.dashNoticeModal {
  width: min(620px, 94vw);
}
.dashNoticeHead {
  align-items: flex-start;
  padding: 30px 30px 0;
}
.dashNoticeHeadMain {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.dashNoticeIcon {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 42px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.dashNoticeIcon--green {
  background: rgba(31, 184, 138, 0.16);
  border-color: rgba(31, 184, 138, 0.32);
}
.dashNoticeModal .modalTitle {
  font-size: 30px;
  line-height: 1.12;
}
.dashNoticeSubtitle {
  margin-top: 9px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.dashNoticeModal .modalBody.dashNoticeBody {
  padding: 24px 30px 8px;
  gap: 20px;
}
.dashNoticeChips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.dashNoticeChip {
  font-size: 14.5px;
  font-weight: 700;
  color: #cfe9df;
  background: rgba(31, 184, 138, 0.13);
  border: 1px solid rgba(31, 184, 138, 0.22);
  border-radius: 999px;
  padding: 9px 15px;
}
.dashNoticeRows {
  display: grid;
  gap: 13px;
}
.dashNoticeRow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 17px 18px;
}
.dashNoticeRowIcon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: rgba(255, 255, 255, 0.08);
}
.dashNoticeRowIcon--green {
  background: rgba(31, 184, 138, 0.16);
}
.dashNoticeRowIcon--blue {
  background: rgba(55, 138, 221, 0.18);
}
.dashNoticeRowIcon--amber {
  background: rgba(239, 159, 39, 0.18);
}
.dashNoticeRowIcon--purple {
  background: rgba(127, 119, 221, 0.2);
}
.dashNoticeRowCopy {
  min-width: 0;
}
.dashNoticeRowTitle {
  font-size: 18px;
  font-weight: 800;
  color: #eef1f6;
}
.dashNoticeRowText {
  margin-top: 3px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}
.dashNoticeRowText b {
  color: #eef1f6;
  font-weight: 800;
}
.dashNoticeActionRow {
  padding: 10px 30px 28px;
}
.dashNoticeCta {
  width: 100%;
  justify-content: center;
  font-size: 17px;
  padding: 17px 24px;
  border-radius: 16px;
}
/* Bouton discret « ✨ » inline, juste après le titre « Tableau de bord » */
.dashboardNoticeRevisitBtn {
  flex: none;
  margin-left: 14px;
  padding: 7px 13px;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  border-radius: 13px;
}

@media (max-width: 600px) {
  .modalCard.dashNoticeModal {
    width: 94vw;
  }
  .dashNoticeHead {
    padding: 24px 20px 0;
  }
  .dashNoticeHeadMain {
    gap: 15px;
  }
  .dashNoticeIcon {
    width: 64px;
    height: 64px;
    font-size: 34px;
    border-radius: 18px;
  }
  .dashNoticeModal .modalTitle {
    font-size: 25px;
  }
  .dashNoticeSubtitle {
    font-size: 15.5px;
  }
  .dashNoticeModal .modalBody.dashNoticeBody {
    padding: 20px 20px 6px;
    gap: 16px;
  }
  .dashNoticeRowIcon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .dashNoticeRowTitle {
    font-size: 16.5px;
  }
  .dashNoticeRowText {
    font-size: 14.5px;
  }
  .dashNoticeActionRow {
    padding: 8px 20px 24px;
  }
}

.modalCard.companyLinksEditorModal {
  width: min(1360px, 97vw);
}

.modalHead {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 22px 22px 0;
}

.modalBody {
  padding: 22px;
}

.modalTitle {
  font-size: 24px;
  font-weight: 950;
  color: #fff;
}

.modalText {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.4;
}

.loyaltyActionModal {
  width: min(820px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.loyaltyActionBody {
  display: grid;
  gap: 16px;
  overflow: auto;
  min-height: 0;
}

.loyaltyScannerCard,
.loyaltyManualCard,
.loyaltyCustomerCard,
.loyaltyFlowPanel,
.loyaltyActionSuccess {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.loyaltyManualGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.loyaltyManualCardGroup {
  padding: 0;
  background: transparent;
  border: 0;
}

.loyaltyManualMethodCard {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.loyaltyScannerTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.loyaltyScannerTitle,
.loyaltyManualTitle,
.loyaltyFlowTitle {
  font-size: 20px;
  font-weight: 950;
}

.loyaltyScannerHint,
.loyaltyScannerState,
.loyaltyActionLoadingText,
.loyaltyActionSuccessText {
  color: var(--muted);
}

.loyaltyScannerViewport {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  min-height: 260px;
}

.loyaltyScannerVideo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  background: #000;
}

.loyaltyScannerLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.72),
    rgba(2, 6, 23, 0.84)
  );
  z-index: 2;
}

.loyaltyScannerLoading[hidden] {
  display: none !important;
}

.loyaltyScannerLoadingSpinner {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.98);
  animation: spin 0.8s linear infinite;
}

.loyaltyScannerLoadingText {
  font-size: 20px;
  font-weight: 950;
  color: #fff;
}

.loyaltyScannerOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.loyaltyScannerFrame {
  width: min(220px, 68vw);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.2);
}

.loyaltyManualRow {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(132px, 0.7fr);
  gap: 12px;
  align-items: center;
}

.loyaltyManualRow .ghostBtn {
  width: auto;
  min-width: 126px;
  min-height: 52px;
  padding: 0 16px;
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 900;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(15, 23, 42, 0.12);
}

.loyaltyPointsRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.loyaltyPointsInput {
  font-size: 26px;
  font-weight: 980;
  text-align: center;
  min-height: 62px;
  color: #86efac;
}

.loyaltyPointsStepBtn {
  min-width: 60px;
  min-height: 62px;
  padding: 0 16px;
  font-size: 30px;
  font-weight: 980;
}

.loyaltyPointsConfirmBtn {
  min-height: 62px;
  padding: 0 22px;
  font-size: 18px;
  font-weight: 950;
}

.loyaltyPointsPanel .loyaltyPointsRow {
  margin-top: 0;
}

.loyaltyManualTitle {
  margin-bottom: 14px;
}

.loyaltyActionResult {
  display: grid;
  gap: 16px;
}

.loyaltyActionLoading {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 12px 0 4px;
}

.loyaltyActionSpinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.92);
  animation: spin 0.8s linear infinite;
}

.loyaltyCustomerEyebrow {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.58);
}

.loyaltyCustomerEmail {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 980;
  word-break: break-word;
}

.loyaltyCustomerName {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.84);
}

.loyaltyCustomerIdentityName {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 950;
  word-break: break-word;
}

.loyaltyCustomerIdentityLine {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  word-break: break-word;
}

.loyaltyCustomerStats {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.loyaltyCustomerStat {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.loyaltyCustomerStatLabel {
  display: inline;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 850;
}

.loyaltyCustomerStat strong {
  display: inline;
  margin-top: 0;
  font-size: 16px;
  font-weight: 980;
}

.loyaltyRewardAvailability {
  font-size: 24px;
  font-weight: 980;
  line-height: 1.2;
}

.loyaltyRewardAvailability.ok {
  color: #86efac;
}

.loyaltyRewardAvailability.nope {
  color: #fca5a5;
}

.loyaltyRewardPanel .loyaltyRewardAvailability {
  margin-bottom: 18px;
}

.loyaltyRewardConfirmBtn {
  min-height: 64px;
  font-size: 19px;
  font-weight: 980;
  letter-spacing: 0.02em;
  margin-top: 6px;
}

.loyaltyActionSuccess {
  text-align: center;
  padding: 18px;
}

.loyaltyActionSuccessIcon {
  font-size: 48px;
  line-height: 1;
}

.loyaltyActionSuccessTitle {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 980;
}

.loyaltyActionSuccessText {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-line;
}

.loyaltyActionModalHead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(17, 24, 39, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 720px) {
  .homeQuickActionsGrid,
  .loyaltyQuickGrid {
    grid-template-columns: 1fr;
  }

  .homeQuickGroupButtonsLoyalty {
    grid-template-columns: 1fr;
  }

  .homeQuickAction,
  .loyaltyQuickBtn {
    min-height: 92px;
    padding: 18px;
  }

  .loyaltyActionModal {
    width: min(94vw, 620px);
    max-height: 94vh;
  }

  .loyaltyActionBody {
    gap: 14px;
  }

  .loyaltyManualGrid {
    grid-template-columns: 1fr;
  }

  .loyaltyScannerTop {
    grid-template-columns: 1fr;
  }

  .loyaltyManualRow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .loyaltyPointsRow {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }

  .loyaltyPointsConfirmBtn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .loyaltyCustomerStats {
    grid-template-columns: 1fr;
  }

  .loyaltyScannerVideo {
    height: 260px;
  }

  .loyaltyPointsInput,
  .loyaltyPointsRow .successBtn,
  .loyaltyRewardPanel .successBtn {
    width: 100%;
  }

}

@media (max-width: 1180px) {
  .homeMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) {
  .homeQuickActionsGrid.homeQuickActionsGridDual {
    grid-template-columns: 1fr;
  }

  .homeQuickGroupButtonsLoyalty {
    grid-template-columns: 1fr;
  }

  .homeQuickActionLabel {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  .homeMetricGrid {
    grid-template-columns: 1fr;
  }

  .homeMetricCardLoyalty {
    grid-column: span 1;
  }

  .homeMetricCardAutoSpan2 {
    grid-column: span 1;
  }

  .homeMetricCardLoyalty .homeMetricStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .homeHeroCard,
  .homeQuickActionsCard,
  .homeMetricsCard,
  .homeWatchCard,
  .homeModulesCard,
  .homeRecentCard {
    padding: 18px;
  }

  .homeHeroHead,
  .homeSectionHead,
  .homeInsightItemHeader,
  .homeModuleTop {
    display: grid;
    grid-template-columns: 1fr;
  }

  .homeSummaryStatus,
  .homeInsightMeta {
    justify-self: start;
    text-align: left;
  }

  .homeHeroAside {
    justify-items: stretch;
  }

  .homeHeroActions {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  .homeQuickAccessBtn {
    justify-self: start;
  }

  .homeHeroTitle {
    font-size: 34px;
  }

  .homeHeroTopRow {
    gap: 10px;
    align-items: center;
  }

  .homeSubscriptionBadge {
    width: auto;
    max-width: 100%;
    justify-content: center;
    padding-inline: 12px;
    font-size: 12px;
  }

  .homeMetricCard .kpiValue {
    font-size: 24px;
  }

  .homeMetricStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homeMetricStatValue {
    font-size: 30px;
  }

  .homeQuickActionIcon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
  }

  .homeQuickActionLabel {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .homeMetricGrid {
    grid-template-columns: 1fr;
  }
}

.iconBtn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.menuHeroCard,
.menuStatsCard {
  padding: 22px;
}

.menuPremiumModal {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(calc(100vh - 32px), 920px);
  background:
    radial-gradient(
      420px 220px at 0% 0%,
      rgba(96, 165, 250, 0.12),
      transparent 58%
    ),
    rgba(10, 14, 26, 0.96);
}

.menuPremiumModal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.menuHeroHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.menuHeroCopy {
  min-width: 0;
  flex: 1 1 320px;
}

.menuHeroActions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 14px;
}

.menuPublicLinkBox {
  display: grid;
  gap: 8px;
}

.menuPublicLinkRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.menuConfigMainBtn {
  min-height: 48px;
  font-size: 15px;
  padding-inline: 18px;
}

.menuDetailedStatsCard {
  display: grid;
  gap: 18px;
}

.menuDetailedKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2px;
}

.menuStatsTwoCols {
  align-items: start;
}

.menuRankingCard,
.menuChartCard {
  min-width: 0;
}

.menuMiniControls {
  margin-bottom: 14px;
  grid-template-columns: minmax(220px, 280px);
}

.menuChartWrap {
  margin-top: 0;
}

.loyaltyStatsCard .menuChartCard {
  margin-top: 14px;
}

.menuDetailedStatsCard .menuChartCard {
  margin-top: 0;
}

.menuRankingTable td,
.menuRankingTable th {
  vertical-align: middle;
}

.menuRankingTable {
  width: 100%;
  table-layout: fixed;
}

.menuRankingTable th,
.menuRankingTable td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.menuCategoryRankCell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.menuTopCategoriesList,
.menuListStack {
  display: grid;
  gap: 12px;
}

.menuTopCategoryRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.menuTopCategoryRank {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 980;
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe;
}

.menuTopCategoryTitle {
  font-size: 16px;
  font-weight: 900;
}

.menuConfigModal {
  width: min(720px, 94vw);
}

.menuConfigBody {
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
}

.productsServicesSectionNameCard {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  background:
    linear-gradient(180deg, rgba(180, 83, 9, 0.09), rgba(255, 255, 255, 0.03));
}

.productsServicesSectionNameEyebrow {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253, 186, 116, 0.92);
}

.productsServicesSectionNameRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.productsServicesSectionNameInput {
  min-height: 52px;
  border-color: rgba(180, 83, 9, 0.24);
  background: rgba(41, 24, 12, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.productsServicesSectionNameInput:focus {
  border-color: rgba(251, 146, 60, 0.55);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.16);
}

.productsServicesSectionNameSaveBtn {
  min-width: 152px;
  min-height: 52px;
  padding-inline: 18px;
  white-space: nowrap;
}

.productsServicesSectionNameSaveBtn.is-loading {
  opacity: 0.88;
  pointer-events: none;
}

.menuModalHeadGroup {
  display: grid;
  gap: 8px;
}

.menuModalHeadActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.menuBackBtn {
  justify-self: flex-start;
  min-height: 42px;
  padding: 0 14px;
}

.menuSaveBtn {
  min-height: 54px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 980;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.menuModalHeadActions .menuSaveBtn {
  min-height: 48px;
  padding-inline: 18px;
}

.menuActionChooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.menuActionCard {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  color: #fff;
  border-radius: 20px;
  min-height: 180px;
  padding: 22px;
  text-align: left;
  display: grid;
  gap: 10px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.menuActionCard:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.24);
}

.menuActionCard:active {
  transform: translateY(0) scale(0.995);
}

.menuActionIcon {
  font-size: 42px;
  line-height: 1;
}

.menuActionLabel {
  font-size: 22px;
  font-weight: 980;
}

.menuActionMeta {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.menuLargeModal {
  width: min(960px, 96vw);
  max-height: calc(100vh - 40px);
}

.menuModalBody {
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.menuModalToolbar,
.menuProductsFilters,
.menuAssociateRow {
  display: grid;
  gap: 10px;
}

.menuProductsFilters {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr) auto;
  align-items: end;
}

.menuProductsFilters .primaryBtn {
  min-height: 48px;
}

.menuFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.menuFormFull {
  grid-column: 1 / -1;
}

.menuCheckboxRow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 24px;
}

.menuCheckboxRow input {
  width: auto;
}

.menuSectionSplit {
  display: grid;
  gap: 10px;
}

.menuSectionSplitSticky {
  position: sticky;
  top: -22px;
  z-index: 4;
  margin: -22px -22px 24px;
  padding: 12px 22px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.96), rgba(11, 18, 32, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 14px 32px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
}

.menuAssociateRow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.menuAssociateProductsBtn {
  min-height: 48px;
  padding: 0 18px;
}

.menuCreateSubcategoryBtn {
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}

.menuAssociateRow > button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 16px;
  border-radius: 14px;
  white-space: nowrap;
}

.menuCreateInlineBtn {
  border-width: 1.6px;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 6, 23, 0.14);
}

.menuCreateInlineBtn:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.07);
}

.menuEntityRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.menuEntityRow:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(255, 255, 255, 0.065);
}

.menuEntityMain {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.menuEntityTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.menuEntityTitle {
  font-size: 16px;
  font-weight: 950;
}

.menuEntityMeta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.menuEntityActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.menuCategoryDraftRow {
  position: relative;
}

.menuCategoryDraftActions {
  flex-wrap: nowrap;
  align-items: center;
}

.menuCategoryMoveStack {
  display: grid;
  gap: 4px;
}

.menuCategoryMoveBtn,
.menuDragHandleBtn,
.menuCategoryDraftActions .xBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.menuCategoryMoveBtn {
  height: 18px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  border-radius: 10px;
}

.menuCategoryMoveGlyph {
  display: block;
  line-height: 1;
  transform: translateY(0.5px);
}

.menuCategoryMoveGlyph.is-down {
  transform: translateY(-0.5px) rotate(180deg);
}

.menuCategoryDraftRow.is-dragging {
  opacity: 0.58;
  border-color: rgba(96, 165, 250, 0.3);
}

.menuCategoryDraftRow.is-drop-before::before,
.menuCategoryDraftRow.is-drop-after::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.92);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.menuCategoryDraftRow.is-drop-before::before {
  top: -2px;
}

.menuCategoryDraftRow.is-drop-after::after {
  bottom: -2px;
}

.menuVisibilityChip,
.tagChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 900;
}

.tagChip {
  background: rgba(96, 165, 250, 0.16);
  color: #dbeafe;
}

.tagChipWarning {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.menuVisibilityChip.is-hidden {
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.menuDangerMiniBtn,
.dangerBtn {
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 900;
  cursor: pointer;
}

.warningBtn {
  border: 1px solid rgba(251, 191, 36, 0.3);
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 900;
  cursor: pointer;
}

.menuMiniBtn {
  padding: 11px 14px;
}

.menuCreateInlineBtn {
  min-height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}

.menuEmptyState {
  color: var(--muted);
  text-align: center;
}

.menuListStack.is-busy,
.menuTopCategoriesList.is-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.62;
}

.menuListStack.is-busy::after,
.menuTopCategoriesList.is-busy::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(96, 165, 250, 0.9);
  animation: spin 0.8s linear infinite;
}

.menuProductRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.menuInlineProduct {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.menuInlineProductThumbWrap {
  width: 64px;
  height: 64px;
}

.menuInlineProductThumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.menuInlineProductThumbPlaceholder {
  display: grid;
  place-items: center;
  font-size: 24px;
}

.menuInlineProductCopy {
  min-width: 0;
}

.menuSubcategoryRow {
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.1),
    rgba(96, 165, 250, 0.05)
  );
  border-color: rgba(96, 165, 250, 0.18);
}

.menuSubcategoryRow:hover {
  border-color: rgba(96, 165, 250, 0.26);
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.14),
    rgba(96, 165, 250, 0.07)
  );
}

.menuSubcategoryMain {
  cursor: pointer;
}

.menuSubcategoryCopy {
  min-width: 0;
}

.menuSubcategoryTitle {
  font-size: 20px;
  font-weight: 980;
  letter-spacing: 0.01em;
  color: #eff6ff;
  line-height: 1.2;
}

.menuSubcategoryDescription {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
  white-space: pre-line;
}

.menuProductMain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.menuProductThumbWrap {
  width: 74px;
  height: 74px;
}

.menuProductThumb {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.menuProductThumbPlaceholder {
  display: grid;
  place-items: center;
  font-size: 28px;
}

.menuProductCopy {
  min-width: 0;
}

.menuChipWrap {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menuPromoPrice {
  color: #fde68a;
}

/* === Prix multiples (formulaire produit / fiche) === */
/* Séparateur + espace au-dessus d'une section du formulaire produit
   (Prix, Catégories associées…). */
.menuFormSection {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menuPricesFieldHint {
  margin: -2px 0 2px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.menuPricesList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menuPricesEmpty {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
}

.menuPriceRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.menuPriceRowFields {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.menuPriceRowAmounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.menuPriceRow input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.menuPriceRow input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
}

.menuPriceRow input:focus {
  outline: none;
  border-color: rgba(124, 154, 255, 0.7);
}

.menuPriceRowActions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.menuPriceRowBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menuPriceRowBtn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

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

.menuPriceRowRemove:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fca5a5;
}

.menuAddPriceBtn {
  align-self: flex-start;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 14px;
  border: 1px dashed rgba(124, 154, 255, 0.5);
  background: rgba(124, 154, 255, 0.1);
  color: #cdd8ff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.menuAddPriceBtn:hover {
  background: rgba(124, 154, 255, 0.18);
}

.menuPriceMetaLine {
  display: block;
}

.menuPriceMetaName {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

@media (max-width: 520px) {
  .menuPriceRowFields {
    grid-template-columns: minmax(0, 1fr);
  }

  .menuPriceRowActions {
    flex-direction: row;
  }
}

.menuProductMediaRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 14px;
  align-items: start;
}

.menuImageDropzone {
  min-height: 156px;
}

.menuImagePreview {
  min-height: 156px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.menuImagePreview .companyLogoPreviewImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menuUploadCard {
  min-height: 156px;
  border-style: dashed;
  border-width: 1.5px;
  border-color: rgba(96, 165, 250, 0.24);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  align-content: center;
  padding: 18px;
}

.menuUploadCard:hover,
.menuUploadCard:focus-visible,
.menuUploadCard.is-dragover {
  border-color: rgba(96, 165, 250, 0.5);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(255, 255, 255, 0.05));
  transform: translateY(-1px);
}

.menuUploadCopy {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  align-content: center;
}

.menuUploadIcon {
  font-size: 34px;
  line-height: 1;
}

.menuUploadHint {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 700;
}

.menuFieldOptional {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.menuImageRemoveBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.38);
  background: rgba(127, 29, 29, 0.78);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  transition:
    transform 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}

.menuImageRemoveBtn:hover {
  transform: scale(1.04);
  background: rgba(153, 27, 27, 0.92);
  border-color: rgba(252, 165, 165, 0.58);
}

.menuImageRemoveBtn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.menuImagePreview .companyLogoPreviewLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 3;
}

.menuImagePreview .companyLogoPreviewSpinner {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #93c5fd;
  animation: spin 0.85s linear infinite;
}

.menuImagePreview .companyLogoPlaceholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  font-weight: 800;
  padding: 16px;
}

.menuSavingModal {
  width: min(420px, 92vw);
  max-height: none;
}

.menuSavingBody {
  padding: 34px 26px;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.menuSavingSpinner {
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.12);
  border-top-color: #93c5fd;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 0 10px rgba(96, 165, 250, 0.08);
}

.menuSavingTitle {
  font-size: 24px;
  font-weight: 980;
}

.menuSavingText {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.emailMarketingHeaderCard,
.emailCampaignListCard,
.emailCampaignFormCard,
.emailPreviewCard,
.emailEstimateCard,
.emailTrackingCard,
.emailLedgerCard {
  display: grid;
  gap: 16px;
}

.smsMarketingHeaderActions {
  grid-auto-columns: minmax(0, 240px);
}

.smsBudgetChipBtn {
  background:
    radial-gradient(circle at top right, rgba(74, 222, 128, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.smsCampaignLayout {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  grid-template-areas:
    "identity identity"
    "message preview";
}

.smsCampaignFormGrid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.smsCampaignFormGrid > label,
.smsSenderField {
  display: grid;
  gap: 10px;
  width: 100%;
}

.smsIdentitySection {
  grid-area: identity;
}

.smsMessageSection {
  grid-area: message;
}

.smsCampaignLayout .emailPreviewColumn {
  grid-area: preview;
}

.smsSenderField .modalInput {
  width: 100%;
}

.smsCampaignMessageField {
  display: grid;
  gap: 10px;
}

.smsCampaignMessageField > span {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.smsCampaignMessageField textarea {
  min-height: 150px;
  resize: vertical;
}

.smsCampaignMetaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smsCampaignCounterChip {
  display: grid;
  gap: 4px;
  min-width: 140px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

.smsCampaignCounterChipHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.smsCampaignCounterChip > span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

.smsCampaignCounterValueRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.smsCampaignCounterChip > strong {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.smsCampaignCounterSubvalue {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.64);
}

.smsCounterInfoBtn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.smsCampaignInfoCard {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background:
    linear-gradient(
      135deg,
      rgba(59, 130, 246, 0.2) 0%,
      rgba(37, 99, 235, 0.12) 100%
    ),
    rgba(20, 40, 88, 0.34);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(191, 219, 254, 0.18);
}

.smsCampaignInfoTitle {
  font-size: 14px;
  font-weight: 900;
  color: #dbeafe;
  margin-bottom: 6px;
}

.smsCampaignInfoText {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(219, 234, 254, 0.94);
}

.smsInfoModalCard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.smsInfoList {
  display: grid;
  gap: 10px;
}

.smsInfoLine {
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.5;
}

.smsPreviewCard {
  gap: 16px;
}

.smsPreviewPhoneShell {
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.smsPreviewPhone {
  width: min(100%, 320px);
  padding: 18px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at top, rgba(96, 165, 250, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 50px rgba(2, 6, 23, 0.24);
  display: grid;
  align-content: start;
  gap: 16px;
}

.smsPreviewHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.smsPreviewSender {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.smsPreviewDot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.smsPreviewBubble {
  max-width: 100%;
  padding: 16px 18px;
  border-radius: 24px 24px 24px 8px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.smsCampaignRows .emailCampaignRow {
  grid-template-columns: minmax(240px, 1.5fr) minmax(140px, 0.72fr) minmax(220px, 1fr) minmax(180px, 0.9fr);
}

.smsCampaignRowStatBox {
  display: grid;
  gap: 4px;
}

.smsCampaignRowStatLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.smsEstimateCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: start;
  width: 100%;
  min-height: 100%;
}

#smsEstimateLoading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
}

.smsEstimateKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smsCampaignStatsCard {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(74, 222, 128, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.smsCampaignStatsGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smsCampaignPreviewPhoneWrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.emailCampaignListHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.emailCampaignListActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
}

.emailCampaignListActions {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(220px, 280px) auto;
  justify-content: end;
  align-items: end;
}

.emailMarketingHeaderCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "content actions";
  align-items: start;
  gap: 18px;
}

.emailMarketingHeaderCard .sectionHeaderContent {
  grid-area: content;
  min-width: 0;
}

.emailMarketingHeaderActions {
  grid-area: actions;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 190px);
  align-items: stretch;
  justify-content: end;
  align-self: start;
  gap: 12px;
  margin-left: 0;
  width: max-content;
  max-width: 100%;
}

.emailBudgetChipBtn {
  min-width: 0;
  width: 100%;
  min-height: 92px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.045);
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.emailBudgetChipBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(147, 197, 253, 0.32);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.22);
}

.emailBudgetChipBtn:focus-visible {
  outline: none;
  border-color: rgba(147, 197, 253, 0.56);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.16),
    0 16px 34px rgba(2, 6, 23, 0.22);
}

.emailBudgetChipBtnQuota {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.emailBudgetChipLabel {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.emailBudgetChipValue {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 980;
  color: #fff;
}

.emailBudgetInfoModal {
  width: min(620px, 96vw);
}

.emailBudgetInfoHero {
  display: grid;
  place-items: center;
  min-height: 150px;
  text-align: center;
  background:
    radial-gradient(circle at top center, rgba(96, 165, 250, 0.16), transparent 48%),
    rgba(255, 255, 255, 0.03);
}

.emailBudgetInfoValue {
  font-size: clamp(36px, 7vw, 56px);
  line-height: 1;
  font-weight: 980;
  color: #fff;
}

.emailBudgetInfoList {
  display: grid;
  gap: 10px;
}

.emailBudgetInfoLine {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-weight: 700;
  line-height: 1.4;
}

.emailWalletInfoActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creditTopupModal {
  width: min(1180px, 96vw);
  background:
    radial-gradient(
      760px 320px at 18% 0%,
      rgba(96, 165, 250, 0.18),
      transparent 60%
    ),
    radial-gradient(
      540px 260px at 82% 12%,
      rgba(37, 99, 235, 0.16),
      transparent 58%
    ),
    rgba(8, 11, 21, 0.96);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.creditTopupModal .modalTitle {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.02;
}

.creditTopupPackGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.creditTopupPackItem {
  display: grid;
  gap: 10px;
  align-content: start;
}

.creditTopupPackCard {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 340px;
  padding: 20px 18px 18px;
  border-radius: 22px;
  text-align: left;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  overflow: hidden;
}

.creditTopupPackCard:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.28);
}

.creditTopupPackCard.is-selected {
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.24),
    0 0 0 1px rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.2), transparent 36%),
    rgba(96, 165, 250, 0.09);
}

.creditTopupPackBadge {
  justify-self: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.creditTopupPackBadge.recommended {
  background: linear-gradient(135deg, #f5d46b, #b8860b);
}

.creditTopupPackBadge.bestSeller {
  background: linear-gradient(135deg, #34d399, #16a34a);
}

.creditTopupPackBadge.cheapest {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.creditTopupPackBadge.bestPrice {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.creditTopupPackCredits {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.05;
  font-weight: 980;
  color: #fff;
  text-align: center;
}

.creditTopupPackPrice {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 980;
  color: #93c5fd;
  text-align: center;
}

.creditTopupPackMeta {
  display: grid;
  gap: 10px;
  align-content: start;
}

.creditTopupPackLine {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.creditTopupPackEquivLabel {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.creditTopupPackEquivBox {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creditTopupPackCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: auto auto 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  font-size: 16px;
  font-weight: 900;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.creditTopupPackCard.is-selected .creditTopupPackCheck {
  border-color: rgba(74, 222, 128, 0.9);
  background: rgba(74, 222, 128, 0.16);
  color: #86efac;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.08);
}

.creditTopupPaymentMethodsSection {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.creditTopupPaymentMethodsHead {
  display: grid;
  gap: 6px;
}

.creditTopupPaymentMethodsTitle {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.creditTopupPaymentMethodsText {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.creditTopupPaymentMethodsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.creditTopupPaymentMethodCard {
  display: grid;
  gap: 10px;
  min-height: 128px;
  padding: 16px 16px 15px;
  border-radius: 18px;
  text-align: left;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.creditTopupPaymentMethodCard:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.24);
}

.creditTopupPaymentMethodCard.is-selected {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 38%),
    rgba(96, 165, 250, 0.08);
}

.creditTopupPaymentMethodCardNew {
  background:
    radial-gradient(circle at top left, rgba(52, 211, 153, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.035);
}

.creditTopupPaymentMethodTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.creditTopupPaymentMethodBrand {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.creditTopupPaymentMethodBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.26);
  color: #bfdbfe;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creditTopupPaymentMethodNumber {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.creditTopupPaymentMethodMeta {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.creditTopupActionRow {
  display: flex;
  justify-content: center;
  padding: 0 24px 24px;
}

.creditTopupConfirmBtn {
  min-width: min(320px, 100%);
  min-height: 58px;
  font-size: 19px;
  font-weight: 950;
  border-radius: 18px;
  background: linear-gradient(135deg, #34d399, #16a34a);
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow:
    0 18px 36px rgba(22, 163, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.creditTopupConfirmBtn:hover {
  filter: brightness(1.03);
}

@media (max-width: 1080px) {
  .creditTopupPackGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creditTopupPackCard {
    min-height: 320px;
  }
}

@media (max-width: 760px) {
  .creditTopupPackGrid {
    grid-template-columns: 1fr;
  }

  .creditTopupPackCard {
    min-height: 0;
  }

  .creditTopupPaymentMethodsGrid {
    grid-template-columns: 1fr;
  }
}

.emailInfoBigBtn {
  min-height: 62px;
  font-size: 16px;
  font-weight: 900;
}

.emailSortPicker {
  display: grid;
  gap: 8px;
  min-width: 180px;
  font-weight: 800;
}

.emailCampaignCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.emailCampaignCard {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.emailCampaignCard:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.24);
}

.emailCampaignCard:focus-visible {
  outline: none;
  border-color: rgba(147, 197, 253, 0.62);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.18),
    0 16px 32px rgba(2, 6, 23, 0.24);
}

.emailCampaignCard.is-active {
  border-color: rgba(96, 165, 250, 0.42);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.2), transparent 38%),
    rgba(96, 165, 250, 0.08);
}

.emailCampaignCardTop {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.emailCampaignCardTitle {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.emailCampaignCardSubject {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.45;
}

.emailCampaignCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
}

.emailCampaignMiniStat {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.emailDraftPicker {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.emailDraftPickerHidden {
  display: none;
}

.emailCampaignFilterPicker,
.emailCampaignSearchField {
  display: grid;
  gap: 8px;
  min-width: 180px;
  font-weight: 800;
}

.emailCampaignSearchField {
  min-width: min(280px, 100%);
}

.emailCampaignNewDraftBtn {
  min-height: 56px;
  padding-inline: 24px;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.emailCampaignListTable {
  display: grid;
  gap: 10px;
}

.emailCampaignListHeader,
.emailCampaignRows .emailCampaignRow {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(140px, 0.72fr) minmax(180px, 1fr) minmax(180px, 0.9fr);
  gap: 16px;
  align-items: center;
}

.emailCampaignRows {
  display: grid;
  gap: 10px;
}

.emailCampaignPagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.emailCampaignPaginationText {
  min-width: 96px;
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.emailCampaignRows .fieldHint {
  padding: 8px 4px;
}

.emailCampaignRows .emailCampaignRow {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.emailCampaignRows .emailCampaignRow:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.24);
}

.emailCampaignRows .emailCampaignRow:focus-visible {
  outline: none;
  border-color: rgba(147, 197, 253, 0.62);
  box-shadow:
    0 0 0 3px rgba(96, 165, 250, 0.18),
    0 16px 32px rgba(2, 6, 23, 0.24);
}

.emailCampaignRows .emailCampaignRow.is-active {
  border-color: rgba(96, 165, 250, 0.42);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 32%),
    rgba(96, 165, 250, 0.08);
}

.emailCampaignRows .emailCampaignStatusBadge {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.emailCampaignRowMain {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.emailCampaignRowTitle {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.emailCampaignRowSubject {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emailCampaignRowStat,
.emailCampaignRowDate {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
}

.emailCampaignRowDate {
  display: grid;
  align-content: center;
  gap: 2px;
  padding-block: 10px;
}

.emailCampaignDateBlock {
  display: block;
  line-height: 1.2;
}

.emailCampaignDateLabel {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.2;
}

.emailCampaignDateValue,
.emailCampaignDateSingle {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.25;
  white-space: nowrap;
}

.emailCampaignRowEmpty {
  color: rgba(255, 255, 255, 0.44);
  font-size: 13px;
  font-weight: 700;
}

.emailSchedulePicker {
  min-width: 0;
}

.emailModalHeadActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emailCampaignEditorModal {
  width: min(1320px, 96vw);
}

.emailCampaignEditorBody {
  padding-top: 18px;
}

.emailCampaignEditorToolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: end;
}

.emailCampaignBuilderCard,
.emailCampaignAudienceCard {
  display: grid;
  gap: 18px;
}

.emailCampaignNameField {
  display: grid;
  gap: 8px;
}

.emailCampaignNameField > span:first-child {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.emailCampaignNameField .fieldHint {
  font-weight: 500;
}

.emailCampaignNameInput {
  min-height: 56px;
  font-size: 18px;
  font-weight: 800;
}

.emailCampaignEditorActions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 18px 24px 22px;
  margin-top: 4px;
  margin-right: 24px;
}

.emailCampaignEditorActions > * {
  min-height: 52px;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 800;
}

.emailCampaignStateModal,
.emailCampaignStatsModal,
.emailCampaignPreviewModal,
.emailLedgerModal,
.emailTopupModal {
  width: min(860px, 96vw);
}

.emailLedgerModal {
  display: flex;
  flex-direction: column;
}

.emailLedgerModal .modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.emailCampaignActionModal {
  width: min(560px, 96vw);
}

.emailCampaignActionModal > .modalActionsRow,
.emailCampaignStateModal > .modalActionsRow,
.emailCampaignStatsModal > .modalActionsRow,
.emailCampaignPreviewModal > .modalActionsRow {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 24px 22px;
  margin-top: 4px;
}

.creditInsufficientTopupBtn {
  min-height: 54px;
  padding-inline: 20px;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow:
    0 16px 34px rgba(37, 99, 235, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.creditInsufficientTopupBtn:hover {
  filter: brightness(1.04);
}

.emailTopupModal .modalActionsRow {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.emailCampaignActionModal > .modalActionsRow > *,
.emailCampaignStateModal > .modalActionsRow > *,
.emailCampaignStatsModal > .modalActionsRow > *,
.emailCampaignPreviewModal > .modalActionsRow > *,
.emailTopupModal .modalActionsRow > * {
  min-height: 50px;
  padding-inline: 18px;
}

.emailCampaignStatsModal {
  width: min(960px, 96vw);
}

.emailCampaignPreviewModal {
  width: min(980px, 96vw);
}

.emailCampaignStatsModal .modalBody {
  padding-top: 12px;
}

.emailTrackingCard .sectionMiniHead {
  margin-bottom: 2px;
}

#emailStatsCampaignSentAt {
  margin-top: 8px;
}

.emailStatValueWrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.emailStatRate {
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.72);
}

.emailCampaignPreviewModalWrap {
  min-height: 68vh;
}

.emailModalInnerCard {
  background: rgba(255, 255, 255, 0.025);
}

.emailScheduledKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emailCampaignStatusBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.1);
  font-weight: 900;
  color: #dbeafe;
  white-space: nowrap;
}

.emailCampaignStatusBadge[data-status="scheduled"] {
  border-color: rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.1);
  color: #fef08a;
}

.emailCampaignStatusBadge[data-status="sending"] {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.emailCampaignStatusBadge[data-status="sent"] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.emailCampaignStatusBadge[data-status="cancelled"] {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.emailCampaignLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.emailCampaignAudienceLayout {
  display: grid;
  grid-template-columns: minmax(340px, 0.94fr) minmax(0, 1.06fr);
  gap: 18px;
  align-items: start;
}

.emailAudienceColumn,
.emailEstimateColumn {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  width: 100%;
}

.emailAudienceColumnTitle,
.emailEstimateColumnTitle {
  margin: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.emailCampaignFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.emailComposerSection {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.03);
}

.emailAudienceSection {
  align-content: start;
}

.emailComposerLabel {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
}

.emailCampaignFieldWide {
  grid-column: 1 / -1;
}

.emailCampaignHtmlInput {
  min-height: 320px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  font-size: 13px;
  line-height: 1.55;
}

.emailBlockEditor {
  display: grid;
  gap: 14px;
  --email-block-title-rgb: 125, 211, 252;
  --email-block-text-rgb: 110, 231, 183;
  --email-block-button-rgb: 196, 181, 253;
  --email-block-image-rgb: 251, 191, 36;
  --email-block-separator-rgb: 103, 232, 249;
  --email-block-spacer-rgb: 244, 114, 182;
}

.emailBlockToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.emailBlockAddBtn {
  min-height: 42px;
  padding-inline: 14px;
  font-weight: 800;
  border-width: 1px;
  border-style: solid;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.emailBlockAddBtn[data-block-type="title"] {
  border-color: rgba(var(--email-block-title-rgb), 0.52);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-title-rgb), 0.12);
}

.emailBlockAddBtn[data-block-type="text"] {
  border-color: rgba(var(--email-block-text-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-text-rgb), 0.11);
}

.emailBlockAddBtn[data-block-type="button"] {
  border-color: rgba(var(--email-block-button-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-button-rgb), 0.11);
}

.emailBlockAddBtn[data-block-type="image"] {
  border-color: rgba(var(--email-block-image-rgb), 0.52);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-image-rgb), 0.11);
}

.emailBlockAddBtn[data-block-type="separator"] {
  border-color: rgba(var(--email-block-separator-rgb), 0.52);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-separator-rgb), 0.11);
}

.emailBlockAddBtn[data-block-type="spacer"] {
  border-color: rgba(var(--email-block-spacer-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--email-block-spacer-rgb), 0.11);
}

.emailBlockAddBtn:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.emailBlockAddBtn[data-block-type="title"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-title-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-title-rgb), 0.28);
}

.emailBlockAddBtn[data-block-type="text"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-text-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-text-rgb), 0.28);
}

.emailBlockAddBtn[data-block-type="button"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-button-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-button-rgb), 0.28);
}

.emailBlockAddBtn[data-block-type="image"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-image-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-image-rgb), 0.28);
}

.emailBlockAddBtn[data-block-type="separator"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-separator-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-separator-rgb), 0.28);
}

.emailBlockAddBtn[data-block-type="spacer"]:hover {
  box-shadow:
    inset 0 0 0 1px rgba(var(--email-block-spacer-rgb), 0.2),
    0 0 0 1px rgba(var(--email-block-spacer-rgb), 0.28);
}

.emailContentBlockList {
  display: grid;
  gap: 10px;
}

.emailBlockCard {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.05), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

.emailBlockCard.is-expanded {
  gap: 12px;
  padding: 14px;
}

.emailBlockCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  cursor: pointer;
}

.emailBlockCardMeta {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 260px;
}

.emailBlockBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.emailBlockBadge--title {
  border-color: rgba(var(--email-block-title-rgb), 0.48);
  background: rgba(var(--email-block-title-rgb), 0.16);
  color: rgb(223, 244, 255);
}

.emailBlockBadge--text {
  border-color: rgba(var(--email-block-text-rgb), 0.44);
  background: rgba(var(--email-block-text-rgb), 0.16);
  color: rgb(226, 255, 242);
}

.emailBlockBadge--button {
  border-color: rgba(var(--email-block-button-rgb), 0.45);
  background: rgba(var(--email-block-button-rgb), 0.16);
  color: rgb(242, 237, 255);
}

.emailBlockBadge--image {
  border-color: rgba(var(--email-block-image-rgb), 0.48);
  background: rgba(var(--email-block-image-rgb), 0.16);
  color: rgb(255, 246, 217);
}

.emailBlockBadge--separator {
  border-color: rgba(var(--email-block-separator-rgb), 0.48);
  background: rgba(var(--email-block-separator-rgb), 0.16);
  color: rgb(218, 251, 255);
}

.emailBlockBadge--spacer {
  border-color: rgba(var(--email-block-spacer-rgb), 0.46);
  background: rgba(var(--email-block-spacer-rgb), 0.16);
  color: rgb(255, 226, 242);
}

.emailBlockSummary {
  min-width: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emailBlockActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.emailBlockActionBtn {
  min-height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.emailBlockActionBtn:hover {
  border-color: rgba(96, 165, 250, 0.28);
}

.emailBlockActionBtn.danger {
  border-color: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

.emailBlockFields {
  display: grid;
  gap: 10px;
}

.emailBlockFieldGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.emailBlockFieldGridThree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.emailBlockFieldGridFour {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1.35fr;
  gap: 10px;
  align-items: end;
}

.emailBlockFieldWide {
  grid-column: 1 / -1;
}

.emailBlockFieldLabel {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
}

.emailColorFieldLabel {
  align-content: end;
}

/* Champ "Lien" d'un bouton : input + bouton « Choisir un lien » */
.emailLinkFieldRow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.emailLinkFieldRow .modalInput {
  flex: 1 1 auto;
  min-width: 0;
}
.emailLinkPickBtn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 14px;
  font-size: 12px;
}
/* Confirmation verte "✓ Lien vers …" quand le lien correspond à un service */
.emailLinkRecognized {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #34d399;
}
.emailLinkRecognized[hidden] {
  display: none;
}

/* Pop-up de sélection d'un lien (services activés) */
.emailLinkPickerList {
  display: grid;
  gap: 8px;
}
.emailLinkPickItem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}
.emailLinkPickItem:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}
.emailLinkPickItem:active {
  transform: scale(0.99);
}
.emailLinkPickIco {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.emailLinkPickLabel {
  flex: 1 1 auto;
  font-weight: 800;
  font-size: 14px;
}
.emailLinkPickArrow {
  flex: 0 0 auto;
  font-size: 20px;
  opacity: 0.6;
}

.emailColorFieldHeader {
  display: block;
}

.emailColorFieldControl {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

.emailColorInput {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.emailColorInput::-webkit-color-swatch-wrapper {
  padding: 0;
}

.emailColorInput::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}

.emailColorInput::-moz-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}

.emailBlockFieldLabel textarea {
  min-height: 90px;
}

.emailBlockInlineToggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emailBlockToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 700;
}

.emailBlockToggle input {
  accent-color: #60a5fa;
}

.emailBlockPreviewImage {
  width: min(100%, 220px);
  max-height: 120px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.emailBlockImageActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emailImageDropZone {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color 0.14s ease,
    background-color 0.14s ease;
}

.emailImageDropZone.has-image {
  border-style: solid;
}

.emailImageDropZone.is-dragover {
  border-color: rgba(96, 165, 250, 0.48);
  background: rgba(96, 165, 250, 0.08);
}

.emailBlockEmpty {
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.emailCampaignActionRow {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.emailAudienceModes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.emailAudienceChoiceCard {
  display: grid;
  gap: 12px;
}

.emailAudienceSwitchShell {
  display: block;
}

.emailAudienceMode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.76);
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease,
    color 0.12s ease;
}

.emailAudienceMode:hover {
  color: rgba(255, 255, 255, 0.92);
}

.emailAudienceMode.is-active {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(96, 165, 250, 0.16);
  color: #fff;
}

.emailAudienceMode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.emailAudienceTagsWrap {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.emailAudienceTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.emailAudienceTagChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.emailAudienceTagChip:hover {
  border-color: rgba(96, 165, 250, 0.32);
}

.emailAudienceTagChip.is-active {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.14);
  color: #dcfce7;
}

.emailPreviewModeSwitch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: -4px;
}

.emailPreviewModeSwitch .ghostBtn.is-active {
  border-color: rgba(96, 165, 250, 0.46);
  background: rgba(96, 165, 250, 0.14);
}

.emailPreviewHead {
  margin-bottom: 4px;
}

.emailPreviewColumn {
  position: sticky;
  top: 24px;
  align-self: start;
}

.emailCampaignLayout .emailPreviewColumn .emailPreviewCard,
.smsCampaignLayout .emailPreviewColumn .emailPreviewCard {
  position: static;
  top: auto;
  max-height: none;
  min-height: auto;
  overflow: visible;
}

.emailPreviewFrameWrap {
  display: flex;
  justify-content: stretch;
  align-items: flex-start;
  width: 100%;
  padding: 14px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.emailPreviewFrame {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 50px rgba(2, 6, 23, 0.22);
}

.emailPreviewFrameWrap.is-mobile {
  justify-content: center;
}

.emailPreviewFrameWrap.is-mobile .emailPreviewFrame {
  width: 390px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 30px;
}

.emailEstimateLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  border-radius: 24px;
  overflow: hidden;
}

.emailEstimateLoadingOverlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(7px);
}

.emailEstimateLoadingContent {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.emailEstimateCard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  width: 100%;
  align-content: start;
}

.emailEstimateKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emailBillingKpiGrid,
.emailTrackingKpiGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.emailTrackingKpiGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.emailTrackingKpiGrid > .kpiCard {
  grid-column: span 2;
}

.emailTrackingKpiGrid > .emailTrackingWideCard {
  grid-column: span 3;
}

.emailLedgerList {
  display: grid;
  gap: 10px;
}

.emailLedgerRow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.emailLedgerMain {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.emailLedgerTitle {
  font-weight: 800;
  color: #fff;
}

.emailLedgerMeta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
}

.emailLedgerDelta {
  font-weight: 900;
  white-space: nowrap;
}

.emailLedgerDelta.is-positive {
  color: #86efac;
}

.emailLedgerDelta.is-negative {
  color: #fca5a5;
}

.emailLedgerBalance {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.emailEstimateSummary {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.emailEstimateBottomGroup {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.emailEstimateSummaryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}

.emailEstimateSummaryRow strong {
  font-size: 16px;
  color: #fff;
}

.emailBudgetWarningCard {
  gap: 12px;
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.08);
}

.emailEstimateBreakdownCard,
.emailPartialCard {
  gap: 12px;
}

.emailEstimateBreakdown {
  display: grid;
  gap: 8px;
}

.emailEstimateBreakdownRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}

.emailEstimateBreakdownRow strong {
  color: #fff;
}

.emailPartialCard {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(250, 204, 21, 0.07);
}

.emailCampaignLoadingModal {
  width: min(460px, 92vw);
  border: 1px solid rgba(96, 165, 250, 0.14);
  background:
    radial-gradient(circle at top, rgba(96, 165, 250, 0.14), transparent 36%),
    rgba(15, 23, 42, 0.96);
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.42);
}

#emailAudienceTagList.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .emailCampaignEditorToolbar,
  .emailCampaignAudienceLayout {
    grid-template-columns: 1fr;
  }

  .emailMarketingHeaderCard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "actions";
  }

  .emailMarketingHeaderCard .sectionHeaderContent {
    width: 100%;
  }

  .emailMarketingHeaderActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    justify-content: start;
    width: min(100%, 440px);
  }

}

@media (max-width: 980px) {
  .emailCampaignLayout,
  .emailCampaignEditorToolbar,
  .emailCampaignAudienceLayout {
    grid-template-columns: 1fr;
  }

  .emailPreviewColumn {
    position: static;
    top: auto;
    align-self: start;
  }

  .smsCampaignLayout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "message"
      "preview";
  }

  .emailCampaignLayout .emailPreviewColumn .emailPreviewCard,
  .smsCampaignLayout .emailPreviewColumn .emailPreviewCard {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .emailCampaignCards,
  .emailCampaignFormGrid,
  .emailBlockFieldGrid,
  .emailBlockFieldGridFour,
  .emailBlockFieldGridThree,
  .emailEstimateKpiGrid,
  .emailTrackingKpiGrid,
  .emailScheduledKpiGrid {
    grid-template-columns: 1fr;
  }

  .emailCampaignListActions,
  .emailCampaignActionRow,
  .emailPreviewModeSwitch {
    width: 100%;
  }

  .emailCampaignListActions > *,
  .emailCampaignActionRow > *,
  .emailPreviewModeSwitch > *,
  .emailCampaignEditorActions > * {
    flex: 1 1 0;
  }

  .emailWalletInfoActions {
    width: 100%;
  }

  .emailWalletInfoActions {
    grid-template-columns: 1fr;
  }

  .emailMarketingHeaderActions {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
  }

  .emailMarketingHeaderActions .dashboardGuideBtn,
  .smsMarketingHeaderActions .dashboardGuideBtn {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .emailAudienceModes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emailCampaignListHeader {
    display: none;
  }

  .emailCampaignRows {
    gap: 12px;
  }

  .emailCampaignPagination {
    justify-content: flex-start;
  }

  .emailCampaignListActions {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .emailCampaignListActions > * {
    flex: 0 1 auto !important;
    width: auto;
  }

  .emailCampaignRows .emailCampaignRow {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .eventsListCard .emailCampaignListActions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .eventsListCard .emailCampaignListActions > * {
    width: 100%;
    min-width: 0 !important;
  }

  .eventsListCard .emailCampaignFilterPicker,
  .eventsListCard .emailCampaignSearchField {
    min-width: 0;
  }

  .loyaltyFiltersGrid .datesRow {
    grid-template-columns: 1fr;
  }

  .smsCampaignRows .emailCampaignRow {
    grid-template-columns: 1fr;
  }

  .emailCampaignRowStat,
  .emailCampaignRowDate {
    width: 100%;
    justify-self: stretch;
  }

  .emailAudienceMode {
    min-height: 58px;
    padding: 0 12px;
    font-size: 14px;
  }

  .emailModalHeadActions {
    width: 100%;
    justify-content: space-between;
  }

  .emailCampaignStatusBadge {
    width: 100%;
  }

  .emailCampaignCardTop {
    display: grid;
    grid-template-columns: 1fr;
  }

  .emailPreviewFrame {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .emailLedgerRow {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .emailPreviewFrameWrap.is-mobile .emailPreviewFrame {
    width: min(100%, 360px);
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .emailMarketingHeaderActions {
    gap: 10px;
  }

  .emailBudgetChipBtn {
    min-height: 84px;
    padding: 14px 12px;
    border-radius: 18px;
  }

  .emailBudgetChipLabel {
    font-size: 11px;
  }

  .emailBudgetChipValue {
    font-size: 22px;
  }
}

.menuPickerTopBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.menuPickerValidateBtn {
  min-height: 48px;
  padding: 0 18px;
}

.menuProductPickerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.menuPickerCard {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-radius: 16px;
  padding: 8px;
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.menuPickerCard:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.08);
}

.menuPickerCard.is-selected {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 16px 28px rgba(22, 163, 74, 0.12);
}

.menuPickerCardThumbWrap {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.menuPickerCardThumb {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.menuPickerCardThumbPlaceholder {
  display: grid;
  place-items: center;
  font-size: 30px;
}

.menuPickerCardCopy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.menuPickerCardTitle {
  font-size: 13px;
  font-weight: 950;
}

.menuPickerCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.menuPickerCardCheck {
  justify-self: flex-end;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 980;
  background: rgba(255, 255, 255, 0.08);
  color: transparent;
}

.menuPickerCard.is-selected .menuPickerCardCheck {
  background: rgba(34, 197, 94, 0.2);
  color: #bbf7d0;
}

.menuTinyMuted {
  color: var(--muted);
  font-size: 13px;
}

.selectedTagChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}

.selectedTagChip:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.18);
}

@keyframes menuModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.contactsHeroCard,
.contactsListCard,
.contactsSettingsCard,
.contactsTagsCard {
  padding: 22px;
}

.contactsTagsHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.contactsTagsManageBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.contactsTagsCountBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(134, 239, 172, 0.18);
  color: #86efac;
  font-size: 12px;
  font-weight: 900;
}

.tagsManagerModalCard {
  max-width: 640px;
}

.tagsManagerModalCard .modalBody {
  position: relative;
}

.tagsManagerToolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.tagsManagerSection {
  margin-top: 18px;
}

.tagsManagerSection:first-of-type {
  margin-top: 4px;
}

.tagsManagerSectionTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

.contactTagsSystemRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contactTagsManualList {
  display: grid;
  gap: 8px;
}

.contactTagRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contactTagRowName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactTagRow .contactTagItemActions {
  flex: none;
}

.contactIdentityHint {
  margin-top: -4px;
}

.contactsPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.contactsPageInfo {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.contactsPageBtn {
  white-space: nowrap;
}

.contactsPageBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.contactsHeroTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.contactsHeroActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.contactsHeroTotal {
  margin-top: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.contactsHeroTotalLabel {
  color: rgba(134, 239, 172, 0.9);
  font-size: 14px;
  font-weight: 900;
}

.contactsHeroTotalValue {
  color: #86efac;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  font-weight: 980;
}

.contactsTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.contactsSettingsList {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.contactChannelField {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.contactChannelChoice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.contactChannelOption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.contactChannelOption:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.contactChannelOption input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contactChannelOptionIcon {
  font-size: 22px;
  line-height: 1;
}

.contactChannelOptionLabel {
  font-size: 13.5px;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.92);
}

.contactChannelOptionTag {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fbbf24;
}

.contactChannelOption.is-selected,
.contactChannelOption:has(input:checked) {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.18);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.6);
}

.contactChannelOption:has(input:focus-visible) {
  outline: 2px solid rgba(37, 99, 235, 0.7);
  outline-offset: 2px;
}

.contactChannelsRecommendation {
  margin-top: 8px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(251, 146, 60, 0.18);
  color: #fde68a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.contactChannelsRecommendation b {
  color: #fff;
  font-weight: 900;
}

.contactSettingStack {
  display: grid;
  gap: 10px;
}

.contactSettingsSeparator {
  height: 1px;
  margin: 2px 2px 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0),
    rgba(148, 163, 184, 0.38),
    rgba(148, 163, 184, 0)
  );
}

.contactSettingRow,
.contactStatusToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.contactSettingRow.is-locked {
  align-items: flex-start;
}

.contactSettingLabel {
  font-size: 15px;
  font-weight: 900;
}

.contactSettingInlineControl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px 0 16px;
}

.contactSettingInlineControl > span {
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(226, 232, 240, 0.88);
}

.contactSettingInlineControl > select {
  min-width: 220px;
  max-width: 100%;
}

.settingBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.contactsTagCreateRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.contactTagsCloud,
.contactTagsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contactTagsCloud {
  margin-top: 14px;
}

.contactTagItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.contactTagItem.is-system {
  background: rgba(34, 197, 94, 0.08);
}

.contactTagItem.is-system.is-banned {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
}

.contactTagItem.is-system.is-invalid {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
}

.contactTagItem.is-system.is-unsubscribed {
  background: rgba(194, 65, 12, 0.1);
  border-color: rgba(194, 65, 12, 0.22);
}

.contactTagItem.is-system.is-loyalty {
  background: rgba(244, 114, 182, 0.14);
  border-color: rgba(244, 114, 182, 0.3);
}

.contactTagItem.is-system.is-wifi {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.24);
}

.contactTagItem.is-system.is-newsletter {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.24);
}

.contactTagItem.is-system.is-offers {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.24);
}

.contactTagItem.is-system.is-event {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.24);
}

.contactTagItemActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contactTagMeta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tagMiniBtn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contactTagChip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.contactTagChip.is-manual {
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
}

.contactTagChip.is-system {
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.contactTagChip.is-system.is-banned {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fecaca;
}

.contactTagChip.is-system.is-invalid {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fecaca;
}

.contactTagChip.is-system.is-unsubscribed {
  background: rgba(194, 65, 12, 0.16);
  border-color: rgba(194, 65, 12, 0.3);
  color: #fdba74;
}

.contactTagChip.is-system.is-loyalty {
  background: rgba(244, 114, 182, 0.2);
  border-color: rgba(244, 114, 182, 0.36);
  color: #fbcfe8;
}

.contactTagChip.is-system.is-wifi {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.28);
  color: #bae6fd;
}

.contactTagChip.is-system.is-newsletter {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.3);
  color: #bfdbfe;
}

.contactTagChip.is-system.is-offers {
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.28);
  color: #fde68a;
}

.contactTagChip.is-system.is-event {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.28);
  color: #e9d5ff;
}

.contactsFilters {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(180px, 0.6fr));
  gap: 12px;
  margin-top: 16px;
}

.contactsListHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.contactsListActions {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(240px, 300px) auto;
  justify-content: end;
  align-items: end;
  gap: 10px;
}

.contactsListFilterPicker,
.contactsListSearchField {
  display: grid;
  gap: 8px;
  min-width: 180px;
  font-weight: 800;
}

.contactsListSearchField {
  min-width: min(300px, 100%);
}

.contactsNewBtn {
  min-height: 56px;
  padding-inline: 24px;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .contactsListHead {
    flex-direction: column;
    align-items: stretch;
  }

  .contactsListActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .contactsListSearchField,
  .contactsNewBtn {
    grid-column: 1 / -1;
  }
}

.contactsSelectionToolbar {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.contactsSelectionToolbarMain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contactsBulkActions {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.08),
    rgba(255, 255, 255, 0.04)
  );
}

.contactsBulkActionsIntro {
  display: grid;
  gap: 4px;
}

.contactsBulkSelectionCount {
  font-size: 16px;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.94);
}

.contactsBulkActionsControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.contactsBulkTagControls {
  display: flex;
  flex: 1 1 480px;
  gap: 10px;
  flex-wrap: wrap;
}

.contactsBulkTagControls select {
  flex: 1 1 220px;
}

#contactsListStatus {
  margin-top: 14px;
}

.contactsList {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.contactsListCard,
.contactsTagsCard {
  position: relative;
}

.contactsListBusyOverlay,
.contactsCardBusyOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
  z-index: 4;
}

.contactsListCard.is-busy > *:not(.contactsListBusyOverlay),
.contactsTagsCard.is-busy > *:not(.contactsCardBusyOverlay) {
  opacity: 0.46;
}

.contactsListBusyOverlay .inlineLoaderRow,
.contactsCardBusyOverlay .inlineLoaderRow {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.78);
  color: rgba(255, 255, 255, 0.94);
  font-weight: 800;
}

.contactCard {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  color: #fff;
  transition: 0.16s ease;
}

.contactCard:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(96, 165, 250, 0.07);
}

.contactCard.is-selected {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.1);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}

.contactCardCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}

.contactCardCheck input {
  width: 18px;
  height: 18px;
  accent-color: #60a5fa;
}

.contactCardBody {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.contactCardMain {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 0.8fr)
    minmax(0, 0.78fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.contactCell {
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.3;
}

.contactCellEmail,
.contactCellPhone,
.contactCellBirthday {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactCellTags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow: hidden;
}

.contactCellTags .contactTagChip {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactTagMoreChip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
  flex: none;
}

.contactCardName {
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contactCellAction {
  display: flex;
  justify-content: flex-end;
}

.contactCardAction {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.contactCardMetaCompact {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.contactMetaInline {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 1360px) {
  .contactCard {
    padding: 12px;
  }

  .contactCardMain {
    gap: 10px;
  }

  .contactCell {
    font-size: 12px;
  }

  .contactCardName {
    font-size: 14px;
  }
}

.contactsModalCard {
  width: min(920px, 96vw);
}

.contactsSettingsModalCard {
  width: min(640px, 96vw);
}

.supportsCatalogPage {
  display: grid;
  gap: 20px;
}

.supportsCatalogIntroCard,
.supportsCatalogFrameCard {
  padding: 22px;
}

.supportsCatalogActions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.supportsCatalogFrameCard {
  overflow: hidden;
}

.supportsCatalogFrame {
  width: 100%;
  min-height: 78vh;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.tagEditModalCard {
  width: min(520px, 94vw);
}

.contactImportModalCard {
  width: min(640px, 96vw);
}

.contactImportHintCard {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.contactImportHintActions {
  margin-top: 4px;
}

.contactImportTagPicker {
  display: flex;
  gap: 10px;
  align-items: center;
}

.contactImportTagPicker select {
  flex: 1 1 auto;
}

.contactImportSelectedTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
  margin-top: 10px;
}

.contactImportSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.contactImportSelectedTag:hover {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(96, 165, 250, 0.18);
}

.contactImportResult {
  display: grid;
  gap: 14px;
}

.contactImportSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.contactImportMetric {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.contactImportMetric.is-added {
  background: rgba(34, 197, 94, 0.1);
}

.contactImportMetric.is-updated {
  background: rgba(96, 165, 250, 0.1);
}

.contactImportMetric.is-ignored {
  background: rgba(245, 158, 11, 0.1);
}

.contactImportMetricLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.contactImportMetricValue {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 950;
}

.contactImportIgnoredWrap {
  display: grid;
  gap: 10px;
}

.contactImportIgnoredList {
  display: grid;
  gap: 8px;
}

.contactImportIgnoredItem {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .contactImportTagPicker {
    flex-direction: column;
    align-items: stretch;
  }

  .contactsSelectionToolbarMain,
  .contactsBulkActionsControls {
    flex-direction: column;
    align-items: stretch;
  }

  .contactsBulkTagControls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "select select"
      "add remove";
    align-items: stretch;
    gap: 8px;
    flex: 0 1 auto;
  }

  .contactsBulkTagControls select {
    grid-area: select;
    min-width: 0;
  }

  .contactsBulkTagControls #bulkAddTagBtn {
    grid-area: add;
  }

  .contactsBulkTagControls #bulkRemoveTagBtn {
    grid-area: remove;
  }

  .contactsBulkTagControls .ghostBtn {
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
    padding: 0 12px;
  }

  .contactsBulkActions {
    gap: 10px;
    padding: 14px;
  }

  .contactsBulkActionsIntro {
    gap: 2px;
  }
}

/* =====================================================================
   Pop-up contact (ajout / modification) — refonte premium + mobile
   Feuille verticale élégante : en-tête avec avatar vivant, sections
   aérées, switches iOS, en-tête/pied collants ; bottom-sheet sur mobile.
   ===================================================================== */
.contactEditorModalPro {
  width: min(560px, 96vw);
  max-height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(
      130% 80% at 0% 0%,
      rgba(96, 165, 250, 0.16),
      rgba(96, 165, 250, 0) 60%
    ),
    rgba(17, 24, 39, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
}

.contactEditorForm {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* Poignée décorative (visible seulement en bottom-sheet mobile) */
.contactEditorGrab {
  display: none;
}

/* ---- En-tête collant ---- */
.contactEditorHead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.contactEditorHeadMain {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.contactEditorAvatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.5px;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.4);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.contactEditorAvatar.is-empty {
  font-size: 28px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.contactEditorHeadCopy {
  min-width: 0;
}

.contactEditorTitle {
  font-size: 21px;
  font-weight: 950;
  color: #fff;
  line-height: 1.15;
}

.contactEditorSubtitle {
  margin-top: 3px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}

.contactEditorClose {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.contactEditorClose:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

/* ---- Corps défilant ---- */
.contactEditorBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 22px;
  display: grid;
  gap: 20px;
}

.contactEditorSection {
  display: grid;
  gap: 12px;
}

.contactEditorSectionLabel {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(96, 165, 250, 0.9);
}

.contactEditorRowTwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contactEditorField {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.contactEditorField > label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.82);
}

.contactEditorField input {
  min-height: 50px;
  border-radius: 14px;
  font-size: 16px; /* >=16px : pas de zoom auto iOS au focus */
  background: rgba(0, 0, 0, 0.26);
}

/* ---- Champ avec icône (e-mail, téléphone, anniversaire) ---- */
.contactEditorInputIcon {
  position: relative;
  display: flex;
  align-items: center;
}

.contactEditorInputGlyph {
  position: absolute;
  left: 14px;
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.85;
}

.contactEditorInputIcon input {
  padding-left: 44px;
}

/* ---- Aide / hints ---- */
.contactEditorHint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

.contactEditorHintIcon {
  flex: none;
  line-height: 1.4;
}

.contactEditorHint strong {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Switches iOS (statuts) ---- */
.contactEditorToggles {
  display: grid;
  gap: 10px;
}

.contactEditorToggle {
  cursor: pointer;
  gap: 16px;
  align-items: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.contactEditorToggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.contactEditorToggleCopy {
  min-width: 0;
}

.contactEditorToggleTitle {
  font-size: 15px;
  font-weight: 850;
  color: #fff;
}

.contactEditorToggleText {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.contactEditorToggle input[type="checkbox"] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.contactEditorToggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}

.contactEditorToggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
}

.contactEditorToggle input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.contactEditorToggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* ---- Pied collant ---- */
.contactEditorFooter {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 17, 28, 0.7);
}

.contactEditorFooterMain {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.contactEditorDeleteBtn {
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 850;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.contactEditorDeleteBtn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.42);
}

.contactEditorCancelBtn {
  min-height: 48px;
}

.contactEditorSaveBtn {
  min-height: 48px;
  padding: 0 26px;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

/* ---- Bottom-sheet plein écran sur mobile ---- */
@media (max-width: 640px) {
  .contactEditorBack {
    padding: 0;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.6);
  }

  .contactEditorModalPro {
    width: 100%;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 26px 26px 0 0;
    border-bottom: 0;
    animation: contactSheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .contactEditorGrab {
    display: block;
    flex: none;
    width: 42px;
    height: 5px;
    margin: 9px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  .contactEditorHead {
    padding: 14px 18px 16px;
  }

  .contactEditorAvatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 18px;
  }

  .contactEditorAvatar.is-empty {
    font-size: 24px;
  }

  .contactEditorTitle {
    font-size: 19px;
  }

  .contactEditorBody {
    padding: 18px;
    gap: 18px;
    /* respire au-dessus de la barre de navigation iOS */
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .contactEditorFooter {
    padding: 14px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    gap: 10px;
  }

  /* On garde le switch aligné à droite (pas d'empilement vertical) */
  .contactEditorToggle {
    flex-direction: row;
    align-items: center;
  }

  /* Boutons confortables au pouce : Enregistrer prend la largeur */
  .contactEditorFooterMain {
    flex: 1 1 auto;
  }

  .contactEditorCancelBtn {
    flex: 0 0 auto;
    padding: 0 18px;
  }

  .contactEditorSaveBtn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .contactEditorDeleteBtn {
    padding: 0 14px;
    min-height: 48px;
  }
}

@keyframes contactSheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Très petits écrans : prénom/nom empilés */
@media (max-width: 380px) {
  .contactEditorRowTwo {
    grid-template-columns: 1fr;
  }
}

.contactsModalBody {
  display: grid;
  gap: 16px;
}

.contactsSettingsModalBody {
  display: grid;
  gap: 16px;
}

.contactsEditorGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.contactsEditorMain,
.contactsEditorAside {
  display: grid;
  gap: 14px;
}

.contactIdentityGrid,
.contactDetailsGrid {
  align-items: start;
}

.contactTagsSelector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contactTagPicker {
  display: block;
}

.contactTagPicker select {
  width: 100%;
  min-width: 0;
}

.tagPickerRow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.tagPickerRow .contactTagPicker {
  flex: 1 1 auto;
  min-width: 0;
}

.tagPickerRow .tagCreateBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.tagCreateModal {
  max-width: 460px;
}

.contactSelectedTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.contactSelectedTag.is-manual {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
}

.contactSelectedTag.is-system {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
}

.contactSelectedTag.is-system.is-loyalty {
  background: rgba(244, 114, 182, 0.2);
  border-color: rgba(244, 114, 182, 0.36);
  color: #fbcfe8;
}

.contactSelectedTag.is-system.is-wifi {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.28);
  color: #bae6fd;
}

.contactSelectedTag.is-system.is-newsletter {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.3);
  color: #bfdbfe;
}

.contactSelectedTag.is-system.is-offers {
  background: rgba(250, 204, 21, 0.16);
  border-color: rgba(250, 204, 21, 0.28);
  color: #fde68a;
}

.contactSelectedTag.is-system.is-event {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.28);
  color: #e9d5ff;
}

.contactSelectedTag:hover {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(96, 165, 250, 0.18);
}

.contactSelectedTag.is-system:hover {
  filter: brightness(1.06);
}

.contactSettingRow input,
.contactStatusToggle input {
  width: 18px;
  height: 18px;
  accent-color: #60a5fa;
}

@media (max-width: 1100px) {
  .contactsTopGrid,
  .contactsEditorGrid {
    grid-template-columns: 1fr;
  }

  .contactCellName {
    grid-area: name;
  }

  /* Sur mobile les cartes sont empilées : on privilégie la lisibilité
     complète (pas de troncature) plutôt que la hauteur uniforme. */
  .contactCellEmail,
  .contactCellPhone,
  .contactCellBirthday,
  .contactCardName {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .contactCellTags {
    flex-wrap: wrap;
    overflow: visible;
  }

  .contactCellEmail {
    grid-area: email;
  }

  .contactCellPhone {
    grid-area: phone;
  }

  .contactCellBirthday {
    grid-area: birthday;
  }

  .contactCellTags {
    grid-area: tags;
  }

  .contactCellAction {
    grid-area: action;
  }

  .contactCardMain {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "name email action"
      "phone birthday birthday"
      "tags tags tags";
    align-items: start;
  }

  .contactCellAction {
    justify-content: flex-end;
    align-self: start;
  }
}

@media (max-width: 920px) {
  .contactCardMain {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name action"
      "email email"
      "phone birthday"
      "tags tags";
    gap: 10px;
  }

  .contactCard {
    padding: 12px;
  }

  .contactCardAction {
    justify-self: end;
  }

  .contactCardMetaCompact {
    margin-top: 8px;
  }
}

@media (max-width: 720px) {
  .loyaltyHeroCard,
  .loyaltyStatusCard,
  .loyaltyStatsCard,
  .loyaltyLockedCard {
    padding: 18px;
  }

  .loyaltyStatusActions,
  .loyaltyToggle,
  #openLoyaltyConfigBtn {
    width: 100%;
  }

  .loyaltyFiltersGrid,
  .loyaltyIndicatorsGrid,
  .loyaltyConfigGrid {
    grid-template-columns: 1fr;
  }

  .loyaltyRuleInputRow {
    grid-template-columns: 1fr;
  }

  .loyaltyRuleSuffix {
    justify-self: flex-start;
  }

  .loyaltyConfigActions {
    flex-direction: column-reverse;
  }

  .loyaltyConfigActions .ghostBtn,
.loyaltyConfigActions .primaryBtn {
    width: 100%;
  }
}

.eventsHeroCard,
.eventsListCard {
  display: grid;
  gap: 16px;
}

.eventsHeroCard {
  padding: 22px;
}

.eventsListCard {
  padding: 22px;
}

.eventsHeroHead {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.eventsHeroCopy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1 1 320px;
}

.eventsHeroActions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.eventsListTable {
  margin-top: 6px;
}

.eventsRows {
  display: grid;
  gap: 10px;
}

.emailCampaignRows.eventsRows .eventsRow {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 26%),
    rgba(255, 255, 255, 0.04);
}

.emailCampaignRows.eventsRows .eventsRow:hover {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 28%),
    rgba(255, 255, 255, 0.05);
}

.eventsRowMain {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.eventsRowThumb {
  width: 88px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.eventsRowThumb.is-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 28px;
}

.eventsRowMainCopy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.eventsRowTitle {
  font-size: 16px;
  font-weight: 900;
}

.eventsRowSubline,
.eventsRowDate {
  color: var(--muted);
  font-size: 13px;
}

.eventsRowDate {
  display: grid;
  gap: 4px;
}

.eventsRowDateLine {
  line-height: 1.4;
}

.emailCampaignRows.eventsRows .eventsStatusBadge {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="upcoming"] {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="ongoing"] {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="finished"] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="active"] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="scheduled"] {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.emailCampaignRows.eventsRows .eventsStatusBadge[data-status="inactive"] {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

.eventsRowStat {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 58px;
  padding: 8px 14px;
  width: 100%;
  justify-self: stretch;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
}

.eventsRowEmpty {
  justify-self: start;
}

.eventsEmptyState {
  padding: 26px 18px;
  text-align: center;
  color: var(--muted);
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

.eventsEditorModal,
.eventsDetailModal {
  width: min(860px, calc(100vw - 40px));
}

.eventsDetailModal {
  width: min(920px, calc(100vw - 48px));
}

.eventsEditorModal {
  width: min(980px, calc(100vw - 40px));
  overflow-y: auto;
}

.eventsDetailModal .modalBody {
  display: grid;
  gap: 20px;
}

.eventsDetailHeadActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

.eventsDetailHeadActions .eventsStatusBadge {
  min-height: 34px;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="upcoming"] {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="ongoing"] {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="finished"] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="active"] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="scheduled"] {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fdba74;
}

.eventsDetailHeadActions .eventsStatusBadge[data-status="inactive"] {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

.eventsDetailModal .modalHead {
  align-items: center;
}

#eventDetailTitle.modalTitle {
  color: #93c5fd;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eventsEditorBody {
  gap: 20px;
}

.eventsEditorIntro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 45%),
    rgba(255, 255, 255, 0.035);
}

.eventsEditorIntroIcon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.eventsEditorIntroCopy {
  display: grid;
  gap: 4px;
}

.eventsEditorIntroTitle {
  font-size: 18px;
  font-weight: 900;
  color: #f8fafc;
}

.eventsEditorIntroText {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.5;
  font-size: 14px;
}

.eventsEditorLayout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.eventsEditorPanel {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  align-items: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.015);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.eventsEditorPanelHead {
  display: grid;
  gap: 4px;
}

.eventsEditorPanelTitle {
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
}

.eventsEditorPanelText {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
}

.eventsEditorFields {
  display: grid;
  gap: 14px;
  align-content: start;
  align-items: start;
}

.eventsEditorFieldsTwoCols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-content: start;
  align-items: start;
}

.eventsEditorLayout .formGroupWide {
  min-width: 0;
}

.eventsEditorLayout .compactFieldGroup {
  display: grid;
  gap: 7px;
}

.eventsImagePreviewWrap {
  position: relative;
  width: min(100%, 520px);
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.eventsImagePreview {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.eventsImagePreviewLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}

.eventsImagePreviewSpinner {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.16);
  border-top-color: #93c5fd;
  animation: spin 0.85s linear infinite;
}

.eventsImageDropzone {
  min-height: 146px;
}

.eventsEditorTextarea {
  min-height: 170px;
}

#eventStartInput::-webkit-calendar-picker-indicator,
#eventEndInput::-webkit-calendar-picker-indicator,
#specialOfferStartInput::-webkit-calendar-picker-indicator,
#specialOfferEndInput::-webkit-calendar-picker-indicator {
  filter: invert(84%) sepia(14%) saturate(1378%) hue-rotate(183deg)
    brightness(102%) contrast(97%);
  opacity: 1;
  cursor: pointer;
}

#specialOfferStartInput,
#specialOfferEndInput {
  color-scheme: dark;
}

#emailCampaignScheduleInput::-webkit-calendar-picker-indicator {
  filter: invert(82%) sepia(38%) saturate(2530%) hue-rotate(184deg)
    brightness(101%) contrast(98%);
  opacity: 1;
  cursor: pointer;
}

.emailScheduleValidation {
  margin-top: -2px;
}

#emailCampaignScheduleInput.is-invalid {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18);
}

#saveEventEditorBtn {
  min-height: 52px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#saveCompanyIdentityBtn,
#saveCompanyHoursBtn,
#saveCompanyLinksBtn {
  min-height: 54px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eventsImageRemoveBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.9);
  color: #fff7f7;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(127, 29, 29, 0.28);
  z-index: 3;
}

.eventsImageRemoveBtn:hover,
.eventsImageRemoveBtn:focus-visible {
  background: rgba(220, 38, 38, 0.96);
  outline: none;
}

.eventsDetailBody {
  display: grid;
  gap: 18px;
}

.eventsDetailTop {
  display: grid;
  gap: 16px;
  align-items: start;
}

.eventsDetailTop.has-image {
  grid-template-columns: 180px minmax(0, 1fr);
}

.eventsDetailTop.no-image {
  grid-template-columns: 1fr;
}

.eventsDetailThumb {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.eventsDetailHeading {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.eventsDetailEventName {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
  font-weight: 900;
  color: #f8fafc;
}

.eventsDetailEventDescription {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  font-size: 15px;
}

.eventsDetailSummaryGrid,
.eventsDetailMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eventsDetailMetaCard {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.02);
}

.eventsDetailMetaLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.eventsDetailMetaValue {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  word-break: break-word;
}

.eventsDetailMetaStack {
  display: grid;
  gap: 8px;
}

.eventsDetailLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #93c5fd;
  text-decoration: none;
  word-break: break-word;
}

.eventsDetailLink:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .eventsHeroActions {
    width: 100%;
    justify-content: flex-start;
  }

  .eventsRows .eventsRow {
    grid-template-columns: 1fr;
  }

  .eventsDetailTop.has-image {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 14px;
  }

  .eventsDetailThumb {
    width: 132px;
    height: 88px;
    border-radius: 16px;
  }

  .eventsStatusBadge {
    justify-self: flex-start;
  }

  .eventsEditorLayout,
  .eventsEditorFieldsTwoCols,
  .eventsDetailSummaryGrid,
  .eventsDetailMetaGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .eventsHeroCard,
  .eventsListCard {
    padding: 18px;
  }

  .eventsEditorModal {
    width: min(100vw - 20px, 980px);
  }

  .eventsEditorIntro {
    grid-template-columns: 1fr;
  }

  .eventsRows .eventsRow {
    grid-template-columns: 1fr;
  }

  .eventsEditorFields .compactFieldGroup,
  .eventsEditorFieldsTwoCols .compactFieldGroup {
    min-width: 0;
  }

  #eventStartInput,
  #eventEndInput,
  #specialOfferStartInput,
  #specialOfferEndInput,
  #specialOfferDurationMode {
    min-width: 0;
    max-width: 100%;
  }

  .eventsRowThumb {
    width: 72px;
    height: 56px;
  }

  .eventsRowMain {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .contactsHeroCard,
  .contactsListCard,
  .contactsSettingsCard,
  .contactsTagsCard {
    padding: 18px;
  }

  .contactsFilters,
  .contactsTagCreateRow,
  .contactsEditorGrid,
  .contactImportSummary {
    grid-template-columns: 1fr;
  }

  .contactsListHead {
    flex-direction: column;
    align-items: stretch;
  }

  .contactsListActions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .supportsCatalogIntroCard,
  .supportsCatalogFrameCard {
    padding: 18px;
  }

  .supportsCatalogFrame {
    min-height: 70vh;
  }

  .contactsHeroActions,
  .contactsHeroTop > .primaryBtn,
  .contactsTagCreateRow > .ghostBtn,
  .contactsListActions > * {
    width: 100%;
  }

  .contactsHeroActions > * {
    width: 100%;
  }

  .contactSettingRow,
  .contactStatusToggle,
  .contactTagItem {
    flex-direction: column;
    align-items: flex-start;
  }

  .contactSettingInlineControl {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  .contactSettingInlineControl > select {
    min-width: 0;
    width: 100%;
  }

  .contactTagPicker {
    flex-direction: column;
    align-items: stretch;
  }

  .contactCardMain {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "email"
      "phone"
      "birthday"
      "tags"
      "action";
    gap: 8px;
  }

  .contactCard {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contactCardCheck {
    justify-content: flex-start;
    min-height: auto;
  }

  .contactCellAction,
  .contactCardMetaCompact {
    justify-content: flex-start;
  }

  .contactCardAction {
    white-space: normal;
  }

  .contactsModalBody,
  .contactsSettingsModalBody,
  .contactsEditorMain,
  .contactsEditorAside {
    gap: 12px;
  }
}

@media (max-width: 980px) {
  .kpiGrid.loyaltyKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpiGrid.loyaltyKpiGrid .kpiCard {
    min-width: 0;
    padding: 12px;
  }

  .kpiGrid.loyaltyKpiGrid .kpiValue {
    font-size: clamp(20px, 4vw, 28px);
  }

  .kpiGrid.loyaltyKpiGrid .kpiLabel {
    font-size: 11px;
  }

  .kpiGrid.loyaltyKpiGrid .kpiSub {
    font-size: 10px;
  }

  .menuActionChooser,
  .menuFormGrid,
  .menuProductsFilters,
  .menuProductMediaRow {
    grid-template-columns: 1fr;
  }

  .menuPickerTopBar,
  .menuProductPickerGrid {
    grid-template-columns: 1fr;
  }

  .menuPublicLinkRow {
    grid-template-columns: 1fr;
  }

  .menuDetailedKpiGrid,
  .menuMiniControls {
    grid-template-columns: 1fr;
  }

  .menuProductRow,
  .menuEntityRow,
  .menuProductMain,
  .menuTopCategoryRow {
    grid-template-columns: 1fr;
  }

  .menuEntityActions {
    justify-content: flex-start;
  }

  .menuCheckboxRow {
    margin-top: 0;
  }

  .menuModalHeadGroup {
    width: 100%;
  }

  .menuModalHeadActions {
    width: 100%;
    justify-content: flex-end;
  }

  .menuBackBtn,
  .menuCreateInlineBtn,
  .menuProductsFilters .primaryBtn,
  .menuAssociateRow > .primaryBtn,
  .menuAssociateProductsBtn,
  .menuPickerValidateBtn {
    width: 100%;
  }

  .menuInlineProduct,
  .menuProductMain {
    grid-template-columns: 1fr;
  }

  .menuInlineProductThumbWrap,
  .menuProductThumbWrap {
    width: 100%;
    height: auto;
  }

  .menuInlineProductThumb,
  .menuProductThumb {
    width: 100%;
    max-width: 88px;
    height: 88px;
  }

  .menuImagePreview,
  .menuImageDropzone,
  .menuUploadCard {
    min-height: 170px;
  }

  .menuProductMediaRow {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 132px);
    gap: 10px;
    align-items: start;
  }

  .menuProductMediaRow .menuImagePreview,
  .menuProductMediaRow .menuImageDropzone,
  .menuProductMediaRow .menuUploadCard {
    min-height: 132px;
  }
}

@media (max-width: 1120px) and (min-width: 721px) {
  .loyaltyFiltersGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loyaltyIndicatorsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sidebarFooterBtnSubscription.is-active {
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.28),
    rgba(147, 51, 234, 0.24)
  );
  border-color: rgba(192, 132, 252, 0.36);
  box-shadow: 0 16px 40px rgba(107, 33, 168, 0.18);
}

.trialCountdownCard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.22), transparent 34%),
    radial-gradient(circle at left center, rgba(139, 92, 246, 0.18), transparent 30%),
    rgba(10, 14, 24, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.24);
  box-shadow:
    0 22px 54px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trialCountdownCard::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -8%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.2), transparent 68%);
  pointer-events: none;
  filter: blur(14px);
}

.trialCountdownTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.trialCountdownBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.24);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 950;
}

.trialCountdownTitle {
  margin-top: 10px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.08;
  font-weight: 950;
  color: #f8fafc;
}

.trialCountdownText,
.trialCountdownHint {
  color: rgba(226, 232, 240, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

.trialCountdownText {
  margin-top: 8px;
  max-width: 760px;
}

.trialCountdownClockWrap {
  display: flex;
  justify-content: flex-end;
  min-width: 250px;
}

.trialCountdownClock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 72px;
  padding: 14px 18px;
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 980;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(2, 6, 23, 0.26);
}

.trialCountdownClock.is-expired {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.28);
}

.trialCountdownHint {
  color: #86efac;
}

.trialCountdownAction {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.trialCountdownAction:hover {
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.24);
}

.dashboardTrialInlineCard {
  display: grid;
  gap: 8px 18px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 15px 18px;
  border-radius: 20px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.2), transparent 34%),
    radial-gradient(circle at left center, rgba(139, 92, 246, 0.16), transparent 30%),
    rgba(10, 14, 24, 0.82);
  box-shadow:
    0 18px 40px rgba(2, 6, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}

.dashboardTrialInlineCard::before {
  content: "";
  position: absolute;
  inset: auto auto -62px -26px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.2), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.dashboardTrialInlineText {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(241, 245, 249, 0.96);
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.dashboardTrialInlineHint {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.42;
  color: #86efac;
  position: relative;
  z-index: 1;
}

.dashboardTrialInlineBtn {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: fit-content;
  min-height: 40px;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 800;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .dashboardTrialInlineCard {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboardTrialInlineBtn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

.homeTrialCard {
  margin-top: 0;
  border-color: rgba(59, 130, 246, 0.28);
}

.homeReferralBonusCard {
  margin-top: 0;
  border-color: rgba(250, 204, 21, 0.24);
  background:
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 34%),
    radial-gradient(circle at left center, rgba(251, 191, 36, 0.12), transparent 30%),
    rgba(10, 14, 24, 0.82);
}

.subscriptionTrialCard {
  margin-top: 0;
  border-color: rgba(168, 85, 247, 0.28);
}

.subscriptionReferralPromoCard,
.subscriptionReferralStatusCard {
  padding: 22px;
}

.subscriptionReferralPromoCard {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(250, 204, 21, 0.28), transparent 32%),
    radial-gradient(circle at 8% 20%, rgba(56, 189, 248, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(17, 18, 22, 0.98), rgba(8, 12, 20, 0.99));
  border: 1px solid rgba(250, 204, 21, 0.34);
  box-shadow:
    0 24px 52px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(250, 204, 21, 0.05);
  padding: 16px 22px;
}

.subscriptionReferralPromoCard::before,
.subscriptionReferralStatusCard::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(14px);
}

.subscriptionReferralPromoCard::before {
  inset: auto -38px -72px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.24), transparent 70%);
}

.subscriptionReferralPromoHead,
.subscriptionReferralStatusTop {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.subscriptionReferralPromoBar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(380px, 1.34fr) minmax(220px, 0.86fr) minmax(240px, 1fr) 112px;
  align-items: center;
  gap: 16px;
}

.subscriptionReferralIntroBlock {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.subscriptionReferralVisual {
  position: relative;
  width: 92px;
  min-height: 92px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(250, 204, 21, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(250, 204, 21, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 34px rgba(2, 6, 23, 0.18);
}

.subscriptionReferralVisualGift {
  font-size: 50px;
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(250, 204, 21, 0.18));
}

.subscriptionReferralVisualSpark {
  position: absolute;
  color: rgba(250, 204, 21, 0.92);
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.28);
}

.subscriptionReferralVisualSpark--tl {
  top: 14px;
  left: 16px;
}

.subscriptionReferralVisualSpark--tr {
  top: 16px;
  right: 16px;
}

.subscriptionReferralVisualSpark--bl {
  bottom: 18px;
  left: 22px;
}

.subscriptionReferralVisualSpark--br {
  right: 14px;
  bottom: 24px;
}

.subscriptionReferralPitch {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: center;
}

.subscriptionReferralPromoTitle {
  margin: 0;
  font-size: clamp(22px, 1.75vw, 26px);
  line-height: 1.04;
  font-weight: 980;
  white-space: nowrap;
}

.subscriptionReferralDataCard,
.subscriptionReferralQrCard {
  min-height: 0;
  padding: 0 0 0 18px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
  position: relative;
}

.subscriptionReferralDataCard--code {
  min-width: 220px;
}

.subscriptionReferralDataCard--link {
  min-width: 240px;
}

.subscriptionReferralDataCard--qr {
  min-width: 112px;
}

.subscriptionReferralDataCard::before,
.subscriptionReferralQrCard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 84px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
}

.subscriptionReferralPrimaryValue {
  margin: 0;
  font-size: clamp(26px, 1.85vw, 30px);
  line-height: 1;
  font-weight: 980;
  letter-spacing: -0.03em;
  color: #f9cb59;
  word-break: normal;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.subscriptionReferralLinkValue {
  display: block;
  margin: 0;
  color: #bfdbfe;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subscriptionReferralLinkValue:hover {
  color: #dbeafe;
  text-decoration: underline;
}

.subscriptionReferralActionRow {
  margin-top: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.subscriptionReferralCodePill {
  appearance: none;
  width: 100%;
  max-width: 208px;
  min-width: 208px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.subscriptionReferralCodePill:hover:not(:disabled) {
  border-color: rgba(250, 204, 21, 0.34);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}

.subscriptionReferralCodePill:disabled {
  opacity: 0.72;
  cursor: wait;
}

.subscriptionReferralCodePill .subscriptionReferralPrimaryValue {
  padding: 12px 16px;
}

.subscriptionReferralCodePillIcon {
  display: grid;
  place-items: center;
  color: rgba(241, 245, 249, 0.86);
  font-size: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.subscriptionReferralActionBtn,
.subscriptionReferralDownloadBtn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  width: fit-content;
  white-space: nowrap;
}

.subscriptionReferralPromoStatus {
  margin-top: 10px;
  min-height: 16px;
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  line-height: 1.3;
}

.subscriptionReferralPromoStatus.is-error {
  color: #fca5a5;
}

.subscriptionReferralQrCard {
  align-content: center;
}

.subscriptionReferralQrStack {
  display: grid;
  gap: 10px;
  justify-items: center;
  justify-self: center;
}

.subscriptionReferralQrBox {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  aspect-ratio: 1 / 1;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 12px 26px rgba(2, 6, 23, 0.2);
}

.subscriptionReferralQrBox.loading {
  position: relative;
}

.subscriptionReferralQrBox.loading::after {
  content: "";
  position: absolute;
  inset: calc(50% - 16px) auto auto calc(50% - 16px);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(15, 23, 42, 0.14);
  border-top-color: rgba(37, 99, 235, 0.72);
  animation: spin 0.9s linear infinite;
}

.subscriptionReferralQrImg {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.subscriptionReferralQrImg:not([src]),
.subscriptionReferralQrBox.loading .subscriptionReferralQrImg {
  opacity: 0;
}

.subscriptionReferralDownloadBtn {
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(241, 245, 249, 0.84);
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
}

.subscriptionReferralDownloadBtn:hover:not(:disabled) {
  color: #ffffff;
  text-decoration: underline;
}

.subscriptionReferralDownloadBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.subscriptionReferralIntro {
  display: grid;
  gap: 4px;
  width: 100%;
}

.subscriptionReferralIntroLead {
  font-size: 15px;
  line-height: 1.25;
  color: rgba(241, 245, 249, 0.86);
}

.subscriptionReferralIntroHighlight {
  font-size: 17px;
  line-height: 1.16;
  font-weight: 900;
  color: #86efac;
}

.subscriptionReferralIntroReward {
  color: inherit;
}

.subscriptionReferralIntroTail {
  font-size: 15px;
  line-height: 1.22;
  color: rgba(241, 245, 249, 0.9);
}

.subscriptionReferralStatusCard {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%),
    radial-gradient(circle at left center, rgba(250, 204, 21, 0.16), transparent 32%),
    rgba(10, 14, 24, 0.92);
  border: 1px solid rgba(96, 165, 250, 0.24);
}

.subscriptionReferralStatusCard::before {
  inset: auto auto -72px -28px;
  width: 210px;
  height: 210px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
}

.subscriptionReferralStatusCard.is-claimed {
  border-color: rgba(34, 197, 94, 0.24);
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 34%),
    radial-gradient(circle at left center, rgba(16, 185, 129, 0.14), transparent 32%),
    rgba(10, 14, 24, 0.9);
}

.subscriptionReferralStatusCard.is-expired {
  border-color: rgba(148, 163, 184, 0.22);
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.14), transparent 34%),
    radial-gradient(circle at left center, rgba(71, 85, 105, 0.14), transparent 32%),
    rgba(10, 14, 24, 0.9);
}

.subscriptionReferralStatusTitle {
  font-size: clamp(22px, 2.4vw, 30px);
}

.subscriptionReferralStatusText,
.subscriptionReferralStatusHint {
  max-width: 860px;
}

.subscriptionReferralTimerWrap {
  min-width: 250px;
}

.subscriptionReferralTimer {
  min-width: 240px;
}

.subscriptionLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.subscriptionHeroCard {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  align-items: stretch;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.22), transparent 36%),
    radial-gradient(circle at left center, rgba(56, 189, 248, 0.12), transparent 28%),
    rgba(10, 14, 24, 0.9);
}

.subscriptionHeroCard .sectionHeaderContent {
  flex: 1 1 auto;
}

.subscriptionHeroActions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.subscriptionManageUsersBtn {
  min-height: 48px;
  min-width: 210px;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: rgba(255, 255, 255, 0.96);
}

.subscriptionHeaderChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(241, 245, 249, 0.94);
}

.subscriptionHeaderChip.is-plan {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(96, 165, 250, 0.24);
  color: #dbeafe;
}

.subscriptionOverviewCard,
.subscriptionPlansCard,
.subscriptionAccessCard,
.subscriptionPaymentCard,
.subscriptionActionsCard {
  padding: 22px;
}

.subscriptionOverviewTop,
.subscriptionSectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.subscriptionLeadText,
.subscriptionSectionText {
  max-width: 760px;
  margin-top: 6px;
}

.subscriptionNoticePill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.2);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
}

.subscriptionSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.subscriptionSummaryCard {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 126px;
}

.subscriptionSummaryCardQuota {
  background: rgba(16, 185, 129, 0.09);
  border-color: rgba(16, 185, 129, 0.18);
}

.subscriptionSummaryLabel {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.subscriptionSummaryValue {
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 980;
}

.subscriptionSummaryValue--gratuit {
  color: transparent;
  background-image: linear-gradient(135deg, #86efac, #22c55e, #15803d);
  -webkit-background-clip: text;
  background-clip: text;
}

.subscriptionSummaryValue--essentiel {
  color: transparent;
  background-image: linear-gradient(135deg, #93c5fd, #3b82f6, #1d4ed8);
  -webkit-background-clip: text;
  background-clip: text;
}

.subscriptionSummaryValue--pro {
  color: transparent;
  background-image: linear-gradient(135deg, #d8b4fe, #8b5cf6, #6d28d9);
  -webkit-background-clip: text;
  background-clip: text;
}

.subscriptionSummaryValue--regularization {
  color: transparent;
  background-image: linear-gradient(135deg, #fda4af, #ef4444, #b91c1c);
  -webkit-background-clip: text;
  background-clip: text;
}

.subscriptionSummaryMeta {
  margin-top: 7px;
  color: rgba(226, 232, 240, 0.7);
  font-size: 13px;
  line-height: 1.4;
}

.subscriptionPlansGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.subscriptionPlanCard {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  min-height: 100%;
}

.subscriptionPlanCard--gratuit {
  background:
    radial-gradient(circle at top center, rgba(34, 197, 94, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.subscriptionPlanCard--essentiel {
  background:
    radial-gradient(circle at top center, rgba(59, 130, 246, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.subscriptionPlanCard--pro {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.subscriptionPlanCard.is-current {
  border-width: 2px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
}

.subscriptionPlanCard--gratuit.is-current {
  border-color: rgba(34, 197, 94, 0.72);
  box-shadow:
    0 0 0 1px rgba(134, 239, 172, 0.18),
    0 22px 48px rgba(21, 128, 61, 0.18);
}

.subscriptionPlanCard--essentiel.is-current {
  border-color: rgba(59, 130, 246, 0.72);
  box-shadow:
    0 0 0 1px rgba(147, 197, 253, 0.18),
    0 22px 48px rgba(37, 99, 235, 0.2);
}

.subscriptionPlanCard--pro.is-current {
  border-color: rgba(139, 92, 246, 0.76);
  box-shadow:
    0 0 0 1px rgba(216, 180, 254, 0.18),
    0 22px 48px rgba(109, 40, 217, 0.22);
}

.subscriptionPlanCard.is-featured {
  background:
    radial-gradient(circle at top center, rgba(139, 92, 246, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.05);
}

.subscriptionPlanTop {
  display: grid;
  gap: 10px;
}

.subscriptionPlanHead {
  display: grid;
  gap: 8px;
  align-content: start;
}

.subscriptionPlanBadge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.94);
}

.subscriptionPlanBadge--gratuit {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
}

.subscriptionPlanBadge--essentiel {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.28);
  color: #bfdbfe;
}

.subscriptionPlanBadge--pro {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.28);
  color: #ddd6fe;
}

.subscriptionPlanName {
  font-size: 26px;
  font-weight: 980;
  line-height: 1.05;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.subscriptionPlanCard--gratuit .subscriptionPlanName {
  background-image: linear-gradient(135deg, #86efac, #22c55e, #15803d);
}

.subscriptionPlanCard--essentiel .subscriptionPlanName {
  background-image: linear-gradient(135deg, #93c5fd, #3b82f6, #1d4ed8);
}

.subscriptionPlanCard--pro .subscriptionPlanName {
  background-image: linear-gradient(135deg, #d8b4fe, #8b5cf6, #6d28d9);
}

.subscriptionPlanPrice {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.subscriptionPlanPriceValue {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.subscriptionPlanPriceMeta {
  color: rgba(226, 232, 240, 0.72);
  font-size: 13px;
  font-weight: 500;
}

.subscriptionPlanText {
  color: rgba(226, 232, 240, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.subscriptionPlanFeatures {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscriptionPlanFeatures li {
  color: rgba(241, 245, 249, 0.86);
  font-size: 13px;
  line-height: 1.38;
}

.subscriptionPlanAction {
  margin-top: auto;
  width: 100%;
  min-height: 48px;
}

.subscriptionPlanActionText {
  margin-top: auto;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86efac;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.subscriptionPlanAction.primaryBtn {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.subscriptionPlanAction.primaryBtn:hover {
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.26);
}

.subscriptionAccessGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.subscriptionAccessItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.subscriptionAccessLabel {
  font-size: 14px;
  font-weight: 850;
  color: rgba(248, 250, 252, 0.94);
}

.subscriptionAccessState {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.subscriptionAccessState.is-on {
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, 0.24);
}

.subscriptionAccessState.is-off {
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.26);
}

.subscriptionPaymentSummary {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.subscriptionPaymentBrand {
  font-size: 19px;
  font-weight: 950;
}

.subscriptionPaymentMeta,
.subscriptionStripeState {
  color: rgba(226, 232, 240, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.subscriptionStripeState {
  margin-top: 12px;
}

.subscriptionManagePaymentBtn {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
}

.subscriptionQuickActions {
  display: grid;
  gap: 10px;
}

.subscriptionQuickActions .ghostBtn,
.subscriptionQuickActions .primaryBtn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.subscriptionDangerBtn {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fecaca;
}

.subscriptionDangerBtn:hover {
  box-shadow: 0 18px 40px rgba(248, 113, 113, 0.12);
}

.subscriptionRegularizationCard {
  border: 1px solid rgba(239, 68, 68, 0.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.16), transparent 54%),
    rgba(15, 23, 42, 0.78);
  display: grid;
  gap: 14px;
}

.subscriptionRegularizationHead {
  display: grid;
  gap: 8px;
}

.subscriptionRegularizationTitle {
  font-size: 1.12rem;
  font-weight: 900;
  color: #fecaca;
}

.subscriptionRegularizationText {
  margin: 0;
  color: rgba(254, 226, 226, 0.92);
  line-height: 1.6;
}

.subscriptionRegularizationBtn {
  justify-self: start;
}

.subscriptionConfirmModal {
  width: min(560px, calc(100vw - 28px));
}

.subscriptionUsersModal {
  width: min(980px, calc(100vw - 28px));
}

#subscriptionUsersModalBack {
  z-index: 52;
}

.subscriptionUsersModalBody,
.subscriptionUserEditorBody {
  gap: 16px;
}

.subscriptionUsersToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.subscriptionUsersViewerNote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.84);
  font-size: 13px;
  line-height: 1.45;
}

.subscriptionUsersViewerNote[hidden] {
  display: none;
}

.subscriptionAddUserBtn {
  min-height: 48px;
  white-space: nowrap;
}

.subscriptionUsersEmpty {
  padding: 24px 20px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(226, 232, 240, 0.72);
  text-align: center;
  font-size: 14px;
}

.subscriptionUsersList {
  display: grid;
  gap: 10px;
}

.subscriptionUserCard {
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.subscriptionUserCard.is-manageable {
  cursor: pointer;
}

.subscriptionUserCard.is-manageable:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.subscriptionUserCardTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.subscriptionUserIdentity {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.subscriptionUserName {
  font-size: 15px;
  font-weight: 980;
  color: #f8fafc;
  min-height: 1.2em;
  text-align: left;
  justify-self: start;
}

.subscriptionUserDetails {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
}

.subscriptionUserEmail,
.subscriptionUserPhone {
  color: rgba(191, 219, 254, 0.92);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
  word-break: break-word;
}

.subscriptionUserPhone {
  color: rgba(226, 232, 240, 0.78);
}

.subscriptionUserDivider {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.subscriptionUserRoleBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subscriptionUserRoleBadge--admin {
  background: rgba(139, 92, 246, 0.2);
  color: #ede9fe;
  border: 1px solid rgba(167, 139, 250, 0.34);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.1);
}

.subscriptionUserRoleBadge--employe {
  background: rgba(34, 197, 94, 0.18);
  color: #dcfce7;
  border: 1px solid rgba(74, 222, 128, 0.32);
}

.subscriptionUserSelfNote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.22);
  color: #fde68a;
  font-size: 10px;
  font-weight: 900;
}

.subscriptionUserSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.subscriptionUserEditorModalBack {
  z-index: 70;
}

.subscriptionUserEditorModal {
  width: min(760px, calc(100vw - 28px));
  position: relative;
  z-index: 1;
}

.subscriptionUserForm {
  display: grid;
  gap: 12px;
}

.subscriptionUserFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.subscriptionUserFieldHint {
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.subscriptionUserPhoneRow {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
}

.phoneCountrySelectWrap {
  position: relative;
}

.phoneCountrySelectWrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(229, 231, 235, 0.9);
  font-size: 13px;
  pointer-events: none;
}

.phoneCountrySelectValue {
  position: absolute;
  left: 12px;
  right: 28px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: #e5e7eb;
  font-weight: 800;
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subscriptionUserPhoneCountrySelect {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  color: transparent;
  caret-color: transparent;
}

.subscriptionUserEditorFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.subscriptionUserEditorActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.subscriptionDeleteUserBtn {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fecaca;
}

.subscriptionDeleteUserBtn:hover {
  box-shadow: 0 18px 40px rgba(248, 113, 113, 0.12);
}

.subscriptionConfirmText {
  margin-top: 10px;
  color: rgba(226, 232, 240, 0.82);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  white-space: pre-line;
}

.subscriptionConfirmImpact {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(241, 245, 249, 0.88);
  font-size: 13px;
  line-height: 1.62;
}

.subscriptionConfirmActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1320px) {
  .subscriptionLayout {
    grid-template-columns: 1fr;
  }

  .subscriptionReferralPromoBar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
  }

  .subscriptionReferralIntroBlock {
    grid-column: 1 / -1;
  }

  .subscriptionReferralPromoTitle {
    white-space: nowrap;
  }

  .subscriptionReferralVisual {
    width: 88px;
    min-height: 88px;
  }

  .subscriptionReferralDataCard,
  .subscriptionReferralQrCard {
    padding-left: 16px;
  }

  .subscriptionReferralDataCard::before,
  .subscriptionReferralQrCard::before {
    height: 76px;
  }

  .subscriptionReferralDataCard--code {
    min-width: 0;
  }

  .subscriptionReferralDataCard--link {
    min-width: 0;
  }

  .subscriptionSummaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscriptionPlansGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .trialCountdownTop {
    display: grid;
  }

  .trialCountdownClockWrap,
  .trialCountdownClock {
    width: 100%;
    min-width: 0;
  }

  .subscriptionHeroCard,
  .subscriptionOverviewTop,
  .subscriptionReferralStatusTop,
  .subscriptionSectionHead,
  .subscriptionConfirmActions {
    display: grid;
  }

  .subscriptionHeroActions,
  .subscriptionConfirmActions,
  .subscriptionUserEditorActions {
    width: 100%;
  }

  .subscriptionHeroActions .dashboardGuideBtn {
    width: 100%;
  }

  .subscriptionHeaderChip,
  .subscriptionManageUsersBtn,
  .subscriptionConfirmActions .ghostBtn,
  .subscriptionConfirmActions .primaryBtn,
  .subscriptionUserEditorActions .ghostBtn,
  .subscriptionUserEditorActions .primaryBtn,
  .subscriptionDeleteUserBtn {
    width: 100%;
  }

  .subscriptionSummaryGrid,
  .subscriptionAccessGrid,
  .subscriptionUserFormGrid,
  .subscriptionUserPhoneRow {
    grid-template-columns: 1fr;
  }

  .subscriptionOverviewCard,
  .subscriptionPlansCard,
  .subscriptionAccessCard,
  .subscriptionPaymentCard,
  .subscriptionActionsCard,
  .subscriptionReferralPromoCard,
  .subscriptionReferralStatusCard {
    padding: 18px;
  }

  .subscriptionReferralPromoCard {
    padding: 15px 16px;
  }

  .subscriptionReferralPromoBar {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .subscriptionReferralIntroBlock {
    grid-column: 1 / -1;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .subscriptionReferralVisual {
    width: 88px;
    min-height: 88px;
  }

  .subscriptionReferralPitch {
    gap: 8px;
  }

  .subscriptionReferralDataCard,
  .subscriptionReferralQrCard {
    padding: 0;
    padding-top: 18px;
  }

  .subscriptionReferralDataCard--code {
    grid-column: 1 / -1;
  }

  .subscriptionReferralDataCard--qr {
    grid-column: 1;
    grid-row: 3;
  }

  .subscriptionReferralDataCard--link {
    grid-column: 2;
    grid-row: 3;
  }

  .subscriptionReferralDataCard::before,
  .subscriptionReferralQrCard::before {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: none;
  }

  .subscriptionUsersToolbar,
  .subscriptionUserEditorFooter {
    display: grid;
  }

  .subscriptionReferralPromoTitle {
    font-size: 22px;
    white-space: normal;
  }

  .subscriptionReferralIntroHighlight {
    font-size: 18px;
  }

  .subscriptionReferralIntroLead,
  .subscriptionReferralIntroTail {
    font-size: 15px;
  }

  .subscriptionReferralPrimaryValue {
    font-size: 24px;
  }

  .subscriptionReferralCodePill,
  .subscriptionReferralActionBtn {
    max-width: none;
    width: 100%;
  }

  .subscriptionReferralQrStack {
    justify-items: start;
    justify-self: start;
    gap: 8px;
  }

  .subscriptionReferralQrBox {
    width: 78px;
    height: 78px;
  }

  .subscriptionReferralDownloadBtn {
    justify-content: flex-start;
    text-align: left;
  }

  .subscriptionUserSide {
    align-items: flex-end;
  }

  .subscriptionUserDetails {
    gap: 8px;
  }

  .subscriptionUserDivider {
    display: none;
  }
}

/* =========================================================================
   Page « Statistiques » regroupée — thème bleu ciel + cases recolorées par type
   ========================================================================= */

/* Accent sidebar (bleu ciel, distinct du bleu Accueil/Contacts) */
.menuItem[data-page="statistiques"] {
  --menu-accent-rgb: 56, 189, 248;
}

/* Fond ambiant + loader plein écran de la page (bleu ciel) */
body[data-page-theme="statistiques"] {
  --page-ambient-primary: rgba(56, 189, 248, 0.2);
  --page-ambient-secondary: rgba(14, 165, 233, 0.14);
  --page-loading-primary: rgba(56, 189, 248, 0.23);
  --page-loading-secondary: rgba(14, 165, 233, 0.15);
  --page-loading-spinner-main: rgba(56, 189, 248, 0.95);
  --page-loading-spinner-accent: rgba(186, 230, 253, 0.66);
  --page-loading-spinner-glow: rgba(56, 189, 248, 0.26);
  --page-loading-title-glow: rgba(56, 189, 248, 0.15);
}

/* Titre de la carte d'en-tête : grand, comme les autres pages, teinté bleu ciel */
#viewMount[data-page-theme="statistiques"] .statistiquesHeaderCard .sectionEyebrow {
  color: #7dd3fc;
  font-size: 26px;
  line-height: 1.05;
}


/* Halo premium bleu ciel sur les cartes d'en-tête + sélecteur */
.statistiquesHeaderCard,
.statsTypeCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.statistiquesHeaderCard::before,
.statsTypeCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    96% 112% at -22% -32%,
    rgba(56, 189, 248, 0.22) 0%,
    rgba(255, 255, 255, 0) 76%
  );
}
.statistiquesHeaderCard > *,
.statsTypeCard > * {
  position: relative;
  z-index: 1;
}

/* ---- Ligne de sélection du type (chips) ----
   Grille pilotée par container query : 4 en ligne tant que possible, puis 2×2,
   puis 1 par ligne (jamais 3+1). S'appuie sur la largeur réelle disponible. */
.statsTypeCard {
  container-type: inline-size;
}
.statsTypeNav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* Le nombre de colonnes s'adapte au nombre de types affichés (services activés). */
.statsTypeNav[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.statsTypeNav[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.statsTypeNav[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.statsTypeNav[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@container (max-width: 700px) {
  .statsTypeNav[data-count="3"],
  .statsTypeNav[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 380px) {
  .statsTypeNav {
    grid-template-columns: minmax(0, 1fr);
  }
}

.statsTypeChip {
  --chip-rgb: 148, 163, 184;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  color: #e2e8f0;
  font-size: 16.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.26s ease,
    background 0.26s ease,
    box-shadow 0.26s ease;
}
.statsTypeChip[data-stat-type="company"] {
  --chip-rgb: 34, 211, 238;
}
.statsTypeChip[data-stat-type="loyalty"] {
  --chip-rgb: 236, 72, 153;
}
.statsTypeChip[data-stat-type="menu"] {
  --chip-rgb: 34, 197, 94;
}
.statsTypeChip[data-stat-type="products-services"] {
  --chip-rgb: 180, 83, 9;
}

.statsTypeChipIcon {
  font-size: 21px;
  line-height: 1;
}
.statsTypeChipLabel {
  flex: 1 1 auto;
}

.statsTypeChip:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--chip-rgb), 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.statsTypeChip.is-active {
  border-color: rgba(var(--chip-rgb), 0.6);
  background: linear-gradient(
    135deg,
    rgba(var(--chip-rgb), 0.32),
    rgba(var(--chip-rgb), 0.18)
  );
  box-shadow:
    inset 0 0 22px rgba(var(--chip-rgb), 0.18),
    0 14px 36px rgba(0, 0, 0, 0.24);
  color: #ffffff;
}
.statsTypeChip.is-active .statsTypeChipIcon {
  filter: drop-shadow(0 0 8px rgba(var(--chip-rgb), 0.55));
}

/* ---- Carte hôte des stats (recolorée selon le type sélectionné) ---- */
.statsHostCard {
  --stat-accent-rgb: 56, 189, 248;
  --stat-title-color: #7dd3fc;
  --page-halo-primary: rgba(56, 189, 248, 0.23);
  --page-halo-secondary: rgba(14, 165, 233, 0.14);
  --page-loading-primary: rgba(56, 189, 248, 0.23);
  --page-loading-secondary: rgba(14, 165, 233, 0.15);
  --page-loading-spinner-main: rgba(56, 189, 248, 0.95);
  --page-loading-spinner-accent: rgba(186, 230, 253, 0.66);
  --page-loading-spinner-glow: rgba(56, 189, 248, 0.26);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.statsHostCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(96% 112% at -22% -32%, var(--page-halo-primary) 0%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(74% 88% at 118% 126%, var(--page-halo-secondary) 0%, rgba(255, 255, 255, 0) 74%);
  transition: background 0.45s ease;
}
.statsHostCard > * {
  position: relative;
  z-index: 1;
}
.statsHostCard[data-stat-color="company"] {
  --stat-accent-rgb: 34, 211, 238;
  --stat-title-color: #67e8f9;
  --page-halo-primary: rgba(34, 211, 238, 0.23);
  --page-halo-secondary: rgba(6, 182, 212, 0.14);
  --page-loading-primary: rgba(34, 211, 238, 0.22);
  --page-loading-secondary: rgba(6, 182, 212, 0.15);
  --page-loading-spinner-main: rgba(34, 211, 238, 0.95);
  --page-loading-spinner-accent: rgba(103, 232, 249, 0.65);
  --page-loading-spinner-glow: rgba(34, 211, 238, 0.25);
  border-color: rgba(34, 211, 238, 0.4);
}
.statsHostCard[data-stat-color="loyalty"] {
  --stat-accent-rgb: 236, 72, 153;
  --stat-title-color: #f9a8d4;
  --page-halo-primary: rgba(236, 72, 153, 0.24);
  --page-halo-secondary: rgba(244, 114, 182, 0.16);
  --page-loading-primary: rgba(236, 72, 153, 0.24);
  --page-loading-secondary: rgba(244, 114, 182, 0.17);
  --page-loading-spinner-main: rgba(236, 72, 153, 0.95);
  --page-loading-spinner-accent: rgba(251, 207, 232, 0.68);
  --page-loading-spinner-glow: rgba(236, 72, 153, 0.27);
  border-color: rgba(236, 72, 153, 0.4);
}
.statsHostCard[data-stat-color="menu"] {
  --stat-accent-rgb: 34, 197, 94;
  --stat-title-color: #86efac;
  --page-halo-primary: rgba(34, 197, 94, 0.23);
  --page-halo-secondary: rgba(16, 185, 129, 0.14);
  --page-loading-primary: rgba(34, 197, 94, 0.22);
  --page-loading-secondary: rgba(16, 185, 129, 0.15);
  --page-loading-spinner-main: rgba(34, 197, 94, 0.95);
  --page-loading-spinner-accent: rgba(187, 247, 208, 0.66);
  --page-loading-spinner-glow: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.4);
}
.statsHostCard[data-stat-color="products-services"] {
  --stat-accent-rgb: 180, 83, 9;
  --stat-title-color: #fdba74;
  --page-halo-primary: rgba(180, 83, 9, 0.24);
  --page-halo-secondary: rgba(120, 53, 15, 0.16);
  --page-loading-primary: rgba(180, 83, 9, 0.24);
  --page-loading-secondary: rgba(120, 53, 15, 0.17);
  --page-loading-spinner-main: rgba(217, 119, 6, 0.95);
  --page-loading-spinner-accent: rgba(254, 215, 170, 0.68);
  --page-loading-spinner-glow: rgba(180, 83, 9, 0.27);
  border-color: rgba(180, 83, 9, 0.45);
}

/* Titre de la case (montre le type sélectionné), teinté à la couleur du type */
.statsHostHead {
  border-bottom: 1px solid rgba(var(--stat-accent-rgb), 0.22);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.statsHostTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--stat-title-color);
  transition: color 0.4s ease;
}
.statsHostTitleIcon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(var(--stat-accent-rgb), 0.4));
}

/* Scène : empile mount + overlays */
.statsHostStage {
  position: relative;
  min-height: 340px;
}

/* Mount : seul le panneau actif est dans le flux (il fixe la hauteur de la case).
   Les panneaux inactifs sont en absolu → la case épouse la hauteur du panneau
   affiché (plus de grand vide en bas quand on passe sur un type plus court). */
.statsHostMount {
  position: relative;
}
.statsHostPanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  filter: blur(3px);
  pointer-events: none;
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.statsHostPanel.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

/* Aplatir la carte stats reparentée : la case hôte fournit l'unique chrome.
   Le contenu interne (KPI, tableau, graphique) garde son design d'origine. */
.statsHostPanel > .glassCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.statsHostPanel > .glassCard::before,
.statsHostPanel > .glassCard::after {
  display: none !important;
}
/* L'en-tête « 📊 Statistiques » interne fait doublon avec le titre de la case */
.statsHostPanel > .glassCard > .sectionMiniHead {
  display: none !important;
}

/* Indisponible (compte non-PRO) */
.statsHostUnavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 24px;
}
.statsHostUnavailableIcon {
  font-size: 34px;
}
.statsHostUnavailableTitle {
  font-size: 18px;
  font-weight: 800;
  color: #e2e8f0;
}
.statsHostUnavailableText {
  font-size: 14px;
  color: #94a3b8;
  max-width: 420px;
}

/* Overlay de chargement (orbes premium, recolorés au type via --page-loading-*) */
.statsHostLoading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 3;
  border-radius: 18px;
  background: rgba(8, 14, 28, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: statsHostFadeIn 0.28s ease both;
}
.statsHostLoadingVisual {
  width: clamp(92px, 10vw, 124px);
}
.statsHostLoadingTitle {
  font-size: 16px;
  font-weight: 800;
  color: #eff6ff;
  text-shadow: 0 0 16px rgba(var(--stat-accent-rgb), 0.4);
}

.statsHostError {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 40px 24px;
  z-index: 2;
  border-radius: 18px;
  background: rgba(8, 14, 28, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.statsHostErrorTitle {
  font-size: 18px;
  font-weight: 800;
  color: #e2e8f0;
}
.statsHostErrorText {
  font-size: 14px;
  color: #94a3b8;
  max-width: 420px;
}

@keyframes statsHostFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Incubateur caché hors écran (largeur réelle pour Chart.js) — PAS via [hidden] */
.statsIncubatorHost {
  position: absolute;
  top: 0;
  left: -100000px;
  width: min(1080px, 92vw);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .statsTypeChip,
  .statsHostPanel,
  .statsHostCard,
  .statsHostCard::before,
  .statsHostTitle {
    transition: none !important;
  }
  .statsHostPanel {
    transform: none !important;
    filter: none !important;
  }
  .statsHostLoading {
    animation: none !important;
  }
}

/* =========================================================================
   Page MyQR — hub de configuration (cartes config + cases fonctionnalités)
   ========================================================================= */

/* Case unique « ⚙️ Configuration » englobant boutons + fonctionnalités */
.companyConfigCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* En-tête aligné sur la hauteur du bouton « Paramètres de collecte » ancré à droite */
.companyConfigCard .sectionMiniHead {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Bouton « Paramètres de collecte » — discret, façon page Contacts.
   Ordi : ancré en haut à droite, en face du titre Configuration.
   Mobile : pleine largeur, juste sous les cases.
   Sélecteur volontairement lourd pour battre la règle de halo
   `…glassCard… > *{position:relative}` (cf. plus haut). */
#viewMount[data-page-theme="company"]
  .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)
  > .companyCollecteBtn {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
  z-index: 2;
}
@media (max-width: 760px) {
  #viewMount[data-page-theme="company"]
    .glassCard:not(.modalCard):not(.dashboardTrialInlineCard):not(.moduleHeaderHalo)
    > .companyCollecteBtn {
    position: static;
    width: 100%;
  }
}
.companyCollecteBtnSpinner {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(34, 211, 238, 0.95);
  animation: spin 0.7s linear infinite;
  display: none;
}
.companyCollecteBtn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}
.companyCollecteBtn.is-loading .companyCollecteBtnSpinner {
  display: inline-block;
}

/* Rangée des gros boutons : 4 en ligne (tablette/ordi), 2×2 quand c'est trop
   étroit (jamais 3+1, jamais 1 par ligne) */
.companyConfigRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 760px) {
  .companyConfigRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Boutons config — effet verre premium (inspiré de l'ancienne pop-up de config) */
.companyCfgCard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  min-height: 150px;
  padding: 26px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 18% 12%, rgba(96, 165, 250, 0.2), transparent 40%),
    radial-gradient(circle at 84% 16%, rgba(34, 211, 238, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(2, 6, 23, 0.26);
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.companyCfgCard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 90% at 50% -10%,
    rgba(255, 255, 255, 0.1),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.companyCfgCard:hover {
  transform: translateY(-5px);
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 26px 56px rgba(2, 6, 23, 0.4);
}
.companyCfgCard:hover::after {
  opacity: 1;
}
.companyCfgCardIcon {
  font-size: 42px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.companyCfgCard:hover .companyCfgCardIcon {
  transform: scale(1.12) translateY(-2px);
}
.companyCfgCardTitle {
  font-size: 16px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

/* Spinner du 1er montage de « Paramètres de collecte » */
.companyCfgCardSpinner {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(34, 211, 238, 0.95);
  animation: spin 0.7s linear infinite;
  display: none;
}
.companyCfgCard.is-loading {
  pointer-events: none;
  opacity: 0.75;
}
.companyCfgCard.is-loading .companyCfgCardSpinner {
  display: block;
}

/* === Pop-up « Personnalisation avancée » === */
.modalCard.companyCustomizeModal {
  width: min(680px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 14% -8%, rgba(96, 165, 250, 0.16), transparent 46%),
    radial-gradient(circle at 92% -4%, rgba(168, 85, 247, 0.16), transparent 44%),
    rgba(17, 24, 39, 0.97);
}
.companyCustomizeHead {
  align-items: flex-start;
  padding: 26px 26px 0;
}
.companyCustomizeHeadMain {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.companyCustomizeHeadIcon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 30px;
  background:
    radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.4), transparent 60%),
    linear-gradient(180deg, rgba(168, 85, 247, 0.32), rgba(96, 165, 250, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.companyCustomizeHeadText {
  min-width: 0;
}
.companyCustomizeSubtitle {
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}
.companyCustomizeBody {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 28px;
}
/* Empêche la compression des cartes (upsell + options) : sans ça, en flex
   column elles se rétrécissent au lieu de laisser la modale scroller, ce qui
   coupe le bouton d'achat. */
.companyCustomizeBody > * {
  flex-shrink: 0;
}
.companyCustomizeOption {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.02)
  );
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.companyCustomizeOption:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 211, 252, 0.5);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.38);
}
.companyCustomizeOptionIcon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.companyCustomizeOption:hover .companyCustomizeOptionIcon {
  transform: scale(1.08);
}
.companyCustomizeOptionIcon svg {
  width: 27px;
  height: 27px;
  display: block;
  color: rgba(255, 255, 255, 0.95);
}
/* Icône SVG dans le titre des sections (même picto que le hub) */
.companySectionTitleIcon {
  display: inline-flex;
  vertical-align: -5px;
  margin-right: 9px;
  color: #7dd3fc;
}
.companySectionTitleIcon svg {
  width: 24px;
  height: 24px;
}
.companyCustomizeOptionIcon--bg {
  background: linear-gradient(160deg, rgba(96, 165, 250, 0.34), rgba(96, 165, 250, 0.12));
}
.companyCustomizeOptionIcon--card {
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.32), rgba(34, 211, 238, 0.12));
}
.companyCustomizeOptionIcon--sep {
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.12));
}
.companyCustomizeOptionIcon--btn {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.34), rgba(168, 85, 247, 0.12));
}
.companyCustomizeOptionIcon--fonts {
  background: linear-gradient(160deg, rgba(244, 114, 182, 0.32), rgba(244, 114, 182, 0.12));
}
.companyCustomizeOptionText {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.companyCustomizeOptionTitle {
  font-size: 16px;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.97);
}
.companyCustomizeOptionDesc {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}
.companyCustomizeOptionArrow {
  flex: none;
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease;
}
.companyCustomizeOption:hover .companyCustomizeOptionArrow {
  transform: translateX(4px);
  color: rgba(125, 211, 252, 0.95);
}
.companyCustomizeOptionLock {
  display: none;
  flex: none;
  font-size: 18px;
}
/* État verrouillé : options visibles mais grisées et non cliquables, cadenas
   à la place de la flèche. */
.companyCustomizeOption.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.55);
}
.companyCustomizeOption.is-locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: none;
}
.companyCustomizeOption.is-locked:hover .companyCustomizeOptionIcon {
  transform: none;
}
.companyCustomizeOption.is-locked .companyCustomizeOptionArrow {
  display: none;
}
.companyCustomizeOption.is-locked .companyCustomizeOptionLock {
  display: block;
}
@media (max-width: 560px) {
  .companyCustomizeOptionDesc {
    display: none;
  }
}

/* === Carte premium d'incitation (achat de la personnalisation) === */
.companyCustomizeUpsell {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 20px 20px 22px;
  margin-bottom: 4px;
  border: 1px solid rgba(125, 211, 252, 0.32);
  background:
    radial-gradient(
      120% 140% at 100% 0%,
      rgba(168, 85, 247, 0.22),
      rgba(168, 85, 247, 0) 60%
    ),
    linear-gradient(
      155deg,
      rgba(56, 189, 248, 0.16),
      rgba(15, 23, 42, 0.4)
    );
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.45);
}
.companyCustomizeUpsellGlow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(125, 211, 252, 0.35),
    rgba(125, 211, 252, 0) 70%
  );
  pointer-events: none;
}
.companyCustomizeUpsellBadge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.96);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(56, 189, 248, 0.9));
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.4);
}
.companyCustomizeUpsellTitle {
  position: relative;
  margin-top: 12px;
  font-size: 21px;
  font-weight: 900;
  background: linear-gradient(100deg, #7dd3fc 0%, #c084fc 52%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.companyCustomizeUpsellPitch {
  position: relative;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.companyCustomizeUpsellPitchHi {
  font-weight: 850;
  color: #4ade80;
}
.companyCustomizeUpsellPriceRow {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 14px;
}
.companyCustomizeUpsellPrice {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(120deg, #7dd3fc, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.companyCustomizeUpsellPriceNote {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.companyCustomizeUpsellBtn {
  position: relative;
  margin-top: 16px;
  width: 100%;
  padding: 13px 18px;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 850;
  color: #04121f;
  cursor: pointer;
  background: linear-gradient(135deg, #7dd3fc, #a855f7);
  box-shadow: 0 14px 34px rgba(125, 211, 252, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}
.companyCustomizeUpsellBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(125, 211, 252, 0.52);
}
.companyCustomizeUpsellBtn:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}
.companyCustomizeUpsellStatus {
  position: relative;
  margin-top: 11px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.companyCustomizeUpsellStatus.is-error {
  color: #fda4af;
}

/* === Layout 2 colonnes (aperçu toujours visible) ===
   mobile : aperçu ancré en haut (sticky) ; ordi/tablette : aperçu à droite. */
.companySectionSplit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.companySectionPreviewPane {
  position: sticky;
  top: -2px;
  z-index: 4;
  background: #111827;
  padding: 6px 0 12px;
  margin-top: -6px;
}
.companySectionControlsPane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (min-width: 768px) {
  .companySectionSplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 22px;
  }
  .companySectionPreviewPane {
    grid-column: 2;
    grid-row: 1;
    top: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .companySectionControlsPane {
    grid-column: 1;
    grid-row: 1;
  }
}

/* === Pop-up « Arrière-plan » === */
.modalCard.companyBgModal {
  width: min(920px, 96vw);
}
/* layout géré par .companySectionSplit */

/* Choix du style : 2 grandes tuiles à aperçu */
.companyBgChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.companyBgChoice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.companyBgChoice:hover {
  transform: translateY(-3px);
}
.companyBgChoice.is-active {
  border-color: rgba(125, 211, 252, 0.85);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.45),
    0 18px 40px rgba(2, 6, 23, 0.4);
  background: rgba(125, 211, 252, 0.08);
}
.companyBgChoicePreview {
  position: relative;
  overflow: hidden;
  height: 92px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-size: cover;
  background-position: center;
}
.companyBgChoicePreview--classic {
  background:
    radial-gradient(
      120px 80px at 18% 12%,
      color-mix(in oklab, var(--companyBgAccent, #60a5fa) 60%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, #05060b 0%, #0a1020 50%, #05060b 100%);
}
.companyBgChoicePreview--custom {
  display: grid;
  place-items: center;
  background:
    repeating-conic-gradient(
        rgba(255, 255, 255, 0.05) 0% 25%,
        rgba(255, 255, 255, 0.02) 0% 50%
      )
      50% / 22px 22px;
}
.companyBgChoicePlaceholder {
  font-size: 30px;
  opacity: 0.7;
}
.companyBgChoiceTitle {
  font-size: 14.5px;
  font-weight: 800;
  text-align: center;
}
.companyBgChoiceCheck {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: #04121f;
  background: rgba(125, 211, 252, 0.95);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.companyBgChoice.is-active .companyBgChoiceCheck {
  opacity: 1;
  transform: scale(1);
}

/* Panneau image custom */
.companyBgCustomPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: companyBgFade 0.3s ease;
}
@keyframes companyBgFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aperçu live (hero) */
.companyBgLivePreview {
  position: relative;
  overflow: hidden;
  height: 190px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #05060b;
  background-size: cover;
  background-position: center;
}
.companyBgLivePreviewOverlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background 0.15s ease;
}
.companyBgLivePreviewUi {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.companyBgModal.has-bg-image .companyBgLivePreviewUi,
.companyBgModal.is-classic .companyBgLivePreviewUi {
  display: flex;
}
.companyBgLivePreviewLogo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
/* Boutons d'aperçu en style verre : ils ne suivent PAS la couleur de fond, ils
   servent juste à montrer le rendu de l'arrière-plan (sans laisser croire que
   la couleur du fond change aussi la couleur des boutons). */
.companyBgLivePreviewBtn {
  width: 150px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.companyBgLivePreviewBtn--ghost {
  background: rgba(255, 255, 255, 0.12);
}
.companyBgUploadEmpty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}
.companyBgModal.has-bg-image .companyBgUploadEmpty,
.companyBgModal.is-classic .companyBgUploadEmpty {
  display: none;
}
.companyBgUploadEmptyIcon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.32);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}
.companyBgUploadEmpty:hover .companyBgUploadEmptyIcon {
  transform: translateY(-3px);
  border-color: rgba(125, 211, 252, 0.7);
}
.companyBgUploadEmptyTitle {
  font-size: 14.5px;
  font-weight: 800;
}
.companyBgUploadLoading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 11, 0.55);
  backdrop-filter: blur(2px);
}
.companyBgUploadSpinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(34, 211, 238, 0.95);
  animation: spin 0.7s linear infinite;
}
.companyBgImageActions {
  display: flex;
  gap: 10px;
}
.companyBgImageActions .ghostBtn {
  flex: 1;
}
.companyBgRemoveBtn {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.32);
}

/* Mode d'affichage : 4 mini-aperçus de l'image réelle */
.companyBgFitGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.companyBgFitOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 6px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.companyBgFitOption:hover {
  transform: translateY(-2px);
}
.companyBgFitOption.is-active {
  border-color: rgba(125, 211, 252, 0.85);
  background: rgba(125, 211, 252, 0.08);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.4);
}
.companyBgFitThumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: #05060b;
  background-position: center;
}
.companyBgFitLabel {
  font-size: 12px;
  font-weight: 750;
}
@media (max-width: 460px) {
  .companyBgFitLabel {
    font-size: 11px;
  }
}

/* Overlay */
.companyBgOverlaySection {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
.companyBgOverlayHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.companyBgOverlayTitle {
  font-size: 15px;
  font-weight: 800;
}
.companyBgOverlayControls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity 0.2s ease;
}
.companyBgOverlaySection.is-off .companyBgOverlayControls {
  opacity: 0.35;
  pointer-events: none;
}
.companyBgSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.companyBgSwatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  cursor: pointer;
  padding: 0;
  background: var(--sw, #000);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.companyBgSwatch:hover {
  transform: translateY(-2px);
}
.companyBgSwatch.is-active {
  box-shadow:
    0 0 0 2px var(--card-bg, #111827),
    0 0 0 4px rgba(125, 211, 252, 0.95);
}
/* En-tête des sections : actions (Revenir par défaut + fermer) */
.companyModalHeadActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.companyResetDefaultBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.companyResetDefaultBtn:hover {
  background: rgba(125, 211, 252, 0.12);
  border-color: rgba(125, 211, 252, 0.5);
  color: #e0f2fe;
}
@media (max-width: 460px) {
  .companyResetDefaultBtn {
    font-size: 12px;
    padding: 7px 10px;
  }
}

/* Pastille « couleur de l'entreprise » : badge 🏢 en haut à droite */
.companyBgSwatch--company {
  overflow: visible;
}
.companyBgSwatch--company::after {
  content: "🏢";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 11px;
  line-height: 1;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0b1220;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
/* Pastille « couleur perso choisie » : badge ✎ en haut à droite */
.companyBgSwatch--customResult {
  overflow: visible;
}
.companyBgSwatch--customResult::after {
  content: "✎";
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 10px;
  line-height: 1;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #e0f2fe;
  background: #0b1220;
  box-shadow: 0 0 0 1.5px rgba(125, 211, 252, 0.6);
  pointer-events: none;
}
.companyBgSwatchCustom {
  overflow: hidden;
  display: grid;
  place-items: center;
  background: conic-gradient(
    from 0deg,
    #f87171,
    #fbbf24,
    #34d399,
    #60a5fa,
    #a855f7,
    #f87171
  );
}
.companyBgSwatchCustom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  padding: 0;
  cursor: pointer;
}
.companyBgOpacityRow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.companyBgOpacityIco {
  font-size: 16px;
}
.companyBgOpacitySlider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}
.companyBgOpacitySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid rgba(125, 211, 252, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.companyBgOpacitySlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid rgba(125, 211, 252, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.companyBgOpacityValue {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
}

/* ===================== Pop-up « Case du menu » ===================== */
.modalCard.companyMenuCardModal {
  width: min(920px, 96vw);
}
/* layout géré par .companySectionSplit */
/* Aperçu live de la case sur un faux fond de page */
.companyCardPreviewStage {
  display: grid;
  place-items: center;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(96, 165, 250, 0.18), transparent 55%),
    radial-gradient(120% 90% at 90% 10%, rgba(168, 85, 247, 0.16), transparent 50%),
    linear-gradient(180deg, #0a1020, #05060b);
}
.companyCardPreview {
  width: min(260px, 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  border-radius: 28px;
  /* style verre par défaut (overridé en inline par le JS pour le mode couleur) */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.companyCardPreviewLogo {
  width: 46px;
  height: 46px;
  /* l'aperçu fait 46px (vs 132px réel) → on met le rayon à l'échelle */
  border-radius: calc(var(--logo-radius, 32px) * 0.35);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.companyCardPreviewName {
  width: 62%;
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}
.companyCardPreviewBtn {
  width: 100%;
  height: 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, #60a5fa, #6366f1);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
.companyCardPreviewBtn--alt {
  background: linear-gradient(135deg, #34d399, #10b981);
}

/* Tuiles Verre / Couleur — aperçus dédiés */
.companyCardChoices {
  grid-template-columns: repeat(3, 1fr);
}
.companyCardChoicePreview--glass {
  background:
    radial-gradient(80px 60px at 30% 10%, rgba(255, 255, 255, 0.22), transparent 60%),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}
.companyCardChoicePreview--color {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.companyCardChoicePreview--gradient {
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Boîtes de réglages empilées */
.companyCardSection {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  animation: companyBgFade 0.3s ease;
}
.companyBgField {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.companyBgFieldLabel {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

/* Grille des styles de bordure (la couleur vient de --bc, posée par le JS) */
.companyCardBorderGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  --bc: #7dd3fc;
}
.companyCardBorderOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 6px 9px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.companyCardBorderOption:hover {
  transform: translateY(-2px);
}
.companyCardBorderOption.is-active {
  border-color: rgba(125, 211, 252, 0.85);
  background: rgba(125, 211, 252, 0.08);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.4);
}
.companyCardBorderSwatch {
  position: relative;
  width: 100%;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
.companyCardBorderLabel {
  font-size: 11.5px;
  font-weight: 750;
}
/* rendu de chaque style de bordure dans son swatch (couleur = var(--bc)) */
.companyCardBorderOption[data-border="default"] .companyCardBorderSwatch { border: 1px solid rgba(255, 255, 255, 0.18); }
.companyCardBorderOption[data-border="none"] .companyCardBorderSwatch { border: none; }
.companyCardBorderOption[data-border="thin"] .companyCardBorderSwatch { border: 1px solid var(--bc); }
.companyCardBorderOption[data-border="thick"] .companyCardBorderSwatch { border: 3px solid var(--bc); }
.companyCardBorderOption[data-border="double"] .companyCardBorderSwatch { border: 4px double var(--bc); }
.companyCardBorderOption[data-border="dashed"] .companyCardBorderSwatch { border: 2px dashed var(--bc); }
.companyCardBorderOption[data-border="dotted"] .companyCardBorderSwatch { border: 3px dotted var(--bc); }
.companyCardBorderOption[data-border="groove"] .companyCardBorderSwatch { border: 5px groove var(--bc); }
.companyCardBorderOption[data-border="glow"] .companyCardBorderSwatch {
  border: 1px solid var(--bc);
  box-shadow: 0 0 0 1px var(--bc), 0 0 16px color-mix(in oklab, var(--bc) 70%, transparent);
}
.companyCardBorderOption[data-border="neon"] .companyCardBorderSwatch {
  border: 2px solid var(--bc);
  box-shadow: 0 0 5px var(--bc), 0 0 12px var(--bc),
    inset 0 0 6px color-mix(in oklab, var(--bc) 50%, transparent);
}
.companyCardBorderOption[data-border="frame"] .companyCardBorderSwatch {
  border: 1px solid var(--bc);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.07), inset 0 0 0 4px var(--bc);
}
.companyCardBorderOption[data-border="gradient"] .companyCardBorderSwatch {
  border: 4px solid transparent;
  background:
    linear-gradient(#0e1626, #0e1626) padding-box,
    linear-gradient(135deg, var(--bc), #fff 55%, color-mix(in oklab, var(--bc) 60%, #000)) border-box;
}
.companyCardBorderOption[data-border="sticker"] .companyCardBorderSwatch {
  border: none;
  box-shadow: 0 0 0 3px var(--bc), 0 0 0 5px rgba(255, 255, 255, 0.12);
}
.companyCardBorderOption[data-border="halo"] .companyCardBorderSwatch {
  border: none;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bc) 40%, transparent),
    0 0 16px color-mix(in oklab, var(--bc) 60%, transparent);
}
.companyCardBorderOption[data-border="lisere"] .companyCardBorderSwatch {
  border: 2px solid var(--bc);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.companyCardBorderOption[data-border="contour"] .companyCardBorderSwatch {
  border: none;
  box-shadow: 0 0 0 1px var(--bc), 0 0 0 4px color-mix(in oklab, var(--bc) 45%, transparent);
}
.companyCardBorderOption[data-border="ombre"] .companyCardBorderSwatch {
  border: none;
  box-shadow: 0 8px 16px color-mix(in oklab, var(--bc) 55%, transparent);
}

/* Aperçu live de la case : mêmes variantes de bordure que #card (company.html) */
.companyCardPreview { position: relative; }
#companyCardPreview[data-card-style="color"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#companyCardPreview[data-card-border] { --bc: #7dd3fc; }
#companyCardPreview[data-card-border="none"] { border: none; }
#companyCardPreview[data-card-border="thin"] { border: 1px solid var(--bc); }
#companyCardPreview[data-card-border="thick"] { border: 3px solid var(--bc); }
#companyCardPreview[data-card-border="double"] { border: 4px double var(--bc); }
#companyCardPreview[data-card-border="dashed"] { border: 2px dashed var(--bc); }
#companyCardPreview[data-card-border="dotted"] { border: 3px dotted var(--bc); }
#companyCardPreview[data-card-border="groove"] { border: 5px groove var(--bc); }
#companyCardPreview[data-card-border="glow"] {
  border: 1px solid var(--bc);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--bc),
    0 0 26px color-mix(in oklab, var(--bc) 60%, transparent);
}
#companyCardPreview[data-card-border="neon"] {
  border: 2px solid var(--bc);
  box-shadow: 0 0 7px var(--bc), 0 0 18px var(--bc),
    inset 0 0 9px color-mix(in oklab, var(--bc) 55%, transparent);
}
#companyCardPreview[data-card-border="frame"] {
  border: 1px solid var(--bc);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5),
    inset 0 0 0 4px color-mix(in oklab, var(--bc) 16%, transparent),
    inset 0 0 0 5px var(--bc);
}
#companyCardPreview[data-card-border="gradient"] { border: 4px solid transparent; }
#companyCardPreview[data-card-border="gradient"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(135deg, var(--bc), #fff 55%, color-mix(in oklab, var(--bc) 60%, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#companyCardPreview[data-card-border="sticker"] {
  border: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--bc),
    0 0 0 7px rgba(255, 255, 255, 0.1);
}
#companyCardPreview[data-card-border="halo"] {
  border: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in oklab, var(--bc) 40%, transparent),
    0 0 34px color-mix(in oklab, var(--bc) 55%, transparent);
}
#companyCardPreview[data-card-border="lisere"] {
  border: 2px solid var(--bc);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 5px rgba(255, 255, 255, 0.08);
}
#companyCardPreview[data-card-border="contour"] {
  border: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--bc),
    0 0 0 5px color-mix(in oklab, var(--bc) 45%, transparent);
}
#companyCardPreview[data-card-border="ombre"] {
  border: none;
  box-shadow: 0 24px 44px color-mix(in oklab, var(--bc) 45%, transparent);
}

/* ===================== Pop-up « Séparateurs » ===================== */
.modalCard.companySeparatorModal {
  width: min(940px, 96vw);
}
.companySeparatorBody {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.companySepGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  /* variables pilotées par les sliders (épaisseur / longueur) */
  --sep-thickness: 2px;
  --sep-length: 70%;
  --sepAccent: #7dd3fc;
  --sep-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q 10 0 20 6 T 40 6' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");
  --sep-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M0 10 L8 2 L16 10 L24 2 L32 10' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E");
  --sep-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='15' viewBox='0 0 28 15'%3E%3Cg fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 14 A13 13 0 0 1 26 14'/%3E%3Cpath d='M5 14 A8 8 0 0 1 21 14'/%3E%3Cpath d='M10 14 A3 3 0 0 1 16 14'/%3E%3C/g%3E%3C/svg%3E");
  --sep-grec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M1 13 V3 H11 V11 H5 V7 H9' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
}
.companySepOption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.companySepOption:hover {
  transform: translateY(-2px);
}
.companySepOption.is-active {
  border-color: rgba(125, 211, 252, 0.85);
  background: rgba(125, 211, 252, 0.08);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.4);
}
.companySepPreview {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.companySepLabel {
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
}
/* ligne de base = classique */
.companySepLine {
  width: var(--sep-length);
  max-width: 90%;
  height: var(--sep-thickness);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--sepAccent), transparent);
}
.companySepOption[data-sep-style="solid"] .companySepLine { background: var(--sepAccent); }
.companySepOption[data-sep-style="gradient"] .companySepLine { background: linear-gradient(90deg, var(--sepAccent), #fff, var(--sepAccent)); }
.companySepOption[data-sep-style="shadow"] .companySepLine {
  height: calc(var(--sep-thickness) + 4px);
  background: var(--sepAccent);
  box-shadow: 0 6px 14px rgba(125, 211, 252, 0.5);
}
.companySepOption[data-sep-style="dashed"] .companySepLine,
.companySepOption[data-sep-style="dotted"] .companySepLine,
.companySepOption[data-sep-style="double"] .companySepLine {
  height: 0;
  background: none;
  border-radius: 0;
}
.companySepOption[data-sep-style="dashed"] .companySepLine { border-top: var(--sep-thickness) dashed var(--sepAccent); }
.companySepOption[data-sep-style="dotted"] .companySepLine { border-top: max(var(--sep-thickness), 3px) dotted var(--sepAccent); }
.companySepOption[data-sep-style="double"] .companySepLine { border-top: calc(var(--sep-thickness) + 3px) double var(--sepAccent); }
.companySepOption[data-sep-style="dots"] .companySepLine,
.companySepOption[data-sep-style="stars"] .companySepLine {
  width: auto; height: auto; background: none;
  color: var(--sepAccent);
  font-size: calc(8px + var(--sep-thickness) * 1.5);
  letter-spacing: 6px;
}
.companySepOption[data-sep-style="dots"] .companySepLine::before { content: "●  ●  ●"; }
.companySepOption[data-sep-style="stars"] .companySepLine::before { content: "✦  ✦  ✦"; }
.companySepOption[data-sep-style="diamond"] .companySepLine {
  position: relative;
  background: linear-gradient(90deg, transparent, var(--sepAccent), transparent);
}
.companySepOption[data-sep-style="diamond"] .companySepLine::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(11px + var(--sep-thickness));
  color: var(--sepAccent);
}
.companySepOption[data-sep-style="wave"] .companySepLine,
.companySepOption[data-sep-style="zigzag"] .companySepLine {
  height: calc(8px + var(--sep-thickness) * 2.5);
  background: var(--sepAccent);
  border-radius: 0;
}
.companySepOption[data-sep-style="wave"] .companySepLine {
  -webkit-mask: var(--sep-wave) repeat-x center / auto 100%;
  mask: var(--sep-wave) repeat-x center / auto 100%;
}
.companySepOption[data-sep-style="zigzag"] .companySepLine {
  -webkit-mask: var(--sep-zig) repeat-x center / auto 100%;
  mask: var(--sep-zig) repeat-x center / auto 100%;
}
.companySepOption[data-sep-style="seigaiha"] .companySepLine,
.companySepOption[data-sep-style="grecque"] .companySepLine {
  height: calc(11px + var(--sep-thickness) * 2.5);
  background: var(--sepAccent);
  border-radius: 0;
}
.companySepOption[data-sep-style="seigaiha"] .companySepLine {
  -webkit-mask: var(--sep-seigaiha) repeat-x center / auto 100%;
  mask: var(--sep-seigaiha) repeat-x center / auto 100%;
}
.companySepOption[data-sep-style="grecque"] .companySepLine {
  -webkit-mask: var(--sep-grec) repeat-x center / auto 100%;
  mask: var(--sep-grec) repeat-x center / auto 100%;
}
/* Ornements glyphes */
.companySepOption[data-sep-style="sakura"] .companySepLine,
.companySepOption[data-sep-style="coeurs"] .companySepLine,
.companySepOption[data-sep-style="chevrons"] .companySepLine,
.companySepOption[data-sep-style="triangles"] .companySepLine {
  width: auto; height: auto; background: none;
  color: var(--sepAccent);
  font-size: calc(8px + var(--sep-thickness) * 1.5);
  letter-spacing: 5px;
}
.companySepOption[data-sep-style="sakura"] .companySepLine::before { content: "❀ ❀ ❀"; }
.companySepOption[data-sep-style="coeurs"] .companySepLine::before { content: "♥ ♥ ♥"; }
.companySepOption[data-sep-style="chevrons"] .companySepLine::before { content: "❯ ❯ ❯"; }
.companySepOption[data-sep-style="triangles"] .companySepLine::before { content: "▲ ▲ ▲"; }
.companySepPreview--image {
  background:
    repeating-conic-gradient(rgba(255,255,255,0.05) 0% 25%, rgba(255,255,255,0.02) 0% 50%) 50% / 14px 14px;
}
.companySepOption[data-sep-style="image"] .companySepLine { display: none; }
.companySepImgIco {
  font-size: 20px;
  opacity: 0.85;
}
.companySepOption[data-sep-style="image"].has-image .companySepImgIco { display: none; }
.companySepOption[data-sep-style="image"].has-image .companySepPreview {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* contrôles épaisseur / longueur réutilisent .companyBgOverlaySection */
.companySepControls {
  gap: 14px;
}
/* Panneau image : mis en avant, visible quand le style « Image » est choisi */
.companySepImagePanel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(125, 211, 252, 0.45);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(125, 211, 252, 0.14), transparent 60%),
    rgba(125, 211, 252, 0.06);
  animation: companyBgFade 0.3s ease;
}
.companySepImagePreview {
  flex: none;
  width: 96px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.companySepUploadBtn {
  position: relative;
  flex: 1;
  min-height: 52px;
  font-size: 15px;
  font-weight: 850;
  border-color: rgba(125, 211, 252, 0.6);
  color: #e0f2fe;
  background: rgba(125, 211, 252, 0.12);
}
.companySepUploadBtn:hover {
  background: rgba(125, 211, 252, 0.2);
}
.companySepUploadSpinner {
  position: static;
  display: none;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
}
.companySepUploadSpinner:not([hidden]) {
  display: inline-block;
}

/* ===================== Pop-up « Style des boutons » ===================== */
.modalCard.companyButtonsModal {
  width: min(920px, 96vw);
}
/* layout géré par .companySectionSplit */
.companyBtnModeChoices {
  grid-template-columns: 1fr 1fr;
}
/* Aperçu des modes : 3 mini-boutons (classique = couleurs variées,
   harmonisé = même couleur) */
.companyBtnModePreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
    #0b1322;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.companyBtnModeBar {
  width: 76%;
  height: 14px;
  border-radius: 999px;
  background: var(--c, linear-gradient(135deg, #6366f1, #0ea5e9));
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4);
}
.companyBtnModePreview--harmonized .companyBtnModeBar {
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
}
.companyBtnFillChoices {
  grid-template-columns: repeat(3, 1fr);
}

/* Aperçu live des boutons */
.companyBtnPreviewStage {
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(96, 165, 250, 0.16), transparent 55%),
    linear-gradient(180deg, #0a1020, #05060b);
}
.companyBtnPreview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(300px, 88%);
  --btn-radius: 18px;
}
.companyBtnPreviewItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--btn-radius);
  background: var(--btn-fill, linear-gradient(135deg, #64748b, #475569));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.companyBtnPreview[data-btn-fill="glass"] .companyBtnPreviewItem {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.companyBtnPreviewIco {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: calc(var(--btn-radius) * 0.72);
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.companyBtnPreviewLabel {
  height: 9px;
  width: 62%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}
/* mode classique : chaque bouton sa couleur */
.companyBtnPreview[data-mode="classic"] .companyBtnPreviewItem:nth-child(1) { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.companyBtnPreview[data-mode="classic"] .companyBtnPreviewItem:nth-child(2) { background: linear-gradient(135deg, #f59e0b, #d97706); }
.companyBtnPreview[data-mode="classic"] .companyBtnPreviewItem:nth-child(3) { background: linear-gradient(135deg, #10b981, #059669); }

/* Variantes de bordure pour l'aperçu harmonisé (mêmes que #btns en prod) */
#companyBtnPreview[data-btn-border] .companyBtnPreviewItem { --bc: var(--btn-bc, #7dd3fc); }
#companyBtnPreview[data-btn-border="none"] .companyBtnPreviewItem { border-color: transparent; }
#companyBtnPreview[data-btn-border="thin"] .companyBtnPreviewItem { border: 1px solid var(--bc); }
#companyBtnPreview[data-btn-border="thick"] .companyBtnPreviewItem { border: 3px solid var(--bc); }
#companyBtnPreview[data-btn-border="double"] .companyBtnPreviewItem { border: 4px double var(--bc); }
#companyBtnPreview[data-btn-border="dashed"] .companyBtnPreviewItem { border: 2px dashed var(--bc); }
#companyBtnPreview[data-btn-border="dotted"] .companyBtnPreviewItem { border: 3px dotted var(--bc); }
#companyBtnPreview[data-btn-border="groove"] .companyBtnPreviewItem { border: 5px groove var(--bc); }
#companyBtnPreview[data-btn-border="glow"] .companyBtnPreviewItem {
  border: 1px solid var(--bc);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--bc),
    0 0 20px color-mix(in oklab, var(--bc) 60%, transparent);
}
#companyBtnPreview[data-btn-border="neon"] .companyBtnPreviewItem {
  border: 2px solid var(--bc);
  box-shadow: 0 0 6px var(--bc), 0 0 16px var(--bc),
    inset 0 0 8px color-mix(in oklab, var(--bc) 55%, transparent);
}
#companyBtnPreview[data-btn-border="frame"] .companyBtnPreviewItem {
  border: 1px solid var(--bc);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px color-mix(in oklab, var(--bc) 16%, transparent),
    inset 0 0 0 4px var(--bc);
}
#companyBtnPreview[data-btn-border="sticker"] .companyBtnPreviewItem {
  border: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--bc),
    0 0 0 5px rgba(255, 255, 255, 0.1);
}
#companyBtnPreview[data-btn-border="halo"] .companyBtnPreviewItem {
  border: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in oklab, var(--bc) 40%, transparent),
    0 0 22px color-mix(in oklab, var(--bc) 55%, transparent);
}
#companyBtnPreview[data-btn-border="lisere"] .companyBtnPreviewItem {
  border: 2px solid var(--bc);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.08);
}
#companyBtnPreview[data-btn-border="contour"] .companyBtnPreviewItem {
  border: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--bc),
    0 0 0 4px color-mix(in oklab, var(--bc) 45%, transparent);
}
#companyBtnPreview[data-btn-border="ombre"] .companyBtnPreviewItem {
  border: none;
  box-shadow: 0 16px 30px color-mix(in oklab, var(--bc) 45%, transparent);
}

/* ===================== Pop-up « Polices d'écriture » ===================== */
.modalCard.companyFontsModal {
  width: min(640px, 96vw);
}
.companyFontsBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.companyFontsSlots {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.companyFontSlot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
/* Titre de la case bien visible (texte le plus important : ce qu'on modifie) */
.companyFontSlotLabel {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(125, 211, 252, 0.95);
}
/* Aperçu dans une case, au style EXACT de la zone sur company.html */
.companyFontSlotPreviewBox {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(96, 165, 250, 0.08), transparent 60%),
    rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.companyFontSlotSample {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Le « texte des boutons » s'affiche dans une pastille bouton, à l'intérieur de
   la même case sombre que les autres aperçus (cohérence visuelle). */
.companyFontSlotSample--button {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 11px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* Liste déroulante personnalisée (chaque police dans son propre style) */
.companyFontDropdown {
  position: relative;
}
/* La case dont la liste est ouverte passe au-dessus des suivantes */
.companyFontSlot:has(.companyFontDropdown.is-open) {
  position: relative;
  z-index: 10;
}
.companyFontDropdownTrigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(13, 18, 30, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.companyFontDropdownTrigger:hover {
  border-color: rgba(125, 211, 252, 0.45);
}
.companyFontDropdown.is-open .companyFontDropdownTrigger {
  border-color: rgba(125, 211, 252, 0.7);
}
.companyFontDropdownName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.companyFontDropdownTrigger svg {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.companyFontDropdown.is-open .companyFontDropdownTrigger svg {
  transform: rotate(180deg);
}
.companyFontDropdownList {
  display: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 16, 26, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.companyFontDropdown.is-open .companyFontDropdownList {
  display: block;
}
/* Ouverture vers le haut quand il manque de place en bas */
.companyFontDropdown.is-up .companyFontDropdownList {
  top: auto;
  bottom: calc(100% + 7px);
}
.companyFontDropdownItem {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.companyFontDropdownItem:hover {
  background: rgba(255, 255, 255, 0.06);
}
.companyFontDropdownItem.is-active {
  background: rgba(125, 211, 252, 0.16);
  color: #e0f2fe;
}

/* Séparateur entre les boutons et la liste des fonctionnalités */
.companyFeaturesDivider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 2px 0;
}

/* Cases fonctionnalités : empilées, chacune = le header reparenté de sa page */
.companyFeaturesSection {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.companyFeatureCards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  min-height: 120px;
}

/* Loader du hub (orbes premium réutilisés) */
.companyFeatureLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  width: 100%;
}
.companyFeatureLoading .statsHostLoadingVisual {
  width: clamp(88px, 9vw, 116px);
}

/* Apparence des cases (dans le thème myQR, comme les cartes « chiffres clés »
   de l'accueil) — fond sombre coloré par fonctionnalité, plus de blanchâtre. */
.companyFeatureCards > .glassCard {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 38px rgba(0, 0, 0, 0.2);
  animation: companyFeatureReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes companyFeatureReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Fond coloré UNIQUEMENT pour les fonctionnalités ACTIVES (inactives/verrouillées
   restent en verre neutre → on distingue d'un coup d'œil l'actif de l'inactif). */
.companyFeatureCard--loyalty:not(.is-feature-inactive):not(.is-feature-locked) {
  background:
    radial-gradient(440px 240px at 6% 0%, rgba(236, 72, 153, 0.3), transparent 62%),
    radial-gradient(320px 200px at 94% 100%, rgba(244, 114, 182, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}
.companyFeatureCard--menu:not(.is-feature-inactive):not(.is-feature-locked) {
  background:
    radial-gradient(440px 240px at 6% 0%, rgba(34, 197, 94, 0.3), transparent 62%),
    radial-gradient(320px 200px at 94% 100%, rgba(16, 185, 129, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}
.companyFeatureCard--products-services:not(.is-feature-inactive):not(.is-feature-locked) {
  background:
    radial-gradient(440px 240px at 6% 0%, rgba(217, 119, 6, 0.32), transparent 62%),
    radial-gradient(320px 200px at 94% 100%, rgba(180, 83, 9, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}
.companyFeatureCard--events:not(.is-feature-inactive):not(.is-feature-locked) {
  background:
    radial-gradient(440px 240px at 6% 0%, rgba(192, 132, 252, 0.3), transparent 62%),
    radial-gradient(320px 200px at 94% 100%, rgba(168, 85, 247, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}
.companyFeatureCard--special-offer:not(.is-feature-inactive):not(.is-feature-locked) {
  background:
    radial-gradient(440px 240px at 6% 0%, rgba(250, 204, 21, 0.3), transparent 62%),
    radial-gradient(320px 200px at 94% 100%, rgba(245, 158, 11, 0.17), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)) !important;
}

/* Inactives & verrouillées : verre neutre transparent flou, SANS halo coloré.
   On neutralise aussi le halo du moduleHeaderHalo (::before/::after via vars). */
.companyFeatureCard.is-feature-inactive,
.companyFeatureCard.is-feature-locked {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  ) !important;
  --module-halo-primary: rgba(255, 255, 255, 0.05) !important;
  --module-halo-secondary: rgba(255, 255, 255, 0.025) !important;
}

/* Titre des cases verrouillées : blanc (le coloré ne passe pas une fois verrouillé) */
.companyFeatureCard.is-feature-locked .sectionEyebrow {
  color: #ffffff !important;
}

/* Titre de chaque case dans la couleur de sa fonctionnalité (même inactive/PRO) */
.companyFeatureCard--loyalty .sectionEyebrow { color: #f9a8d4 !important; }
.companyFeatureCard--menu .sectionEyebrow { color: #86efac !important; }
.companyFeatureCard--products-services .sectionEyebrow { color: #fdba74 !important; }
.companyFeatureCard--events .sectionEyebrow { color: #d8b4fe !important; }
.companyFeatureCard--special-offer .sectionEyebrow { color: #fcd34d !important; }

/* Masquer les sous-titres des cases fonctionnalités */
.companyFeatureCards > .glassCard .sectionText {
  display: none;
}

/* Bouton « ⚙️ Configurer » — verre premium + animation au survol */
.companyFeatureCards .companyFeatureConfigBtn {
  white-space: nowrap;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.06)
  );
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.26);
  transition:
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.26s ease,
    background 0.26s ease,
    border-color 0.26s ease;
}
.companyFeatureCards .companyFeatureConfigBtn:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24),
    rgba(255, 255, 255, 0.1)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 34px rgba(0, 0, 0, 0.36);
}

/* Toggle d'activation : libellé uniforme « Actif » / « Inactif » piloté par :checked
   (reflète toujours l'état réel sans entrer en conflit avec le JS de la feature) */
.companyFeatureCards .loyaltyToggleLabel {
  font-size: 0 !important;
}
.companyFeatureCards .loyaltyToggleLabel::after {
  content: "Inactif";
  display: inline-block;
  min-width: 58px;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #f87171;
}
.companyFeatureCards .loyaltyToggle input:checked ~ .loyaltyToggleLabel::after {
  content: "Actif";
  color: #86efac;
}

/* Case fonctionnalité verrouillée (non-PRO) */
.companyFeatureLocked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.companyFeatureLockedMain {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.companyFeatureLockedText {
  font-size: 15.5px;
  font-weight: 800;
  color: #f87171;
}
.companyProBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 850;
  font-size: 15px;
  color: #1f2937;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  background: linear-gradient(135deg, #fde68a, #fbbf24 55%, #f59e0b);
  box-shadow:
    0 12px 28px rgba(245, 158, 11, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    filter 0.28s ease;
}
.companyProBtn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 18px 38px rgba(245, 158, 11, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.05);
}

/* Incubateur caché hors écran (PAS d'opacity : les modales fixed déplacées hors
   incubateur doivent rester visibles ; on déplace les .modalBack après init) */
/* Incubateur hors écran SANS impact layout (height:0) → plus d'espace vide /
   scroll anormal. Les modales sont déplacées hors incubateur ; les listes
   events/offres en sont sorties à l'ouverture de leur pop-up. */
.companyFeatureIncubator {
  position: fixed;
  top: 0;
  left: 0;
  width: min(1080px, 92vw);
  height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* Modale liste (Événements / Offres) — la liste reparentée est intégrée nativement */
.companyFeatureListModal {
  width: min(1080px, 96vw);
}
/* La liste est un glassCard : on l'aplatit TOTALEMENT pour qu'elle épouse la modale.
   Important : supprimer aussi le halo themé (::before/::after, qui créait la couleur
   coupée par l'arrondi) ET l'overflow:hidden + border-radius (qui coupaient le texte
   des filtres dans les coins arrondis). */
.companyFeatureListModalBody > .glassCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  isolation: auto !important;
  display: grid !important;
  gap: 16px;
}
.companyFeatureListModalBody > .glassCard::before,
.companyFeatureListModalBody > .glassCard::after {
  content: none !important;
  display: none !important;
}
/* Le titre interne de la liste fait doublon avec le titre de la modale → masqué,
   mais on garde les actions (filtre / recherche / créer) */
.companyFeatureListModalBody .emailCampaignListHead > div:first-child {
  display: none;
}
/* La modale liste passe sous les éditeurs/détails (qui restent à z-index 300) */
#companyFeatureListModalBack {
  z-index: 290;
}

/* Animations modales — ouverture ET fermeture, plus visibles/premium.
   allow-discrete permet d'animer la sortie malgré le toggle [hidden]. */
@media (prefers-reduced-motion: no-preference) {
  .modalBack {
    transition:
      opacity 0.2s ease,
      display 0.34s allow-discrete;
  }
  @starting-style {
    .modalBack:not([hidden]) {
      opacity: 0;
    }
  }
  .modalBack[hidden] {
    opacity: 0;
  }
  /* Ouverture : « pop » premium avec léger rebond ; fermeture : rapide. */
  .modalCard {
    transition:
      transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.22s ease;
  }
  @starting-style {
    .modalBack:not([hidden]) .modalCard {
      opacity: 0;
      transform: translateY(18px) scale(0.96);
    }
  }
  .modalBack[hidden] .modalCard {
    opacity: 0;
    transform: translateY(10px) scale(0.975);
    transition:
      transform 0.22s cubic-bezier(0.4, 0, 1, 1),
      opacity 0.18s ease;
  }
}

/* --- Ajustements cases fonctionnalités (round 2) --- */

/* Largeurs égales : aucune case ne déborde (URL deeplink tronquée si besoin) */
.companyFeatureCards > .glassCard {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.companyFeatureCards .sectionDeepLink {
  min-width: 0;
  max-width: 100%;
}
.companyFeatureCards .sectionDeepLinkUrl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Total des cartes de fidélité : 3e colonne centrale (entre copie et boutons) →
   centré au milieu de la case sur ordi, et la copie reste compacte (même hauteur
   que les autres cases). Sur mobile, l'en-tête se replie → total au-dessus des boutons. */
/* BASE (tablette & en dessous) : total TOUJOURS en dernier, EN DESSOUS, aligné à
   GAUCHE. Les boutons restent en haut avec la copie (comme les autres cases) →
   le total ne prend jamais la place des boutons, plus de positionnement bizarre. */
.companyLoyaltyTotalMid {
  order: 1;
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}
.companyFeatureCard--loyalty .loyaltyStatusCopy {
  flex: 1 1 auto;
}

/* ORDI large (≥1280px) UNIQUEMENT : total centré au milieu sur une seule ligne.
   En dessous de cette largeur (avec la sidebar, la ligne unique ne tient pas), on
   garde le total en dessous → comportement cohérent et prévisible. */
@media (min-width: 1280px) {
  .companyLoyaltyTotalMid {
    order: 0;
    flex: 1 1 auto;
    justify-content: center;
    transform: translateY(-4px);
  }
  .companyFeatureCard--loyalty .loyaltyStatusCopy {
    flex: 0 1 auto;
  }
}

/* MOBILE : un peu plus gros, moins d'espace au-dessus (alignement gauche déjà en base). */
@media (max-width: 720px) {
  .companyFeatureCard--loyalty .loyaltyHeroTotal {
    margin-top: 4px;
  }
  .companyFeatureCard--loyalty .contactsHeroTotalValue {
    font-size: 38px;
  }
  .companyFeatureCard--loyalty .contactsHeroTotalLabel {
    font-size: 16px;
  }
}

/* Centrer verticalement le contenu (titre) face aux boutons → plus d'espace vide
   quand une case n'a pas de lien (inactive). */
.companyFeatureCards .menuHeroHead,
.companyFeatureCards .loyaltyStatusHead {
  align-items: center;
}

/* Titre en blanc quand la fonctionnalité est inactive (ou verrouillée). */
.companyFeatureCard.is-feature-inactive .sectionEyebrow,
.companyFeatureCard.is-feature-locked .sectionEyebrow {
  color: #ffffff !important;
}

/* Cohérence mobile : les actions Fidélité ne s'étirent plus en pleine largeur
   (elles restaient en 2 colonnes étirées, contrairement aux autres cases). */
@media (max-width: 720px) {
  .companyFeatureCards .loyaltyStatusActions,
  .companyFeatureCards #openLoyaltyConfigBtn,
  .companyFeatureCards .loyaltyToggle {
    width: auto;
  }
}

/* Verrou de scroll (modale ouverte) : la sidebar sticky se « décollerait » et
   sauterait vers le haut quand on masque le scroll → on la fige à sa place.
   (Sur mobile ≤960px la sidebar est déjà en position:fixed, donc desktop only.) */
@media (min-width: 961px) {
  body.ui-scroll-locked .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    box-sizing: border-box;
  }
}

/* Accueil : sections parrainage masquées temporairement pour alléger la page.
   NE PAS SUPPRIMER — réactivables en retirant cette règle. */
#homeReferralBonusCard,
#homeReferralPromoCard {
  display: none !important;
}

/* Loader pendant l'(dés)activation d'une fonctionnalité (empêche aussi de
   recliquer) + glow sur la case une fois déplacée. */
.companyFeatureCard.is-feature-busy {
  pointer-events: none;
}
.companyFeatureBusyOverlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(8, 14, 28, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: statsHostFadeIn 0.2s ease both;
}
.companyFeatureBusySpinner {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: spin 0.7s linear infinite;
}
.companyFeatureCard.is-feature-moved {
  animation: companyFeatureMovedGlow 1s ease;
}
@keyframes companyFeatureMovedGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(125, 211, 252, 0);
  }
  30% {
    box-shadow:
      0 0 0 3px rgba(125, 211, 252, 0.5),
      0 18px 40px rgba(0, 0, 0, 0.32);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(125, 211, 252, 0);
  }
}