/* ==========================================================================
   CONCOURS APP - CSS DE BASE (Variables par défaut)
   Les thèmes surchargent ces variables pour personnaliser l'apparence.
   ========================================================================== */

/* Variables par défaut (mode sombre - Wine theme par défaut) */
:root {
  /* === Couleurs de fond === */
  --bg: #0b0d10;
  --bg2: #0f1420;
  --bg-gradient: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  --card: #13161b;
  --card-hover: #1a1e25;

  /* === Texte === */
  --text: #e8edf5;
  --text-secondary: #c4cdd9;
  --muted: #8b95a7;
  --heading: #ffffff;

  /* === Bordures === */
  --border: #273142;
  --border-light: #334155;
  --border-focus: var(--brand);

  /* === Couleurs de marque (sur-définies par chaque thème) === */
  --brand: #77e0b5;
  --brand-d: #2bb486;
  --brand-contrast: #a0ffd9;
  --brand-soft: rgba(119, 224, 181, 0.15);
  --brand-soft-12a: rgba(119, 224, 181, 0.12);
  --brand-border-alpha: rgba(119, 224, 181, 0.45);
  --brand-text: #061016;

  /* === Couleurs sémantiques === */
  --success: #78e08f;
  --success-bg: rgba(120, 224, 143, 0.15);
  --success-border: rgba(120, 224, 143, 0.45);
  --warning: #ffd166;
  --warning-bg: rgba(255, 209, 102, 0.15);
  --warning-border: rgba(255, 209, 102, 0.45);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.15);
  --danger-border: rgba(239, 68, 68, 0.45);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.15);
  --info-border: rgba(96, 165, 250, 0.45);

  /* === Ombres === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 4px 14px rgba(119, 224, 181, 0.25);

  /* === Rayons de bordure === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* === Typographie === */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* === Espacements === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-gradient);
  color: var(--text);
  font: 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--space-lg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap > main {
  flex: 1;
}

@media (max-width: 768px) {
  .wrap {
    padding: var(--space-md);
  }
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ==========================================================================
   HEADER (Base)
   ========================================================================== */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  flex-wrap: nowrap;
  position: relative;
  z-index: 1000;
}

/* Ensure main content doesn't overlap mobile menus */
main {
  position: relative;
  z-index: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  flex: 1 1 auto;
  min-width: 0;
}

.logo-badge {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand), var(--brand-contrast));
  color: var(--brand-text);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}

header nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  white-space: nowrap;
}

header nav a {
  opacity: 0.85;
  padding: var(--space-xs) var(--space-sm);
  transition: opacity var(--transition-fast);
}

header nav a:hover {
  opacity: 1;
}

/* Header responsive — each theme handles its own nav hide/burger via inline <style> */

@media (max-width: 768px) {
  .logo span:not(.logo-badge) {
    display: none;
  }

  header .btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: var(--space-sm);
  }

  header .btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.03);
  color: var(--brand);
}

.btn.primary,
.btn-primary {
  background: var(--brand);
  color: var(--brand-text);
  border-color: transparent;
  font-weight: 700;
}

.btn.primary:hover,
.btn-primary:hover {
  background: var(--brand-d);
  color: var(--brand-text);
  box-shadow: var(--shadow-brand);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--muted);
}

.btn-outline-primary {
  border-color: var(--brand);
  color: var(--brand);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--brand);
  color: var(--brand-text);
}

.btn-outline-danger {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}

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

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

.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* ==========================================================================
   CARTES
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
  border-color: var(--border-light);
}

.card-header,
.card .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.card-header h3,
.card-header h5,
.card .hd h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.card-body,
.card .bd {
  padding: var(--space-lg);
}

.card-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.01);
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text);
  font-size: 0.9375rem;
}

