/*
 * smartwebUI 1.2.0
 * Standards-native interface components for the modern web.
 *
 * © 2026 Elonovo. Licensed under the smartwebUI Source License v1.0 — see LICENSE.md.
 * Free to use and customize for your own projects. Redistributing modified or
 * rebranded versions requires written permission from the copyright holder.
 */

@layer smart.reset, smart.tokens, smart.base, smart.layout, smart.components, smart.materials, smart.utilities;

@layer smart.tokens {
  :root {
    color-scheme: light dark;

    /* Typography */
    --smart-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    --smart-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --smart-font-size-00: 0.6875rem;
    --smart-font-size-0: 0.75rem;
    --smart-font-size-1: 0.8125rem;
    --smart-font-size-2: 0.9375rem;
    --smart-font-size-3: 1rem;
    --smart-font-size-4: 1.125rem;
    --smart-font-size-5: 1.375rem;
    --smart-font-size-6: clamp(1.75rem, 3vw, 2.5rem);
    --smart-font-size-7: clamp(2.5rem, 6vw, 5.75rem);
    --smart-line-height-tight: 1.08;
    --smart-line-height-body: 1.55;
    --smart-letter-spacing-tight: -0.035em;
    --smart-letter-spacing-label: 0.015em;
    --smart-font-weight-regular: 400;
    --smart-font-weight-medium: 560;
    --smart-font-weight-semibold: 650;
    --smart-font-weight-bold: 740;

    /* Spacing */
    --smart-space-0: 0;
    --smart-space-1: 0.25rem;
    --smart-space-2: 0.5rem;
    --smart-space-3: 0.75rem;
    --smart-space-4: 1rem;
    --smart-space-5: 1.25rem;
    --smart-space-6: 1.5rem;
    --smart-space-7: 2rem;
    --smart-space-8: 2.5rem;
    --smart-space-9: 3rem;
    --smart-space-10: 4rem;
    --smart-space-11: 5rem;
    --smart-space-12: 7rem;

    /* Shape */
    --smart-radius-xs: 0.375rem;
    --smart-radius-sm: 0.625rem;
    --smart-radius-md: 0.875rem;
    --smart-radius-lg: 1.25rem;
    --smart-radius-xl: 1.75rem;
    --smart-radius-full: 999px;
    --smart-radius-control: var(--smart-radius-sm);
    --smart-radius-surface: var(--smart-radius-lg);
    --smart-border-width: 1px;

    /* Brand and status. Theme values are paired with light-dark() and
       resolve through the color-scheme set by :root[data-theme]. */
    --smart-accent: light-dark(#5b5cf0, #8b8cff);
    --smart-accent-hover: light-dark(#4c4dd8, #9d9eff);
    --smart-accent-strong: light-dark(#3f3fc5, #b4b4ff);
    --smart-accent-soft: color-mix(in srgb, var(--smart-accent) 12%, transparent);
    --smart-accent-softer: color-mix(in srgb, var(--smart-accent) 7%, transparent);
    --smart-on-accent: light-dark(#ffffff, #111118);
    --smart-success: light-dark(#0f7449, #53c68c);
    --smart-success-soft: color-mix(in srgb, var(--smart-success) 12%, transparent);
    --smart-warning: light-dark(#8a4b00, #f0a63b);
    --smart-warning-soft: color-mix(in srgb, var(--smart-warning) 13%, transparent);
    --smart-danger: light-dark(#b42336, #ff6574);
    --smart-on-danger: light-dark(#ffffff, #111118);
    --smart-danger-soft: color-mix(in srgb, var(--smart-danger) 11%, transparent);
    --smart-info: light-dark(#0b65ad, #63aef0);
    --smart-info-soft: color-mix(in srgb, var(--smart-info) 11%, transparent);

    /* Surfaces: light/dark values paired per token */
    --smart-canvas: light-dark(#f5f5f7, #0d0d0f);
    --smart-canvas-raised: light-dark(#fbfbfd, #131316);
    --smart-surface: light-dark(rgba(255, 255, 255, 0.82), rgba(34, 34, 39, 0.78));
    --smart-surface-solid: light-dark(#ffffff, #202024);
    --smart-surface-muted: light-dark(rgba(232, 232, 237, 0.68), rgba(54, 54, 61, 0.68));
    --smart-surface-hover: light-dark(rgba(0, 0, 0, 0.045), rgba(255, 255, 255, 0.075));
    --smart-surface-active: light-dark(rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.12));
    --smart-overlay: light-dark(rgba(12, 13, 18, 0.34), rgba(0, 0, 0, 0.62));
    --smart-text: light-dark(#17171b, #f4f4f6);
    --smart-text-secondary: light-dark(#50505a, #b8b8c2);
    --smart-text-tertiary: light-dark(#6d6d78, #9999a4);
    --smart-text-placeholder: light-dark(#767681, #92929d);
    --smart-border: light-dark(rgba(23, 23, 27, 0.12), rgba(255, 255, 255, 0.12));
    --smart-border-strong: light-dark(rgba(23, 23, 27, 0.2), rgba(255, 255, 255, 0.21));
    --smart-divider: light-dark(rgba(23, 23, 27, 0.09), rgba(255, 255, 255, 0.09));
    --smart-focus-color: color-mix(in srgb, var(--smart-accent) 72%, light-dark(white, black));
    --smart-selection: color-mix(in srgb, var(--smart-accent) 22%, transparent);

    /* Layering */
    --smart-z-raised: 4;
    --smart-z-sticky: 10;
    --smart-z-tooltip: 20;
    --smart-z-toast: 40;
    --smart-z-banner: 50;

    /* Depth and materials */
    --smart-shadow-xs: 0 1px 2px light-dark(rgba(20, 20, 26, 0.025), rgba(0, 0, 0, 0.14));
    --smart-shadow-sm: 0 1px 2px light-dark(rgba(20, 20, 26, 0.028), rgba(0, 0, 0, 0.14)), 0 4px 12px light-dark(rgba(20, 20, 26, 0.035), rgba(0, 0, 0, 0.14));
    --smart-shadow-md: 0 8px 26px light-dark(rgba(20, 20, 26, 0.065), rgba(0, 0, 0, 0.22)), 0 1px 5px light-dark(rgba(20, 20, 26, 0.035), rgba(0, 0, 0, 0.22));
    --smart-shadow-lg: 0 20px 58px light-dark(rgba(20, 20, 26, 0.105), rgba(0, 0, 0, 0.34)), 0 3px 12px light-dark(rgba(20, 20, 26, 0.045), rgba(0, 0, 0, 0.34));
    --smart-blur: 24px;
    --smart-saturate: 160%;
    --smart-liquid-opacity: 56%;
    --smart-liquid-accent-opacity: 84%;
    --smart-liquid-blur: 48px;
    --smart-liquid-saturate: 175%;
    --smart-liquid-highlight: light-dark(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
    --smart-liquid-rim: light-dark(rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.26));
    --smart-liquid-underlight: light-dark(rgba(20, 20, 30, 0.06), rgba(0, 0, 0, 0.28));
    --smart-liquid-tint: light-dark(color-mix(in srgb, var(--smart-accent) 7%, transparent), color-mix(in srgb, var(--smart-accent) 11%, transparent));
    --smart-liquid-refraction: radial-gradient(115% 82% at -16% -34%, color-mix(in srgb, var(--smart-liquid-rim) 62%, transparent), transparent 58%), linear-gradient(118deg, color-mix(in srgb, var(--smart-liquid-highlight) 42%, transparent) 0%, transparent 26%, color-mix(in srgb, var(--smart-accent) 8%, transparent) 74%, transparent 100%);
    --smart-liquid-frost-filter: blur(var(--smart-liquid-blur)) saturate(var(--smart-liquid-saturate)) contrast(0.96) brightness(1.06);
    --smart-liquid-shadow: 0 14px 42px light-dark(rgba(20, 20, 30, 0.075), rgba(0, 0, 0, 0.24)), inset 0 1px 0 var(--smart-liquid-rim), inset 0 -1px 0 var(--smart-liquid-underlight);
    --smart-liquid-border: light-dark(rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.21));
    --smart-liquid-surface: color-mix(in srgb, var(--smart-canvas-raised) var(--smart-liquid-opacity), transparent);
    --smart-liquid-control-surface: color-mix(in srgb, var(--smart-liquid-surface) 68%, transparent);
    --smart-liquid-control-hover-surface: color-mix(in srgb, var(--smart-liquid-surface) 84%, var(--smart-liquid-tint));
    --smart-liquid-control-active-surface: color-mix(in srgb, var(--smart-liquid-surface) 92%, var(--smart-liquid-tint));
    --smart-liquid-glow-size: 8rem;
    --smart-liquid-pointer-highlight: radial-gradient(circle var(--smart-liquid-glow-size) at var(--smart-liquid-x, 50%) var(--smart-liquid-y, 0%), color-mix(in srgb, var(--smart-liquid-highlight) 84%, transparent), transparent 62%);
    --smart-popover-gap: 8px;

    /* Icons. --smart-icon-size accepts any valid CSS size. */
    --smart-icon-size: 1em;
    --smart-icon-stroke: 2;

    /* Controls */
    --smart-control-height-sm: 2.125rem;
    --smart-control-height: 3rem;
    --smart-control-height-lg: 3.5rem;
    --smart-control-padding-x: 1rem;
    --smart-control-gap: 0.625rem;
    --smart-form-gap: var(--smart-space-5);
    --smart-field-gap: var(--smart-space-3);
    --smart-control-border: var(--smart-border);
    --smart-control-background: color-mix(in srgb, var(--smart-surface-solid) 72%, transparent);
    --smart-focus-width: 3px;

    /* Layout */
    --smart-content-width: 76rem;
    --smart-reading-width: 42rem;
    --smart-container-sm: 40rem;
    --smart-container-md: 56rem;
    --smart-container-lg: var(--smart-content-width);
    --smart-page-gutter: clamp(1rem, 4vw, 3rem);
    --smart-section-gap: clamp(4rem, 9vw, 8rem);
    --smart-grid-min: 17rem;

    /* Motion */
    --smart-motion-duration-fast: 110ms;
    --smart-motion-duration: 220ms;
    --smart-motion-duration-slow: 420ms;
    --smart-motion-duration-page: 650ms;
    --smart-ease-standard: cubic-bezier(0.2, 0.75, 0.25, 1);
    --smart-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --smart-ease-spring: cubic-bezier(0.22, 1.25, 0.36, 1);
    --smart-press-scale: 0.975;
    --smart-hover-lift: -2px;
  }

  /* Explicit themes only flip color-scheme; every light-dark() token follows. */
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  :root[data-density="compact"] {
    --smart-control-height-sm: 1.75rem;
    --smart-control-height: 2.25rem;
    --smart-control-height-lg: 2.75rem;
    --smart-control-padding-x: 0.75rem;
    --smart-space-3: 0.625rem;
    --smart-space-4: 0.875rem;
    --smart-space-5: 1rem;
    --smart-space-6: 1.25rem;
  }
}

@layer smart.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
  button, input, textarea, select { font: inherit; }
  button, [role="button"] { touch-action: manipulation; }
  img, picture, svg { display: block; max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer smart.base {
  html { background: var(--smart-canvas); }

  body {
    min-width: 20rem;
    min-height: 100vh;
    background: var(--smart-canvas);
    color: var(--smart-text);
    font-family: var(--smart-font-sans);
    font-size: var(--smart-font-size-2);
    line-height: var(--smart-line-height-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--smart-selection); }

  :focus-visible {
    outline: var(--smart-focus-width) solid var(--smart-focus-color);
    outline-offset: 2px;
  }

  a { color: var(--smart-accent); text-underline-offset: 0.16em; }
  h1, h2, h3, h4, h5, h6 { color: var(--smart-text); font-weight: var(--smart-font-weight-semibold); line-height: var(--smart-line-height-tight); text-wrap: balance; }
  h1 { font-size: var(--smart-font-size-7); letter-spacing: var(--smart-letter-spacing-tight); }
  h2 { font-size: var(--smart-font-size-6); letter-spacing: var(--smart-letter-spacing-tight); }
  h3 { font-size: var(--smart-font-size-5); }
  h4 { font-size: var(--smart-font-size-4); }
  h5 { font-size: var(--smart-font-size-3); }
  h6 { font-size: var(--smart-font-size-1); letter-spacing: var(--smart-letter-spacing-label); text-transform: uppercase; }
  small { font-size: var(--smart-font-size-1); }
  code, kbd { font-family: var(--smart-font-mono); font-size: 0.9em; }
  kbd {
    padding: 0.15rem 0.38rem;
    border: 1px solid var(--smart-border);
    border-bottom-color: var(--smart-border-strong);
    border-radius: var(--smart-radius-xs);
    background: var(--smart-surface-muted);
    box-shadow: var(--smart-shadow-xs);
  }

  hr { border: 0; border-block-start: 1px solid var(--smart-divider); }

  figure { display: grid; gap: var(--smart-space-2); justify-items: start; }
  figcaption { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); line-height: var(--smart-line-height-body); text-wrap: pretty; }
}

@layer smart.layout {
  .smart-container {
    width: min(100% - (var(--smart-page-gutter) * 2), var(--smart-content-width));
    margin-inline: auto;
  }

  .smart-stack { display: flex; flex-direction: column; gap: var(--smart-stack-gap, var(--smart-space-4)); }
  :is(form, .smart-form).smart-stack { --smart-stack-gap: var(--smart-form-gap, var(--smart-space-5)); }
  .smart-card__body.smart-stack,
  .smart-dialog__body.smart-stack { --smart-stack-gap: var(--smart-form-gap, var(--smart-space-5)); }
  .smart-grid:has(.smart-field) { --smart-grid-gap: var(--smart-space-5); --smart-grid-min: 18rem; }
  .smart-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-cluster-gap, var(--smart-space-3)); }
  .smart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--smart-grid-min)), 1fr)); gap: var(--smart-grid-gap, var(--smart-space-5)); }
  .smart-grid--cards {
    --smart-grid-min: 16rem;
    --smart-grid-gap: var(--smart-space-4);
    align-items: stretch;
  }
  .smart-grid--cards > :is(.smart-card, a.smart-card, button.smart-card) { block-size: 100%; min-inline-size: 0; }
  .smart-grid--pickers {
    --smart-grid-min: 9.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--smart-grid-min)), 1fr));
  }
  .smart-grid:has(> .smart-metric) { --smart-grid-min: 14rem; align-items: stretch; }
  .smart-split { display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-4); }
}

@layer smart.components {
  /* Icons */
  .smart-icon {
    display: inline-block;
    inline-size: var(--smart-icon-size, 1em);
    block-size: var(--smart-icon-size, 1em);
    min-inline-size: 0;
    flex: none;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--smart-icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
  }
  .smart-icon--xs { --smart-icon-size: 0.75rem; }
  .smart-icon--sm { --smart-icon-size: 1rem; }
  .smart-icon--md { --smart-icon-size: 1.25rem; }
  .smart-icon--lg { --smart-icon-size: 1.5rem; }
  .smart-icon--xl { --smart-icon-size: 2rem; }
  .smart-icon--2xl { --smart-icon-size: 3rem; }
  html[dir="rtl"] .smart-icon--directional { scale: -1 1; }

  /* Buttons */
  .smart-button {
    --_button-bg: var(--smart-control-background);
    --_button-color: var(--smart-text);
    --_button-border: var(--smart-control-border);
    appearance: none;
    min-height: var(--smart-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--smart-control-gap);
    padding-inline: var(--smart-control-padding-x);
    border: var(--smart-border-width) solid var(--_button-border);
    border-radius: var(--smart-radius-control);
    background: var(--_button-bg);
    color: var(--_button-color);
    box-shadow: var(--smart-shadow-xs);
    font-weight: var(--smart-font-weight-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: transform var(--smart-motion-duration-fast) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard), border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), color var(--smart-motion-duration) var(--smart-ease-standard);
  }

  .smart-button:hover { background: color-mix(in srgb, var(--_button-bg) 91%, var(--smart-text)); box-shadow: var(--smart-shadow-sm); }
  .smart-button:active { transform: scale(var(--smart-press-scale)); box-shadow: var(--smart-shadow-xs); }
  .smart-button[aria-pressed="true"] { --_button-bg: var(--smart-accent-soft); --_button-color: var(--smart-accent-strong); --_button-border: color-mix(in srgb, var(--smart-accent) 35%, transparent); }
  .smart-button:disabled, .smart-button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
  .smart-button[aria-busy="true"] { position: relative; pointer-events: none; color: transparent; }
  .smart-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--_button-color) 28%, transparent);
    border-top-color: var(--_button-color);
    border-radius: 50%;
    animation: smart-spin 700ms linear infinite;
  }
  .smart-button--primary { --_button-bg: var(--smart-accent); --_button-color: var(--smart-on-accent); --_button-border: transparent; }
  .smart-button--primary:hover { background: var(--smart-accent-hover); }
  .smart-button--success { --_button-bg: var(--smart-success); --_button-color: #ffffff; --_button-border: transparent; }
  .smart-button--success:hover { background: color-mix(in srgb, var(--smart-success) 88%, black); }
  .smart-button--warning { --_button-bg: var(--smart-warning); --_button-color: #ffffff; --_button-border: transparent; }
  .smart-button--warning:hover { background: color-mix(in srgb, var(--smart-warning) 88%, black); }
  .smart-button--danger { --_button-bg: var(--smart-danger); --_button-color: var(--smart-on-danger); --_button-border: transparent; }
  .smart-button--quiet { --_button-bg: transparent; --_button-border: transparent; box-shadow: none; }
  .smart-button--full { inline-size: 100%; }
  .smart-button--link { min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--smart-accent-strong); box-shadow: none; text-decoration: underline; text-underline-offset: 0.2em; }
  .smart-button--link:hover { background: transparent; color: var(--smart-accent-hover); box-shadow: none; transform: none; }
  .smart-button--small { min-height: var(--smart-control-height-sm); padding-inline: 0.7rem; font-size: var(--smart-font-size-1); }
  .smart-button--large { min-height: var(--smart-control-height-lg); padding-inline: 1.25rem; font-size: var(--smart-font-size-3); }
  .smart-button--icon { width: var(--smart-control-height); padding: 0; border-radius: var(--smart-radius-full); }

  .smart-button-group { display: inline-flex; width: fit-content; }
  .smart-button-group .smart-button { border-radius: 0; margin-inline-start: -1px; }
  .smart-button-group .smart-button:first-child { border-start-start-radius: var(--smart-radius-control); border-end-start-radius: var(--smart-radius-control); margin-inline-start: 0; }
  .smart-button-group .smart-button:last-child { border-start-end-radius: var(--smart-radius-control); border-end-end-radius: var(--smart-radius-control); }

  /* Fields */
  .smart-field { display: grid; gap: var(--smart-field-gap, var(--smart-space-3)); }
  .smart-field--inline { display: flex; align-items: center; gap: var(--smart-space-4); }
  .smart-field--inline > .smart-label { flex: 1 1 auto; }
  .smart-checkbox { inline-size: 1.125rem; block-size: 1.125rem; flex: 0 0 auto; margin: 0; accent-color: var(--smart-accent); }
  .smart-label { font-size: var(--smart-font-size-2); font-weight: var(--smart-font-weight-semibold); letter-spacing: var(--smart-letter-spacing-label); }
  .smart-hint { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); line-height: var(--smart-line-height-body); }
  .smart-input, select.smart-select, .smart-textarea, .smart-select__trigger {
    width: 100%;
    min-height: var(--smart-control-height);
    padding-block: calc((var(--smart-control-height) - 1.45em) / 2);
    padding-inline: var(--smart-control-padding-x);
    border: var(--smart-border-width) solid var(--smart-control-border);
    border-radius: var(--smart-radius-control);
    background: var(--smart-control-background);
    color: var(--smart-text);
    font-size: var(--smart-font-size-2);
    line-height: 1.45;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-xs);
    outline: none;
    transition: border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard);
  }
  select.smart-select {
    appearance: none;
    padding-inline-end: calc(var(--smart-control-padding-x) + 1.35rem);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) calc(50% - 0.12rem), calc(100% - 0.82rem) calc(50% - 0.12rem);
    background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
    background-repeat: no-repeat;
  }
  .smart-textarea { min-height: 8rem; padding-block: 0.875rem; resize: vertical; }
  .smart-input::placeholder, .smart-textarea::placeholder { color: var(--smart-text-placeholder); }
  .smart-input:hover, select.smart-select:hover, .smart-textarea:hover, .smart-select__trigger:hover { border-color: var(--smart-border-strong); }
  .smart-input:focus, select.smart-select:focus, .smart-textarea:focus, .smart-select__trigger:focus-visible { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-input[aria-invalid="true"] { border-color: var(--smart-danger); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-danger-soft); }

  .smart-input-group {
    display: flex;
    align-items: stretch;
    min-height: var(--smart-control-height);
    border: var(--smart-border-width) solid var(--smart-control-border);
    border-radius: var(--smart-radius-control);
    background: var(--smart-control-background);
    overflow: hidden;
  }
  .smart-input-group:focus-within { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-input-group .smart-input {
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .smart-input-group .smart-input:focus { box-shadow: none; }
  .smart-input-group__prefix,
  .smart-input-group__suffix {
    display: grid;
    place-items: center;
    padding-inline: 0.75rem;
    color: var(--smart-text-tertiary);
    font-size: var(--smart-font-size-1);
    font-weight: var(--smart-font-weight-medium);
    background: var(--smart-surface-muted);
  }
  .smart-input-group__prefix--icon,
  .smart-input-group__suffix--icon { padding-inline: 0.7rem; background: transparent; }
  .smart-input-group__prefix .smart-icon,
  .smart-input-group__suffix .smart-icon { --smart-icon-size: 1.05rem; }
  .smart-field__counter { justify-self: end; margin-block-start: calc(-1 * var(--smart-space-1)); color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); font-variant-numeric: tabular-nums; }
  .smart-field__counter[data-limit-reached] { color: var(--smart-warning); font-weight: var(--smart-font-weight-semibold); }
  .smart-input-group__action {
    appearance: none;
    min-width: 2.75rem;
    padding-inline: 0.7rem;
    border: 0;
    border-inline-start: 1px solid var(--smart-divider);
    background: transparent;
    color: var(--smart-text-secondary);
    font-size: var(--smart-font-size-1);
    font-weight: var(--smart-font-weight-semibold);
    cursor: pointer;
  }
  .smart-input-group__action:hover { background: var(--smart-surface-hover); color: var(--smart-text); }

  .smart-tags {
    display: grid;
    gap: var(--smart-space-2);
  }
  .smart-tags__control {
    min-height: var(--smart-control-height);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: var(--smart-border-width) solid var(--smart-control-border);
    border-radius: var(--smart-radius-control);
    background: var(--smart-control-background);
  }
  .smart-tags__control:focus-within { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-tags__input {
    flex: 1 1 6rem;
    min-width: 6rem;
    min-height: 1.75rem;
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: 0;
  }

  /* Custom select */
  .smart-select { position: relative; width: 100%; }
  .smart-select__trigger { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-3); text-align: start; cursor: pointer; }
  .smart-select__indicator { width: 1.35rem; height: 1.35rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; transition: rotate var(--smart-motion-duration) var(--smart-ease-spring), background var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-select__indicator::before { content: ""; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.1rem; }
  .smart-select__trigger[aria-expanded="true"] .smart-select__indicator { rotate: 180deg; }
  .smart-select__popover { position: fixed; inset: auto; width: var(--smart-select-width, 12rem); max-height: min(19rem, calc(100svh - 2rem)); margin: 0; padding: 0.375rem; overflow-y: auto; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-md); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); opacity: 0; scale: 0.985; translate: 0 -0.25rem; transform-origin: top center; transition: opacity var(--smart-motion-duration-fast) var(--smart-ease-out), scale var(--smart-motion-duration) var(--smart-ease-out), translate var(--smart-motion-duration) var(--smart-ease-out), overlay var(--smart-motion-duration-fast) allow-discrete, display var(--smart-motion-duration-fast) allow-discrete; }
  .smart-select__popover:popover-open { opacity: 1; scale: 1; translate: 0; }
  @starting-style { .smart-select__popover:popover-open { opacity: 0; scale: 0.985; translate: 0 -0.25rem; } }
  .smart-select__list { display: grid; gap: 2px; outline: 0; }
  .smart-select__option { min-height: var(--smart-control-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--smart-space-3); padding-inline: var(--smart-space-3); border-radius: var(--smart-radius-sm); color: var(--smart-text); cursor: pointer; user-select: none; }
  .smart-select__option::after { content: ""; width: 0.55rem; height: 0.3rem; border-inline-start: 1.7px solid currentColor; border-block-end: 1.7px solid currentColor; opacity: 0; rotate: -45deg; translate: 0 -0.08rem; }
  .smart-select__option:hover { background: var(--smart-surface-hover); }
  .smart-select__option[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
  .smart-select__option:focus-visible { outline: 0; background: var(--smart-surface-hover); box-shadow: inset 0 0 0 2px var(--smart-focus-color); }
  .smart-select__option[aria-selected="true"] { background: var(--smart-accent-soft); color: var(--smart-accent-strong); font-weight: var(--smart-font-weight-medium); }
  .smart-select__option[aria-selected="true"]::after { opacity: 1; }

  /* Custom date picker */
  .smart-date, .smart-time { position: relative; width: 100%; }
  .smart-date__trigger, .smart-time__trigger {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    letter-spacing: inherit;
    /* Content-sized so pickers sit naturally in grids; stretch with .smart-w-full. */
    width: fit-content;
    min-inline-size: 13rem;
    max-inline-size: 100%;
    min-height: var(--smart-control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--smart-space-3);
    padding: 0 var(--smart-control-padding-x);
    border: var(--smart-border-width) solid var(--smart-control-border);
    border-radius: var(--smart-radius-control);
    background: var(--smart-control-background);
    color: var(--smart-text);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-xs);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard);
  }
  .smart-date__trigger:hover, .smart-time__trigger:hover { border-color: var(--smart-border-strong); }
  .smart-date__trigger:focus-visible, .smart-time__trigger:focus-visible { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); outline: 0; }
  .smart-date__value, .smart-time__value { font-variant-numeric: tabular-nums; font-weight: var(--smart-font-weight-medium); }
  .smart-date__icon, .smart-time__icon {
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--smart-radius-full);
    background: var(--smart-surface-muted);
    color: var(--smart-text-secondary);
    transition: background var(--smart-motion-duration) var(--smart-ease-standard), color var(--smart-motion-duration) var(--smart-ease-standard);
  }
  .smart-date__icon::before { content: ""; width: 0.72rem; height: 0.72rem; border: 1.5px solid currentColor; border-radius: 0.18rem; box-shadow: inset 0 -0.28rem 0 0 currentColor; }
  .smart-time__icon::before { content: ""; width: 0.72rem; height: 0.72rem; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 1px transparent, -0.18rem 0 0 -0.02rem currentColor; }
  .smart-date__trigger:hover .smart-date__icon, .smart-time__trigger:hover .smart-time__icon { background: var(--smart-accent-soft); color: var(--smart-accent-strong); }

  .smart-date__popover, .smart-time__popover {
    position: fixed;
    inset: auto;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-lg);
    background: var(--smart-surface);
    color: var(--smart-text);
    box-shadow: var(--smart-shadow-md);
    backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate));
    opacity: 0;
    scale: 0.96;
    translate: 0 -0.35rem;
    transform-origin: top left;
    transition: opacity var(--smart-motion-duration) var(--smart-ease-out), scale var(--smart-motion-duration-slow) var(--smart-ease-spring), translate var(--smart-motion-duration-slow) var(--smart-ease-spring), overlay var(--smart-motion-duration) allow-discrete, display var(--smart-motion-duration) allow-discrete;
  }

  .smart-date__popover {
    --smart-date-day-size: 1.625rem;
    --smart-date-popover-width: calc(var(--smart-date-day-size) * 7 + 0.125rem * 6 + var(--smart-space-3) * 2);
    width: var(--smart-date-popover-width);
    max-width: calc(100vw - 2rem);
    padding: var(--smart-space-3);
    box-sizing: border-box;
  }

  .smart-time__popover {
    --smart-time-popover-width: 12.5rem;
    width: var(--smart-time-popover-width);
    max-width: calc(100vw - 2rem);
    padding: var(--smart-space-3);
    box-sizing: border-box;
  }
  .smart-date__popover:popover-open, .smart-time__popover:popover-open { opacity: 1; scale: 1; translate: 0; }
  @starting-style { .smart-date__popover:popover-open, .smart-time__popover:popover-open { opacity: 0; scale: 0.96; translate: 0 -0.35rem; } }

  .smart-date__header, .smart-time__header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--smart-space-2); margin-block-end: var(--smart-space-2); }
  .smart-time__header { grid-template-columns: 1fr; margin-block-end: var(--smart-space-3); }
  .smart-date__title, .smart-time__title { text-align: center; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); letter-spacing: -0.02em; }
  .smart-date__nav, .smart-time__nav {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--smart-radius-full);
    background: var(--smart-surface-muted);
    color: var(--smart-text-secondary);
    cursor: pointer;
    transition: background var(--smart-motion-duration-fast) var(--smart-ease-standard), color var(--smart-motion-duration-fast) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-spring);
  }
  .smart-date__nav:hover, .smart-time__nav:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-date__nav:active, .smart-time__nav:active { transform: scale(var(--smart-press-scale)); }

  .smart-date__weekdays { display: grid; grid-template-columns: repeat(7, var(--smart-date-day-size, 1.625rem)); gap: 0.125rem; justify-content: center; margin-block-end: 0.35rem; color: var(--smart-text-tertiary); font-size: 0.6875rem; font-weight: var(--smart-font-weight-semibold); text-align: center; }
  .smart-date__grid { display: grid; grid-template-columns: repeat(7, var(--smart-date-day-size, 1.625rem)); gap: 0.125rem; justify-content: center; width: fit-content; margin-inline: auto; }
  .smart-date__day {
    width: var(--smart-date-day-size, 1.625rem);
    height: var(--smart-date-day-size, 1.625rem);
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--smart-radius-full);
    background: transparent;
    color: var(--smart-text);
    font-size: var(--smart-font-size-0);
    font-variant-numeric: tabular-nums;
    font-weight: var(--smart-font-weight-medium);
    cursor: pointer;
    transition: background var(--smart-motion-duration-fast) var(--smart-ease-standard), color var(--smart-motion-duration-fast) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-spring), box-shadow var(--smart-motion-duration-fast) var(--smart-ease-standard);
  }
  .smart-date__day:hover { background: var(--smart-surface-hover); }
  .smart-date__day:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--smart-focus-color); }
  .smart-date__day--outside { color: var(--smart-text-tertiary); opacity: 0.72; }
  .smart-date__day--today:not(.smart-date__day--selected) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--smart-accent) 42%, var(--smart-border)); }
  .smart-date__day--selected { background: var(--smart-accent); color: var(--smart-on-accent); box-shadow: 0 2px 8px var(--smart-accent-soft); }
  .smart-date__day--selected:hover { background: var(--smart-accent-hover); color: var(--smart-on-accent); }
  .smart-date__day--in-range { background: var(--smart-accent-softer); border-radius: 0; }
  .smart-date__day--range-start {
    border-start-start-radius: var(--smart-radius-full);
    border-end-start-radius: var(--smart-radius-full);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .smart-date__day--range-end {
    border-start-end-radius: var(--smart-radius-full);
    border-end-end-radius: var(--smart-radius-full);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .smart-date__day--range-start.smart-date__day--range-end { border-radius: var(--smart-radius-full); }
  .smart-date__day--selected.smart-date__day--range-start,
  .smart-date__day--selected.smart-date__day--range-end {
    background-color: var(--smart-accent-softer);
    background-image: radial-gradient(circle closest-side, var(--smart-accent) 99%, transparent);
    box-shadow: none;
    color: var(--smart-on-accent);
  }
  .smart-date__day--selected.smart-date__day--range-start:hover,
  .smart-date__day--selected.smart-date__day--range-end:hover {
    background-color: var(--smart-accent-softer);
    background-image: radial-gradient(circle closest-side, var(--smart-accent-hover) 99%, transparent);
    color: var(--smart-on-accent);
  }

  .smart-date__footer, .smart-time__footer { display: flex; justify-content: space-between; gap: var(--smart-space-2); margin-block-start: var(--smart-space-2); padding-block-start: var(--smart-space-2); border-block-start: 1px solid var(--smart-divider); }
  .smart-date__action, .smart-time__action {
    min-height: 1.65rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--smart-radius-full);
    background: transparent;
    color: var(--smart-accent-strong);
    font-size: var(--smart-font-size-0);
    font-weight: var(--smart-font-weight-semibold);
    cursor: pointer;
  }
  .smart-date__action:hover, .smart-time__action:hover { background: var(--smart-accent-soft); }

  .smart-time__columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--smart-space-1); max-height: 11rem; overflow: auto; padding-inline: 0.1rem; }
  .smart-time__column { display: grid; gap: 0.125rem; align-content: start; }
  .smart-time__option {
    min-height: 1.85rem;
    padding: 0 0.45rem;
    border: 0;
    border-radius: var(--smart-radius-full);
    background: transparent;
    color: var(--smart-text-secondary);
    font-size: var(--smart-font-size-0);
    font-variant-numeric: tabular-nums;
    font-weight: var(--smart-font-weight-medium);
    cursor: pointer;
    transition: background var(--smart-motion-duration-fast) var(--smart-ease-standard), color var(--smart-motion-duration-fast) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-spring);
  }
  .smart-time__option:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-time__option:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--smart-focus-color); }
  .smart-time__option[aria-selected="true"] { background: var(--smart-accent); color: var(--smart-on-accent); box-shadow: 0 3px 10px var(--smart-accent-soft); }

  /* Native date/time fallback (prefer .smart-date / .smart-time) */
  .smart-input[type="date"],
  .smart-input[type="time"],
  .smart-input[type="datetime-local"] {
    min-height: var(--smart-control-height);
    border-radius: var(--smart-radius-md);
    color-scheme: light dark;
  }

  /* Range */
  .smart-range {
    appearance: none;
    width: 100%;
    min-height: 2rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
  }
  .smart-range::-webkit-slider-runnable-track {
    height: 0.38rem;
    border: 1px solid var(--smart-border-strong);
    border-radius: var(--smart-radius-full);
    background: linear-gradient(90deg, var(--smart-accent) 0 var(--smart-range-fill, 50%), var(--smart-surface-muted) var(--smart-range-fill, 50%) 100%);
    box-shadow: inset 0 1px 2px rgba(20, 20, 26, 0.06);
  }
  .smart-range::-moz-range-track {
    height: 0.38rem;
    border: 1px solid var(--smart-border-strong);
    border-radius: var(--smart-radius-full);
    background: linear-gradient(90deg, var(--smart-accent) 0 var(--smart-range-fill, 50%), var(--smart-surface-muted) var(--smart-range-fill, 50%) 100%);
    box-shadow: inset 0 1px 2px rgba(20, 20, 26, 0.06);
  }
  .smart-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.22rem;
    height: 1.22rem;
    margin-block-start: -0.47rem;
    border: 1px solid color-mix(in srgb, var(--smart-accent) 72%, white);
    border-radius: 50%;
    background: var(--smart-accent);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--smart-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition: scale var(--smart-motion-duration-fast) var(--smart-ease-spring), box-shadow var(--smart-motion-duration) var(--smart-ease-standard);
  }
  .smart-range::-moz-range-thumb {
    width: 1.22rem;
    height: 1.22rem;
    border: 1px solid color-mix(in srgb, var(--smart-accent) 72%, white);
    border-radius: 50%;
    background: var(--smart-accent);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--smart-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition: scale var(--smart-motion-duration-fast) var(--smart-ease-spring), box-shadow var(--smart-motion-duration) var(--smart-ease-standard);
  }
  .smart-range:hover::-webkit-slider-thumb { scale: 1.08; }
  .smart-range:hover::-moz-range-thumb { scale: 1.08; }
  .smart-range:active::-webkit-slider-thumb { scale: 1.14 0.92; }
  .smart-range:active::-moz-range-thumb { scale: 1.14 0.92; }
  .smart-range:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-focus-color), inset 0 1px 2px rgba(20, 20, 26, 0.06); }
  .smart-range:focus-visible::-moz-range-track { box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-focus-color), inset 0 1px 2px rgba(20, 20, 26, 0.06); }
  .smart-range:focus-visible { outline: 0; }
  .smart-range:disabled { opacity: 0.46; cursor: not-allowed; }

  /* Choice controls */
  .smart-choice { display: inline-flex; align-items: flex-start; gap: var(--smart-space-3); cursor: pointer; }
  .smart-choice input {
    appearance: none;
    width: 1.22rem;
    height: 1.22rem;
    display: grid;
    flex: 0 0 auto;
    place-content: center;
    margin: 0.1rem 0 0;
    border: 1.5px solid var(--smart-border-strong);
    background: var(--smart-control-background);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035), var(--smart-shadow-xs);
    cursor: pointer;
    transition: background var(--smart-motion-duration-fast) var(--smart-ease-standard), border-color var(--smart-motion-duration-fast) var(--smart-ease-standard), box-shadow var(--smart-motion-duration-fast) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-spring);
  }
  .smart-choice input[type="checkbox"] { border-radius: 0.34rem; }
  .smart-choice input[type="radio"] { border-radius: 50%; }
  .smart-choice input::before { content: ""; transform: scale(0); transition: transform var(--smart-motion-duration-fast) var(--smart-ease-spring); }
  .smart-choice input[type="checkbox"]::before { width: 0.32rem; height: 0.58rem; margin-block-start: -0.1rem; border: solid var(--smart-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); }
  .smart-choice input[type="radio"]::before { width: 0.52rem; aspect-ratio: 1; border-radius: 50%; background: var(--smart-accent); }
  .smart-choice input[type="checkbox"]:checked { border-color: var(--smart-accent); background: var(--smart-accent); }
  .smart-choice input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
  .smart-choice input[type="radio"]:checked { border-color: var(--smart-accent); box-shadow: inset 0 0 0 3px var(--smart-canvas-raised), 0 0 0 1px var(--smart-accent); }
  .smart-choice input[type="radio"]:checked::before { transform: scale(1); }
  .smart-choice input:active { transform: scale(var(--smart-press-scale)); }
  .smart-choice input:focus-visible { outline: var(--smart-focus-width) solid var(--smart-focus-color); outline-offset: 2px; }
  .smart-choice:has(input:disabled) { opacity: 0.48; cursor: not-allowed; }
  .smart-choice input:disabled { cursor: not-allowed; }
  .smart-choice__text { display: grid; line-height: 1.35; }
  .smart-choice__text small { color: var(--smart-text-tertiary); margin-block-start: var(--smart-space-1); }

  /* Switch */
  .smart-switch { display: inline-flex; align-items: center; gap: var(--smart-space-3); cursor: pointer; }
  .smart-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .smart-switch__track {
    width: 2.8rem; height: 1.65rem; padding: 0.15rem; flex: 0 0 auto;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-full);
    background: var(--smart-surface-muted);
    transition: background var(--smart-motion-duration) var(--smart-ease-standard), border-color var(--smart-motion-duration) var(--smart-ease-standard);
  }
  .smart-switch__track::after {
    content: ""; display: block; width: 1.22rem; height: 1.22rem;
    border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.22);
    transition: translate var(--smart-motion-duration) var(--smart-ease-spring);
  }
  .smart-switch input:checked + .smart-switch__track { background: var(--smart-accent); border-color: var(--smart-accent); }
  .smart-switch input:checked + .smart-switch__track::after { translate: 1.12rem 0; }
  .smart-switch input:focus-visible + .smart-switch__track { outline: var(--smart-focus-width) solid var(--smart-focus-color); outline-offset: 2px; }
  .smart-switch-row { cursor: pointer; }

  /* Segmented */
  .smart-segmented { --smart-segment-count: 1; --smart-segment-x: 0%; position: relative; isolation: isolate; display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--smart-border); border-radius: calc(var(--smart-radius-control) + 3px); background: var(--smart-surface-muted); overflow: hidden; }
  .smart-segmented[data-smart-segmented]::before { content: ""; position: absolute; z-index: 0; inset-block: 3px; inset-inline-start: 3px; width: calc((100% - 6px) / var(--smart-segment-count)); border: 1px solid var(--smart-border); border-radius: calc(var(--smart-radius-control) - 1px); background: var(--smart-surface-solid); box-shadow: var(--smart-shadow-sm); translate: var(--smart-segment-x) 0; transition: translate var(--smart-motion-duration-slow) var(--smart-ease-spring), width var(--smart-motion-duration) var(--smart-ease-out), background var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard); pointer-events: none; }
  .smart-segmented label { position: relative; z-index: 1; flex: 1 1 0; }
  .smart-segmented input { position: absolute; opacity: 0; }
  .smart-segmented span { position: relative; z-index: 1; min-height: calc(var(--smart-control-height) - 8px); display: grid; place-items: center; padding-inline: var(--smart-control-padding-x); border-radius: calc(var(--smart-radius-control) - 1px); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); cursor: pointer; white-space: nowrap; transition: color var(--smart-motion-duration) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-standard); }
  .smart-segmented input:checked + span { color: var(--smart-text); }
  .smart-segmented:not([data-smart-segmented]) input:checked + span { background: var(--smart-surface-solid); box-shadow: var(--smart-shadow-sm); }
  .smart-segmented input:active + span { transform: scale(var(--smart-press-scale)); }
  .smart-segmented input:focus-visible + span { outline: var(--smart-focus-width) solid var(--smart-focus-color); outline-offset: -2px; }
  .smart-segmented--moving::before { animation: smart-segment-morph var(--smart-motion-duration-slow) var(--smart-ease-out); }

  /* Cards */
  .smart-card { padding: var(--smart-space-6); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-surface); background: var(--smart-surface); box-shadow: var(--smart-shadow-sm); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); }
  .smart-card.smart-stack:has(> .smart-card__body) { --smart-stack-gap: 0; }
  .smart-card__header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--smart-space-3) var(--smart-space-5); margin-block-end: var(--smart-space-5); padding-block-end: var(--smart-space-4); border-block-end: 1px solid var(--smart-divider); }
  .smart-card__body { min-width: 0; }
  .smart-card__body + .smart-card__footer, .smart-card > .smart-card__footer { margin-block-start: var(--smart-space-5); }
  .smart-card__footer { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-3); padding-block-start: var(--smart-space-4); border-block-start: 1px solid var(--smart-divider); }
  .smart-card__title { min-width: 0; margin: 0; color: var(--smart-text); font-size: var(--smart-font-size-4); font-weight: var(--smart-font-weight-semibold); line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: anywhere; }
  .smart-card__title.smart-cluster > .smart-icon:first-child,
  .smart-card__header .smart-card__title .smart-icon:first-child { --smart-icon-size: 1.35em; flex-shrink: 0; }
  .smart-card__header > h1.smart-card__title { font-size: var(--smart-font-size-5); }
  .smart-card__subtitle { margin-block-start: var(--smart-space-1); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); line-height: var(--smart-line-height-body); }
  .smart-card--interactive { width: 100%; appearance: none; color: inherit; text-align: start; cursor: pointer; transition: translate var(--smart-motion-duration) var(--smart-ease-out), box-shadow var(--smart-motion-duration) var(--smart-ease-out), border-color var(--smart-motion-duration) var(--smart-ease-out); }
  .smart-card--interactive:hover { translate: 0 var(--smart-hover-lift); border-color: var(--smart-border-strong); box-shadow: var(--smart-shadow-md); }

  /* Badges */
  .smart-badge { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding-inline: 0.55rem; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); line-height: 1; }
  .smart-badge::before { content: ""; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: currentColor; }
  .smart-badge--accent { background: var(--smart-accent-soft); color: var(--smart-accent-strong); }
  .smart-badge--secondary { background: var(--smart-surface-muted); color: var(--smart-text-secondary); }
  .smart-badge--info { background: var(--smart-info-soft); color: var(--smart-info); }
  .smart-badge--success { background: var(--smart-success-soft); color: var(--smart-success); }
  .smart-badge--warning { background: var(--smart-warning-soft); color: var(--smart-warning); }
  .smart-badge--danger { background: var(--smart-danger-soft); color: var(--smart-danger); }
  .smart-badge--plain { gap: 0; }
  .smart-badge--plain::before { content: none; }
  .smart-badge:has(> .smart-icon)::before { content: none; }
  .smart-badge--dot { inline-size: 0.65rem; min-height: 0.65rem; padding: 0; overflow: hidden; color: transparent; }
  .smart-badge--dot::before { inline-size: 100%; block-size: 100%; }
  .smart-tab__count { display: inline-grid; place-items: center; min-inline-size: 1.35rem; min-height: 1.35rem; margin-inline-start: 0.4rem; padding-inline: 0.35rem; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); }

  /* Tabs */
  .smart-tabs { border-bottom: 1px solid var(--smart-divider); }
  .smart-tab-list { position: relative; isolation: isolate; display: flex; gap: var(--smart-space-1); overflow-x: auto; scrollbar-width: none; }
  .smart-tab { position: relative; z-index: 1; min-height: var(--smart-control-height); padding-inline: var(--smart-space-4); border: 0; background: transparent; color: var(--smart-text-secondary); font-weight: var(--smart-font-weight-medium); cursor: pointer; white-space: nowrap; }
  .smart-tab::after { content: ""; position: absolute; inset: auto var(--smart-space-3) -1px; height: 2px; border-radius: var(--smart-radius-full); background: var(--smart-accent); scale: 0 1; transition: scale var(--smart-motion-duration) var(--smart-ease-out); }
  .smart-tab:hover { color: var(--smart-text); }
  .smart-tab:focus-visible { outline: 0; border-radius: var(--smart-radius-sm); box-shadow: inset 0 0 0 var(--smart-focus-width) var(--smart-focus-color); }
  .smart-tab[aria-selected="true"] { color: var(--smart-text); }
  .smart-tab[aria-selected="true"]::after { scale: 1; }
  .smart-tab-panel { padding-block-start: var(--smart-space-5); }
  .smart-tab-panel.smart-enter { animation: smart-fade-slide var(--smart-motion-duration) var(--smart-ease-out); }
  .smart-stepper__panel.smart-enter { animation: smart-fade-slide var(--smart-motion-duration) var(--smart-ease-out); }

  /* Vertical tabs */
  .smart-tabs--vertical { display: grid; grid-template-columns: minmax(9.5rem, 14rem) minmax(0, 1fr); gap: var(--smart-space-5); border-block-end: 0; align-items: start; }
  .smart-tabs--vertical .smart-tab-list { flex-direction: column; gap: var(--smart-space-1); overflow-x: visible; border-inline-end: 1px solid var(--smart-divider); padding-inline-end: var(--smart-space-2); }
  .smart-tabs--vertical .smart-tab { justify-content: space-between; text-align: start; padding-inline: var(--smart-space-3); border-radius: var(--smart-radius-control); }
  .smart-tabs--vertical .smart-tab::after { inset: var(--smart-space-2) auto var(--smart-space-2) -1px; block-size: auto; inline-size: 2px; scale: 1 0; }
  .smart-tabs--vertical .smart-tab[aria-selected="true"]::after { scale: 1; }
  .smart-tabs--vertical .smart-tab-panel { padding-block-start: 0; }
  @media (max-width: 50rem) {
    .smart-tabs--vertical { grid-template-columns: minmax(0, 1fr); }
    .smart-tabs--vertical .smart-tab-list { flex-direction: row; border-inline-end: 0; border-block-end: 1px solid var(--smart-divider); padding-inline-end: 0; }
    .smart-tabs--vertical .smart-tab { justify-content: auto; text-align: start; border-radius: var(--smart-radius-sm); }
    .smart-tabs--vertical .smart-tab::after { inset: auto var(--smart-space-3) -1px; block-size: 2px; inline-size: auto; scale: 0 1; }
    .smart-tabs--vertical .smart-tab[aria-selected="true"]::after { scale: 1; }
    .smart-tabs--vertical .smart-tab-panel { padding-block-start: var(--smart-space-5); }
  }

  /* Split button */
  .smart-split-button { display: inline-flex; width: fit-content; }
  .smart-split-button .smart-button { margin-inline-start: -1px; }
  .smart-split-button .smart-button:hover, .smart-split-button .smart-button:focus-visible { z-index: 1; }
  .smart-split-button .smart-button:first-child { margin-inline-start: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
  .smart-split-button .smart-button--icon:last-child, .smart-split-button .smart-split-button__menu { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: 0.55rem; min-height: var(--smart-control-height); }

  /* Quantity stepper */
  .smart-quantity { display: inline-flex; width: fit-content; align-items: stretch; min-height: var(--smart-control-height); border: var(--smart-border-width) solid var(--smart-control-border); border-radius: var(--smart-radius-control); background: var(--smart-control-background); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-xs); overflow: hidden; transition: border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-quantity:focus-within { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-quantity__step { width: 2.6rem; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--smart-text-secondary); cursor: pointer; transition: background var(--smart-motion-duration-fast) var(--smart-ease-standard), color var(--smart-motion-duration-fast) var(--smart-ease-standard); }
  .smart-quantity__step:hover:not(:disabled) { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-quantity__step:disabled { opacity: 0.45; cursor: not-allowed; }
  .smart-quantity input { width: 3.75rem; min-height: 0; border: 0; background: transparent; color: var(--smart-text); text-align: center; font-variant-numeric: tabular-nums; outline: none; appearance: textfield; -moz-appearance: textfield; }
  .smart-quantity input::-webkit-outer-spin-button, .smart-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .smart-quantity--small { min-height: var(--smart-control-height-sm); }
  .smart-quantity--small .smart-quantity__step { width: 2.1rem; font-size: var(--smart-font-size-3); }

  /* Password strength meter */
  .smart-strength { display: grid; gap: 0.3rem; }
  .smart-strength__track { display: flex; gap: 0.25rem; }
  .smart-strength__seg { block-size: 0.3rem; flex: 1; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); transition: background var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-strength[data-strength="1"] .smart-strength__seg:nth-child(-n + 1) { background: var(--smart-danger); }
  .smart-strength[data-strength="2"] .smart-strength__seg:nth-child(-n + 2) { background: var(--smart-warning); }
  .smart-strength[data-strength="3"] .smart-strength__seg:nth-child(-n + 3) { background: var(--smart-info); }
  .smart-strength[data-strength="4"] .smart-strength__seg:nth-child(-n + 4) { background: var(--smart-success); }
  .smart-strength__label { min-height: 1.1em; color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); }

  /* File dropzone, progress, and validation feedback */
  .smart-file[data-smart-dropzone] .smart-file__control { border-style: dashed; }
  .smart-file--dragover .smart-file__control { border-color: var(--smart-accent); background: color-mix(in srgb, var(--smart-accent-softer) 80%, var(--smart-control-background)); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-file--rejected .smart-file__control { border-color: var(--smart-danger); }
  .smart-file__progress { position: absolute; inset: auto 0 0 0; block-size: 3px; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); overflow: hidden; opacity: 0; transition: opacity var(--smart-motion-duration-fast) var(--smart-ease-standard); }
  .smart-file__progress-fill { block-size: 100%; inline-size: 0%; background: var(--smart-accent); transition: inline-size 120ms linear; }
  .smart-file[data-smart-uploading] .smart-file__progress { opacity: 1; }
  .smart-file__error { color: var(--smart-danger); font-size: var(--smart-font-size-1); }

  /* Print-optimized document surface */
  .smart-print-document { padding: var(--smart-space-6); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface-solid); box-shadow: var(--smart-shadow-sm); }

  /* OTP verification input */
  .smart-otp { display: flex; width: fit-content; gap: var(--smart-space-2); }
  .smart-otp__digit { inline-size: 2.75rem; min-height: var(--smart-control-height); padding: 0; border: var(--smart-border-width) solid var(--smart-control-border); border-radius: var(--smart-radius-control); background: var(--smart-control-background); color: var(--smart-text); text-align: center; font-size: var(--smart-font-size-4); font-weight: var(--smart-font-weight-semibold); font-variant-numeric: tabular-nums; caret-color: var(--smart-accent); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-xs); outline: none; transition: border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-otp__digit:hover { border-color: var(--smart-border-strong); }
  .smart-otp__digit:focus { border-color: var(--smart-accent); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-otp__digit:disabled { opacity: 0.45; }
  .smart-otp__digit--filled { border-color: color-mix(in srgb, var(--smart-accent) 38%, var(--smart-border-strong)); background: color-mix(in srgb, var(--smart-accent-softer) 70%, var(--smart-control-background)); }
  .smart-otp[data-smart-otp-complete] .smart-otp__digit--filled { border-color: var(--smart-success); }
  .smart-otp--small .smart-otp__digit { inline-size: 2.15rem; min-height: var(--smart-control-height-sm); font-size: var(--smart-font-size-3); }

  /* Countdown */
  .smart-countdown { display: inline-flex; align-items: baseline; gap: 0.15em; color: var(--smart-text-secondary); font-variant-numeric: tabular-nums; font-weight: var(--smart-font-weight-semibold); }
  .smart-countdown--warn { color: var(--smart-danger); }
  .smart-countdown[data-countdown-expired] { color: var(--smart-danger); }

  .smart-button__menu-indicator {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    transition: rotate var(--smart-motion-duration) var(--smart-ease-spring), background var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), scale var(--smart-motion-duration-fast) var(--smart-ease-spring);
  }
  .smart-button__menu-indicator::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.1rem;
  }
  .smart-button[aria-haspopup="menu"][aria-expanded="true"] .smart-button__menu-indicator { rotate: 180deg; }

  /* Accordion */
  .smart-accordion { border-block: 1px solid var(--smart-divider); }
  .smart-accordion details { interpolate-size: allow-keywords; }
  .smart-accordion details + details { border-block-start: 1px solid var(--smart-divider); }
  .smart-accordion details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size var(--smart-motion-duration-slow) var(--smart-ease-out), opacity var(--smart-motion-duration) var(--smart-ease-standard), content-visibility var(--smart-motion-duration-slow) allow-discrete; }
  .smart-accordion details[open]::details-content { block-size: auto; opacity: 1; }
  .smart-accordion summary { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-4); list-style: none; font-weight: var(--smart-font-weight-medium); cursor: pointer; }
  .smart-accordion summary::-webkit-details-marker { display: none; }
  .smart-accordion__indicator { margin-inline-start: auto; color: var(--smart-text-tertiary); transition: rotate var(--smart-motion-duration) var(--smart-ease-out); }
  .smart-accordion details[open] .smart-accordion__indicator { rotate: 180deg; }
  .smart-accordion__content { padding: 0 var(--smart-space-7) var(--smart-space-5) 0; color: var(--smart-text-secondary); }

  /* Dialog and drawer */
  .smart-dialog { width: min(40rem, calc(100% - 2rem)); padding: 0; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-xl); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-lg); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); opacity: 0; scale: 0.96; translate: 0 0.75rem; transition: opacity var(--smart-motion-duration) var(--smart-ease-out), scale var(--smart-motion-duration) var(--smart-ease-out), translate var(--smart-motion-duration) var(--smart-ease-out), overlay var(--smart-motion-duration) allow-discrete, display var(--smart-motion-duration) allow-discrete; }
  .smart-dialog[open] { opacity: 1; scale: 1; translate: 0; }
  .smart-dialog::backdrop { background: var(--smart-overlay); backdrop-filter: blur(5px); opacity: 0; transition: opacity var(--smart-motion-duration) var(--smart-ease-out), overlay var(--smart-motion-duration) allow-discrete, display var(--smart-motion-duration) allow-discrete; }
  .smart-dialog[open]::backdrop { opacity: 1; }
  @starting-style { .smart-dialog[open] { opacity: 0; scale: 0.96; translate: 0 0.75rem; } .smart-dialog[open]::backdrop { opacity: 0; } }
  .smart-dialog__header, .smart-dialog__body, .smart-dialog__footer { padding: var(--smart-space-6) var(--smart-space-7); }
  .smart-dialog__header { border-bottom: 1px solid var(--smart-divider); }
  .smart-dialog__title { margin: 0; font-size: var(--smart-font-size-4); line-height: 1.25; letter-spacing: -0.015em; }
  .smart-dialog__body { color: var(--smart-text-secondary); }
  .smart-dialog__footer { display: flex; justify-content: flex-end; gap: var(--smart-space-4); border-top: 1px solid var(--smart-divider); }
  .smart-drawer { width: min(28rem, calc(100% - 1rem)); max-width: none; height: calc(100% - 1rem); max-height: none; margin: 0.5rem 0.5rem 0.5rem auto; border-radius: var(--smart-radius-xl); translate: 2rem 0; scale: 1; }
  .smart-drawer[open] { translate: 0; }
  @starting-style { .smart-drawer[open] { translate: 2rem 0; scale: 1; } }

  /* Popover and menu */
  .smart-popover { width: min(20rem, calc(100vw - 2rem)); padding: var(--smart-space-3); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-md); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); opacity: 0; scale: 0.96; translate: 0 -0.3rem; transition: opacity var(--smart-motion-duration-fast) var(--smart-ease-out), scale var(--smart-motion-duration-fast) var(--smart-ease-out), translate var(--smart-motion-duration-fast) var(--smart-ease-out), overlay var(--smart-motion-duration-fast) allow-discrete, display var(--smart-motion-duration-fast) allow-discrete; }
  .smart-popover[data-smart-anchor] { position: fixed; inset: auto; margin: 0; }
  .smart-popover:popover-open { opacity: 1; scale: 1; translate: 0; }
  @starting-style { .smart-popover:popover-open { opacity: 0; scale: 0.96; translate: 0 -0.3rem; } }
  .smart-menu { display: grid; gap: 2px; }
  .smart-menu button { min-height: 2.3rem; display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-5); padding-inline: var(--smart-space-3); border: 0; border-radius: var(--smart-radius-sm); background: transparent; color: var(--smart-text); text-align: start; cursor: pointer; }
  .smart-menu button:hover { background: var(--smart-surface-hover); }
  .smart-popover:not([data-smart-keyboard-open]) .smart-menu button:focus-visible { outline: 0; background: var(--smart-surface-hover); }
  .smart-menu button small { color: var(--smart-text-tertiary); }
  .smart-menu :is([role="menuitemcheckbox"], [role="option"]) { justify-content: flex-start; }
  .smart-menu :is([role="menuitemcheckbox"], [role="option"]) small { margin-inline-start: auto; }
  .smart-menu__label { padding: 0.5rem var(--smart-space-3) 0.2rem; color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); letter-spacing: var(--smart-letter-spacing-label); text-transform: uppercase; }
  .smart-menu__separator { height: 1px; margin: var(--smart-space-2) 0; border: 0; background: var(--smart-divider); }
  .smart-menu__check, .smart-multiselect__check { inline-size: 1rem; block-size: 1rem; display: grid; place-items: center; flex: none; border: 1px solid var(--smart-border-strong); border-radius: 0.25rem; color: transparent; }
  :is(.smart-menu [role="menuitemcheckbox"][aria-checked="true"], .smart-multiselect [role="option"][aria-selected="true"]) :is(.smart-menu__check, .smart-multiselect__check) { border-color: var(--smart-accent); background: var(--smart-accent); color: var(--smart-on-accent); }

  /* Tooltip */
  .smart-tooltip { position: relative; }
  .smart-tooltip::after { content: attr(data-tooltip); position: absolute; z-index: var(--smart-z-tooltip); inset: auto auto calc(100% + 0.55rem) 50%; translate: -50% 0.3rem; width: max-content; max-width: 16rem; padding: 0.38rem 0.58rem; border-radius: var(--smart-radius-xs); background: var(--smart-text); color: var(--smart-canvas); box-shadow: var(--smart-shadow-sm); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-medium); line-height: 1.25; pointer-events: none; opacity: 0; transition: opacity var(--smart-motion-duration-fast), translate var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-tooltip:hover::after, .smart-tooltip:focus-visible::after { opacity: 1; translate: -50% 0; }
  .smart-tooltip[data-smart-tooltip-hidden]::after { display: none; }

  /* Toast */
  .smart-toast-region { position: fixed; z-index: var(--smart-z-toast); inset: auto; width: min(23rem, calc(100% - 2rem)); display: grid; gap: var(--smart-space-3); pointer-events: none; }
  .smart-toast-region:not([data-placement]), .smart-toast-region[data-placement="bottom-end"] { inset-block-end: var(--smart-toast-bottom-offset, var(--smart-space-5)); inset-inline-end: var(--smart-space-5); }
  .smart-toast-region[data-placement="bottom-start"] { inset-block-end: var(--smart-toast-bottom-offset, var(--smart-space-5)); inset-inline-start: var(--smart-space-5); }
  .smart-toast-region[data-placement="top-end"] { inset-block-start: var(--smart-toast-top-offset, var(--smart-space-5)); inset-inline-end: var(--smart-space-5); }
  .smart-toast-region[data-placement="top-start"] { inset-block-start: var(--smart-toast-top-offset, var(--smart-space-5)); inset-inline-start: var(--smart-space-5); }
  .smart-toast-region[data-placement="top-center"], .smart-toast-region[data-placement="bottom-center"] { inset-inline-start: 50%; translate: -50% 0; }
  .smart-toast-region[data-placement="top-center"] { inset-block-start: var(--smart-toast-top-offset, var(--smart-space-5)); }
  .smart-toast-region[data-placement="bottom-center"] { inset-block-end: var(--smart-toast-bottom-offset, var(--smart-space-5)); }
  body:has(.smart-scroll-top:not([hidden])) .smart-toast-region[data-placement="bottom-end"] { inset-block-end: calc(var(--smart-space-5) + var(--smart-control-height) + var(--smart-space-3)); }
  .smart-toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--smart-space-3); padding: var(--smart-space-4); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-lg); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); pointer-events: auto; animation: smart-toast-in var(--smart-motion-duration-slow) var(--smart-ease-spring); }
  .smart-toast.smart-toast--leaving { animation: smart-toast-out var(--smart-motion-duration) var(--smart-ease-standard) forwards; }
  .smart-toast__icon { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; background: var(--smart-success-soft); color: var(--smart-success); font-weight: var(--smart-font-weight-bold); }
  .smart-toast--info .smart-toast__icon { background: var(--smart-info-soft); color: var(--smart-info); }
  .smart-toast--warning .smart-toast__icon { background: var(--smart-warning-soft); color: var(--smart-warning); }
  .smart-toast--danger .smart-toast__icon { background: var(--smart-danger-soft); color: var(--smart-danger); }
  .smart-toast__content { display: grid; gap: 0.1rem; }
  .smart-toast__content strong { font-size: var(--smart-font-size-1); }
  .smart-toast__content span { color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); }
  .smart-toast__close { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--smart-text-tertiary); cursor: pointer; }
  .smart-toast__close:hover { background: var(--smart-surface-hover); color: var(--smart-text); }

  /* Progress and skeleton */
  .smart-progress { width: 100%; height: 0.45rem; overflow: hidden; border: 0; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); }
  .smart-progress::-webkit-progress-bar { background: var(--smart-surface-muted); }
  .smart-progress::-webkit-progress-value { border-radius: inherit; background: var(--smart-accent); transition: inline-size var(--smart-motion-duration-slow) var(--smart-ease-out); }
  .smart-progress::-moz-progress-bar { border-radius: inherit; background: var(--smart-accent); }
  .smart-progress-ring { --smart-progress-value: 0; --smart-progress-size: 4rem; --smart-progress-thickness: 0.42rem; position: relative; inline-size: var(--smart-progress-size); block-size: var(--smart-progress-size); display: inline-grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--smart-accent) calc(var(--smart-progress-value) * 1%), var(--smart-surface-muted) 0); font-variant-numeric: tabular-nums; }
  .smart-progress-ring::before { content: ""; position: absolute; inset: var(--smart-progress-thickness); border-radius: inherit; background: var(--smart-canvas-raised); }
  .smart-progress-ring__value { position: relative; z-index: 1; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-spinner { width: 1.25rem; aspect-ratio: 1; display: inline-block; border: 2px solid var(--smart-border-strong); border-top-color: var(--smart-accent); border-radius: 50%; animation: smart-spin 700ms linear infinite; }
  .smart-skeleton { min-height: 0.85rem; border-radius: var(--smart-radius-xs); background: linear-gradient(100deg, var(--smart-surface-muted) 20%, var(--smart-surface-hover) 42%, var(--smart-surface-muted) 64%); background-size: 250% 100%; animation: smart-shimmer 1.4s var(--smart-ease-standard) infinite; }
  .smart-skeleton--row { min-height: 2.75rem; border-radius: var(--smart-radius-sm); }
  .smart-skeleton--avatar { width: 2.5rem; aspect-ratio: 1; border-radius: 50%; }

  /* Table */
  .smart-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); box-shadow: var(--smart-shadow-sm); }
  .smart-table { width: 100%; border-collapse: collapse; font-size: var(--smart-font-size-1); }
  .smart-table caption { padding: var(--smart-space-4) var(--smart-space-5); text-align: start; color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); border-bottom: 1px solid var(--smart-divider); }
  .smart-table th, .smart-table td { padding: var(--smart-space-3) var(--smart-space-4); border-bottom: 1px solid var(--smart-divider); text-align: start; vertical-align: middle; }
  .smart-table th { color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); letter-spacing: var(--smart-letter-spacing-label); text-transform: uppercase; background: var(--smart-canvas-raised); white-space: nowrap; }
  .smart-table tbody tr:last-child td { border-bottom: 0; }
  .smart-table tbody tr:hover { background: var(--smart-surface-hover); }
  .smart-table tbody tr[data-smart-selected="true"] { background: var(--smart-accent-softer); }
  .smart-table__sort { appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .smart-table__sort-icon { display: inline-flex; flex-direction: column; margin-block: -0.2rem; opacity: 0.35; }
  .smart-table__sort-icon .smart-icon { margin-block: -0.125rem; }
  .smart-table__sort[aria-sort="ascending"] .smart-table__sort-up,
  .smart-table__sort[aria-sort="descending"] .smart-table__sort-down { color: var(--smart-accent); opacity: 1; }
  .smart-table__sort[aria-sort="ascending"] .smart-table__sort-down,
  .smart-table__sort[aria-sort="descending"] .smart-table__sort-up { opacity: 0.18; }
  .smart-table__sort[aria-sort]:not([aria-sort="none"]) .smart-table__sort-icon { opacity: 1; }
  .smart-table__empty td { padding: var(--smart-space-8) var(--smart-space-5); text-align: center; color: var(--smart-text-tertiary); }
  .smart-table--compact th, .smart-table--compact td { padding-block: var(--smart-space-2); }
  .smart-table--sticky thead th { position: sticky; inset-block-start: 0; z-index: var(--smart-z-sticky); box-shadow: 0 1px var(--smart-divider); }
  .smart-table col { inline-size: var(--smart-table-column-width, auto); }
  .smart-table tfoot { background: var(--smart-canvas-raised); font-weight: var(--smart-font-weight-semibold); }
  .smart-table__expand { inline-size: 2rem; min-height: 2rem; padding: 0; }
  .smart-table__detail td { padding: var(--smart-space-5); background: var(--smart-canvas-raised); }
  .smart-table__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--smart-space-3);
    padding: var(--smart-space-3) var(--smart-space-4);
    border-bottom: 1px solid var(--smart-divider);
    background: var(--smart-accent-softer);
  }
  .smart-table__bar[hidden] { display: none !important; }
  .smart-table__count { color: var(--smart-accent-strong); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-table__actions { display: flex; flex-wrap: wrap; gap: var(--smart-space-2); }

  /* Pagination */
  .smart-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-2); }
  .smart-pagination__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-1); margin: 0; padding: 0; list-style: none; }
  .smart-pagination__link { min-width: 2.35rem; min-height: 2.35rem; display: inline-grid; place-items: center; padding-inline: 0.75rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-full); background: var(--smart-control-background); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); text-decoration: none; box-shadow: var(--smart-shadow-xs); transition: background var(--smart-motion-duration) var(--smart-ease-standard), border-color var(--smart-motion-duration) var(--smart-ease-standard), color var(--smart-motion-duration) var(--smart-ease-standard), transform var(--smart-motion-duration-fast) var(--smart-ease-standard); }
  .smart-pagination__link:hover { background: var(--smart-surface-hover); color: var(--smart-text); border-color: var(--smart-border-strong); transform: translateY(-1px); }
  .smart-pagination__link[aria-current="page"] { background: var(--smart-accent-soft); border-color: color-mix(in srgb, var(--smart-accent) 35%, transparent); color: var(--smart-accent-strong); }
  .smart-pagination__link[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
  .smart-pagination__summary { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); }
  .smart-pagination__size { display: inline-flex; align-items: center; gap: var(--smart-space-2); margin-inline-end: auto; color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); }
  .smart-pagination__size select.smart-select { width: auto; min-width: 5rem; padding-inline-start: var(--smart-space-3); }

  /* Compatibility banner — shown by JS when the browser misses the 36-month baseline */
  .smart-compat-banner { position: fixed; z-index: var(--smart-z-banner); inset-block-start: 0; inset-inline: 0; display: flex; align-items: center; justify-content: center; gap: var(--smart-space-3); padding: var(--smart-space-3) var(--smart-space-4); border-block-end: 1px solid color-mix(in srgb, var(--smart-warning) 32%, var(--smart-border)); background: color-mix(in srgb, var(--smart-warning-soft) 78%, var(--smart-surface)); color: var(--smart-text); font-size: var(--smart-font-size-1); box-shadow: var(--smart-shadow-md); }
  .smart-compat-banner[hidden] { display: none !important; }
  .smart-compat-banner p { margin: 0; }
  .smart-compat-banner a { color: var(--smart-accent-strong); font-weight: var(--smart-font-weight-semibold); }
  .smart-compat-banner__close { appearance: none; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; cursor: pointer; }
  .smart-compat-banner__close:hover { background: var(--smart-surface-hover); }

  /* Payment — agent checkout slot; host mounts a real payment element inside */
  .smart-payment { display: grid; gap: var(--smart-space-3); padding: var(--smart-space-5); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-surface); background: var(--smart-surface); box-shadow: var(--smart-shadow-xs); }
  .smart-payment__summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--smart-space-3); }
  .smart-payment__label { font-weight: var(--smart-font-weight-semibold); }
  .smart-payment__amount { font-size: var(--smart-font-size-4); font-weight: var(--smart-font-weight-bold); letter-spacing: -0.02em; }
  .smart-payment__element { min-height: var(--smart-control-height); border-radius: var(--smart-radius-md); transition: background var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-payment__element[aria-busy="true"] { background: var(--smart-surface-muted); }

  /* Alerts */
  .smart-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--smart-space-3); padding: var(--smart-space-4) var(--smart-space-5); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); box-shadow: var(--smart-shadow-sm); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); }
  .smart-alert__icon { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--smart-surface-muted); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-bold); }
  .smart-alert__content { display: grid; gap: 0.15rem; min-width: 0; }
  .smart-alert__content strong { font-size: var(--smart-font-size-2); }
  .smart-alert__content p { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); line-height: 1.5; }
  .smart-alert__close { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--smart-text-tertiary); cursor: pointer; }
  .smart-alert__close:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-alert--info { border-color: color-mix(in srgb, var(--smart-info) 24%, var(--smart-border)); background: color-mix(in srgb, var(--smart-info-soft) 55%, var(--smart-surface)); }
  .smart-alert--info .smart-alert__icon { background: var(--smart-info-soft); color: var(--smart-info); }
  .smart-alert--success { border-color: color-mix(in srgb, var(--smart-success) 24%, var(--smart-border)); background: color-mix(in srgb, var(--smart-success-soft) 55%, var(--smart-surface)); }
  .smart-alert--success .smart-alert__icon { background: var(--smart-success-soft); color: var(--smart-success); }
  .smart-alert--warning { border-color: color-mix(in srgb, var(--smart-warning) 24%, var(--smart-border)); background: color-mix(in srgb, var(--smart-warning-soft) 55%, var(--smart-surface)); }
  .smart-alert--warning .smart-alert__icon { background: var(--smart-warning-soft); color: var(--smart-warning); }
  .smart-alert--danger { border-color: color-mix(in srgb, var(--smart-danger) 24%, var(--smart-border)); background: color-mix(in srgb, var(--smart-danger-soft) 55%, var(--smart-surface)); }
  .smart-alert--danger .smart-alert__icon { background: var(--smart-danger-soft); color: var(--smart-danger); }

  /* Form errors */
  .smart-error { color: var(--smart-danger); font-size: var(--smart-font-size-1); line-height: 1.4; }
  .smart-field--invalid .smart-input, .smart-field--invalid .smart-textarea, .smart-field--invalid .smart-select__trigger, .smart-field--invalid .smart-combobox__input, .smart-field--invalid .smart-file__control, .smart-field--invalid .smart-date__trigger, .smart-field--invalid .smart-time__trigger { border-color: var(--smart-danger); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-danger-soft); }
  .smart-form-errors { padding: var(--smart-space-4) var(--smart-space-5); border: 1px solid color-mix(in srgb, var(--smart-danger) 28%, var(--smart-border)); border-radius: var(--smart-radius-lg); background: color-mix(in srgb, var(--smart-danger-soft) 72%, var(--smart-surface)); color: var(--smart-text); box-shadow: var(--smart-shadow-xs); }
  .smart-form-errors h2, .smart-form-errors h3 { margin: 0 0 var(--smart-space-2); font-size: var(--smart-font-size-2); }

  /* Native validation — :user-invalid/:user-valid match only after interaction, unlike :invalid */
  :is(.smart-input, select.smart-select, .smart-textarea):user-invalid { border-color: var(--smart-danger); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-danger-soft); }
  :is(.smart-input, select.smart-select, .smart-textarea):user-valid { border-color: color-mix(in srgb, var(--smart-success) 55%, var(--smart-border-strong)); }
  .smart-input-group:has(:user-invalid) { border-color: var(--smart-danger); }
  .smart-input-group:has(:user-invalid):focus-within { box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-danger-soft); }
  .smart-field:has(:where(input, select, textarea):required) > .smart-label::after { content: " *"; color: var(--smart-danger); }
  .smart-error--live { display: none; }
  .smart-field:has(:user-invalid) .smart-error--live, .smart-field--invalid .smart-error--live { display: block; }
  .smart-form-errors ul { margin: 0; padding-inline-start: 1.1rem; color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); }
  .smart-form-errors a { color: var(--smart-danger); font-weight: var(--smart-font-weight-medium); }
  .smart-fieldset { margin: 0; padding: 0; border: 0; }
  .smart-fieldset legend { margin-block-end: var(--smart-space-3); font-size: var(--smart-font-size-2); font-weight: var(--smart-font-weight-semibold); }
  .smart-fieldset .smart-stack { --smart-stack-gap: var(--smart-form-gap, var(--smart-space-5)); }

  /* Breadcrumbs */
  .smart-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-2); margin: 0; padding: 0; list-style: none; color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); }
  .smart-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--smart-space-2); }
  .smart-breadcrumbs li + li::before { content: "/"; opacity: 0.55; }
  .smart-breadcrumbs a { color: var(--smart-text-secondary); text-decoration: none; font-weight: var(--smart-font-weight-medium); }
  .smart-breadcrumbs a:hover { color: var(--smart-accent); }
  .smart-breadcrumbs [aria-current="page"] { color: var(--smart-text); font-weight: var(--smart-font-weight-semibold); }
  .smart-breadcrumbs__expand { min-inline-size: 2rem; min-block-size: 2rem; display: grid; place-items: center; padding: 0 var(--smart-space-2); border: 0; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text-secondary); cursor: pointer; }
  .smart-breadcrumbs__expand:hover { background: var(--smart-surface-hover); color: var(--smart-text); }

  .smart-connectivity { display: inline-flex; align-items: center; gap: var(--smart-space-2); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); }
  .smart-connectivity::before { content: ""; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--smart-text-tertiary); box-shadow: 0 0 0 2px var(--smart-canvas-raised); }
  .smart-connectivity--online::before { background: var(--smart-success); }
  .smart-connectivity--offline::before { background: var(--smart-danger); }

  .smart-scroll-top { position: fixed; z-index: var(--smart-z-sticky); inset-block-end: var(--smart-scroll-top-block-offset, var(--smart-space-5)); inset-inline-end: var(--smart-scroll-top-inline-offset, var(--smart-space-5)); inline-size: var(--smart-control-height); block-size: var(--smart-control-height); display: grid; place-items: center; padding: 0; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-full); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-lg); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); cursor: pointer; }
  .smart-scroll-top[hidden] { display: none; }

  .smart-virtual-list { overflow: auto; overflow-anchor: none; contain: strict; box-sizing: border-box; }

  /* Combobox */
  .smart-combobox { position: relative; width: 100%; }
  .smart-combobox__input { padding-inline-end: 2.5rem; border-radius: var(--smart-radius-md); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) calc(50% - 0.12rem), calc(100% - 0.85rem) calc(50% - 0.12rem); background-size: 0.34rem 0.34rem, 0.34rem 0.34rem; background-repeat: no-repeat; }
  .smart-combobox__empty { padding: var(--smart-space-4); color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); text-align: center; }
  .smart-combobox__option[hidden] { display: none !important; }

  /* Empty state */
  .smart-empty { display: grid; justify-items: center; gap: var(--smart-space-4); padding: var(--smart-space-9) var(--smart-space-6); border: 1px dashed color-mix(in srgb, var(--smart-border-strong) 82%, transparent); border-radius: var(--smart-radius-xl); background: linear-gradient(180deg, var(--smart-canvas-raised), color-mix(in srgb, var(--smart-surface-muted) 42%, var(--smart-canvas-raised))); text-align: center; }
  .smart-empty__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--smart-surface); color: var(--smart-accent-strong); font-size: var(--smart-font-size-4); box-shadow: var(--smart-shadow-sm); border: 1px solid var(--smart-border); }
  .smart-empty h3 { margin: 0; font-size: var(--smart-font-size-4); }
  .smart-empty p { max-width: 24rem; margin: 0; color: var(--smart-text-secondary); }

  /* Avatar */
  .smart-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--smart-accent-soft); color: var(--smart-accent-strong); font-weight: var(--smart-font-weight-semibold); line-height: 1; user-select: none; }
  .smart-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .smart-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--smart-font-size-0); }
  .smart-avatar--md { width: 2.5rem; height: 2.5rem; font-size: var(--smart-font-size-1); }
  .smart-avatar--lg { width: 3.25rem; height: 3.25rem; font-size: var(--smart-font-size-3); }
  .smart-avatar--small { width: 1.75rem; height: 1.75rem; font-size: var(--smart-font-size-0); }
  .smart-avatar--large { width: 3.25rem; height: 3.25rem; font-size: var(--smart-font-size-3); }
  .smart-avatar-wrap { position: relative; display: inline-flex; }
  .smart-avatar__status { position: absolute; inset: auto 0 0 auto; inline-size: 0.72rem; block-size: 0.72rem; border: 2px solid var(--smart-canvas-raised); border-radius: 50%; background: var(--smart-text-tertiary); }
  .smart-avatar__status--online, .smart-avatar__status[data-status="online"] { background: var(--smart-success); }
  .smart-avatar__status--away, .smart-avatar__status[data-status="away"] { background: var(--smart-warning); }
  .smart-avatar__status--busy, .smart-avatar__status[data-status="busy"] { background: var(--smart-danger); }
  .smart-avatar-group { display: flex; align-items: center; padding-inline-start: 0.45rem; }
  .smart-avatar-group > * { margin-inline-start: -0.45rem; }
  .smart-avatar-group .smart-avatar { border: 2px solid var(--smart-canvas-raised); }
  .smart-avatar-group__more { min-inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border: 2px solid var(--smart-canvas-raised); border-radius: 50%; background: var(--smart-surface-muted); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); }

  /* List */
  .smart-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-lg); background: var(--smart-surface); overflow: hidden; box-shadow: var(--smart-shadow-xs); }
  .smart-list__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--smart-space-3); min-height: var(--smart-control-height); padding: var(--smart-space-3) var(--smart-space-4); border-bottom: 1px solid var(--smart-divider); }
  .smart-list__item:last-child { border-bottom: 0; }
  .smart-list__item:hover { background: var(--smart-surface-hover); }
  .smart-list__main { display: grid; gap: 0.1rem; min-width: 0; }
  .smart-list__title { font-weight: var(--smart-font-weight-medium); }
  .smart-list__detail { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); }
  .smart-list__meta { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); white-space: nowrap; }
  .smart-list__item--interactive { width: 100%; appearance: none; border: 0; background: transparent; color: inherit; text-align: start; cursor: pointer; }
  .smart-list__item--interactive:focus-visible { outline: var(--smart-focus-width) solid var(--smart-focus-color); outline-offset: -2px; }
  .smart-list__link { color: inherit; text-decoration: none; }
  .smart-link { color: var(--smart-accent-strong); font-weight: var(--smart-font-weight-medium); text-underline-offset: 0.2em; }

  /* File upload */
  .smart-file { display: grid; gap: var(--smart-space-2); }
  .smart-file__control { position: relative; min-height: var(--smart-control-height); display: flex; align-items: center; gap: var(--smart-space-3); padding: var(--smart-space-3) var(--smart-space-4); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-control-background); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-xs); cursor: pointer; transition: border-color var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-file__control:hover { border-color: color-mix(in srgb, var(--smart-accent) 34%, var(--smart-border-strong)); background: color-mix(in srgb, var(--smart-accent-softer) 72%, var(--smart-control-background)); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.025), var(--smart-shadow-sm); }
  .smart-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .smart-file__label { padding: 0.35rem 0.7rem; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); box-shadow: var(--smart-shadow-xs); }
  .smart-file__name { color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); }
  .smart-file--compact .smart-file__control { min-height: var(--smart-control-height-sm); }

  /* Search */
  .smart-search { position: relative; width: 100%; }
  .smart-search__input { padding-inline: 2.65rem 2.45rem; border-radius: var(--smart-radius-full); }
  .smart-search__input::-webkit-search-cancel-button,
  .smart-search__input::-webkit-search-decoration,
  .smart-search__input::-webkit-search-results-button,
  .smart-search__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .smart-search__input::-ms-clear { display: none; width: 0; height: 0; }
  .smart-search__icon { position: absolute; inset-block: 0; inset-inline-start: var(--smart-space-3); display: grid; place-items: center; color: var(--smart-text-tertiary); pointer-events: none; }
  .smart-search__clear { position: absolute; inset-block: 0; inset-inline-end: 0.35rem; width: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--smart-text-tertiary); cursor: pointer; }
  .smart-search__clear:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-search__clear[hidden] { display: none !important; }

  /* Chip */
  .smart-chip { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.75rem; padding-inline: 0.55rem 0.35rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-medium); }
  .smart-chip__remove { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
  .smart-chip__remove:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-chip--accent { background: var(--smart-accent-soft); border-color: color-mix(in srgb, var(--smart-accent) 28%, transparent); color: var(--smart-accent-strong); }

  /* Page header */
  .smart-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--smart-space-4) var(--smart-space-6); padding-block: var(--smart-space-6); border-bottom: 1px solid var(--smart-divider); }
  .smart-page-header__content { min-width: 0; }
  .smart-page-header__title { overflow-wrap: anywhere; }
  .smart-page-header__description { text-wrap: pretty; }
  .smart-page-header h1 { margin: 0; font-size: var(--smart-font-size-5); letter-spacing: var(--smart-letter-spacing-tight); line-height: var(--smart-line-height-tight); }
  .smart-page-header p { margin: var(--smart-space-2) 0 0; max-width: 42rem; color: var(--smart-text-secondary); }
  .smart-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-3); }

  /* App shell and sidebar */
  .smart-app-shell { position: relative; display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); min-height: 24rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-surface); overflow: hidden; background: var(--smart-surface); box-shadow: var(--smart-shadow-sm); }
  .smart-app-shell[data-collapsed] { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .smart-app-shell[data-collapsed] .smart-sidebar { padding-inline: var(--smart-space-3); overflow: hidden; }
  .smart-app-shell[data-collapsed] .smart-sidebar__top { flex-direction: column; align-items: center; }
  .smart-sidebar { display: grid; align-content: start; gap: var(--smart-space-2); padding: var(--smart-space-4); border-inline-end: 1px solid var(--smart-divider); background: var(--smart-canvas-raised); }
  .smart-sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-2); }
  .smart-sidebar__top .smart-sidebar__brand { padding-block-end: var(--smart-space-2); flex: 1; min-width: 0; }
  .smart-sidebar__brand { padding: var(--smart-space-2) var(--smart-space-3) var(--smart-space-4); font-size: var(--smart-font-size-2); font-weight: var(--smart-font-weight-semibold); }
  .smart-sidebar__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .smart-sidebar__link { min-height: 2.35rem; display: flex; align-items: center; gap: var(--smart-space-3); padding-inline: var(--smart-space-3); border-radius: var(--smart-radius-full); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); text-decoration: none; transition: background var(--smart-motion-duration) var(--smart-ease-standard), color var(--smart-motion-duration) var(--smart-ease-standard); }
  .smart-sidebar__link .smart-icon { --smart-icon-size: 1.15rem; flex: 0 0 auto; }
  .smart-sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .smart-sidebar__fallback { display: none; }
  .smart-sidebar__link:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-sidebar__link[aria-current="page"] { background: var(--smart-accent-soft); color: var(--smart-accent-strong); }
  .smart-sidebar__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.2rem; padding-inline: var(--smart-space-3); color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); cursor: pointer; list-style: none; }
  .smart-sidebar__group summary::-webkit-details-marker { display: none; }
  .smart-sidebar__group-icon { margin-inline-start: auto; transition: rotate var(--smart-motion-duration-fast); }
  .smart-sidebar__group[open] .smart-sidebar__group-icon { rotate: 90deg; }
  .smart-sidebar__group ul { margin: 0; padding: 0 0 var(--smart-space-2); list-style: none; }
  .smart-app-shell__main { min-width: 0; padding: var(--smart-space-5); }
  .smart-app-shell__menu,
  .smart-app-shell__collapse {
    appearance: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-radius-sm);
    background: var(--smart-surface);
    color: var(--smart-text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .smart-app-shell__menu { display: none; margin-block-end: var(--smart-space-3); }
  .smart-app-shell[data-collapsed] .smart-sidebar__brand { inline-size: 2.5rem; padding-inline: 0; overflow: hidden; text-align: center; white-space: nowrap; font-size: 0; }
  .smart-app-shell[data-collapsed] .smart-sidebar__brand::before { content: attr(data-smart-brand-mark); font-size: var(--smart-font-size-2); }
  .smart-app-shell[data-collapsed] .smart-sidebar__nav { inline-size: 100%; }
  .smart-app-shell[data-collapsed] .smart-sidebar__group > summary { display: none; }
  .smart-app-shell[data-collapsed] .smart-sidebar__group > ul { display: grid; gap: 2px; padding-block-end: 0; }
  .smart-app-shell[data-collapsed] .smart-sidebar__link { inline-size: 2.75rem; justify-content: center; margin-inline: auto; padding-inline: 0; overflow: hidden; font-size: 0; }
  .smart-app-shell[data-collapsed] .smart-sidebar__link .smart-sidebar__label { display: none; }
  .smart-app-shell[data-collapsed] .smart-sidebar__fallback { inline-size: 1.25rem; block-size: 1.25rem; display: inline-grid; place-items: center; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-app-shell[data-collapsed] .smart-app-shell__collapse { flex: 0 0 auto; }
  .smart-app-shell__backdrop { display: none; }

  .smart-stepper { display: grid; gap: var(--smart-space-5); }
  .smart-stepper__list { display: flex; flex-wrap: wrap; gap: var(--smart-space-3); margin: 0; padding: 0; list-style: none; counter-reset: smart-step; }
  .smart-stepper__step { appearance: none; position: relative; display: flex; align-items: center; gap: var(--smart-space-2); padding: 0; border: 0; background: transparent; color: var(--smart-text-tertiary); font: inherit; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); counter-increment: smart-step; cursor: pointer; }
  .smart-stepper__step::before {
    content: counter(smart-step);
    width: 1.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--smart-surface-muted);
    color: var(--smart-text-secondary);
    font-size: var(--smart-font-size-0);
    font-weight: var(--smart-font-weight-bold);
  }
  .smart-stepper__step[aria-current="step"] { color: var(--smart-text); }
  .smart-stepper__step[aria-current="step"]::before { background: var(--smart-accent); color: var(--smart-on-accent); }
  .smart-stepper__step[data-complete]::before { content: ""; background: var(--smart-success); color: white; }
  .smart-stepper__complete-icon { position: absolute; inset-inline-start: 0.34375rem; color: white; opacity: 0; pointer-events: none; }
  .smart-stepper__step[data-complete] .smart-stepper__complete-icon { opacity: 1; }
  .smart-stepper__panel[hidden] { display: none !important; }
  .smart-stepper__actions { display: flex; justify-content: space-between; gap: var(--smart-space-3); }
  .smart-stepper--vertical { grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); align-items: start; }
  .smart-stepper--vertical .smart-stepper__list { flex-direction: column; }
  .smart-stepper--vertical .smart-stepper__panels { min-inline-size: 0; }
  .smart-stepper--vertical .smart-stepper__actions { grid-column: 2; }

  /* Horizontal chrome */
  .smart-app-header { position: relative; z-index: var(--smart-z-sticky); min-height: 4rem; display: flex; align-items: center; gap: var(--smart-space-5); padding: var(--smart-space-3) var(--smart-space-5); border-bottom: 1px solid var(--smart-divider); background: var(--smart-canvas-raised); }
  .smart-app-header__brand { color: var(--smart-text); font-weight: var(--smart-font-weight-bold); text-decoration: none; white-space: nowrap; }
  .smart-app-header__brand img, .smart-sidebar__brand img { width: auto; max-width: min(15rem, 36vw); max-height: 2.5rem; object-fit: contain; }
  .smart-app-header__nav { display: flex; align-items: center; gap: var(--smart-space-1); margin-inline-end: auto; }
  .smart-app-header__link { position: relative; padding: var(--smart-space-2) var(--smart-space-3); border-radius: var(--smart-radius-control); color: var(--smart-text-secondary); font-weight: var(--smart-font-weight-medium); text-decoration: none; transition: color var(--smart-motion-duration-fast) var(--smart-ease-out), background var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-app-header__link:hover, .smart-app-header__link[aria-current="page"] { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-app-header__link[aria-current="page"]::after { content: ""; position: absolute; inset: auto 26% -0.36rem; block-size: 2px; border-radius: var(--smart-radius-full); background: var(--smart-accent); }
  .smart-app-header__actions { display: flex; align-items: center; gap: var(--smart-space-2); }
  .smart-app-header__menu { display: none; }
  .smart-footer { padding-block: var(--smart-space-8); border-top: 1px solid var(--smart-divider); color: var(--smart-text-secondary); }
  .smart-footer--compact { padding-block: var(--smart-space-5); }
  .smart-footer__inner { width: min(100% - (var(--smart-page-gutter) * 2), var(--smart-content-width)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--smart-space-4); }
  .smart-footer__inner.smart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--smart-grid-min)), 1fr)); align-items: start; gap: var(--smart-grid-gap, var(--smart-space-6)); }
  .smart-footer__nav { display: flex; flex-wrap: wrap; gap: var(--smart-space-4); }
  .smart-footer a { color: inherit; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: color var(--smart-motion-duration-fast) var(--smart-ease-out), text-decoration-color var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-footer a:hover { color: var(--smart-text); text-decoration-color: currentColor; }
  .smart-footer__meta { width: min(100% - (var(--smart-page-gutter) * 2), var(--smart-content-width)); margin-inline: auto; padding-block-start: var(--smart-space-5); border-block-start: 1px solid var(--smart-divider); font-size: var(--smart-font-size-1); }
  .smart-footer__inner + .smart-footer__meta { margin-block-start: var(--smart-space-6); }
  .smart-footer--compact .smart-footer__meta { padding-block-start: 0; border-block-start: 0; }
  .smart-footer__links { display: grid; gap: var(--smart-space-2); margin: 0; padding: 0; list-style: none; }
  .smart-footer__links a { display: inline-flex; align-items: center; gap: var(--smart-space-2); min-height: 2rem; }
  .smart-footer__inner img { width: auto; max-width: min(15rem, 100%); max-height: 3rem; object-fit: contain; }

  /* Application layout utilities for common page patterns. */
  .smart-page-main { --smart-stack-gap: var(--smart-space-6); padding-block: var(--smart-space-6); }
  .smart-shell-main { --smart-stack-gap: var(--smart-space-5); }
  .smart-cluster--center { justify-content: center; }
  .smart-stack--tight { --smart-stack-gap: var(--smart-space-1); }
  .smart-auth-layout { --smart-grid-min: 22rem; width: 100%; max-width: 44rem; margin-inline: auto; }
  .smart-auth-layout form,
  .smart-auth-layout .smart-card__body > form {
    --smart-control-height: var(--smart-control-height-sm);
    --smart-field-gap: var(--smart-space-2);
  }
  .smart-auth-layout .smart-button--large {
    min-height: var(--smart-control-height);
    padding-inline: 1rem;
    font-size: var(--smart-font-size-2);
  }
  .smart-contact-layout {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
  }
  .smart-contact-layout > .smart-card { padding: var(--smart-space-5); }
  .smart-contact-layout form {
    --smart-control-height: var(--smart-control-height-sm);
    --smart-field-gap: var(--smart-space-2);
  }
  .smart-contact-layout .smart-button--large {
    min-height: var(--smart-control-height);
    padding-inline: 1rem;
    font-size: var(--smart-font-size-2);
  }
  .smart-auth-logo { width: auto; max-width: min(18rem, 75vw); max-height: 5rem; object-fit: contain; }
  .smart-reading-card { width: 100%; max-width: var(--smart-reading-width); margin-inline: auto; }
  .smart-tile-card { height: 100%; align-items: center; text-align: center; text-decoration: none; gap: var(--smart-space-3); }
  .smart-card__feature-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    padding: 0;
    border-radius: var(--smart-radius-md);
    flex-shrink: 0;
  }
  .smart-card__feature-icon .smart-icon { --smart-icon-size: 1.65rem; }
  .smart-grid--tiles { --smart-grid-min: 15rem; }
  .smart-log-panel { max-height: 25rem; margin: 0; padding: var(--smart-space-4); overflow: auto; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-sm); background: var(--smart-canvas-raised); color: var(--smart-text-secondary); font: var(--smart-font-size-1)/1.6 var(--smart-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
  .smart-card--picker {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--smart-space-3);
    padding: var(--smart-space-5);
  }
  .smart-card--picker .smart-icon { --smart-icon-size: 2rem; }

  /* Structured data and activity */
  .smart-key-value { display: grid; gap: 0; margin: 0; }
  .smart-key-value > div { display: grid; grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr); gap: var(--smart-space-4); padding-block: var(--smart-space-3); border-bottom: 1px solid var(--smart-divider); }
  .smart-key-value dt { color: var(--smart-text-secondary); }
  .smart-key-value dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
  .smart-timeline { margin: 0; padding: 0; list-style: none; }
  .smart-timeline__item { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--smart-space-3); padding-bottom: var(--smart-space-5); }
  .smart-timeline__item::before { content: ""; position: absolute; inset: 1rem auto 0 0.56rem; inline-size: 1px; background: var(--smart-divider); }
  .smart-timeline__item:last-child::before { display: none; }
  .smart-timeline__marker { position: relative; z-index: 1; inline-size: 0.75rem; block-size: 0.75rem; margin-top: 0.3rem; border: 2px solid var(--smart-canvas-raised); border-radius: 50%; background: var(--smart-accent); box-shadow: 0 0 0 1px var(--smart-border); }
  .smart-timeline__content { min-inline-size: 0; }
  .smart-timeline__meta { display: block; margin-top: 0.2rem; color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); }
  .smart-notification-list { display: grid; gap: var(--smart-space-2); margin: 0; padding: 0; list-style: none; }
  .smart-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--smart-space-3); padding: var(--smart-space-3); border: 1px solid transparent; border-radius: var(--smart-radius-md); transition: background var(--smart-motion-duration-fast) var(--smart-ease-out), border-color var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-notification:hover { border-color: var(--smart-border); background: var(--smart-surface-hover); }
  .smart-notification[data-unread="true"] { background: var(--smart-accent-softer); }
  .smart-notification__dot { inline-size: 0.55rem; block-size: 0.55rem; margin-top: 0.45rem; border-radius: 50%; background: var(--smart-accent); }
  .smart-notification__time { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); white-space: nowrap; }

  /* Attachments and specialist controls */
  .smart-attachment-list { display: grid; gap: var(--smart-space-2); margin: 0; padding: 0; list-style: none; }
  .smart-attachment { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--smart-space-3); padding: var(--smart-space-3); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); box-shadow: 0 1px 0 color-mix(in srgb, white 35%, transparent) inset; transition: border-color var(--smart-motion-duration-fast) var(--smart-ease-out), translate var(--smart-motion-duration-fast) var(--smart-ease-out), box-shadow var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-attachment:hover { border-color: var(--smart-border-strong); translate: 0 -1px; box-shadow: var(--smart-shadow-sm); }
  .smart-attachment__preview { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; overflow: hidden; border-radius: var(--smart-radius-sm); background: var(--smart-surface-muted); }
  .smart-attachment__preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .smart-multiselect__popover { width: min(26rem, calc(100vw - 2rem)); }
  .smart-range-dual { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .smart-range-dual__track { position: relative; min-height: 2rem; display: grid; align-items: center; }
  .smart-range-dual__track::before { content: ""; position: absolute; inset-inline: 0; block-size: 0.35rem; border-radius: var(--smart-radius-full); background: linear-gradient(to right, var(--smart-surface-muted) var(--smart-range-lower, 0%), var(--smart-accent) var(--smart-range-lower, 0%) var(--smart-range-upper, 100%), var(--smart-surface-muted) var(--smart-range-upper, 100%)); }
  .smart-range-dual input[type="range"] { position: absolute; inset-inline: 0; inline-size: 100%; margin: 0; background: transparent; pointer-events: none; appearance: none; }
  .smart-range-dual input[type="range"]::-webkit-slider-thumb { inline-size: 1.25rem; block-size: 1.25rem; border: 2px solid var(--smart-canvas-raised); border-radius: 50%; background: var(--smart-accent); box-shadow: var(--smart-shadow-sm); pointer-events: auto; appearance: none; }
  .smart-range-dual input[type="range"]::-moz-range-thumb { inline-size: 1.1rem; block-size: 1.1rem; border: 2px solid var(--smart-canvas-raised); border-radius: 50%; background: var(--smart-accent); box-shadow: var(--smart-shadow-sm); pointer-events: auto; }
  .smart-range-dual__value { color: var(--smart-text-secondary); font-variant-numeric: tabular-nums; }
  fieldset.smart-field { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .smart-rating { --smart-rating-color: #ff9500; display: inline-flex; gap: var(--smart-space-1); margin-block-start: var(--smart-space-2); }
  .smart-rating button { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--smart-radius-control); background: transparent; color: var(--smart-border-strong); cursor: pointer; transition: color var(--smart-motion-duration-fast) var(--smart-ease-out), background var(--smart-motion-duration-fast) var(--smart-ease-out), scale var(--smart-motion-duration-fast) var(--smart-ease-spring); }
  .smart-rating button:hover { background: var(--smart-surface-hover); scale: 1.08; }
  .smart-rating button[data-active="true"] { background: color-mix(in srgb, var(--smart-rating-color) 12%, transparent); color: var(--smart-rating-color); }
  .smart-rating button[data-active="true"] .smart-icon { fill: currentColor; }
  .smart-color { display: inline-flex; align-items: center; gap: var(--smart-space-2); }
  .smart-color input[type="color"] { inline-size: var(--smart-control-height); block-size: var(--smart-control-height); padding: 0.2rem; border: 1px solid var(--smart-control-border); border-radius: var(--smart-radius-control); background: var(--smart-control-background); }
  .smart-alert--banner.smart-consent { position: fixed; z-index: var(--smart-z-banner); inset: auto var(--smart-space-5) var(--smart-space-5); inline-size: min(42rem, calc(100% - 2 * var(--smart-space-5))); max-inline-size: 42rem; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--smart-space-5); padding: var(--smart-space-5); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-surface); background: var(--smart-surface-solid); box-shadow: var(--smart-shadow-lg); }
  .smart-alert--banner .smart-alert__content h2 { margin: 0; font-size: var(--smart-font-size-4); }
  .smart-alert--banner .smart-alert__actions { flex-wrap: nowrap; }
  .smart-command { inline-size: min(42rem, calc(100% - 2rem)); padding: 0; overflow: hidden; border-radius: calc(var(--smart-radius-surface) + 0.25rem); }
  .smart-command__search { inline-size: 100%; min-height: 3.5rem; padding-inline: var(--smart-space-5); border: 0; border-bottom: 1px solid var(--smart-divider); background: transparent; color: var(--smart-text); font: inherit; outline: none; }
  .smart-command__list { max-height: min(26rem, 60vh); overflow-y: auto; padding: var(--smart-space-2); }
  .smart-command__item { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--smart-space-4); padding: var(--smart-space-3); border: 0; border-radius: var(--smart-radius-sm); background: transparent; color: var(--smart-text); text-align: start; cursor: pointer; }
  .smart-command__item:hover, .smart-command__item[aria-selected="true"] { background: var(--smart-surface-hover); }
  .smart-command__item[aria-selected="true"] { box-shadow: 0 0 0 1px var(--smart-border) inset; }

  /* RTL corrections — logical properties cover nearly everything; these are the physical-direction exceptions. */
  html[dir="rtl"] .smart-switch input:checked + .smart-switch__track::after { translate: -1.12rem 0; }
  html[dir="rtl"] .smart-combobox__input { background-position: 1.15rem calc(50% - 0.12rem), 0.85rem calc(50% - 0.12rem); }
  html[dir="rtl"] select.smart-select { background-position: 1.1rem calc(50% - 0.12rem), 0.82rem calc(50% - 0.12rem); }

  /* Card variants */
  .smart-card--media { padding: 0; overflow: hidden; }
  .smart-card--media .smart-card__media { aspect-ratio: 16 / 9; background: var(--smart-surface-muted); object-fit: cover; width: 100%; }
  .smart-card--media .smart-card__body { padding: var(--smart-space-5); }
  .smart-card--list { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--smart-space-4); padding: var(--smart-space-4) var(--smart-space-5); }
  .smart-card--selected { border-color: color-mix(in srgb, var(--smart-accent) 42%, var(--smart-border)); box-shadow: 0 0 0 1px var(--smart-accent-soft), var(--smart-shadow-sm); }

  /* Dialog variants */
  .smart-dialog--confirm .smart-dialog__footer .smart-button--primary { background: var(--smart-danger); color: var(--smart-on-danger); }
  .smart-dialog--confirm .smart-dialog__footer .smart-button--primary:hover { background: color-mix(in srgb, var(--smart-danger) 88%, black); }
  .smart-dialog--wide { width: min(52rem, calc(100% - 2rem)); }
  .smart-dialog--scroll .smart-dialog__body { max-height: min(28rem, 60vh); overflow: auto; }

  /* Select optgroups */
  .smart-select__group-label { padding: var(--smart-space-2) var(--smart-space-3) var(--smart-space-1); color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); font-weight: var(--smart-font-weight-semibold); letter-spacing: var(--smart-letter-spacing-label); text-transform: uppercase; }
  .smart-select__group + .smart-select__group { margin-block-start: var(--smart-space-2); padding-block-start: var(--smart-space-2); border-top: 1px solid var(--smart-divider); }

  /* Toast action */
  .smart-toast__actions { display: flex; gap: var(--smart-space-2); margin-block-start: var(--smart-space-2); }
  .smart-toast__action { appearance: none; padding: 0; border: 0; background: transparent; color: var(--smart-accent-strong); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); cursor: pointer; text-decoration: underline; text-underline-offset: 0.14em; }

  /* Native date/time inputs */
  .smart-input[type="month"],
  .smart-input[type="week"] {
    min-height: var(--smart-control-height);
    padding-inline: var(--smart-control-padding-x) 2.75rem;
    border-radius: var(--smart-radius-md);
    color-scheme: light dark;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 50rem) {
    .smart-app-header { flex-wrap: wrap; }
    .smart-app-header__menu { display: inline-flex; margin-inline-start: auto; }
    .smart-app-header__nav { order: 3; inline-size: 100%; display: none; flex-direction: column; align-items: stretch; }
    .smart-app-header[data-nav-open] .smart-app-header__nav { display: flex; }
    .smart-key-value > div { grid-template-columns: 1fr; gap: var(--smart-space-1); }
    .smart-key-value dd { text-align: start; }
    .smart-alert--banner.smart-consent { inset: auto var(--smart-space-3) var(--smart-space-3); inline-size: calc(100% - 2 * var(--smart-space-3)); grid-template-columns: 1fr; gap: var(--smart-space-4); }
    .smart-alert--banner .smart-alert__actions { flex-wrap: wrap; }
    .smart-stepper--vertical { grid-template-columns: 1fr; }
    .smart-stepper--vertical .smart-stepper__actions { grid-column: auto; }
    .smart-app-shell,
    .smart-app-shell[data-collapsed] { grid-template-columns: 1fr; }
    .smart-app-shell[data-collapsed] .smart-sidebar { padding: var(--smart-space-4); overflow: visible; }
    .smart-app-shell[data-collapsed] .smart-sidebar__top { flex-direction: row; align-items: center; }
    .smart-app-shell[data-collapsed] .smart-sidebar__brand { inline-size: auto; padding: var(--smart-space-2) var(--smart-space-3) var(--smart-space-4); overflow: hidden; text-align: start; font-size: var(--smart-font-size-2); }
    .smart-app-shell[data-collapsed] .smart-sidebar__brand::before { display: none; }
    .smart-app-shell[data-collapsed] .smart-sidebar__nav { inline-size: auto; }
    .smart-app-shell[data-collapsed] .smart-sidebar__group > summary { display: flex; }
    .smart-app-shell[data-collapsed] .smart-sidebar__group > ul { display: block; padding-block-end: var(--smart-space-2); }
    .smart-app-shell[data-collapsed] .smart-sidebar__link { inline-size: auto; justify-content: flex-start; margin-inline: 0; padding-inline: var(--smart-space-3); overflow: visible; font-size: var(--smart-font-size-1); }
    .smart-app-shell[data-collapsed] .smart-sidebar__link .smart-sidebar__label { display: block; }
    .smart-app-shell[data-collapsed] .smart-sidebar__fallback { display: none; }
    .smart-app-shell__menu { display: inline-flex; align-items: center; justify-content: center; }
    .smart-app-shell__collapse { display: none; }
    .smart-app-shell[data-smart-shell] .smart-sidebar {
      position: absolute;
      z-index: var(--smart-z-raised);
      inset-block: 0;
      inset-inline-start: 0;
      inset-inline-end: auto;
      width: min(16rem, 86vw);
      border-inline-end: 1px solid var(--smart-divider);
      translate: -110%;
      transition: translate var(--smart-motion-duration) var(--smart-ease-out);
    }
    html[dir="rtl"] .smart-app-shell[data-smart-shell] .smart-sidebar { translate: 110%; }
    .smart-app-shell[data-nav-open] .smart-sidebar { translate: 0; }
    .smart-app-shell__backdrop {
      display: none;
      position: absolute;
      inset: 0;
      z-index: calc(var(--smart-z-raised) - 1);
      border: 0;
      background: var(--smart-overlay);
    }
    .smart-app-shell[data-nav-open] .smart-app-shell__backdrop { display: block; }
    .smart-app-shell[data-collapsed] { grid-template-columns: 1fr; }
    .smart-app-shell[data-collapsed] .smart-sidebar__brand,
    .smart-app-shell[data-collapsed] .smart-sidebar__link { font-size: inherit; }
    .smart-app-shell[data-collapsed] .smart-sidebar__link { justify-content: flex-start; padding-inline: var(--smart-space-3); }
  }

  /* Demo-compatible metric surface */
  .smart-metric { display: grid; gap: var(--smart-space-2); }
  .smart-metric__label { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); }
  .smart-metric__value { font-size: var(--smart-font-size-6); font-weight: var(--smart-font-weight-semibold); letter-spacing: var(--smart-letter-spacing-tight); line-height: 1; font-variant-numeric: tabular-nums; }
  .smart-metric:has(> .smart-badge) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--smart-space-1) var(--smart-space-3);
    align-items: start;
  }
  .smart-metric:has(> .smart-badge) .smart-metric__label,
  .smart-metric:has(> .smart-badge) .smart-metric__value { grid-column: 1; }
  .smart-metric > .smart-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: end;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: var(--smart-radius-md);
  }
  .smart-metric > .smart-badge .smart-icon { --smart-icon-size: 1.25rem; }
  .smart-card .smart-muted.smart-cluster > .smart-icon,
  .smart-card__body .smart-cluster > .smart-icon { --smart-icon-size: 1.05rem; flex-shrink: 0; }
  .smart-metric__change { color: var(--smart-success); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-metric:has(> .smart-badge) .smart-metric__change { grid-column: 1 / -1; }
  .smart-live-flash { animation: smart-live-flash var(--smart-motion-duration-page) var(--smart-ease-out); }

  .smart-chart {
    position: relative;
    display: grid;
    gap: var(--smart-space-3);
    margin: 0;
    min-inline-size: 0;
    color: var(--smart-text);
  }
  .smart-chart__caption { margin: 0; color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-medium); }
  .smart-chart__plot { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; overflow: visible; }
  .smart-chart--sparkline { gap: 0; }
  .smart-chart--sparkline .smart-chart__plot { block-size: 3rem; }
  .smart-metric > .smart-chart { margin-block-start: var(--smart-space-2); }
  .smart-chart__grid { stroke: var(--smart-divider); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .smart-chart__axis { fill: var(--smart-text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }
  .smart-chart__axis--y { text-anchor: end; }
  .smart-chart__bar { fill: var(--smart-chart-stroke, var(--smart-accent)); }
  .smart-chart__line { stroke: var(--smart-chart-stroke, var(--smart-accent)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; vector-effect: non-scaling-stroke; }
  .smart-chart__area { fill: var(--smart-chart-fill, color-mix(in srgb, var(--smart-accent) 16%, transparent)); stroke: none; }
  .smart-chart__point { fill: var(--smart-chart-stroke, var(--smart-accent)); stroke: var(--smart-surface); stroke-width: 2; }
  .smart-chart__rule { stroke: var(--smart-text-tertiary); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; pointer-events: none; }
  .smart-chart__rule[hidden] { display: none; }
  .smart-chart__hit { fill: transparent; cursor: pointer; }
  .smart-chart__hit.is-hover { fill: color-mix(in srgb, var(--smart-accent) 6%, transparent); }
  .smart-chart__hit.is-active { fill: color-mix(in srgb, var(--smart-accent) 8%, transparent); }
  .smart-chart__tip {
    position: absolute;
    z-index: var(--smart-z-tooltip);
    translate: -50% calc(-100% - 0.45rem);
    width: max-content;
    max-width: 16rem;
    padding: 0.38rem 0.58rem;
    border-radius: var(--smart-radius-xs);
    background: var(--smart-text);
    color: var(--smart-canvas);
    box-shadow: var(--smart-shadow-sm);
    font-size: var(--smart-font-size-0);
    font-weight: var(--smart-font-weight-medium);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .smart-chart__tip[hidden] { display: none; }
  .smart-chart [data-tone="accent"] { --smart-chart-stroke: var(--smart-accent); --smart-chart-fill: color-mix(in srgb, var(--smart-accent) 18%, transparent); }
  .smart-chart [data-tone="success"] { --smart-chart-stroke: var(--smart-success); --smart-chart-fill: color-mix(in srgb, var(--smart-success) 18%, transparent); }
  .smart-chart [data-tone="warning"] { --smart-chart-stroke: var(--smart-warning); --smart-chart-fill: color-mix(in srgb, var(--smart-warning) 18%, transparent); }
  .smart-chart [data-tone="danger"] { --smart-chart-stroke: var(--smart-danger); --smart-chart-fill: color-mix(in srgb, var(--smart-danger) 18%, transparent); }
  .smart-chart [data-tone="secondary"] { --smart-chart-stroke: var(--smart-text-secondary); --smart-chart-fill: color-mix(in srgb, var(--smart-text-secondary) 16%, transparent); }
  .smart-chart__plot--donut { max-inline-size: 10.5rem; justify-self: center; }
  .smart-chart__donut-track { fill: none; stroke: var(--smart-surface-muted); stroke-width: 18; }
  .smart-chart__donut-arc { fill: none; stroke: var(--smart-chart-stroke, var(--smart-accent)); stroke-width: 18; stroke-linecap: round; transform-origin: 80px 80px; rotate: -90deg; cursor: pointer; }
  .smart-chart__donut-arc.is-active { stroke-width: 22; }
  .smart-chart__donut-value { fill: var(--smart-text); font-size: 22px; font-weight: var(--smart-font-weight-semibold); font-variant-numeric: tabular-nums; }
  .smart-chart__donut-label { fill: var(--smart-text-tertiary); font-size: 10px; }
  .smart-chart__legend { display: flex; flex-wrap: wrap; gap: var(--smart-space-3); justify-content: center; }
  .smart-chart__legend-item { display: inline-flex; align-items: center; gap: var(--smart-space-2); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); font-variant-numeric: tabular-nums; }
  .smart-chart__legend-item::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--smart-radius-full); background: var(--smart-chart-stroke, var(--smart-accent)); }
  .smart-chart:focus-visible { outline: var(--smart-focus-ring); outline-offset: 3px; border-radius: var(--smart-radius-sm); }
  html[data-density="compact"] .smart-chart--sparkline .smart-chart__plot { block-size: 2.25rem; }

  /* Carousel and lightbox */
  .smart-carousel { --smart-carousel-slide-width: min(100%, 34rem); position: relative; display: grid; gap: var(--smart-space-3); min-inline-size: 0; }
  .smart-carousel__viewport { position: relative; min-inline-size: 0; }
  .smart-carousel__track { display: flex; gap: var(--smart-space-3); margin: 0; padding: 0 var(--smart-space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .smart-carousel__track::-webkit-scrollbar { display: none; }
  .smart-carousel__slide { position: relative; display: grid; gap: var(--smart-space-2); flex: 0 0 var(--smart-carousel-slide-width); min-inline-size: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .smart-carousel__media { position: relative; margin: 0; aspect-ratio: 16 / 9; inline-size: 100%; border-radius: var(--smart-radius-md); background: var(--smart-surface-muted); overflow: hidden; }
  .smart-carousel__media > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .smart-carousel__caption { padding-inline: var(--smart-space-2); color: var(--smart-text-secondary); font-size: var(--smart-font-size-1); }
  .smart-carousel__content { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: var(--smart-space-5); border-radius: var(--smart-radius-md); background: linear-gradient(to top, rgb(0 0 0 / 0.58), transparent 62%); color: #fff; pointer-events: none; }
  .smart-carousel__content > * { pointer-events: auto; }
  .smart-carousel__content :is(a, button) { color: inherit; }
  .smart-carousel__nav { position: absolute; inset-block-start: 50%; z-index: 2; translate: 0 -50%; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-full); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-md); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); cursor: pointer; transition: opacity var(--smart-motion-duration-fast) var(--smart-ease-out), scale var(--smart-motion-duration-fast) var(--smart-ease-spring), background var(--smart-motion-duration-fast); }
  .smart-carousel__nav:hover { background: var(--smart-surface-hover); }
  .smart-carousel__nav:active { scale: var(--smart-press-scale); }
  .smart-carousel__nav--prev { inset-inline-start: var(--smart-space-1); }
  .smart-carousel__nav--next { inset-inline-end: var(--smart-space-1); }
  .smart-carousel__nav[disabled] { opacity: 0; pointer-events: none; }
  .smart-carousel__expand, .smart-lightbox__close, .smart-lightbox__bar button { display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--smart-radius-full); color: inherit; cursor: pointer; }
  .smart-carousel__expand { position: absolute; inset-block-start: var(--smart-space-2); inset-inline-end: var(--smart-space-2); z-index: 2; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--smart-border); background: var(--smart-surface); color: var(--smart-text); box-shadow: var(--smart-shadow-sm); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); opacity: 0; transition: opacity var(--smart-motion-duration-fast) var(--smart-ease-out), scale var(--smart-motion-duration-fast) var(--smart-ease-spring); }
  .smart-carousel__expand:hover { scale: 1.06; }
  .smart-carousel__slide:hover .smart-carousel__expand, .smart-carousel__expand:focus-visible, .smart-carousel--coarse .smart-carousel__expand { opacity: 1; }
  .smart-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--smart-space-3); }
  .smart-carousel__dots { display: flex; align-items: center; gap: var(--smart-space-1); }
  .smart-carousel__dot { inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .smart-carousel__dot::before { content: ""; inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: var(--smart-radius-full); background: var(--smart-text-tertiary); opacity: 0.55; transition: inline-size var(--smart-motion-duration) var(--smart-ease-spring), opacity var(--smart-motion-duration-fast), background var(--smart-motion-duration-fast); }
  .smart-carousel__dot:hover::before { opacity: 0.85; }
  .smart-carousel__dot[aria-current]::before { inline-size: 1.375rem; background: var(--smart-text); opacity: 1; }
  .smart-carousel__toggle { inline-size: 2rem; block-size: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); color: var(--smart-text-secondary); cursor: pointer; transition: background var(--smart-motion-duration-fast), color var(--smart-motion-duration-fast); }
  .smart-carousel__toggle:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
  .smart-carousel--gallery { --smart-carousel-slide-width: auto; }
  .smart-carousel--gallery .smart-carousel__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--smart-space-2); padding: 0; overflow: visible; scroll-snap-type: none; }
  .smart-carousel--gallery .smart-carousel__slide { flex: none; }
  .smart-carousel--gallery .smart-carousel__nav, .smart-carousel--gallery .smart-carousel__dots { display: none; }
  .smart-carousel__cell { position: relative; display: block; inline-size: 100%; padding: 0; border: 0; border-radius: var(--smart-radius-sm); background: var(--smart-surface-muted); overflow: hidden; cursor: zoom-in; transition: translate var(--smart-motion-duration-fast) var(--smart-ease-spring), box-shadow var(--smart-motion-duration-fast) var(--smart-ease-out); }
  .smart-carousel__cell > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .smart-carousel__cell:hover { translate: 0 var(--smart-hover-lift); box-shadow: var(--smart-shadow-md); }
  @media (hover: hover) and (pointer: fine) {
    .smart-carousel__nav { opacity: 0; }
    .smart-carousel__viewport:hover .smart-carousel__nav, .smart-carousel__nav:focus-visible { opacity: 1; }
    .smart-carousel__nav[disabled] { opacity: 0; }
  }
  @media (hover: none) and (pointer: coarse) {
    .smart-carousel__nav { opacity: 0; pointer-events: none; }
    .smart-carousel__nav:focus-visible { opacity: 1; translate: 0 -50%; pointer-events: auto; }
  }
  .smart-lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: light-dark(rgb(17 18 23 / 0.97), rgb(0 0 0 / 0.97)); color: #fff; box-shadow: none; backdrop-filter: none; scale: 1; translate: 0; display: grid; grid-template-rows: 1fr auto; }
  .smart-lightbox:not([open]) { display: none; }
  .smart-lightbox::backdrop { background: var(--smart-overlay); backdrop-filter: blur(5px); }
  .smart-lightbox__stage { position: relative; display: grid; place-items: center; min-block-size: 0; padding: var(--smart-space-6) var(--smart-space-5) var(--smart-space-2); touch-action: none; overflow: hidden; }
  .smart-lightbox__figure { display: grid; place-items: center; margin: 0; inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; }
  .smart-lightbox__image { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; cursor: zoom-in; transform: translate3d(var(--smart-lightbox-x, 0px), var(--smart-lightbox-y, 0px), 0) scale(var(--smart-lightbox-scale, 1)); transition: transform var(--smart-motion-duration-slow) var(--smart-ease-spring); will-change: transform; }
  .smart-lightbox__image.is-zoomed { cursor: grab; }
  .smart-lightbox__image.is-zoomed.is-gesturing { cursor: grabbing; }
  .smart-lightbox__image.is-gesturing { transition: none; }
  .smart-lightbox__bar { display: flex; align-items: center; justify-content: center; gap: var(--smart-space-1); inline-size: fit-content; justify-self: center; margin-block-end: max(var(--smart-space-5), env(safe-area-inset-block-end)); padding: var(--smart-space-2) var(--smart-space-3); border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--smart-radius-full); background: rgb(255 255 255 / 0.08); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); }
  .smart-lightbox__bar button { inline-size: 2.25rem; block-size: 2.25rem; background: transparent; opacity: 0.85; transition: background var(--smart-motion-duration-fast), opacity var(--smart-motion-duration-fast); }
  .smart-lightbox__bar button:hover { background: rgb(255 255 255 / 0.14); opacity: 1; }
  .smart-lightbox__bar button[disabled] { opacity: 0.35; pointer-events: none; }
  .smart-lightbox__counter { padding-inline: var(--smart-space-2); color: rgb(255 255 255 / 0.85); font-size: var(--smart-font-size-1); font-variant-numeric: tabular-nums; }
  .smart-lightbox__caption { max-inline-size: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(255 255 255 / 0.85); font-size: var(--smart-font-size-1); }
  .smart-lightbox__close { position: absolute; inset-block-start: max(var(--smart-space-4), env(safe-area-inset-block-start)); inset-inline-end: var(--smart-space-4); z-index: 1; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.08); box-shadow: var(--smart-shadow-md); backdrop-filter: blur(var(--smart-blur)) saturate(var(--smart-saturate)); transition: background var(--smart-motion-duration-fast), scale var(--smart-motion-duration-fast) var(--smart-ease-spring); }
  .smart-lightbox__close:hover { background: rgb(255 255 255 / 0.16); scale: 1.04; }
  @media (max-width: 40rem) { .smart-lightbox__caption { display: none; } }
  html[data-density="compact"] .smart-carousel__nav { inline-size: 2.25rem; block-size: 2.25rem; }
  html[data-density="compact"] .smart-lightbox__stage { padding: var(--smart-space-4) var(--smart-space-3) var(--smart-space-1); }

  /* Agent-rendered surfaces */
  .smart-surface { min-width: 0; }
  .smart-surface__text { max-width: var(--smart-reading-width); }
  .smart-text--secondary { color: var(--smart-text-secondary); }
  .smart-text--success { color: var(--smart-success); }
  .smart-text--warning { color: var(--smart-warning); }
  .smart-text--danger { color: var(--smart-danger); }
  .smart-surface__tabs, .smart-surface__tab-panels { min-width: 0; }
  .smart-surface__popover-menu { width: fit-content; }
  .smart-surface__progress { --smart-stack-gap: var(--smart-space-3); }

  @keyframes smart-fade-slide { from { opacity: 0; translate: 0 0.35rem; } }

  /* View transitions — SmartWebUI.update() and steppers swap content through document.startViewTransition */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--smart-motion-duration); animation-timing-function: var(--smart-ease-standard); }
  @keyframes smart-segment-morph { 0%, 100% { scale: 1; } 45% { scale: 1.06 0.92; } 72% { scale: 0.985 1.025; } }
  @keyframes smart-liquid-segment-morph { 0%, 100% { scale: 1; filter: brightness(1); } 38% { scale: 1.12 0.88; filter: brightness(1.08); } 68% { scale: 0.975 1.045; filter: brightness(1.03); } }
  @keyframes smart-liquid-tab-morph { 0%, 100% { scale: 1; filter: brightness(1); } 36% { scale: 1.1 0.9; filter: brightness(1.07); } 70% { scale: 0.98 1.035; filter: brightness(1.025); } }
  @keyframes smart-liquid-panel-in { from { opacity: 0; translate: 0 0.45rem; filter: blur(6px); } to { filter: blur(0); } }
  @keyframes smart-toast-in { from { opacity: 0; translate: 1rem 0; scale: 0.97; } }
  @keyframes smart-toast-out { to { opacity: 0; translate: 1rem 0; scale: 0.97; } }
  @keyframes smart-spin { to { rotate: 1turn; } }
  @keyframes smart-shimmer { to { background-position-x: -250%; } }
  @keyframes smart-live-flash { 0% { color: var(--smart-accent); scale: 1.05; } 100% { color: var(--smart-text); scale: 1; } }
  @keyframes smart-chart-grow { from { scale: 1 0.08; } }
  @media (prefers-reduced-motion: no-preference) {
    [data-smart-chart]:not([data-smart-id]) .smart-chart__bar {
      transform-box: fill-box;
      transform-origin: center bottom;
      animation: smart-chart-grow var(--smart-motion-duration) var(--smart-ease-out) both;
    }
  }
}

