@mercury-fx/ui 2.4.0

package/src/styles/mercury.css

@@ -0,0 +1,676 @@
+/*
+  Mercury Design System — Component layer.
+  Companion to tokens.css. Every rule reads the semantic tokens defined there
+  (rgb(var(--token))) so components respond to .dark-theme / .light-theme.
+
+  Class names mirror the Mercury component library 1:1 (.mx-btn, .mx-in, …),
+  so React/HTML markup maps directly onto the Svelte sources.
+*/
+
+/* ============================================================
+   BUTTON  .mx-btn
+   ============================================================ */
+.mx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: var(--radius-8);
+  border: 1px solid transparent;
+  font-family: var(--font-primary);
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
+  white-space: nowrap;
+}
+.mx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-btn:active:not(:disabled) { transform: scale(0.98); }
+.mx-btn.is-full { width: 100%; }
+
+.mx-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-6); }
+.mx-btn--md { height: 40px; padding: 0 18px; font-size: 14px; }
+.mx-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: var(--radius-12); }
+
+.mx-btn--primary { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); }
+.mx-btn--primary:hover:not(:disabled) { background: rgb(var(--bg-brand-hover)); }
+.mx-btn--primary:active:not(:disabled) { background: rgb(var(--bg-brand-pressed)); }
+
+.mx-btn--secondary { background: rgb(var(--bg-secondary)); color: rgb(var(--fg-primary)); border-color: rgb(var(--border-primary)); }
+.mx-btn--secondary:hover:not(:disabled) { background: rgb(var(--bg-tertiary)); }
+
+.mx-btn--ghost { background: transparent; color: rgb(var(--fg-primary)); }
+.mx-btn--ghost:hover:not(:disabled) { background: rgb(var(--bg-hover)); }
+.mx-btn--ghost:active:not(:disabled) { background: rgb(var(--bg-pressed)); }
+
+.mx-btn--danger { background: rgb(var(--bg-negative)); color: rgb(var(--fg-on-negative)); }
+.mx-btn--danger:hover:not(:disabled) { filter: brightness(0.94); }
+
+.mx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.mx-btn__icon { display: inline-flex; align-items: center; }
+.mx-btn__icon--trail { margin-left: -2px; }
+.mx-btn__spin {
+  width: 14px; height: 14px; border-radius: 50%;
+  border: 2px solid currentColor; border-top-color: transparent;
+  animation: mx-spin 0.7s linear infinite;
+}
+@keyframes mx-spin { to { transform: rotate(360deg); } }
+
+/* ============================================================
+   INPUT  .mx-in
+   ============================================================ */
+.mx-in { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 320px; }
+.mx-in__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
+.mx-in__req { color: rgb(var(--fg-negative)); }
+.mx-in__field {
+  display: inline-flex; align-items: center; height: 40px;
+  border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
+  transition: box-shadow 140ms ease;
+}
+.mx-in__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-in--err .mx-in__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
+.mx-in--err .mx-in__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)), 0 0 0 3px rgb(var(--ring-negative)); }
+.mx-in--dis .mx-in__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
+.mx-in__inp {
+  flex: 1; min-width: 0; height: 100%; padding: 0 14px;
+  border: 0; outline: 0; background: transparent;
+  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
+}
+.mx-in__inp::placeholder { color: rgb(var(--fg-tertiary)); }
+.mx-in__inp:disabled { cursor: not-allowed; }
+.mx-in__aff { display: inline-flex; align-items: center; color: rgb(var(--fg-tertiary)); font-size: 14px; }
+.mx-in__aff--lead { padding-left: 12px; }
+.mx-in__aff--trail { padding-right: 12px; }
+.mx-in__msg { font-size: 12px; color: rgb(var(--fg-secondary)); }
+.mx-in__msg--err { color: rgb(var(--fg-negative)); }
+
+/* ============================================================
+   TEXTAREA  .mx-ta
+   ============================================================ */
+.mx-ta { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 480px; }
+.mx-ta__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
+.mx-ta__req { color: rgb(var(--fg-negative)); }
+.mx-ta__field {
+  border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
+  transition: box-shadow 140ms ease;
+}
+.mx-ta__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-ta--err .mx-ta__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
+.mx-ta--dis .mx-ta__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
+.mx-ta__inp {
+  display: block; width: 100%; padding: 12px 14px;
+  border: 0; outline: 0; background: transparent;
+  color: rgb(var(--fg-primary)); font: 400 14px/1.5 var(--font-primary); resize: none;
+}
+.mx-ta__field.is-resize .mx-ta__inp { resize: vertical; }
+.mx-ta__inp::placeholder { color: rgb(var(--fg-tertiary)); }
+.mx-ta__foot { display: flex; justify-content: space-between; font: 500 12px/1.4 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-ta__msg--err { color: rgb(var(--fg-negative)); }
+.mx-ta__count { font-family: var(--font-secondary); color: rgb(var(--fg-tertiary)); }
+.mx-ta__count.is-over { color: rgb(var(--fg-negative)); }
+
+/* ============================================================
+   SELECT  .mx-sl
+   ============================================================ */
+.mx-sl { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-primary); width: 100%; max-width: 320px; }
+.mx-sl__lbl { font-size: 13px; font-weight: 500; color: rgb(var(--fg-secondary)); }
+.mx-sl__req { color: rgb(var(--fg-negative)); }
+.mx-sl__field {
+  position: relative; height: 40px;
+  border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
+  transition: box-shadow 140ms ease;
+}
+.mx-sl__field:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-sl--err .mx-sl__field { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
+.mx-sl--dis .mx-sl__field { background: rgb(var(--bg-disabled)); opacity: 0.7; }
+.mx-sl__sel {
+  width: 100%; height: 100%; padding: 0 40px 0 14px;
+  border: 0; outline: 0; background: transparent;
+  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
+  appearance: none; -webkit-appearance: none; cursor: pointer;
+}
+.mx-sl__sel:disabled { cursor: not-allowed; }
+.mx-sl__sel option { color: rgb(var(--fg-primary)); background: rgb(var(--bg-elevated)); }
+.mx-sl__chev {
+  position: absolute; top: 50%; inset-inline-end: 14px;
+  transform: translateY(-75%) rotate(45deg);
+  width: 8px; height: 8px;
+  border-right: 2px solid rgb(var(--fg-secondary));
+  border-bottom: 2px solid rgb(var(--fg-secondary));
+  pointer-events: none;
+}
+.mx-sl__msg { font-size: 12px; color: rgb(var(--fg-secondary)); }
+.mx-sl__msg--err { color: rgb(var(--fg-negative)); }
+
+/* ============================================================
+   SEARCH  .mx-sr
+   ============================================================ */
+.mx-sr {
+  position: relative; display: inline-flex; align-items: center;
+  width: 100%; max-width: 320px; height: 40px; padding: 0 14px;
+  border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
+  font-family: var(--font-primary); transition: box-shadow 140ms ease;
+}
+.mx-sr:focus-within { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-sr--dis { opacity: 0.6; background: rgb(var(--bg-disabled)); }
+.mx-sr__icon { color: rgb(var(--fg-tertiary)); display: inline-flex; margin-right: 10px; }
+.mx-sr__inp {
+  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
+  color: rgb(var(--fg-primary)); font: 500 14px/1 var(--font-primary);
+}
+.mx-sr__inp::placeholder { color: rgb(var(--fg-tertiary)); }
+.mx-sr__inp::-webkit-search-cancel-button { display: none; }
+.mx-sr__x {
+  width: 20px; height: 20px; margin-inline-start: 8px;
+  border: 0; background: rgb(var(--bg-tertiary)); color: rgb(var(--fg-secondary));
+  border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.mx-sr__x:hover { background: rgb(var(--bg-hover)); color: rgb(var(--fg-primary)); }
+
+/* ============================================================
+   CHECKBOX  .mx-cb
+   ============================================================ */
+.mx-cb {
+  display: inline-flex; align-items: center; gap: 8px;
+  font: 500 13px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
+  cursor: pointer; user-select: none; position: relative;
+}
+.mx-cb input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
+.mx-cb__box {
+  width: 16px; height: 16px; border-radius: var(--radius-4);
+  background: rgb(var(--bg-primary)); color: rgb(var(--fg-on-brand));
+  display: inline-flex; align-items: center; justify-content: center;
+  box-shadow: inset 0 0 0 1.5px rgb(var(--border-primary));
+  transition: box-shadow 120ms ease, background 120ms ease; flex-shrink: 0;
+}
+.mx-cb input:focus-visible ~ .mx-cb__box { box-shadow: inset 0 0 0 1.5px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-cb input:checked ~ .mx-cb__box,
+.mx-cb input:indeterminate ~ .mx-cb__box { background: rgb(var(--bg-brand)); box-shadow: inset 0 0 0 1.5px rgb(var(--bg-brand)); }
+.mx-cb--dis { opacity: 0.45; cursor: not-allowed; }
+.mx-cb__lbl a { color: rgb(var(--fg-brand)); }
+
+/* ============================================================
+   RADIO  .mx-rd
+   ============================================================ */
+.mx-rd {
+  display: inline-flex; align-items: center; gap: 8px;
+  font: 500 13px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
+  cursor: pointer; user-select: none; position: relative;
+}
+.mx-rd input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
+.mx-rd__ring {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: rgb(var(--bg-primary));
+  box-shadow: inset 0 0 0 1.5px rgb(var(--border-primary));
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: box-shadow 120ms ease; flex-shrink: 0;
+}
+.mx-rd__dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--bg-primary)); transform: scale(0); transition: transform 120ms ease; }
+.mx-rd input:checked ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--bg-brand)); }
+.mx-rd input:checked ~ .mx-rd__ring .mx-rd__dot { transform: scale(1); }
+.mx-rd input:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 1.5px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-rd input:checked:focus-visible ~ .mx-rd__ring { box-shadow: inset 0 0 0 5px rgb(var(--bg-brand)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-rd--dis { opacity: 0.45; cursor: not-allowed; }
+
+/* ============================================================
+   SWITCH  .mx-sw
+   ============================================================ */
+.mx-sw {
+  display: inline-flex; align-items: center; gap: 10px;
+  font: 500 14px/1.4 var(--font-primary); color: rgb(var(--fg-primary));
+  cursor: pointer; user-select: none; position: relative;
+}
+.mx-sw input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
+.mx-sw__track {
+  width: 38px; height: 22px; border-radius: var(--radius-full);
+  background: rgb(var(--bg-brand)); position: relative;
+  transition: background 140ms ease, box-shadow 140ms ease; flex-shrink: 0;
+}
+.mx-sw__thumb {
+  position: absolute; top: 2px; inset-inline-start: 18px;
+  width: 18px; height: 18px; border-radius: 50%;
+  background: rgb(var(--slate-1)); box-shadow: 0 1px 3px rgb(28 32 36 / 0.25);
+  transition: inset-inline-start 140ms ease;
+}
+.mx-sw--off .mx-sw__track { background: rgb(var(--slate-7)); }
+.mx-sw--off .mx-sw__thumb { inset-inline-start: 2px; }
+.mx-sw input:focus-visible ~ .mx-sw__track { box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-sw--dis { opacity: 0.45; cursor: not-allowed; }
+
+/* ============================================================
+   SEGMENTED  .mx-seg
+   ============================================================ */
+.mx-seg {
+  display: inline-flex; padding: 3px; gap: 2px;
+  background: rgb(var(--bg-tertiary)); border-radius: var(--radius-8);
+  font-family: var(--font-primary);
+}
+.mx-seg.is-full { display: flex; width: 100%; }
+.mx-seg.is-full .mx-seg__seg { flex: 1; }
+.mx-seg__seg {
+  border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-6);
+  color: rgb(var(--fg-secondary)); font: 500 13px/1 var(--font-primary);
+  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; white-space: nowrap;
+}
+.mx-seg--sm .mx-seg__seg { padding: 5px 10px; font-size: 12px; }
+.mx-seg--md .mx-seg__seg { padding: 7px 14px; }
+.mx-seg--lg .mx-seg__seg { padding: 9px 18px; font-size: 14px; }
+.mx-seg__seg:hover:not(:disabled) { color: rgb(var(--fg-primary)); }
+.mx-seg__seg.is-active { background: rgb(var(--bg-primary)); color: rgb(var(--fg-primary)); box-shadow: var(--shadow-100); }
+.mx-seg__seg:disabled { opacity: 0.4; cursor: not-allowed; }
+.mx-seg__seg:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--ring-focus)); }
+
+/* ============================================================
+   SLIDER  .mx-sd
+   ============================================================ */
+.mx-sd { display: block; font-family: var(--font-primary); width: 100%; max-width: 320px; }
+.mx-sd__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.mx-sd__lbl { font: 500 13px/1 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-sd__val { font: 500 13px/1 var(--font-secondary); color: rgb(var(--fg-primary)); }
+.mx-sd__track { position: relative; height: 18px; display: flex; align-items: center; }
+.mx-sd__track::before, .mx-sd__track::after {
+  content: ""; position: absolute; height: 4px; border-radius: var(--radius-full);
+  top: 50%; transform: translateY(-50%); pointer-events: none;
+}
+.mx-sd__track::before { inset-inline: 0; background: rgb(var(--bg-tertiary)); }
+.mx-sd__track::after { inset-inline-start: 0; width: var(--mx-pct, 0%); background: rgb(var(--bg-brand)); }
+.mx-sd--sm .mx-sd__track::before, .mx-sd--sm .mx-sd__track::after { height: 2px; }
+.mx-sd__inp {
+  appearance: none; -webkit-appearance: none; width: 100%; height: 18px;
+  background: transparent; margin: 0; padding: 0; cursor: pointer; position: relative; z-index: 2;
+}
+.mx-sd__inp::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
+  background: rgb(var(--bg-primary)); box-shadow: inset 0 0 0 3px rgb(var(--bg-brand)), var(--shadow-100);
+  cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease;
+}
+.mx-sd__inp::-moz-range-thumb {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: rgb(var(--bg-primary)); border: 3px solid rgb(var(--bg-brand)); cursor: pointer;
+}
+.mx-sd__inp:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 3px rgb(var(--bg-brand)), 0 0 0 4px rgb(var(--ring-focus)); }
+.mx-sd__inp:disabled { cursor: not-allowed; }
+.mx-sd--dis { opacity: 0.5; }
+
+/* ============================================================
+   AUTH CODE  .mx-auth
+   ============================================================ */
+.mx-auth { font-family: var(--font-primary); }
+.mx-auth__row { display: inline-flex; gap: 8px; }
+.mx-auth__cell {
+  width: 44px; height: 52px; border: 0; outline: 0; border-radius: var(--radius-8);
+  background: rgb(var(--bg-primary)); box-shadow: inset 0 0 0 1px rgb(var(--border-primary));
+  text-align: center; font: 700 20px/1 var(--font-secondary); color: rgb(var(--fg-primary));
+  transition: box-shadow 140ms ease;
+}
+.mx-auth__cell:focus { box-shadow: inset 0 0 0 2px rgb(var(--border-focus)), 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-auth--err .mx-auth__cell { box-shadow: inset 0 0 0 2px rgb(var(--border-negative)); }
+.mx-auth--dis { opacity: 0.6; }
+.mx-auth__msg { margin-top: 8px; font: 500 12px/1.4 var(--font-primary); color: rgb(var(--fg-negative)); }
+
+/* ============================================================
+   ALERT  .mx-alt
+   ============================================================ */
+.mx-alt {
+  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-12);
+  font-family: var(--font-primary); max-width: 480px; border: 1px solid transparent;
+}
+.mx-alt__icon {
+  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font: 700 13px/1 var(--font-secondary); color: rgb(var(--slate-1));
+}
+.mx-alt__body { flex: 1; min-width: 0; }
+.mx-alt__h { margin: 0 0 4px; font: 600 14px/1.3 var(--font-primary); }
+.mx-alt__msg { font: 400 13px/1.5 var(--font-primary); }
+.mx-alt__x {
+  border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
+  color: inherit; opacity: 0.6; padding: 0; width: 22px; height: 22px; border-radius: 50%;
+  transition: opacity 120ms ease, background 120ms ease;
+}
+.mx-alt__x:hover { opacity: 1; background: rgb(var(--bg-hover)); }
+.mx-alt--info { background: rgb(var(--bg-info-subtle)); color: rgb(var(--fg-info)); }
+.mx-alt--info .mx-alt__icon { background: rgb(var(--bg-info)); }
+.mx-alt--success { background: rgb(var(--bg-positive-subtle)); color: rgb(var(--fg-positive)); }
+.mx-alt--success .mx-alt__icon { background: rgb(var(--bg-positive)); }
+.mx-alt--warning { background: rgb(var(--bg-caution-subtle)); color: rgb(var(--fg-caution)); }
+.mx-alt--warning .mx-alt__icon { background: rgb(var(--bg-caution)); color: rgb(var(--slate-12)); }
+.mx-alt--danger { background: rgb(var(--bg-negative-subtle)); color: rgb(var(--fg-negative)); }
+.mx-alt--danger .mx-alt__icon { background: rgb(var(--bg-negative)); }
+
+/* ============================================================
+   PROGRESS  .mx-pr
+   ============================================================ */
+.mx-pr { width: 100%; font-family: var(--font-primary); }
+.mx-pr__track { width: 100%; background: rgb(var(--bg-tertiary)); border-radius: var(--radius-full); overflow: hidden; }
+.mx-pr__bar { height: 100%; border-radius: var(--radius-full); transition: width 300ms ease; }
+.mx-pr--sm .mx-pr__track { height: 4px; }
+.mx-pr--md .mx-pr__track { height: 6px; }
+.mx-pr--lg .mx-pr__track { height: 10px; }
+.mx-pr--brand .mx-pr__bar { background: rgb(var(--bg-brand)); }
+.mx-pr--positive .mx-pr__bar { background: rgb(var(--bg-positive)); }
+.mx-pr--negative .mx-pr__bar { background: rgb(var(--bg-negative)); }
+.mx-pr--caution .mx-pr__bar { background: rgb(var(--bg-caution)); }
+.mx-pr--info .mx-pr__bar { background: rgb(var(--bg-info)); }
+.mx-pr.is-indet .mx-pr__bar { width: 40%; animation: mx-pr-sweep 1.2s ease-in-out infinite; }
+@keyframes mx-pr-sweep { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }
+
+/* ============================================================
+   BUTTON — extra variants (outline, inverse, destructive)
+   ============================================================ */
+.mx-btn--outline { background: transparent; color: rgb(var(--fg-primary)); border-color: rgb(var(--border-primary)); }
+.mx-btn--outline:hover:not(:disabled) { background: rgb(var(--bg-hover)); }
+.mx-btn--outline:active:not(:disabled) { background: rgb(var(--bg-pressed)); }
+.mx-btn--inverse { background: rgb(var(--bg-inverse)); color: rgb(var(--fg-inverse)); }
+.mx-btn--inverse:hover:not(:disabled) { background: rgb(var(--bg-inverse-hover)); }
+.mx-btn--destructive { background: rgb(var(--bg-negative)); color: rgb(var(--fg-on-negative)); }
+.mx-btn--destructive:hover:not(:disabled) { filter: brightness(0.94); }
+
+/* ============================================================
+   CHIP  .mx-chip
+   ============================================================ */
+.mx-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 26px; padding: 0 10px; border-radius: 6px;
+  font: 600 12px/1 var(--font-primary); letter-spacing: 0.02px;
+  border: 1px solid transparent; white-space: nowrap;
+}
+.mx-chip--sm { height: 22px; padding: 0 8px; font-size: 11px; border-radius: 4px; }
+.mx-chip--lg { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
+.mx-chip--neutral   { background: rgb(var(--bg-secondary));        color: rgb(var(--fg-primary));   border-color: rgb(var(--border-primary)); }
+.mx-chip--brand     { background: rgb(var(--bg-brand-subtle));     color: rgb(var(--fg-brand)); }
+.mx-chip--positive  { background: rgb(var(--bg-positive-subtle));  color: rgb(var(--fg-positive)); }
+.mx-chip--negative  { background: rgb(var(--bg-negative-subtle));  color: rgb(var(--fg-negative)); }
+.mx-chip--caution   { background: rgb(var(--bg-caution-subtle));   color: rgb(var(--fg-caution)); }
+.mx-chip--info      { background: rgb(var(--bg-info-subtle));      color: rgb(var(--fg-info)); }
+.mx-chip--discovery { background: rgb(var(--bg-discovery-subtle)); color: rgb(var(--fg-discovery)); }
+.mx-chip--selectable { cursor: pointer; transition: background .12s ease, color .12s ease; }
+.mx-chip.is-selected { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); border-color: transparent; }
+.mx-chip__x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; opacity: 0.7; }
+.mx-chip__x:hover { opacity: 1; }
+
+/* ============================================================
+   BADGE  .mx-badge (count pills)
+   ============================================================ */
+.mx-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 20px; min-width: 20px; padding: 0 7px; border-radius: 9999px;
+  font: 700 11px/1 var(--font-primary); color: rgb(var(--fg-on-negative));
+}
+.mx-badge--sm { height: 16px; min-width: 16px; padding: 0 5px; font-size: 10px; }
+.mx-badge--lg { height: 24px; min-width: 24px; padding: 0 9px; font-size: 12px; }
+.mx-badge--brand    { background: rgb(var(--bg-brand)); color: rgb(var(--fg-on-brand)); }
+.mx-badge--negative { background: rgb(var(--bg-negative)); }
+.mx-badge--positive { background: rgb(var(--bg-positive)); }
+.mx-badge--caution  { background: rgb(var(--bg-caution)); color: rgb(var(--slate-12)); }
+.mx-badge--info     { background: rgb(var(--bg-info)); }
+
+/* ============================================================
+   AVATAR  .mx-avatar  (size + bg color set inline — data-driven)
+   ============================================================ */
+.mx-avatar { position: relative; display: inline-flex; flex-shrink: 0; }
+.mx-avatar__img {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
+  color: rgb(var(--fg-on-brand)); font-family: var(--font-primary);
+  font-weight: 600; letter-spacing: -0.02em;
+}
+.mx-avatar__img img { width: 100%; height: 100%; object-fit: cover; }
+.mx-avatar__status { position: absolute; bottom: 0; right: 0; border-radius: 50%; border: 2px solid rgb(var(--bg-primary)); }
+
+/* ============================================================
+   CARD  .mx-card
+   ============================================================ */
+.mx-card { background: rgb(var(--bg-primary)); border: 1px solid rgb(var(--border-secondary)); border-radius: 12px; }
+.mx-card--raised { box-shadow: var(--shadow-200); }
+.mx-card--floating { box-shadow: var(--shadow-400); }
+.mx-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
+.mx-card__title { font-family: var(--font-secondary); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--fg-tertiary)); }
+.mx-card__actions { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); }
+
+/* ============================================================
+   TABS  .mx-tabs / .mx-tab
+   ============================================================ */
+.mx-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgb(var(--border-secondary)); }
+.mx-tab {
+  border: 0; background: transparent; cursor: pointer; padding: 12px 14px;
+  font: 500 14px/1 var(--font-primary); color: rgb(var(--fg-secondary));
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+  transition: color .12s ease, border-color .12s ease;
+}
+.mx-tab:hover { color: rgb(var(--fg-primary)); }
+.mx-tab.is-active { color: rgb(var(--fg-primary)); font-weight: 600; border-bottom-color: rgb(var(--bg-brand)); }
+.mx-tabs--pills { display: inline-flex; padding: 4px; background: rgb(var(--bg-secondary)); border-radius: 10px; gap: 2px; border: 0; }
+.mx-tabs--pills .mx-tab { padding: 8px 14px; border-radius: 7px; border: 0; margin: 0; font-size: 13px; }
+.mx-tabs--pills .mx-tab:hover { color: rgb(var(--fg-primary)); }
+.mx-tabs--pills .mx-tab.is-active { background: rgb(var(--bg-primary)); box-shadow: var(--shadow-100); border: 0; }
+
+/* ============================================================
+   MODAL  .mx-modal
+   ============================================================ */
+.mx-modal-backdrop {
+  position: absolute; inset: 0; z-index: 100;
+  background: rgb(var(--bg-backdrop));
+  display: flex; align-items: center; justify-content: center; padding: 16px;
+  animation: mx-fade-in 120ms ease;
+}
+.mx-modal {
+  background: rgb(var(--bg-elevated)); border-radius: 14px;
+  box-shadow: var(--shadow-500); width: 100%; max-width: 520px;
+  border: 1px solid rgb(var(--border-secondary));
+  animation: mx-pop-in 140ms cubic-bezier(.2,.8,.2,1);
+}
+.mx-modal--sm { max-width: 400px; }
+.mx-modal--lg { max-width: 720px; }
+.mx-modal__head { padding: 18px 24px 12px; display: flex; align-items: center; justify-content: space-between; }
+.mx-modal__title { font: 700 18px/1.3 var(--font-primary); margin: 0; letter-spacing: -0.01em; }
+.mx-modal__x { border: 0; background: transparent; color: rgb(var(--fg-secondary)); cursor: pointer; padding: 4px; display: inline-flex; border-radius: 6px; }
+.mx-modal__x:hover { background: rgb(var(--bg-hover)); }
+.mx-modal__body { padding: 8px 24px 20px; font: 400 14px/22px var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-modal__foot { padding: 16px 24px; border-top: 1px solid rgb(var(--border-secondary)); display: flex; gap: 8px; justify-content: flex-end; }
+@keyframes mx-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes mx-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
+
+/* ============================================================
+   TOOLTIP  .mx-tooltip (CSS hover)
+   ============================================================ */
+.mx-tooltip-wrap { position: relative; display: inline-flex; }
+.mx-tooltip {
+  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
+  background: rgb(var(--bg-inverse)); color: rgb(var(--fg-inverse));
+  padding: 6px 10px; border-radius: 6px; font: 500 12px/1 var(--font-primary);
+  white-space: nowrap; pointer-events: none; z-index: 20; box-shadow: var(--shadow-300);
+  opacity: 0; transition: opacity .12s ease;
+}
+.mx-tooltip-wrap:hover .mx-tooltip { opacity: 1; }
+
+/* ============================================================
+   TABLE  .mx-table
+   ============================================================ */
+.mx-table-wrap { overflow: auto; border: 1px solid rgb(var(--border-secondary)); border-radius: 10px; background: rgb(var(--bg-primary)); }
+.mx-table { width: 100%; border-collapse: collapse; font-family: var(--font-primary); font-size: 13px; }
+.mx-table th {
+  text-align: left; padding: 12px 16px;
+  font: 700 11px/1 var(--font-primary); letter-spacing: 1.5px; text-transform: uppercase;
+  color: rgb(var(--fg-tertiary)); background: rgb(var(--bg-secondary));
+  border-bottom: 1px solid rgb(var(--border-secondary));
+}
+.mx-table th.is-right, .mx-table td.is-right { text-align: right; }
+.mx-table td { padding: 14px 16px; color: rgb(var(--fg-primary)); vertical-align: middle; border-bottom: 1px solid rgb(var(--border-secondary)); }
+.mx-table tbody tr:last-child td { border-bottom: 0; }
+.mx-table--striped tbody tr:nth-child(even) td { background: rgb(var(--bg-secondary) / 0.45); }
+
+/* ============================================================
+   LINK  .mx-link
+   ============================================================ */
+.mx-link {
+  display: inline-flex; align-items: center; gap: 6px;
+  border: 0; background: transparent; padding: 0; cursor: pointer;
+  color: rgb(var(--fg-brand)); font-family: var(--font-primary); font-weight: 600;
+  text-decoration: none;
+}
+.mx-link--md { font-size: 14px; line-height: 1.4; }
+.mx-link--sm { font-size: 13px; line-height: 1.4; }
+.mx-link--muted { color: rgb(var(--fg-tertiary)); }
+.mx-link:hover:not(.is-disabled) { text-decoration: underline; }
+.mx-link:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgb(var(--ring-focus)); }
+.mx-link.is-disabled { color: rgb(var(--fg-tertiary)); cursor: not-allowed; }
+.mx-link__icon { display: inline-flex; align-items: center; }
+
+/* ============================================================
+   DIVIDER  .mx-divider
+   ============================================================ */
+.mx-divider { border: 0; height: 1px; width: 100%; background: rgb(var(--border-secondary)); margin: 0; }
+.mx-divider--v { display: inline-block; width: 1px; height: 100%; min-height: 1em; }
+.mx-divider--label { display: flex; align-items: center; gap: 12px; height: auto; background: none; }
+.mx-divider--label .mx-divider__line { flex: 1; height: 1px; background: rgb(var(--border-secondary)); }
+.mx-divider--label .mx-divider__lbl {
+  font: 500 11px/1 var(--font-primary); letter-spacing: 0.08em; text-transform: uppercase;
+  color: rgb(var(--fg-tertiary)); white-space: nowrap;
+}
+
+/* ============================================================
+   CHECKLIST  .mx-checklist
+   ============================================================ */
+.mx-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.mx-checklist__item {
+  display: flex; align-items: center; gap: 8px;
+  font: 500 13px/1.3 var(--font-primary); color: rgb(var(--fg-tertiary));
+}
+.mx-checklist__mark { width: 14px; display: inline-flex; justify-content: center; }
+.mx-checklist__item.is-met { color: rgb(var(--fg-positive)); }
+
+/* ============================================================
+   PASSWORD STRENGTH  .mx-pwstr
+   ============================================================ */
+.mx-pwstr { display: flex; align-items: center; gap: 12px; }
+.mx-pwstr .mx-pr { flex: 1; }
+.mx-pwstr__lbl { font: 600 12px/1 var(--font-primary); flex-shrink: 0; min-width: 48px; }
+.mx-pwstr__lbl--negative { color: rgb(var(--fg-negative)); }
+.mx-pwstr__lbl--caution  { color: rgb(var(--fg-caution)); }
+.mx-pwstr__lbl--positive { color: rgb(var(--fg-positive)); }
+
+/* ============================================================
+   AUTH LAYOUT  .mx-al
+   ============================================================ */
+.mx-al {
+  display: grid; grid-template-columns: 1.05fr 1fr; height: 100%; min-height: 600px;
+  background: rgb(var(--bg-primary)); color: rgb(var(--fg-primary)); font-family: var(--font-primary);
+}
+.mx-al__brand {
+  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px;
+  background:
+    radial-gradient(120% 80% at 0% 0%, rgb(var(--iris-9) / 0.22), transparent 60%),
+    linear-gradient(160deg, rgb(var(--bg-secondary)), rgb(var(--bg-tertiary)));
+  border-inline-end: 1px solid rgb(var(--border-secondary));
+}
+.mx-al__brandtop { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
+.mx-al__logo { display: inline-flex; color: rgb(var(--iris-9)); }
+.mx-al__wordmark { font: 700 18px/1 var(--font-primary); letter-spacing: -0.01em; }
+.mx-al__badge {
+  font: 600 10px/1 var(--font-secondary); letter-spacing: 0.1em; text-transform: uppercase;
+  color: rgb(var(--fg-on-brand)); background: rgb(var(--iris-9)); padding: 4px 6px; border-radius: 5px;
+}
+.mx-al__brandmid { margin-top: auto; margin-bottom: auto; position: relative; z-index: 2; }
+.mx-al__brandh {
+  margin: 0 0 28px; max-width: 14ch;
+  font: 400 40px/1.08 var(--font-display); letter-spacing: -0.01em; color: rgb(var(--fg-primary));
+}
+.mx-al__feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
+.mx-al__feat li { display: flex; align-items: center; gap: 12px; font: 500 14px/1.4 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-al__check {
+  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: rgb(var(--bg-brand-subtle)); color: rgb(var(--fg-brand)); font: 700 11px/1 var(--font-secondary);
+}
+.mx-al__brandfoot {
+  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
+  padding-top: 24px; border-top: 1px solid rgb(var(--border-secondary));
+}
+.mx-al__statline { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-al__dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--green-9)); box-shadow: 0 0 0 3px rgb(var(--green-9) / 0.2); }
+.mx-al__ver { font: 500 12px/1 var(--font-secondary); color: rgb(var(--fg-tertiary)); }
+.mx-al__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 1; }
+.mx-al__glow--1 { width: 320px; height: 320px; background: rgb(var(--iris-9) / 0.4); top: -80px; right: -60px; }
+.mx-al__glow--2 { width: 260px; height: 260px; background: rgb(var(--indigo-9) / 0.3); bottom: -60px; left: 30px; }
+
+.mx-al__main { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
+.mx-al__form { width: 100%; max-width: 400px; }
+.mx-al__eyebrow {
+  margin: 0 0 10px; font: 600 12px/1 var(--font-secondary);
+  letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--fg-brand));
+}
+.mx-al__h { margin: 0 0 8px; font: 700 28px/1.1 var(--font-primary); letter-spacing: -0.02em; }
+.mx-al__sub { margin: 0 0 28px; font: 400 15px/1.5 var(--font-primary); color: rgb(var(--fg-secondary)); }
+.mx-al__body { display: flex; flex-direction: column; gap: 16px; }
+/* Form controls fill the auth column regardless of their own max-width. */
+.mx-al__body .mx-in,
+.mx-al__body .mx-ta,
+.mx-al__body .mx-sr { max-width: none; width: 100%; }
+.mx-al__foot { margin-top: 28px; }
+
+@media (max-width: 880px) {
+  .mx-al { grid-template-columns: 1fr; }
+  .mx-al__brand { display: none; }
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   CHART  .mx-chart — a token-driven SVG curve/area primitive
+   ════════════════════════════════════════════════════════════════════════ */
+.mx-chart { position: relative; padding-left: 44px; padding-bottom: 22px; }
+.mx-chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }
+.mx-chart__grid { stroke: rgb(var(--border-secondary)); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.mx-chart__marker { stroke: rgb(var(--fg-tertiary)); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
+.mx-chart__marker--solid { stroke-dasharray: none; }
+.mx-chart__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
+.mx-chart__yaxis {
+  position: absolute; left: 0; top: 0; bottom: 22px; width: 40px;
+  display: flex; flex-direction: column; justify-content: space-between;
+  font-family: var(--font-secondary); font-size: 11px; color: rgb(var(--fg-tertiary)); text-align: right;
+}
+.mx-chart__xaxis {
+  position: absolute; left: 44px; right: 0; bottom: 0;
+  display: flex; justify-content: space-between;
+  font-family: var(--font-secondary); font-size: 11px; color: rgb(var(--fg-tertiary));
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   STAT  .mx-stat — a KPI / metric tile
+   ════════════════════════════════════════════════════════════════════════ */
+.mx-stat {
+  display: flex; flex-direction: column; gap: var(--space-6);
+  padding: var(--space-16); border: 1px solid rgb(var(--border-primary));
+  border-radius: var(--radius-12); background: rgb(var(--bg-elevated));
+}
+.mx-stat--center { align-items: center; text-align: center; }
+.mx-stat__head { display: flex; align-items: center; gap: var(--space-6); }
+.mx-stat__icon { color: rgb(var(--fg-brand)); display: inline-flex; }
+.mx-stat__label {
+  font-family: var(--font-primary); font-size: 12px; letter-spacing: 0.02em;
+  text-transform: uppercase; color: rgb(var(--fg-tertiary));
+}
+.mx-stat__value {
+  font-family: var(--font-secondary); font-size: 26px; font-weight: 600; line-height: 1.15;
+  color: rgb(var(--fg-primary)); font-variant-numeric: tabular-nums;
+}
+.mx-stat__foot { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
+.mx-stat__hint { font-family: var(--font-primary); font-size: 12px; color: rgb(var(--fg-secondary)); }
+.mx-stat__delta {
+  font-family: var(--font-secondary); font-size: 12px; font-weight: 600;
+  padding: 2px var(--space-6); border-radius: var(--radius-6);
+}
+.mx-stat__delta--neutral  { background: rgb(var(--bg-secondary));        color: rgb(var(--fg-primary)); }
+.mx-stat__delta--positive { background: rgb(var(--bg-positive-subtle));  color: rgb(var(--fg-positive)); }
+.mx-stat__delta--negative { background: rgb(var(--bg-negative-subtle));  color: rgb(var(--fg-negative)); }
+.mx-stat__delta--caution  { background: rgb(var(--bg-caution-subtle));   color: rgb(var(--fg-caution)); }
+.mx-stat__delta--brand    { background: rgb(var(--bg-brand-subtle));     color: rgb(var(--fg-brand)); }
+.mx-stat__delta--info     { background: rgb(var(--bg-info-subtle));      color: rgb(var(--fg-info)); }