/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); border: none; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-base); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); font-family: inherit; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  white-space: nowrap; padding: var(--sp-3) var(--sp-4); min-height: 40px;
  letter-spacing: -.01em; position: relative;
}
.btn:hover   { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active  { transform: translateY(0) scale(0.97); filter: brightness(0.92); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; pointer-events: none; }

.btn-primary {
  background: var(--gradient-rose, linear-gradient(135deg,#E0527A,#BF3B63));
  color: #fff;
  border: none;
  box-shadow: var(--shadow-rose-sm, 0 4px 20px rgba(224,82,122,0.3));
  font-weight: 700;
  border-radius: var(--radius-md, 14px);
}
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: var(--shadow-rose, 0 8px 32px rgba(224,82,122,0.35));
  filter: brightness(1.06);
}

.btn-success  { background: var(--success); color: #062013; }
.btn-success:hover { background: #2AB882; }

.btn-danger   { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #E84C4C; }

.btn-teal     { background: var(--teal); color: #062019; }
.btn-teal:hover { background: #25B5A5; }

.btn-purple   { background: var(--purple); color: #fff; }
.btn-purple:hover { background: #8B6EE8; }

.btn-gold     { background: var(--gold); color: #221800; font-weight: 700; }
.btn-gold:hover { background: var(--gold-light); }

.btn-orange   { background: var(--orange); color: #fff; }
.btn-orange:hover { background: #EA7320; }

.btn-blue     { background: var(--blue); color: #fff; }
.btn-blue:hover { background: #4F96EF; }

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border2, rgba(255,255,255,0.13));
  color: var(--text);
  border-radius: var(--radius-md, 14px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--border3, rgba(255,255,255,0.20));
  background: rgba(255,255,255,0.04);
}

.btn-upgrade {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 12px rgba(245,158,11,0.25);
}
.btn-upgrade:hover { box-shadow: 0 6px 24px rgba(245,158,11,0.4); }

/* Tailles */
.btn-full  { width: 100%; }
.btn-lg    { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); min-height: 48px; }
.btn-sm    { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); min-height: 40px; border-radius: 8px; }
.btn-xs    { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); min-height: 40px; border-radius: var(--radius-sm); }
.btn-small { width: auto; flex: 1; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border-radius: 8px; }
.btn-row   { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-2); }
.btn-row:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6); margin-bottom: var(--sp-4);
  transition: border-color var(--t-fast);
}
.card:hover { border-color: var(--border2); }
.card-title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════════════ */
.field { margin-bottom: var(--sp-3); }
.field label {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted2); margin-bottom: var(--sp-1);
  text-transform: uppercase; letter-spacing: .45px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
  background: rgba(9,9,14,0.7);
  border: 1.5px solid rgba(224,82,122,0.25);
  border-radius: var(--radius-md, 14px);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s;
  width: 100%; padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-base);
  outline: none;
  appearance: none; -webkit-appearance: none;
  min-height: 42px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: rgba(224,82,122,0.6);
}
/* Jour : le fond nuit en dur rendait la saisie (var(--text) foncé) illisible.
   :where() garde la spécificité de la règle ci-dessus : les champs stylés par
   une feuille de page continuent de l'emporter. */
:where([data-theme="light"]) input[type="text"],
:where([data-theme="light"]) input[type="email"],
:where([data-theme="light"]) input[type="password"],
:where([data-theme="light"]) input[type="number"],
:where([data-theme="light"]) input[type="search"],
:where([data-theme="light"]) textarea {
  background: var(--surface2, #F1EFF6);
  border-color: rgba(196,61,99,0.35);
}
input[type="tel"],
input[type="url"],
input[type="file"],
input[type="datetime-local"],
select {
  width: 100%; padding: var(--sp-3) var(--sp-3);
  background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-size: var(--fs-base); transition: border-color var(--t), box-shadow var(--t);
  outline: none; font-family: inherit;
  appearance: none; -webkit-appearance: none;
  min-height: 42px;
}
input[type="tel"]:focus, input[type="url"]:focus,
input[type="file"]:focus, input[type="datetime-local"]:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--bg2);
}
input::placeholder, textarea::placeholder { color: var(--muted2); }
/* Inline validation */
.field-valid input, .field-valid textarea, .field-valid select { border-color: var(--success); }
.field-valid input:focus, .field-valid textarea:focus { box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.field-error input, .field-error textarea, .field-error select { border-color: var(--danger); }
.field-error input:focus, .field-error textarea:focus { box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
/* Non-color error/success indicators */
.field-error .field-hint::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; }
.field-valid .field-hint::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center/contain no-repeat; }
.field-hint { font-size: var(--fs-sm); margin-top: 3px; color: var(--danger); line-height: 1.3; }
.field-hint.success { color: var(--success); }
.char-counter { font-size: var(--fs-sm); color: var(--muted); text-align: right; margin-top: 2px; }
.char-counter.warn { color: var(--warning); }
.char-counter.over { color: var(--danger); font-weight: 600; }
textarea { resize: vertical; min-height: 88px; max-height: 320px; }
select { cursor: pointer; }

/* Password toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 4px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: color var(--t-fast);
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle.active { color: var(--accent); }

input[type="checkbox"],
input[type="radio"] {
  width: 18px; height: 18px; min-height: unset; padding: 0;
  background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: 4px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  box-shadow: none; vertical-align: middle;
  transition: background var(--t-fast), border-color var(--t-fast);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: ''; display: block; width: 5px; height: 9px;
  margin: 2px auto 0; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ''; display: block; width: 8px; height: 8px;
  margin: 3px auto 0; background: #fff; border-radius: 50%;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast-el, #notif {
  position: fixed;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--success);
  color: var(--text); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); z-index: 9999;
  font-weight: 600; font-size: var(--fs-base);
  max-width: min(420px, calc(100vw - 2.5rem));
  word-break: break-word;
  box-shadow: var(--shadow-lg);
  animation: slideIn .2s ease;
}
.toast-el { bottom: 1.5rem; right: 1.5rem; }
#notif {
  bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  animation: toastIn .2s ease; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.toast-el.err, #notif.err { border-left-color: var(--danger); }
.toast-el.warning, #notif.warning { border-left-color: var(--warning); }
.toast-el.info, #notif.info { border-left-color: var(--info); }

@keyframes slideIn  { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastIn  { from { transform: translateX(-50%) translateY(10px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ═══════════════════════════════════════════════════════
   ERROR MESSAGE
═══════════════════════════════════════════════════════ */
.err {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  font-size: var(--fs-sm); text-align: center; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   STATUS PILLS / BADGES
═══════════════════════════════════════════════════════ */
.status-pill {
  display: inline-flex; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.status-pill.green  { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.status-pill.red    { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }
.status-pill.amber  { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.status-pill.blue   { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-border); }
.status-pill.purple { background: rgba(167,139,250,0.10); color: var(--purple); border: 1px solid rgba(167,139,250,0.20); }
.status-pill.grey   { background: rgba(255,255,255,0.06); color: var(--muted2); border: 1px solid var(--border2); }

/* ═══════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════ */
.tabs {
  display: flex; border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5); gap: 0; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); font-weight: 600;
  color: var(--muted2); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); white-space: nowrap;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: sectionIn .18s ease; }

/* ═══════════════════════════════════════════════════════
   SECTION LABEL (divider)
═══════════════════════════════════════════════════════ */
.section-label {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; margin: var(--sp-4) 0;
}
.section-label::before,
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ═══════════════════════════════════════════════════════
   SPINNER / LOADING
═══════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes klrSpinGlow {
  0%   { box-shadow: 0 0 8px var(--accent-glow), inset 0 0 8px rgba(224,82,122,0.05); }
  50%  { box-shadow: 0 0 20px var(--accent-glow), inset 0 0 12px rgba(224,82,122,0.08); }
  100% { box-shadow: 0 0 8px var(--accent-glow), inset 0 0 8px rgba(224,82,122,0.05); }
}
@keyframes klrPulseText {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.10);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

.loading-state {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-4); color: var(--muted2); font-size: var(--fs-base);
}

/* ── Klarrro branded loading wheel ───────────────────── */
.klr-loader {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-4);
  /* Suit le thème effectif (Nuit/Jour/Auto, posé par theme-switcher.js avant
     toute feuille) : fond = --bg du thème, jamais un noir en dur. */
  background: rgba(9,9,14,0.92);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 1; transition: opacity .35s ease-out;
  pointer-events: all;
}
.klr-loader.hide {
  opacity: 0; pointer-events: none;
}
.klr-loader-wheel {
  position: relative; width: 56px; height: 56px;
}
.klr-loader-ring {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--border, rgba(255,255,255,0.06));
  border-top-color: var(--accent);
  border-right-color: var(--accent-dark);
  animation: spin 0.9s cubic-bezier(0.4,0,0.2,1) infinite,
             klrSpinGlow 2.2s ease-in-out infinite;
}
.klr-loader-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 26px; height: 26px;
  opacity: 0.7;
}
.klr-loader-text {
  font-family: 'DM Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: var(--fs-sm, 0.778rem);
  color: var(--muted2, #ADA6C0);
  letter-spacing: 1.5px; text-transform: uppercase;
  animation: klrPulseText 2s ease-in-out infinite;
}
/* Inline variant (inside cards, sections) */
.klr-loader-inline {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
}
.klr-loader-inline .klr-loader-ring {
  width: 36px; height: 36px; border-width: 2px;
}
.klr-loader-inline .klr-loader-logo {
  width: 18px; height: 18px;
}
.klr-loader-inline .klr-loader-text {
  font-size: var(--fs-xs, 0.694rem);
}
@media (prefers-reduced-motion: reduce) {
  .klr-loader-ring { animation: spin 0.9s linear infinite; }
  .klr-loader-text { animation: none; opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════ */
.empty-state {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  color: var(--muted2);
}
.empty-state .empty-icon {
  font-size: 2.5rem; margin-bottom: var(--sp-4); opacity: .5;
}
.empty-state h3 {
  font-size: var(--fs-md); font-weight: 700; color: var(--text2); margin-bottom: var(--sp-2);
}
.empty-state p { font-size: var(--fs-base); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
   AVATAR
═══════════════════════════════════════════════════════ */
.avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--surface2);
}
.avatar-xs { width: 26px; height: 26px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar    { width: 40px; height: 40px; }
.avatar-lg { width: 52px; height: 52px; }

/* ═══════════════════════════════════════════════════════
   LOGO RRRL ANIMATION
═══════════════════════════════════════════════════════ */
@keyframes logoR {
  0%, 55%, 100% { transform: translateY(0); }
  28%            { transform: translateY(-4px); }
}
.logo-rrr { color: var(--accent); display: inline-flex; gap: 0; }
.logo-rrr i {
  font-style: normal; display: inline-block;
  animation: logoR 2.4s ease-in-out infinite;
}
.logo-rrr i:nth-child(1) { animation-delay: 0s; }
.logo-rrr i:nth-child(2) { animation-delay: .15s; }
.logo-rrr i:nth-child(3) { animation-delay: .30s; }

.brand-r {
  display: inline-block; color: var(--accent);
  animation: logoR 2.4s ease-in-out infinite;
}
.brand-r:nth-child(2) { animation-delay: .15s; }
.brand-r:nth-child(3) { animation-delay: .30s; }

/* ═══════════════════════════════════════════════════════
   SUPPORT WIDGET
═══════════════════════════════════════════════════════ */
#support-fab {
  position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 500;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); border: none;
  box-shadow: 0 4px 20px var(--accent-glow);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
#support-fab:hover { background: var(--accent-dark); transform: scale(1.08); }

.support-fab-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--warning); color: #1A0F00;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

.support-panel {
  position: fixed; bottom: 4.5rem; right: var(--sp-6); z-index: 501;
  width: 340px; max-width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  animation: popIn .22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.support-panel-header {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.support-panel-title { font-size: var(--fs-lg); font-weight: 700; }
.support-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted2); font-size: 1rem; padding: var(--sp-1);
  transition: color var(--t-fast);
}
.support-panel-close:hover { color: var(--text); }
.support-panel-subtitle {
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--muted2);
  border-bottom: 1px solid var(--border);
}
.support-messages {
  flex: 1; overflow-y: auto; padding: var(--sp-3); max-height: 280px;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.support-input-row {
  padding: var(--sp-3); border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-2); align-items: flex-end;
}
.support-input-row textarea {
  flex: 1; min-height: 38px; max-height: 100px; resize: none;
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3);
}