@layer smart.utilities {
  .smart-muted { color: var(--smart-text-secondary); }
  .smart-visually-hidden { position: absolute !important; inset-inline-start: 0 !important; width: 1px !important; height: 1px !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
  table.smart-visually-hidden { display: block !important; }
  .smart-skip-link { position: absolute; z-index: var(--smart-z-banner); inset-block-start: var(--smart-space-3); inset-inline-start: var(--smart-space-3); padding: 0.55rem 1rem; border: 1px solid var(--smart-border-strong); border-radius: var(--smart-radius-control); background: var(--smart-surface-solid); color: var(--smart-text); font-weight: var(--smart-font-weight-semibold); text-decoration: none; }
  .smart-skip-link:focus { outline: var(--smart-focus-width) solid var(--smart-focus-color); outline-offset: 2px; }
  .smart-skip-link:not(:focus) { width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

  /* Motion — opt-in, token-driven effects for content that enters, leaves, or needs a brief cue. */
  .smart-animate { --smart-animation-duration: var(--smart-motion-duration-page); --smart-animation-delay: 0ms; --smart-animation-iterations: 1; --smart-animation-ease: var(--smart-ease-out); animation-duration: var(--smart-animation-duration); animation-delay: var(--smart-animation-delay); animation-iteration-count: var(--smart-animation-iterations); animation-timing-function: var(--smart-animation-ease); animation-fill-mode: both; }
  .smart-animate--fast { --smart-animation-duration: var(--smart-motion-duration); }
  .smart-animate--slow { --smart-animation-duration: calc(var(--smart-motion-duration-page) * 1.35); }
  .smart-animate--delay { --smart-animation-delay: var(--smart-motion-duration); }
  .smart-animate--delay-2 { --smart-animation-delay: calc(var(--smart-motion-duration) * 2); }
  .smart-enter-fade { animation-name: smart-enter-fade; }
  .smart-enter-fade-up { animation-name: smart-enter-fade-up; }
  .smart-enter-fade-down { animation-name: smart-enter-fade-down; }
  .smart-enter-fade-start { animation-name: smart-enter-fade-start; }
  .smart-enter-fade-end { animation-name: smart-enter-fade-end; }
  html[dir="rtl"] .smart-enter-fade-start { animation-name: smart-enter-fade-end; }
  html[dir="rtl"] .smart-enter-fade-end { animation-name: smart-enter-fade-start; }
  .smart-enter-scale { animation-name: smart-enter-scale; }
  .smart-leave-fade { animation-name: smart-leave-fade; }
  .smart-leave-fade-up { animation-name: smart-leave-fade-up; }
  .smart-leave-fade-down { animation-name: smart-leave-fade-down; }
  .smart-leave-fade-start { animation-name: smart-leave-fade-start; }
  .smart-leave-fade-end { animation-name: smart-leave-fade-end; }
  html[dir="rtl"] .smart-leave-fade-start { animation-name: smart-leave-fade-end; }
  html[dir="rtl"] .smart-leave-fade-end { animation-name: smart-leave-fade-start; }
  .smart-leave-scale { animation-name: smart-leave-scale; }
  .smart-attention-pulse { --smart-animation-ease: var(--smart-ease-spring); animation-name: smart-attention-pulse; }
  .smart-attention-shake { --smart-animation-ease: var(--smart-ease-standard); animation-name: smart-attention-shake; }
  .smart-attention-flash { animation-name: smart-attention-flash; }
  @keyframes smart-enter-fade { from { opacity: 0; } }
  @keyframes smart-enter-fade-up { from { opacity: 0; translate: 0 0.75rem; } }
  @keyframes smart-enter-fade-down { from { opacity: 0; translate: 0 -0.75rem; } }
  @keyframes smart-enter-fade-start { from { opacity: 0; translate: -0.75rem 0; } }
  @keyframes smart-enter-fade-end { from { opacity: 0; translate: 0.75rem 0; } }
  @keyframes smart-enter-scale { from { opacity: 0; scale: 0.94; } }
  @keyframes smart-leave-fade { to { opacity: 0; } }
  @keyframes smart-leave-fade-up { to { opacity: 0; translate: 0 -0.75rem; } }
  @keyframes smart-leave-fade-down { to { opacity: 0; translate: 0 0.75rem; } }
  @keyframes smart-leave-fade-start { to { opacity: 0; translate: -0.75rem 0; } }
  @keyframes smart-leave-fade-end { to { opacity: 0; translate: 0.75rem 0; } }
  @keyframes smart-leave-scale { to { opacity: 0; scale: 0.94; } }
  @keyframes smart-attention-pulse { 50% { scale: 1.055; } }
  @keyframes smart-attention-shake { 20%, 60% { translate: -0.35rem 0; } 40%, 80% { translate: 0.35rem 0; } }
  @keyframes smart-attention-flash { 50% { opacity: 0.35; } }

  /* Spacing — steps 0–8 reference --smart-space-*; axes use logical properties. */
  .smart-p-0 { padding: var(--smart-space-0); }
  .smart-p-1 { padding: var(--smart-space-1); }
  .smart-p-2 { padding: var(--smart-space-2); }
  .smart-p-3 { padding: var(--smart-space-3); }
  .smart-p-4 { padding: var(--smart-space-4); }
  .smart-p-5 { padding: var(--smart-space-5); }
  .smart-p-6 { padding: var(--smart-space-6); }
  .smart-p-7 { padding: var(--smart-space-7); }
  .smart-p-8 { padding: var(--smart-space-8); }
  .smart-px-0 { padding-inline: var(--smart-space-0); }
  .smart-px-1 { padding-inline: var(--smart-space-1); }
  .smart-px-2 { padding-inline: var(--smart-space-2); }
  .smart-px-3 { padding-inline: var(--smart-space-3); }
  .smart-px-4 { padding-inline: var(--smart-space-4); }
  .smart-px-5 { padding-inline: var(--smart-space-5); }
  .smart-px-6 { padding-inline: var(--smart-space-6); }
  .smart-px-7 { padding-inline: var(--smart-space-7); }
  .smart-px-8 { padding-inline: var(--smart-space-8); }
  .smart-py-0 { padding-block: var(--smart-space-0); }
  .smart-py-1 { padding-block: var(--smart-space-1); }
  .smart-py-2 { padding-block: var(--smart-space-2); }
  .smart-py-3 { padding-block: var(--smart-space-3); }
  .smart-py-4 { padding-block: var(--smart-space-4); }
  .smart-py-5 { padding-block: var(--smart-space-5); }
  .smart-py-6 { padding-block: var(--smart-space-6); }
  .smart-py-7 { padding-block: var(--smart-space-7); }
  .smart-py-8 { padding-block: var(--smart-space-8); }
  .smart-pt-0 { padding-block-start: var(--smart-space-0); }
  .smart-pt-1 { padding-block-start: var(--smart-space-1); }
  .smart-pt-2 { padding-block-start: var(--smart-space-2); }
  .smart-pt-3 { padding-block-start: var(--smart-space-3); }
  .smart-pt-4 { padding-block-start: var(--smart-space-4); }
  .smart-pt-5 { padding-block-start: var(--smart-space-5); }
  .smart-pt-6 { padding-block-start: var(--smart-space-6); }
  .smart-pt-7 { padding-block-start: var(--smart-space-7); }
  .smart-pt-8 { padding-block-start: var(--smart-space-8); }
  .smart-pb-0 { padding-block-end: var(--smart-space-0); }
  .smart-pb-1 { padding-block-end: var(--smart-space-1); }
  .smart-pb-2 { padding-block-end: var(--smart-space-2); }
  .smart-pb-3 { padding-block-end: var(--smart-space-3); }
  .smart-pb-4 { padding-block-end: var(--smart-space-4); }
  .smart-pb-5 { padding-block-end: var(--smart-space-5); }
  .smart-pb-6 { padding-block-end: var(--smart-space-6); }
  .smart-pb-7 { padding-block-end: var(--smart-space-7); }
  .smart-pb-8 { padding-block-end: var(--smart-space-8); }
  .smart-ps-0 { padding-inline-start: var(--smart-space-0); }
  .smart-ps-1 { padding-inline-start: var(--smart-space-1); }
  .smart-ps-2 { padding-inline-start: var(--smart-space-2); }
  .smart-ps-3 { padding-inline-start: var(--smart-space-3); }
  .smart-ps-4 { padding-inline-start: var(--smart-space-4); }
  .smart-ps-5 { padding-inline-start: var(--smart-space-5); }
  .smart-ps-6 { padding-inline-start: var(--smart-space-6); }
  .smart-ps-7 { padding-inline-start: var(--smart-space-7); }
  .smart-ps-8 { padding-inline-start: var(--smart-space-8); }
  .smart-pe-0 { padding-inline-end: var(--smart-space-0); }
  .smart-pe-1 { padding-inline-end: var(--smart-space-1); }
  .smart-pe-2 { padding-inline-end: var(--smart-space-2); }
  .smart-pe-3 { padding-inline-end: var(--smart-space-3); }
  .smart-pe-4 { padding-inline-end: var(--smart-space-4); }
  .smart-pe-5 { padding-inline-end: var(--smart-space-5); }
  .smart-pe-6 { padding-inline-end: var(--smart-space-6); }
  .smart-pe-7 { padding-inline-end: var(--smart-space-7); }
  .smart-pe-8 { padding-inline-end: var(--smart-space-8); }
  .smart-m-0 { margin: var(--smart-space-0); }
  .smart-m-1 { margin: var(--smart-space-1); }
  .smart-m-2 { margin: var(--smart-space-2); }
  .smart-m-3 { margin: var(--smart-space-3); }
  .smart-m-4 { margin: var(--smart-space-4); }
  .smart-m-5 { margin: var(--smart-space-5); }
  .smart-m-6 { margin: var(--smart-space-6); }
  .smart-m-7 { margin: var(--smart-space-7); }
  .smart-m-8 { margin: var(--smart-space-8); }
  .smart-mx-0 { margin-inline: var(--smart-space-0); }
  .smart-mx-1 { margin-inline: var(--smart-space-1); }
  .smart-mx-2 { margin-inline: var(--smart-space-2); }
  .smart-mx-3 { margin-inline: var(--smart-space-3); }
  .smart-mx-4 { margin-inline: var(--smart-space-4); }
  .smart-mx-5 { margin-inline: var(--smart-space-5); }
  .smart-mx-6 { margin-inline: var(--smart-space-6); }
  .smart-mx-7 { margin-inline: var(--smart-space-7); }
  .smart-mx-8 { margin-inline: var(--smart-space-8); }
  .smart-my-0 { margin-block: var(--smart-space-0); }
  .smart-my-1 { margin-block: var(--smart-space-1); }
  .smart-my-2 { margin-block: var(--smart-space-2); }
  .smart-my-3 { margin-block: var(--smart-space-3); }
  .smart-my-4 { margin-block: var(--smart-space-4); }
  .smart-my-5 { margin-block: var(--smart-space-5); }
  .smart-my-6 { margin-block: var(--smart-space-6); }
  .smart-my-7 { margin-block: var(--smart-space-7); }
  .smart-my-8 { margin-block: var(--smart-space-8); }
  .smart-mt-0 { margin-block-start: var(--smart-space-0); }
  .smart-mt-1 { margin-block-start: var(--smart-space-1); }
  .smart-mt-2 { margin-block-start: var(--smart-space-2); }
  .smart-mt-3 { margin-block-start: var(--smart-space-3); }
  .smart-mt-4 { margin-block-start: var(--smart-space-4); }
  .smart-mt-5 { margin-block-start: var(--smart-space-5); }
  .smart-mt-6 { margin-block-start: var(--smart-space-6); }
  .smart-mt-7 { margin-block-start: var(--smart-space-7); }
  .smart-mt-8 { margin-block-start: var(--smart-space-8); }
  .smart-mb-0 { margin-block-end: var(--smart-space-0); }
  .smart-mb-1 { margin-block-end: var(--smart-space-1); }
  .smart-mb-2 { margin-block-end: var(--smart-space-2); }
  .smart-mb-3 { margin-block-end: var(--smart-space-3); }
  .smart-mb-4 { margin-block-end: var(--smart-space-4); }
  .smart-mb-5 { margin-block-end: var(--smart-space-5); }
  .smart-mb-6 { margin-block-end: var(--smart-space-6); }
  .smart-mb-7 { margin-block-end: var(--smart-space-7); }
  .smart-mb-8 { margin-block-end: var(--smart-space-8); }
  .smart-ms-0 { margin-inline-start: var(--smart-space-0); }
  .smart-ms-1 { margin-inline-start: var(--smart-space-1); }
  .smart-ms-2 { margin-inline-start: var(--smart-space-2); }
  .smart-ms-3 { margin-inline-start: var(--smart-space-3); }
  .smart-ms-4 { margin-inline-start: var(--smart-space-4); }
  .smart-ms-5 { margin-inline-start: var(--smart-space-5); }
  .smart-ms-6 { margin-inline-start: var(--smart-space-6); }
  .smart-ms-7 { margin-inline-start: var(--smart-space-7); }
  .smart-ms-8 { margin-inline-start: var(--smart-space-8); }
  .smart-me-0 { margin-inline-end: var(--smart-space-0); }
  .smart-me-1 { margin-inline-end: var(--smart-space-1); }
  .smart-me-2 { margin-inline-end: var(--smart-space-2); }
  .smart-me-3 { margin-inline-end: var(--smart-space-3); }
  .smart-me-4 { margin-inline-end: var(--smart-space-4); }
  .smart-me-5 { margin-inline-end: var(--smart-space-5); }
  .smart-me-6 { margin-inline-end: var(--smart-space-6); }
  .smart-me-7 { margin-inline-end: var(--smart-space-7); }
  .smart-me-8 { margin-inline-end: var(--smart-space-8); }
  .smart-m-auto { margin: auto; }
  .smart-mx-auto { margin-inline: auto; }
  .smart-my-auto { margin-block: auto; }

  .smart-gap-0 { gap: var(--smart-space-0); }
  .smart-gap-1 { gap: var(--smart-space-1); }
  .smart-gap-2 { gap: var(--smart-space-2); }
  .smart-gap-3 { gap: var(--smart-space-3); }
  .smart-gap-4 { gap: var(--smart-space-4); }
  .smart-gap-5 { gap: var(--smart-space-5); }
  .smart-gap-6 { gap: var(--smart-space-6); }
  .smart-gap-7 { gap: var(--smart-space-7); }
  .smart-gap-8 { gap: var(--smart-space-8); }

  /* Layout */
  .smart-container--sm { --smart-content-width: var(--smart-container-sm); }
  .smart-container--md { --smart-content-width: var(--smart-container-md); }
  .smart-container--lg { --smart-content-width: var(--smart-container-lg); }
  .smart-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smart-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .smart-span-2 { grid-column: span 2; }
  .smart-span-full { grid-column: 1 / -1; }
  @media (max-width: 50rem) {
    .smart-grid--3, .smart-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smart-span-2 { grid-column: auto; }
  }
  @media (max-width: 30rem) {
    .smart-grid--2, .smart-grid--3, .smart-grid--4 { grid-template-columns: minmax(0, 1fr); }
  }

  /* Typography */
  .smart-text-xs { font-size: var(--smart-font-size-0); }
  .smart-text-sm { font-size: var(--smart-font-size-1); }
  .smart-text-base { font-size: var(--smart-font-size-2); }
  .smart-text-lg { font-size: var(--smart-font-size-4); }
  .smart-text-xl { font-size: var(--smart-font-size-5); }
  .smart-text-secondary { color: var(--smart-text-secondary); }
  .smart-text-tertiary { color: var(--smart-text-tertiary); }
  .smart-text-success { color: var(--smart-success); }
  .smart-text-warning { color: var(--smart-warning); }
  .smart-text-danger { color: var(--smart-danger); }
  .smart-text-start { text-align: start; }
  .smart-text-center { text-align: center; }
  .smart-text-end { text-align: end; }
  .smart-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .smart-balance { text-wrap: balance; }
  .smart-mono { font-family: var(--smart-font-mono); }
  .smart-font-normal { font-weight: var(--smart-font-weight-regular); }
  .smart-font-medium { font-weight: var(--smart-font-weight-medium); }
  .smart-font-semibold { font-weight: var(--smart-font-weight-semibold); }
  .smart-font-bold { font-weight: var(--smart-font-weight-bold); }

  /* Visibility — hidden attribute stays the primary mechanism (reset guards it). */
  .smart-hidden { display: none !important; }
  .smart-invisible { visibility: hidden !important; }
  @media (max-width: 50rem) {
    .smart-hidden-mobile { display: none !important; }
  }
  @media (min-width: 50.01rem) {
    .smart-visible-mobile { display: none !important; }
  }

  /* Surface */
  .smart-elevated-0 { box-shadow: none; }
  .smart-elevated-1 { box-shadow: var(--smart-shadow-sm); }
  .smart-elevated-2 { box-shadow: var(--smart-shadow-md); }
  .smart-rounded-sm { border-radius: var(--smart-radius-sm); }
  .smart-rounded-md { border-radius: var(--smart-radius-md); }
  .smart-rounded-lg { border-radius: var(--smart-radius-lg); }
  .smart-rounded-full { border-radius: var(--smart-radius-full); }
  .smart-bordered { border: var(--smart-border-width) solid var(--smart-border); }
  .smart-w-auto { width: auto; }
  .smart-w-25 { width: 25%; }
  .smart-w-33 { width: calc(100% / 3); }
  .smart-w-50 { width: 50%; }
  .smart-w-66 { width: calc(100% / 3 * 2); }
  .smart-w-75 { width: 75%; }
  .smart-w-full { width: 100%; }
  .smart-h-full { height: 100%; }
  .smart-min-w-0 { min-width: 0; }
  .smart-overflow-x-auto { overflow-x: auto; }

  /* Control sizing — every form control consumes --smart-control-height, so one local override sizes them all */
  .smart-control-sm { --smart-control-height: var(--smart-control-height-sm); font-size: var(--smart-font-size-1); }
  .smart-control-lg { --smart-control-height: var(--smart-control-height-lg); font-size: var(--smart-font-size-3); }

  /* Scroll reveal — armed by JS so no-JS pages never hide content */
  .smart-reveal--armed { opacity: 0; translate: 0 0.75rem; transition: opacity var(--smart-motion-duration-slow) var(--smart-ease-out), translate var(--smart-motion-duration-slow) var(--smart-ease-out); transition-delay: var(--smart-reveal-delay, 0s); }
  .smart-reveal--armed.smart-revealed { opacity: 1; translate: 0 0; }

  /* Media ratios */
  .smart-ratio-1x1 { aspect-ratio: 1; }
  .smart-ratio-4x3 { aspect-ratio: 4 / 3; }
  .smart-ratio-16x9 { aspect-ratio: 16 / 9; }
  .smart-ratio-21x9 { aspect-ratio: 21 / 9; }
  .smart-ratio-1x1 > *, .smart-ratio-4x3 > *, .smart-ratio-16x9 > *, .smart-ratio-21x9 > * { width: 100%; height: 100%; object-fit: cover; }

  /* Media fit — escape hatch when cover-cropping is wrong (logos, screenshots) */
  .smart-object-contain { object-fit: contain; }
  .smart-object-cover { object-fit: cover; }
  .smart-object-fill { object-fit: fill; }
  .smart-object-scale-down { object-fit: scale-down; }

  /* Rich text field — contenteditable with toolbar and hidden sync input */
  .smart-richtext { display: grid; gap: 0; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); overflow: hidden; }
  .smart-richtext__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-2); padding: var(--smart-space-3); border-block-end: 1px solid var(--smart-divider); background: var(--smart-surface-muted); }
  .smart-richtext__toolbar .smart-button { --smart-button-padding-inline: 0.55rem; }
  .smart-richtext__slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--smart-space-1); margin-inline-start: auto; }
  .smart-richtext__editor { min-block-size: 9rem; max-block-size: 28rem; padding: var(--smart-space-4); overflow-y: auto; outline: none; line-height: var(--smart-line-height-body); }
  .smart-richtext__editor:empty::before { content: attr(data-placeholder); color: var(--smart-text-placeholder); pointer-events: none; }
  .smart-richtext__editor:focus { box-shadow: inset 0 0 0 var(--smart-focus-width) var(--smart-accent-soft); }
  .smart-richtext__editor :is(ul, ol) { margin: 0; padding-inline-start: 1.35rem; }
  .smart-richtext__editor a { color: var(--smart-accent); text-decoration: underline; text-underline-offset: 0.12em; }
  .smart-field--invalid .smart-richtext { border-color: var(--smart-danger); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-danger-soft); }

  /* Kanban board — columns with draggable cards */
  .smart-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: var(--smart-space-3); min-block-size: 18rem; padding-block-end: var(--smart-space-2); overflow-x: auto; overscroll-behavior-x: contain; }
  .smart-board__column { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--smart-space-2); min-inline-size: 16rem; max-inline-size: 22rem; padding: var(--smart-space-3); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface-muted); }
  .smart-board__header { display: flex; align-items: center; gap: var(--smart-space-2); }
  .smart-board__header h3 { margin: 0; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-board__list { display: grid; gap: var(--smart-space-2); min-block-size: 4rem; padding: var(--smart-space-1); border-radius: var(--smart-radius-sm); outline: none; }
  .smart-board__list[data-drop-target] { background: var(--smart-accent-soft); outline: 2px dashed var(--smart-accent); outline-offset: -2px; }
  .smart-board__card { display: grid; gap: var(--smart-space-2); padding: var(--smart-space-3); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-sm); background: var(--smart-surface); box-shadow: var(--smart-shadow-sm); cursor: grab; touch-action: none; transition: box-shadow var(--smart-motion-duration-fast), translate var(--smart-motion-duration-fast); }
  .smart-board__card:hover { box-shadow: var(--smart-shadow-md); }
  .smart-board__card:focus-visible { outline: var(--smart-focus-width) solid var(--smart-accent); outline-offset: 2px; }
  .smart-board__card[data-lifted] { box-shadow: var(--smart-shadow-md); outline: var(--smart-focus-width) solid var(--smart-accent); outline-offset: 2px; cursor: grabbing; }
  .smart-board__card[data-dragging] { opacity: 0.55; cursor: grabbing; user-select: none; }
  .smart-board__card-title { margin: 0; font-size: var(--smart-font-size-1); font-weight: var(--smart-font-weight-semibold); }
  .smart-board__card-meta { color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); }
  .smart-board__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--smart-space-2); margin-block-start: var(--smart-space-2); padding-block-start: var(--smart-space-2); border-block-start: 1px solid var(--smart-divider); }

  /* Conversation + composer — messaging primitives */
  .smart-conversation { display: grid; grid-template-rows: minmax(0, 1fr); min-block-size: 16rem; border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); overflow: hidden; }
  .smart-conversation__header { display: flex; align-items: center; gap: var(--smart-space-3); padding: var(--smart-space-3) var(--smart-space-4); border-block-end: 1px solid var(--smart-divider); background: var(--smart-surface-muted); }
  .smart-conversation__title { margin: 0; font-size: var(--smart-font-size-2); font-weight: var(--smart-font-weight-semibold); }
  .smart-conversation__presence { display: inline-flex; align-items: center; gap: var(--smart-space-2); color: var(--smart-text-secondary); font-size: var(--smart-font-size-0); }
  .smart-conversation__presence-dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: var(--smart-radius-full); background: var(--smart-text-tertiary); }
  .smart-conversation__presence-dot[data-online] { background: var(--smart-success); }
  .smart-conversation__messages { display: flex; flex-direction: column; gap: var(--smart-space-3); padding: var(--smart-space-4); overflow-y: auto; overscroll-behavior: contain; }
  .smart-conversation__message { display: flex; max-inline-size: min(100%, 36rem); }
  .smart-conversation__message[data-own="true"] { align-self: flex-end; }
  .smart-conversation__message[data-own="false"] { align-self: flex-start; }
  .smart-conversation__bubble { display: grid; gap: var(--smart-space-1); padding: var(--smart-space-3); border-radius: var(--smart-radius-md); background: var(--smart-surface-muted); color: var(--smart-text); }
  .smart-conversation__message[data-own="true"] .smart-conversation__bubble { background: var(--smart-accent-soft); border-end-end-radius: var(--smart-radius-xs); }
  .smart-conversation__message[data-own="false"] .smart-conversation__bubble { border-end-start-radius: var(--smart-radius-xs); }
  .smart-conversation__meta { color: var(--smart-text-tertiary); font-size: var(--smart-font-size-0); }
  .smart-conversation__attachment { display: inline-flex; align-items: center; gap: var(--smart-space-2); padding: var(--smart-space-2); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-sm); background: var(--smart-surface); font-size: var(--smart-font-size-0); }
  .smart-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--smart-space-2); align-items: end; padding: var(--smart-space-3); border: 1px solid var(--smart-border); border-radius: var(--smart-radius-md); background: var(--smart-surface); }
  .smart-composer .smart-textarea { min-block-size: 2.75rem; max-block-size: 10rem; resize: none; overflow-y: auto; field-sizing: fixed; }
  .smart-composer__actions { display: inline-flex; align-items: center; gap: var(--smart-space-2); }
}

