/* Generated by npm run ui:build. Edit the Angular theme sources, not this file. */
/*
 * MOCK-1 (dark) theme — the single source of truth for the Mockeryn visual system.
 *
 * The palette is pinned to the MOCK-1 constitution (ref.html MOCK-1):
 *   --bg #0a0e16 · --bg2 #0c111d · --panel #0f1626 · --panel2 #111a2c
 *   --text #e9eef7 · --text2 #9aa8c0 · --text3 #6b7e99
 *   lime #b8f03c (brand/active/primary) · blue #5ea0ff (data)
 *   ok #46d68c · warn #ffb454 · err #ff6b6b
 *
 * Angular Material derives every component from these M3 palettes, so this one
 * file is what makes the whole app one theme. Edit here, never in components.
 *
 * Palette shape follows Material's canonical $red-palette form: the 16 M3 tone
 * keys (0,10,20,25,30,35,40,50,60,70,80,90,95,98,99,100) plus the nested
 * secondary/neutral/neutral-variant/error palettes (see
 * core/theming/_definition.scss, which strips the nested maps out of primary).
 */
html {
  --mat-sys-background: #0a0e16;
  --mat-sys-error: #ff6b6b;
  --mat-sys-error-container: #4f1514;
  --mat-sys-inverse-on-surface: #131a28;
  --mat-sys-inverse-primary: #4a6516;
  --mat-sys-inverse-surface: #e9eef7;
  --mat-sys-on-background: #e9eef7;
  --mat-sys-on-error: #3a0d0c;
  --mat-sys-on-error-container: #ffa29f;
  --mat-sys-on-primary: #26360b;
  --mat-sys-on-primary-container: #d3f869;
  --mat-sys-on-primary-fixed: #0e1806;
  --mat-sys-on-primary-fixed-variant: #384c10;
  --mat-sys-on-secondary: #162c43;
  --mat-sys-on-secondary-container: #7cb5ff;
  --mat-sys-on-secondary-fixed: #0a1524;
  --mat-sys-on-secondary-fixed-variant: #1f3f5c;
  --mat-sys-on-surface: #e9eef7;
  --mat-sys-on-surface-variant: #9aa8c0;
  --mat-sys-on-tertiary: #15331f;
  --mat-sys-on-tertiary-container: #74e0a4;
  --mat-sys-on-tertiary-fixed: #0a1c11;
  --mat-sys-on-tertiary-fixed-variant: #1f472c;
  --mat-sys-outline: #3d4f72;
  --mat-sys-outline-variant: #1a2436;
  --mat-sys-primary: #b8f03c;
  --mat-sys-primary-container: #384c10;
  --mat-sys-primary-fixed: #d3f869;
  --mat-sys-primary-fixed-dim: #b8f03c;
  --mat-sys-scrim: #05080e;
  --mat-sys-secondary: #5ea0ff;
  --mat-sys-secondary-container: #1f3f5c;
  --mat-sys-secondary-fixed: #7cb5ff;
  --mat-sys-secondary-fixed-dim: #5ea0ff;
  --mat-sys-shadow: #05080e;
  --mat-sys-surface: #0a0e16;
  --mat-sys-surface-bright: #182334;
  --mat-sys-surface-container: #0f1626;
  --mat-sys-surface-container-high: #111a2c;
  --mat-sys-surface-container-highest: #131c2e;
  --mat-sys-surface-container-low: #0c111d;
  --mat-sys-surface-container-lowest: #080c14;
  --mat-sys-surface-dim: #0a0e16;
  --mat-sys-surface-tint: #b8f03c;
  --mat-sys-surface-variant: #1a2436;
  --mat-sys-tertiary: #46d68c;
  --mat-sys-tertiary-container: #1f472c;
  --mat-sys-tertiary-fixed: #74e0a4;
  --mat-sys-tertiary-fixed-dim: #46d68c;
  --mat-sys-neutral-variant20: #141b2a;
  --mat-sys-neutral10: #0c111d;
}