/* Support nav badge */
.tc-nav-badge {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800;
  padding: var(--sp-1) var(--sp-2); margin-left: auto; line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════════════════════ */
.divider {
  height: 1px; background: var(--border); margin: var(--sp-5) 0;
}
.muted   { color: var(--muted2); }
.danger  { color: var(--danger); }
.success { color: var(--success); }
.warning { color: var(--warning); }
.accent  { color: var(--accent); }

.text-sm  { font-size: var(--fs-sm); }
.text-xs  { font-size: var(--fs-xs); }
.fw-600   { font-weight: 600; }
.fw-700   { font-weight: 700; }
.fw-800   { font-weight: 800; }

.mono { font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
@media (max-width: 768px) {
  .two-col, .three-col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   SKELETON LOADERS
═══════════════════════════════════════════════════════ */
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface, #16162C) 25%, var(--surface2, #1D1D38) 50%, var(--surface, #16162C) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius, 10px);
}
.skeleton-text       { height: 12px; border-radius: 6px; margin-bottom: 8px; }
.skeleton-text-sm    { height: 10px; width: 60%; border-radius: 6px; }
.skeleton-text-lg    { height: 16px; width: 40%; border-radius: 6px; margin-bottom: 10px; }
.skeleton-avatar     { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-card       { height: 120px; border-radius: var(--radius-lg, 14px); margin-bottom: 12px; }
.skeleton-conv {
  display: flex; gap: 12px; padding: 14px 16px; align-items: center;
  background: var(--bg3, #121221); border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: var(--radius, 10px); margin-bottom: 6px;
}
.skeleton-conv-body  { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-event {
  border-radius: 16px; overflow: hidden; margin-bottom: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.09));
}
.skeleton-event-gradient { height: 70px; }
.skeleton-event-body     { padding: 14px; display: flex; flex-direction: column; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface, #16162C); }
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE — dark / light / system
═══════════════════════════════════════════════════════ */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-pill); padding: 3px;
  cursor: pointer; position: relative;
}
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); transition: color var(--t-fast), background var(--t-fast);
  padding: 0; position: relative; z-index: 1;
}
.theme-toggle-btn:hover { color: var(--text); }
.theme-toggle-btn.active {
  background: var(--accent); color: var(--accent-text);
  box-shadow: 0 2px 8px var(--accent-glow);
}
.theme-toggle-btn svg { width: 16px; height: 16px; pointer-events: none; }

