/* ============================================================
   Mercure Design System — Components
   All components consume tokens from tokens.css only.
   No magic numbers below this line.
   ============================================================ */

/* ── Reset / base ──────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:       var(--surface-page);
  color:            var(--text-primary);
  font-family:      var(--type-display);
  font-weight:      400;
  font-size:        var(--mc-type-body);
  line-height:      var(--mc-leading-body);
  letter-spacing:   var(--mc-tracking-base);
  -webkit-font-smoothing: antialiased;
  overflow-x:       hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: 0; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
::selection { background: var(--action-primary); color: var(--text-on-accent); }


/* ════════════════════════════════════════════════════════
   GLASS — the signature surface of the system
   ════════════════════════════════════════════════════════ */

.mc-glass {
  position:          relative;
  background:        var(--surface-glass);
  backdrop-filter:   blur(var(--mc-glass-blur)) saturate(var(--mc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--mc-glass-blur)) saturate(var(--mc-glass-saturate));
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-xl);
  overflow:          hidden;
  transition:
    transform        var(--mc-dur-medium) var(--mc-ease),
    border-color     var(--mc-dur-medium) var(--mc-ease),
    background       var(--mc-dur-medium) var(--mc-ease),
    box-shadow       var(--mc-dur-medium) var(--mc-ease);
}

/* Top edge highlight — 1px gradient seam */
.mc-glass::before {
  content:           "";
  position:          absolute;
  inset:             0 0 auto 0;
  height:            1px;
  background:        var(--mc-glass-highlight);
  pointer-events:    none;
}

/* Cursor-tracked radial spotlight. JS sets --mx / --my. */
.mc-glass::after {
  content:           "";
  position:          absolute;
  inset:             0;
  background:        radial-gradient(
                       600px 320px at var(--mx, 50%) var(--my, 0%),
                       var(--action-primary-soft),
                       transparent 60%
                     );
  opacity:           0;
  transition:        opacity var(--mc-dur-medium) var(--mc-ease);
  pointer-events:    none;
  border-radius:     inherit;
}

.mc-glass:hover {
  transform:         translateY(-3px);
  border-color:      var(--border-brand);
  background:        var(--surface-glass-hover);
  box-shadow:        var(--mc-glass-shadow-hover);
}
.mc-glass:hover::after { opacity: 1; }

/* Glass variants */
.mc-glass--card    { padding: var(--mc-space-7); }
.mc-glass--padded  { padding: var(--mc-space-8); }
.mc-glass--compact { padding: var(--mc-space-6); border-radius: var(--mc-radius-lg); }


/* ════════════════════════════════════════════════════════
   BUTTON — primary CTA
   Same glass treatment + arrow that translates on hover.
   ════════════════════════════════════════════════════════ */

.mc-btn {
  position:          relative;
  overflow:          hidden;
  display:           inline-flex;
  align-items:       center;
  gap:               var(--mc-space-3);
  padding:           var(--mc-space-4) var(--mc-space-5);
  background:        rgba(255, 255, 255, 0.06);
  backdrop-filter:   blur(var(--mc-glass-blur-cta)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--mc-glass-blur-cta)) saturate(1.5);
  border:            1px solid rgba(255, 255, 255, 0.14);
  border-radius:     var(--mc-radius-md);
  color:             var(--text-on-accent);
  font-family:       var(--type-display);
  font-size:         14px;
  font-weight:       500;
  letter-spacing:    var(--mc-tracking-tight-s);
  transition:
    transform        var(--mc-dur-short) var(--mc-ease),
    border-color     var(--mc-dur-short) var(--mc-ease),
    background       var(--mc-dur-short) var(--mc-ease),
    box-shadow       var(--mc-dur-short) var(--mc-ease);
  box-shadow:        0 14px 40px -18px rgba(0, 0, 0, 0.45);
}

.mc-btn::before {
  content:           "";
  position:          absolute;
  inset:             0 0 auto 0;
  height:            1px;
  background:        linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  pointer-events:    none;
}