.form-control {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-control::placeholder {
  color: var(--muted);
}

.form-control.is-invalid {
  border-color: var(--danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

/* Checkboxes */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-input:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.form-check-label {
  color: var(--text);
  cursor: pointer;
}

/* Messages d'erreur */
.invalid-feedback,
.form-text.text-danger {
  color: var(--danger);
  font-size: 0.8125rem;
  margin-top: var(--space-xs);
}

.form-text {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: var(--space-xs);
}

/* ==========================================================================
   ALERTES
   ========================================================================== */

.alerts-wrap {
  margin-bottom: var(--space-md);
}

/* Toast notifications — floating auto-dismiss */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
  transition: opacity .4s;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--card, #1a1e25);
  border: 1px solid var(--border, #273142);
  color: var(--text, #e8edf5);
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: toast-in .3s ease-out;
}

.toast--success { border-left: 4px solid #22c55e; }
.toast--warning { border-left: 4px solid #f59e0b; }
.toast--error   { border-left: 4px solid #ef4444; }
.toast--info    { border-left: 4px solid var(--brand, #77e0b5); }

.toast__close {
  background: none;
  border: none;
  color: var(--muted, #8b95a7);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.toast__close:hover { color: var(--text, #e8edf5); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.alert {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.alert-success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.alert-warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning);
}

.alert-danger,
.alert-error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: #fca5a5;
}

.alert-info {
  background: var(--brand-soft);
  border-color: var(--brand-border-alpha);
  color: var(--text);
}

.alert-dismissible .btn-close {
  position: relative;
  padding: var(--space-sm);
  background: transparent;
  border: none;
  opacity: 0.6;
  cursor: pointer;
  filter: invert(1);
}

.alert-dismissible .btn-close:hover {
  opacity: 1;
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.bg-success,
.bg-success {
  background: var(--success) !important;
  color: #064e3b;
}

.badge.bg-warning,
.bg-warning {
  background: var(--warning) !important;
  color: #78350f;
}

.badge.bg-danger,
.bg-danger {
  background: var(--danger) !important;
  color: #fff;
}

.badge.bg-info,
.bg-info {
  background: var(--info) !important;
  color: #1e3a5f;
}

/* ==========================================================================
   SECTIONS HERO
   ========================================================================== */

.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.hero h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.hero p {
  color: var(--muted);
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* ==========================================================================
   GRILLES
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.feat {
  padding: var(--space-md);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.feat:hover {
  border-color: var(--brand-border-alpha);
}

.feat b {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--heading);
}

/* ==========================================================================
   PAGES PROFIL & AUTHENTIFICATION
   ========================================================================== */

.auth-page,
.profile-page {
  padding: var(--space-xl) 0;
}

.auth-page h2,
.profile-page h2 {
  margin-bottom: var(--space-lg);
  color: var(--heading);
}

/* Cartes de profil améliorées */
.profile-card,
.card.mt-4 {
  margin-bottom: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.profile-card .card-header,
.card.mt-4 .card-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) var(--space-lg);
}

.profile-card .card-header h5,
.card.mt-4 .card-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
}

.profile-card .card-body,
.card.mt-4 .card-body {
  padding: var(--space-lg);
}

.profile-card .card-body p,
.card.mt-4 .card-body p {
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.profile-card .card-body strong {
  color: var(--text-secondary);
}

.profile-card .card-footer,
.card.mt-4 .card-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.01);
}

/* Zone dangereuse (suppression compte) */
.card.border-danger,
.danger-zone {
  border-color: var(--danger) !important;
}

.card.border-danger .card-header,
.danger-zone .card-header {
  background: var(--danger-bg) !important;
  border-bottom-color: var(--danger-border) !important;
}

.card.border-danger .card-header h5,
.danger-zone .card-header h5 {
  color: var(--danger) !important;
}

.card.border-danger .card-body .text-muted {
  color: var(--muted) !important;
}

/* ==========================================================================
   PAGES STATIQUES
   ========================================================================== */

.content-block {
  line-height: 1.8;
  color: var(--text);
}

.content-block h1,
.content-block h2,
.content-block h3,
.content-block h4 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--heading);
}

.content-block p {
  margin-bottom: 1.25em;
}

.content-block ul,
.content-block ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}

.content-block li {
  margin-bottom: 0.5em;
}

/* ==========================================================================
   COMPOSANTS DIVERS
   ========================================================================== */

.muted {
  color: var(--muted);
}

/* Trust pills */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 900px) {
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trust .pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  text-align: center;
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm);
}

.tab-btn {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text);
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  border-color: var(--brand-border-alpha);
}

.tab-btn.active {
  background: var(--brand-soft-12a);
  border-color: var(--brand-border-alpha);
  color: var(--brand);
}

/* KPIs */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}

.kpi {
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.kpi b {
  font-size: 1.75rem;
  display: block;
  color: var(--brand);
}

/* Blog */
.blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .blog {
    grid-template-columns: 1fr;
  }
}

.post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.post:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.post img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--bg2);
}

.post .p {
  padding: var(--space-md);
}

.post h4 {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
}

/* Pricing */
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .pricing {
    grid-template-columns: 1fr;
  }
}

.price {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--card);
  transition: border-color var(--transition-fast);
}

.price:hover {
  border-color: var(--brand-border-alpha);
}

.price h4 {
  margin: 0 0 var(--space-xs);
}

.price .val {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand);
}

.price ul {
  margin: var(--space-md) 0 0 var(--space-md);
  color: var(--muted);
}

/* FAQ */
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--card);
  transition: border-color var(--transition-fast);
}

.faq details:hover {
  border-color: var(--border-light);
}

.faq details + details {
  margin-top: var(--space-sm);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--heading);
}

.faq details[open] summary {
  margin-bottom: var(--space-sm);
  color: var(--brand);
}

/* Ticker */
.ticker {
  height: 317px;
  overflow: hidden;
  position: relative;
}

.ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.6s ease-in-out;
}

.ticker li {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
  border-bottom: 1px dashed var(--border);
}

.wine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}

.score {
  font-weight: 800;
  background: var(--brand-soft);
  color: var(--brand);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  min-width: 72px;
  text-align: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Legacy bare footer (kept for any remaining pages not yet migrated) */
footer:not(.site-footer):not(.wine-footer):not(.beer-footer):not(.olive-footer):not(.ks-footer) {
  padding: var(--space-xl) 0;
  color: var(--muted);
  font-size: 0.875rem;
}

footer:not(.site-footer) .row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

footer a {
  color: var(--muted);
  transition: color var(--transition-fast);
}

footer a:hover {
  color: var(--brand);
}

/* ---------- Unified site footer (back-office + auth) ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1rem, 3vw, 2.5rem);
  font-size: 0.85rem;
  color: var(--muted, #9ca3af);
  background: var(--card, #fff);
}

.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--heading, var(--text, #1f2937));
}

.site-footer-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  align-items: center;
}

.site-footer-links a {
  color: var(--muted, #9ca3af);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-links a:hover {
  color: var(--heading, var(--text, #1f2937));
}

.site-footer-copy {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted, #9ca3af);
  opacity: 0.7;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  margin-top: 0.2rem;
}

.lang-select {
  font-size: 0.82rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
}

@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .site-footer-links {
    justify-content: center;
  }
}

/* ==========================================================================
   PASSWORD TOGGLE
   ========================================================================== */

input[type="password"],
#id_password1,
#id_password2 {
  padding-right: 2.5rem;
}

.pw-eye {
  position: absolute;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  color: var(--muted);
  z-index: 3;
  transition: color var(--transition-fast);
}

.pw-eye:hover {
  color: var(--text);
}

.form-floating .pw-eye {
  right: 14px;
}

/* ==========================================================================
   UTILITAIRES BOOTSTRAP OVERRIDE
   ========================================================================== */