/* ── Light mode adjustments ── */
[data-theme="light"] .grain-overlay,
[data-theme="light"] body::before {
  opacity: 0.012 !important;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] .grain-overlay,
  [data-theme="system"] body::before {
    opacity: 0.012 !important;
  }
}

/* ── Invert glassmorphism for light mode ── */
[data-theme="light"] .glass,
[data-theme="light"] .topbar,
[data-theme="light"] .nav-sticky,
[data-theme="light"] .sticky-header {
  background: rgba(255,255,255,0.85) !important;
  border-color: var(--border2) !important;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] .glass,
  [data-theme="system"] .topbar,
  [data-theme="system"] .nav-sticky,
  [data-theme="system"] .sticky-header {
    background: rgba(255,255,255,0.85) !important;
    border-color: var(--border2) !important;
  }
}

/* ── Selection in light mode ── */
[data-theme="light"] ::selection { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: light) {
  [data-theme="system"] ::selection { background: var(--accent); color: #fff; }
}

/* ── Ghost button for light mode — rgba(255,255,255) invisible on white ── */
[data-theme="light"] .btn-ghost {
  background: rgba(0,0,0,0.04);
  border-color: var(--border2);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,0.08);
  border-color: var(--border3);
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] .btn-ghost {
    background: rgba(0,0,0,0.04);
    border-color: var(--border2);
  }
  [data-theme="system"] .btn-ghost:hover {
    background: rgba(0,0,0,0.08);
    border-color: var(--border3);
  }
}

