/* ============================================================
   ZenithUI — Design Tokens
   Base stylesheet with CSS custom properties, layers, and themes.
   ============================================================ */

@layer zenith-tokens, zenith-reset, zenith-base, zenith-components, zenith-utilities;

/* Design tokens (typography, spacing, palettes, flavors, shell, fonts) live in
   the framework-agnostic token package (src/ZenithUI.Tokens), copied into this
   package's static assets at build time. */
@import url('zenith-tokens.css');

/* ============================================================
   Layer: Base — Minimal scoped resets
   ============================================================ */
@layer zenith-base {

  /* Scoped reset — NEVER global. Only applies inside ZenithUI provider. */
  .zen-root,
  .zen-root * {
    box-sizing: border-box;
  }

  .zen-root {
    font-family: var(--zen-font-family);
    font-size: var(--zen-font-size-base);
    line-height: var(--zen-line-height-normal);
    color: var(--zen-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================================
   Layer: Components — AI-Ready Interface
   Shared CSS classes for AI/NLP sections across all components
   (ZenGrid, ZenScheduler, etc.)
   ============================================================ */
@layer zenith-components {

  /* --- AI Section Container --- */
  .zen-ai-section {
    padding: var(--zen-space-4);
    background: var(--zen-bg-muted);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-card);
    margin-bottom: var(--zen-space-4);
  }

  .zen-ai-section__label {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
    font-weight: var(--zen-font-weight-semibold);
    margin-bottom: var(--zen-space-2);
    display: flex;
    align-items: center;
    gap: var(--zen-space-2);
  }

  /* --- AI Input Row --- */
  .zen-ai-input-row {
    display: flex;
    gap: var(--zen-space-2);
    margin-bottom: var(--zen-space-2);
  }

  .zen-ai-input {
    flex: 1;
    padding: var(--zen-space-2) var(--zen-space-3);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-surface);
    color: var(--zen-text-primary);
    font-size: var(--zen-font-size-base);
    font-family: var(--zen-font-family);
  }

  .zen-ai-input:focus {
    outline: none;
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-ai-input::placeholder {
    color: var(--zen-text-muted);
  }

  .zen-ai-btn {
    padding: var(--zen-space-2) var(--zen-space-5);
    border: none;
    background: var(--zen-accent);
    color: white;
    border-radius: var(--zen-radius-action);
    cursor: pointer;
    font-size: var(--zen-font-size-base);
    font-weight: var(--zen-font-weight-semibold);
    font-family: var(--zen-font-family);
  }

  .zen-ai-btn:hover {
    background: var(--zen-accent-hover);
  }

  .zen-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .zen-ai-btn--secondary {
    background: transparent;
    border: 1px solid var(--zen-border);
    color: var(--zen-text-muted);
  }

  .zen-ai-btn--secondary:hover {
    border-color: var(--zen-accent);
    color: var(--zen-accent);
  }

  .zen-ai-btn--outline {
    background: transparent;
    border: 1px solid var(--zen-accent);
    color: var(--zen-accent);
  }

  .zen-ai-btn--outline:hover {
    background: var(--zen-accent-muted);
  }

  /* --- Locale Select --- */
  .zen-ai-locale-select {
    padding: 2px var(--zen-space-2);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-surface);
    color: var(--zen-text-secondary);
    font-size: var(--zen-font-size-xs);
    font-family: var(--zen-font-family);
    cursor: pointer;
  }

  /* --- Suggestion Pills (quick examples) --- */
  .zen-ai-pills {
    display: flex;
    gap: var(--zen-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--zen-space-3);
  }

  .zen-ai-pill {
    padding: var(--zen-space-1) var(--zen-space-3);
    border: 1px solid var(--zen-border);
    background: var(--zen-bg-surface);
    border-radius: var(--zen-radius-full);
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-secondary);
    cursor: pointer;
    font-family: var(--zen-font-family);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .zen-ai-pill:hover {
    border-color: var(--zen-accent);
    color: var(--zen-accent);
    background: var(--zen-accent-muted);
  }

  /* --- Result Feedback --- */
  .zen-ai-result {
    padding: var(--zen-space-4);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-card);
    margin-bottom: var(--zen-space-4);
  }

  .zen-ai-result--success {
    border-color: var(--zen-success);
    background: var(--zen-success-muted);
  }

  .zen-ai-result--error {
    border-color: var(--zen-danger);
    background: var(--zen-danger-muted);
  }

  .zen-ai-result__header {
    font-weight: var(--zen-font-weight-semibold);
    font-size: var(--zen-font-size-base);
    margin-bottom: var(--zen-space-2);
  }

  .zen-ai-result__body {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary);
  }

  .zen-ai-result__detail {
    margin-top: var(--zen-space-3);
    padding: var(--zen-space-3);
    background: var(--zen-bg-surface);
    border-radius: var(--zen-radius-control);
    font-size: var(--zen-font-size-sm);
    white-space: pre-wrap;
  }

  /* --- Suggestion Cards Grid --- */
  .zen-ai-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--zen-space-2);
    margin-bottom: var(--zen-space-4);
  }

  .zen-ai-card {
    text-align: left;
    padding: var(--zen-space-2) var(--zen-space-3);
    border: 1px solid var(--zen-border);
    background: var(--zen-bg-surface);
    border-radius: var(--zen-radius-card);
    cursor: pointer;
    font-family: var(--zen-font-family);
    transition: border-color 0.15s, background 0.15s;
  }

  .zen-ai-card:hover {
    border-color: var(--zen-accent);
    background: var(--zen-accent-muted);
  }

  .zen-ai-card__title {
    font-size: var(--zen-font-size-base);
    color: var(--zen-text-primary);
  }

  .zen-ai-card__subtitle {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  /* --- Analytics Cards --- */
  .zen-ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--zen-space-2);
    margin-top: var(--zen-space-3);
  }

  .zen-ai-stat {
    padding: var(--zen-space-3);
    background: var(--zen-bg-surface);
    border-radius: var(--zen-radius-card);
    text-align: center;
  }

  .zen-ai-stat__label {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .zen-ai-stat__value {
    font-size: var(--zen-font-size-xl);
    font-weight: var(--zen-font-weight-bold);
    color: var(--zen-text-primary);
    margin-top: var(--zen-space-1);
  }

  /* --- Proposed Event Banner --- */
  .zen-ai-proposed {
    margin-top: var(--zen-space-3);
    padding: var(--zen-space-2) var(--zen-space-3);
    background: var(--zen-bg-surface);
    border-radius: var(--zen-radius-card);
    font-size: var(--zen-font-size-sm);
  }

  /* --- Provider / Category Badges --- */
  .zen-ai-badge {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-tertiary);
    margin-right: var(--zen-space-2);
  }

  .zen-ai-category {
    font-size: var(--zen-font-size-xs);
    padding: 2px 8px;
    border-radius: var(--zen-radius-full);
    background: var(--zen-accent-muted);
    color: var(--zen-accent);
    font-weight: var(--zen-font-weight-medium);
  }

  /* --- Autocomplete Dropdown --- */
  .zen-ai-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 80px;
    margin-top: var(--zen-space-1);
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
  }

  .zen-ai-dropdown__item {
    padding: var(--zen-space-2) var(--zen-space-3);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--zen-border-muted);
  }

  .zen-ai-dropdown__item:hover {
    background: var(--zen-accent-muted);
  }

  .zen-ai-dropdown__query {
    font-size: var(--zen-font-size-base);
    color: var(--zen-text-primary);
  }

  .zen-ai-dropdown__query-alt {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  /* --- Confirmation Modal --- */
  .zen-ai-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--zen-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--zen-z-modal-backdrop, 1100);
  }

  .zen-ai-modal {
    background: var(--zen-bg-surface);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-card);
    padding: var(--zen-space-6);
    min-width: 360px;
    max-width: 480px;
    box-shadow: var(--zen-elev-overlay);
    z-index: var(--zen-z-modal, 1110);
  }

  .zen-ai-modal__title {
    font-size: var(--zen-font-size-md);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
    margin-bottom: var(--zen-space-4);
  }

  .zen-ai-modal__field {
    display: flex;
    justify-content: space-between;
    padding: var(--zen-space-2) 0;
    border-bottom: 1px solid var(--zen-border-muted);
    font-size: var(--zen-font-size-sm);
  }

  .zen-ai-modal__field-label {
    color: var(--zen-text-muted);
  }

  .zen-ai-modal__field-value {
    color: var(--zen-text-primary);
    font-weight: var(--zen-font-weight-medium);
  }

  .zen-ai-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2);
    margin-top: var(--zen-space-5);
  }

  /* --- Schema / API Output --- */
  .zen-ai-output {
    background: var(--zen-bg-sunken);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    padding: var(--zen-space-3);
    font-size: var(--zen-font-size-xs);
    font-family: var(--zen-font-family-mono);
    overflow-x: auto;
    max-height: 400px;
    color: var(--zen-text-primary);
  }

  .zen-ai-output-wrapper {
    position: relative;
    margin-bottom: var(--zen-space-3);
  }

  .zen-ai-output-wrapper .zen-ai-btn--copy {
    position: absolute;
    top: var(--zen-space-2);
    right: var(--zen-space-2);
    padding: 2px 8px;
    font-size: var(--zen-font-size-xs);
  }

  /* --- Collapsible Sections (details/summary) --- */
  .zen-ai-details {
    margin-bottom: var(--zen-space-3);
  }

  .zen-ai-details > summary {
    cursor: pointer;
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-accent);
    list-style: revert;
  }

  .zen-ai-details--warning > summary {
    color: var(--zen-warning, var(--zen-accent));
  }

  .zen-ai-details__body {
    margin-top: var(--zen-space-2);
  }

  /* --- Log / History List --- */
  .zen-ai-log {
    padding: var(--zen-space-2);
    background: var(--zen-bg-sunken);
    border-radius: var(--zen-radius-control);
    max-height: 200px;
    overflow-y: auto;
  }

  .zen-ai-log__entry {
    padding: var(--zen-space-1) var(--zen-space-2);
    font-size: var(--zen-font-size-xs);
    border-bottom: 1px solid var(--zen-border-muted, var(--zen-border));
  }

  .zen-ai-log__query {
    color: var(--zen-warning, var(--zen-accent));
  }

  .zen-ai-log__timestamp {
    color: var(--zen-text-muted);
    margin-left: var(--zen-space-2);
  }

  .zen-ai-log__meta {
    color: var(--zen-text-secondary);
    margin-left: var(--zen-space-2);
  }

  /* --- Textarea for JSON / Code Input --- */
  .zen-ai-textarea {
    width: 100%;
    height: 120px;
    font-family: var(--zen-font-family-mono);
    font-size: var(--zen-font-size-xs);
    padding: var(--zen-space-2);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-elevated);
    color: var(--zen-text-primary);
    resize: vertical;
  }

  /* --- Section Label (non-AI label for grouped content) --- */
  .zen-ai-section-label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-secondary);
  }

  /* --- Hint / Muted Paragraph --- */
  .zen-ai-hint {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
  }

  /* ============================================================
     Foundation Controls — ZenButton, ZenBadge, ZenInput
     ============================================================ */

  /* --- ZenButton --- */
  .zen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zen-space-2);
    border: 1px solid transparent;
    border-radius: var(--zen-radius-action);
    font-family: var(--zen-font-family);
    font-weight: var(--zen-font-weight-semibold);
    cursor: pointer;
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast), border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast), opacity var(--zen-transition-fast);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
  }

  .zen-btn:focus-visible {
    outline: none;
    box-shadow: var(--zen-focus-shadow);
  }

  /* Composed ZenIcons glyphs scale with the button's font size. */
  .zen-btn__icon svg {
    width: 1em;
    height: 1em;
    display: block;
  }

  /* Sizes — derived from the skin's control height. */
  .zen-btn--sm {
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-3);
    font-size: var(--zen-font-size-xs);
  }
  .zen-btn--md {
    height: var(--zen-control-h);
    padding: 0 var(--zen-space-4);
    font-size: var(--zen-font-size-sm);
  }
  .zen-btn--lg {
    height: calc(var(--zen-control-h) + 6px);
    padding: 0 var(--zen-space-6);
    font-size: var(--zen-font-size-base);
  }

  /* Variants: primary | tonal | outline | text | danger (secondary/ghost are legacy aliases) */
  .zen-btn--primary {
    background: var(--zen-accent);
    color: #fff;
    border-color: var(--zen-accent);
  }
  .zen-btn--primary:hover:not(:disabled) {
    background: var(--zen-accent-hover);
    border-color: var(--zen-accent-hover);
  }
  .zen-btn--primary:active:not(:disabled) {
    background: var(--zen-accent-active);
    border-color: var(--zen-accent-active);
  }

  .zen-btn--tonal,
  .zen-btn--secondary {
    background: var(--zen-accent-muted);
    color: var(--zen-accent-fg);
    border-color: transparent;
  }
  .zen-btn--tonal:hover:not(:disabled),
  .zen-btn--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--zen-accent) 24%, transparent);
  }

  .zen-btn--outline {
    background: transparent;
    color: var(--zen-accent);
    border-color: var(--zen-accent);
  }
  .zen-btn--outline:hover:not(:disabled) {
    background: var(--zen-accent-muted);
  }

  .zen-btn--danger {
    background: var(--zen-danger);
    color: #fff;
    border-color: var(--zen-danger);
  }
  .zen-btn--danger:hover:not(:disabled) {
    opacity: 0.9;
  }

  .zen-btn--text,
  .zen-btn--ghost {
    background: transparent;
    color: var(--zen-accent-fg);
    border-color: transparent;
  }
  .zen-btn--text:hover:not(:disabled),
  .zen-btn--ghost:hover:not(:disabled) {
    background: var(--zen-accent-muted);
  }

  /* Warm skin: pill buttons with a colored glow on solid variants. */
  [data-zen-skin="warm"] .zen-btn--primary {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--zen-accent) 30%, transparent);
  }
  [data-zen-skin="warm"] .zen-btn--danger {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--zen-danger) 30%, transparent);
  }
  [data-zen-skin="warm"] .zen-btn:disabled {
    box-shadow: none;
  }

  /* Material skin: UPPERCASE action labels, medium weight. */
  [data-zen-skin="material"] .zen-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--zen-font-weight-medium);
  }
  [data-zen-skin="material"] .zen-btn--primary,
  [data-zen-skin="material"] .zen-btn--danger {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  [data-zen-skin="material"] .zen-btn--primary:active:not(:disabled),
  [data-zen-skin="material"] .zen-btn--danger:active:not(:disabled) {
    box-shadow: none;
  }

  /* States */
  .zen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .zen-btn--loading {
    cursor: wait;
    position: relative;
  }

  .zen-btn--full-width {
    width: 100%;
  }

  /* Link mode (<a> rendered as button) */
  a.zen-btn {
    text-decoration: none;
    color: inherit;
  }
  a.zen-btn:hover {
    text-decoration: none;
  }

  .zen-btn--icon-only {
    padding: 0;
    width: var(--zen-control-h);
  }
  .zen-btn--icon-only.zen-btn--sm { width: calc(var(--zen-control-h) - 4px); }
  .zen-btn--icon-only.zen-btn--lg { width: calc(var(--zen-control-h) + 6px); }

  /* Warm/Material icon-only buttons are circular. */
  [data-zen-skin="warm"] .zen-btn--icon-only,
  [data-zen-skin="material"] .zen-btn--icon-only {
    border-radius: 50%;
  }

  /* Spinner */
  .zen-btn__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: zen-spin 0.6s linear infinite;
  }

  .zen-btn__icon {
    display: inline-flex;
    font-size: 1.1em;
  }

  .zen-btn__text {
    display: inline-block;
  }

  @keyframes zen-spin {
    to { transform: rotate(360deg); }
  }

  /* --- ZenBadge --- */
  .zen-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family);
    font-weight: var(--zen-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* Sizes */
  .zen-badge--sm {
    padding: 1px 6px;
    font-size: 0.625rem;
  }
  .zen-badge--md {
    padding: 2px 8px;
    font-size: var(--zen-font-size-xs);
  }
  .zen-badge--lg {
    padding: 3px 10px;
    font-size: var(--zen-font-size-sm);
  }

  .zen-badge--rounded {
    border-radius: var(--zen-radius-full);
  }

  /* Color variants */
  .zen-badge--default {
    background: var(--zen-bg-muted);
    color: var(--zen-text-secondary);
  }
  .zen-badge--success {
    background: var(--zen-success-muted);
    color: var(--zen-success);
  }
  .zen-badge--warning {
    background: var(--zen-warning-muted);
    color: var(--zen-warning);
  }
  .zen-badge--danger {
    background: var(--zen-danger-muted);
    color: var(--zen-danger);
  }
  .zen-badge--info {
    background: var(--zen-info-muted);
    color: var(--zen-info);
  }
  .zen-badge--neutral {
    background: var(--zen-bg-elevated);
    color: var(--zen-text-tertiary);
    border: 1px solid var(--zen-border);
  }

  /* Dot mode */
  .zen-badge--dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .zen-badge--dot.zen-badge--sm { width: 6px; height: 6px; }
  .zen-badge--dot.zen-badge--lg { width: 10px; height: 10px; }
  .zen-badge--dot.zen-badge--success { background: var(--zen-success); }
  .zen-badge--dot.zen-badge--warning { background: var(--zen-warning); }
  .zen-badge--dot.zen-badge--danger { background: var(--zen-danger); }
  .zen-badge--dot.zen-badge--info { background: var(--zen-info); }
  .zen-badge--dot.zen-badge--default { background: var(--zen-text-tertiary); }

  /* Pulse animation */
  .zen-badge--pulse {
    animation: zen-pulse 1.5s ease-in-out infinite;
  }

  @keyframes zen-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .zen-badge__icon {
    font-size: 0.9em;
  }
  .zen-badge__icon > svg { width: 1em; height: 1em; }

  /* Overlay mode — badge positioned on wrapped content */
  .zen-badge-overlay {
    position: relative;
    display: inline-flex;
  }
  .zen-badge-overlay > .zen-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 1;
  }
  .zen-badge-overlay > .zen-badge--dot {
    transform: translate(30%, -30%);
  }

  /* Visibility toggle */
  .zen-badge--hidden {
    transform: scale(0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .zen-badge-overlay > .zen-badge--hidden {
    transform: translate(50%, -50%) scale(0);
  }
  .zen-badge:not(.zen-badge--hidden) {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Clickable badge */
  .zen-badge--clickable {
    cursor: pointer;
  }
  .zen-badge--clickable:hover {
    filter: brightness(0.9);
  }

  /* --- ZenInput --- */
  .zen-input {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family);
  }

  .zen-input__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-input__container {
    display: flex;
    align-items: center;
    height: var(--zen-control-h);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast), background var(--zen-transition-fast);
    overflow: hidden;
  }

  .zen-input:not(.zen-input--disabled, .zen-input--focused, .zen-input--error) .zen-input__container:hover {
    border-color: var(--zen-border-strong);
  }

  .zen-input--focused .zen-input__container {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-input--error .zen-input__container {
    border-color: var(--zen-danger);
  }
  .zen-input--error.zen-input--focused .zen-input__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
  }

  /* Material skin — filled-field anatomy shared by all text-like controls: top-rounded fill, resting 1px underline, 2px accent bar on focus. */
  [data-zen-skin="material"] .zen-input__container,
  [data-zen-skin="material"] .zen-numeric__container,
  [data-zen-skin="material"] .zen-textarea__container,
  [data-zen-skin="material"] .zen-select__trigger,
  [data-zen-skin="material"] .zen-datepicker__trigger,
  [data-zen-skin="material"] .zen-autocomplete__input-container {
    border-color: transparent;
    border-radius: var(--zen-radius-control) var(--zen-radius-control) 0 0;
    background: var(--zen-bg-muted);
    box-shadow: inset 0 -1px 0 0 var(--zen-line);
  }
  [data-zen-skin="material"] .zen-input--focused .zen-input__container,
  [data-zen-skin="material"] .zen-numeric--focused .zen-numeric__container,
  [data-zen-skin="material"] .zen-textarea--focused .zen-textarea__container,
  [data-zen-skin="material"] .zen-select--open .zen-select__trigger,
  [data-zen-skin="material"] .zen-datepicker--open .zen-datepicker__trigger,
  [data-zen-skin="material"] .zen-datepicker__trigger:focus-visible,
  [data-zen-skin="material"] .zen-autocomplete--open .zen-autocomplete__input-container {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--zen-accent);
  }
  [data-zen-skin="material"] .zen-input--error .zen-input__container,
  [data-zen-skin="material"] .zen-numeric--error .zen-numeric__container,
  [data-zen-skin="material"] .zen-textarea--error .zen-textarea__container,
  [data-zen-skin="material"] .zen-select--error .zen-select__trigger,
  [data-zen-skin="material"] .zen-datepicker--error .zen-datepicker__trigger,
  [data-zen-skin="material"] .zen-autocomplete--error .zen-autocomplete__input-container {
    border-color: transparent;
    box-shadow: inset 0 -1px 0 0 var(--zen-danger);
  }
  [data-zen-skin="material"] .zen-input--error.zen-input--focused .zen-input__container,
  [data-zen-skin="material"] .zen-numeric--error.zen-numeric--focused .zen-numeric__container,
  [data-zen-skin="material"] .zen-textarea--error.zen-textarea--focused .zen-textarea__container,
  [data-zen-skin="material"] .zen-autocomplete--error.zen-autocomplete--open .zen-autocomplete__input-container {
    box-shadow: inset 0 -2px 0 0 var(--zen-danger);
  }

  .zen-input--disabled .zen-input__container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--zen-bg-muted);
  }

  .zen-input__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--zen-text-primary);
    font-family: inherit;
    font-size: var(--zen-font-size-base);
    padding: 0 var(--zen-space-3);
    height: 100%;
    min-width: 0;
  }

  .zen-input__field::placeholder {
    color: var(--zen-text-muted);
  }

  .zen-input__field:disabled {
    cursor: not-allowed;
  }

  .zen-input__prefix,
  .zen-input__suffix {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
    padding: 0 var(--zen-space-2);
    white-space: nowrap;
    user-select: none;
  }

  .zen-input__prefix {
    padding-left: var(--zen-space-3);
  }

  .zen-input__suffix {
    padding-right: var(--zen-space-3);
  }

  .zen-input__icon {
    padding-left: var(--zen-space-3);
    color: var(--zen-text-muted);
    font-size: var(--zen-font-size-md);
    display: flex;
    align-items: center;
  }

  .zen-input__icon > svg {
    width: 1em;
    height: 1em;
  }

  .zen-input__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: var(--zen-space-2);
    border: none;
    background: var(--zen-bg-muted);
    color: var(--zen-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }

  .zen-input__clear:hover {
    background: var(--zen-danger-muted);
    color: var(--zen-danger);
  }

  .zen-input__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    padding-left: var(--zen-space-1);
  }

  .zen-input__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
    padding-left: var(--zen-space-1);
  }

  /* Footer row (helper/error + counter) */
  .zen-input__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: 1.2em;
  }

  .zen-input__counter {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    padding-right: var(--zen-space-1);
    white-space: nowrap;
    margin-left: auto;
  }

  /* Password toggle button */
  .zen-input__password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: var(--zen-space-1);
    border: 1px solid var(--zen-border);
    background: var(--zen-bg-muted);
    color: var(--zen-text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    border-radius: var(--zen-radius-sm);
    transition: background var(--zen-transition-fast), border-color var(--zen-transition-fast);
  }
  /* The glyph tracks the button's font-size, matching the other icon affordances. */
  .zen-input__password-toggle svg {
    width: 1em;
    height: 1em;
  }
  .zen-input__password-toggle:hover {
    background: var(--zen-bg-hover);
    border-color: var(--zen-accent);
  }

  /* Floating label */
  .zen-input--floating {
    position: relative;
  }
  .zen-input--floating .zen-input__container {
    position: relative;
    overflow: visible;
  }
  .zen-input__floating-label {
    position: absolute;
    left: var(--zen-space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--zen-font-size-base);
    color: var(--zen-text-muted);
    pointer-events: none;
    transition: all 0.15s ease;
    background: transparent;
    padding: 0 var(--zen-space-1);
    z-index: 1;
    line-height: 1;
  }
  .zen-input--floating-active .zen-input__floating-label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--zen-font-size-xs);
    color: var(--zen-accent);
    font-weight: var(--zen-font-weight-medium);
    background: var(--zen-bg-surface);
  }
  /* Material's filled field keeps the shrunk label INSIDE the fill, not on the border. */
  [data-zen-skin="material"] .zen-input--floating-active .zen-input__floating-label {
    top: 4px;
    transform: none;
    background: transparent;
  }
  .zen-input--error.zen-input--floating-active .zen-input__floating-label {
    color: var(--zen-danger);
  }

  /* Scanner mode indicator */
  .zen-input--scanner .zen-input__container {
    border-style: dashed;
  }
  .zen-input--scanner.zen-input--focused .zen-input__container {
    border-style: solid;
    border-color: var(--zen-success);
    box-shadow: 0 0 0 2px var(--zen-success-muted);
  }

  /* --- ZenNumericInput --- */
  .zen-numeric {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family);
  }

  .zen-numeric__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-numeric__container {
    display: flex;
    align-items: center;
    height: var(--zen-control-h);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast);
    overflow: hidden;
  }

  .zen-numeric:not(.zen-numeric--disabled, .zen-numeric--focused, .zen-numeric--error) .zen-numeric__container:hover {
    border-color: var(--zen-border-strong);
  }

  .zen-numeric--focused .zen-numeric__container {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-numeric--error .zen-numeric__container {
    border-color: var(--zen-danger);
  }
  .zen-numeric--error.zen-numeric--focused .zen-numeric__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
  }

  .zen-numeric--disabled .zen-numeric__container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--zen-bg-muted);
  }

  .zen-numeric__field {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--zen-text-primary);
    font-family: inherit;
    font-size: var(--zen-font-size-base);
    padding: 0 var(--zen-space-3);
    height: 100%;
    min-width: 0;
    text-align: center;
  }

  .zen-numeric__field::placeholder {
    color: var(--zen-text-muted);
  }

  .zen-numeric__field:disabled {
    cursor: not-allowed;
  }

  .zen-numeric__prefix,
  .zen-numeric__suffix {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
    padding: 0 var(--zen-space-2);
    white-space: nowrap;
    user-select: none;
  }

  .zen-numeric__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    border: none;
    background: var(--zen-bg-muted);
    color: var(--zen-text-secondary);
    cursor: pointer;
    font-size: var(--zen-font-size-md);
    font-weight: var(--zen-font-weight-semibold);
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
    user-select: none;
    flex-shrink: 0;
  }

  .zen-numeric__btn:hover:not(:disabled) {
    background: var(--zen-accent-muted);
    color: var(--zen-accent);
  }

  .zen-numeric__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .zen-numeric__btn--minus {
    border-right: 1px solid var(--zen-border);
  }

  .zen-numeric__btn--plus {
    border-left: 1px solid var(--zen-border);
  }

  .zen-numeric__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    padding-left: var(--zen-space-1);
  }

  .zen-numeric__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
    padding-left: var(--zen-space-1);
  }

  /* --- ZenSelect --- */
  .zen-select {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family);
    position: relative;
  }

  .zen-select__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-select__trigger {
    display: flex;
    align-items: center;
    min-height: var(--zen-control-h);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    padding: 0 var(--zen-space-3);
    cursor: pointer;
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast);
    gap: var(--zen-space-2);
  }

  .zen-select:not(.zen-select--disabled, .zen-select--open, .zen-select--error) .zen-select__trigger:hover {
    border-color: var(--zen-border-strong);
  }

  .zen-select--open .zen-select__trigger {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-select--error .zen-select__trigger {
    border-color: var(--zen-danger);
  }

  .zen-select--disabled .zen-select__trigger {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--zen-bg-muted);
  }

  .zen-select__display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--zen-text-primary);
    font-size: var(--zen-font-size-base);
  }

  .zen-select__placeholder {
    flex: 1;
    color: var(--zen-text-muted);
    font-size: var(--zen-font-size-base);
  }

  .zen-select__actions {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1);
    margin-left: auto;
    flex-shrink: 0;
  }

  .zen-select__arrow {
    color: var(--zen-text-muted);
    font-size: 12px;
    transition: transform var(--zen-transition-fast);
  }
  .zen-select--open .zen-select__arrow {
    transform: rotate(180deg);
  }

  .zen-select__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--zen-bg-muted);
    color: var(--zen-text-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    line-height: 1;
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }
  .zen-select__clear:hover {
    background: var(--zen-danger-muted);
    color: var(--zen-danger);
  }

  /* Click-outside overlay */
  .zen-select__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    background: transparent;
    cursor: default;
  }

  /* Dropdown — final position (fixed + top/left) is set by floating.js so the
     panel escapes any ancestor overflow:hidden / overflow:clip / contain.
     Initial absolute fallback applies only when JS is unavailable (e.g. pre-render). */
  .zen-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--zen-space-1);
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    overflow-y: auto;
    z-index: 9999;
  }

  .zen-select__search-container {
    padding: var(--zen-space-2);
    border-bottom: 1px solid var(--zen-border);
  }

  .zen-select__search {
    width: 100%;
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    padding: var(--zen-space-1) var(--zen-space-2);
    background: var(--zen-bg-surface);
    color: var(--zen-text-primary);
    font-size: var(--zen-font-size-sm);
    outline: none;
  }
  .zen-select__search:focus {
    border-color: var(--zen-accent);
  }

  .zen-select__option {
    padding: var(--zen-space-2) var(--zen-space-3);
    cursor: pointer;
    font-size: var(--zen-font-size-base);
    color: var(--zen-text-primary);
    transition: background var(--zen-transition-fast);
  }
  .zen-select__option:hover {
    background: var(--zen-bg-muted);
  }
  .zen-select__option--selected {
    background: var(--zen-accent-muted);
    color: var(--zen-accent);
    font-weight: var(--zen-font-weight-medium);
  }
  .zen-select__option--highlighted {
    background: var(--zen-bg-muted);
  }

  .zen-select__group {
    padding: var(--zen-space-2) var(--zen-space-3) var(--zen-space-1);
    font-size: var(--zen-font-size-xs);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .zen-select__no-data {
    padding: var(--zen-space-4) var(--zen-space-3);
    text-align: center;
    color: var(--zen-text-muted);
    font-size: var(--zen-font-size-sm);
  }

  /* Chips (multi-select) */
  .zen-select__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zen-space-1);
    flex: 1;
    padding: var(--zen-space-1) 0;
  }

  .zen-select__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1);
    padding: 2px var(--zen-space-2);
    background: var(--zen-accent-muted);
    color: var(--zen-accent);
    border-radius: var(--zen-radius-full);
    font-size: var(--zen-font-size-xs);
    font-weight: var(--zen-font-weight-medium);
  }

  .zen-select__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--zen-accent);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
  }
  .zen-select__chip-remove:hover {
    background: var(--zen-danger-muted);
    color: var(--zen-danger);
  }

  .zen-select__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    padding-left: var(--zen-space-1);
  }

  .zen-select__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
    padding-left: var(--zen-space-1);
  }

  /* --- ZenToast --- */
  .zen-toast-container {
    position: fixed;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
    padding: var(--zen-space-4);
  }
  .zen-toast-container--top-right { top: 0; right: 0; }
  .zen-toast-container--top-left { top: 0; left: 0; }
  .zen-toast-container--top-center { top: 0; left: 50%; transform: translateX(-50%); }
  .zen-toast-container--bottom-right { bottom: 0; right: 0; }
  .zen-toast-container--bottom-left { bottom: 0; left: 0; }
  .zen-toast-container--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }

  .zen-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--zen-space-3);
    padding: var(--zen-space-3) var(--zen-space-4);
    border-radius: var(--zen-radius-menu);
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-card-border);
    box-shadow: var(--zen-elev-overlay);
    pointer-events: auto;
    cursor: default;
    font-family: var(--zen-font-family);
    min-width: 280px;
  }

  /* Warm/Material toasts are borderless surfaces; the stripe is Standard's tell. */
  [data-zen-skin="warm"] .zen-toast,
  [data-zen-skin="material"] .zen-toast {
    border-left-color: transparent !important;
  }

  .zen-toast--entering {
    animation: zen-toast-enter 0.3s ease forwards;
  }
  .zen-toast--leaving {
    animation: zen-toast-leave 0.3s ease forwards;
  }

  @keyframes zen-toast-enter {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes zen-toast-leave {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
  }

  .zen-toast--success { border-left: 4px solid var(--zen-success); }
  .zen-toast--error { border-left: 4px solid var(--zen-danger); }
  .zen-toast--warning { border-left: 4px solid var(--zen-warning); }
  .zen-toast--info { border-left: 4px solid var(--zen-info); }

  .zen-toast--success .zen-toast__icon { color: var(--zen-success); }
  .zen-toast__icon > svg { width: 1em; height: 1em; }
  .zen-toast--error .zen-toast__icon { color: var(--zen-danger); }
  .zen-toast--warning .zen-toast__icon { color: var(--zen-warning); }
  .zen-toast--info .zen-toast__icon { color: var(--zen-info); }

  .zen-toast__icon {
    font-size: var(--zen-font-size-lg);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .zen-toast__content {
    flex: 1;
    min-width: 0;
  }

  .zen-toast__title {
    font-weight: var(--zen-font-weight-semibold);
    font-size: var(--zen-font-size-base);
    color: var(--zen-text-primary);
    margin-bottom: var(--zen-space-1);
  }

  .zen-toast__message {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary);
    line-height: 1.4;
  }

  .zen-toast__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--zen-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    border-radius: var(--zen-radius-action);
    flex-shrink: 0;
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }
  .zen-toast__close:hover {
    background: var(--zen-bg-muted);
    color: var(--zen-text-primary);
  }

  .zen-toast__action {
    background: transparent;
    border: none;
    color: var(--zen-accent-fg);
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold);
    font-family: var(--zen-font-family);
    border-radius: var(--zen-radius-action);
    padding: 0 var(--zen-space-2);
    cursor: pointer;
    flex-shrink: 0;
  }
  .zen-toast__action:hover {
    background: var(--zen-accent-muted);
  }
  [data-zen-skin="material"] .zen-toast__action {
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* --- ZenDialog --- */
  .zen-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--zen-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--zen-space-4);
    animation: zen-dialog-fade-in 0.2s ease;
  }

  @keyframes zen-dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .zen-dialog {
    background: var(--zen-bg-elevated);
    border-radius: var(--zen-radius-card);
    box-shadow: var(--zen-elev-overlay);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    animation: zen-dialog-scale-in 0.2s ease;
    font-family: var(--zen-font-family);
  }

  @keyframes zen-dialog-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .zen-dialog--sm { width: 400px; }
  .zen-dialog--md { width: 560px; }
  .zen-dialog--lg { width: 720px; }
  .zen-dialog--fullscreen {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Header/footer dividers ride the card border token — Standard only. */
  .zen-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-4) var(--zen-space-5);
    border-bottom: 1px solid var(--zen-card-border);
  }

  .zen-dialog__title {
    margin: 0;
    font-size: var(--zen-font-size-lg);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
  }

  .zen-dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--zen-text-tertiary);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    border-radius: var(--zen-radius-action);
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }
  .zen-dialog__close:hover {
    background: var(--zen-bg-muted);
    color: var(--zen-text-primary);
  }

  .zen-dialog__body {
    padding: var(--zen-space-5);
    overflow-y: auto;
    flex: 1;
    color: var(--zen-text-primary);
    font-size: var(--zen-font-size-base);
    line-height: 1.6;
  }

  .zen-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2);
    padding: var(--zen-space-3) var(--zen-space-5);
    border-top: 1px solid var(--zen-card-border);
  }

  /* ═══════════════════════════════════════════════════
     ZenCard
     ═══════════════════════════════════════════════════ */

  .zen-card {
    background: var(--zen-bg-surface);
    border: 1px solid var(--zen-card-border);
    border-radius: var(--zen-radius-card);
    box-shadow: var(--zen-elev-card);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .zen-card--outlined {
    background: transparent;
    border: 1px solid var(--zen-border);
    box-shadow: none;
  }

  .zen-card--elevated {
    border-color: transparent;
    box-shadow: var(--zen-elev-overlay);
  }

  .zen-card--clickable {
    cursor: pointer;
  }

  .zen-card--clickable:hover {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-elev-overlay);
  }

  .zen-card--clickable:active {
    transform: scale(0.99);
  }

  /* Dividers ride the card border token: visible in Standard, gone in Warm/Material. */
  .zen-card__header {
    padding: var(--zen-space-3) var(--zen-card-pad);
    border-bottom: 1px solid var(--zen-card-border);
    font-weight: var(--zen-font-weight-semibold);
  }

  .zen-card__body {
    padding: var(--zen-card-pad);
  }

  .zen-card__footer {
    padding: var(--zen-space-3) var(--zen-card-pad);
    border-top: 1px solid var(--zen-card-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2);
  }

  /* ═══════════════════════════════════════════════════
     ZenTabs
     ═══════════════════════════════════════════════════ */

  .zen-tabs__header {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--zen-border);
    margin-bottom: var(--zen-space-4);
  }

  /* Material action labels: UPPERCASE tabs over the same 2px indicator. */
  [data-zen-skin="material"] .zen-tab-header {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .zen-tabs--full-width .zen-tabs__header {
    width: 100%;
  }

  .zen-tabs--full-width .zen-tab-header {
    flex: 1;
  }

  /* Tab header buttons */
  .zen-tab-header {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-2);
    padding: var(--zen-space-2) var(--zen-space-4);
    border: none;
    background: transparent;
    color: var(--zen-text-tertiary);
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s ease;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
  }

  .zen-tab-header:hover:not(:disabled) {
    color: var(--zen-text-primary);
  }

  .zen-tab-header--active {
    color: var(--zen-accent);
    border-bottom-color: var(--zen-accent);
  }

  .zen-tab-header--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .zen-tab-header__icon {
    font-size: var(--zen-font-size-base);
    line-height: 1;
  }
  .zen-tab-header__icon > svg { width: 1em; height: 1em; }

  .zen-tab-header__badge {
    margin-left: var(--zen-space-1);
  }

  /* Enclosed variant */
  .zen-tabs--enclosed .zen-tabs__header {
    border-bottom: 1px solid var(--zen-border);
  }

  .zen-tabs--enclosed .zen-tab-header {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--zen-radius-control) var(--zen-radius-control) 0 0;
    margin-bottom: -1px;
  }

  .zen-tabs--enclosed .zen-tab-header--active {
    background: var(--zen-bg-surface);
    border-color: var(--zen-border);
    border-bottom-color: var(--zen-bg-surface);
    color: var(--zen-text-primary);
  }

  /* Pills variant */
  .zen-tabs--pills .zen-tabs__header {
    border-bottom: none;
    gap: var(--zen-space-1);
    margin-bottom: var(--zen-space-4);
  }

  .zen-tabs--pills .zen-tab-header {
    border-radius: var(--zen-radius-full);
    border-bottom: none;
    margin-bottom: 0;
    padding: var(--zen-space-1) var(--zen-space-3);
  }

  .zen-tabs--pills .zen-tab-header--active {
    background: var(--zen-accent);
    color: white;
  }

  /* Tab panel */
  .zen-tab-panel {
    min-height: 0;
  }

  /* ═══════════════════════════════════════════════════
     ZenForm
     ═══════════════════════════════════════════════════ */

  .zen-form__fields {
    display: grid;
    gap: var(--zen-space-4);
  }

  .zen-form--cols-1 .zen-form__fields {
    grid-template-columns: 1fr;
  }

  .zen-form--cols-2 .zen-form__fields {
    grid-template-columns: repeat(2, 1fr);
  }

  .zen-form--cols-3 .zen-form__fields {
    grid-template-columns: repeat(3, 1fr);
  }

  .zen-form--readonly {
    pointer-events: none;
    opacity: 0.8;
  }

  .zen-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2);
    padding-top: var(--zen-space-4);
    border-top: 1px solid var(--zen-border);
    margin-top: var(--zen-space-4);
  }

  /* Form Field */
  .zen-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
  }

  .zen-form-field--span-2 {
    grid-column: span 2;
  }

  .zen-form-field--span-3 {
    grid-column: span 3;
  }

  .zen-form-field__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-form-field__required {
    color: var(--zen-danger);
    margin-left: 2px;
  }

  .zen-form-field__control {
    width: 100%;
  }

  .zen-form-field__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  .zen-form-field__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
  }

  .zen-form-field--error .zen-form-field__label {
    color: var(--zen-danger);
  }

  @media (max-width: 640px) {
    .zen-form--cols-2 .zen-form__fields,
    .zen-form--cols-3 .zen-form__fields {
      grid-template-columns: 1fr;
    }

    .zen-form-field--span-2,
    .zen-form-field--span-3 {
      grid-column: span 1;
    }
  }

  /* =============================================
     ZenCheckbox
     ============================================= */

  .zen-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--zen-space-2);
    cursor: pointer;
    position: relative;
    user-select: none;
  }

  .zen-checkbox--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .zen-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .zen-checkbox__control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--zen-line);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-surface);
    transition: background var(--zen-transition-fast), border-color var(--zen-transition-fast);
    margin-top: 1px;
  }

  .zen-checkbox__control svg {
    width: 12px;
    height: 12px;
    color: white;
    display: none;
  }

  .zen-checkbox--checked .zen-checkbox__control {
    background: var(--zen-accent);
    border-color: var(--zen-accent);
  }

  .zen-checkbox--checked .zen-checkbox__control svg {
    display: block;
  }

  .zen-checkbox--indeterminate .zen-checkbox__control {
    background: var(--zen-accent);
    border-color: var(--zen-accent);
  }

  .zen-checkbox--indeterminate .zen-checkbox__control svg {
    display: block;
  }

  .zen-checkbox--error .zen-checkbox__control {
    border-color: var(--zen-danger);
  }

  .zen-checkbox:not(.zen-checkbox--disabled):hover .zen-checkbox__control {
    border-color: var(--zen-accent);
  }

  .zen-checkbox__input:focus-visible + .zen-checkbox__control {
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-checkbox__label {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
    line-height: 1.4;
  }

  .zen-checkbox__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    margin-top: var(--zen-space-1);
    margin-left: calc(18px + var(--zen-space-2));
  }

  .zen-checkbox__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
    margin-top: var(--zen-space-1);
    margin-left: calc(18px + var(--zen-space-2));
  }

  /* =============================================
     ZenSwitch
     ============================================= */

  .zen-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-3);
    cursor: pointer;
    position: relative;
    user-select: none;
  }

  .zen-switch--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .zen-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .zen-switch__track {
    position: relative;
    display: flex;
    align-items: center;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--zen-bg-muted);
    border: 1px solid var(--zen-line);
    transition: background var(--zen-transition-fast), border-color var(--zen-transition-fast);
  }

  .zen-switch--has-text .zen-switch__track {
    width: 52px;
    height: 22px;
    border-radius: 11px;
  }

  .zen-switch__thumb {
    position: absolute;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: var(--zen-elev-card);
    transition: transform var(--zen-transition-fast);
  }

  .zen-switch--has-text .zen-switch__thumb {
    width: 18px;
    height: 18px;
  }

  .zen-switch--on .zen-switch__track {
    background: var(--zen-accent);
    border-color: var(--zen-accent);
  }

  .zen-switch--on .zen-switch__thumb {
    transform: translateX(16px);
  }

  .zen-switch--on.zen-switch--has-text .zen-switch__thumb {
    transform: translateX(30px);
  }

  .zen-switch__text {
    font-size: 9px;
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-muted);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .zen-switch--on .zen-switch__text {
    left: 6px;
    color: white;
  }

  .zen-switch:not(.zen-switch--on) .zen-switch__text {
    right: 6px;
  }

  .zen-switch--error .zen-switch__track {
    border-color: var(--zen-danger);
  }

  .zen-switch:not(.zen-switch--disabled):hover .zen-switch__track {
    border-color: var(--zen-accent);
  }

  .zen-switch__input:focus-visible + .zen-switch__track {
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-switch__label {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
  }

  .zen-switch__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    margin-top: var(--zen-space-1);
  }

  .zen-switch__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
    margin-top: var(--zen-space-1);
  }

  /* =============================================
     ZenTextArea
     ============================================= */

  .zen-textarea {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    width: 100%;
  }

  .zen-textarea__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-textarea__container {
    display: flex;
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast);
  }

  .zen-textarea:not(.zen-textarea--disabled, .zen-textarea--focused, .zen-textarea--error) .zen-textarea__container:hover {
    border-color: var(--zen-border-strong);
  }

  .zen-textarea--focused .zen-textarea__container {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-textarea--error .zen-textarea__container {
    border-color: var(--zen-danger);
  }

  .zen-textarea--error.zen-textarea--focused .zen-textarea__container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
  }

  .zen-textarea--disabled .zen-textarea__container {
    background: var(--zen-bg-muted);
    cursor: not-allowed;
  }

  .zen-textarea__field {
    width: 100%;
    padding: var(--zen-space-2) var(--zen-space-3);
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
    resize: vertical;
    outline: none;
    line-height: 1.5;
  }

  .zen-textarea--autogrow .zen-textarea__field {
    resize: none;
    overflow: hidden;
  }

  .zen-textarea--disabled .zen-textarea__field {
    cursor: not-allowed;
    color: var(--zen-text-muted);
  }

  .zen-textarea__field::placeholder {
    color: var(--zen-text-muted);
  }

  .zen-textarea__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--zen-space-2);
  }

  .zen-textarea__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  .zen-textarea__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
  }

  .zen-textarea__counter {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    margin-left: auto;
  }

  .zen-textarea__counter--limit {
    color: var(--zen-warning);
  }

  /* =============================================
     ZenRadioGroup + ZenRadioOption
     ============================================= */

  .zen-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
  }

  .zen-radio-group__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-radio-group__options {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
  }

  .zen-radio-group--horizontal .zen-radio-group__options {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zen-space-4);
  }

  .zen-radio-group--disabled {
    opacity: 0.5;
  }

  .zen-radio-group__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  .zen-radio-group__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
  }

  .zen-radio-group--error .zen-radio-group__label {
    color: var(--zen-danger);
  }

  .zen-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-2);
    cursor: pointer;
    user-select: none;
    outline: none;
  }

  .zen-radio:focus-visible .zen-radio__control {
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-radio--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .zen-radio__control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--zen-line);
    border-radius: 50%;
    background: var(--zen-bg-surface);
    transition: border-color var(--zen-transition-fast);
  }

  .zen-radio__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zen-accent);
    transform: scale(1);
    transition: transform var(--zen-transition-fast);
  }

  .zen-radio--selected .zen-radio__control {
    border-color: var(--zen-accent);
  }

  .zen-radio:not(.zen-radio--disabled):hover .zen-radio__control {
    border-color: var(--zen-accent);
  }

  .zen-radio__label {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
  }

  /* =============================================
     ZenDatePicker
     ============================================= */

  .zen-datepicker {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    position: relative;
    width: 100%;
  }

  .zen-datepicker__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-datepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--zen-control-h);
    padding: 0 var(--zen-space-3);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    cursor: pointer;
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast);
    outline: none;
    box-sizing: border-box;
  }

  .zen-datepicker:not(.zen-datepicker--disabled, .zen-datepicker--open, .zen-datepicker--error) .zen-datepicker__trigger:hover {
    border-color: var(--zen-border-strong);
  }

  .zen-datepicker__trigger:focus-visible {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-datepicker--open .zen-datepicker__trigger {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }

  .zen-datepicker--error .zen-datepicker__trigger {
    border-color: var(--zen-danger);
  }

  .zen-datepicker--disabled .zen-datepicker__trigger {
    background: var(--zen-bg-muted);
    cursor: not-allowed;
    color: var(--zen-text-muted);
  }

  .zen-datepicker__display {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
  }

  .zen-datepicker__placeholder {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
  }

  .zen-datepicker__actions {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1);
    margin-left: auto;
  }

  .zen-datepicker__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zen-text-muted);
    cursor: pointer;
    border-radius: var(--zen-radius-sm);
    transition: color var(--zen-transition-fast), background var(--zen-transition-fast);
  }

  .zen-datepicker__clear:hover {
    color: var(--zen-text-primary);
    background: var(--zen-bg-muted);
  }

  .zen-datepicker__clear svg {
    width: 14px;
    height: 14px;
  }

  .zen-datepicker__icon {
    display: flex;
    align-items: center;
    color: var(--zen-text-muted);
  }

  .zen-datepicker__icon svg {
    width: 18px;
    height: 18px;
  }

  .zen-datepicker__helper {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  .zen-datepicker__error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
  }

  /* Click-outside overlay */
  .zen-datepicker__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 49;
    background: transparent;
    cursor: default;
  }

  /* Calendar dropdown */

  .zen-datepicker__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin-top: var(--zen-space-1);
    padding: var(--zen-space-3);
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    min-width: 280px;
  }

  .zen-datepicker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--zen-space-3);
  }

  .zen-datepicker__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zen-text-secondary);
    cursor: pointer;
    border-radius: var(--zen-radius-sm);
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }

  .zen-datepicker__nav:hover {
    background: var(--zen-bg-muted);
    color: var(--zen-text-primary);
  }

  .zen-datepicker__nav svg {
    width: 14px;
    height: 14px;
  }

  .zen-datepicker__title {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
  }

  .zen-datepicker__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: var(--zen-space-1);
  }

  .zen-datepicker__weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: var(--zen-font-size-xs);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-muted);
    text-transform: uppercase;
  }

  .zen-datepicker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }

  .zen-datepicker__day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 1px auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zen-text-primary);
    font-size: var(--zen-font-size-sm);
    cursor: pointer;
    border-radius: var(--zen-radius-control);
    transition: background var(--zen-transition-fast), color var(--zen-transition-fast);
  }

  .zen-datepicker__day:hover:not(:disabled) {
    background: var(--zen-bg-muted);
  }

  .zen-datepicker__day--today {
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-accent);
  }

  .zen-datepicker__day--selected {
    background: var(--zen-accent) !important;
    color: white !important;
    font-weight: var(--zen-font-weight-medium);
  }

  .zen-datepicker__day--outside {
    color: var(--zen-text-muted);
    opacity: 0.4;
  }

  .zen-datepicker__day--disabled {
    color: var(--zen-text-muted);
    opacity: 0.3;
    cursor: not-allowed;
  }

  /* =============================================
     ZenDivider
     ============================================= */

  .zen-divider {
    display: flex;
    align-items: center;
    border: 0;
    border-top: 1px solid var(--zen-line);
    margin: var(--zen-space-4) 0;
  }

  .zen-divider--vertical {
    border-top: 0;
    border-left: 1px solid var(--zen-line);
    margin: 0 var(--zen-space-4);
    min-height: 1em;
    align-self: stretch;
  }

  .zen-divider--labeled {
    border-top: 0;
    gap: var(--zen-space-3);
  }

  .zen-divider--labeled::before,
  .zen-divider--labeled::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--zen-line);
  }

  .zen-divider__label {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-tertiary);
    white-space: nowrap;
  }

  /* =============================================
     ZenSpinner
     ============================================= */

  .zen-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zen-space-2);
    color: var(--zen-accent);
  }

  .zen-spinner__label {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary);
  }

  .zen-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Circle */
  .zen-spinner--circle .zen-spinner__ring {
    border: 3px solid var(--zen-line);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: zen-spin 0.7s linear infinite;
  }
  .zen-spinner--sm .zen-spinner__ring { width: 16px; height: 16px; border-width: 2px; }
  .zen-spinner--md .zen-spinner__ring { width: 24px; height: 24px; }
  .zen-spinner--lg .zen-spinner__ring { width: 36px; height: 36px; border-width: 4px; }

  /* Dots */
  .zen-spinner--dots { gap: var(--zen-space-1); }
  .zen-spinner__dot {
    border-radius: 50%;
    background: currentColor;
    animation: zen-pulse 1.2s ease-in-out infinite;
  }
  .zen-spinner__dot:nth-child(2) { animation-delay: 0.2s; }
  .zen-spinner__dot:nth-child(3) { animation-delay: 0.4s; }
  .zen-spinner--sm .zen-spinner__dot { width: 6px; height: 6px; }
  .zen-spinner--md .zen-spinner__dot { width: 8px; height: 8px; }
  .zen-spinner--lg .zen-spinner__dot { width: 12px; height: 12px; }

  /* Bars */
  .zen-spinner--bars { gap: 2px; align-items: end; }
  .zen-spinner__bar {
    background: currentColor;
    border-radius: 1px;
    animation: zen-bars 1s ease-in-out infinite;
  }
  .zen-spinner__bar:nth-child(2) { animation-delay: 0.15s; }
  .zen-spinner__bar:nth-child(3) { animation-delay: 0.3s; }
  .zen-spinner__bar:nth-child(4) { animation-delay: 0.45s; }
  .zen-spinner--sm .zen-spinner__bar { width: 3px; height: 14px; }
  .zen-spinner--md .zen-spinner__bar { width: 4px; height: 20px; }
  .zen-spinner--lg .zen-spinner__bar { width: 5px; height: 28px; }

  @keyframes zen-spin { to { transform: rotate(360deg); } }
  @keyframes zen-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
  @keyframes zen-bars { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

  /* =============================================
     ZenSkeleton
     ============================================= */

  .zen-skeleton--text {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
  }

  .zen-skeleton__line {
    height: 14px;
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
  }

  .zen-skeleton--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--zen-bg-sunken);
  }

  .zen-skeleton--rect {
    width: 100%;
    height: 80px;
    border-radius: var(--zen-radius-card);
    background: var(--zen-bg-sunken);
  }

  .zen-skeleton--animated .zen-skeleton__line,
  .zen-skeleton--animated.zen-skeleton--circle,
  .zen-skeleton--animated.zen-skeleton--rect {
    background: linear-gradient(90deg, var(--zen-bg-sunken) 25%, var(--zen-line) 50%, var(--zen-bg-sunken) 75%);
    background-size: 200% 100%;
    animation: zen-skeleton-wave 1.5s ease-in-out infinite;
  }

  @keyframes zen-skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* =============================================
     ZenConfirm (host of IZenConfirmService)
     ============================================= */

  .zen-confirm__body {
    display: flex;
    align-items: flex-start;
    gap: var(--zen-space-3);
  }

  .zen-confirm__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--zen-bg-muted);
    color: var(--zen-text-secondary);
  }

  .zen-confirm__icon svg {
    width: 20px;
    height: 20px;
  }

  .zen-confirm__message {
    margin: 0;
    line-height: 1.5;
    color: var(--zen-text-primary);
    flex: 1;
    min-width: 0;
  }

  /* Variant accents on the icon bubble */
  .zen-confirm--danger .zen-confirm__icon {
    background: var(--zen-danger-muted);
    color: var(--zen-danger);
  }
  .zen-confirm--warning .zen-confirm__icon {
    background: var(--zen-warning-muted);
    color: var(--zen-warning);
  }

  /* =============================================
     ZenEmptyState
     ============================================= */

  .zen-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--zen-space-6) var(--zen-space-4);
    color: var(--zen-text-secondary);
    gap: var(--zen-space-2);
  }

  .zen-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--zen-text-muted);
    margin-bottom: var(--zen-space-1);
  }

  .zen-empty-state__icon svg {
    width: 100%;
    height: 100%;
  }

  .zen-empty-state__title {
    margin: 0;
    font-size: var(--zen-font-size-md);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
  }

  .zen-empty-state__message {
    margin: 0;
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary);
    max-width: 360px;
  }

  .zen-empty-state__action {
    margin-top: var(--zen-space-2);
  }

  /* =============================================
     ZenAvatar
     ============================================= */

  .zen-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--zen-bg-muted);
    color: var(--zen-text-secondary);
  }

  .zen-avatar--circle { border-radius: 50%; }
  .zen-avatar--square { border-radius: var(--zen-radius-control); }
  /* Material avatars are always circles per its identity rules. */
  [data-zen-skin="material"] .zen-avatar--square { border-radius: 50%; }
  .zen-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
  .zen-avatar--md { width: 36px; height: 36px; font-size: 13px; }
  .zen-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

  .zen-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .zen-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: var(--zen-font-weight-semibold);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .zen-avatar__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .zen-avatar__fallback svg {
    width: 60%;
    height: 60%;
    color: var(--zen-text-tertiary);
  }

  /* =============================================
     ZenAlert
     ============================================= */

  .zen-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--zen-space-3);
    padding: var(--zen-space-3) var(--zen-space-4);
    border-radius: var(--zen-radius-menu);
    border-left: 4px solid;
    transition: opacity var(--zen-transition-normal), max-height var(--zen-transition-normal);
    overflow: hidden;
  }

  /* Warm/Material banners are borderless tints; the stripe is Standard's tell. */
  [data-zen-skin="warm"] .zen-alert,
  [data-zen-skin="material"] .zen-alert {
    border-left-color: transparent !important;
  }

  .zen-alert--hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .zen-alert--info { background: color-mix(in srgb, var(--zen-info) 10%, transparent); border-left-color: var(--zen-info); }
  .zen-alert--success { background: color-mix(in srgb, var(--zen-success) 10%, transparent); border-left-color: var(--zen-success); }
  .zen-alert--warning { background: color-mix(in srgb, var(--zen-warning) 10%, transparent); border-left-color: var(--zen-warning); }
  .zen-alert--danger { background: color-mix(in srgb, var(--zen-danger) 10%, transparent); border-left-color: var(--zen-danger); }

  .zen-alert--info .zen-alert__icon { color: var(--zen-info); }
  .zen-alert--success .zen-alert__icon { color: var(--zen-success); }
  .zen-alert--warning .zen-alert__icon { color: var(--zen-warning); }
  .zen-alert--danger .zen-alert__icon { color: var(--zen-danger); }

  .zen-alert__icon { flex-shrink: 0; margin-top: 1px; }
  .zen-alert__icon svg { width: 18px; height: 18px; }

  .zen-alert__content { flex: 1; min-width: 0; }

  .zen-alert__title {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
    margin-bottom: var(--zen-space-1);
  }

  .zen-alert__body {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary);
    line-height: 1.5;
  }

  .zen-alert__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zen-text-tertiary);
    cursor: pointer;
    border-radius: var(--zen-radius-action);
    transition: color var(--zen-transition-fast), background var(--zen-transition-fast);
  }
  .zen-alert__close:hover { color: var(--zen-text-primary); background: var(--zen-bg-muted); }
  .zen-alert__close svg { width: 14px; height: 14px; }

  /* =============================================
     ZenChip
     ============================================= */

  .zen-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1);
    border-radius: var(--zen-radius-full);
    font-weight: var(--zen-font-weight-medium);
    white-space: nowrap;
    border: 1px solid transparent;
    box-sizing: border-box;
    text-decoration: none;
    transition: background var(--zen-transition-fast), border-color var(--zen-transition-fast);
  }

  /* Heights track the skin's control height. */
  .zen-chip--sm { font-size: var(--zen-font-size-xs); padding: 0 8px; height: calc(var(--zen-control-h) - 10px); }
  .zen-chip--md { font-size: var(--zen-font-size-xs); padding: 0 10px; height: calc(var(--zen-control-h) - 4px); }
  .zen-chip--lg { font-size: var(--zen-font-size-sm); padding: 0 12px; height: var(--zen-control-h); }

  .zen-chip--default { background: var(--zen-bg-sunken); color: var(--zen-text-primary); border-color: var(--zen-border); }
  .zen-chip--success { background: color-mix(in srgb, var(--zen-success) 12%, transparent); color: var(--zen-success); }
  .zen-chip--warning { background: color-mix(in srgb, var(--zen-warning) 12%, transparent); color: var(--zen-warning); }
  .zen-chip--danger { background: color-mix(in srgb, var(--zen-danger) 12%, transparent); color: var(--zen-danger); }
  .zen-chip--info { background: color-mix(in srgb, var(--zen-info) 12%, transparent); color: var(--zen-info); }
  .zen-chip--neutral { background: var(--zen-bg-muted); color: var(--zen-text-muted); }

  .zen-chip--clickable { cursor: pointer; }
  .zen-chip--clickable:hover { filter: brightness(0.95); }
  .zen-chip--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

  .zen-chip__icon { display: flex; align-items: center; font-size: 0.9em; }
  .zen-chip__icon > svg { width: 1em; height: 1em; }

  .zen-chip__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.6;
    transition: opacity var(--zen-transition-fast);
    margin-left: 2px;
  }
  .zen-chip__close:hover { opacity: 1; }
  .zen-chip__close svg { width: 10px; height: 10px; }

  /* =============================================
     ZenProgress
     ============================================= */

  .zen-progress--bar {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2);
    width: 100%;
  }

  .zen-progress__track {
    flex: 1;
    background: var(--zen-bg-sunken);
    border-radius: var(--zen-radius-full);
    overflow: hidden;
  }

  .zen-progress--sm .zen-progress__track { height: 4px; }
  .zen-progress--md .zen-progress__track { height: 8px; }
  .zen-progress--lg .zen-progress__track { height: 12px; }

  .zen-progress__fill {
    height: 100%;
    background: var(--zen-accent);
    border-radius: var(--zen-radius-full);
    transition: width var(--zen-transition-normal);
  }

  .zen-progress--striped .zen-progress__fill {
    background-image: linear-gradient(
      45deg,
      rgba(255,255,255,0.15) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.15) 50%,
      rgba(255,255,255,0.15) 75%, transparent 75%,
      transparent
    );
    background-size: 16px 16px;
    animation: zen-progress-stripe 0.6s linear infinite;
  }

  .zen-progress--indeterminate.zen-progress--bar .zen-progress__fill {
    width: 40% !important;
    animation: zen-progress-indeterminate 1.5s ease-in-out infinite;
  }

  .zen-progress--bar .zen-progress__label {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-secondary);
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
  }

  /* Circular */
  .zen-progress--circular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .zen-progress__track-circle { stroke: var(--zen-bg-sunken); }
  .zen-progress__fill-circle {
    stroke: var(--zen-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--zen-transition-normal);
  }

  .zen-progress--indeterminate.zen-progress--circular .zen-progress__fill-circle {
    stroke-dashoffset: 0 !important;
    animation: zen-spin 1.2s linear infinite;
    transform-origin: center;
  }

  .zen-progress--circular .zen-progress__label {
    position: absolute;
    font-size: var(--zen-font-size-xs);
    font-weight: var(--zen-font-weight-semibold);
    color: var(--zen-text-primary);
  }

  @keyframes zen-progress-stripe { 0% { background-position: 16px 0; } 100% { background-position: 0 0; } }
  @keyframes zen-progress-indeterminate { 0% { margin-left: 0; margin-right: 60%; } 50% { margin-left: 30%; margin-right: 30%; } 100% { margin-left: 60%; margin-right: 0; } }

  /* =============================================
     ZenTooltip
     ============================================= */

  .zen-tooltip {
    position: relative;
    display: inline-flex;
  }

  /* Inverse-surface bubble: swapped text/bg pair stays legible in BOTH themes. */
  .zen-tooltip__content {
    position: absolute;
    z-index: var(--zen-z-dropdown);
    padding: var(--zen-space-1) var(--zen-space-2);
    font-size: var(--zen-font-size-xs);
    color: var(--zen-bg-base);
    background: var(--zen-text-primary);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-shadow-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--zen-transition-fast) var(--zen-tooltip-delay, 200ms),
                visibility var(--zen-transition-fast) var(--zen-tooltip-delay, 200ms);
  }

  .zen-tooltip:hover .zen-tooltip__content,
  .zen-tooltip:focus-within .zen-tooltip__content {
    opacity: 1;
    visibility: visible;
  }

  .zen-tooltip__content::after {
    content: "";
    position: absolute;
    border: 5px solid transparent;
  }

  /* Top */
  .zen-tooltip--top .zen-tooltip__content {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .zen-tooltip--top .zen-tooltip__content::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--zen-text-primary);
  }

  /* Bottom */
  .zen-tooltip--bottom .zen-tooltip__content {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
  }
  .zen-tooltip--bottom .zen-tooltip__content::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--zen-text-primary);
  }

  /* Left */
  .zen-tooltip--left .zen-tooltip__content {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
  .zen-tooltip--left .zen-tooltip__content::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--zen-text-primary);
  }

  /* Right */
  .zen-tooltip--right .zen-tooltip__content {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
  .zen-tooltip--right .zen-tooltip__content::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--zen-text-primary);
  }

  /* =============================================
     ZenBreadcrumb
     ============================================= */

  .zen-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }

  .zen-breadcrumb__item {
    display: inline-flex;
    align-items: center;
  }

  .zen-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1);
    font-size: var(--zen-font-size-sm);
    color: var(--zen-accent);
    text-decoration: none;
    transition: color var(--zen-transition-fast);
  }
  .zen-breadcrumb__link:hover { text-decoration: underline; }

  .zen-breadcrumb__text {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1);
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
  }

  .zen-breadcrumb__item--current .zen-breadcrumb__text {
    font-weight: var(--zen-font-weight-medium);
  }

  .zen-breadcrumb__separator {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    margin: 0 var(--zen-space-1);
  }

  .zen-breadcrumb__ellipsis {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
    letter-spacing: 2px;
  }

  .zen-breadcrumb__icon {
    font-size: 0.9em;
  }
  .zen-breadcrumb__icon > svg { width: 1em; height: 1em; }

  /* =============================================
     ZenDropdown
     ============================================= */

  .zen-dropdown {
    position: relative;
    display: inline-flex;
  }

  .zen-dropdown__trigger {
    cursor: pointer;
    outline: none;
  }

  .zen-dropdown--disabled .zen-dropdown__trigger {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .zen-dropdown__menu {
    position: absolute;
    z-index: var(--zen-z-dropdown);
    min-width: 180px;
    padding: var(--zen-space-1) 0;
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
  }

  .zen-dropdown--bottom-left .zen-dropdown__menu { top: 100%; left: 0; margin-top: var(--zen-space-1); }
  .zen-dropdown--bottom-right .zen-dropdown__menu { top: 100%; right: 0; margin-top: var(--zen-space-1); }
  .zen-dropdown--top-left .zen-dropdown__menu { bottom: 100%; left: 0; margin-bottom: var(--zen-space-1); }
  .zen-dropdown--top-right .zen-dropdown__menu { bottom: 100%; right: 0; margin-bottom: var(--zen-space-1); }

  .zen-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2);
    width: 100%;
    padding: var(--zen-space-2) var(--zen-space-3);
    border: none;
    background: transparent;
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--zen-transition-fast);
  }
  .zen-dropdown__item:hover { background: var(--zen-bg-muted); }

  /* Composed SVG glyphs (e.g. ZenIcons) size to the item text — without this,
     a viewBox-only inline SVG renders at the browser's 300x150 default. */
  .zen-dropdown__item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .zen-dropdown__item--danger { color: var(--zen-danger); }
  .zen-dropdown__item--danger:hover { background: color-mix(in srgb, var(--zen-danger) 8%, transparent); }

  .zen-dropdown__item--disabled {
    color: var(--zen-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }
  .zen-dropdown__item--disabled:hover { background: transparent; }

  .zen-dropdown__icon {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: var(--zen-text-muted);
  }
  .zen-dropdown__icon > svg { width: 1em; height: 1em; }
  .zen-dropdown__item--danger .zen-dropdown__icon { color: var(--zen-danger); }

  .zen-dropdown__divider {
    height: 1px;
    margin: var(--zen-space-1) 0;
    background: var(--zen-border);
  }

  /* ═══════════════════════════════════════════════════
     ZenAutocomplete
     ═══════════════════════════════════════════════════ */

  .zen-autocomplete {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family);
    position: relative;
  }

  .zen-autocomplete__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-secondary);
  }

  .zen-autocomplete__input-container {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1);
    min-height: var(--zen-control-h);
    box-sizing: border-box;
    padding: 0 var(--zen-space-3);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    transition: border-color var(--zen-transition-fast), box-shadow var(--zen-transition-fast);
    cursor: text;
  }
  .zen-autocomplete:not(.zen-autocomplete--disabled, .zen-autocomplete--open, .zen-autocomplete--error) .zen-autocomplete__input-container:hover {
    border-color: var(--zen-border-strong);
  }
  .zen-autocomplete--open .zen-autocomplete__input-container {
    border-color: var(--zen-accent);
    box-shadow: var(--zen-focus-shadow);
  }
  .zen-autocomplete--error .zen-autocomplete__input-container {
    border-color: var(--zen-danger);
  }
  .zen-autocomplete--error.zen-autocomplete--open .zen-autocomplete__input-container {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
  }
  .zen-autocomplete--disabled .zen-autocomplete__input-container {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--zen-bg-muted);
  }

  .zen-autocomplete__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--zen-font-size-md);
    font-family: inherit;
    color: var(--zen-text-primary);
    min-width: 0;
  }
  .zen-autocomplete__input::placeholder {
    color: var(--zen-text-muted);
  }
  .zen-autocomplete--disabled .zen-autocomplete__input {
    cursor: not-allowed;
  }

  .zen-autocomplete__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--zen-text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--zen-radius-sm);
    transition: color var(--zen-transition-fast), background var(--zen-transition-fast);
    flex-shrink: 0;
  }
  .zen-autocomplete__clear:hover {
    color: var(--zen-text-primary);
    background: var(--zen-bg-muted);
  }

  .zen-autocomplete__loading-indicator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .zen-autocomplete__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--zen-border);
    border-top-color: var(--zen-accent);
    border-radius: 50%;
    animation: zen-spin 0.6s linear infinite;
  }

  .zen-autocomplete__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: calc(var(--zen-z-dropdown) - 1);
    background: transparent;
    cursor: default;
  }

  .zen-autocomplete__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--zen-space-1);
    background: var(--zen-bg-elevated);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    z-index: var(--zen-z-dropdown);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .zen-autocomplete__item {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2);
    padding: var(--zen-space-2) var(--zen-space-3);
    cursor: pointer;
    font-size: var(--zen-font-size-md);
    color: var(--zen-text-primary);
    transition: background var(--zen-transition-fast);
  }
  .zen-autocomplete__item:hover,
  .zen-autocomplete__item--highlighted {
    background: var(--zen-bg-muted);
  }

  .zen-autocomplete__item--add {
    font-style: italic;
    color: var(--zen-accent);
    gap: var(--zen-space-1);
  }
  .zen-autocomplete__item--add:hover,
  .zen-autocomplete__item--add.zen-autocomplete__item--highlighted {
    background: color-mix(in srgb, var(--zen-accent) 8%, transparent);
  }

  .zen-autocomplete__add-icon {
    flex-shrink: 0;
  }

  .zen-autocomplete__match {
    background: color-mix(in srgb, var(--zen-accent) 15%, transparent);
    color: var(--zen-accent);
    font-weight: var(--zen-font-weight-semibold);
    border-radius: 2px;
    padding: 0 1px;
  }

  .zen-autocomplete__no-data,
  .zen-autocomplete__loading-text {
    padding: var(--zen-space-3);
    text-align: center;
    color: var(--zen-text-muted);
    font-size: var(--zen-font-size-sm);
  }

  .zen-autocomplete__error {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-danger);
  }

  .zen-autocomplete__helper {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
  }

  /* --- ZenFileManager --- */

  .zen-file-manager {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-3);
    font-family: var(--zen-font-family);
    font-size: var(--zen-font-size-base);
    color: var(--zen-text);
    outline: none;
  }

  .zen-file-manager--disabled {
    opacity: 0.55;
    pointer-events: none;
  }

  .zen-file-manager__label {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text);
    margin-bottom: var(--zen-space-1);
  }

  .zen-file-manager__drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--zen-space-2);
    min-height: 8rem;
    padding: var(--zen-space-6);
    border: 2px dashed var(--zen-border);
    border-radius: var(--zen-radius-card);
    background: var(--zen-bg-surface);
    cursor: pointer;
    transition: border-color var(--zen-transition-fast), background var(--zen-transition-fast);
  }

  .zen-file-manager__drop-zone:hover {
    border-color: var(--zen-accent);
    background: color-mix(in srgb, var(--zen-accent) 5%, var(--zen-bg-surface));
  }

  .zen-file-manager--drag-active .zen-file-manager__drop-zone {
    border-color: var(--zen-accent);
    border-style: solid;
    background: color-mix(in srgb, var(--zen-accent) 10%, var(--zen-bg-surface));
  }

  .zen-file-manager--error .zen-file-manager__drop-zone {
    border-color: var(--zen-danger);
  }

  .zen-file-manager__drop-zone-icon {
    color: var(--zen-text-muted);
    transition: color var(--zen-transition-fast);
  }

  .zen-file-manager__drop-zone:hover .zen-file-manager__drop-zone-icon,
  .zen-file-manager--drag-active .zen-file-manager__drop-zone-icon {
    color: var(--zen-accent);
  }

  .zen-file-manager__drop-zone-text {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
    text-align: center;
  }

  .zen-file-manager__drop-zone-hint {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
    opacity: 0.7;
  }

  .zen-file-manager__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .zen-file-manager__file-list {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
  }

  .zen-file-manager__file-item {
    display: flex;
    align-items: center;
    gap: var(--zen-space-3);
    padding: var(--zen-space-2) var(--zen-space-3);
    border: 1px solid var(--zen-border);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-surface);
    transition: border-color var(--zen-transition-fast);
  }

  .zen-file-manager__file-item--completed {
    border-color: color-mix(in srgb, var(--zen-success) 40%, var(--zen-border));
  }

  .zen-file-manager__file-item--failed {
    border-color: color-mix(in srgb, var(--zen-danger) 40%, var(--zen-border));
    background: color-mix(in srgb, var(--zen-danger) 3%, var(--zen-bg-surface));
  }

  .zen-file-manager__file-item--rejected {
    border-color: color-mix(in srgb, var(--zen-warning) 40%, var(--zen-border));
    background: color-mix(in srgb, var(--zen-warning) 3%, var(--zen-bg-surface));
    opacity: 0.75;
  }

  .zen-file-manager__file-preview {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--zen-radius-control);
    overflow: hidden;
    background: var(--zen-bg-muted);
  }

  .zen-file-manager__file-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-orientation: from-image;
  }

  .zen-file-manager__file-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zen-text-muted);
    background: var(--zen-bg-muted);
    border-radius: var(--zen-radius-control);
  }

  .zen-file-manager__file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .zen-file-manager__file-name {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .zen-file-manager__file-size {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-text-muted);
  }

  .zen-file-manager__file-error {
    font-size: var(--zen-font-size-xs);
    color: var(--zen-danger);
  }

  .zen-file-manager__file-progress {
    flex: 0 0 5rem;
    height: 4px;
    background: var(--zen-bg-muted);
    border-radius: 2px;
    overflow: hidden;
  }

  .zen-file-manager__file-progress-fill {
    height: 100%;
    background: var(--zen-accent);
    border-radius: 2px;
    transition: width 0.15s ease;
  }

  .zen-file-manager__file-item--uploading .zen-file-manager__file-status svg {
    animation: zen-spin 1s linear infinite;
  }

  .zen-file-manager__file-status {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .zen-file-manager__file-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    color: var(--zen-text-muted);
    cursor: pointer;
    border-radius: var(--zen-radius-sm);
    transition: color var(--zen-transition-fast), background var(--zen-transition-fast);
    padding: 0;
  }

  .zen-file-manager__file-remove:hover {
    color: var(--zen-danger);
    background: color-mix(in srgb, var(--zen-danger) 10%, transparent);
  }

  .zen-file-manager__error {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-danger);
  }

  .zen-file-manager__helper {
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-muted);
  }

  /* --- ZenChart --- */

  .zen-chart {
    /* relative: the sr-only data table is absolutely positioned — without this
       anchor it resolves to the initial containing block and inflates the
       document's scroll height (phantom page scroll below the app shell). */
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: var(--zen-font-family);
    color: var(--zen-text);
    width: 100%;
  }

  .zen-chart__title {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-semibold, 600);
    color: var(--zen-text-primary);
    margin-bottom: var(--zen-space-2);
  }

  .zen-chart__svg {
    display: block;
    width: 100%;
    /* Fill the wrapper height MINUS in-flow siblings (title, legend); height:100%
       ignored them and pushed content past the fixed-height wrapper. */
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  /* Categorical palette: --zen-chart-1..8 live in the design-token contract
     (zenith-tokens.css, theme-token group — slot 1 tracks the brand accent). */

  .zen-chart__grid {
    stroke: var(--zen-border, rgba(0, 0, 0, 0.08));
    stroke-width: 1;
  }

  .zen-chart__axis-label {
    fill: var(--zen-text-tertiary, var(--zen-text));
    font-family: var(--zen-font-family);
    font-size: 10px;
  }

  .zen-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .zen-chart__area {
    stroke: none;
    opacity: 0.15;
  }

  .zen-chart__marker {
    stroke: var(--zen-bg-surface);
    stroke-width: 1;
    cursor: pointer;
  }

  .zen-chart__bar {
    cursor: pointer;
  }

  .zen-chart__bar:hover,
  .zen-chart__slice:hover {
    opacity: 0.85;
  }

  .zen-chart__slice {
    stroke: var(--zen-bg-surface);
    stroke-width: 1;
    cursor: pointer;
  }

  /* --- Chart Phase 2: data labels, crosshair tooltip, enter animations --- */

  .zen-chart__data-label {
    fill: var(--zen-text-secondary, var(--zen-text));
    font-family: var(--zen-font-family);
    font-size: 10px;
    /* Halo so labels stay legible on top of marks and gridlines. */
    paint-order: stroke;
    stroke: var(--zen-bg-surface, #FFFFFF);
    stroke-width: 3px;
    pointer-events: none;
  }

  .zen-chart__data-label--inverse {
    fill: #FFFFFF;
    stroke: rgba(0, 0, 0, 0.35);
  }

  .zen-chart__crosshair {
    stroke: var(--zen-text-tertiary, var(--zen-text));
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none;
  }

  .zen-chart__tooltip {
    pointer-events: none;
  }

  .zen-chart__tooltip-box {
    fill: var(--zen-bg-elevated, #FFFFFF);
    stroke: var(--zen-border, rgba(0, 0, 0, 0.1));
    stroke-width: 1;
  }

  .zen-chart__tooltip-text {
    fill: var(--zen-text-secondary, var(--zen-text));
    font-family: var(--zen-font-family);
    font-size: 11px;
  }

  .zen-chart__tooltip-text--header {
    fill: var(--zen-text-primary, var(--zen-text));
    font-weight: 600;
  }

  /* Enter animations: lines draw in (pathLength=1 normalizes any path), everything
     else fades. Guarded for prefers-reduced-motion in the block at the end of this file. */
  .zen-chart__line {
    stroke-dasharray: 1;
    animation: zen-chart-draw 0.6s ease-out forwards;
  }

  .zen-chart__area,
  .zen-chart__bar,
  .zen-chart__marker,
  .zen-chart__slice {
    animation: zen-chart-fade 0.45s ease-out;
  }

  @keyframes zen-chart-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes zen-chart-fade {
    from { opacity: 0; }
  }

  .zen-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zen-space-3);
    margin-top: var(--zen-space-2);
    font-size: var(--zen-font-size-sm);
    color: var(--zen-text-secondary, var(--zen-text));
  }

  .zen-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1, 4px);
  }

  .zen-chart__legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }

  /* --- ZenKpi --- */

  .zen-kpi {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2);
    padding: var(--zen-card-pad);
    background: var(--zen-bg-surface);
    border: 1px solid var(--zen-card-border);
    border-radius: var(--zen-radius-card);
    box-shadow: var(--zen-elev-card);
    font-family: var(--zen-font-family);
    color: var(--zen-text-primary);
    min-width: 180px;
  }

  .zen-kpi__header {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2);
  }

  .zen-kpi__icon {
    font-size: 1.25rem;
    line-height: 1;
  }
  .zen-kpi__icon > svg { width: 1em; height: 1em; }

  .zen-kpi__title {
    font-size: var(--zen-font-size-sm);
    font-weight: var(--zen-font-weight-medium);
    color: var(--zen-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .zen-kpi__value {
    font-size: 1.75rem;
    font-weight: var(--zen-font-weight-bold);
    line-height: 1.2;
    color: var(--zen-text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .zen-kpi__value--animate {
    animation: zen-kpi-pop 0.4s ease-out;
  }

  @keyframes zen-kpi-pop {
    0% { opacity: 0.4; transform: translateY(4px); }
    50% { opacity: 1; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Delta reads as a tinted tag: semantic color at low alpha behind full-strength text. */
  .zen-kpi__delta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--zen-space-1);
    font-family: var(--zen-font-family-mono);
    font-size: var(--zen-font-size-xs);
    font-weight: var(--zen-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    padding: 1px var(--zen-space-2);
    border-radius: var(--zen-radius-full);
  }

  .zen-kpi--trend-up .zen-kpi__delta {
    color: var(--zen-success);
    background: color-mix(in srgb, var(--zen-success) 14%, transparent);
  }

  .zen-kpi--trend-down .zen-kpi__delta {
    color: var(--zen-danger);
    background: color-mix(in srgb, var(--zen-danger) 14%, transparent);
  }

  .zen-kpi--trend-neutral .zen-kpi__delta {
    color: var(--zen-text-tertiary);
    background: var(--zen-bg-muted);
  }

  .zen-kpi__delta-arrow {
    flex-shrink: 0;
  }

  .zen-kpi__sparkline {
    width: 100%;
    height: 32px;
    margin-top: var(--zen-space-1);
  }

  .zen-kpi__sparkline-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .zen-kpi--trend-up .zen-kpi__sparkline-line { stroke: var(--zen-success); }
  .zen-kpi--trend-down .zen-kpi__sparkline-line { stroke: var(--zen-danger); }
  .zen-kpi--trend-neutral .zen-kpi__sparkline-line { stroke: var(--zen-accent); }

  .zen-kpi__sparkline-area {
    opacity: 0.1;
  }

  .zen-kpi--trend-up .zen-kpi__sparkline-area { fill: var(--zen-success); }
  .zen-kpi--trend-down .zen-kpi__sparkline-area { fill: var(--zen-danger); }
  .zen-kpi--trend-neutral .zen-kpi__sparkline-area { fill: var(--zen-accent); }

  /* ============================================================
     ZenSparkline — Standalone SVG sparkline
     ============================================================ */

  .zen-sparkline {
    width: 100%;
    height: 24px;
    display: block;
  }

  .zen-sparkline__line {
    fill: none;
    stroke: var(--zen-accent, #4F7FFF);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .zen-sparkline__area {
    fill: var(--zen-accent, #4F7FFF);
    opacity: 0.1;
  }

  .zen-sparkline--success .zen-sparkline__line { stroke: var(--zen-success); }
  .zen-sparkline--success .zen-sparkline__area { fill: var(--zen-success); }

  .zen-sparkline--warning .zen-sparkline__line { stroke: var(--zen-warning); }
  .zen-sparkline--warning .zen-sparkline__area { fill: var(--zen-warning); }

  .zen-sparkline--danger .zen-sparkline__line { stroke: var(--zen-danger); }
  .zen-sparkline--danger .zen-sparkline__area { fill: var(--zen-danger); }

  /* --- Cell utility: compact sparkline for grid cells --- */
  .zen-sparkline--cell {
    height: 20px;
    min-width: 60px;
  }

  /* --- Cell utility: compact progress bar for grid cells --- */
  .zen-progress--cell {
    flex: 1;
    min-width: 50px;
  }
  .zen-progress--cell .zen-progress__track {
    height: 6px;
  }
}

/* Unlayered coexistence guard: host-app global resets (e.g. button { border-radius: 0 })
   sit outside @layer and would beat the layered suite rules. */
button.zen-btn,
a.zen-btn {
  border-radius: var(--zen-radius-action);
}
[data-zen-skin="warm"] .zen-btn--icon-only,
[data-zen-skin="material"] .zen-btn--icon-only {
  border-radius: 50%;
}

/* ─────────────────────────────────────────────
   Reduced motion — overlay enter/leave and KPI pop become instant.
   Loading indicators (spinner, skeleton, progress) stay animated by design;
   token-driven transitions are collapsed by the guard in zenith-tokens.css.
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  @layer zenith-components {
    .zen-toast--entering,
    .zen-toast--leaving,
    .zen-dialog-backdrop,
    .zen-dialog,
    .zen-kpi__value--animate,
    .zen-chart__line,
    .zen-chart__area,
    .zen-chart__bar,
    .zen-chart__marker,
    .zen-chart__slice {
      animation-duration: 0.01ms;
    }
  }
}