.text-muted {
  color: var(--muted) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.bg-danger {
  background-color: var(--danger) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.border-danger {
  border-color: var(--danger) !important;
}

/* Container Bootstrap override */
.container {
  max-width: 1140px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-sm-12,
.col-md-8,
.col-lg-6 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-md-8 {
    width: 66.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg-6 {
    width: 50%;
  }
}

/* ==========================================================================
   HELPERS POUR THEMES CLAIRS
   ========================================================================== */

/* Classe utilitaire pour les thèmes clairs */
.theme-light {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --bg-gradient: linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  --card: #ffffff;
  --card-hover: #f1f5f9;
  --text: #1e293b;
  --text-secondary: #475569;
  --muted: #64748b;
  --heading: #0f172a;
  --border: #e2e8f0;
  --border-light: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.theme-light .alerts-wrap .btn-close {
  filter: none;
}

.theme-light .alert {
  color: var(--text);
}

.theme-light .alert-success {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.theme-light .alert-warning {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.theme-light .alert-danger,
.theme-light .alert-error {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.theme-light .alert-info {
  background: var(--brand-soft);
  border-color: var(--brand-border-alpha);
  color: var(--text);
}

/* ==========================================================================
   LAYOUT PROFIL AVEC SIDEBAR
   ========================================================================== */

.profile-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

/* === Sidebar Navigation === */
.profile-sidebar {
  position: sticky;
  top: var(--space-lg);
  align-self: start;
}

.profile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.profile-menu-item:hover {
  background: rgba(var(--brand-rgb, 119, 224, 181), 0.1);
  color: var(--brand);
}

.profile-menu-item.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.profile-menu-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.profile-menu-fa-icon {
  width: 20px;
  min-width: 20px;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  text-align: center;
}

.profile-menu-item--cta {
  background: rgba(217, 175, 98, 0.15);
  color: #d4a94c;
  font-weight: 600;
}

.profile-menu-item--cta:hover {
  background: rgba(217, 175, 98, 0.25);
  color: #d4a94c;
}

.profile-menu-item--cta.active {
  background: rgba(217, 175, 98, 0.25);
  color: #d4a94c;
}

.profile-menu-item--cta svg {
  color: #d4a94c;
}

.profile-menu-item--referral {
  color: #2ba58f;
}

.profile-menu-item--referral:hover {
  background: rgba(43, 165, 143, 0.15);
  color: #2ba58f;
}

.profile-menu-item--referral.active {
  background: rgba(43, 165, 143, 0.20);
  color: #2ba58f;
}

.profile-menu-item--referral svg {
  color: #2ba58f;
}

.profile-menu-item--muted {
  color: var(--muted);
}

/* Toggle button: hidden on desktop */
.profile-sidebar-toggle {
  display: none;
}

/* ========== Unified responsive breakpoint: 1024px ========== */
/* Below 1024px: single-column layout, collapsible sidebar toggle */
@media (max-width: 1024px) {
  .profile-layout {
    grid-template-columns: 1fr;
    padding: var(--space-lg) var(--space-md);
  }

  .profile-sidebar {
    position: static;
    overflow: visible;
  }

  /* Mobile toggle button */
  .profile-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--card, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md);
    color: var(--heading, var(--text));
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .profile-sidebar-toggle:hover {
    background: var(--brand-soft, rgba(255,255,255,0.1));
  }

  .profile-sidebar-toggle span {
    flex: 1;
    text-align: left;
  }

  .profile-sidebar-chevron {
    transition: transform 0.2s ease;
  }

  .profile-sidebar.open .profile-sidebar-chevron {
    transform: rotate(180deg);
  }

  /* Collapsed menu by default on mobile */
  .profile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
    flex-direction: column;
    gap: 2px;
    padding: 0 !important;
    margin-top: 0;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .profile-sidebar.open .profile-menu {
    max-height: 600px;
    padding: 0.6rem !important;
    border-color: inherit !important;
    box-shadow: inherit !important;
  }

  .profile-menu-item {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
  }
}

/* === Profile Main Content === */
.profile-main {
  min-width: 0;
  animation: profileFadeIn 0.15s ease-out;
}

@keyframes profileFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === htmx Navigation Transitions === */

/* Ensure the layout is positioned for the absolute progress bar */
#profile-layout {
  position: relative;
}

/* Progress bar: created dynamically by htmx-nav.js */
.htmx-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brand, #6a3d6a);
  border-radius: 0 2px 2px 0;
  z-index: 10;
  pointer-events: none;
  transition: width 0.3s ease-out;
}

.htmx-progress-bar.loading {
  transition: width 4s cubic-bezier(0.1, 0.5, 0.3, 1);
  width: 85%;
}

.htmx-progress-bar.done {
  transition: width 0.15s ease-out;
  width: 100%;
}

.htmx-progress-bar.fade-out {
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* Smooth view transition for supporting browsers (Chrome 111+) */
.profile-main {
  view-transition-name: profile-content;
}

::view-transition-old(profile-content) {
  animation: htmxFadeOut 0.1s ease-out forwards;
}

::view-transition-new(profile-content) {
  animation: htmxFadeIn 0.15s ease-in forwards;
}

@keyframes htmxFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes htmxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === Profile Header/Banner === */
.profile-banner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-info h1 {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--brand-soft);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.profile-badge svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   STATS GRID
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-info strong {
  display: block;
  font-size: 1.25rem;
  color: var(--heading);
}

.stat-info span {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ==========================================================================
   SECTION CARDS (pour profil, domaines, etc.)
   ========================================================================== */

.section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.section-card-header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
  margin: 0;
}

.section-card-header h2 svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.section-card-body {
  padding: var(--space-lg);
}

.section-card--highlight {
  border-color: var(--brand-border-alpha);
  background: linear-gradient(135deg, var(--brand-soft) 0%, transparent 100%);
}

.section-card--danger {
  border-color: var(--danger);
}

.section-card--danger .section-card-header {
  background: var(--danger-bg);
}

.section-card--danger .section-card-header h2 {
  color: var(--danger);
}

/* ==========================================================================
   BILLING SECTION
   ========================================================================== */

.billing-summary {
  display: grid;
  gap: var(--space-md);
}

.billing-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.billing-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.billing-icon svg {
  width: 20px;
  height: 20px;
}

.billing-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.billing-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.billing-value {
  font-weight: 600;
  color: var(--heading);
}

.billing-sub {
  font-size: 0.875rem;
  color: var(--muted);
}

.billing-placeholder {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

.billing-add-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
  margin-top: var(--space-xs);
}

.billing-add-link:hover {
  text-decoration: underline;
}

.billing-add-link svg {
  width: 14px;
  height: 14px;
}

.billing-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--brand-soft);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.billing-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--brand);
  width: 16px;
  height: 16px;
}

/* Billing options (radio-like) */
.billing-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.billing-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.billing-option:hover {
  border-color: var(--brand-border-alpha);
}

.billing-option.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.billing-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.billing-option.active .billing-radio {
  border-color: var(--brand);
}

.billing-option.active .billing-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
}

.billing-option-info {
  flex: 1;
}

.billing-option-info strong {
  display: block;
  margin-bottom: 2px;
}

.billing-option-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.billing-badge {
  background: var(--brand);
  color: var(--brand-text);
  font-size: 0.7rem;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 4px;
  text-transform: uppercase;
}

/* ==========================================================================
   DOMAINS LIST (Organisations/Domaines)
   ========================================================================== */

.domains-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.domain-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.domain-item:hover {
  border-color: var(--brand-border-alpha);
  box-shadow: var(--shadow-sm);
}

.domain-item.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.domain-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.domain-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.domain-logo-initial {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
}

.domain-info {
  flex: 1;
  min-width: 0;
}

.domain-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 2px;
}