.mc-btn::after {
  content:           "";
  position:          absolute;
  inset:             0;
  background:        radial-gradient(360px 200px at var(--mx, 50%) var(--my, 50%),
                       var(--action-primary-soft), transparent 65%);
  opacity:           0;
  transition:        opacity var(--mc-dur-short) var(--mc-ease);
  pointer-events:    none;
  border-radius:     inherit;
}

.mc-btn:hover {
  transform:         translateY(-3px);
  border-color:      rgba(107, 124, 255, 0.40);
  background:        rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 80px -30px rgba(107, 124, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.mc-btn:hover::after        { opacity: 1; }
.mc-btn:hover .mc-btn__arrow { transform: translateX(4px); color: var(--text-on-accent); }

.mc-btn__label { position: relative; z-index: 1; }
.mc-btn__arrow {
  position:          relative;
  z-index:           1;
  display:           inline-flex;
  align-items:       center;
  justify-content:   center;
  width:             22px;
  height:            22px;
  color:             var(--action-primary);
  transition:        transform var(--mc-dur-short) var(--mc-ease),
                     color var(--mc-dur-short) var(--mc-ease);
}
.mc-btn__arrow svg  { width: 16px; height: 16px; stroke: currentColor; }

/* Quiet variant — no glow, used for secondary actions */
.mc-btn--quiet {
  background:        transparent;
  border-color:      var(--border-active);
  box-shadow:        none;
}
.mc-btn--quiet:hover {
  background:        var(--surface-glass-hover);
  box-shadow:        none;
}


/* ════════════════════════════════════════════════════════
   PILL / CHIP / TAG
   ════════════════════════════════════════════════════════ */

.mc-pill {
  display:           inline-flex;
  align-items:       center;
  gap:               var(--mc-space-2);
  padding:           6px 12px;
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-full);
  font-family:       var(--type-mono);
  font-size:         var(--mc-type-micro);
  letter-spacing:    var(--mc-tracking-wide-m);
  text-transform:    uppercase;
  color:             var(--text-body);
}
.mc-pill__dot {
  width: 6px; height: 6px;
  border-radius:     50%;
  background:        var(--data-signal);
  box-shadow:        0 0 8px var(--data-signal);
}
.mc-pill--brand .mc-pill__dot { background: var(--brand-mark); box-shadow: 0 0 8px var(--brand-mark); }
.mc-pill--action .mc-pill__dot { background: var(--action-primary); box-shadow: 0 0 8px var(--action-primary); }
.mc-pill--success .mc-pill__dot { background: var(--state-success); box-shadow: 0 0 8px var(--state-success); }
.mc-pill--warn .mc-pill__dot { background: var(--state-warn); box-shadow: 0 0 8px var(--state-warn); }
.mc-pill--error .mc-pill__dot { background: var(--state-error); box-shadow: 0 0 8px var(--state-error); }


/* ════════════════════════════════════════════════════════
   EYEBROW / LABEL / META
   ════════════════════════════════════════════════════════ */

.mc-eyebrow {
  display:           inline-block;
  font-family:       var(--type-mono);
  font-size:         10px;
  letter-spacing:    var(--mc-tracking-wide-m);
  text-transform:    uppercase;
  color:             var(--text-muted);
}


/* ════════════════════════════════════════════════════════
   HEADINGS
   ════════════════════════════════════════════════════════ */

.mc-h1 {
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-2xl);
  line-height:       var(--mc-leading-display-tight);
  letter-spacing:    var(--mc-tracking-tight-xl);
  color:             var(--text-primary);
  margin:            0;
}
.mc-h2 {
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-xl);
  line-height:       var(--mc-leading-display);
  letter-spacing:    var(--mc-tracking-tight-l);
  color:             var(--text-primary);
  margin:            0;
}
.mc-h3 {
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-m);
  line-height:       var(--mc-leading-display-loose);
  letter-spacing:    var(--mc-tracking-tight-m);
  color:             var(--text-primary);
  margin:            0;
}
.mc-lead {
  font-family:       var(--type-display);
  font-size:         var(--mc-type-lead);
  line-height:       var(--mc-leading-body-loose);
  color:             var(--text-body);
}
.mc-lead strong { color: var(--text-primary); font-weight: 500; }