/*
 * Optional Liquid material.
 * Activate with <html data-material="liquid"> and tune the
 * --smart-liquid-* variables globally. Solid remains the default.
 * Lives in @layer smart.materials so host CSS (unlayered) and later
 * layers can override it; it still wins over @layer smart.components.
 */
@layer smart.materials {
:root[data-material="liquid"] {
  --smart-liquid-surface: color-mix(in srgb, var(--smart-canvas-raised) var(--smart-liquid-opacity), transparent);
  --smart-liquid-control-surface: color-mix(in srgb, var(--smart-liquid-surface) 68%, transparent);
  --smart-liquid-control-hover-surface: color-mix(in srgb, var(--smart-liquid-surface) 84%, var(--smart-liquid-tint));
  --smart-liquid-control-active-surface: color-mix(in srgb, var(--smart-liquid-surface) 92%, var(--smart-liquid-tint));
}

:root[data-material="liquid"] :is(
  .smart-button,
  .smart-input,
  select.smart-select,
  .smart-select__trigger,
  .smart-select__option,
  .smart-combobox__input,
  .smart-search__input,
  .smart-file__control,
  .smart-date__trigger,
  .smart-time__trigger,
  .smart-textarea,
  .smart-range,
  .smart-choice input,
  .smart-switch__track,
  .smart-segmented,
  .smart-card--interactive,
  .smart-tab,
  .smart-accordion summary,
  .smart-menu button,
  .smart-toast__close,
  .smart-pagination__link,
  .smart-alert,
  .smart-date__nav,
  .smart-date__action,
  .smart-time__action,
  .smart-search__clear,
  .smart-carousel__nav,
  .smart-carousel__expand,
  .smart-carousel__toggle
) {
  --smart-liquid-pointer-highlight: radial-gradient(circle var(--smart-liquid-glow-size) at var(--smart-liquid-x, 50%) var(--smart-liquid-y, 0%), color-mix(in srgb, var(--smart-liquid-highlight) 84%, transparent), transparent 62%);
}

:root[data-material="liquid"] :is(
  .smart-dialog,
  .smart-popover,
  .smart-select__popover,
  .smart-combobox__popover,
  .smart-date__popover,
  .smart-time__popover,
  .smart-toast,
  .smart-segmented,
  .smart-command,
  .smart-alert--banner,
  .smart-app-header,
  .smart-attachment,
  .smart-carousel__nav,
  .smart-carousel__expand
) {
  background:
    var(--smart-liquid-refraction),
    linear-gradient(145deg, var(--smart-liquid-highlight), transparent 34%),
    linear-gradient(315deg, var(--smart-liquid-tint), transparent 48%),
    var(--smart-liquid-surface);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 78%, transparent);
  box-shadow: var(--smart-liquid-shadow);
  backdrop-filter: var(--smart-liquid-frost-filter);
  -webkit-backdrop-filter: var(--smart-liquid-frost-filter);
}