.domain-verified-icon {
  color: var(--brand);
  width: 16px;
  height: 16px;
}

.domain-location {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.domain-location svg {
  width: 14px;
  height: 14px;
}

.domain-actions {
  display: flex;
  gap: var(--space-xs);
}

/* ==========================================================================
   ROLE BADGES
   ========================================================================== */

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.role-badge--owner {
  background: var(--brand-soft);
  color: var(--brand);
}

.role-badge--admin {
  background: rgba(96, 165, 250, 0.15);
  color: #3b82f6;
}

.role-badge--accountant {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.role-badge--assistant {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
}

/* ==========================================================================
   MEMBERS / COLLABORATORS
   ========================================================================== */

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.member-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.member-details {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.member-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.member-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--brand);
}

.member-action--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ==========================================================================
   PRODUCTS GRID
   ========================================================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: var(--brand-border-alpha);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-image {
  width: 100%;
  height: 140px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image svg {
  color: var(--muted);
  width: 48px;
  height: 48px;
}

.product-content {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-domain {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.product-domain-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--brand);
  overflow: hidden;
}

.product-domain-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-name {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.product-variety {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.product-vintage {
  font-size: 0.8125rem;
  color: var(--muted);
}

.product-score {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--brand);
}

.product-score svg {
  color: var(--warning);
  width: 14px;
  height: 14px;
}

.product-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.product-status--pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.product-status--rated {
  background: var(--brand-soft);
  color: var(--brand);
}

/* ==========================================================================
   FILTERS BAR
   ========================================================================== */

.filters-bar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.filter-select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font-size: 0.875rem;
  min-width: 180px;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--brand);
}

.filter-search {
  flex: 1;
  min-width: 200px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  font-size: 0.875rem;
}

.filter-search:focus {
  outline: none;
  border-color: var(--brand);
}

.filter-search::placeholder {
  color: var(--muted);
}

/* ==========================================================================
   PAGE HEADERS
   ========================================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 1.75rem;
  color: var(--heading);
}

.page-header-content h1 {
  font-size: 1.75rem;
  margin-bottom: var(--space-xs);
}

.page-header-content p {
  color: var(--muted);
  margin: 0;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
}

.empty-state-icon {
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.empty-state-icon svg {
  width: 64px;
  height: 64px;
}

.empty-state h3 {
  margin-bottom: var(--space-sm);
}

.empty-state p {
  color: var(--muted);
  margin: 0 auto var(--space-lg);
  margin-left: 15%;
  margin-right: 15%;
}

/* ==========================================================================
   INVITATIONS BANNER
   ========================================================================== */

.invitations-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.invitations-banner h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

.invitations-banner h3 svg {
  color: var(--warning);
  width: 20px;
  height: 20px;
}

.invitation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--card);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.invitation-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   PENDING INVITATIONS (in member section)
   ========================================================================== */

.pending-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
}

.pending-section h4 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.pending-section h4 svg {
  width: 16px;
  height: 16px;
}

.pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pending-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--warning-bg);
  border: 1px dashed var(--warning-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.pending-email {
  flex: 1;
}

.pending-date {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   INFO TABLE (for profile details)
   ========================================================================== */

.info-table {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.info-row:first-child {
  padding-top: 0;
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.info-value {
  color: var(--text);
}

.info-value a {
  color: var(--brand);
}

.info-value a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   ICON BUTTONS
   ========================================================================== */

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--brand);
}

.btn-icon svg {
  width: 18px;
  height: 18px;
}

.btn-icon--danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* ==========================================================================
   BACK LINK
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  margin-bottom: var(--space-md);
}

.back-link:hover {
  color: var(--brand);
}

.back-link svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   BUTTONS SMALL
   ========================================================================== */

.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8125rem;
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ==========================================================================
   EDIT LINK (small inline edit button)
   ========================================================================== */

.edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
}

.edit-link:hover {
  text-decoration: underline;
}

.edit-link svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   SECURITY LINK (card-like link)
   ========================================================================== */

.security-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}

.security-link:hover {
  border-color: var(--brand-border-alpha);
  background: rgba(255, 255, 255, 0.04);
}

.security-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-icon svg {
  width: 22px;
  height: 22px;
}

.security-text {
  flex: 1;
}

.security-text strong {
  display: block;
  margin-bottom: 2px;
}

.security-text span {
  font-size: 0.875rem;
  color: var(--muted);
}

.security-arrow {
  color: var(--muted);
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   ORGANIZATION PAGE (List & Detail)
   ========================================================================== */

.org-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.org-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.org-page-header h1 {
  font-size: 1.75rem;
  margin-bottom: 4px;
  color: var(--heading);
}

.org-page-header p {
  color: var(--muted);
  margin: 0;
}

/* Invitations Section */
.org-invitations-section {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.org-invitations-section h2 {
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
  color: var(--heading);
}

.org-invitation-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.org-invitation-card:last-child {
  margin-bottom: 0;
}

.org-invitation-info h4 {
  margin: 0 0 4px;
  color: var(--heading);
}

.org-invitation-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Organization List */
.org-list {
  display: grid;
  gap: var(--space-md);
}

.org-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: all var(--transition-fast);
}

.org-card:hover {
  border-color: var(--brand-border-alpha);
  box-shadow: var(--shadow-md);
}

.org-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.org-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}

.org-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.org-card-title {
  flex: 1;
}

.org-card-title h3 {
  margin: 0 0 4px;
  font-size: 1.125rem;
}