.mc-stat {
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         var(--mc-type-display-3xl);
  line-height:       0.92;
  letter-spacing:    var(--mc-tracking-tight-xl);
  color:             var(--text-primary);
  margin:            0;
}
.mc-stat .sign  { color: var(--action-primary); }
.mc-stat .unit  { font-size: 0.32em; opacity: 0.55; }


/* ════════════════════════════════════════════════════════
   FORM (PROPOSED — not in original code)
   Minimum viable forms in Mercure aesthetic.
   ════════════════════════════════════════════════════════ */

.mc-field {
  display:           flex;
  flex-direction:    column;
  gap:               var(--mc-space-2);
}
.mc-field__label {
  font-family:       var(--type-mono);
  font-size:         var(--mc-type-micro);
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    uppercase;
  color:             var(--text-muted);
}
.mc-input,
.mc-textarea,
.mc-select {
  font-family:       var(--type-display);
  font-size:         var(--mc-type-body);
  color:             var(--text-primary);
  background:        var(--surface-glass);
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-md);
  padding:           14px 16px;
  outline:           none;
  transition:
    border-color     var(--mc-dur-micro) var(--mc-ease),
    background       var(--mc-dur-micro) var(--mc-ease),
    box-shadow       var(--mc-dur-micro) var(--mc-ease);
}
.mc-textarea { resize: vertical; min-height: 96px; line-height: var(--mc-leading-body); }
.mc-input::placeholder,
.mc-textarea::placeholder { color: var(--text-muted); }

.mc-input:focus,
.mc-textarea:focus,
.mc-select:focus {
  border-color:      var(--action-primary);
  background:        var(--surface-glass-hover);
  box-shadow:        0 0 0 3px rgba(107, 124, 255, 0.18);
}

.mc-input[aria-invalid="true"],
.mc-textarea[aria-invalid="true"] {
  border-color:      var(--state-error);
  box-shadow:        0 0 0 3px rgba(255, 122, 140, 0.18);
}


/* ════════════════════════════════════════════════════════
   NAV DOCK — floating, hover-expand labels
   ════════════════════════════════════════════════════════ */

.mc-nav {
  position:          fixed;
  top:               18px;
  left:              0;
  right:             0;
  z-index:           60;
  display:           flex;
  justify-content:   center;
  pointer-events:    none;
  padding:           0 var(--mc-space-4);
}
.mc-nav__dock {
  pointer-events:    auto;
  display:           inline-flex;
  align-items:       center;
  gap:               2px;
  padding:           5px;
  background:        var(--mc-glass-bg-strong);
  backdrop-filter:   blur(var(--mc-glass-blur)) saturate(var(--mc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--mc-glass-blur)) saturate(var(--mc-glass-saturate));
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    var(--mc-glass-shadow-rest);
  transition:        background var(--mc-dur-medium) var(--mc-ease),
                     border-color var(--mc-dur-medium) var(--mc-ease);
}
.mc-nav.is-scrolled .mc-nav__dock {
  background:        var(--mc-glass-bg-strong-on);
  border-color:      var(--border-active);
}
.mc-nav__item {
  position:          relative;
  display:           inline-flex;
  align-items:       center;
  gap:               0;
  padding:           9px;
  border-radius:     var(--mc-radius-sm);
  color:             rgba(240, 238, 240, 0.72);
  white-space:       nowrap;
  transition:        gap var(--mc-dur-short) var(--mc-ease-out),
                     color var(--mc-dur-micro) var(--mc-ease),
                     background-color var(--mc-dur-micro) var(--mc-ease);
}
.mc-nav__item svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.mc-nav__item:hover { color: var(--text-on-accent); background: rgba(255, 255, 255, 0.10); }
.mc-nav__label {
  display:           inline-flex;
  align-items:       center;
  font-size:         13px;
  font-weight:       500;
  letter-spacing:    var(--mc-tracking-tight-s);
  max-width:         0;
  opacity:           0;
  overflow:          hidden;
  transition:        max-width var(--mc-dur-short) var(--mc-ease-out),
                     opacity var(--mc-dur-micro) var(--mc-ease);
}
.mc-nav__dock:hover .mc-nav__item  { gap: 8px; }
.mc-nav__dock:hover .mc-nav__label {
  max-width:         140px;
  opacity:           1;
  transition:        max-width var(--mc-dur-short) var(--mc-ease-out),
                     opacity var(--mc-dur-micro) var(--mc-ease) 80ms;
}