/* The lightbox stays a neutral dark media surface in every material */
:root[data-material="liquid"] .smart-lightbox { background: light-dark(rgb(17 18 23 / 0.97), rgb(0 0 0 / 0.97)); border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

:root[data-material="liquid"] .smart-button {
  --_liquid-button-pointer: var(--smart-liquid-pointer-highlight);
  --_liquid-button-sheen: linear-gradient(150deg, color-mix(in srgb, var(--smart-liquid-highlight) 52%, transparent), transparent 50%);
  --_liquid-button-edge: linear-gradient(180deg, color-mix(in srgb, var(--smart-liquid-rim) 58%, transparent), transparent 42%, color-mix(in srgb, var(--smart-liquid-underlight) 66%, transparent));
  --_liquid-button-surface: var(--smart-liquid-control-surface);
  --_liquid-button-hover-surface: var(--smart-liquid-control-hover-surface);
  --_liquid-button-active-surface: var(--smart-liquid-control-active-surface);
  background:
    var(--_liquid-button-pointer),
    var(--smart-liquid-refraction),
    var(--_liquid-button-edge),
    var(--_liquid-button-sheen),
    var(--_liquid-button-surface);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 72%, var(--_button-border));
  box-shadow: inset 0 1px 0 var(--smart-liquid-rim), 0 3px 10px rgba(20, 20, 30, 0.045);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.76)) saturate(var(--smart-liquid-saturate)) contrast(0.96) brightness(1.06);
  transition: transform var(--smart-motion-duration-fast) var(--smart-ease-standard), translate var(--smart-motion-duration) var(--smart-ease-spring), filter var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard), border-color var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), color var(--smart-motion-duration) var(--smart-ease-standard);
}