html {
  --mat-sys-level0: 0px 0px 0px 0px rgba(5, 8, 14, 0.2), 0px 0px 0px 0px rgba(5, 8, 14, 0.14), 0px 0px 0px 0px rgba(5, 8, 14, 0.12);
  --mat-sys-level1: 0px 2px 1px -1px rgba(5, 8, 14, 0.2), 0px 1px 1px 0px rgba(5, 8, 14, 0.14), 0px 1px 3px 0px rgba(5, 8, 14, 0.12);
  --mat-sys-level2: 0px 3px 3px -2px rgba(5, 8, 14, 0.2), 0px 3px 4px 0px rgba(5, 8, 14, 0.14), 0px 1px 8px 0px rgba(5, 8, 14, 0.12);
  --mat-sys-level3: 0px 3px 5px -1px rgba(5, 8, 14, 0.2), 0px 6px 10px 0px rgba(5, 8, 14, 0.14), 0px 1px 18px 0px rgba(5, 8, 14, 0.12);
  --mat-sys-level4: 0px 5px 5px -3px rgba(5, 8, 14, 0.2), 0px 8px 10px 1px rgba(5, 8, 14, 0.14), 0px 3px 14px 2px rgba(5, 8, 14, 0.12);
  --mat-sys-level5: 0px 7px 8px -4px rgba(5, 8, 14, 0.2), 0px 12px 17px 2px rgba(5, 8, 14, 0.14), 0px 5px 22px 4px rgba(5, 8, 14, 0.12);
}

html {
  --mat-sys-body-large: 400 1rem / 1.5rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-large-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-medium-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-small-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Space Grotesk, Inter, sans-serif;
  --mat-sys-display-large-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Space Grotesk, Inter, sans-serif;
  --mat-sys-display-medium-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Space Grotesk, Inter, sans-serif;
  --mat-sys-display-small-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-large-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-medium-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-small-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-large-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-medium-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-small-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Space Grotesk, Inter, sans-serif;
  --mat-sys-title-large-font: Space Grotesk, Inter, sans-serif;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-title-medium-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Inter, Helvetica Neue, sans-serif;
  --mat-sys-title-small-font: Inter, Helvetica Neue, sans-serif;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
}

html {
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
}

