microui-wc 0.1.0

package/src/styles/components.css

@@ -0,0 +1,3677 @@
+/**
+ * microUI Component Styles - Material Design 3
+ * 
+ * Implements authentic MD3 component styling with:
+ * - Pill-shaped buttons (border-radius: 100px)
+ * - State layers for interactive states
+ * - Tonal elevation system
+ * - MD3 typography and spacing
+ * 
+ * Uses tokens from tokens.css
+ */
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* ============================================================================
+   MD3 STATE LAYER UTILITIES (Reusable across components)
+   Reference: https://m3.material.io/foundations/interaction/states
+   
+   Usage: Add .mu-state-layer to any interactive element, then use one of:
+   - .mu-state-layer--surface (for outlined/text buttons, cards)
+   - .mu-state-layer--on-primary (for filled primary buttons)
+   - .mu-state-layer--on-secondary (for tonal buttons)
+   ============================================================================ */
+
+/* Base state layer setup - requires position:relative and overflow:hidden on parent */
+.mu-state-layer {
+    position: relative;
+    overflow: hidden;
+}
+
+.mu-state-layer::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Surface variant (default - for outlined, text, surface elements) */
+.mu-state-layer--surface::before,
+.mu-state-layer:not([class*="mu-state-layer--"])::before {
+    background: var(--md-sys-color-on-surface);
+}
+
+/* On-primary variant (for filled primary bg) */
+.mu-state-layer--on-primary::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+/* On-secondary variant (for tonal/secondary-container bg) */
+.mu-state-layer--on-secondary::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+/* On-error variant (for error buttons) */
+.mu-state-layer--on-error::before {
+    background: var(--md-sys-color-on-error);
+}
+
+/* State opacity changes */
+.mu-state-layer:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-state-layer:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-state-layer:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Disabled state - hide layer */
+.mu-state-layer:disabled::before,
+.mu-state-layer.is-disabled::before {
+    display: none;
+}
+
+/* ============================================================================
+   ICON - Material Symbols Integration
+   ============================================================================ */
+
+mu-icon,
+.mu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    vertical-align: middle;
+}
+
+mu-icon .material-symbols-outlined {
+    font-family: 'Material Symbols Outlined', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+}
+
+mu-icon svg {
+    display: block;
+}
+
+/* ============================================================================
+   BUTTON - MD3 Common Button
+   https://m3.material.io/components/buttons
+   ============================================================================ */
+
+.mu-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 48px;
+    height: 40px;
+    padding: 0 24px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-large-size);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    letter-spacing: 0.1px;
+    text-decoration: none;
+    white-space: nowrap;
+    /* Prevent text wrapping */
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full);
+    cursor: pointer;
+    overflow: hidden;
+    /* Note: hover shadow uses ::before opacity (GPU-composited), not box-shadow transition */
+}
+
+/* State layer overlay */
+.mu-button::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* Sizes */
+.mu-button--sm {
+    height: 32px;
+    padding: 0 16px;
+    font-size: var(--md-sys-typescale-label-medium-size);
+}
+
+.mu-button--md {
+    height: 40px;
+    padding: 0 24px;
+}
+
+.mu-button--lg {
+    height: 48px;
+    padding: 0 32px;
+    font-size: var(--md-sys-typescale-body-large-size);
+}
+
+/* FILLED Button (Primary action) */
+.mu-button--primary {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.mu-button--primary::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+.mu-button--primary:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--primary:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--primary:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-button--primary:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* TONAL Button (Secondary action) */
+.mu-button--secondary {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--secondary::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--secondary:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--secondary:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--secondary:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-button--secondary:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* OUTLINED Button */
+.mu-button--ghost {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    border: 1px solid var(--md-sys-color-outline);
+}
+
+.mu-button--ghost::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--ghost:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--ghost:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+/* ERROR/Danger Button */
+.mu-button--danger {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-button--danger::before {
+    background: var(--md-sys-color-on-error);
+}
+
+.mu-button--danger:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--danger:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+/* Disabled State */
+.mu-button:disabled,
+.mu-button.is-disabled {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.mu-button:disabled::before,
+.mu-button.is-disabled::before {
+    display: none;
+}
+
+/* ==========================================================================
+   MD3 OFFICIAL BUTTON VARIANTS
+   https://m3.material.io/components/buttons/overview
+   ========================================================================== */
+
+/* ELEVATED Button - Surface with shadow */
+.mu-button--elevated {
+    background: var(--md-sys-color-surface-container-low);
+    color: var(--md-sys-color-primary);
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--elevated::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--elevated:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--elevated:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level2);
+}
+
+.mu-button--elevated:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--elevated:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* FILLED Button - Same as primary */
+.mu-button--filled {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.mu-button--filled::before {
+    background: var(--md-sys-color-on-primary);
+}
+
+.mu-button--filled:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--filled:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--filled:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--filled:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* TONAL Button - Secondary container */
+.mu-button--tonal {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--tonal::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-button--tonal:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--tonal:hover:not(:disabled) {
+    box-shadow: var(--md-sys-elevation-level1);
+}
+
+.mu-button--tonal:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--tonal:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* OUTLINED Button - Border only */
+.mu-button--outlined {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    border: 1px solid var(--md-sys-color-outline);
+}
+
+.mu-button--outlined::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--outlined:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--outlined:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--outlined:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* TEXT Button - Minimal, no container */
+.mu-button--text {
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    padding: 0 12px;
+}
+
+.mu-button--text::before {
+    background: var(--md-sys-color-primary);
+}
+
+.mu-button--text:hover:not(:disabled)::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-button--text:focus-visible:not(:disabled)::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-button--text:active:not(:disabled)::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* MD3 Ripple Effect Animation */
+@keyframes md-ripple {
+    from {
+        transform: scale(0);
+        opacity: 0.12;
+    }
+
+    to {
+        transform: scale(2.5);
+        opacity: 0;
+    }
+}
+
+/* Universal Ripple Animation (used by ripple.js) */
+@keyframes mu-ripple-expand {
+    from {
+        transform: scale(0);
+        opacity: 0.20;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+.mu-button.ripple::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: currentColor;
+    transform: scale(0);
+    animation: md-ripple var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Loading State */
+.mu-button.is-loading {
+    color: transparent;
+}
+
+.mu-button.is-loading::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+}
+
+/* ============================================================================
+   INPUT - MD3 Text Field
+   https://m3.material.io/components/text-fields
+   ============================================================================ */
+
+/* Wrapper contains the animated focus indicator */
+.mu-input {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+/* MD3 Floating Label */
+.mu-input__label {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%) scale(1);
+    transform-origin: left center;
+    font-size: 16px;
+    /* Fixed base size - scaling via transform for GPU acceleration */
+    color: var(--md-sys-color-on-surface-variant);
+    pointer-events: none;
+    transition:
+        top var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
+        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
+        color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+    z-index: 1;
+}
+
+/* Floating state - when focused or has value */
+.mu-input:focus-within .mu-input__label,
+.mu-input.has-value .mu-input__label {
+    top: 6px;
+    transform: translateY(0) scale(0.75);
+    /* 12px = 16px * 0.75 - GPU accelerated */
+}
+
+/* Primary color when focused */
+.mu-input:focus-within .mu-input__label {
+    color: var(--md-sys-color-primary);
+}
+
+/* Outlined variant: add background to label for border cutout effect */
+.mu-input--outlined .mu-input__label {
+    background: var(--md-sys-color-surface, #fff);
+    padding: 0 4px;
+    margin-left: -4px;
+}
+
+/* Adjust input padding when label is present */
+.mu-input:has(.mu-input__label) .mu-input__field {
+    padding-top: 24px;
+    padding-bottom: 8px;
+}
+
+/* Animated focus indicator - line expands from center */
+.mu-input::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: var(--md-sys-color-primary);
+    transition:
+        width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
+        left var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Focus state - line expands to full width (supports both JS class and native CSS) */
+.mu-input.is-focused::after,
+.mu-input:focus-within::after {
+    width: 100%;
+    left: 0;
+}
+
+/* Actual input field */
+.mu-input__field {
+    display: block;
+    width: 100%;
+    height: 56px;
+    padding: 16px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    line-height: var(--md-sys-typescale-body-large-line-height);
+    color: var(--md-sys-color-on-surface);
+    background: var(--md-sys-color-surface-container-highest);
+    border: none;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
+    caret-color: var(--md-sys-color-primary);
+    transition:
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-input__field::placeholder {
+    color: var(--md-sys-color-on-surface-variant);
+    transition: opacity var(--md-sys-motion-duration-short2);
+}
+
+.mu-input__field:focus::placeholder {
+    opacity: 0.6;
+}
+
+.mu-input__field:hover:not(:disabled):not(:focus) {
+    background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 95%, var(--md-sys-color-on-surface) 5%);
+    border-bottom-color: var(--md-sys-color-on-surface);
+}
+
+/* Label background must match field on hover (MD3 state layer consistency) */
+.mu-input--outlined:has(.mu-input__field:hover:not(:disabled):not(:focus)) .mu-input__label {
+    background: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 95%, var(--md-sys-color-on-surface) 5%);
+}
+
+.mu-input__field:focus {
+    outline: none;
+    border-bottom-color: transparent;
+    /* Hidden because animated line shows */
+}
+
+/* Sizes */
+.mu-input--sm .mu-input__field {
+    height: 40px;
+    padding: 8px 12px;
+    font-size: var(--md-sys-typescale-body-medium-size);
+}
+
+.mu-input--md .mu-input__field {
+    height: 56px;
+    padding: 16px;
+}
+
+.mu-input--lg .mu-input__field {
+    height: 64px;
+    padding: 20px;
+    font-size: 18px;
+}
+
+/* Filled Variant (default) */
+.mu-input--filled .mu-input__field {
+    background: var(--md-sys-color-surface-container-highest);
+}
+
+/* Outlined Variant */
+.mu-input--outlined .mu-input__field {
+    height: 56px;
+    padding: 16px;
+    background: transparent;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    transition:
+        border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-input--outlined .mu-input__field:hover:not(:disabled):not(:focus) {
+    border-color: var(--md-sys-color-on-surface);
+}
+
+.mu-input--outlined .mu-input__field:focus {
+    border-color: var(--md-sys-color-primary);
+    /* Use box-shadow inset to simulate 2px border without layout shift */
+    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
+    outline: none;
+}
+
+/* Outlined doesn't use the bottom line indicator */
+.mu-input--outlined::after {
+    display: none;
+}
+
+/* Disabled */
+.mu-input.is-disabled .mu-input__field,
+.mu-input__field:disabled {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    cursor: not-allowed;
+}
+
+/* ============================================================================
+   NUMBER INPUT - MD3 Style (hide browser spinners)
+   ============================================================================ */
+
+/* Hide native spinners - Chrome, Safari, Edge, Opera */
+.mu-input__field[type="number"]::-webkit-inner-spin-button,
+.mu-input__field[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Hide native spinners - Firefox */
+.mu-input__field[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+}
+
+/* ============================================================================
+   CARD - MD3 Card Container
+   https://m3.material.io/components/cards
+   ============================================================================ */
+
+.mu-card {
+    display: block;
+    border-radius: var(--md-sys-shape-corner-medium);
+    overflow: hidden;
+    padding: 20px;
+    /* MD3: 20dp default padding */
+}
+
+/* Filled Card (default) - Surface container highest */
+.mu-card--flat,
+.mu-card--filled {
+    background: var(--md-sys-color-surface-container-highest);
+    box-shadow: none;
+}
+
+/* Elevated Card - Surface with Level1 elevation */
+.mu-card--elevated {
+    background: var(--md-sys-color-surface-container-low);
+    box-shadow: var(--md-sys-elevation-level1);
+    /* GPU-composited hover: use transform instead of box-shadow transition */
+    transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* GPU-composited hover effect - subtle lift instead of shadow change */
+.mu-card--elevated:hover {
+    transform: translateY(-2px);
+}
+
+/* Outlined Card - Surface with border */
+.mu-card--outlined {
+    background: var(--md-sys-color-surface);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    box-shadow: none;
+}
+
+/* Card Padding Variants - MD3 standard: 16-24dp depending on content */
+.mu-card--padding-none {
+    padding: 0;
+}
+
+.mu-card--padding-sm {
+    padding: 12px;
+}
+
+.mu-card--padding-md {
+    padding: 20px;
+    /* MD3: 20dp for comfortable content spacing */
+}
+
+.mu-card--padding-lg {
+    padding: 28px;
+    /* MD3: 28dp for prominent cards */
+}
+
+/* Card Radius Variants */
+.mu-card--radius-none {
+    border-radius: 0;
+}
+
+.mu-card--radius-sm {
+    border-radius: var(--md-sys-shape-corner-small);
+}
+
+.mu-card--radius-md {
+    border-radius: var(--md-sys-shape-corner-medium);
+}
+
+.mu-card--radius-lg {
+    border-radius: var(--md-sys-shape-corner-large);
+}
+
+.mu-card--radius-full {
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+/* Clickable Card with state layer */
+.mu-card--clickable {
+    cursor: pointer;
+    position: relative;
+    /* Note: hover effect uses ::before opacity (GPU-composited), not box-shadow transition */
+}
+
+.mu-card--clickable::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2);
+    pointer-events: none;
+}
+
+.mu-card--clickable:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-card--clickable:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Card internal elements (optional) */
+.mu-card__header {
+    padding: 16px;
+    padding-bottom: 0;
+}
+
+.mu-card__body {
+    padding: 16px;
+}
+
+.mu-card__footer {
+    padding: 16px;
+    padding-top: 0;
+}
+
+/* Card typography */
+.mu-card h3 {
+    margin: 0 0 8px;
+    font-size: var(--md-sys-typescale-title-medium-size);
+    font-weight: var(--md-sys-typescale-title-medium-weight);
+}
+
+.mu-card p {
+    margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: var(--md-sys-typescale-body-medium-size);
+}
+
+/* ============================================================================
+   STACK - Flexbox Layout
+   ============================================================================ */
+
+/* Base element - CSS fallback for before JS upgrade */
+mu-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+/* Attribute-based selectors (work before JS upgrade) */
+mu-stack[direction="row"] {
+    flex-direction: row;
+}
+
+mu-stack[direction="column"] {
+    flex-direction: column;
+}
+
+mu-stack[direction="row-reverse"] {
+    flex-direction: row-reverse;
+}
+
+mu-stack[direction="column-reverse"] {
+    flex-direction: column-reverse;
+}
+
+mu-stack[gap="none"] {
+    gap: 0;
+}
+
+mu-stack[gap="xs"] {
+    gap: var(--md-sys-spacing-xs, 4px);
+}
+
+mu-stack[gap="sm"] {
+    gap: var(--md-sys-spacing-sm, 8px);
+}
+
+mu-stack[gap="md"] {
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+mu-stack[gap="lg"] {
+    gap: var(--md-sys-spacing-lg, 24px);
+}
+
+mu-stack[gap="xl"] {
+    gap: var(--md-sys-spacing-xl, 32px);
+}
+
+mu-stack[align="start"] {
+    align-items: flex-start;
+}
+
+mu-stack[align="center"] {
+    align-items: center;
+}
+
+mu-stack[align="end"] {
+    align-items: flex-end;
+}
+
+mu-stack[align="stretch"] {
+    align-items: stretch;
+}
+
+mu-stack[justify="start"] {
+    justify-content: flex-start;
+}
+
+mu-stack[justify="center"] {
+    justify-content: center;
+}
+
+mu-stack[justify="end"] {
+    justify-content: flex-end;
+}
+
+mu-stack[justify="between"] {
+    justify-content: space-between;
+}
+
+mu-stack[wrap] {
+    flex-wrap: wrap;
+}
+
+/* ============================================================================
+   GRID - CSS Grid Layout
+   ============================================================================ */
+
+/* Base element - CSS fallback for before JS upgrade */
+mu-grid {
+    display: grid;
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+/* Attribute-based selectors for columns */
+mu-grid[cols="1"] {
+    grid-template-columns: repeat(1, 1fr);
+}
+
+mu-grid[cols="2"] {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+mu-grid[cols="3"] {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+mu-grid[cols="4"] {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+mu-grid[cols="6"] {
+    grid-template-columns: repeat(6, 1fr);
+}
+
+mu-grid[cols="12"] {
+    grid-template-columns: repeat(12, 1fr);
+}
+
+/* Attribute-based selectors for gap */
+mu-grid[gap="none"] {
+    gap: 0;
+}
+
+mu-grid[gap="xs"] {
+    gap: var(--md-sys-spacing-xs, 4px);
+}
+
+mu-grid[gap="sm"] {
+    gap: var(--md-sys-spacing-sm, 8px);
+}
+
+mu-grid[gap="md"] {
+    gap: var(--md-sys-spacing-md, 16px);
+}
+
+mu-grid[gap="lg"] {
+    gap: var(--md-sys-spacing-lg, 24px);
+}
+
+mu-grid[gap="xl"] {
+    gap: var(--md-sys-spacing-xl, 32px);
+}
+
+/* Responsive: collapse to single column on compact screens (MD3 < 600px) */
+/* !important is needed to override inline styles set by JS component */
+@media (max-width: 599px) {
+
+    mu-grid[cols="2"],
+    mu-grid[cols="3"],
+    mu-grid[cols="4"],
+    mu-grid[cols="6"] {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+/* Legacy class-based selectors (for compatibility) */
+.mu-stack {
+    display: flex;
+}
+
+.mu-stack--row {
+    flex-direction: row;
+}
+
+.mu-stack--column {
+    flex-direction: column;
+}
+
+.mu-stack--row-reverse {
+    flex-direction: row-reverse;
+}
+
+.mu-stack--column-reverse {
+    flex-direction: column-reverse;
+}
+
+.mu-stack--gap-0 {
+    gap: 0;
+}
+
+.mu-stack--gap-1 {
+    gap: 4px;
+}
+
+.mu-stack--gap-2 {
+    gap: 8px;
+}
+
+.mu-stack--gap-3 {
+    gap: 12px;
+}
+
+.mu-stack--gap-4 {
+    gap: 16px;
+}
+
+.mu-stack--gap-5 {
+    gap: 20px;
+}
+
+.mu-stack--gap-6 {
+    gap: 24px;
+}
+
+.mu-stack--gap-8 {
+    gap: 32px;
+}
+
+.mu-stack--gap-10 {
+    gap: 40px;
+}
+
+.mu-stack--gap-12 {
+    gap: 48px;
+}
+
+.mu-stack--gap-16 {
+    gap: 64px;
+}
+
+.mu-stack--align-start {
+    align-items: flex-start;
+}
+
+.mu-stack--align-center {
+    align-items: center;
+}
+
+.mu-stack--align-end {
+    align-items: flex-end;
+}
+
+.mu-stack--align-stretch {
+    align-items: stretch;
+}
+
+.mu-stack--align-baseline {
+    align-items: baseline;
+}
+
+.mu-stack--justify-start {
+    justify-content: flex-start;
+}
+
+.mu-stack--justify-center {
+    justify-content: center;
+}
+
+.mu-stack--justify-end {
+    justify-content: flex-end;
+}
+
+.mu-stack--justify-between {
+    justify-content: space-between;
+}
+
+.mu-stack--justify-around {
+    justify-content: space-around;
+}
+
+.mu-stack--justify-evenly {
+    justify-content: space-evenly;
+}
+
+.mu-stack--wrap {
+    flex-wrap: wrap;
+}
+
+/* ============================================================================
+   MODAL / DIALOG - MD3 Dialog
+   https://m3.material.io/components/dialogs
+   
+   NOTE: All modal styles are consolidated in the "MODAL DIALOG" section below
+   (around line 1650+). Do NOT add modal styles here to prevent duplication.
+   ============================================================================ */
+
+/* ============================================================================
+   ALERT - MD3 Banner Style (Inline Notification)
+   ============================================================================ */
+
+.mu-alert,
+mu-alert {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    font-size: var(--md-sys-typescale-body-medium-size, 14px);
+    line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
+    border: 1px solid transparent;
+}
+
+/* Info - uses primary container colors */
+.mu-alert--info,
+mu-alert[severity="info"] {
+    background: var(--md-sys-color-surface-container-high, #E6E0E9);
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    border-color: var(--md-sys-color-outline-variant, #CAC4D0);
+}
+
+.mu-alert--info .mu-alert__icon,
+mu-alert[severity="info"] mu-icon {
+    color: var(--md-sys-color-primary, #6750A4);
+}
+
+/* Success - uses tertiary/green semantic colors */
+.mu-alert--success,
+mu-alert[severity="success"] {
+    background: var(--md-sys-color-success-container, #C8E6C9);
+    color: var(--md-sys-color-on-success-container, #1B5E20);
+    border-color: var(--md-sys-color-success, #2E7D32);
+}
+
+.mu-alert--success .mu-alert__icon,
+mu-alert[severity="success"] mu-icon {
+    color: var(--md-sys-color-success, #2E7D32);
+}
+
+/* Warning - uses custom warning semantic colors */
+.mu-alert--warning,
+mu-alert[severity="warning"] {
+    background: var(--md-sys-color-warning-container, #FFF3E0);
+    color: var(--md-sys-color-on-warning-container, #5D4037);
+    border-color: var(--md-sys-color-warning, #FF9800);
+}
+
+.mu-alert--warning .mu-alert__icon,
+mu-alert[severity="warning"] mu-icon {
+    color: var(--md-sys-color-warning, #FF9800);
+}
+
+/* Error - uses error container colors */
+.mu-alert--error,
+mu-alert[severity="error"] {
+    background: var(--md-sys-color-error-container, #F9DEDC);
+    color: var(--md-sys-color-on-error-container, #410E0B);
+    border-color: var(--md-sys-color-error, #B3261E);
+}
+
+.mu-alert--error .mu-alert__icon,
+mu-alert[severity="error"] mu-icon {
+    color: var(--md-sys-color-error, #B3261E);
+}
+
+/* Icon styling */
+.mu-alert__icon,
+mu-alert mu-icon:first-child {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Content */
+.mu-alert__content {
+    flex: 1;
+    min-width: 0;
+}
+
+.mu-alert__title {
+    display: block;
+    font-weight: var(--md-sys-typescale-title-small-weight, 500);
+    margin-bottom: 4px;
+}
+
+/* Dismiss button */
+.mu-alert__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: -8px -8px -8px 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full, 50%);
+    cursor: pointer;
+    color: currentColor;
+    opacity: 0.7;
+    transition: opacity 0.2s, background 0.2s;
+}
+
+.mu-alert__close:hover {
+    opacity: 1;
+    background: var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, 0.08));
+}
+
+.mu-alert__close:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary, #6750A4);
+    outline-offset: 2px;
+}
+
+/* ============================================================================
+   BADGE - MD3 Badge
+   https://m3.material.io/components/badges
+   ============================================================================ */
+
+.mu-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-small-size);
+    font-weight: var(--md-sys-typescale-label-small-weight);
+    line-height: 1;
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+.mu-badge--sm {
+    min-width: 16px;
+    height: 16px;
+    font-size: 10px;
+}
+
+.mu-badge--md {
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+}
+
+.mu-badge--lg {
+    min-width: 24px;
+    height: 24px;
+    padding: 0 8px;
+    font-size: 13px;
+}
+
+.mu-badge--primary {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-badge--secondary {
+    background: var(--md-sys-color-secondary);
+    color: var(--md-sys-color-on-secondary);
+}
+
+.mu-badge--success {
+    background: #1B5E20;
+    color: white;
+}
+
+.mu-badge--warning {
+    background: #E65100;
+    color: white;
+}
+
+.mu-badge--error {
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+}
+
+.mu-badge--neutral {
+    background: var(--md-sys-color-surface-container-highest);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-badge--dot {
+    min-width: 6px;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+}
+
+/* ============================================================================
+   SKELETON - MD3 Skeleton Loader
+   ============================================================================ */
+
+.mu-skeleton {
+    display: block;
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    animation: mu-skeleton-pulse var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard) infinite;
+}
+
+.mu-skeleton--circle {
+    border-radius: 50%;
+}
+
+.mu-skeleton--text {
+    height: 16px;
+    margin-bottom: 8px;
+}
+
+.mu-skeleton--text:last-child {
+    width: 70%;
+}
+
+.mu-skeleton__line {
+    height: 16px;
+    margin-bottom: 8px;
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    animation: mu-skeleton-pulse var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard) infinite;
+}
+
+@keyframes mu-skeleton-pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+}
+
+/* ============================================================================
+   SPINNER - MD3 Circular Progress Indicator
+   https://m3.material.io/components/progress-indicators
+   ============================================================================ */
+
+.mu-spinner {
+    display: inline-block;
+}
+
+.mu-spinner__circle {
+    display: block;
+    border: 3px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin var(--md-sys-motion-duration-extra-long1) linear infinite;
+}
+
+.mu-spinner--xs .mu-spinner__circle {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+}
+
+.mu-spinner--sm .mu-spinner__circle {
+    width: 20px;
+    height: 20px;
+    border-width: 2px;
+}
+
+.mu-spinner--md .mu-spinner__circle {
+    width: 48px;
+    /* MD3: 48dp standard circular diameter */
+    height: 48px;
+    border-width: 4px;
+}
+
+.mu-spinner--lg .mu-spinner__circle {
+    width: 40px;
+    height: 40px;
+    border-width: 4px;
+}
+
+.mu-spinner--xl .mu-spinner__circle {
+    width: 48px;
+    height: 48px;
+    border-width: 4px;
+}
+
+.mu-spinner--primary {
+    color: var(--md-sys-color-primary);
+}
+
+.mu-spinner--secondary {
+    color: var(--md-sys-color-secondary);
+}
+
+.mu-spinner--current {
+    color: currentColor;
+}
+
+.mu-spinner--white {
+    color: white;
+}
+
+/* ============================================================================
+   PROGRESS - MD3 Expressive Linear Progress Indicator (8dp)
+   ============================================================================ */
+
+.mu-progress {
+    position: relative;
+    width: 100%;
+    height: 8px;
+    /* MD3 Expressive: 8dp track height for better visibility */
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: 4px;
+    /* MD3: trackCornerRadius = 4dp for rounded track */
+    overflow: hidden;
+}
+
+.mu-progress--sm {
+    height: 4px;
+    border-radius: 2px;
+}
+
+.mu-progress--md {
+    height: 8px;
+    border-radius: 4px;
+}
+
+.mu-progress--lg {
+    height: 12px;
+    border-radius: 6px;
+}
+
+.mu-progress__bar {
+    display: block;
+    height: 100%;
+    background: var(--md-sys-color-primary);
+    border-radius: inherit;
+    transition: width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-progress--success .mu-progress__bar {
+    background: #1B5E20;
+}
+
+.mu-progress--warning .mu-progress__bar {
+    background: #E65100;
+}
+
+.mu-progress--error .mu-progress__bar {
+    background: var(--md-sys-color-error);
+}
+
+/* Indeterminate animation */
+.mu-progress[indeterminate] .mu-progress__bar {
+    width: 50% !important;
+    animation: mu-progress-indeterminate 1.5s infinite ease-in-out;
+}
+
+@keyframes mu-progress-indeterminate {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(300%);
+    }
+}
+
+.mu-progress__label {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: var(--md-sys-typescale-label-small-size);
+    color: var(--md-sys-color-on-surface);
+}
+
+/* ============================================================================
+   TABS - MD3 Tabs with sliding indicator
+   https://m3.material.io/components/tabs
+   ============================================================================ */
+
+.mu-tabs {
+    display: block;
+    /* Required for margin to work */
+    width: 100%;
+    position: relative;
+    margin-bottom: 24px;
+    /* MD3: proper spacing between tabs and content */
+}
+
+.mu-tabs__list {
+    display: flex;
+    position: relative;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+}
+
+.mu-tabs__tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 90px;
+    height: 48px;
+    padding: 0 16px;
+    background: transparent;
+    border: none;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-title-small-size);
+    font-weight: var(--md-sys-typescale-title-small-weight);
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for hover/focus */
+.mu-tabs__tab::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-primary);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+.mu-tabs__tab:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+.mu-tabs__tab:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+.mu-tabs__tab.is-active {
+    color: var(--md-sys-color-primary);
+}
+
+/* Remove per-tab indicator - we use sliding indicator now */
+.mu-tabs__tab::after {
+    display: none;
+}
+
+/* Sliding indicator - ::after pseudo-element (no DOM element needed)
+   Position controlled via CSS custom properties set by JS */
+.mu-tabs__list::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background: var(--md-sys-color-primary);
+    border-radius: 3px 3px 0 0;
+    /* Dynamic positioning via CSS custom properties */
+    width: var(--indicator-width, 33.3333%);
+    left: var(--indicator-left, 0);
+    /* Smooth sliding animation */
+    transition: left var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        width var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Legacy support: hide old DOM indicator if present */
+.mu-tabs__indicator {
+    display: none;
+}
+
+.mu-tabs__panel,
+mu-tab-panel {
+    display: block;
+    padding: 16px 0;
+    animation: fadeIn var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+
+/* Tab panel visibility - hidden by default, shown when active */
+mu-tab-panel:not([active]),
+.mu-tab-panel:not(.active),
+.doc-tab-content:not(:first-of-type) {
+    display: none;
+}
+
+/* Pills Variant */
+.mu-tabs--pills .mu-tabs__list {
+    border-bottom: none;
+    gap: 8px;
+    padding: 4px;
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-full);
+    width: fit-content;
+}
+
+.mu-tabs--pills .mu-tabs__tab {
+    flex: none;
+    height: 36px;
+    min-width: auto;
+    border-radius: var(--md-sys-shape-corner-full);
+    transition:
+        color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+/* NoHide indicator for pills - use background instead */
+.mu-tabs--pills .mu-tabs__indicator {
+    display: none;
+}
+
+.mu-tabs--pills .mu-tabs__tab.is-active {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+/* Underline Variant - thinner indicator */
+.mu-tabs--underline .mu-tabs__indicator {
+    height: 2px;
+}
+
+/* ============================================================================
+   DROPDOWN - MD3 Exposed Dropdown Menu (Select)
+   https://m3.material.io/components/menus
+   ============================================================================ */
+
+.mu-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* MD3 Trigger - styled like an outlined text field */
+.mu-dropdown__trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 200px;
+    height: 56px;
+    /* MD3 standard text field height */
+    padding: 0 16px;
+    background: var(--md-sys-color-surface);
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    /* 4dp */
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for hover/pressed - MD3 spec */
+.mu-dropdown__trigger::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+    border-radius: inherit;
+}
+
+.mu-dropdown__trigger:hover::before {
+    opacity: var(--md-sys-state-hover-opacity, 0.08);
+}
+
+.mu-dropdown__trigger:active::before {
+    opacity: var(--md-sys-state-pressed-opacity, 0.12);
+}
+
+/* Focus state - MD3 uses primary color border */
+.mu-dropdown__trigger:focus-visible {
+    outline: none;
+    border-color: var(--md-sys-color-primary);
+    border-width: 2px;
+}
+
+/* Disabled state - MD3 38% opacity */
+.mu-dropdown__trigger:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+    background: var(--md-sys-color-surface-container);
+}
+
+.mu-dropdown__trigger:disabled::before {
+    display: none;
+}
+
+/* Arrow icon - rotates 180° when open */
+.mu-dropdown__arrow {
+    flex-shrink: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+}
+
+.mu-dropdown.is-open .mu-dropdown__arrow {
+    transform: rotate(180deg);
+}
+
+/* Open state - primary border */
+.mu-dropdown.is-open .mu-dropdown__trigger {
+    border-color: var(--md-sys-color-primary);
+    border-width: 2px;
+}
+
+/* MD3 Menu container - now uses Popover API for top-layer */
+.mu-dropdown__menu {
+    position: fixed;
+    min-width: 160px;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 8px 0;
+    margin: 0;
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    /* 4dp */
+    box-shadow: var(--md-sys-elevation-level2);
+    list-style: none;
+
+    /* Reset popover UA styles */
+    border: none;
+    inset: unset;
+    /* Let JS position it */
+
+    /* Hidden by default - MD3 enter animation */
+    opacity: 0;
+    visibility: hidden;
+    transform: scaleY(0.92) translateY(-8px);
+    transform-origin: top center;
+    transition:
+        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
+        visibility var(--md-sys-motion-duration-short4),
+        transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate);
+    pointer-events: none;
+}
+
+/* Popover API: :popover-open pseudo-class (native top-layer) */
+.mu-dropdown__menu:popover-open {
+    opacity: 1;
+    visibility: visible;
+    transform: scaleY(1) translateY(0);
+    pointer-events: auto;
+}
+
+/* Fallback: is-open class for older browsers or manual control */
+.mu-dropdown__menu.is-open {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: scaleY(1) translateY(0);
+    pointer-events: auto;
+}
+
+/* MD3 Menu items - 48dp height (touch-friendly) */
+.mu-dropdown__item,
+.mu-dropdown__option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    /* MD3 touch target minimum */
+    padding: 0 16px;
+    font-size: var(--md-sys-typescale-body-large-size);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    overflow: hidden;
+    transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer for options - MD3 spec */
+.mu-dropdown__item::before,
+.mu-dropdown__option::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+.mu-dropdown__item:hover::before,
+.mu-dropdown__option:hover::before {
+    opacity: var(--md-sys-state-hover-opacity, 0.08);
+}
+
+.mu-dropdown__item:active::before,
+.mu-dropdown__option:active::before {
+    opacity: var(--md-sys-state-pressed-opacity, 0.12);
+}
+
+.mu-dropdown__item:focus-visible,
+.mu-dropdown__option:focus-visible {
+    outline: none;
+}
+
+.mu-dropdown__item:focus-visible::before,
+.mu-dropdown__option:focus-visible::before {
+    opacity: var(--md-sys-state-focus-opacity, 0.12);
+}
+
+/* Selected state - secondary container bg */
+.mu-dropdown__item.is-selected,
+.mu-dropdown__option.is-active {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-dropdown__item.is-selected::before,
+.mu-dropdown__option.is-active::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+/* ============================================================================
+   TOAST - MD3 Snackbar
+   https://m3.material.io/components/snackbar
+   ============================================================================ */
+
+/* TOAST CONTAINER - Stacked notifications */
+.mu-toast-container {
+    position: fixed;
+    z-index: 9999;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    pointer-events: none;
+    max-width: 100%;
+    /* Default bottom-center */
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+}
+
+/* Position Variants (Container) */
+.mu-toast-container[position="bottom-center"] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+}
+
+.mu-toast-container[position="top-center"] {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+    align-items: center;
+}
+
+.mu-toast-container[position="top-right"] {
+    top: 0;
+    right: 0;
+    left: auto;
+    transform: none;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+}
+
+.mu-toast-container[position="top-left"] {
+    top: 0;
+    left: 0;
+    right: auto;
+    transform: none;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+}
+
+.mu-toast-container[position="bottom-right"] {
+    bottom: 0;
+    right: 0;
+    left: auto;
+    transform: none;
+    align-items: flex-end;
+}
+
+.mu-toast-container[position="bottom-left"] {
+    bottom: 0;
+    left: 0;
+    right: auto;
+    transform: none;
+    align-items: flex-start;
+}
+
+/* ITEM */
+.mu-toast {
+    position: relative;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 48px;
+    padding: 14px 16px;
+    background: var(--md-sys-color-inverse-surface);
+    color: var(--md-sys-color-inverse-on-surface);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    box-shadow: var(--md-sys-elevation-level3);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    min-width: 288px;
+    max-width: 560px;
+    animation: toastEnter 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
+}
+
+@keyframes toastEnter {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.mu-toast.is-exiting {
+    animation: toastExit 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@keyframes toastExit {
+    to {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+}
+
+.mu-toast--info,
+.mu-toast--success,
+.mu-toast--warning,
+.mu-toast--error {
+    border-left: none;
+}
+
+.mu-toast__icon {
+    font-size: 24px;
+}
+
+.mu-toast__content {
+    flex: 1;
+}
+
+.mu-toast__title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 4px;
+}
+
+.mu-toast__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full);
+    color: var(--md-sys-color-inverse-primary);
+    cursor: pointer;
+}
+
+.mu-toast__close:hover {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* ============================================================================
+   TOOLTIP - MD3 Tooltip
+   https://m3.material.io/components/tooltips
+   ============================================================================ */
+
+.mu-tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+/* Hidden by default - CSS-only approach */
+.mu-tooltip__content {
+    position: absolute;
+    padding: 8px 12px;
+    background: var(--md-sys-color-inverse-surface);
+    color: var(--md-sys-color-inverse-on-surface);
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-body-small-size);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    white-space: nowrap;
+    z-index: var(--mu-z-tooltip);
+    pointer-events: none;
+
+    /* Hidden state */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) scale(0.9);
+    transition:
+        opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+        visibility var(--md-sys-motion-duration-short3),
+        transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
+}
+
+/* Show on hover */
+.mu-tooltip:hover .mu-tooltip__content,
+.mu-tooltip:focus-within .mu-tooltip__content {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) scale(1);
+}
+
+/* Position variants */
+.mu-tooltip--top .mu-tooltip__content {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(4px) scale(0.9);
+    margin-bottom: 8px;
+}
+
+.mu-tooltip--top:hover .mu-tooltip__content {
+    transform: translateX(-50%) translateY(0) scale(1);
+}
+
+.mu-tooltip--bottom .mu-tooltip__content {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px) scale(0.9);
+    margin-top: 8px;
+}
+
+.mu-tooltip--bottom:hover .mu-tooltip__content {
+    transform: translateX(-50%) translateY(0) scale(1);
+}
+
+.mu-tooltip--left .mu-tooltip__content {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(4px) scale(0.9);
+    margin-right: 8px;
+}
+
+.mu-tooltip--left:hover .mu-tooltip__content {
+    transform: translateY(-50%) translateX(0) scale(1);
+}
+
+.mu-tooltip--right .mu-tooltip__content {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(-4px) scale(0.9);
+    margin-left: 8px;
+}
+
+.mu-tooltip--right:hover .mu-tooltip__content {
+    transform: translateY(-50%) translateX(0) scale(1);
+}
+
+/* ============================================================================
+   ANIMATIONS - Material Design 3
+   ============================================================================ */
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-16px) scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideInRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(-100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        opacity: 0;
+        transform: scale(0.85);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* MD3 Ripple effect - CSS-only using :active */
+@keyframes ripple {
+    from {
+        transform: scale(0);
+        opacity: 0.4;
+    }
+
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+/* Apply ripple effect to buttons */
+.mu-button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle, currentColor 10%, transparent 10.01%);
+    transform: scale(10, 10);
+    opacity: 0;
+    transition: transform 0.3s, opacity 0.5s;
+}
+
+.mu-button:active::after {
+    transform: scale(0, 0);
+    opacity: 0.2;
+    transition: 0s;
+}
+
+/* ============================================================================
+   MODAL DIALOG - MD3 Dialog Component (Native <dialog>)
+   Uses native dialog element for top-layer, focus trap, ESC, backdrop
+   ============================================================================ */
+
+.mu-modal {
+    display: contents;
+    /* mu-modal wrapper is invisible, dialog handles everything */
+}
+
+/* Native dialog element styling */
+dialog.mu-modal__dialog {
+    /* Reset default dialog styles */
+    border: none;
+    padding: 24px;
+    margin: auto;
+    /* Center in viewport */
+
+    /* MD3 Surface styling */
+    background: var(--md-sys-color-surface-container-high, var(--md-sys-color-surface));
+    border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+    width: fit-content;
+    min-width: 280px;
+    max-width: min(560px, calc(100vw - 96px));
+    max-height: min(560px, calc(100vh - 96px));
+    overflow-y: auto;
+    box-shadow: var(--md-sys-elevation-3);
+    color: var(--md-sys-color-on-surface);
+
+    /* Animation initial state */
+    transform: scale(0.9);
+    opacity: 0;
+    transition:
+        transform var(--md-sys-motion-duration-medium3, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),
+        opacity var(--md-sys-motion-duration-medium2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Native ::backdrop pseudo-element - replaces custom overlay */
+dialog.mu-modal__dialog::backdrop {
+    background: rgba(0, 0, 0, 0.32);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-medium2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* Visible state - triggered by is-visible class on mu-modal */
+.mu-modal.is-visible dialog.mu-modal__dialog {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.mu-modal.is-visible dialog.mu-modal__dialog::backdrop {
+    opacity: 1;
+}
+
+/* Dialog open state (native) */
+dialog.mu-modal__dialog[open] {
+    display: flex;
+    flex-direction: column;
+}
+
+.mu-modal__close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    font-size: 20px;
+    cursor: pointer;
+    color: var(--md-sys-color-on-surface-variant);
+    transition: background-color var(--md-sys-motion-duration-short2);
+}
+
+.mu-modal__close:hover {
+    background: var(--md-sys-color-on-surface-variant-opacity-08, rgba(0, 0, 0, 0.08));
+}
+
+.mu-modal__body {
+    color: var(--md-sys-color-on-surface);
+}
+
+/* Size variants - class is on dialog element */
+dialog.mu-modal__dialog.mu-modal--sm {
+    max-width: 400px;
+}
+
+dialog.mu-modal__dialog.mu-modal--lg {
+    max-width: 720px;
+}
+
+dialog.mu-modal__dialog.mu-modal--xl {
+    max-width: 900px;
+}
+
+dialog.mu-modal__dialog.mu-modal--full {
+    width: 95vw;
+    max-width: 95vw;
+    height: 95vh;
+    max-height: 95vh;
+}
+
+/* Modal header - MD3 headline style */
+.mu-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    font-size: var(--md-sys-typescale-headline-small-size, 24px);
+    font-weight: var(--md-sys-typescale-headline-small-weight, 400);
+    line-height: var(--md-sys-typescale-headline-small-line-height, 32px);
+    color: var(--md-sys-color-on-surface);
+}
+
+/* Modal footer - action buttons area */
+.mu-modal__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 24px;
+}
+
+/* ============================================================================
+   FOCUS VISIBLE STATES - MD3 Accessibility
+   ============================================================================ */
+
+.mu-button:focus-visible,
+.mu-tabs__tab:focus-visible,
+.mu-dropdown__trigger:focus-visible,
+.mu-input:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+}
+
+/* ============================================================================
+   TRANSITIONS - Smooth state changes
+   ============================================================================ */
+
+.mu-card,
+.mu-alert,
+.mu-badge,
+.mu-progress__bar {
+    transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+
+/* Interactive elements get faster transitions */
+.mu-button,
+.mu-tabs__tab,
+.mu-dropdown__item {
+    transition:
+        background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* Active press effect */
+.mu-button:active:not(:disabled) {
+    transform: scale(0.98);
+}
+
+.mu-tabs__tab:active,
+.mu-dropdown__item:active {
+    transform: scale(0.98);
+}
+
+/* ============================================================================
+   THEME TOGGLE - Light/Dark Mode Switch
+   ============================================================================ */
+
+.mu-theme-toggle {
+    display: inline-flex;
+}
+
+.mu-theme-toggle__button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg,
+            var(--md-sys-color-primary-container) 0%,
+            var(--md-sys-color-secondary-container) 100%);
+    border: 2px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-full);
+    cursor: pointer;
+    overflow: hidden;
+    transition:
+        transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),
+        box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
+        border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+}
+
+.mu-theme-toggle__button:hover {
+    transform: scale(1.1);
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.2),
+        0 0 24px var(--md-sys-color-primary);
+    border-color: var(--md-sys-color-primary);
+}
+
+.mu-theme-toggle__button:active {
+    transform: scale(0.95);
+}
+
+.mu-theme-toggle__icon {
+    font-size: 22px;
+    transition: transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized-decelerate);
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+.mu-theme-toggle__button:hover .mu-theme-toggle__icon {
+    transform: rotate(20deg) scale(1.1);
+}
+
+/* Dark mode specific glow */
+[data-theme="dark"] .mu-theme-toggle__button {
+    background: linear-gradient(135deg,
+            rgba(255, 200, 50, 0.15) 0%,
+            rgba(255, 150, 0, 0.1) 100%);
+    border-color: rgba(255, 200, 50, 0.3);
+}
+
+[data-theme="dark"] .mu-theme-toggle__button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.4),
+        0 0 32px rgba(255, 200, 50, 0.4);
+    border-color: rgba(255, 200, 50, 0.6);
+}
+
+/* Light mode specific glow */
+[data-theme="light"] .mu-theme-toggle__button {
+    background: linear-gradient(135deg,
+            rgba(100, 100, 200, 0.1) 0%,
+            rgba(50, 50, 150, 0.05) 100%);
+}
+
+[data-theme="light"] .mu-theme-toggle__button:hover {
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.15),
+        0 0 24px rgba(100, 100, 200, 0.3);
+}
+
+/* ============================================================================
+   NAVBAR LINKS - MD3 Navigation Items
+   https://m3.material.io/components/navigation-rail
+   ============================================================================ */
+
+.mu-navbar__links {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 24px;
+}
+
+.mu-navbar__links a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 16px;
+    border-radius: var(--md-sys-shape-corner-full);
+    color: var(--md-sys-color-on-surface-variant);
+    text-decoration: none;
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-large-size);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    overflow: hidden;
+    cursor: pointer;
+    transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* State layer */
+.mu-navbar__links a::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--md-sys-color-on-surface);
+    opacity: 0;
+    transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    pointer-events: none;
+}
+
+/* Hover state */
+.mu-navbar__links a:hover {
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-navbar__links a:hover::before {
+    opacity: var(--md-sys-state-hover-opacity);
+}
+
+/* Focus state */
+.mu-navbar__links a:focus-visible {
+    outline: none;
+}
+
+.mu-navbar__links a:focus-visible::before {
+    opacity: var(--md-sys-state-focus-opacity);
+}
+
+.mu-navbar__links a:focus-visible::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border: 2px solid var(--md-sys-color-primary);
+    border-radius: calc(var(--md-sys-shape-corner-full) + 2px);
+    pointer-events: none;
+}
+
+/* Pressed state */
+.mu-navbar__links a:active::before {
+    opacity: var(--md-sys-state-pressed-opacity);
+}
+
+/* Active/Selected state - with pill indicator */
+.mu-navbar__links a.active,
+.mu-navbar__links a[aria-current="page"] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-navbar__links a.active::before,
+.mu-navbar__links a[aria-current="page"]::before {
+    background: var(--md-sys-color-on-secondary-container);
+}
+
+/* ============================================================================
+   CONFIRM DIALOG - Agent-friendly confirm modal
+   ============================================================================ */
+
+mu-confirm {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+}
+
+mu-confirm.is-open {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mu-confirm__overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.32);
+    opacity: 0;
+    transition: opacity 200ms var(--md-sys-motion-easing-standard);
+}
+
+mu-confirm.is-visible .mu-confirm__overlay {
+    opacity: 1;
+}
+
+.mu-confirm__dialog {
+    position: relative;
+    min-width: 280px;
+    max-width: 400px;
+    background: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    box-shadow: var(--md-sys-elevation-level3);
+    padding: 24px;
+    transform: scale(0.9);
+    opacity: 0;
+    transition: transform 250ms var(--md-sys-motion-easing-emphasized),
+        opacity 150ms var(--md-sys-motion-easing-standard);
+}
+
+mu-confirm.is-visible .mu-confirm__dialog {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.mu-confirm__title {
+    margin: 0 0 16px;
+    font-size: var(--md-sys-typescale-headline-small-size);
+    font-weight: var(--md-sys-typescale-headline-small-weight);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-confirm__message {
+    margin: 0 0 24px;
+    font-size: var(--md-sys-typescale-body-medium-size);
+    color: var(--md-sys-color-on-surface-variant);
+    line-height: 1.5;
+}
+
+.mu-confirm__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+/* ============================================================================
+   FETCH - Data fetcher component states
+   ============================================================================ */
+
+mu-fetch {
+    display: block;
+}
+
+.mu-fetch__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+}
+
+.mu-fetch__error {
+    margin: 16px 0;
+}
+
+.mu-fetch__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100px;
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-fetch__data {
+    display: block;
+}
+
+/* ============================================================================
+   DOCUMENTATION PAGE UTILITIES
+   These classes are used by microUI documentation pages (demo, showcase)
+   ============================================================================ */
+
+.page {
+    display: none;
+}
+
+.page.active {
+    display: block;
+}
+
+.page-title {
+    font-size: var(--md-sys-typescale-headline-medium-size, 28px);
+    line-height: var(--md-sys-typescale-headline-medium-line-height, 36px);
+    margin-bottom: 8px;
+}
+
+.page-subtitle {
+    color: var(--md-sys-color-on-surface-variant);
+    margin-bottom: 32px;
+    line-height: 1.5;
+}
+
+.component-section {
+    background: var(--md-sys-color-surface-container);
+    padding: 24px;
+    border-radius: var(--md-sys-shape-corner-large, 16px);
+    margin-bottom: 24px;
+}
+
+.section-title {
+    font-size: var(--md-sys-typescale-title-medium-size, 16px);
+    font-weight: var(--md-sys-typescale-title-medium-weight, 500);
+    margin-top: 32px;
+    /* MD3: 32dp spacing before new section */
+    margin-bottom: 16px;
+}
+
+.section-title:first-child,
+.component-section>.section-title:first-child {
+    margin-top: 0;
+    /* No top margin for first title */
+}
+
+.demo-row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 16px;
+}
+
+.demo-label {
+    font-size: var(--md-sys-typescale-label-small-size, 11px);
+    color: var(--md-sys-color-on-surface-variant);
+    margin-bottom: 8px;
+    width: 100%;
+}
+
+.code-block {
+    background: var(--md-sys-color-surface-container-highest);
+    padding: 16px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    font-family: 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
+    font-size: 13px;
+    overflow-x: auto;
+    margin-top: 16px;
+}
+
+/* Documentation tab content visibility */
+.doc-tab-content {
+    display: none;
+}
+
+.doc-tab-content:first-of-type,
+.doc-tab-content.active {
+    display: block;
+}
+
+/* ============================================
+   mu-drawer-item - Navigation Item Component
+   ============================================ */
+
+mu-drawer-item,
+mu-nav-item {
+    display: block;
+}
+
+.mu-drawer-item-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 24px 0 16px;
+    min-height: 56px;
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 28px;
+    /* MD3: full rounded pill */
+    font-family: var(--md-sys-typescale-font);
+    font-size: var(--md-sys-typescale-label-large-size, 14px);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    line-height: var(--md-sys-typescale-label-large-line-height, 20px);
+    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
+        color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+    position: relative;
+    box-sizing: border-box;
+}
+
+/* Vertical layout (for bottom-nav) */
+mu-drawer-item[layout="vertical"] .mu-drawer-item-link,
+mu-nav-item .mu-drawer-item-link {
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    padding: 12px 16px;
+    border-radius: var(--md-sys-shape-corner-large);
+}
+
+.mu-drawer-item-link:hover:not([disabled]):not([aria-disabled="true"]) {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity, 0.08) * 100%), transparent);
+}
+
+.mu-drawer-item-link:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+}
+
+.mu-drawer-item-link:active:not([disabled]):not([aria-disabled="true"]) {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-pressed-opacity, 0.12) * 100%), transparent);
+}
+
+/* Active state - MD3 pill-shaped background on entire item */
+mu-drawer-item[active] .mu-drawer-item-link {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+mu-drawer-item[active] .mu-drawer-item-link:hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-opacity, 0.08) * 100%), var(--md-sys-color-secondary-container));
+}
+
+/* Vertical layout active - pill on icon only */
+mu-drawer-item[layout="vertical"][active] .mu-drawer-item-link,
+mu-nav-item[active] .mu-drawer-item-link {
+    background: transparent;
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+mu-drawer-item[layout="vertical"][active] .mu-drawer-item-icon,
+mu-nav-item[active] .mu-drawer-item-icon {
+    background: var(--md-sys-color-secondary-container);
+}
+
+/* Disabled state */
+.mu-drawer-item-link[disabled],
+.mu-drawer-item-link[aria-disabled="true"] {
+    opacity: 0.38;
+    cursor: not-allowed;
+}
+
+.mu-drawer-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    position: relative;
+    transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
+}
+
+/* Vertical layout icon container */
+mu-drawer-item[layout="vertical"] .mu-drawer-item-icon,
+mu-nav-item .mu-drawer-item-icon {
+    width: 56px;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+/* Icon styling for mu-icon */
+.mu-drawer-item-icon mu-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mu-drawer-item-label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+/* Vertical layout label */
+mu-drawer-item[layout="vertical"] .mu-drawer-item-label,
+mu-nav-item .mu-drawer-item-label {
+    flex: none;
+    text-align: center;
+    font-size: var(--md-sys-typescale-label-medium-size, 12px);
+    font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+}
+
+/* Hide label in rail mode */
+mu-drawer-item[hide-label] .mu-drawer-item-label {
+    display: none;
+}
+
+/* Rail mode: compact item with pill on icon only */
+mu-drawer-item[hide-label] .mu-drawer-item-link {
+    width: auto;
+    padding: 12px;
+    min-width: 48px;
+    min-height: 48px;
+    border-radius: var(--md-sys-shape-corner-full);
+    background: transparent;
+    justify-content: center;
+}
+
+mu-drawer-item[hide-label][active] .mu-drawer-item-link {
+    background: transparent;
+}
+
+mu-drawer-item[hide-label][active] .mu-drawer-item-icon {
+    background: var(--md-sys-color-secondary-container);
+    width: 56px;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+mu-drawer-item[hide-label] .mu-drawer-item-link:hover:not([disabled]) {
+    background: transparent;
+}
+
+mu-drawer-item[hide-label] .mu-drawer-item-icon:hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-opacity, 0.08) * 100%), transparent);
+    border-radius: var(--md-sys-shape-corner-full);
+}
+
+.mu-drawer-item-badge {
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--md-sys-shape-corner-full);
+    background: var(--md-sys-color-error);
+    color: var(--md-sys-color-on-error);
+    font-size: 11px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* Vertical layout badge */
+mu-drawer-item[layout="vertical"] .mu-drawer-item-badge,
+mu-nav-item .mu-drawer-item-badge {
+    position: absolute;
+    top: 0;
+    right: 8px;
+}
+
+/* ============================================================================
+   BOTTOM NAV - MD3 Bottom Navigation Bar
+   https://m3.material.io/components/navigation-bar
+   ============================================================================ */
+
+mu-bottom-nav {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--mu-z-bottom-nav, 150);
+}
+
+.mu-bottom-nav-nav {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-around;
+    height: var(--mu-bottom-nav-height, 80px);
+    background: var(--md-sys-color-surface-container);
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    padding: 0 8px;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+/* Distribute items evenly */
+.mu-bottom-nav-nav>mu-nav-item,
+.mu-bottom-nav-nav>mu-drawer-item {
+    flex: 1;
+    max-width: 120px;
+}
+
+/* ============================================================================
+   LAYOUT - MD3 Responsive Layout Container
+   ============================================================================ */
+
+mu-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: var(--md-sys-color-background);
+    color: var(--md-sys-color-on-background);
+    overflow: hidden;
+}
+
+.mu-layout-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.mu-layout-header {
+    flex-shrink: 0;
+    width: 100%;
+    z-index: var(--z-sticky, 100);
+}
+
+.mu-layout-body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+}
+
+.mu-layout-drawer {
+    flex-shrink: 0;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+@media (max-width: 599px) {
+    .mu-layout-drawer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: var(--mu-z-drawer, 250);
+    }
+}
+
+.mu-layout-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.mu-layout-content {
+    flex: 1;
+    padding: 16px;
+}
+
+mu-layout[has-bottom-nav] .mu-layout-content {
+    padding-bottom: calc(var(--mu-bottom-nav-height, 80px) + 16px + env(safe-area-inset-bottom, 0));
+}
+
+@media (max-width: 599px) {
+    .mu-layout-content {
+        padding: 8px;
+    }
+
+    mu-layout[has-bottom-nav] .mu-layout-content {
+        padding-bottom: calc(var(--mu-bottom-nav-height, 80px) + 8px + env(safe-area-inset-bottom, 0));
+    }
+}
+
+.mu-layout-footer {
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.mu-layout-bottom {
+    /* Bottom nav is fixed, no space needed here */
+}
+
+/* Loading state */
+mu-layout.mu-loading .mu-layout-content::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg,
+            var(--md-sys-color-primary) 0%,
+            var(--md-sys-color-primary-container) 50%,
+            var(--md-sys-color-primary) 100%);
+    background-size: 200% 100%;
+    animation: loading-bar 1.5s ease-in-out infinite;
+    z-index: var(--z-overlay, 9999);
+}
+
+@keyframes loading-bar {
+    0% {
+        background-position: 200% 0;
+    }
+
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/* ============================================================================
+   DRAWER - MD3 Adaptive Navigation Drawer
+   https://m3.material.io/components/navigation-drawer
+   ============================================================================ */
+
+mu-drawer {
+    display: block;
+    position: relative;
+    z-index: var(--mu-z-drawer, 250);
+}
+
+.mu-drawer-scrim {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.32);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
+        visibility var(--md-sys-motion-duration-medium2);
+    z-index: var(--mu-z-drawer-scrim, 240);
+}
+
+.mu-drawer-scrim.mu-drawer-scrim-visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.mu-drawer-nav {
+    display: flex;
+    flex-direction: column;
+    background: var(--md-sys-color-surface-container-low);
+    border-right: 1px solid var(--md-sys-color-outline-variant);
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transition: width var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)),
+        transform var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));
+}
+
+/* Position end (right side) */
+mu-drawer[position="end"] .mu-drawer-nav {
+    border-right: none;
+    border-left: 1px solid var(--md-sys-color-outline-variant);
+}
+
+/* Mode: Expanded (full drawer) */
+.mu-drawer-nav.mu-drawer-mode-expanded {
+    width: var(--mu-drawer-standard-width, 256px);
+}
+
+/* Mode: Rail (collapsed, icons only) */
+.mu-drawer-nav.mu-drawer-mode-rail {
+    width: var(--mu-drawer-rail-width, 80px);
+}
+
+.mu-drawer-nav.mu-drawer-mode-rail.mu-drawer-expanded-hover {
+    width: var(--mu-drawer-standard-width, 256px);
+    box-shadow: var(--md-sys-elevation-level2);
+    transition: width var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),
+        transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),
+        box-shadow var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));
+}
+
+/* Mode: Hidden (off-screen, modal on open) */
+.mu-drawer-nav.mu-drawer-mode-hidden {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--mu-drawer-expanded-width, 360px);
+    max-width: calc(100vw - 56px);
+    transform: translateX(-100%);
+    box-shadow: var(--md-sys-elevation-level3);
+    z-index: var(--mu-z-drawer, 250);
+}
+
+mu-drawer[position="end"] .mu-drawer-nav.mu-drawer-mode-hidden {
+    left: auto;
+    right: 0;
+    transform: translateX(100%);
+}
+
+.mu-drawer-nav.mu-drawer-mode-hidden.mu-drawer-open {
+    transform: translateX(0);
+}
+
+/* Header */
+.mu-drawer-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard),
+        padding var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard);
+}
+
+/* Hide header in rail mode when not hovering */
+.mu-drawer-nav.mu-drawer-mode-rail:not(.mu-drawer-expanded-hover) .mu-drawer-header {
+    opacity: 0;
+    padding: 8px;
+    height: 0;
+    overflow: hidden;
+    border-bottom: none;
+}
+
+/* Content area */
+.mu-drawer-content {
+    flex: 1;
+    padding: 8px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+/* Rail mode: center items */
+.mu-drawer-nav.mu-drawer-mode-rail:not(.mu-drawer-expanded-hover) .mu-drawer-content {
+    align-items: center;
+    padding: 8px 0;
+}
+
+/* ============================================================================
+   DATATABLE - Smart Data Table Component
+   ============================================================================ */
+
+mu-datatable {
+    display: block;
+    font-family: var(--md-sys-typescale-font);
+}
+
+.mu-datatable-wrapper {
+    background: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-medium);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    overflow: hidden;
+}
+
+.mu-datatable-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    background: var(--md-sys-color-surface-container-low);
+}
+
+.mu-datatable-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    max-width: 300px;
+}
+
+.mu-datatable-search input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-small);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    background: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-datatable-search input:focus {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -1px;
+    border-color: var(--md-sys-color-primary);
+}
+
+.mu-datatable-info {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-datatable-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.mu-datatable-table thead {
+    background: var(--md-sys-color-surface-container);
+}
+
+.mu-datatable-table th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 500;
+    font-size: var(--md-sys-typescale-label-large-size);
+    color: var(--md-sys-color-on-surface);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    user-select: none;
+}
+
+.mu-datatable-table th.mu-datatable-sortable {
+    cursor: pointer;
+    transition: background-color 0.15s;
+}
+
+.mu-datatable-table th.mu-datatable-sortable:hover {
+    background: var(--md-sys-color-surface-container-high);
+}
+
+.mu-datatable-sort-icon {
+    margin-left: 4px;
+    opacity: 0.5;
+    font-size: 16px;
+}
+
+.mu-datatable-table th.mu-datatable-sorted .mu-datatable-sort-icon {
+    opacity: 1;
+    color: var(--md-sys-color-primary);
+}
+
+.mu-datatable-table tbody tr {
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    transition: background-color 0.15s;
+}
+
+.mu-datatable-table tbody tr:hover {
+    background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent);
+}
+
+.mu-datatable-table tbody tr.mu-datatable-selected {
+    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+}
+
+.mu-datatable-table td {
+    padding: 12px 16px;
+    font-size: var(--md-sys-typescale-body-medium-size);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-datatable-checkbox-cell {
+    width: 48px;
+    text-align: center;
+}
+
+.mu-datatable-checkbox-cell input {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--md-sys-color-primary);
+    cursor: pointer;
+}
+
+.mu-datatable-empty-state {
+    padding: 48px 16px;
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-datatable-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    background: var(--md-sys-color-surface-container-low);
+}
+
+.mu-datatable-pagination-info {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-datatable-pagination-controls {
+    display: flex;
+    gap: 4px;
+}
+
+.mu-datatable-pagination-btn {
+    padding: 8px 12px;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: var(--md-sys-shape-corner-small);
+    background: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+    cursor: pointer;
+    font-size: var(--md-sys-typescale-body-small-size);
+    transition: background-color 0.15s;
+}
+
+.mu-datatable-pagination-btn:hover:not(:disabled) {
+    background: var(--md-sys-color-surface-container);
+}
+
+.mu-datatable-pagination-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.mu-datatable-pagination-btn.mu-datatable-pagination-btn-active {
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    border-color: var(--md-sys-color-primary);
+}
+
+/* ============================================================================
+   SCHEMA FORM - Auto-Generated Forms from JSON Schema
+   ============================================================================ */
+
+mu-schema-form {
+    display: block;
+    font-family: var(--md-sys-typescale-font);
+}
+
+.mu-schema-form {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.mu-schema-form.mu-schema-form-inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.mu-schema-form.mu-schema-form-inline .mu-schema-form-field {
+    flex: 1;
+    min-width: 200px;
+}
+
+.mu-schema-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.mu-schema-form-field.mu-schema-form-field-error mu-input,
+.mu-schema-form-field.mu-schema-form-field-error mu-dropdown,
+.mu-schema-form-field.mu-schema-form-field-error mu-textarea {
+    --md-sys-color-outline: var(--md-sys-color-error);
+}
+
+.mu-schema-form-description {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-on-surface-variant);
+    margin-top: 2px;
+}
+
+.mu-schema-form-error {
+    font-size: var(--md-sys-typescale-body-small-size);
+    color: var(--md-sys-color-error);
+    margin-top: 2px;
+}
+
+.mu-schema-form-switch-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.mu-schema-form-switch-label {
+    font-size: var(--md-sys-typescale-body-medium-size);
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-schema-form-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 8px;
+    padding-top: 16px;
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.mu-schema-form-actions mu-button {
+    flex: 0 0 auto;
+}
+
+.mu-schema-form-empty-state {
+    padding: 24px;
+    text-align: center;
+    color: var(--md-sys-color-on-surface-variant);
+    background: var(--md-sys-color-surface-container);
+    border-radius: var(--md-sys-shape-corner-medium);
+}
+
+/* ============================================================================
+   PROMPT UI COMPONENTS - AI Agent Interface Components
+   ============================================================================ */
+
+/* --- MU-PROMPT-INPUT --- */
+mu-prompt-input {
+    display: block;
+    font-family: var(--md-sys-typescale-font);
+}
+
+.mu-prompt-input-container {
+    display: flex;
+    gap: 8px;
+    background: var(--md-sys-color-surface-container);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-large);
+    padding: 12px 16px;
+    transition: border-color 0.2s var(--md-sys-motion-easing-standard);
+}
+
+.mu-prompt-input-container:focus-within {
+    border-color: var(--md-sys-color-primary);
+    box-shadow: 0 0 0 1px var(--md-sys-color-primary);
+}
+
+.mu-prompt-input-loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.mu-prompt-input-field {
+    flex: 1;
+    border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-size: var(--md-sys-typescale-body-large-size);
+    font-family: inherit;
+    resize: none;
+    outline: none;
+    min-height: 24px;
+}
+
+textarea.mu-prompt-input-field {
+    min-height: 80px;
+}
+
+.mu-prompt-input-field::placeholder {
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-prompt-input-submit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    cursor: pointer;
+    transition: background 0.2s, transform 0.1s;
+    flex-shrink: 0;
+    align-self: flex-end;
+}
+
+.mu-prompt-input-submit:hover:not(:disabled) {
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+}
+
+.mu-prompt-input-submit:active:not(:disabled) {
+    transform: scale(0.95);
+}
+
+.mu-prompt-input-submit:disabled {
+    background: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: not-allowed;
+}
+
+.mu-prompt-input-submit svg {
+    width: 20px;
+    height: 20px;
+}
+
+.mu-prompt-input-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: mu-prompt-spin 0.8s linear infinite;
+}
+
+@keyframes mu-prompt-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* --- MU-CODE-BLOCK --- */
+mu-code-block {
+    display: block;
+    margin: 12px 0;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+
+.mu-code-block-container {
+    background: var(--md-sys-color-surface-container-highest);
+    border-radius: var(--md-sys-shape-corner-medium);
+    overflow: hidden;
+}
+
+.mu-code-block-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: var(--md-sys-color-surface-container-high);
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
+.mu-code-block-language {
+    font-size: 12px;
+    color: var(--md-sys-color-on-surface-variant);
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+.mu-code-block-filename {
+    font-size: 12px;
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-code-block-copy-btn {
+    font-size: 12px;
+    padding: 4px 8px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--md-sys-color-primary);
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.mu-code-block-copy-btn:hover {
+    background: var(--md-sys-color-primary-container);
+}
+
+.mu-code-block-pre {
+    margin: 0;
+    padding: 16px;
+    overflow-x: auto;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-code-block-pre code {
+    font-family: inherit;
+}
+
+/* --- MU-AGENT-TOOLBAR --- */
+mu-agent-toolbar {
+    display: flex;
+    gap: 4px;
+    margin-top: 8px;
+}
+
+.mu-agent-toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    opacity: 0.6;
+    transition: opacity 0.2s, background 0.2s;
+}
+
+.mu-agent-toolbar-btn:hover {
+    opacity: 1;
+    background: var(--md-sys-color-surface-container-high);
+}
+
+.mu-agent-toolbar-btn:active {
+    transform: scale(0.95);
+}
+
+/* --- MU-MESSAGE-BUBBLE --- */
+mu-message-bubble {
+    display: block;
+    margin: 16px 0;
+    font-family: var(--md-sys-typescale-font);
+}
+
+.mu-message-bubble-message {
+    display: flex;
+    gap: 12px;
+}
+
+.mu-message-bubble-message.mu-message-bubble-user {
+    flex-direction: row-reverse;
+}
+
+.mu-message-bubble-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+}
+
+.mu-message-bubble-avatar.mu-message-bubble-user {
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+}
+
+.mu-message-bubble-avatar.mu-message-bubble-assistant {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+}
+
+.mu-message-bubble-avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.mu-message-bubble-content {
+    flex: 1;
+    max-width: 80%;
+}
+
+.mu-message-bubble-header {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.mu-message-bubble-header.mu-message-bubble-user {
+    flex-direction: row-reverse;
+}
+
+.mu-message-bubble-name {
+    font-size: var(--md-sys-typescale-label-medium-size);
+    font-weight: 600;
+    color: var(--md-sys-color-on-surface);
+}
+
+.mu-message-bubble-timestamp {
+    font-size: var(--md-sys-typescale-label-small-size);
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.mu-message-bubble-bubble {
+    padding: 12px 16px;
+    line-height: 1.5;
+}
+
+.mu-message-bubble-bubble.mu-message-bubble-user {
+    border-radius: 16px 16px 4px 16px;
+    background: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+}
+
+.mu-message-bubble-bubble.mu-message-bubble-assistant {
+    border-radius: 16px 16px 16px 4px;
+    background: var(--md-sys-color-surface-container);
+    color: var(--md-sys-color-on-surface);
+}
+
+/* ============================================================================
+   SOTA 2026: PERFORMANCE OPTIMIZATIONS
+   These optimizations benefit ALL framework users by default
+   ============================================================================ */
+
+/* content-visibility: Skip rendering off-screen examples for faster initial paint */
+mu-example {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 300px;
+}
+
+/* CSS contain: Limit repaint scope for modals/dialogs */
+mu-modal,
+mu-confirm,
+dialog.mu-modal__dialog,
+dialog.mu-confirm__dialog {
+    contain: layout style paint;
+}