:root[data-material="liquid"] :is(.smart-button--primary, .smart-button--danger) {
  --_liquid-button-base: var(--_button-bg);
  --_liquid-button-edge: none;
  --_liquid-button-pointer: radial-gradient(circle var(--smart-liquid-glow-size) at var(--smart-liquid-x, 50%) var(--smart-liquid-y, 0%), color-mix(in srgb, white 12%, transparent), transparent 62%);
  --_liquid-button-sheen: linear-gradient(118deg, color-mix(in srgb, white 28%, transparent) 0%, color-mix(in srgb, white 10%, transparent) 30%, transparent 56%);
  --_liquid-button-surface: color-mix(in srgb, var(--_liquid-button-base) var(--smart-liquid-accent-opacity), transparent);
  --_liquid-button-hover-surface: color-mix(in srgb, var(--_liquid-button-surface) 86%, var(--_liquid-button-base));
  --_liquid-button-active-surface: color-mix(in srgb, var(--_liquid-button-surface) 84%, transparent);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 42%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, black 13%, transparent), 0 4px 12px color-mix(in srgb, var(--_button-bg) 12%, transparent);
}

:root[data-material="liquid"] .smart-button--primary { --_liquid-button-base: var(--smart-accent-strong); }
:root[data-material="liquid"] .smart-button--danger {
  --_button-color: #ffffff;
  --_liquid-button-base: color-mix(in srgb, var(--smart-danger) 62%, #641521);
  --_liquid-button-surface: color-mix(in srgb, var(--_liquid-button-base) 84%, transparent);
}

:root[data-material="liquid"] .smart-button--quiet { --_liquid-button-surface: transparent; }

:root[data-material="liquid"] :is(.smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-combobox__input, .smart-search__input, .smart-file__control, .smart-date__trigger, .smart-time__trigger) {
  background:
    var(--smart-liquid-pointer-highlight),
    linear-gradient(150deg, color-mix(in srgb, var(--smart-liquid-highlight) 48%, transparent), transparent 52%),
    var(--smart-liquid-control-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 70%, transparent), var(--smart-shadow-xs);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.64)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] :is(.smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-combobox__input, .smart-search__input, .smart-file__control, .smart-date__trigger, .smart-time__trigger):focus {
  background:
    var(--smart-liquid-pointer-highlight),
    linear-gradient(150deg, color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent), transparent 50%),
    var(--smart-liquid-control-active-surface);
  box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft), inset 0 1px 0 var(--smart-liquid-highlight), 0 5px 16px rgba(20, 20, 30, 0.045);
}