/* ════════════════════════════════════════════════════════
   LAYOUT helpers
   ════════════════════════════════════════════════════════ */

.mc-container {
  max-width:         var(--mc-container-max);
  margin:            0 auto;
  padding:           0 var(--mc-container-padding);
}
.mc-section {
  padding:           var(--mc-space-10) 0;
}
.mc-section--hero {
  padding:           var(--mc-space-11) 0;
}


/* ════════════════════════════════════════════════════════
   DECORATIVE BACKGROUNDS — reusable
   ════════════════════════════════════════════════════════ */

.mc-bg-radial-center {
  background:
    radial-gradient(900px 600px at 50% 50%, var(--signature-glow), transparent 60%);
}
.mc-bg-radial-split {
  background:
    radial-gradient(900px 500px at 15% 30%, rgba(107, 124, 255, 0.10), transparent 60%),
    radial-gradient(700px 400px at 90% 80%, rgba(184, 140, 255, 0.08), transparent 60%);
}
.mc-bg-grain {
  background-image:  radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size:   3px 3px;
}


/* ════════════════════════════════════════════════════════
   FORM · RADIO
   Custom indicator. Native input visually hidden but
   keyboard / a11y semantics preserved.
   Markup: <label class="mc-radio"><input type="radio"><span class="mc-radio__dot"></span><span class="mc-radio__label">…</span></label>
   ════════════════════════════════════════════════════════ */

.mc-radio,
.mc-check,
.mc-switch {
  display:           inline-flex;
  align-items:       center;
  gap:               var(--mc-space-3);
  cursor:            pointer;
  user-select:       none;
  color:             var(--text-primary);
  font-family:       var(--type-display);
  font-size:         var(--mc-type-body);
}
.mc-radio input,
.mc-check input,
.mc-switch input {
  position:          absolute;
  width:             1px; height: 1px;
  overflow:          hidden;
  clip:              rect(0 0 0 0);
  white-space:       nowrap;
  border:            0;
}

.mc-radio__dot {
  width: 18px; height: 18px;
  border-radius:     50%;
  border:            1.5px solid var(--border-active);
  background:        var(--surface-glass);
  display:           grid;
  place-items:       center;
  transition:
    border-color     var(--mc-dur-micro) var(--mc-ease),
    box-shadow       var(--mc-dur-micro) var(--mc-ease);
}
.mc-radio__dot::after {
  content:           "";
  width: 8px; height: 8px;
  border-radius:     50%;
  background:        var(--action-primary);
  box-shadow:        0 0 10px var(--signature-glow);
  transform:         scale(0);
  transition:        transform var(--mc-dur-micro) var(--mc-ease-spring);
}
.mc-radio input:checked + .mc-radio__dot {
  border-color:      var(--action-primary);
}
.mc-radio input:checked + .mc-radio__dot::after {
  transform:         scale(1);
}
.mc-radio input:focus-visible + .mc-radio__dot,
.mc-check input:focus-visible + .mc-check__box,
.mc-switch input:focus-visible + .mc-switch__track {
  box-shadow:        0 0 0 3px rgba(107, 124, 255, 0.30);
}


/* ════════════════════════════════════════════════════════
   FORM · CHECKBOX
   ════════════════════════════════════════════════════════ */