html {
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
:root { --ui-action-rgb: 184, 240, 60; }
:root {
    --page-gutter: clamp(24px, 3vw, 64px);
    --page-max-width: 1400px;

    /* MOCK-1 type faces (loaded in index.html) */
    --font-display: "Space Grotesk", "Inter", sans-serif;
    --font-body: Inter, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* === Base method colors (already in your file) === */
    --method-any: #64748b;
    --method-connect: #8e44ad;
    --method-delete: #e74c3c;
    --method-get: #2ecc71;
    --method-head: #95a5a6;
    --method-options: #f39c12;
    --method-patch: #3498db;
    --method-post: #1abc9c;
    --method-put: #f1c40f;
    --method-trace: #8296ad;

    /* === Soft background tints (2–6% opacity) === */
    --method-any-bg: rgba(100, 116, 139, 0.05);
    --method-connect-bg: rgba(142, 68, 173, 0.05);
    --method-delete-bg: rgba(231, 76, 60, 0.05);
    --method-get-bg: rgba(46, 204, 113, 0.05);
    --method-head-bg: rgba(149, 165, 166, 0.05);
    --method-options-bg: rgba(243, 156, 18, 0.06);
    --method-patch-bg: rgba(52, 152, 219, 0.05);
    --method-post-bg: rgba(26, 188, 156, 0.05);
    --method-put-bg: rgba(241, 196, 15, 0.06);
    --method-trace-bg: rgba(52, 73, 94, 0.05);

    --mat-sys-warning: #ffb454;

    /* Column backgrounds (dark, subtle blue ramp) */
    --column-bg-1: rgba(94, 160, 255, 0.02);
    --column-bg-2: rgba(94, 160, 255, 0.04);
    --column-bg-3: rgba(94, 160, 255, 0.05);
    --column-bg-4: rgba(94, 160, 255, 0.06);
    --column-bg-5: rgba(94, 160, 255, 0.08);
    --column-bg-6: rgba(94, 160, 255, 0.1);
    --column-bg-actions: rgba(94, 160, 255, 0.18);

    /* === MOCK-1 smoked technical glass (Concept B) ===
       One chassis color that glows faintly through translucent faces. The
       faces read as glass because the chassis, a radial glow, and a 44px
       grid show through them — not because of heavy blur or shine. Values
       are ported from the approved prototype; they extend (never replace)
       the M3 --mat-sys-* layer above. */
    --chassis-bg: #06080e;
    --chassis-glow: rgba(132, 168, 218, 0.09);
    --chassis-grid: rgba(166, 196, 236, 0.038);
    --chassis-grid-size: 44px;

    --glass-face-1: linear-gradient(180deg, rgba(21, 28, 42, 0.44), rgba(9, 12, 19, 0.36));
    --glass-face-2: linear-gradient(180deg, rgba(15, 20, 31, 0.42), rgba(7, 10, 16, 0.38));
    --glass-header: linear-gradient(180deg, rgba(21, 28, 43, 0.55), rgba(10, 13, 20, 0.42));
    --glass-column: rgba(9, 12, 19, 0.3);
    --glass-column-head: linear-gradient(180deg, rgba(176, 201, 236, 0.06), rgba(176, 201, 236, 0.02));
    --glass-toolbar: rgba(150, 182, 228, 0.03);
    --glass-field: rgba(140, 172, 216, 0.06);
    --glass-chip: rgba(162, 192, 232, 0.06);

    --glass-border: rgba(176, 201, 236, 0.13);
    --glass-border-strong: rgba(202, 226, 255, 0.3);
    --glass-sep: rgba(176, 201, 236, 0.08);
    --glass-inset: rgba(206, 229, 255, 0.1);

    --glass-blur: blur(30px);
    --glass-radius: 13px;
    --glass-radius-sm: 8px;
    --glass-shadow: inset 0 1px 0 rgba(214, 234, 255, 0.1), 0 10px 24px -18px rgba(0, 0, 0, 0.55);
    --glass-shadow-hover: inset 0 1px 0 rgba(214, 234, 255, 0.14), 0 12px 28px -16px rgba(0, 0, 0, 0.6);

    /* === Form field family ===
       The one visual shell for every control whose job is entering or
       selecting a value: search, text input, textarea, mat-select,
       matAutocomplete. The approved references are the header search
       control and the mock request drawer inputs — a dark translucent
       interior behind a restrained cool hairline, a compact radius, and the
       brand accent on focus. The Material outline field, the shared
       .search-field, and the drawer's custom inputs all resolve through
       these tokens, so the whole family moves together; contexts may
       rescope a single token (the drawer uses a 6px radius). */
    --field-radius: var(--mat-sys-corner-extra-small, 4px);
    --field-bg: var(--glass-field);
    --field-border: var(--glass-border);
    --field-border-hover: var(--glass-border-strong);
    --field-focus: var(--mat-sys-primary, #b8f03c);
    --field-focus-ring: color-mix(in srgb, var(--mat-sys-primary, #b8f03c) 30%, transparent);
    --field-text: var(--mat-sys-on-surface, #e9eef7);
    --field-placeholder: color-mix(in srgb, var(--mat-sys-on-surface-variant, #9aa8c0) 50%, transparent);
    --field-label: var(--mat-sys-on-surface-variant, #9aa8c0);
    --field-label-focus: var(--field-focus);
    --field-disabled-bg: color-mix(in srgb, var(--glass-field) 55%, transparent);
    --field-disabled-border: color-mix(in srgb, var(--glass-border) 55%, transparent);
    --field-disabled-text: color-mix(in srgb, var(--mat-sys-on-surface, #e9eef7) 45%, transparent);
    --field-disabled-label: color-mix(in srgb, var(--mat-sys-on-surface-variant, #9aa8c0) 70%, transparent);
    --field-error: var(--status-danger, #f87171);
    --field-error-ring: color-mix(in srgb, var(--status-danger, #f87171) 25%, transparent);

    /* Semantic status + source chips (dark-glass safe: light hue on a
       translucent tint of the same hue) */
    --status-success: #4ade80;
    --status-success-bg: rgba(74, 222, 128, 0.12);
    --status-warn: #fbbf24;
    --status-warn-bg: rgba(251, 191, 36, 0.12);
    --status-danger: #f87171;
    --status-danger-bg: rgba(248, 113, 113, 0.12);
    --source-mock: #60a5fa;
    --source-mock-bg: rgba(96, 165, 250, 0.12);
    --source-proxy: #4ade80;
    --source-proxy-bg: rgba(74, 222, 128, 0.12);
    --source-error: #fb923c;
    --source-error-bg: rgba(251, 146, 60, 0.12);
}

/* Shared HTML primitives. Angular Material and Blade consume the same system tokens. */
:root {
    --ui-space-1: .25rem;
    --ui-space-2: .5rem;
    --ui-space-3: .75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.25rem;
    --ui-space-6: 1.5rem;
    --ui-space-8: 2rem;
    --ui-space-10: 2.5rem;
    --ui-space-12: 3rem;
    --ui-space-16: 4rem;
    --ui-space-20: 5rem;
    --ui-text-xs: .75rem;
    --ui-text-sm: .875rem;
    --ui-text-body: 1rem;
    --ui-text-lg: 1.125rem;
    --ui-text-title: 1.125rem;
    --ui-text-display: clamp(1.5rem, 2vw, 1.75rem);
    --ui-text-section: clamp(1.25rem, 1.5vw, 1.375rem);
    --ui-heading-h1: var(--ui-text-display);
    --ui-heading-h2: var(--ui-text-section);
    --ui-heading-h3: var(--ui-text-title);
    --ui-heading-h4: var(--ui-text-body);
    --ui-heading-h5: var(--ui-text-sm);
    --ui-heading-h6: var(--ui-text-xs);
    --ui-control-height: 2.5rem;
    --ui-icon-size: 1.25rem;
    --ui-border-width: .0625rem;
    --ui-focus-width: .125rem;
    --ui-motion-fast: 140ms;
    --ui-font-weight: 500;
    --ui-leading: 1.65;
    --ui-letter-spacing: -.035em;
    --ui-measure: 70ch;
    --ui-content-width: 75rem;
    --ui-header-height: 4rem;
    --ui-logo-size: 2rem;
    --ui-panel-radius: var(--glass-radius);
    --ui-control-radius: var(--mat-sys-corner-full);
    --ui-action: var(--mat-sys-primary);
    --ui-on-action: var(--mat-sys-on-primary);
    --ui-action-hover: color-mix(in srgb, var(--ui-action) 90%, var(--mat-sys-on-surface));
    --ui-action-active: color-mix(in srgb, var(--ui-action) 82%, var(--mat-sys-on-surface));
    --ui-text: var(--mat-sys-on-surface);
    --ui-muted: var(--mat-sys-on-surface-variant);
    --ui-surface: var(--mat-sys-surface);
    --ui-surface-raised: var(--mat-sys-surface-container);
    --ui-danger: var(--mat-sys-error);
    --ui-focus-ring: var(--ui-focus-width) solid var(--ui-action);
    --ui-disabled-opacity: .45;
}

body, body.ui-theme {
    margin: 0;
    color-scheme: dark;
    font-family: var(--font-body);
    color: var(--ui-text);
    background-color: var(--chassis-bg);
    background-image:
        radial-gradient(75rem 38.75rem at 15% 0%, var(--chassis-glow), transparent 70%),
        linear-gradient(var(--chassis-grid) var(--ui-border-width), transparent var(--ui-border-width)),
        linear-gradient(90deg, var(--chassis-grid) var(--ui-border-width), transparent var(--ui-border-width));
    background-size: auto, var(--chassis-grid-size) var(--chassis-grid-size), var(--chassis-grid-size) var(--chassis-grid-size);
}

:is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    color: var(--ui-text);
    overflow-wrap: anywhere;
}
h1 { font-size: var(--ui-heading-h1); }
h2 { font-size: var(--ui-heading-h2); }
h3 { font-size: var(--ui-heading-h3); }
h4 { font-size: var(--ui-heading-h4); }
h5 { font-size: var(--ui-heading-h5); }
h6 { font-size: var(--ui-heading-h6); }

:is(code, pre, kbd, samp) {
    font-family: var(--font-mono);
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-block-size: var(--ui-control-height);
    padding: var(--ui-space-2) var(--ui-space-6);
    border: var(--ui-border-width) solid transparent;
    border-radius: var(--ui-control-radius);
    font: var(--ui-font-weight) var(--ui-text-sm)/1.25 var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ui-motion-fast), border-color var(--ui-motion-fast);
}
.ui-button--primary { background: var(--ui-action); color: var(--ui-on-action); }
.ui-button--primary:hover { background: var(--ui-action-hover); color: var(--ui-on-action); }
.ui-button--primary:active { background: var(--ui-action-active); }
.ui-button--secondary { background: transparent; border-color: var(--glass-border-strong); color: var(--ui-text); }
.ui-button--secondary:hover { background: var(--glass-field); border-color: var(--ui-muted); color: var(--ui-text); }
.ui-button--secondary:active { background: var(--glass-chip); }
.ui-button--danger { background: var(--ui-danger); color: var(--mat-sys-on-error); }
.ui-button--danger:hover { background: color-mix(in srgb, var(--ui-danger) 90%, var(--ui-text)); }
.ui-button:focus-visible, .ui-theme :is(a, button, summary):focus-visible {
    outline: var(--ui-focus-ring);
    outline-offset: var(--ui-space-1);
}
.ui-button:is(:disabled, [aria-disabled="true"]) { opacity: var(--ui-disabled-opacity); cursor: not-allowed; }
.ui-button[aria-busy="true"] { cursor: progress; }
.ui-button[aria-busy="true"]::before {
    content: "";
    inline-size: var(--ui-text-sm);
    block-size: var(--ui-text-sm);
    border: var(--ui-focus-width) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--ui-control-radius);
    animation: ui-spin 1s linear infinite;
}
.ui-field { display: grid; gap: var(--ui-space-2); min-inline-size: 0; }
.ui-field label { color: var(--field-label); font-size: var(--ui-text-sm); }
.ui-input {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--ui-control-height);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--field-bg);
    border: var(--ui-border-width) solid var(--field-border);
    border-radius: var(--field-radius);
    color: var(--field-text);
    font: inherit;
}
.ui-input::placeholder { color: var(--field-placeholder); }
.ui-input:hover:not(:disabled) { border-color: var(--field-border-hover); }
.ui-input:focus { outline: var(--ui-focus-width) solid var(--field-focus-ring); border-color: var(--field-focus); }
.ui-input[aria-invalid="true"] { border-color: var(--field-error); outline-color: var(--field-error-ring); }
.ui-input:disabled { color: var(--field-disabled-text); background: var(--field-disabled-bg); cursor: not-allowed; }
.ui-panel { background: var(--glass-face-1); border: var(--ui-border-width) solid var(--glass-border); border-radius: var(--ui-panel-radius); box-shadow: var(--glass-shadow); }
.ui-badge { display: inline-flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-3); border: var(--ui-border-width) solid var(--glass-border); border-radius: var(--ui-control-radius); color: var(--ui-muted); background: var(--glass-chip); font: var(--ui-font-weight) var(--ui-text-xs)/1.5 var(--font-mono); }
.ui-alert { padding: var(--ui-space-4); border-radius: var(--field-radius); border: var(--ui-border-width) solid var(--ui-danger); color: var(--ui-danger); background: var(--status-danger-bg); }
.ui-icon { inline-size: var(--ui-icon-size); block-size: var(--ui-icon-size); fill: none; stroke: currentColor; stroke-width: 1.5; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ui-theme *, .ui-theme *::before, .ui-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}