:root[data-material="liquid"] .smart-choice input {
  background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-surface);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 62%, var(--smart-border-strong));
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.45)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] .smart-choice input[type="checkbox"]:checked {
  background: var(--smart-liquid-pointer-highlight), color-mix(in srgb, var(--smart-accent) var(--smart-liquid-opacity), transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent), 0 4px 12px var(--smart-accent-soft);
}

:root[data-material="liquid"] .smart-choice input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px var(--smart-liquid-control-active-surface), 0 0 0 1px var(--smart-accent), 0 4px 12px var(--smart-accent-soft);
}

:root[data-material="liquid"] .smart-switch__track {
  background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-surface);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 64%, var(--smart-border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent), var(--smart-shadow-xs);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.55)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] .smart-switch input:checked + .smart-switch__track {
  background: var(--smart-liquid-pointer-highlight), color-mix(in srgb, var(--smart-accent) var(--smart-liquid-opacity), transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent), 0 5px 16px var(--smart-accent-soft);
}

:root[data-material="liquid"] .smart-segmented[data-smart-segmented]::before {
  background:
    radial-gradient(circle at 25% 10%, color-mix(in srgb, var(--smart-liquid-highlight) 92%, transparent), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), transparent 48%),
    color-mix(in srgb, var(--smart-canvas-raised) var(--smart-liquid-opacity), transparent);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 86%, transparent);
  box-shadow: 0 3px 10px rgba(20, 20, 30, 0.065), inset 0 1px 0 var(--smart-liquid-highlight), inset 0 -1px 0 color-mix(in srgb, var(--smart-accent) 9%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.72)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] .smart-segmented--moving::before { animation-name: smart-liquid-segment-morph; }

