@rookcom/monarch-react 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,1984 @@
+/*! Monarch components. Generated by @rookcom/monarch-react. Do not edit. */
+@layer monarch.tokens, monarch.base, monarch.components;
+
+@layer monarch.components {
+  /* 00-foundation.css */
+  /* Shared component foundations. */
+  .mn-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;
+  }
+
+  .mn-button,
+  .mn-input,
+  .mn-checkbox,
+  .mn-switch,
+  .mn-tabs__trigger,
+  .mn-dialog__close {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .mn-button:focus-visible,
+  .mn-input:focus-visible,
+  .mn-checkbox:focus-visible,
+  .mn-switch:focus-visible,
+  .mn-tabs__trigger:focus-visible,
+  .mn-dialog__close:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  @keyframes mn-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes mn-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes mn-pop-in {
+    from {
+      opacity: 0;
+      transform: translateY(-2px) scale(0.98);
+    }
+  }
+  @keyframes mn-dialog-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, calc(-50% + 6px)) scale(0.98);
+    }
+  }
+  @keyframes mn-shimmer {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.55;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  /* 10-button.css */
+  .mn-button {
+    --_bg: var(--mn-color-bg-surface);
+    --_bg-hover: var(--mn-color-bg-muted);
+    --_bg-active: var(--mn-color-bg-emphasis);
+    --_fg: var(--mn-color-text-default);
+    --_border: var(--mn-color-border-default);
+    --_h: var(--mn-control-md);
+    --_px: var(--mn-space-3);
+    --_fs: var(--mn-text-sm);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1-5);
+    height: var(--_h);
+    padding-inline: var(--_px);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-md);
+    background: var(--_bg);
+    color: var(--_fg);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--_fs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-button:hover {
+    background: var(--_bg-hover);
+  }
+  .mn-button:active {
+    background: var(--_bg-active);
+  }
+
+  .mn-button[data-variant='primary'] {
+    --_bg: var(--mn-color-accent-solid);
+    --_bg-hover: var(--mn-color-accent-solid-hover);
+    --_bg-active: var(--mn-color-accent-solid-active);
+    --_fg: var(--mn-color-accent-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='secondary'] {
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='ghost'] {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+  .mn-button[data-variant='danger'] {
+    --_bg: var(--mn-color-danger-solid);
+    --_bg-hover: var(--mn-color-danger-solid-hover);
+    --_bg-active: var(--mn-color-danger-solid-active);
+    --_fg: var(--mn-color-danger-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='danger-subtle'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_bg-hover: var(--mn-color-danger-subtle-hover);
+    --_bg-active: var(--mn-color-danger-subtle-hover);
+    --_fg: var(--mn-color-danger-strong);
+    --_border: var(--mn-color-danger-border);
+  }
+
+  .mn-button[data-size='xs'] {
+    --_h: var(--mn-control-xs);
+    --_px: var(--mn-space-2);
+    --_fs: var(--mn-text-xs);
+    border-radius: var(--mn-radius-sm);
+  }
+  .mn-button[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    --_px: var(--mn-space-2-5);
+    --_fs: var(--mn-text-xs);
+  }
+  .mn-button[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+    --_px: var(--mn-space-4);
+  }
+  .mn-button[data-block] {
+    display: flex;
+    width: 100%;
+  }
+
+  .mn-button[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  .mn-button:disabled,
+  .mn-button[aria-disabled='true']:not([data-loading]) {
+    opacity: 0.5;
+  }
+  .mn-button[data-loading] {
+    cursor: progress;
+  }
+  .mn-button:disabled:hover,
+  .mn-button[aria-disabled='true']:hover {
+    background: var(--_bg);
+  }
+
+  .mn-button__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline: calc(var(--mn-space-0-5) * -1);
+  }
+  .mn-button__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .mn-icon-button {
+    width: var(--_h);
+    padding: 0;
+  }
+  .mn-icon-button .mn-button__icon {
+    margin: 0;
+  }
+
+  .mn-spinner {
+    --_size: 1rem;
+    display: inline-block;
+    width: var(--_size);
+    height: var(--_size);
+    flex-shrink: 0;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--mn-radius-full);
+    animation: mn-spin 0.7s linear infinite;
+  }
+  .mn-spinner[data-size='sm'] {
+    --_size: 0.875rem;
+  }
+  .mn-spinner[data-size='lg'] {
+    --_size: 1.5rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-spinner {
+      animation-duration: 1.6s;
+    }
+  }
+
+  .mn-kbd {
+    display: inline-flex;
+    align-items: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding-inline: var(--mn-space-1);
+    border: 1px solid var(--mn-color-border-default);
+    border-bottom-width: 2px;
+    border-radius: var(--mn-radius-xs);
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-muted);
+    font-family: var(--mn-font-mono);
+    font-size: var(--mn-text-2xs);
+    line-height: 1;
+  }
+
+  /* 20-forms.css */
+  .mn-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+  }
+  .mn-field__label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--mn-space-1);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-field__required {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-field__optional {
+    color: var(--mn-color-text-subtle);
+    font-weight: var(--mn-weight-regular);
+  }
+  .mn-field__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-field__error {
+    margin: 0;
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-field[data-disabled] .mn-field__label {
+    color: var(--mn-color-text-disabled);
+  }
+
+  .mn-input {
+    --_h: var(--mn-control-md);
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: var(--_h);
+    padding-inline: var(--mn-space-3);
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+    transition:
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-input:hover:not(:disabled):not([data-disabled]) {
+    border-color: var(--mn-color-text-subtle);
+  }
+  .mn-input:focus-visible {
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-input[aria-invalid='true'] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-input:disabled,
+  .mn-input[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-input[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    padding-inline: var(--mn-space-2-5);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-input[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+  }
+
+  .mn-textarea {
+    height: auto;
+    min-height: calc(var(--mn-control-md) * 2);
+    padding-block: var(--mn-space-2);
+    resize: none;
+  }
+  .mn-textarea[data-resizable] {
+    resize: vertical;
+  }
+
+  .mn-select {
+    justify-content: space-between;
+    gap: var(--mn-space-2);
+    cursor: pointer;
+    text-align: start;
+  }
+  .mn-select > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .mn-select[data-placeholder] > span:first-child {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-select__icon {
+    display: inline-flex;
+    color: var(--mn-color-text-muted);
+  }
+  .mn-select__content {
+    min-width: var(--radix-select-trigger-width);
+    max-height: min(var(--radix-select-content-available-height), 20rem);
+  }
+  .mn-select__viewport {
+    padding: var(--mn-space-1);
+  }
+
+  /* Checkbox and switch */
+  .mn-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    padding: 0;
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-xs);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-accent-on-strong);
+    cursor: pointer;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      border-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-checkbox[data-state='checked'],
+  .mn-checkbox[data-state='indeterminate'] {
+    border-color: var(--mn-color-accent-strong);
+    background: var(--mn-color-accent-strong);
+  }
+  .mn-checkbox[aria-invalid='true'] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-checkbox:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .mn-checkbox__indicator {
+    display: inline-flex;
+  }
+  .mn-checkbox__indicator > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: 2.25;
+  }
+
+  .mn-switch {
+    --_w: 2.25rem;
+    --_h: 1.25rem;
+    --_thumb: calc(var(--_h) - 4px);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: var(--_w);
+    height: var(--_h);
+    padding: 0;
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+    cursor: pointer;
+    transition: background-color var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-switch[data-size='sm'] {
+    --_w: 1.75rem;
+    --_h: 1rem;
+  }
+  .mn-switch[data-state='checked'] {
+    border-color: var(--mn-color-accent-strong);
+    background: var(--mn-color-accent-strong);
+  }
+  .mn-switch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .mn-switch__thumb {
+    display: block;
+    width: var(--_thumb);
+    height: var(--_thumb);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-surface);
+    box-shadow: var(--mn-shadow-sm);
+    transform: translateX(1px);
+    transition: transform var(--mn-duration-base) var(--mn-ease-emphasized);
+  }
+  .mn-switch[data-state='checked'] .mn-switch__thumb {
+    transform: translateX(calc(var(--_w) - var(--_thumb) - 5px));
+  }
+
+  .mn-choice {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-2-5);
+  }
+  .mn-choice > .mn-checkbox {
+    margin-top: 0.125rem;
+  }
+  .mn-choice--switch {
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+  }
+  .mn-choice__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-choice__label {
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    cursor: pointer;
+  }
+  .mn-choice__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-choice[data-disabled] .mn-choice__label {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 30-display.css */
+  .mn-badge {
+    --_bg: var(--mn-color-bg-muted);
+    --_fg: var(--mn-color-text-muted);
+    --_border: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    height: 1.375rem;
+    padding-inline: var(--mn-space-2);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-full);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .mn-badge[data-size='sm'] {
+    height: 1.125rem;
+    padding-inline: var(--mn-space-1-5);
+    font-size: var(--mn-text-2xs);
+  }
+  .mn-badge__dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: var(--mn-radius-full);
+    background: currentColor;
+  }
+  .mn-badge[data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-border-default);
+  }
+  .mn-badge[data-variant='outline'][data-tone='neutral'] {
+    --_fg: var(--mn-color-text-muted);
+  }
+  .mn-badge[data-variant='solid'][data-tone='neutral'] {
+    --_bg: var(--mn-color-bg-inverse);
+    --_fg: var(--mn-color-text-inverse);
+  }
+  .mn-badge[data-tone='accent'] {
+    --_bg: var(--mn-color-accent-subtle);
+    --_fg: var(--mn-color-accent-strong);
+  }
+  .mn-badge[data-tone='accent'][data-variant='solid'] {
+    --_bg: var(--mn-color-accent-solid);
+    --_fg: var(--mn-color-accent-on-solid);
+  }
+  .mn-badge[data-tone='accent'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-accent-border);
+  }
+  .mn-badge[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+  }
+  .mn-badge[data-tone='info'][data-variant='solid'] {
+    --_bg: var(--mn-color-info-solid);
+    --_fg: var(--mn-color-info-on-solid);
+  }
+  .mn-badge[data-tone='info'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-info-border);
+  }
+  .mn-badge[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+  }
+  .mn-badge[data-tone='success'][data-variant='solid'] {
+    --_bg: var(--mn-color-success-solid);
+    --_fg: var(--mn-color-success-on-solid);
+  }
+  .mn-badge[data-tone='success'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-success-border);
+  }
+  .mn-badge[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+  }
+  .mn-badge[data-tone='warning'][data-variant='solid'] {
+    --_bg: var(--mn-color-warning-solid);
+    --_fg: var(--mn-color-warning-on-solid);
+  }
+  .mn-badge[data-tone='warning'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-warning-border);
+  }
+  .mn-badge[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+  }
+  .mn-badge[data-tone='danger'][data-variant='solid'] {
+    --_bg: var(--mn-color-danger-solid);
+    --_fg: var(--mn-color-danger-on-solid);
+  }
+  .mn-badge[data-tone='danger'][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--mn-color-danger-border);
+  }
+
+  .mn-avatar {
+    --_size: 2rem;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--_size);
+    height: var(--_size);
+    overflow: hidden;
+    border-radius: var(--mn-radius-full);
+    /* Fallback colours derive from a per-name hue, kept soft so initials stay readable. */
+    background: hsl(var(--mn-avatar-hue, 220) 45% 92%);
+    color: hsl(var(--mn-avatar-hue, 220) 55% 28%);
+    font-size: calc(var(--_size) * 0.4);
+    font-weight: var(--mn-weight-semibold);
+    user-select: none;
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-avatar {
+    background: hsl(var(--mn-avatar-hue, 220) 30% 22%);
+    color: hsl(var(--mn-avatar-hue, 220) 60% 85%);
+  }
+  .mn-avatar[data-shape='square'] {
+    border-radius: var(--mn-radius-md);
+  }
+  .mn-avatar[data-size='xs'] {
+    --_size: 1.25rem;
+  }
+  .mn-avatar[data-size='sm'] {
+    --_size: 1.5rem;
+  }
+  .mn-avatar[data-size='lg'] {
+    --_size: 2.5rem;
+  }
+  .mn-avatar[data-size='xl'] {
+    --_size: 3.5rem;
+  }
+  .mn-avatar__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .mn-card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+  }
+  .mn-card[data-variant='raised'] {
+    border-color: var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-raised);
+    box-shadow: var(--mn-shadow-md);
+  }
+  .mn-card[data-variant='subtle'] {
+    border-color: transparent;
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-5) var(--mn-space-5) 0;
+  }
+  .mn-card__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-card__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-card__content {
+    padding: var(--mn-space-5);
+  }
+  .mn-card__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-card[data-flush] > .mn-card__content {
+    padding: 0;
+  }
+
+  .mn-skeleton {
+    display: block;
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+    animation: mn-shimmer 1.6s var(--mn-ease-standard) infinite;
+  }
+  .mn-skeleton[data-shape='text'] {
+    height: 0.75em;
+    border-radius: var(--mn-radius-xs);
+  }
+  .mn-skeleton[data-shape='circle'] {
+    border-radius: var(--mn-radius-full);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-skeleton {
+      animation: none;
+    }
+  }
+
+  .mn-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--mn-space-2);
+    max-width: 28rem;
+    margin-inline: auto;
+    padding: var(--mn-space-8) var(--mn-space-4);
+    text-align: center;
+  }
+  .mn-empty-state[data-size='page'] {
+    padding-block: var(--mn-space-20);
+  }
+  .mn-empty-state__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: var(--mn-space-2);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-empty-state__icon > svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .mn-empty-state__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+  }
+  .mn-empty-state__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+  }
+  .mn-empty-state__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--mn-space-2);
+    margin-top: var(--mn-space-3);
+  }
+
+  .mn-alert {
+    --_bg: var(--mn-color-bg-subtle);
+    --_fg: var(--mn-color-text-muted);
+    --_border: var(--mn-color-border-default);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-3);
+    padding: var(--mn-space-3) var(--mn-space-4);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-lg);
+    background: var(--_bg);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-alert__icon {
+    display: inline-flex;
+    margin-top: 0.125rem;
+    color: var(--_fg);
+  }
+  .mn-alert__body {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-alert__title {
+    margin: 0;
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-alert__content {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-alert__title + .mn-alert__content {
+    margin-top: var(--mn-space-0-5);
+  }
+  .mn-alert__actions {
+    display: flex;
+    gap: var(--mn-space-2);
+    align-self: center;
+  }
+  .mn-alert[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    --_border: var(--mn-color-info-border);
+  }
+  .mn-alert[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+    --_border: var(--mn-color-success-border);
+  }
+  .mn-alert[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+    --_border: var(--mn-color-warning-border);
+  }
+  .mn-alert[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+    --_border: var(--mn-color-danger-border);
+  }
+
+  /* 40-overlays.css */
+  .mn-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--mn-z-overlay);
+    background: var(--mn-color-overlay-scrim);
+    animation: mn-fade-in var(--mn-duration-base) var(--mn-ease-enter);
+  }
+
+  .mn-dialog {
+    --_w: 32rem;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: var(--mn-z-modal);
+    display: flex;
+    flex-direction: column;
+    width: min(var(--_w), calc(100vw - 2rem));
+    max-height: calc(100dvh - 2rem);
+    overflow: hidden;
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-xl);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-xl);
+    transform: translate(-50%, -50%);
+    animation: mn-dialog-in var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-dialog:focus-visible {
+    outline: none;
+  }
+  .mn-dialog[data-size='sm'] {
+    --_w: 24rem;
+  }
+  .mn-dialog[data-size='lg'] {
+    --_w: 44rem;
+  }
+  .mn-dialog[data-size='xl'] {
+    --_w: 60rem;
+  }
+  .mn-dialog__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-5) var(--mn-space-12) 0 var(--mn-space-5);
+  }
+  .mn-dialog__title {
+    margin: 0;
+    font-size: var(--mn-text-lg);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-dialog__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-dialog__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--mn-space-5);
+  }
+  .mn-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-dialog__close {
+    position: absolute;
+    top: var(--mn-space-3);
+    right: var(--mn-space-3);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-sm);
+    height: var(--mn-control-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-md);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-dialog__close:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+
+  /* Menus: shared by DropdownMenu and Select. */
+  .mn-menu {
+    z-index: var(--mn-z-dropdown);
+    min-width: 12rem;
+    max-width: min(22rem, calc(100vw - 2rem));
+    padding: var(--mn-space-1);
+    overflow: hidden;
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    animation: mn-pop-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+  .mn-menu__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-height: var(--mn-control-sm);
+    padding: var(--mn-space-1-5) var(--mn-space-2);
+    border-radius: var(--mn-radius-sm);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-snug);
+    cursor: default;
+    outline: none;
+    user-select: none;
+  }
+  .mn-menu__item[data-highlighted] {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-menu__item[data-disabled] {
+    color: var(--mn-color-text-disabled);
+    pointer-events: none;
+  }
+  .mn-menu__item[data-tone='danger'] {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-menu__item[data-tone='danger'][data-highlighted] {
+    background: var(--mn-color-danger-subtle);
+  }
+  .mn-menu__icon {
+    display: inline-flex;
+    color: var(--mn-color-text-muted);
+  }
+  .mn-menu__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-menu__text {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-menu__shortcut {
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+    letter-spacing: var(--mn-tracking-wide);
+  }
+  .mn-menu__indicator {
+    display: inline-flex;
+    margin-inline-start: auto;
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-menu__label {
+    padding: var(--mn-space-1-5) var(--mn-space-2) var(--mn-space-1);
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-menu__separator {
+    height: 1px;
+    margin: var(--mn-space-1) calc(var(--mn-space-1) * -1);
+    background: var(--mn-color-border-subtle);
+  }
+
+  .mn-popover {
+    z-index: var(--mn-z-popover);
+    width: max-content;
+    max-width: min(24rem, calc(100vw - 2rem));
+    padding: var(--mn-space-4);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    animation: mn-pop-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+  .mn-popover:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+  }
+
+  .mn-tooltip {
+    z-index: var(--mn-z-tooltip);
+    max-width: 18rem;
+    padding: var(--mn-space-1) var(--mn-space-2);
+    border-radius: var(--mn-radius-sm);
+    background: var(--mn-color-bg-inverse);
+    color: var(--mn-color-text-inverse);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-snug);
+    box-shadow: var(--mn-shadow-md);
+    animation: mn-fade-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+
+  /* 50-navigation.css */
+  .mn-tabs__list {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-tabs__list[data-variant='line'] {
+    gap: var(--mn-space-4);
+    border-bottom: 1px solid var(--mn-color-border-default);
+  }
+  .mn-tabs__list[data-variant='pill'] {
+    display: inline-flex;
+    padding: var(--mn-space-0-5);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-tabs__trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1-5);
+    height: var(--mn-control-md);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-tabs__trigger:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-tabs__trigger[data-state='active'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-tabs__trigger[data-disabled] {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  [data-variant='line'] > .mn-tabs__trigger::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: -1px;
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+    background: transparent;
+    transition: background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  [data-variant='line'] > .mn-tabs__trigger[data-state='active']::after {
+    background: var(--mn-color-accent-strong);
+  }
+  [data-variant='pill'] > .mn-tabs__trigger {
+    height: calc(var(--mn-control-md) - 0.375rem);
+    padding-inline: var(--mn-space-3);
+    border-radius: var(--mn-radius-sm);
+  }
+  [data-variant='pill'] > .mn-tabs__trigger[data-state='active'] {
+    background: var(--mn-color-bg-surface);
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-tabs__content {
+    padding-top: var(--mn-space-4);
+  }
+  .mn-tabs__content:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* 60-data.css */
+  .mn-table-wrap {
+    width: 100%;
+    overflow: auto;
+  }
+  .mn-table {
+    --_py: var(--mn-space-3);
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-snug);
+    color: var(--mn-color-text-default);
+  }
+  .mn-table[data-density='compact'] {
+    --_py: var(--mn-space-1-5);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-table__caption {
+    padding: var(--mn-space-2) var(--mn-space-3);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    text-align: start;
+    caption-side: bottom;
+  }
+  .mn-table__head {
+    padding: var(--mn-space-2) var(--mn-space-3);
+    border-bottom: 1px solid var(--mn-color-border-default);
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    letter-spacing: var(--mn-tracking-wide);
+    text-align: start;
+    white-space: nowrap;
+  }
+  .mn-table[data-sticky] .mn-table__head {
+    position: sticky;
+    top: 0;
+    z-index: var(--mn-z-raised);
+  }
+  .mn-table__cell {
+    padding: var(--_py) var(--mn-space-3);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+    vertical-align: middle;
+  }
+  .mn-table__head[data-numeric],
+  .mn-table__cell[data-numeric] {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-table__row:hover > .mn-table__cell {
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-table__row[data-selected] > .mn-table__cell {
+    background: var(--mn-color-accent-subtle);
+  }
+  .mn-table__row[data-interactive] {
+    cursor: pointer;
+  }
+  .mn-table__select {
+    width: 2.5rem;
+    padding-inline: var(--mn-space-3);
+  }
+  .mn-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin: calc(var(--mn-space-1) * -1) calc(var(--mn-space-2) * -1);
+    padding: var(--mn-space-1) var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+  }
+  .mn-table__sort:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-table__sort:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-table__sort-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+    opacity: 0.35;
+    transition: transform var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-table__sort[data-direction='ascending'] .mn-table__sort-icon {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+  .mn-table__sort[data-direction='descending'] .mn-table__sort-icon {
+    opacity: 1;
+  }
+
+  .mn-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-pagination__pages {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-0-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-pagination__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--mn-control-sm);
+    height: var(--mn-control-sm);
+    padding-inline: var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-size: var(--mn-text-sm);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+  }
+  .mn-pagination__page:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-pagination__page[aria-current='page'] {
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-pagination__page:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-pagination__gap {
+    padding-inline: var(--mn-space-1);
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-pagination__range {
+    margin: 0 var(--mn-space-2) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .mn-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--mn-text-sm);
+  }
+  .mn-breadcrumb__link {
+    color: var(--mn-color-text-muted);
+    text-decoration: none;
+    border-radius: var(--mn-radius-xs);
+  }
+  .mn-breadcrumb__link:hover {
+    color: var(--mn-color-text-default);
+    text-decoration: underline;
+  }
+  .mn-breadcrumb__link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-breadcrumb__current {
+    color: var(--mn-color-text-default);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-breadcrumb__sep {
+    display: inline-flex;
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-breadcrumb__sep > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-breadcrumb__more {
+    display: inline-flex;
+    align-items: center;
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-1-5);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    cursor: pointer;
+  }
+  .mn-breadcrumb__more:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-breadcrumb__more:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .mn-combobox {
+    position: relative;
+    padding-inline-end: var(--mn-space-1);
+    gap: var(--mn-space-1);
+  }
+  .mn-combobox[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    cursor: not-allowed;
+  }
+  .mn-combobox:focus-within {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-combobox__input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  .mn-combobox__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-combobox__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-xs);
+    height: var(--mn-control-xs);
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-combobox__toggle:hover:not(:disabled) {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-combobox__spinner {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-combobox__content {
+    width: var(--radix-popover-trigger-width, auto);
+    min-width: 12rem;
+    padding: var(--mn-space-1);
+  }
+  .mn-combobox__list {
+    max-height: min(var(--radix-popover-content-available-height, 20rem), 20rem);
+    overflow: auto;
+  }
+  .mn-combobox__list .mn-menu__item {
+    cursor: pointer;
+  }
+  .mn-combobox__list .mn-menu__item[aria-disabled='true'] {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-combobox__description {
+    display: block;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-combobox__status {
+    padding: var(--mn-space-3) var(--mn-space-2);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    text-align: center;
+  }
+
+  /* 70-feedback.css */
+  .mn-toast-viewport {
+    position: fixed;
+    z-index: var(--mn-z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+    width: min(24rem, calc(100vw - 2rem));
+    max-height: 100vh;
+    margin: 0;
+    padding: var(--mn-space-4);
+    list-style: none;
+    outline: none;
+  }
+  .mn-toast-viewport[data-position='bottom-right'] {
+    right: 0;
+    bottom: 0;
+  }
+  .mn-toast-viewport[data-position='bottom-center'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .mn-toast-viewport[data-position='top-right'] {
+    top: 0;
+    right: 0;
+  }
+  .mn-toast {
+    --_accent: var(--mn-color-border-strong);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-3);
+    padding: var(--mn-space-3) var(--mn-space-3) var(--mn-space-3) var(--mn-space-4);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-inline-start: 3px solid var(--_accent);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-lg);
+    font-size: var(--mn-text-sm);
+    animation: mn-toast-in var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-toast[data-state='closed'] {
+    animation: mn-toast-out var(--mn-duration-base) var(--mn-ease-exit) forwards;
+  }
+  .mn-toast[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+  .mn-toast[data-swipe='end'] {
+    animation: mn-toast-out var(--mn-duration-base) var(--mn-ease-exit) forwards;
+  }
+  .mn-toast[data-tone='info'] {
+    --_accent: var(--mn-color-info-strong);
+  }
+  .mn-toast[data-tone='success'] {
+    --_accent: var(--mn-color-success-strong);
+  }
+  .mn-toast[data-tone='warning'] {
+    --_accent: var(--mn-color-warning-strong);
+  }
+  .mn-toast[data-tone='danger'] {
+    --_accent: var(--mn-color-danger-strong);
+  }
+  .mn-toast__icon {
+    display: inline-flex;
+    margin-top: 0.125rem;
+    color: var(--_accent);
+  }
+  .mn-toast__body {
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-toast__title {
+    margin: 0;
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-toast__description {
+    margin: var(--mn-space-0-5) 0 0;
+    color: var(--mn-color-text-muted);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-toast__action {
+    align-self: center;
+  }
+  .mn-toast__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-xs);
+    height: var(--mn-control-xs);
+    margin: calc(var(--mn-space-1) * -1) calc(var(--mn-space-1) * -1) 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-toast__close:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-toast__close:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @keyframes mn-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+  }
+  @keyframes mn-toast-out {
+    to {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-toast,
+    .mn-toast[data-state='closed'] {
+      animation-duration: 0.01ms;
+    }
+  }
+
+  .mn-progress {
+    --_h: 0.5rem;
+    --_fill: var(--mn-color-accent-strong);
+    position: relative;
+    width: 100%;
+    height: var(--_h);
+    overflow: hidden;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+  }
+  .mn-progress[data-size='sm'] {
+    --_h: 0.25rem;
+  }
+  .mn-progress[data-tone='success'] {
+    --_fill: var(--mn-color-success-strong);
+  }
+  .mn-progress[data-tone='warning'] {
+    --_fill: var(--mn-color-warning-strong);
+  }
+  .mn-progress[data-tone='danger'] {
+    --_fill: var(--mn-color-danger-strong);
+  }
+  .mn-progress__bar {
+    height: 100%;
+    border-radius: inherit;
+    background: var(--_fill);
+    transition: width var(--mn-duration-slow) var(--mn-ease-standard);
+  }
+  .mn-progress[data-indeterminate] .mn-progress__bar {
+    width: 40%;
+    animation: mn-progress-slide 1.4s var(--mn-ease-standard) infinite;
+  }
+  @keyframes mn-progress-slide {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(250%);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-progress[data-indeterminate] .mn-progress__bar {
+      animation-duration: 3s;
+    }
+  }
+
+  .mn-separator {
+    flex-shrink: 0;
+    background: var(--mn-color-border-default);
+  }
+  .mn-separator[data-orientation='horizontal'] {
+    width: 100%;
+    height: 1px;
+  }
+  .mn-separator[data-orientation='vertical'] {
+    width: 1px;
+    height: 100%;
+    min-height: 1em;
+  }
+
+  .mn-link {
+    display: inline;
+    align-items: center;
+    gap: var(--mn-space-1);
+    border-radius: var(--mn-radius-xs);
+    color: var(--mn-color-text-link);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+    text-underline-offset: 0.15em;
+    transition: text-decoration-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-link:hover {
+    text-decoration-color: currentColor;
+  }
+  .mn-link[data-variant='standalone'] {
+    display: inline-flex;
+    font-weight: var(--mn-weight-medium);
+    text-decoration: none;
+  }
+  .mn-link[data-variant='standalone']:hover {
+    text-decoration: underline;
+  }
+  .mn-link[data-variant='subtle'] {
+    color: var(--mn-color-text-muted);
+    text-decoration: none;
+  }
+  .mn-link[data-variant='subtle']:hover {
+    color: var(--mn-color-text-default);
+    text-decoration: underline;
+  }
+  .mn-link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-link__external {
+    display: inline-flex;
+    margin-inline-start: 0.2em;
+    vertical-align: -0.05em;
+  }
+
+  /* 80-patterns.css */
+  .mn-page-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+    padding-bottom: var(--mn-space-4);
+  }
+  .mn-page-header__eyebrow {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+  .mn-page-header__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mn-space-3) var(--mn-space-6);
+  }
+  .mn-page-header__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    min-width: 0;
+  }
+  .mn-page-header__title-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-page-header__title {
+    margin: 0;
+    font-size: var(--mn-text-2xl);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: var(--mn-leading-tight);
+  }
+  .mn-page-header__description {
+    margin: 0;
+    max-width: var(--mn-layout-reading-max);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-page-header__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-page-header__tabs {
+    margin-bottom: calc(var(--mn-space-4) * -1);
+  }
+
+  .mn-toolbar-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+  }
+  .mn-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-toolbar__search {
+    flex: 1 1 14rem;
+    min-width: 10rem;
+    max-width: 24rem;
+  }
+  .mn-toolbar__group {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+  }
+  .mn-toolbar__end {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin-inline-start: auto;
+  }
+
+  .mn-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-1-5);
+  }
+  .mn-filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-2) var(--mn-space-1);
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-surface);
+    font-size: var(--mn-text-xs);
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .mn-filter-chip__name {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-filter-chip__name::after {
+    content: ':';
+  }
+  .mn-filter-chip__value {
+    color: var(--mn-color-text-default);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-filter-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-full);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+  }
+  .mn-filter-chip__remove > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-filter-chip__remove:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-filter-chip__remove:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 1px;
+  }
+  .mn-filter-bar__clear {
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-2);
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-link);
+    font: inherit;
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    cursor: pointer;
+  }
+  .mn-filter-bar__clear:hover {
+    background: var(--mn-color-accent-subtle);
+  }
+  .mn-filter-bar__clear:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .mn-settings-section {
+    display: grid;
+    gap: var(--mn-space-4);
+  }
+  @media (min-width: 1024px) {
+    .mn-settings-section {
+      grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+      gap: var(--mn-space-8);
+    }
+  }
+  .mn-settings-section__title {
+    margin: 0;
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+  }
+  .mn-settings-section__description {
+    margin: var(--mn-space-1) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-settings-section__card {
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+  }
+  .mn-settings-section[data-tone='danger'] .mn-settings-section__card {
+    border-color: var(--mn-color-danger-border);
+  }
+  .mn-settings-section[data-tone='danger'] .mn-settings-section__title {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-settings-section__body {
+    display: flex;
+    flex-direction: column;
+  }
+  .mn-settings-section__body > * + * {
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-settings-section__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-3) var(--mn-space-5);
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+    border-radius: 0 0 var(--mn-radius-lg) var(--mn-radius-lg);
+  }
+  .mn-settings-row {
+    display: grid;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-4) var(--mn-space-5);
+  }
+  @media (min-width: 768px) {
+    .mn-settings-row {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
+      align-items: center;
+      gap: var(--mn-space-6);
+    }
+  }
+  .mn-settings-row__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+  }
+  .mn-settings-row__control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+  }
+
+  .mn-dl {
+    display: grid;
+    gap: var(--mn-space-4) var(--mn-space-6);
+    margin: 0;
+  }
+  .mn-dl[data-columns='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .mn-dl[data-columns='3'] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  @media (max-width: 640px) {
+    .mn-dl {
+      grid-template-columns: 1fr;
+    }
+  }
+  .mn-dl__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-dl__item[data-wide] {
+    grid-column: 1 / -1;
+  }
+  .mn-dl[data-layout='inline'] .mn-dl__item {
+    flex-direction: row;
+    gap: var(--mn-space-3);
+  }
+  .mn-dl[data-layout='inline'] .mn-dl__term {
+    flex: 0 0 9rem;
+  }
+  .mn-dl__term {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    letter-spacing: var(--mn-tracking-wide);
+  }
+  .mn-dl__value {
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .mn-split {
+    --_list: 22rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
+    height: 100%;
+  }
+  .mn-split[data-list-width='sm'] {
+    --_list: 18rem;
+  }
+  .mn-split[data-list-width='lg'] {
+    --_list: 28rem;
+  }
+  .mn-split__list,
+  .mn-split__detail {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+  .mn-split__list {
+    border-inline-end: 1px solid var(--mn-color-border-default);
+  }
+  .mn-split__back {
+    padding: var(--mn-space-2);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+  }
+  @media (max-width: 767px) {
+    .mn-split__detail {
+      display: none;
+    }
+    .mn-split[data-detail-open] .mn-split__list {
+      display: none;
+    }
+    .mn-split[data-detail-open] .mn-split__detail {
+      display: block;
+    }
+  }
+  @media (min-width: 768px) {
+    .mn-split {
+      grid-template-columns: var(--_list) minmax(0, 1fr);
+    }
+    .mn-split__back {
+      display: none;
+    }
+  }
+
+  .mn-stat {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+    padding: var(--mn-space-4) var(--mn-space-5);
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+  }
+  .mn-stat__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    min-width: 0;
+  }
+  .mn-stat__label {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-stat__value {
+    margin: 0;
+    font-size: var(--mn-text-2xl);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: var(--mn-leading-tight);
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-stat__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    margin: 0;
+    font-size: var(--mn-text-xs);
+  }
+  .mn-stat__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-0-5);
+    font-weight: var(--mn-weight-medium);
+    color: var(--mn-color-text-muted);
+  }
+  .mn-stat__delta[data-tone='success'] {
+    color: var(--mn-color-success-strong);
+  }
+  .mn-stat__delta[data-tone='danger'] {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-stat__caption {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-stat__visual {
+    flex-shrink: 0;
+    color: var(--mn-color-accent-strong);
+  }
+
+  .mn-error-state .mn-empty-state__icon {
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+  }
+
+  .mn-loading-state {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+  }
+  .mn-loading-state[data-variant='cards'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  }
+  .mn-loading-state__row {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-3);
+  }
+  .mn-loading-state__lines {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+  }
+}