.mc-check__box {
  width: 18px; height: 18px;
  border-radius:     6px;
  border:            1.5px solid var(--border-active);
  background:        var(--surface-glass);
  display:           grid;
  place-items:       center;
  color:             var(--text-on-accent);
  transition:
    background       var(--mc-dur-micro) var(--mc-ease),
    border-color     var(--mc-dur-micro) var(--mc-ease),
    box-shadow       var(--mc-dur-micro) var(--mc-ease);
}
.mc-check__box svg {
  width: 12px; height: 12px;
  stroke:            currentColor;
  stroke-width:      2.5;
  fill:              none;
  stroke-linecap:    round;
  stroke-linejoin:   round;
  opacity:           0;
  transform:         scale(0.6);
  transition:
    opacity          var(--mc-dur-micro) var(--mc-ease),
    transform        var(--mc-dur-micro) var(--mc-ease-spring);
}
.mc-check input:checked + .mc-check__box {
  background:        var(--action-primary);
  border-color:      var(--action-primary);
  box-shadow:        0 0 14px var(--signature-glow);
}
.mc-check input:checked + .mc-check__box svg {
  opacity:           1;
  transform:         scale(1);
}


/* ════════════════════════════════════════════════════════
   FORM · SWITCH
   ════════════════════════════════════════════════════════ */

.mc-switch__track {
  position:          relative;
  width: 40px; height: 22px;
  border-radius:     var(--mc-radius-full);
  background:        var(--surface-glass);
  border:            1px solid var(--border-active);
  transition:
    background       var(--mc-dur-short) var(--mc-ease),
    border-color     var(--mc-dur-short) var(--mc-ease);
}
.mc-switch__track::after {
  content:           "";
  position:          absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius:     50%;
  background:        var(--text-primary);
  transition:        transform var(--mc-dur-short) var(--mc-ease-spring),
                     background var(--mc-dur-short) var(--mc-ease);
}
.mc-switch input:checked + .mc-switch__track {
  background:        var(--action-primary);
  border-color:      var(--action-primary);
  box-shadow:        0 0 18px var(--signature-glow);
}
.mc-switch input:checked + .mc-switch__track::after {
  transform:         translateX(18px);
  background:        var(--text-on-accent);
}


/* ════════════════════════════════════════════════════════
   FORM · SLIDER (range)
   Tokens-driven custom thumb. WebKit + Firefox.
   ════════════════════════════════════════════════════════ */

.mc-slider {
  -webkit-appearance: none;
  appearance:        none;
  width:             100%;
  height:            6px;
  background:        var(--surface-glass);
  border:            1px solid var(--border-subtle);
  border-radius:     var(--mc-radius-full);
  outline:           none;
  transition:        border-color var(--mc-dur-micro) var(--mc-ease);
}
.mc-slider:focus-visible {
  border-color:      var(--action-primary);
}
.mc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius:     50%;
  background:        var(--action-primary);
  border:            2px solid var(--text-on-accent);
  cursor:            grab;
  box-shadow:        0 0 14px var(--signature-glow);
  transition:        transform var(--mc-dur-micro) var(--mc-ease-spring);
}
.mc-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius:     50%;
  background:        var(--action-primary);
  border:            2px solid var(--text-on-accent);
  cursor:            grab;
  box-shadow:        0 0 14px var(--signature-glow);
}
.mc-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }


/* ════════════════════════════════════════════════════════
   DATA · TABLE
   Dense, sortable look. Row hover. Mono numbers.
   ════════════════════════════════════════════════════════ */

.mc-table {
  width:             100%;
  border-collapse:   collapse;
  font-size:         var(--mc-type-small);
  color:             var(--text-body);
}
.mc-table thead th {
  text-align:        left;
  padding:           var(--mc-space-3) var(--mc-space-4);
  font-family:       var(--type-mono);
  font-size:         var(--mc-type-micro);
  letter-spacing:    var(--mc-tracking-wide-s);
  text-transform:    uppercase;
  color:             var(--text-muted);
  font-weight:       500;
  border-bottom:     1px solid var(--border-active);
  background:        transparent;
  white-space:       nowrap;
}
.mc-table tbody td {
  padding:           var(--mc-space-3) var(--mc-space-4);
  border-bottom:     1px solid var(--border-subtle);
  vertical-align:    middle;
}
.mc-table tbody tr {
  transition:        background var(--mc-dur-micro) var(--mc-ease);
}
.mc-table tbody tr:hover {
  background:        var(--surface-glass-hover);
}
.mc-table .mc-td--num {
  font-family:       var(--type-mono);
  font-variant-numeric: tabular-nums;
  text-align:        right;
  color:             var(--text-primary);
}
.mc-table .mc-td--strong {
  color:             var(--text-primary);
  font-weight:       500;
}