:root[data-material="liquid"] .smart-switch__track::after {
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.64) 52%, rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.45)) saturate(var(--smart-liquid-saturate));
  transition: translate var(--smart-motion-duration) var(--smart-ease-spring), scale var(--smart-motion-duration-fast) var(--smart-ease-spring);
}

:root[data-material="liquid"] .smart-switch:active .smart-switch__track::after { scale: 1.08 0.94; }

:root[data-material="liquid"] .smart-card--interactive {
  background:
    var(--smart-liquid-pointer-highlight),
    var(--smart-liquid-refraction),
    radial-gradient(110% 72% at 0% -18%, color-mix(in srgb, var(--smart-liquid-rim) 64%, transparent), transparent 62%),
    linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 46%, transparent), transparent 44%),
    var(--smart-liquid-surface);
  border-color: color-mix(in srgb, var(--smart-liquid-border) 58%, var(--smart-border));
  box-shadow: 0 8px 24px rgba(20, 20, 30, 0.055), inset 0 1px 0 var(--smart-liquid-rim), inset 0 -1px 0 color-mix(in srgb, var(--smart-liquid-underlight) 72%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.82)) saturate(var(--smart-liquid-saturate)) contrast(0.96) brightness(1.06);
}

:root[data-material="liquid"] .smart-tab {
  border-radius: var(--smart-radius-sm) var(--smart-radius-sm) 0 0;
  transition: color var(--smart-motion-duration) var(--smart-ease-standard), background var(--smart-motion-duration) var(--smart-ease-standard), translate var(--smart-motion-duration-fast) var(--smart-ease-spring);
}

:root[data-material="liquid"] .smart-tabs {
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--smart-liquid-border) 46%, var(--smart-divider));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

:root[data-material="liquid"] .smart-tab-list { gap: var(--smart-space-1); overflow-x: auto; overflow-y: hidden; }

:root[data-material="liquid"] .smart-tab-list[data-smart-tabs]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: auto -1px;
  inset-inline-start: 0;
  width: max(0px, calc(var(--smart-tab-width, 0px) - (var(--smart-space-3) * 2)));
  height: 3px;
  border: 0;
  border-radius: var(--smart-radius-full);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--smart-accent) 66%, transparent), var(--smart-accent) 46%, color-mix(in srgb, var(--smart-accent) 66%, transparent));
  box-shadow: 0 1px 5px var(--smart-accent-soft), inset 0 1px 0 color-mix(in srgb, white 46%, transparent);
  translate: calc(var(--smart-tab-x, 0px) + var(--smart-space-3)) 0;
  transition: translate var(--smart-motion-duration-slow) var(--smart-ease-spring), width var(--smart-motion-duration) var(--smart-ease-out), background var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard);
  pointer-events: none;
}

:root[data-material="liquid"] .smart-tab-list.smart-tab-list--moving::before { animation: smart-liquid-tab-morph var(--smart-motion-duration-slow) var(--smart-ease-out); }

:root[data-material="liquid"] .smart-tab { min-height: var(--smart-control-height); }
:root[data-material="liquid"] .smart-tab::after { display: none; }
:root[data-material="liquid"] .smart-tab[aria-selected="true"] {
  background: transparent;
  box-shadow: none;
}
:root[data-material="liquid"] .smart-tab-panel.smart-enter { animation-name: smart-liquid-panel-in; animation-duration: var(--smart-motion-duration-slow); }

:root[data-material="liquid"] .smart-button[aria-haspopup="menu"]:not(.smart-split-button__menu) {
  padding-inline: 1rem 0.5rem;
  gap: 0.65rem;
  border-radius: var(--smart-radius-full);
}

:root[data-material="liquid"] .smart-button[aria-haspopup="menu"]:not(.smart-split-button__menu) .smart-button__menu-indicator {
  background: color-mix(in srgb, var(--smart-liquid-control-active-surface) 76%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent);
}

:root[data-material="liquid"] .smart-button[aria-haspopup="menu"]:not(.smart-split-button__menu)[aria-expanded="true"] {
  background:
    var(--_liquid-button-pointer),
    linear-gradient(150deg, var(--_liquid-button-sheen), transparent 48%),
    color-mix(in srgb, var(--smart-accent) 9%, var(--smart-liquid-control-active-surface));
  box-shadow: inset 0 1px 0 var(--smart-liquid-highlight), 0 6px 18px rgba(20, 20, 30, 0.075);
}

:root[data-material="liquid"] .smart-button[aria-haspopup="menu"]:not(.smart-split-button__menu)[aria-expanded="true"] .smart-button__menu-indicator {
  background: color-mix(in srgb, var(--smart-accent) 16%, var(--smart-liquid-control-active-surface));
  box-shadow: inset 0 1px 0 var(--smart-liquid-highlight), 0 4px 12px var(--smart-accent-soft);
}

:root[data-material="liquid"] :is(.smart-popover, .smart-select__popover, .smart-combobox__popover) {
  transform-origin: top right;
  transition: opacity var(--smart-motion-duration) var(--smart-ease-out), scale var(--smart-motion-duration-slow) var(--smart-ease-spring), translate var(--smart-motion-duration-slow) var(--smart-ease-spring), filter var(--smart-motion-duration) var(--smart-ease-out), border-radius var(--smart-motion-duration-slow) var(--smart-ease-spring), overlay var(--smart-motion-duration) allow-discrete, display var(--smart-motion-duration) allow-discrete;
}

:root[data-material="liquid"] :is(.smart-date__popover, .smart-time__popover) {
  transform-origin: top left;
  transition: opacity var(--smart-motion-duration) var(--smart-ease-out), scale var(--smart-motion-duration-slow) var(--smart-ease-spring), translate var(--smart-motion-duration-slow) var(--smart-ease-spring), filter var(--smart-motion-duration) var(--smart-ease-out), border-radius var(--smart-motion-duration-slow) var(--smart-ease-spring), overlay var(--smart-motion-duration) allow-discrete, display var(--smart-motion-duration) allow-discrete;
}

@starting-style {
  :root[data-material="liquid"] :is(.smart-popover, .smart-select__popover, .smart-combobox__popover, .smart-date__popover, .smart-time__popover):popover-open {
    opacity: 0;
    scale: 0.72 0.48;
    translate: 0 -0.75rem;
    filter: blur(5px);
    border-radius: var(--smart-radius-full);
  }
}

:root[data-material="liquid"] .smart-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-color: color-mix(in srgb, var(--smart-liquid-border) 68%, var(--smart-border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--smart-accent) 88%, transparent) 0 var(--smart-range-fill, 50%), transparent var(--smart-range-fill, 50%) 100%),
    var(--smart-liquid-pointer-highlight),
    var(--smart-liquid-control-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent), 0 3px 10px rgba(20, 20, 30, 0.06);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.5)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] .smart-range::-moz-range-track {
  height: 0.5rem;
  border-color: color-mix(in srgb, var(--smart-liquid-border) 68%, var(--smart-border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--smart-accent) 88%, transparent) 0 var(--smart-range-fill, 50%), transparent var(--smart-range-fill, 50%) 100%),
    var(--smart-liquid-pointer-highlight),
    var(--smart-liquid-control-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent), 0 3px 10px rgba(20, 20, 30, 0.06);
}

:root[data-material="liquid"] .smart-range::-webkit-slider-thumb {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 76%, var(--smart-accent) 24%);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.28) 34%, transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--smart-accent) 14%, transparent), transparent 58%),
    color-mix(in srgb, var(--smart-canvas-raised) 82%, transparent);
  box-shadow: 0 3px 9px rgba(20, 20, 30, 0.1), 0 0 0 1px var(--smart-accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 color-mix(in srgb, var(--smart-accent-strong) 10%, transparent);
}

:root[data-material="liquid"] .smart-range::-moz-range-thumb {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 76%, var(--smart-accent) 24%);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.28) 34%, transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--smart-accent) 14%, transparent), transparent 58%),
    color-mix(in srgb, var(--smart-canvas-raised) 82%, transparent);
  box-shadow: 0 3px 9px rgba(20, 20, 30, 0.1), 0 0 0 1px var(--smart-accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 color-mix(in srgb, var(--smart-accent-strong) 10%, transparent);
}

:root[data-material="liquid"] .smart-progress {
  height: 0.58rem;
  border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 58%, var(--smart-border));
  background: var(--smart-liquid-control-surface);
  box-shadow: inset 0 1px 2px rgba(20, 20, 30, 0.055), inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 58%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.5)) saturate(var(--smart-liquid-saturate));
}

:root[data-material="liquid"] .smart-progress::-webkit-progress-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--smart-liquid-highlight) 40%, transparent), transparent 60%),
    var(--smart-liquid-control-surface);
}

:root[data-material="liquid"] .smart-progress::-webkit-progress-value {
  background:
    linear-gradient(180deg, color-mix(in srgb, white 34%, transparent), transparent 48%),
    color-mix(in srgb, var(--smart-accent) 76%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), 2px 0 7px var(--smart-accent-soft);
}

:root[data-material="liquid"] .smart-progress::-moz-progress-bar {
  background:
    linear-gradient(180deg, color-mix(in srgb, white 34%, transparent), transparent 48%),
    color-mix(in srgb, var(--smart-accent) 76%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 38%, transparent), 2px 0 7px var(--smart-accent-soft);
}

:root[data-material="liquid"] .smart-accordion summary,
:root[data-material="liquid"] .smart-menu button,
:root[data-material="liquid"] .smart-select__option,
:root[data-material="liquid"] .smart-toast__close {
  border-radius: var(--smart-radius-control);
  transition: background var(--smart-motion-duration) var(--smart-ease-standard), box-shadow var(--smart-motion-duration) var(--smart-ease-standard), translate var(--smart-motion-duration-fast) var(--smart-ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  :root[data-material="liquid"] .smart-button:hover:not(:disabled, [aria-disabled="true"]) {
    background:
      var(--_liquid-button-pointer),
      var(--smart-liquid-refraction),
      var(--_liquid-button-edge),
      var(--_liquid-button-sheen),
      var(--_liquid-button-hover-surface);
    border-color: color-mix(in srgb, var(--smart-liquid-border) 88%, var(--_button-border));
    box-shadow: inset 0 1px 0 var(--smart-liquid-rim), 0 5px 16px rgba(20, 20, 30, 0.065);
    filter: saturate(1.08) brightness(1.025);
    translate: 0 -1px;
  }

  :root[data-material="liquid"] .smart-button--quiet:hover:not(:disabled, [aria-disabled="true"]) {
    background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-hover-surface);
  }

  :root[data-material="liquid"] :is(.smart-button--primary, .smart-button--danger):hover:not(:disabled, [aria-disabled="true"]) {
    border-color: color-mix(in srgb, var(--smart-liquid-border) 48%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, black 13%, transparent), 0 5px 16px color-mix(in srgb, var(--_button-bg) 18%, transparent);
  }

  :root[data-material="liquid"] :is(.smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-combobox__input, .smart-search__input, .smart-file__control, .smart-date__trigger, .smart-time__trigger):hover:not(:focus) {
    background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-hover-surface);
    border-color: color-mix(in srgb, var(--smart-liquid-border) 86%, var(--smart-border-strong));
    box-shadow: inset 0 1px 0 var(--smart-liquid-highlight), 0 4px 13px rgba(20, 20, 30, 0.045);
  }

  :root[data-material="liquid"] .smart-choice:hover input:not(:disabled),
  :root[data-material="liquid"] .smart-switch:hover .smart-switch__track {
    background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-hover-surface);
    box-shadow: inset 0 1px 0 var(--smart-liquid-highlight), 0 3px 10px rgba(20, 20, 30, 0.055);
  }

  :root[data-material="liquid"] .smart-switch:hover input:checked + .smart-switch__track {
    background: var(--smart-liquid-pointer-highlight), color-mix(in srgb, var(--smart-accent) 78%, transparent);
  }

  :root[data-material="liquid"] .smart-card--interactive:hover {
    background:
      var(--smart-liquid-pointer-highlight),
      linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent), transparent 42%),
      color-mix(in srgb, var(--smart-liquid-surface) 84%, transparent);
    border-color: color-mix(in srgb, var(--smart-liquid-border) 82%, var(--smart-border));
    box-shadow: 0 12px 34px rgba(20, 20, 30, 0.075), inset 0 1px 0 var(--smart-liquid-highlight);
  }

  :root[data-material="liquid"] .smart-accordion summary:hover,
  :root[data-material="liquid"] .smart-menu button:hover,
  :root[data-material="liquid"] .smart-select__option:hover,
  :root[data-material="liquid"] .smart-combobox__option:hover,
  :root[data-material="liquid"] .smart-date__nav:hover,
  :root[data-material="liquid"] .smart-date__day:hover:not(.smart-date__day--selected),
  :root[data-material="liquid"] .smart-time__option:hover:not([aria-selected="true"]),
  :root[data-material="liquid"] .smart-search__clear:hover,
  :root[data-material="liquid"] .smart-pagination__link:hover,
  :root[data-material="liquid"] .smart-toast__close:hover {
    background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-hover-surface);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 58%, transparent);
  }

  :root[data-material="liquid"] .smart-tab:hover {
    background: color-mix(in srgb, var(--smart-liquid-control-hover-surface) 42%, transparent);
    box-shadow: none;
  }
}

:root[data-material="liquid"] .smart-button:active:not(:disabled, [aria-disabled="true"]),
:root[data-material="liquid"] .smart-menu button:active,
:root[data-material="liquid"] .smart-select__option:active {
  background: var(--smart-liquid-pointer-highlight), var(--smart-liquid-control-active-surface);
  box-shadow: inset 0 2px 5px rgba(20, 20, 30, 0.12), inset 0 1px 0 var(--smart-liquid-highlight);
  filter: saturate(1.12);
  translate: 0 0;
}

:root[data-material="liquid"] .smart-tab:active { background: color-mix(in srgb, var(--smart-liquid-control-active-surface) 48%, transparent); }

:root[data-material="liquid"] .smart-button:active:not(:disabled, [aria-disabled="true"]) {
  background: var(--_liquid-button-pointer), var(--_liquid-button-active-surface);
}

/* Component-specific Liquid art direction. These surfaces retain their Solid
   structure while gaining optical depth, edge light, and connected states. */