/* ── Button text contrast fix for light mode ── */
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-success { color: #fff; }
[data-theme="light"] .btn-danger  { color: #fff; }
[data-theme="light"] .btn-gold    { color: #fff; }
[data-theme="light"] .btn-upgrade { color: #fff; }
@media (prefers-color-scheme: light) {
  [data-theme="system"] .btn-primary { color: #fff; }
  [data-theme="system"] .btn-success { color: #fff; }
  [data-theme="system"] .btn-danger  { color: #fff; }
  [data-theme="system"] .btn-gold    { color: #fff; }
  [data-theme="system"] .btn-upgrade { color: #fff; }
}

/* ── Profile Incomplete Banner ── */
.profile-incomplete-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 16px 12px;
  background: linear-gradient(135deg, rgba(224,82,122,0.15), rgba(224,82,122,0.05));
  border-left: 3px solid #E0527A;
  border-radius: 0 12px 12px 0;
  animation: fadeUp 300ms ease;
}
.profile-incomplete-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-incomplete-banner-text strong {
  font-size: 0.9rem;
  color: var(--text, #EDE9F6);
  font-weight: 700;
}
.profile-incomplete-banner-sub {
  font-size: 0.78rem;
  color: var(--text-muted, #8A839E);
}
.profile-incomplete-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.profile-incomplete-banner-close {
  background: none;
  border: none;
  color: var(--text-muted, #8A839E);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.profile-incomplete-banner-close:hover {
  color: var(--text, #EDE9F6);
}

/* ── Upsell animations ── */
@keyframes upsellPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes upsellPulseLock {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; filter: drop-shadow(0 0 3px var(--accent, #E0527A)); }
}
@keyframes upsellSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes upsellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Upsell: sticky banner ── */
.upsell-banner {
  background: linear-gradient(135deg, rgba(224,82,122,0.12), rgba(224,82,122,0.06));
  border-top: 1px solid rgba(224,82,122,0.25);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text, #f2ecf8);
  max-height: 56px;
  animation: upsellSlideUp 0.3s ease-out;
}
.upsell-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.upsell-banner-text strong {
  color: #fff;
  font-weight: 600;
}
.upsell-banner .btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}
.upsell-banner-close {
  background: none;
  border: none;
  color: var(--muted2, #9880b0);
  opacity: 0.6;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem;
  flex-shrink: 0;
}
.upsell-banner-close:hover { opacity: 1; }

/* ── Upsell: bottom sheet overlay ── */
.upsell-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: upsellFadeIn 0.2s ease-out;
}
.upsell-sheet {
  background: var(--surface, #16162C);
  border: 1px solid var(--border2, rgba(255,255,255,0.1));
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: upsellSlideUp 0.3s ease-out;
}
.upsell-sheet h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  margin-bottom: 0.25rem;
}
.upsell-sheet p {
  text-align: center;
  color: var(--muted2, #9880b0);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.upsell-sheet .btn-primary {
  width: 100%;
  margin-bottom: 0.65rem;
}
.upsell-sheet-dismiss {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--muted2, #9880b0);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem;
}
.upsell-sheet-dismiss:hover { color: var(--text, #f2ecf8); }

/* ── Upsell: GIF preview in gate ── */
.upsell-gif-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.upsell-gif-preview img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  filter: blur(3px);
}
.upsell-gif-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,9,14,0.8), rgba(9,9,14,0.3));
}

/* ── Upsell: XP counter badge ── */
.upsell-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent, #E0527A);
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  background: rgba(224,82,122,0.1);
  cursor: default;
  user-select: none;
}
.upsell-xp-badge.clickable {
  cursor: pointer;
  transition: transform 0.15s;
}
.upsell-xp-badge.clickable:hover { transform: scale(1.05); }
.upsell-xp-badge.pulsing {
  animation: upsellPulse 2s ease-in-out infinite;
  cursor: pointer;
}

/* ── Upsell: system nudge message ── */
.msg-row.system-nudge {
  display: flex;
  justify-content: center;
  padding: 0.5rem 1rem;
}
.msg-row.system-nudge .msg-bubble {
  background: rgba(224,82,122,0.08);
  border: 1px solid rgba(224,82,122,0.2);
  border-radius: 12px;
  text-align: center;
  max-width: min(90%, 360px);
  font-size: 0.85rem;
  color: var(--text, #f2ecf8);
  line-height: 1.5;
}
.msg-row.system-nudge .nudge-cta {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--accent, #E0527A);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  background: none;
  border: none;
  padding: 0;
}
.msg-row.system-nudge .nudge-cta:hover { opacity: 0.8; }

/* ── Upsell: save match heart ── */
.upsell-save-match {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}
.upsell-save-match:hover { opacity: 1; transform: scale(1.1); }

/* ── Upsell: GIF social proof counter ── */
.gif-social-proof {
  text-align: center;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  color: var(--muted2, #9880b0);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   APP PARTICIPANT — jetons Nuit & Jour (vague 3B, 2026-10)
   Préfixe --app-* : consommés par klarrro.html et ses feuilles
   (chat.css, community.css, klarrro-ux.css, foundation.css…),
   ainsi que par chat.html et app.html qui chargent ce fichier.
   Ce ne sont que des propriétés personnalisées : aucune autre
   page ne change de rendu. Valeurs Nuit = couleurs d'origine,
   valeurs Jour = équivalents sur papier #FAF9FC.
═══════════════════════════════════════════════════════ */
:root {
  /* Accent participant — surchargé par le branding de soirée (chat.js) */
  --app-accent-fill: var(--rose-fill, #C43D63);   /* fond des CTA : blanc dessus 5,01:1 */
  --app-on-accent:   var(--on-rose, #FFFFFF);
  --app-accent-ink:  var(--rose-ink, #EE7A97);    /* texte accent */
  --app-amber: #F59E0B;  --app-amber-ink: #F59E0B;
  --app-indigo: #667EEA; --app-indigo-ink: #8EA0F3;
  --app-violet-ink: #C4B5FD;
  --app-on-lavender: #09090E;
  --app-on-info: #09090E;
  /* Aplats sémantiques portant du texte blanc (≥ 4,5:1 dans les deux thèmes) */
  --app-danger-fill: #DC2626; --app-success-fill: #047857; --app-info-fill: #2563EB; --app-violet-fill: #7C3AED;
  /* Humeurs (anneaux, pastilles) — variante Jour obligatoire */
  --app-mood-romantique: #E0527A; --app-mood-mysterieux: #C4B5FD; --app-mood-chill: #2DD4BF;
  --app-mood-festif: #FB923C; --app-mood-confiant: #F8BF45; --app-mood-curieux: #60A5FA;
  /* Surfaces du langage visuel */
  --app-grain: .028;
  --app-tabbar-bg: var(--surface, #16162C);
  --app-tabbar-ink: rgba(237,233,246,.62);
  --app-tabbar-line: rgba(237,233,246,.12);
  --app-tabbar-shadow: 0 12px 32px -12px rgba(0,0,0,.7);
  --app-field-bg: var(--surface2, #1D1D38);
  --app-sheet-shadow: 0 -12px 40px rgba(0,0,0,.45);
  --app-r-btn: 12px; --app-r-card: 16px; --app-r-sheet: 24px; --app-r-pill: 999px;
  --app-spring: cubic-bezier(.34,1.56,.64,1);
  /* Échelles de transparences neutres :
     fg = encre (blanc en Nuit, indigo en Jour) pour fonds légers, bordures ;
     text = encre de texte (alpha Jour relevé pour garder le même contraste) ;
     shade = voiles et creux sombres ; shadow = ombres ; tshadow = ombres de texte (nulles en Jour) ;
     bg / surface = verres teintés fond de page / surface. */
  --app-fg-a-02: rgba(255,255,255,.02); --app-fg-a-2p5: rgba(255,255,255,.025); --app-fg-a-03: rgba(255,255,255,.03); --app-fg-a-3p5: rgba(255,255,255,.035); --app-fg-a-04: rgba(255,255,255,.04); --app-fg-a-05: rgba(255,255,255,.05); --app-fg-a-5p5: rgba(255,255,255,.055); --app-fg-a-06: rgba(255,255,255,.06); --app-fg-a-07: rgba(255,255,255,.07); --app-fg-a-08: rgba(255,255,255,.08); --app-fg-a-09: rgba(255,255,255,.09); --app-fg-a-10: rgba(255,255,255,.1); --app-fg-a-12: rgba(255,255,255,.12); --app-fg-a-14: rgba(255,255,255,.14); --app-fg-a-15: rgba(255,255,255,.15); --app-fg-a-16: rgba(255,255,255,.16); --app-fg-a-18: rgba(255,255,255,.18); --app-fg-a-20: rgba(255,255,255,.2); --app-fg-a-25: rgba(255,255,255,.25); --app-fg-a-30: rgba(255,255,255,.3); --app-fg-a-35: rgba(255,255,255,.35); --app-fg-a-40: rgba(255,255,255,.4); --app-fg-a-50: rgba(255,255,255,.5); --app-fg-a-65: rgba(255,255,255,.65);
  --app-text-a-35: rgba(255,255,255,.35); --app-text-a-40: rgba(255,255,255,.4); --app-text-a-45: rgba(255,255,255,.45); --app-text-a-50: rgba(255,255,255,.5); --app-text-a-55: rgba(255,255,255,.55); --app-text-a-60: rgba(255,255,255,.6); --app-text-a-78: rgba(255,255,255,.78); --app-text-a-80: rgba(255,255,255,.8); --app-text-a-90: rgba(255,255,255,.9);
  --app-shade-a-00: rgba(0,0,0,0); --app-shade-a-06: rgba(0,0,0,.06); --app-shade-a-12: rgba(0,0,0,.12); --app-shade-a-25: rgba(0,0,0,.25); --app-shade-a-30: rgba(0,0,0,.3); --app-shade-a-45: rgba(0,0,0,.45); --app-shade-a-50: rgba(0,0,0,.5); --app-shade-a-55: rgba(0,0,0,.55); --app-shade-a-60: rgba(0,0,0,.6); --app-shade-a-65: rgba(0,0,0,.65); --app-shade-a-70: rgba(0,0,0,.7); --app-shade-a-72: rgba(0,0,0,.72); --app-shade-a-75: rgba(0,0,0,.75); --app-shade-a-80: rgba(0,0,0,.8); --app-shade-a-82: rgba(0,0,0,.82); --app-shade-a-85: rgba(0,0,0,.85); --app-shade-a-88: rgba(0,0,0,.88); --app-shade-a-90: rgba(0,0,0,.9); --app-shade-a-92: rgba(0,0,0,.92); --app-shade-a-93: rgba(0,0,0,.93); --app-shade-a-96: rgba(0,0,0,.96);
  --app-shadow-a-06: rgba(0,0,0,.06); --app-shadow-a-15: rgba(0,0,0,.15); --app-shadow-a-20: rgba(0,0,0,.2); --app-shadow-a-28: rgba(0,0,0,.28); --app-shadow-a-30: rgba(0,0,0,.3); --app-shadow-a-40: rgba(0,0,0,.4); --app-shadow-a-50: rgba(0,0,0,.5); --app-shadow-a-60: rgba(0,0,0,.6); --app-shadow-a-70: rgba(0,0,0,.7); --app-shadow-a-80: rgba(0,0,0,.8);
  --app-tshadow-a-20: rgba(0,0,0,.2); --app-tshadow-a-30: rgba(0,0,0,.3); --app-tshadow-a-40: rgba(0,0,0,.4); --app-tshadow-a-50: rgba(0,0,0,.5); --app-tshadow-a-70: rgba(0,0,0,.7); --app-tshadow-a-80: rgba(0,0,0,.8); --app-tshadow-a-90: rgba(0,0,0,.9);
  --app-bg-a-00: rgba(9,9,14,0); --app-bg-a-10: rgba(9,9,14,.1); --app-bg-a-40: rgba(9,9,14,.4); --app-bg-a-55: rgba(9,9,14,.55); --app-bg-a-60: rgba(9,9,14,.6); --app-bg-a-62: rgba(9,9,14,.62); --app-bg-a-70: rgba(9,9,14,.7); --app-bg-a-72: rgba(9,9,14,.72); --app-bg-a-74: rgba(9,9,14,.74); --app-bg-a-80: rgba(9,9,14,.8); --app-bg-a-82: rgba(9,9,14,.82); --app-bg-a-85: rgba(9,9,14,.85); --app-bg-a-92: rgba(9,9,14,.92); --app-bg-a-95: rgba(9,9,14,.95); --app-bg-a-96: rgba(9,9,14,.96); --app-bg-a-97: rgba(9,9,14,.97);
  --app-surface-a-60: rgba(22,22,44,.6); --app-surface-a-70: rgba(22,22,44,.7); --app-surface-a-80: rgba(22,22,44,.8); --app-surface-a-85: rgba(22,22,44,.85); --app-surface-a-90: rgba(22,22,44,.9); --app-surface-a-92: rgba(22,22,44,.92); --app-surface-a-96: rgba(22,22,44,.96);
}
[data-theme="light"] {
  --app-amber-ink: #B45309;
  --app-indigo: #4F46E5; --app-indigo-ink: #4338CA;
  --app-violet-ink: #6D28D9;
  --app-on-lavender: #FFFFFF;
  --app-on-info: #FFFFFF;
  --app-mood-romantique: #E0527A; --app-mood-mysterieux: #7C3AED; --app-mood-chill: #0D9488;
  --app-mood-festif: #C2410C; --app-mood-confiant: #956A00; --app-mood-curieux: #1D4ED8;
  --app-grain: 0;
  --app-tabbar-bg: #1A1A2E;
  --app-tabbar-ink: rgba(250,249,252,.7);
  --app-tabbar-line: transparent;
  --app-tabbar-shadow: 0 1px 30px rgba(26,26,46,.22);
  --app-field-bg: var(--surface2, #F1EFF6);
  --app-sheet-shadow: 0 -8px 40px rgba(26,26,46,.16);
  --app-fg-a-02: rgba(26,26,46,.02); --app-fg-a-2p5: rgba(26,26,46,.025); --app-fg-a-03: rgba(26,26,46,.03); --app-fg-a-3p5: rgba(26,26,46,.035); --app-fg-a-04: rgba(26,26,46,.04); --app-fg-a-05: rgba(26,26,46,.05); --app-fg-a-5p5: rgba(26,26,46,.055); --app-fg-a-06: rgba(26,26,46,.06); --app-fg-a-07: rgba(26,26,46,.07); --app-fg-a-08: rgba(26,26,46,.08); --app-fg-a-09: rgba(26,26,46,.09); --app-fg-a-10: rgba(26,26,46,.1); --app-fg-a-12: rgba(26,26,46,.12); --app-fg-a-14: rgba(26,26,46,.14); --app-fg-a-15: rgba(26,26,46,.15); --app-fg-a-16: rgba(26,26,46,.16); --app-fg-a-18: rgba(26,26,46,.18); --app-fg-a-20: rgba(26,26,46,.2); --app-fg-a-25: rgba(26,26,46,.25); --app-fg-a-30: rgba(26,26,46,.3); --app-fg-a-35: rgba(26,26,46,.35); --app-fg-a-40: rgba(26,26,46,.4); --app-fg-a-50: rgba(26,26,46,.5); --app-fg-a-65: rgba(26,26,46,.65);
  --app-text-a-35: rgba(26,26,46,.49); --app-text-a-40: rgba(26,26,46,.55); --app-text-a-45: rgba(26,26,46,.6); --app-text-a-50: rgba(26,26,46,.65); --app-text-a-55: rgba(26,26,46,.69); --app-text-a-60: rgba(26,26,46,.73); --app-text-a-78: rgba(26,26,46,.86); --app-text-a-80: rgba(26,26,46,.88); --app-text-a-90: rgba(26,26,46,.94);
  --app-shade-a-00: rgba(26,26,46,0); --app-shade-a-06: rgba(26,26,46,.027); --app-shade-a-12: rgba(26,26,46,.054); --app-shade-a-25: rgba(26,26,46,.113); --app-shade-a-30: rgba(26,26,46,.135); --app-shade-a-45: rgba(26,26,46,.203); --app-shade-a-50: rgba(26,26,46,.225); --app-shade-a-55: rgba(26,26,46,.248); --app-shade-a-60: rgba(26,26,46,.27); --app-shade-a-65: rgba(26,26,46,.293); --app-shade-a-70: rgba(26,26,46,.315); --app-shade-a-72: rgba(26,26,46,.324); --app-shade-a-75: rgba(26,26,46,.338); --app-shade-a-80: rgba(26,26,46,.36); --app-shade-a-82: rgba(26,26,46,.369); --app-shade-a-85: rgba(26,26,46,.383); --app-shade-a-88: rgba(26,26,46,.396); --app-shade-a-90: rgba(26,26,46,.405); --app-shade-a-92: rgba(26,26,46,.414); --app-shade-a-93: rgba(26,26,46,.419); --app-shade-a-96: rgba(26,26,46,.432);
  --app-shadow-a-06: rgba(26,26,46,.021); --app-shadow-a-15: rgba(26,26,46,.052); --app-shadow-a-20: rgba(26,26,46,.07); --app-shadow-a-28: rgba(26,26,46,.098); --app-shadow-a-30: rgba(26,26,46,.105); --app-shadow-a-40: rgba(26,26,46,.14); --app-shadow-a-50: rgba(26,26,46,.175); --app-shadow-a-60: rgba(26,26,46,.21); --app-shadow-a-70: rgba(26,26,46,.245); --app-shadow-a-80: rgba(26,26,46,.28);
  --app-tshadow-a-20: rgba(26,26,46,0); --app-tshadow-a-30: rgba(26,26,46,0); --app-tshadow-a-40: rgba(26,26,46,0); --app-tshadow-a-50: rgba(26,26,46,0); --app-tshadow-a-70: rgba(26,26,46,0); --app-tshadow-a-80: rgba(26,26,46,0); --app-tshadow-a-90: rgba(26,26,46,0);
  --app-bg-a-00: rgba(250,249,252,0); --app-bg-a-10: rgba(250,249,252,.1); --app-bg-a-40: rgba(250,249,252,.4); --app-bg-a-55: rgba(250,249,252,.55); --app-bg-a-60: rgba(250,249,252,.6); --app-bg-a-62: rgba(250,249,252,.62); --app-bg-a-70: rgba(250,249,252,.7); --app-bg-a-72: rgba(250,249,252,.72); --app-bg-a-74: rgba(250,249,252,.74); --app-bg-a-80: rgba(250,249,252,.8); --app-bg-a-82: rgba(250,249,252,.82); --app-bg-a-85: rgba(250,249,252,.85); --app-bg-a-92: rgba(250,249,252,.92); --app-bg-a-95: rgba(250,249,252,.95); --app-bg-a-96: rgba(250,249,252,.96); --app-bg-a-97: rgba(250,249,252,.97);
  --app-surface-a-60: rgba(255,255,255,.6); --app-surface-a-70: rgba(255,255,255,.7); --app-surface-a-80: rgba(255,255,255,.8); --app-surface-a-85: rgba(255,255,255,.85); --app-surface-a-90: rgba(255,255,255,.9); --app-surface-a-92: rgba(255,255,255,.92); --app-surface-a-96: rgba(255,255,255,.96);
}
/* Mode Pride : l'accent lavande ne porte pas de texte blanc → fond violet profond */
.pride { --app-accent-fill: #7C3AED; --app-accent-ink: #C4B5FD; }
[data-theme="light"].pride {
  --accent: #7C3AED; --accent-dark: #6D28D9; --accent-light: #6D28D9; --accent-glow: rgba(124,58,237,.12);
  --app-accent-ink: #6D28D9;
}

/* Squelette de chargement (utilisé par community.js : onglet Pote, sélecteur de potes).
   Opacité + transform uniquement : sûr sur mobile. */
.ux-skeleton {
  display: block;
  min-height: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text, #fff) 8%, transparent);
  animation: uxSkeletonPulse 1.4s ease-in-out infinite;
}
@keyframes uxSkeletonPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ux-skeleton { animation: none; opacity: .7; }
}