/* ════════════════════════════════════════════════════════
   DATA · BADGE
   Smaller than pill, for counts and inline status.
   ════════════════════════════════════════════════════════ */

.mc-badge {
  display:           inline-flex;
  align-items:       center;
  justify-content:   center;
  min-width:         18px;
  height:            18px;
  padding:           0 6px;
  border-radius:     var(--mc-radius-full);
  background:        var(--action-primary);
  color:             var(--text-on-accent);
  font-family:       var(--type-mono);
  font-variant-numeric: tabular-nums;
  font-size:         10px;
  font-weight:       500;
  letter-spacing:    -0.01em;
  box-shadow:        0 0 12px var(--signature-glow);
}
.mc-badge--brand   { background: var(--brand-mark); box-shadow: 0 0 12px rgba(184,140,255,0.45); }
.mc-badge--data    { background: var(--data-signal); color: #0a0b10; box-shadow: 0 0 12px rgba(77,214,255,0.40); }
.mc-badge--success { background: var(--state-success); color: #0a0b10; }
.mc-badge--warn    { background: var(--state-warn); color: #0a0b10; }
.mc-badge--error   { background: var(--state-error); }
.mc-badge--ghost   { background: var(--surface-glass); color: var(--text-body); border: 1px solid var(--border-subtle); box-shadow: none; }


/* ════════════════════════════════════════════════════════
   DATA · SKELETON
   Loading placeholder with shimmer.
   ════════════════════════════════════════════════════════ */

@keyframes mc-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
.mc-skeleton {
  position:          relative;
  display:           block;
  background:        var(--surface-glass);
  border-radius:     var(--mc-radius-md);
  overflow:          hidden;
  min-height:        16px;
}
.mc-skeleton::after {
  content:           "";
  position:          absolute;
  inset:             0;
  background:        linear-gradient(90deg,
                       transparent 0%,
                       rgba(255,255,255,0.06) 50%,
                       transparent 100%);
  animation:         mc-shimmer 1.6s var(--mc-ease) infinite;
}
.mc-skeleton--text  { height: 14px; border-radius: var(--mc-radius-xs); }
.mc-skeleton--title { height: 28px; border-radius: var(--mc-radius-xs); }
.mc-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.mc-skeleton--block { min-height: 120px; border-radius: var(--mc-radius-xl); }


/* ════════════════════════════════════════════════════════
   DATA · AVATAR
   Circle with monogram fallback or image.
   ════════════════════════════════════════════════════════ */

.mc-avatar {
  position:          relative;
  display:           inline-grid;
  place-items:       center;
  width:             40px;
  height:            40px;
  border-radius:     50%;
  background:        linear-gradient(140deg, rgba(107,124,255,0.18) 0%, rgba(184,140,255,0.18) 100%);
  border:            1px solid var(--border-subtle);
  color:             var(--text-primary);
  font-family:       var(--type-display);
  font-weight:       500;
  font-size:         14px;
  letter-spacing:    -0.02em;
  text-transform:    uppercase;
  overflow:          hidden;
}
.mc-avatar img {
  position:          absolute;
  inset:             0;
  width:             100%;
  height:            100%;
  object-fit:        cover;
}
.mc-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.mc-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.mc-avatar--status::after {
  content:           "";
  position:          absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius:     50%;
  background:        var(--state-success);
  box-shadow:        0 0 6px var(--state-success);
  outline:           2px solid var(--surface-page);
}
.mc-avatar-group {
  display:           inline-flex;
}
.mc-avatar-group .mc-avatar + .mc-avatar {
  margin-left:       -12px;
  outline:           2px solid var(--surface-page);
}


/* ════════════════════════════════════════════════════════
   DATA · EMPTY / ERROR STATES
   ════════════════════════════════════════════════════════ */

.mc-state {
  display:           flex;
  flex-direction:    column;
  align-items:       center;
  justify-content:   center;
  text-align:        center;
  gap:               var(--mc-space-4);
  padding:           var(--mc-space-9) var(--mc-space-5);
  background:        var(--surface-glass);
  border:            1px dashed var(--border-active);
  border-radius:     var(--mc-radius-xl);
  color:             var(--text-body);
}
.mc-state__icon {
  display:           grid;
  place-items:       center;
  width:             48px;
  height:            48px;
  border-radius:     50%;
  background:        var(--surface-glass-hover);
  color:             var(--text-muted);
}
.mc-state__icon svg {
  width: 22px; height: 22px;
  stroke:            currentColor;
  fill:              none;
  stroke-width:      1.6;
  stroke-linecap:    round;
  stroke-linejoin:   round;
}
.mc-state__title {
  font-family:       var(--type-display);
  font-size:         var(--mc-type-display-s);
  font-weight:       500;
  color:             var(--text-primary);
  margin:            0;
  letter-spacing:    var(--mc-tracking-tight-m);
}
.mc-state__lead {
  max-width:         420px;
  font-size:         var(--mc-type-body);
  line-height:       var(--mc-leading-body);
  color:             var(--text-body);
  margin:            0;
}
.mc-state--error {
  border-color:      var(--state-error);
}
.mc-state--error .mc-state__icon {
  background:        rgba(255, 122, 140, 0.12);
  color:             var(--state-error);
}


/* ════════════════════════════════════════════════════════
   ICON · helper class
   Lucide-style — 18px default, currentColor, stroke 1.6
   ════════════════════════════════════════════════════════ */

.mc-icon {
  width: 18px; height: 18px;
  stroke:            currentColor;
  fill:              none;
  stroke-width:      1.6;
  stroke-linecap:    round;
  stroke-linejoin:   round;
  flex-shrink:       0;
}
.mc-icon--sm { width: 14px; height: 14px; }
.mc-icon--lg { width: 22px; height: 22px; }
.mc-icon--xl { width: 28px; height: 28px; }


/* ════════════════════════════════════════════════════════
   THEME TOGGLE
   Small circular button used in the nav dock.
   ════════════════════════════════════════════════════════ */

.mc-theme-toggle {
  display:           grid;
  place-items:       center;
  width:             36px;
  height:            36px;
  border-radius:     50%;
  border:            1px solid var(--border-subtle);
  background:        var(--surface-glass);
  color:             var(--text-body);
  transition:
    background       var(--mc-dur-micro) var(--mc-ease),
    border-color     var(--mc-dur-micro) var(--mc-ease),
    color            var(--mc-dur-micro) var(--mc-ease);
}
.mc-theme-toggle:hover {
  background:        var(--surface-glass-hover);
  border-color:      var(--border-brand);
  color:             var(--text-primary);
}
.mc-theme-toggle .mc-theme-toggle__sun,
.mc-theme-toggle .mc-theme-toggle__moon {
  display:           none;
}
[data-theme="light"] .mc-theme-toggle .mc-theme-toggle__moon { display: block; }
[data-theme="dark"]  .mc-theme-toggle .mc-theme-toggle__sun  { display: block; }
:root:not([data-theme]) .mc-theme-toggle .mc-theme-toggle__sun { display: block; }


/* ════════════════════════════════════════════════════════
   SIGNATURE — breathing halo (for the M filigrane usage)
   ════════════════════════════════════════════════════════ */

@keyframes mc-breathing {
  0%, 100% { filter: drop-shadow(0 0 7px  rgba(184, 140, 255, 0.20)); }
  50%      { filter: drop-shadow(0 0 18px rgba(184, 140, 255, 0.34)); }
}
.mc-breathing {
  animation: mc-breathing var(--mc-dur-ambient) ease-in-out infinite;
}