.org-card-title h3 a {
  color: var(--heading);
  text-decoration: none;
}

.org-card-title h3 a:hover {
  color: var(--brand);
}

.org-card-location {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.org-role-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.org-role-owner {
  background: var(--brand-soft);
  color: var(--brand);
}

.org-role-admin {
  background: rgba(96, 165, 250, 0.15);
  color: #3b82f6;
}

.org-role-accountant {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.org-role-assistant {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
}

.org-card-meta {
  display: flex;
  gap: var(--space-lg);
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.org-card-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.org-card-meta svg {
  width: 16px;
  height: 16px;
}

.org-card-actions {
  display: flex;
  justify-content: flex-end;
}

/* Empty State */
.org-empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.org-empty-icon {
  color: var(--muted);
  margin-bottom: var(--space-lg);
}

.org-empty-icon svg {
  width: 64px;
  height: 64px;
}

.org-empty-state h3 {
  margin-bottom: var(--space-sm);
  color: var(--heading);
}

.org-empty-state p {
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

/* ==========================================================================
   ORGANIZATION DETAIL PAGE
   ========================================================================== */

.org-detail-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.org-detail-header {
  margin-bottom: var(--space-xl);
}

.org-detail-header-top {
  margin-bottom: var(--space-md);
}

.org-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.org-back-link:hover {
  color: var(--brand);
}

.org-back-link svg {
  width: 20px;
  height: 20px;
}

.org-detail-header-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: 10px;
}

.org-detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.org-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.org-detail-info {
  flex: 1;
}

.org-detail-info h1 {
  font-size: 1.75rem;
  margin: 0 0 4px;
  color: var(--heading);
}

.org-detail-location {
  margin: 0;
  color: var(--muted);
}

.org-detail-actions {
  flex-shrink: 0;
}

.org-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.org-detail-section {
  background: var(--card);
}

.org-detail-section h2 {
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
  color: var(--heading);
}

.org-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.org-section-header h2 {
  margin: 0;
}

.org-info-card {
  background: var(--card);
  padding: var(--space-lg);
}

.org-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.org-info-row:first-child {
  padding-top: 0;
}

.org-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.org-info-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.org-info-value {
  color: var(--text);
}

.org-info-value a {
  color: var(--brand);
  text-decoration: none;
}

.org-info-value a:hover {
  text-decoration: underline;
}

/* Members List */
.org-members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.org-member-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.org-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.org-member-info {
  flex: 1;
  min-width: 0;
}

.org-member-info h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--heading);
}

.org-member-info p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.org-member-role {
  flex-shrink: 0;
}

.org-member-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.org-member-action {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.org-member-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.org-member-action-danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Pending Invitations */
.org-pending-invitations {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.org-pending-invitations h3 {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.org-invitation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--warning-bg);
  border: 1px dashed var(--warning-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.org-invitation-email {
  font-weight: 500;
}

.org-invitation-role {
  font-size: 0.75rem;
  color: var(--muted);
}

.org-btn-cancel {
  padding: 6px 12px;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--muted);
  transition: all var(--transition-fast);
}

.org-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* Activity Log */
.org-activity-section {
  margin-bottom: var(--space-xl);
}

.org-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.org-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.org-activity-item:last-child {
  border-bottom: none;
}

.org-activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-soft, rgba(255,255,255,.05));
  color: var(--brand);
}
.org-activity--entry_scored .org-activity-icon {
  background: rgba(234, 179, 8, .12);
  color: #eab308;
}
.org-activity--invoice_paid .org-activity-icon {
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
}
.org-activity--order .org-activity-icon {
  background: rgba(99, 102, 241, .12);
  color: #6366f1;
}

.org-activity-content {
  flex: 1;
  min-width: 0;
}
.org-activity-title {
  display: block;
  font-weight: 600;
  font-size: .875rem;
  color: var(--heading);
  line-height: 1.3;
}
.org-activity-desc {
  display: block;
  font-size: .8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-activity-date {
  flex-shrink: 0;
  text-align: right;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
}
.org-activity-date span {
  display: block;
}

.org-activity-empty {
  margin: 0;
  color: var(--muted);
}

/* Footer */
.org-detail-footer {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   ORGANIZATION PAGE - RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .org-page-header {
    flex-direction: column;
  }

  .org-card-header {
    flex-wrap: wrap;
  }

  .org-card-role {
    width: 100%;
    margin-top: var(--space-sm);
  }

  .org-card-meta {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .org-detail-header-content {
    flex-wrap: wrap;
  }

  .org-detail-actions {
    width: 100%;
    margin-top: var(--space-md);
  }

  .org-detail-grid {
    grid-template-columns: 1fr;
  }

  .org-member-card {
    flex-wrap: wrap;
  }

  .org-member-role {
    order: 3;
    width: 100%;
    margin-top: var(--space-xs);
  }

  .org-member-actions {
    order: 4;
    width: 100%;
    margin-top: var(--space-xs);
    justify-content: flex-end;
  }

  .org-activity-main {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   PRODUCTS PAGE
   ========================================================================== */

.products-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.products-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.products-page-header h1 {
  font-size: 1.75rem;
  margin: 0 0 4px;
  color: var(--heading);
}

.products-page-header p {
  color: var(--muted);
  margin: 0;
}

/* Filters Bar */
.products-filters-bar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.products-filter-select {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.875rem;
  color: var(--text);
  min-width: 180px;
  cursor: pointer;
}

.products-filter-select:focus {
  outline: none;
  border-color: var(--brand);
}

.products-filter-search {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.875rem;
  color: var(--text);
}

.products-filter-search:focus {
  outline: none;
  border-color: var(--brand);
}

.products-filter-search::placeholder {
  color: var(--muted);
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: var(--brand-border-alpha);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-image {
  width: 100%;
  height: 160px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image svg {
  color: var(--muted);
}

.product-content {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-domain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.product-domain-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--brand);
  overflow: hidden;
}

.product-domain-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--heading);
}

.product-variety {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.product-vintage {
  font-size: 0.8125rem;
  color: var(--muted);
}

.product-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--brand);
}

.product-score svg {
  color: #f59e0b;
}

.product-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.product-status--pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.product-status--rated {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Products Empty State */
.products-empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.products-empty-icon {
  color: var(--muted);
  margin-bottom: var(--space-lg);
}

.products-empty-state h3 {
  margin: 0 0 var(--space-sm);
  font-size: 1.25rem;
  color: var(--heading);
}

.products-empty-state p {
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

@media (max-width: 640px) {
  .products-page {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .products-page-header {
    flex-direction: column;
  }

  .products-filters-bar {
    flex-direction: column;
  }

  .products-filter-select,
  .products-filter-search {
    width: 100%;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .product-image {
    height: 120px;
  }

  .product-content {
    padding: var(--space-sm);
  }

  .product-name {
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   BILLING OPTIONS
   ========================================================================== */

.billing-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.billing-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.billing-option:hover {
  border-color: var(--brand-border-alpha);
}

.billing-option.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.billing-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.billing-option-content {
  flex: 1;
}

.billing-option-content strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading);
}

.billing-option-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.billing-badge {
  background: var(--brand);
  color: var(--brand-text);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ==========================================================================
   EMPTY STATE VARIANTS
   ========================================================================== */

.empty-state--compact {
  padding: var(--space-xl) var(--space-md);
}

.empty-state--compact svg {
  margin-bottom: var(--space-sm);
}

.empty-state--compact p {
  margin: 0 0 var(--space-md);
  margin-left: 15%;
  margin-right: 15%;
}

/* ==========================================================================
   SECTION CARD
   ========================================================================== */

.section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

.section-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.section-card-header h2 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--heading);
}

.section-card-body {
  padding: var(--space-lg);
}

.section-card-body:empty {
  padding: 0;
}

/* ==========================================================================
   PRODUCTS LIST (in profile)
   ========================================================================== */

.products-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.product-item:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.02);
}

.product-item__image {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.product-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-item__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted-bg);
  color: var(--muted);
}

.product-item__info {
  flex: 1;
  min-width: 0;
}

.product-item__name {
  display: block;
  font-weight: 500;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-item__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}

.product-item__status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.status-badge--draft {
  background: var(--muted-bg);
  color: var(--muted);
}

.status-badge--submitted {
  background: var(--info-bg);
  color: var(--info);
}

.status-badge--accepted {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge--awarded {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-badge--rejected {
  background: var(--danger-bg);
  color: var(--danger);
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.dashboard-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.dashboard-kpi strong {
  font-size: 1.1rem;
  color: var(--heading);
  line-height: 1.2;
}

.dashboard-kpi span {
  font-size: 0.8rem;
  color: var(--muted);
}

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.dashboard-column h3 {
  margin: 0 0 var(--space-sm);
  font-size: 0.95rem;
  color: var(--heading);
}

.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dashboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.dashboard-item:hover {
  border-color: var(--brand-border-alpha);
  background: var(--brand-soft-12a);
}

.dashboard-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-item__title {
  font-weight: 600;
  color: var(--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-item__meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.dashboard-item__aside {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.dashboard-score,
.dashboard-amount {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}

.dashboard-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.dashboard-item--static {
  cursor: default;
}

.dashboard-item--static:hover {
  border-color: var(--border);
  background: var(--bg);
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dashboard-table th,
.dashboard-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.dashboard-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dashboard-table td {
  color: var(--text);
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.trend-badge--up {
  background: var(--success-bg);
  color: var(--success);
}

.trend-badge--down {
  background: var(--danger-bg);
  color: var(--danger);
}

.trend-badge--stable {
  background: var(--muted-bg);
  color: var(--muted);
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.comparison-badge--up {
  background: var(--success-bg);
  color: var(--success);
}

.comparison-badge--down {
  background: var(--danger-bg);
  color: var(--danger);
}

.comparison-badge--stable {
  background: var(--muted-bg);
  color: var(--muted);
}

.comparison-summary {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.875rem;
}

.comparison-positive {
  color: var(--success);
  font-weight: 600;
}

.comparison-negative {
  color: var(--danger);
  font-weight: 600;
}

.comparison-neutral {
  color: var(--muted);
  font-weight: 600;
}

.status-badge--entry-draft {
  background: var(--muted-bg);
  color: var(--muted);
}

.status-badge--entry-submitted,
.status-badge--entry-paid {
  background: var(--info-bg);
  color: var(--info);
}

.status-badge--entry-sample_received,
.status-badge--entry-scored,
.status-badge--entry-published {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge--entry-tasting {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-badge--entry-cancelled,
.status-badge--entry-refunded {
  background: var(--danger-bg);
  color: var(--danger);
}

.status-badge--order-pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.status-badge--order-paid,
.status-badge--order-delivered {
  background: var(--success-bg);
  color: var(--success);
}

.status-badge--order-processing,
.status-badge--order-shipped {
  background: var(--info-bg);
  color: var(--info);
}

.status-badge--order-cancelled,
.status-badge--order-refunded {
  background: var(--danger-bg);
  color: var(--danger);
}

.score-badge-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.score-badge-badge--gold {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #333;
}

.score-badge-badge--silver {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: #333;
}

.score-badge-badge--bronze {
  background: linear-gradient(135deg, #CD7F32, #B87333);
  color: #fff;
}

/* ==========================================================================
   AUTHENTICATED PAGE LAYOUT
   ========================================================================== */

.authenticated-page {
  min-height: 100%;
}

.page-header--compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.page-header--compact h1 {
  font-size: 1.5rem;
  color: var(--heading);
}

/* ==========================================================================
   FORM STYLES
   ========================================================================== */

.form-card {
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.domain-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-section h3 {
  font-size: 1rem;
  color: var(--heading);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}

.form-group .required {
  color: var(--danger);
}

.form-input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-input::placeholder {
  color: var(--muted);
}

.form-input.is-invalid {
  border-color: var(--danger);
}

.form-input.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.form-input-file {
  padding: var(--space-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}

.form-input-file:hover {
  border-color: var(--brand-border-alpha);
  background: var(--brand-soft);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.form-row .flex-2 {
  grid-column: span 1;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  display: flex;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: var(--space-md);
}

.form-errors {
  padding: var(--space-md);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  color: var(--danger);
}

.form-errors strong {
  display: block;
  margin-bottom: var(--space-sm);
}

.form-errors ul {
  margin: 0;
  padding-left: var(--space-lg);
}

.field-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 2px;
}

.field-help {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 2px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.file-preview {
  margin-bottom: var(--space-sm);
}

.file-preview img {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* ==========================================================================
   TOGGLE SWITCH
   ========================================================================== */

.toggle-container {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  user-select: none;
}

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

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  background: var(--border);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle-input:checked + .toggle-slider {
  background: var(--brand);
}

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

.toggle-input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.toggle-label {
  font-weight: 500;
  color: var(--text);
}

/* ==========================================================================
   BILLING FIELDS
   ========================================================================== */

.billing-fields-container {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--border);
  animation: slideDown 0.2s ease;
}

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

.payment-method-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border-alpha);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.payment-method-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--brand-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.payment-method-details {
  flex: 1;
}

.payment-method-details strong {
  display: block;
  margin-bottom: 2px;
}

.payment-method-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
  color: var(--muted);
}

.payment-method-placeholder svg {
  flex-shrink: 0;
}

.payment-method-placeholder span {
  flex: 1;
}

/* ==========================================================================
   PRODUCTS PAGE - FILTERS & STATS
   ========================================================================== */

/* Stats Row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.stat-card--highlight {
  border-color: var(--brand-border-alpha);
  background: var(--brand-soft);
}

.stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
}

.stat-card--highlight .stat-value {
  color: var(--brand);
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-xs);
}

/* Filters Section */
.filters-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 140px;
}

.filter-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-group--search {
  flex: 1;
  min-width: 200px;
}

.search-input-wrapper {
  position: relative;
}

.search-input-wrapper svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-input-wrapper input {
  padding-left: 40px;
}

.filter-actions {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.form-select {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.875rem;
  padding: 10px 32px 10px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--transition-fast);
}

.form-select:hover {
  border-color: var(--border-light);
}

.form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Updated Product Card Styles */
.product-card-image {
  width: 100%;
  height: 160px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-card-placeholder svg {
  color: var(--muted);
  opacity: 0.5;
}

.product-placeholder-score-badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26));
}

.product-placeholder-score-badge--large {
  width: 88px;
  height: 88px;
}

.product-placeholder-tasting {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 0.35;
}
.product-placeholder-tasting--large {
  width: 120px;
  height: 120px;
}

.product-score-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.product-score-badge--or,
.product-score-badge--gold {
  color: #ffd700;
}

.product-score-badge--argent,
.product-score-badge--silver {
  color: #c0c0c0;
}

.product-score-badge--bronze {
  color: #cd7f32;
}

.product-card-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.product-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.product-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}

.product-card-title a {
  color: var(--heading);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-card-title a:hover {
  color: var(--brand);
}

.product-card-org {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 var(--space-xs);
}

.product-card-details {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.product-actions {
  display: flex;
  gap: var(--space-xs);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status--draft {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.status--warning {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.status--pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.status--info {
  background: var(--info-bg);
  color: var(--info);
}

.status--success {
  background: var(--success-bg);
  color: var(--success);
}

.status--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.status--gold {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.pagination-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.pagination-link:hover {
  border-color: var(--brand-border-alpha);
  color: var(--brand);
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--muted);
}

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

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-lg);
}
.detail-layout > * {
  min-width: 0;
}
.detail-sidebar {
  overflow: hidden;
}

@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
}

.detail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-detail-header {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

@media (max-width: 600px) {
  .product-detail-header {
    flex-direction: column;
  }
}

.product-detail-image {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.02);
}

.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-detail-placeholder svg {
  color: var(--muted);
  opacity: 0.4;
}

.product-score-badge--large {
  font-size: 0.75rem;
  padding: 6px 12px;
}

.product-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-detail-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.product-detail-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.product-detail-title h2 {
  margin: 0;
  font-size: 1.5rem;
}

.product-vintage--large {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
}

.product-detail-org {
  margin: 0;
}

.product-detail-org a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}

.product-detail-org a:hover {
  text-decoration: underline;
}

.org-mini-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.product-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--brand);
}

.tag--outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.product-detail-status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: auto;
}

.product-score--large {
  font-size: 1rem;
}

.product-detail-section {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.product-detail-section:last-child {
  border-bottom: none;
}

.product-detail-section h3 {
  font-size: 1rem;
  margin: 0 0 var(--space-md);
  color: var(--heading);
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: 0;
}

.detail-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-list dt {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-list dd {
  margin: 0;
  font-weight: 500;
  color: var(--heading);
}

.professional-comments {
  margin: 0;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text-secondary);
}

/* Detail Sidebar */
.sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.sidebar-card h3 {
  font-size: 0.875rem;
  margin: 0 0 var(--space-md);
  color: var(--heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.text-danger {
  color: var(--danger) !important;
}

.sidebar-detail-list {
  margin: 0;
}

.sidebar-detail-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-detail-item:last-child {
  border-bottom: none;
}

.sidebar-detail-item dt {
  font-size: 0.8125rem;
  color: var(--muted);
  flex-shrink: 0;
}

.sidebar-detail-item dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   CONFIRM DELETE PAGE
   ========================================================================== */

.confirm-delete-card {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}

.confirm-delete-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  background: var(--danger-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-delete-icon svg {
  color: var(--danger);
}

.confirm-delete-card h2 {
  margin: 0 0 var(--space-md);
  font-size: 1.25rem;
}

.confirm-delete-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 var(--space-xs);
}

.confirm-delete-org {
  color: var(--muted);
  margin: 0 0 var(--space-lg);
}

.confirm-delete-warning {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
}

.confirm-delete-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ==========================================================================
   ORGANIZATION BILLING SECTION
   ========================================================================== */

/* Billing section in organization detail */
.org-billing-section {
  margin-top: var(--space-lg);
}

.org-billing-inline {
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.org-billing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.org-billing-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}

.org-billing-toggle-info {
  flex: 1;
}

.org-billing-toggle-info strong {
  display: block;
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.org-billing-toggle-help {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.org-billing-details {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  animation: slideDown 0.2s ease;
}

.org-info-card--compact {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Org card footer with inline billing toggle and actions */
.org-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.org-billing-toggle-inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.org-billing-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.org-billing-label svg {
  flex-shrink: 0;
}

/* Toggle inline variant */
.toggle-container--inline {
  flex-shrink: 0;
}

/* Toggle small variant */
.toggle-container--small .toggle-slider {
  width: 36px;
  height: 20px;
}

.toggle-container--small .toggle-slider::before {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}

.toggle-container--small .toggle-input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* Saved animation */
.toggle-container.saved .toggle-slider {
  box-shadow: 0 0 0 3px var(--success-bg);
}

/* ==========================================================================
   DROPZONE - Upload avec drag & drop
   ========================================================================== */

.dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  transition: all var(--transition-normal);
  background: var(--card);
  cursor: pointer;
}

.dropzone:hover {
  border-color: var(--brand);
  background: var(--brand-soft-12a);
}

/* Dropzone état actif (pendant le drag) - style très visible */
.dropzone--active {
  border-color: var(--brand) !important;
  background: var(--brand-soft) !important;
  transform: scale(1.02);
  box-shadow: 0 0 0 4px var(--brand-soft-12a), 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dropzone--active .dropzone__content {
  opacity: 0.7;
}

.dropzone--active .dropzone__content svg {
  transform: scale(1.1);
  opacity: 1;
}

.dropzone--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dashed var(--brand);
  border-radius: var(--radius-md);
  animation: dropzone-pulse 1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes dropzone-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* Input file couvre toute la zone pour capturer les drops */
.dropzone__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.dropzone__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--muted);
}

.dropzone__content svg {
  color: var(--brand);
  opacity: 0.7;
}

.dropzone__content p {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.dropzone__content span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropzone__content small {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Preview image */
.dropzone__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  position: relative;
  padding: var(--space-md);
  background: var(--bg-elevated, #f9fafb);
  border-radius: var(--radius-sm);
  min-height: 120px;
}

.dropzone__preview img {
  max-width: 180px;
  max-height: 180px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--border);
}

.dropzone__filename {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--brand-soft-12a);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}

.dropzone__filename:empty {
  display: none;
}

.dropzone__remove {
  position: absolute;
  top: -8px;
  right: calc(50% - 108px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.dropzone__remove:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* Dropzone document variant */
.dropzone--document {
  padding: var(--space-lg);
}

.dropzone--document .dropzone__content svg {
  width: 40px;
  height: 40px;
}

.dropzone--document .dropzone__preview {
  flex-direction: column;
  gap: var(--space-sm);
}

.dropzone__pdf-icon {
  color: var(--success);
  width: 48px;
  height: 48px;
}

.dropzone--document .dropzone__remove {
  position: absolute;
  top: -8px;
  right: calc(50% - 32px);
}

/* Dropzone with file — no visual change on the dropzone itself */
.dropzone--has-file {
  /* keep default appearance so user can still add more files */
}

/* Flash animation for doc items when just added */
@keyframes doc-flash {
  0% { background: rgba(74,222,128,0.15); }
  100% { background: var(--card, rgba(255,255,255,0.04)); }
}
.doc-item--new {
  animation: doc-flash 2s ease-out forwards;
}

/* Preview améliorée pour les PDF */
.dropzone--document .dropzone__preview {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--card, rgba(255,255,255,0.04));
}

.dropzone--document .dropzone__pdf-icon {
  color: var(--brand);
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--brand-soft-12a, rgba(107,124,63,0.12));
  padding: 8px;
  border-radius: var(--radius-sm);
}

.dropzone--document .dropzone__filename {
  margin: 0;
  flex-grow: 1;
  max-width: none;
  background: transparent;
  padding: 0;
}

/* Optional label style */
.optional-label {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ==========================================================================
   ANALYSES LIST
   ========================================================================== */

.analyses-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.analysis-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.analysis-item--valid {
  border-color: var(--success-border);
}

.analysis-item--invalid {
  border-color: var(--warning-border);
}

.analysis-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.analysis-item--valid .analysis-item__icon {
  background: var(--success-bg);
  color: var(--success);
}

.analysis-item__icon svg {
  color: var(--brand);
}

.analysis-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.analysis-item__content strong {
  font-size: 0.9rem;
  color: var(--text);
}

.analysis-item__lab,
.analysis-item__date {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ==========================================================================
   DOCUMENT LIST (analyses & uploads)
   ========================================================================== */

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}
.doc-item:hover {
  border-color: var(--brand);
}

.doc-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft-12a, rgba(107,124,63,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

.doc-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-item__date {
  font-size: 0.75rem;
  color: var(--muted);
}

.doc-item__view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: all 0.2s;
  flex-shrink: 0;
}
.doc-item__view:hover {
  color: var(--brand);
  background: var(--brand-soft-12a, rgba(107,124,63,0.12));
}

.doc-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.doc-item__remove:hover {
  color: var(--danger);
  background: rgba(239,68,68,0.1);
}

/* ==========================================================================
   HONOR ATTESTATION
   ========================================================================== */

.honor-attestation {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.honor-attestation__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.honor-attestation__header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
}

.honor-attestation__content > p:first-child {
  margin: 0 0 var(--space-md) 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.honor-attestation__text {
  padding: var(--space-md);
  background: var(--card);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--brand);
  margin-bottom: var(--space-md);
}

.honor-attestation__text p {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7;
}

.honor-attestation__signed {
  padding: var(--space-md);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--success-border);
}

.honor-attestation__signed p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--success);
}

/* Checkbox label */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}

.checkbox-label span {
  flex: 1;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge--success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-border);
}

/* Form section intro */
.form-section__intro {
  margin: 0 0 var(--space-lg) 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   NAV CART ICON
   ========================================================================== */
.nav-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--brand, #77e0b5);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background .2s, color .2s, transform .15s;
  margin: 0 2px;
  vertical-align: middle;
}
.nav-cart-link:hover {
  background: var(--brand-soft, rgba(119, 224, 181, 0.15));
  color: var(--brand-contrast, #a0ffd9);
  transform: scale(1.08);
}
.nav-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand, #77e0b5);
  color: var(--bg, #0b0d10);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
@keyframes cart-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.nav-cart-badge {
  animation: cart-pulse 2s ease-in-out 1;
}