:root[data-material="liquid"] .smart-app-header {
  border-bottom-color: color-mix(in srgb, var(--smart-liquid-border) 58%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent) inset, 0 10px 30px color-mix(in srgb, black 7%, transparent);
}
:root[data-material="liquid"] .smart-app-header__link {
  background: transparent;
}
:root[data-material="liquid"] .smart-app-header__link:hover,
:root[data-material="liquid"] .smart-app-header__link[aria-current="page"] {
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 55%, transparent), transparent 55%), var(--smart-liquid-control-hover-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 65%, transparent) inset;
}
:root[data-material="liquid"] .smart-split-button {
  filter: drop-shadow(0 8px 18px color-mix(in srgb, black 10%, transparent));
}
:root[data-material="liquid"] .smart-split-button .smart-button {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 65%, transparent) inset;
}
:root[data-material="liquid"] .smart-multiselect [role="option"][aria-selected="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--smart-liquid-highlight) 55%, transparent), transparent 70%), var(--smart-liquid-control-active-surface);
}
:root[data-material="liquid"] .smart-range-dual__track::before {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 70%, transparent) inset, 0 1px 3px color-mix(in srgb, black 12%, transparent);
}
:root[data-material="liquid"] .smart-range-dual input[type="range"]::-webkit-slider-thumb {
  background: radial-gradient(circle at 34% 24%, var(--smart-liquid-highlight), transparent 34%), color-mix(in srgb, var(--smart-accent) 82%, var(--smart-liquid-surface));
  box-shadow: 0 1px 0 var(--smart-liquid-highlight) inset, 0 4px 12px color-mix(in srgb, var(--smart-accent) 30%, transparent);
}
:root[data-material="liquid"] .smart-range-dual input[type="range"]::-moz-range-thumb {
  background: color-mix(in srgb, var(--smart-accent) 82%, var(--smart-liquid-surface));
  box-shadow: 0 1px 0 var(--smart-liquid-highlight) inset, 0 4px 12px color-mix(in srgb, var(--smart-accent) 30%, transparent);
}
:root[data-material="liquid"] .smart-rating button:hover,
:root[data-material="liquid"] .smart-rating button:focus-visible {
  background: radial-gradient(circle at 45% 25%, color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), transparent 66%), var(--smart-liquid-control-hover-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 70%, transparent) inset;
}
:root[data-material="liquid"] .smart-color input[type="color"] {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 75%, transparent);
  background: var(--smart-liquid-control-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 78%, transparent) inset, var(--smart-shadow-sm);
}
:root[data-material="liquid"] .smart-avatar-group .smart-avatar,
:root[data-material="liquid"] .smart-avatar-group__more {
  border-color: color-mix(in srgb, var(--smart-liquid-highlight) 78%, var(--smart-canvas-raised));
  box-shadow: 0 4px 12px color-mix(in srgb, black 14%, transparent), 0 1px 0 var(--smart-liquid-highlight) inset;
}
:root[data-material="liquid"] .smart-timeline__marker {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--smart-liquid-border) 70%, transparent), 0 0 16px color-mix(in srgb, var(--smart-accent) 38%, transparent);
}
:root[data-material="liquid"] .smart-notification[data-unread="true"] {
  border-color: color-mix(in srgb, var(--smart-accent) 24%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--smart-accent) 15%, transparent), transparent 72%), var(--smart-liquid-control-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 62%, transparent) inset;
}
:root[data-material="liquid"] .smart-attachment {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 64%, transparent);
}
:root[data-material="liquid"] .smart-attachment:hover {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 74%, transparent) inset, 0 12px 28px color-mix(in srgb, black 12%, transparent);
}
:root[data-material="liquid"] .smart-progress-ring {
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--smart-accent) 18%, transparent));
}
:root[data-material="liquid"] .smart-chart__area {
  fill: color-mix(in srgb, var(--smart-chart-stroke, var(--smart-accent)) 28%, transparent);
}
:root[data-material="liquid"] .smart-chart__bar {
  fill: color-mix(in srgb, var(--smart-chart-stroke, var(--smart-accent)) 82%, white);
}
:root[data-material="liquid"] .smart-chart__donut-track {
  stroke: color-mix(in srgb, var(--smart-liquid-control-surface) 86%, var(--smart-divider));
}
:root[data-material="liquid"] .smart-progress-ring::before {
  background: linear-gradient(145deg, var(--smart-liquid-highlight), transparent 52%), var(--smart-liquid-surface);
  box-shadow: 0 1px 0 var(--smart-liquid-highlight) inset;
  backdrop-filter: blur(var(--smart-liquid-blur));
}
:root[data-material="liquid"] .smart-command {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 74%, transparent) inset, 0 28px 80px color-mix(in srgb, black 26%, transparent);
}
:root[data-material="liquid"] .smart-command__search {
  background: color-mix(in srgb, var(--smart-liquid-control-surface) 52%, transparent);
}
:root[data-material="liquid"] .smart-command__item[aria-selected="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--smart-liquid-highlight) 54%, transparent), transparent 72%), var(--smart-liquid-control-active-surface);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent) inset;
}
:root[data-material="liquid"] .smart-alert--banner {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 74%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 82%, transparent) inset, 0 24px 64px color-mix(in srgb, black 24%, transparent);
}

/* Liquid QA pass: every component family gets a material-specific optical
   treatment. Content remains legible; depth is reserved for controls,
   containers, selection, and navigation rather than decorative blur alone. */
:root[data-material="liquid"] .smart-split-button {
  align-items: stretch;
  gap: 1px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 76%, transparent);
  border-radius: calc(var(--smart-radius-control) + 3px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), transparent 46%),
    var(--smart-liquid-control-surface);
  box-shadow: 0 8px 18px color-mix(in srgb, black 10%, transparent), inset 0 1px 0 var(--smart-liquid-highlight);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.7)) saturate(var(--smart-liquid-saturate));
  filter: none;
}
:root[data-material="liquid"] .smart-split-button .smart-button {
  min-height: calc(var(--smart-control-height) - 4px);
  margin-inline-start: 0;
  border: 0;
}
:root[data-material="liquid"] .smart-split-button .smart-button:hover:not(:disabled, [aria-disabled="true"]),
:root[data-material="liquid"] .smart-split-button .smart-button:active:not(:disabled, [aria-disabled="true"]) { translate: 0 0; }
:root[data-material="liquid"] .smart-split-button .smart-button:first-child {
  border-start-start-radius: var(--smart-radius-control);
  border-end-start-radius: var(--smart-radius-control);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
:root[data-material="liquid"] .smart-split-button :is(.smart-button--icon:last-child, .smart-split-button__menu) {
  inline-size: calc(var(--smart-control-height) - 4px);
  min-width: calc(var(--smart-control-height) - 4px);
  padding-inline: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--smart-radius-control);
  border-end-end-radius: var(--smart-radius-control);
}
:root[data-material="liquid"] .smart-split-button .smart-button__menu-indicator {
  background: color-mix(in srgb, white 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
}

:root[data-material="liquid"] :is(
  .smart-card,
  .smart-table-wrap,
  .smart-list,
  .smart-empty,
  .smart-app-shell,
  .smart-payment,
  .smart-form-errors,
  .smart-tags__control,
  .smart-accordion
) {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 68%, var(--smart-border));
  background:
    var(--smart-liquid-refraction),
    radial-gradient(115% 78% at 0% -22%, color-mix(in srgb, var(--smart-liquid-rim) 56%, transparent), transparent 62%),
    linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 54%, transparent), transparent 42%),
    linear-gradient(315deg, var(--smart-liquid-tint), transparent 52%),
    var(--smart-liquid-surface);
  box-shadow: 0 10px 30px color-mix(in srgb, black 7%, transparent), inset 0 1px 0 var(--smart-liquid-rim), inset 0 -1px 0 color-mix(in srgb, var(--smart-liquid-underlight) 70%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.82)) saturate(var(--smart-liquid-saturate)) contrast(0.96) brightness(1.06);
  -webkit-backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.82)) saturate(var(--smart-liquid-saturate)) contrast(0.96) brightness(1.06);
}
:root[data-material="liquid"] .smart-page-header {
  padding: var(--smart-space-5);
  border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 58%, var(--smart-divider));
  border-radius: var(--smart-radius-surface);
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 46%, transparent), transparent 48%), color-mix(in srgb, var(--smart-liquid-surface) 62%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 62%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.5)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-sidebar {
  border-inline-end-color: color-mix(in srgb, var(--smart-liquid-border) 58%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--smart-liquid-highlight) 58%, transparent), transparent 44%), color-mix(in srgb, var(--smart-liquid-surface) 76%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.76)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-app-shell__main {
  background: color-mix(in srgb, var(--smart-liquid-surface) 28%, transparent);
}
:root[data-material="liquid"] .smart-sidebar__link:hover,
:root[data-material="liquid"] .smart-sidebar__link[aria-current="page"] {
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent), transparent 58%), color-mix(in srgb, var(--smart-accent) 15%, var(--smart-liquid-control-active-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent);
}

:root[data-material="liquid"] .smart-alert { --smart-liquid-alert-tone: var(--smart-info); border-color: color-mix(in srgb, var(--smart-liquid-alert-tone) 24%, var(--smart-liquid-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 58%, transparent), transparent 46%), color-mix(in srgb, var(--smart-liquid-alert-tone) 9%, var(--smart-liquid-surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--smart-liquid-alert-tone) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 76%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.64)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-alert--success { --smart-liquid-alert-tone: var(--smart-success); }
:root[data-material="liquid"] .smart-alert--warning { --smart-liquid-alert-tone: var(--smart-warning); }
:root[data-material="liquid"] .smart-alert--danger { --smart-liquid-alert-tone: var(--smart-danger); }
:root[data-material="liquid"] .smart-form-errors {
  border-color: color-mix(in srgb, var(--smart-danger) 28%, var(--smart-liquid-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 52%, transparent), transparent 48%), color-mix(in srgb, var(--smart-danger) 10%, var(--smart-liquid-surface));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--smart-danger) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent);
}

:root[data-material="liquid"] :is(.smart-badge, .smart-chip, .smart-tab__count, .smart-file__label) {
  border: 1px solid color-mix(in srgb, currentColor 15%, var(--smart-liquid-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent), transparent 58%), color-mix(in srgb, currentColor 10%, var(--smart-liquid-control-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 74%, transparent), 0 3px 10px color-mix(in srgb, currentColor 7%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.5)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-badge--dot { border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent), 0 3px 10px color-mix(in srgb, currentColor 18%, transparent); }
:root[data-material="liquid"] .smart-chip__remove:hover { background: var(--smart-liquid-control-hover-surface); box-shadow: inset 0 1px 0 var(--smart-liquid-highlight); }

:root[data-material="liquid"] .smart-avatar {
  background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--smart-liquid-highlight) 76%, transparent), transparent 42%), color-mix(in srgb, var(--smart-accent) 16%, var(--smart-liquid-control-surface));
  border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 76%, transparent), 0 5px 14px color-mix(in srgb, var(--smart-accent) 14%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.48)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-avatar__status { box-shadow: 0 0 0 2px color-mix(in srgb, var(--smart-liquid-surface) 88%, transparent), 0 2px 8px color-mix(in srgb, currentColor 24%, transparent); }
:root[data-material="liquid"] .smart-avatar-group .smart-avatar { border-width: 2px; }
:root[data-material="liquid"] .smart-rating button[data-active="true"] { background: radial-gradient(circle at 34% 22%, color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), transparent 52%), color-mix(in srgb, var(--smart-rating-color) 14%, var(--smart-liquid-control-surface)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), 0 4px 12px color-mix(in srgb, var(--smart-rating-color) 11%, transparent); }
:root[data-material="liquid"] .smart-alert__icon,
:root[data-material="liquid"] .smart-empty__icon { border: 1px solid color-mix(in srgb, currentColor 18%, var(--smart-liquid-border)); background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--smart-liquid-highlight) 76%, transparent), transparent 48%), color-mix(in srgb, currentColor 10%, var(--smart-liquid-control-surface)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 70%, transparent), 0 4px 12px color-mix(in srgb, currentColor 9%, transparent); }
:root[data-material="liquid"] .smart-alert__close:hover { background: var(--smart-liquid-control-hover-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent); }

:root[data-material="liquid"] .smart-accordion { overflow: hidden; border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 66%, var(--smart-divider)); border-radius: var(--smart-radius-surface); }
:root[data-material="liquid"] .smart-accordion summary { padding-inline: var(--smart-space-4); }
:root[data-material="liquid"] .smart-accordion details[open] summary { background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 48%, transparent), transparent 60%), var(--smart-liquid-control-active-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent); }
:root[data-material="liquid"] .smart-accordion__content { padding-inline: var(--smart-space-4); }

:root[data-material="liquid"] .smart-table thead { background: color-mix(in srgb, var(--smart-liquid-control-surface) 78%, transparent); }
:root[data-material="liquid"] .smart-table tbody tr:hover { background: color-mix(in srgb, var(--smart-liquid-control-hover-surface) 72%, transparent); }
:root[data-material="liquid"] .smart-list__item:hover { background: color-mix(in srgb, var(--smart-liquid-control-hover-surface) 66%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 44%, transparent); }
:root[data-material="liquid"] .smart-key-value > div { border-bottom-color: color-mix(in srgb, var(--smart-liquid-border) 45%, var(--smart-divider)); }
:root[data-material="liquid"] .smart-timeline__item::before { background: linear-gradient(var(--smart-accent-soft), color-mix(in srgb, var(--smart-liquid-border) 58%, transparent)); }

:root[data-material="liquid"] .smart-pagination__link {
  border-color: color-mix(in srgb, var(--smart-liquid-border) 66%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 54%, transparent), transparent 58%), var(--smart-liquid-control-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent), 0 3px 10px color-mix(in srgb, black 6%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.52)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-pagination__link[aria-current="page"] { background: linear-gradient(145deg, color-mix(in srgb, white 22%, transparent), transparent 58%), color-mix(in srgb, var(--smart-accent) 76%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 34%, transparent), 0 5px 14px var(--smart-accent-soft); }

:root[data-material="liquid"] .smart-breadcrumbs a { padding: 0.28rem 0.5rem; border-radius: var(--smart-radius-full); }
:root[data-material="liquid"] .smart-breadcrumbs a:hover { background: var(--smart-liquid-control-hover-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 64%, transparent); text-decoration: none; }
:root[data-material="liquid"] .smart-breadcrumbs__expand,
:root[data-material="liquid"] .smart-scroll-top { border-color: color-mix(in srgb, var(--smart-liquid-border) 72%, transparent); background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--smart-liquid-highlight) 78%, transparent), transparent 46%), var(--smart-liquid-control-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 72%, transparent), 0 8px 22px color-mix(in srgb, black 10%, transparent); backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.62)) saturate(var(--smart-liquid-saturate)); }
:root[data-material="liquid"] .smart-tooltip::after,
:root[data-material="liquid"] .smart-chart__tip { border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 76%, transparent); background: linear-gradient(145deg, color-mix(in srgb, white 18%, transparent), transparent 48%), color-mix(in srgb, var(--smart-text) 78%, transparent); box-shadow: 0 10px 28px color-mix(in srgb, black 22%, transparent), inset 0 1px 0 color-mix(in srgb, white 24%, transparent); backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.7)) saturate(var(--smart-liquid-saturate)); }

:root[data-material="liquid"] .smart-tags__control:focus-within { background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent), transparent 52%), var(--smart-liquid-control-active-surface); box-shadow: 0 0 0 var(--smart-focus-width) var(--smart-accent-soft), inset 0 1px 0 var(--smart-liquid-highlight), 0 6px 18px color-mix(in srgb, black 6%, transparent); }
:root[data-material="liquid"] .smart-stepper__step::before { border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 72%, transparent); background: radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--smart-liquid-highlight) 78%, transparent), transparent 46%), var(--smart-liquid-control-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 68%, transparent), 0 3px 10px color-mix(in srgb, black 7%, transparent); }
:root[data-material="liquid"] .smart-stepper__step[aria-current="step"]::before { background: radial-gradient(circle at 30% 18%, color-mix(in srgb, white 32%, transparent), transparent 48%), color-mix(in srgb, var(--smart-accent) 78%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 32%, transparent), 0 5px 16px var(--smart-accent-soft); }
:root[data-material="liquid"] .smart-stepper__step[data-complete]::before { background: radial-gradient(circle at 30% 18%, color-mix(in srgb, white 32%, transparent), transparent 48%), color-mix(in srgb, var(--smart-success) 80%, transparent); }

:root[data-material="liquid"] .smart-skeleton { background: linear-gradient(100deg, color-mix(in srgb, var(--smart-liquid-control-surface) 78%, transparent) 18%, color-mix(in srgb, var(--smart-liquid-highlight) 76%, transparent) 42%, color-mix(in srgb, var(--smart-liquid-control-surface) 78%, transparent) 66%); background-size: 250% 100%; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 54%, transparent); }
:root[data-material="liquid"] .smart-spinner { border-color: color-mix(in srgb, var(--smart-liquid-border) 66%, transparent); border-top-color: var(--smart-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--smart-accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 54%, transparent); }
:root[data-material="liquid"] .smart-quantity { border-color: color-mix(in srgb, var(--smart-liquid-border) 70%, var(--smart-border)); background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 58%, transparent), transparent 54%), var(--smart-liquid-control-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 70%, transparent), 0 4px 12px color-mix(in srgb, black 6%, transparent); backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.58)) saturate(var(--smart-liquid-saturate)); }
:root[data-material="liquid"] .smart-quantity__step:hover:not(:disabled) { background: var(--smart-liquid-control-hover-surface); }

:root[data-material="liquid"] .smart-footer {
  padding-inline: var(--smart-space-5);
  border: 1px solid color-mix(in srgb, var(--smart-liquid-border) 58%, transparent);
  border-radius: 0 0 var(--smart-radius-surface) var(--smart-radius-surface);
  background: linear-gradient(145deg, color-mix(in srgb, var(--smart-liquid-highlight) 42%, transparent), transparent 56%), color-mix(in srgb, var(--smart-liquid-surface) 68%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--smart-liquid-highlight) 56%, transparent);
  backdrop-filter: blur(calc(var(--smart-liquid-blur) * 0.56)) saturate(var(--smart-liquid-saturate));
}
:root[data-material="liquid"] .smart-payment__element[aria-busy="true"] { background: linear-gradient(100deg, var(--smart-liquid-control-surface), color-mix(in srgb, var(--smart-liquid-highlight) 62%, transparent), var(--smart-liquid-control-surface)); background-size: 220% 100%; }

@media (prefers-reduced-transparency: reduce) {
  :root[data-material="liquid"] {
    --smart-liquid-opacity: 94% !important;
    --smart-liquid-accent-opacity: 96% !important;
    --smart-liquid-blur: 8px !important;
    --smart-liquid-saturate: 115% !important;
    --smart-liquid-tint: transparent !important;
    --smart-liquid-pointer-highlight: none !important;
  }
  :root[data-material="liquid"] :is(.smart-button, .smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-select__option, .smart-range, .smart-choice input, .smart-switch__track, .smart-segmented, .smart-card--interactive, .smart-tab, .smart-accordion summary, .smart-menu button, .smart-toast__close) {
    --smart-liquid-pointer-highlight: none !important;
  }
}

@media (prefers-contrast: more) {
  :root[data-material="liquid"] {
    --smart-liquid-opacity: 92% !important;
    --smart-liquid-accent-opacity: 94% !important;
    --smart-liquid-border: currentColor !important;
    --smart-liquid-highlight: rgba(255, 255, 255, 0.18) !important;
    --smart-liquid-pointer-highlight: none !important;
  }
  :root[data-material="liquid"] :is(.smart-button, .smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-select__option, .smart-range, .smart-choice input, .smart-switch__track, .smart-segmented, .smart-card--interactive, .smart-tab, .smart-accordion summary, .smart-menu button, .smart-toast__close) {
    --smart-liquid-pointer-highlight: none !important;
  }
}

@media (forced-colors: active) {
  :root[data-material="liquid"] :is(.smart-dialog, .smart-popover, .smart-select__popover, .smart-toast, .smart-segmented, .smart-button, .smart-input, select.smart-select, .smart-textarea, .smart-select__trigger, .smart-select__option, .smart-range, .smart-choice input, .smart-switch__track, .smart-card--interactive, .smart-tabs, .smart-tab, .smart-accordion summary, .smart-menu button, .smart-command, .smart-alert--banner, .smart-app-header, .smart-attachment, .smart-rating button, .smart-color input) {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
    backdrop-filter: none;
  }
  :root[data-material="liquid"] :is(.smart-card, .smart-table-wrap, .smart-list, .smart-empty, .smart-app-shell, .smart-payment, .smart-form-errors, .smart-tags__control, .smart-accordion, .smart-page-header, .smart-sidebar, .smart-footer, .smart-badge, .smart-chip, .smart-pagination__link, .smart-avatar, .smart-quantity) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .smart-chart__bar { fill: CanvasText; }
  .smart-chart__line, .smart-chart__rule, .smart-chart__donut-arc { stroke: CanvasText; }
  .smart-chart__area { fill: CanvasText; fill-opacity: 0.2; }
  .smart-chart__point { fill: CanvasText; stroke: Canvas; }
  .smart-chart__donut-track { stroke: GrayText; }
  .smart-carousel__content { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .smart-carousel__dot::before { background: CanvasText; }
  .smart-carousel__nav, .smart-carousel__expand, .smart-carousel__toggle { border-color: ButtonText; box-shadow: none; backdrop-filter: none; }
  .smart-lightbox, .smart-lightbox__bar, .smart-lightbox__close { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; backdrop-filter: none; }
  .smart-lightbox__image { border: 1px solid CanvasText; }
}
}

@layer smart.utilities {
.smart-divider { inline-size: 100%; block-size: 1px; margin-block: var(--smart-space-4); border: 0; background: var(--smart-divider); }
.smart-divider--vertical { inline-size: 1px; block-size: 1.5em; margin: 0 var(--smart-space-3); align-self: center; }
.smart-kbd { display: inline-block; min-inline-size: 1.55em; padding: 0.12em 0.38em; border: 1px solid var(--smart-border-strong); border-bottom-width: 2px; border-radius: 0.35rem; background: var(--smart-canvas-raised); color: var(--smart-text-secondary); font-family: var(--smart-font-mono); font-size: 0.82em; line-height: 1.35; text-align: center; }
.smart-line-clamp-2, .smart-line-clamp-3, .smart-line-clamp-4 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.smart-line-clamp-2 { -webkit-line-clamp: 2; }
.smart-line-clamp-3 { -webkit-line-clamp: 3; }
.smart-line-clamp-4 { -webkit-line-clamp: 4; }
.smart-sticky { position: sticky; z-index: var(--smart-z-sticky); }
.smart-sticky-top { position: sticky; z-index: var(--smart-z-sticky); inset-block-start: var(--smart-sticky-offset, 0); }
.smart-z-raised { z-index: var(--smart-z-raised); }
.smart-z-sticky { z-index: var(--smart-z-sticky); }
.smart-z-tooltip { z-index: var(--smart-z-tooltip); }
.smart-z-toast { z-index: var(--smart-z-toast); }
.smart-z-banner { z-index: var(--smart-z-banner); }
.smart-visible-tablet, .smart-visible-desktop { display: none !important; }
@media (min-width: 50.001rem) and (max-width: 74.999rem) { .smart-hidden-tablet { display: none !important; } .smart-visible-tablet { display: revert !important; } }
@media (min-width: 50.001rem) { .smart-span-desktop-2 { grid-column: span 2; } .smart-span-desktop-full { grid-column: 1 / -1; } }
@media (min-width: 75rem) { .smart-hidden-desktop { display: none !important; } .smart-visible-desktop { display: revert !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print layer: hide interactive chrome, flatten depth, keep documents readable. */
@media print {
  .smart-no-print, .smart-toast-region, .smart-scroll-top, .smart-skip-link, .smart-popover, .smart-select__popover, .smart-combobox__popover, .smart-date__popover, .smart-time__popover, .smart-app-shell__menu, .smart-app-shell__collapse, .smart-alert__close, .smart-chip__remove { display: none !important; }
  .smart-card, .smart-table-wrap, .smart-print-document { box-shadow: none !important; }
  .smart-print-document { border-color: #000; background: #fff; color: #000; }
  .smart-print-document a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  dialog.smart-dialog, dialog.smart-drawer { display: none !important; }
}

/* Scroll panes: self-scrolling regions for messenger-style and app layouts. */
.smart-scroll-y { overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.smart-scroll-x { overflow-x: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.smart-pane-fill { block-size: 100%; min-block-size: 0; }
.smart-pane-tall { block-size: min(60vh, 32rem); min-block-size: 0; }
.smart-pane-screen { block-size: calc(100svh - var(--smart-pane-offset, 0px)); min-block-size: 0; }
}