:root {
    color-scheme: light;

    /* Foundation: spacing */
    --fdc-space-1: 0.25rem;
    --fdc-space-2: 0.5rem;
    --fdc-space-3: 0.75rem;
    --fdc-space-4: 1rem;
    --fdc-space-5: 1.25rem;
    --fdc-space-6: 1.5rem;
    --fdc-space-8: 2rem;
    --fdc-space-10: 2.5rem;

    /* Foundation: shape, elevation, and motion */
    --fdc-radius-sm: 0.5rem;
    --fdc-radius-md: 0.75rem;
    --fdc-radius-lg: 1rem;
    --fdc-radius-xl: 1.25rem;
    --fdc-radius-pill: 999px;
    --fdc-shadow-sm: 0 1px 2px rgba(16, 33, 43, 0.05);
    --fdc-shadow-md: 0 10px 28px rgba(16, 33, 43, 0.08);
    --fdc-shadow-lg: 0 24px 64px rgba(16, 33, 43, 0.14);
    --fdc-motion-fast: 120ms;
    --fdc-motion-standard: 180ms;
    --fdc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --fdc-tap-target: 2.75rem;
    --fdc-shell-header-height: 4.75rem;

    /* Semantic color system: light */
    --fdc-color-background: #f3f6fa;
    --fdc-color-background-secondary: #e9eef5;
    --fdc-color-surface: #ffffff;
    --fdc-color-surface-elevated: #ffffff;
    --fdc-color-surface-interactive: #f5f8fc;
    --fdc-color-border: #d5dfeb;
    --fdc-color-border-strong: #acbfd2;
    --fdc-color-text: #14243a;
    --fdc-color-text-secondary: #526780;
    --fdc-color-text-muted: #586a80;
    --fdc-color-accent: #205d9e;
    --fdc-color-on-accent: #ffffff;
    --fdc-color-accent-hover: #174a82;
    --fdc-color-accent-pressed: #103961;
    --fdc-color-accent-soft: #e8f1fc;
    --fdc-color-info: #276aaf;
    --fdc-color-info-soft: #ebf4ff;
    --fdc-color-success: #2e7654;
    --fdc-color-success-soft: #edf8f4;
    --fdc-color-warning: #875f12;
    --fdc-color-warning-soft: #fff8e7;
    --fdc-color-danger: #a54848;
    --fdc-color-danger-soft: #fff1f1;
    --fdc-focus-ring: 0 0 0 3px rgba(32, 93, 158, 0.24);

    /* Compatibility aliases used by the existing WebHub. */
    --text: var(--fdc-color-text);
    --muted: var(--fdc-color-text-secondary);
    --line: var(--fdc-color-border);
    --line-strong: var(--fdc-color-border-strong);
    --surface: var(--fdc-color-surface);
    --surface-soft: var(--fdc-color-background-secondary);
    --surface-subtle: var(--fdc-color-surface-interactive);
    --surface-tint: var(--fdc-color-accent-soft);
    --border: var(--fdc-color-border);
    /* Older external-portal components use these names. Keep them theme-aware. */
    --fdc-text-primary: var(--fdc-color-text);
    --fdc-text-muted: var(--fdc-color-text-secondary);
    --fdc-surface: var(--fdc-color-surface);
    --fdc-surface-muted: var(--fdc-color-surface-interactive);
    --fdc-border: var(--fdc-color-border);
    --blue: var(--fdc-color-info);
    --teal: var(--fdc-color-accent);
    --green: var(--fdc-color-success);
    --amber: var(--fdc-color-warning);
    --red: var(--fdc-color-danger);
    --shadow: var(--fdc-shadow-md);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --fdc-color-background: #0d1626;
    --fdc-color-background-secondary: #13223a;
    --fdc-color-surface: #182943;
    --fdc-color-surface-elevated: #203350;
    --fdc-color-surface-interactive: #253b59;
    --fdc-color-border: #36506d;
    --fdc-color-border-strong: #4c6888;
    --fdc-color-text: #f1f6f7;
    --fdc-color-text-secondary: #c0cdd4;
    --fdc-color-text-muted: #a1b2c3;
    --fdc-color-accent: #91c5ff;
    --fdc-color-on-accent: #091d36;
    --fdc-color-accent-hover: #abd4ff;
    --fdc-color-accent-pressed: #72ace9;
    --fdc-color-accent-soft: #213d61;
    --fdc-color-info: #9bcaff;
    --fdc-color-info-soft: #1f3b5d;
    --fdc-color-success: #7ac49b;
    --fdc-color-success-soft: #19372b;
    --fdc-color-warning: #e1bd6d;
    --fdc-color-warning-soft: #392f1c;
    --fdc-color-danger: #ee9a9a;
    --fdc-color-danger-soft: #3d2427;
    --fdc-focus-ring: 0 0 0 3px rgba(145, 197, 255, 0.3);
    --fdc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --fdc-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.24);
    --fdc-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.34);
}

.fdc-page {
    display: grid;
    gap: var(--fdc-space-6);
    color: var(--fdc-color-text);
}

.fdc-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fdc-space-4);
}

.fdc-page-heading h1,
.fdc-section-heading h2,
.fdc-card-heading {
    margin: 0;
    color: var(--fdc-color-text);
    letter-spacing: -0.018em;
}

.fdc-page-heading h1 {
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    line-height: 1.14;
}

.fdc-page-heading p,
.fdc-section-heading p {
    max-width: 64ch;
    margin: var(--fdc-space-2) 0 0;
    color: var(--fdc-color-text-secondary);
}

.fdc-section {
    display: grid;
    gap: var(--fdc-space-4);
}

.fdc-surface,
.fdc-card {
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-lg);
    background: var(--fdc-color-surface);
    color: var(--fdc-color-text);
}

.fdc-card {
    padding: var(--fdc-space-5);
    box-shadow: var(--fdc-shadow-sm);
}

.fdc-card-interactive {
    transition:
        border-color var(--fdc-motion-standard) var(--fdc-ease-standard),
        box-shadow var(--fdc-motion-standard) var(--fdc-ease-standard),
        transform var(--fdc-motion-fast) var(--fdc-ease-standard);
}

.fdc-card-interactive:hover {
    border-color: var(--fdc-color-border-strong);
    box-shadow: var(--fdc-shadow-md);
}

.fdc-card-interactive:active {
    transform: scale(0.995);
}

.fdc-button {
    position: relative;
    min-width: var(--fdc-tap-target);
    min-height: var(--fdc-tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fdc-space-2);
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--fdc-radius-pill);
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--fdc-motion-fast) var(--fdc-ease-standard),
        border-color var(--fdc-motion-fast) var(--fdc-ease-standard),
        color var(--fdc-motion-fast) var(--fdc-ease-standard),
        transform var(--fdc-motion-fast) var(--fdc-ease-standard);
}

.fdc-button:focus-visible,
.fdc-field:focus-visible,
.fdc-choice:focus-within {
    outline: none;
    box-shadow: var(--fdc-focus-ring);
}

.fdc-button:active:not(:disabled) {
    transform: scale(0.98);
}

.fdc-button:disabled,
.fdc-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.52;
}

.fdc-button-primary {
    border-color: var(--fdc-color-accent);
    background: var(--fdc-color-accent);
    color: var(--fdc-color-on-accent);
}

.fdc-button-primary:hover:not(:disabled) {
    border-color: var(--fdc-color-accent-hover);
    background: var(--fdc-color-accent-hover);
}

.fdc-button-secondary {
    border-color: transparent;
    background: var(--fdc-color-background-secondary);
    color: var(--fdc-color-text);
}

.fdc-button-tertiary {
    border-color: var(--fdc-color-border-strong);
    background: transparent;
    color: var(--fdc-color-text);
}

.fdc-button-secondary:hover:not(:disabled),
.fdc-button-tertiary:hover:not(:disabled),
.fdc-button-ghost:hover:not(:disabled) {
    background: var(--fdc-color-surface-interactive);
}

.fdc-button-ghost {
    background: transparent;
    color: var(--fdc-color-text-secondary);
}

.fdc-button-danger {
    border-color: var(--fdc-color-danger);
    background: var(--fdc-color-danger);
    color: #ffffff;
}

.fdc-button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: inherit;
    white-space: nowrap;
}

.fdc-button-content-hidden {
    opacity: 0;
}

.fdc-button-loader {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.fdc-button-loader svg {
    width: 2rem;
    height: 2rem;
}

.fdc-button-loader path {
    stroke-dasharray: 15 85;
    animation: fdc-loader-move 2s linear infinite, fdc-loader-dash 4s ease-in-out infinite;
}

.fdc-button-small {
    min-height: var(--fdc-tap-target);
    padding-inline: 0.8rem;
    font-size: 0.75rem;
}

.fdc-button-regular {
    min-height: var(--fdc-tap-target);
    padding-inline: 1rem;
    font-size: 0.8125rem;
}

.fdc-button-large {
    min-height: 3rem;
    padding-inline: 1.25rem;
    font-size: 0.875rem;
}

.fdc-button-full {
    width: 100%;
}

.fdc-icon-button {
    width: var(--fdc-tap-target);
    height: var(--fdc-tap-target);
    padding: 0;
}

/* 21st.dev Cinematic Theme Switcher, translated into the FieldDocs token system. */
.fdc-theme-switch {
    position: relative;
    width: 4.25rem;
    height: 2.5rem;
    flex: 0 0 4.25rem;
    display: inline-flex;
    align-items: center;
    padding: 0.22rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fdc-color-border-strong) 72%, transparent);
    border-radius: var(--fdc-radius-pill);
    background:
        radial-gradient(ellipse at 24% 10%, rgba(255, 255, 255, 0.92), transparent 48%),
        linear-gradient(145deg, #f7fafb, #dbe4e8);
    box-shadow:
        inset 0.18rem 0.18rem 0.42rem rgba(94, 113, 124, 0.25),
        inset -0.18rem -0.18rem 0.42rem rgba(255, 255, 255, 0.92),
        0 0.2rem 0.55rem rgba(16, 33, 43, 0.1);
    color: var(--fdc-color-text-secondary);
    cursor: pointer;
    transition:
        border-color 260ms var(--fdc-ease-standard),
        background 260ms var(--fdc-ease-standard),
        box-shadow 260ms var(--fdc-ease-standard),
        transform var(--fdc-motion-fast) var(--fdc-ease-standard);
}

.fdc-theme-switch::before {
    content: "";
    position: absolute;
    inset: 0.14rem;
    border-radius: inherit;
    box-shadow: inset 0 0.12rem 0.3rem rgba(56, 76, 87, 0.24);
    pointer-events: none;
}

.fdc-theme-switch:hover {
    border-color: color-mix(in srgb, var(--fdc-color-accent) 46%, var(--fdc-color-border));
}

.fdc-theme-switch:active {
    transform: scale(0.97);
}

.fdc-theme-switch:focus-visible {
    outline: 0;
    box-shadow: var(--fdc-focus-ring), 0 0.2rem 0.55rem rgba(16, 33, 43, 0.12);
}

.fdc-theme-switch-icons {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.64rem;
    pointer-events: none;
}

.fdc-theme-track-sun {
    color: #b36b00;
}

.fdc-theme-track-moon {
    color: #526676;
}

.fdc-theme-switch-thumb {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f5f8f9);
    color: #b36b00;
    box-shadow:
        inset 0.08rem 0.08rem 0.18rem rgba(185, 200, 208, 0.38),
        inset -0.08rem -0.08rem 0.18rem rgba(255, 255, 255, 0.95),
        0 0.24rem 0.72rem rgba(16, 33, 43, 0.2);
    transform: translateX(0);
    transition:
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        background 260ms var(--fdc-ease-standard),
        color 260ms var(--fdc-ease-standard),
        border-color 260ms var(--fdc-ease-standard);
}

.fdc-theme-switch-thumb::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.42rem;
    width: 0.68rem;
    height: 0.22rem;
    border-radius: var(--fdc-radius-pill);
    background: rgba(255, 255, 255, 0.72);
    filter: blur(0.5px);
}

.fdc-theme-thumb-moon {
    display: none;
}

:root[data-theme="dark"] .fdc-theme-switch {
    border-color: rgba(66, 89, 103, 0.78);
    background:
        radial-gradient(ellipse at 24% 10%, rgba(67, 91, 106, 0.38), transparent 48%),
        linear-gradient(145deg, #1c2c36, #071119);
    box-shadow:
        inset 0.18rem 0.18rem 0.46rem rgba(0, 0, 0, 0.75),
        inset -0.14rem -0.14rem 0.42rem rgba(85, 113, 128, 0.2),
        0 0.22rem 0.65rem rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] .fdc-theme-track-sun {
    color: #9c8548;
}

:root[data-theme="dark"] .fdc-theme-track-moon {
    color: #f1d98b;
}

:root[data-theme="dark"] .fdc-theme-switch-thumb {
    border-color: rgba(148, 163, 174, 0.34);
    background: linear-gradient(145deg, #657b88, #344a57 58%, #263a46);
    color: #f5dc8b;
    box-shadow:
        inset 0.08rem 0.08rem 0.2rem rgba(191, 212, 222, 0.2),
        inset -0.08rem -0.08rem 0.2rem rgba(0, 0, 0, 0.62),
        0 0.28rem 0.78rem rgba(0, 0, 0, 0.5);
    transform: translateX(1.75rem);
}

:root[data-theme="dark"] .fdc-theme-thumb-sun {
    display: none;
}

:root[data-theme="dark"] .fdc-theme-thumb-moon {
    display: inline-flex;
}

.fdc-button-compact {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
}

.fdc-field {
    width: 100%;
    min-height: var(--fdc-tap-target);
    padding: 0.68rem 0.8rem;
    border: 1px solid var(--fdc-color-border-strong);
    border-radius: var(--fdc-radius-md);
    background: var(--fdc-color-surface);
    color: var(--fdc-color-text);
    transition:
        border-color var(--fdc-motion-fast) var(--fdc-ease-standard),
        box-shadow var(--fdc-motion-fast) var(--fdc-ease-standard);
}

.fdc-form-field {
    display: grid;
    gap: 0.375rem;
    width: 100%;
}

.fdc-form-field > label {
    color: var(--fdc-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 650;
}

.fdc-required,
.fdc-field-error,
.fdc-form-field-invalid .fdc-field-status {
    color: var(--fdc-color-danger);
}

.fdc-field-shell {
    position: relative;
}

.fdc-field-shell .fdc-field {
    padding-right: 2.5rem;
    border-width: 2px;
    border-color: var(--fdc-color-border);
    border-radius: 0.625rem;
    background: var(--fdc-color-background-secondary);
    box-shadow: inset 0 1px 2px rgba(16, 33, 43, 0.06);
    font-size: 0.8125rem;
}

.fdc-field-shell .fdc-field:focus {
    border-color: var(--fdc-color-accent);
    background: var(--fdc-color-surface);
    box-shadow: var(--fdc-focus-ring);
}

.fdc-select-field .fdc-field {
    appearance: none;
    height: var(--fdc-tap-target);
}

.fdc-select-field .fdc-field-status {
    pointer-events: none;
}

.fdc-field:disabled,
fieldset:disabled .fdc-field {
    cursor: not-allowed;
    opacity: 0.65;
}

.fdc-form-field-invalid .fdc-field {
    border-color: var(--fdc-color-danger);
    background: var(--fdc-color-surface);
}

.fdc-field-status {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    display: grid;
    place-items: center;
    color: var(--fdc-color-text-muted);
    transform: translateY(-50%);
}

.fdc-form-field-pending .fdc-field-status {
    animation: fdc-spin 0.9s linear infinite;
}

.fdc-form-field-valid .fdc-field-status {
    color: var(--fdc-color-success);
}

.fdc-field-message {
    min-height: 1rem;
    color: var(--fdc-color-text-muted);
    font-size: 0.71875rem;
    line-height: 1rem;
}

.fdc-search-field {
    min-width: 0;
    min-height: var(--fdc-tap-target);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.75rem;
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-pill);
    background: var(--fdc-color-surface-interactive);
    color: var(--fdc-color-text-muted);
    transition: border-color var(--fdc-motion-fast) var(--fdc-ease-standard), box-shadow var(--fdc-motion-fast) var(--fdc-ease-standard);
}

.fdc-search-field:focus-within {
    border-color: var(--fdc-color-accent);
    box-shadow: var(--fdc-focus-ring);
}

.fdc-search-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fdc-color-text);
}

.fdc-search-field button {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fdc-color-text-secondary);
}

.fdc-filter-chip {
    min-height: var(--fdc-tap-target);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.85rem;
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-pill);
    background: var(--fdc-color-surface);
    color: var(--fdc-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.fdc-filter-chip.selected {
    border-color: color-mix(in srgb, var(--fdc-color-accent) 30%, var(--fdc-color-border));
    background: var(--fdc-color-accent-soft);
    color: var(--fdc-color-accent);
}

.fdc-segmented-control {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-pill);
    background: var(--fdc-color-background-secondary);
}

.fdc-segmented-control button {
    min-height: 2.25rem;
    padding: 0 0.8rem;
    border: 0;
    border-radius: var(--fdc-radius-pill);
    background: transparent;
    color: var(--fdc-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.fdc-segmented-control button.selected {
    background: var(--fdc-color-surface);
    color: var(--fdc-color-text);
    box-shadow: var(--fdc-shadow-sm);
}

input::placeholder,
textarea::placeholder {
    color: var(--fdc-color-text-secondary);
    opacity: 1;
}

.fdc-field::placeholder {
    color: var(--fdc-color-text-muted);
}

.fdc-field:focus {
    border-color: var(--fdc-color-accent);
    outline: none;
    box-shadow: var(--fdc-focus-ring);
}

.fdc-status {
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: var(--fdc-space-1);
    width: fit-content;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-pill);
    background: var(--fdc-color-background-secondary);
    color: var(--fdc-color-text-secondary);
    font-size: 0.75rem;
    font-weight: 800;
}

.fdc-status-success {
    border-color: color-mix(in srgb, var(--fdc-color-success) 32%, transparent);
    background: var(--fdc-color-success-soft);
    color: var(--fdc-color-success);
}

.fdc-status-warning {
    border-color: color-mix(in srgb, var(--fdc-color-warning) 32%, transparent);
    background: var(--fdc-color-warning-soft);
    color: var(--fdc-color-warning);
}

.fdc-status-danger {
    border-color: color-mix(in srgb, var(--fdc-color-danger) 32%, transparent);
    background: var(--fdc-color-danger-soft);
    color: var(--fdc-color-danger);
}

.fdc-status-info {
    border-color: color-mix(in srgb, var(--fdc-color-info) 32%, transparent);
    background: var(--fdc-color-info-soft);
    color: var(--fdc-color-info);
}

.fdc-state {
    display: grid;
    justify-items: start;
    gap: var(--fdc-space-3);
    padding: var(--fdc-space-6);
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-lg);
    background: var(--fdc-color-surface);
}

.fdc-state-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--fdc-radius-md);
    background: var(--fdc-color-background-secondary);
    color: var(--fdc-color-text-secondary);
}

.fdc-state-copy {
    display: grid;
    gap: var(--fdc-space-1);
}

.fdc-state h3 {
    margin: 0;
    color: var(--fdc-color-text);
    font-size: 1rem;
}

.fdc-state p {
    max-width: 58ch;
    margin: 0;
    color: var(--fdc-color-text-secondary);
}

.fdc-skeleton {
    overflow: hidden;
    border-radius: var(--fdc-radius-sm);
    background: var(--fdc-color-background-secondary);
}

.fdc-skeleton::after {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fdc-color-surface) 72%, transparent), transparent);
    animation: fdc-skeleton-sweep 1.35s ease-in-out infinite;
}

.fdc-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fdc-space-2);
    padding: var(--fdc-space-3);
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-lg);
    background: color-mix(in srgb, var(--fdc-color-surface) 92%, transparent);
    box-shadow: var(--fdc-shadow-md);
    backdrop-filter: blur(14px);
}

.fdc-section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--fdc-space-4);
}

.fdc-section-header-copy {
    display: grid;
    gap: var(--fdc-space-1);
}

.fdc-section-header h2,
.fdc-section-header p {
    margin: 0;
}

.fdc-section-header h2 {
    color: var(--fdc-color-text);
    font-size: 1.125rem;
    letter-spacing: -0.012em;
}

.fdc-section-header p {
    color: var(--fdc-color-text-secondary);
    font-size: 0.875rem;
}

.fdc-eyebrow {
    color: var(--fdc-color-accent);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fdc-section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--fdc-space-2);
}

body.fdc-dialog-open {
    overflow: hidden;
}

/* Keep the approved record-workspace shell, with native dialog top-layer behavior. */
dialog.command-overlay {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: var(--fdc-color-text);
}

dialog.command-overlay:not([open]) {
    display: none;
}

dialog.command-overlay::backdrop {
    background: transparent;
}

[data-workspace-panel]:focus {
    outline: none;
}

.fdc-dialog {
    width: min(36rem, calc(100vw - 2rem));
    max-height: min(46rem, calc(100dvh - 2rem));
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 1px solid var(--fdc-color-border);
    border-radius: var(--fdc-radius-xl);
    background: var(--fdc-color-surface-elevated);
    color: var(--fdc-color-text);
    box-shadow: var(--fdc-shadow-lg);
}

.fdc-dialog::backdrop {
    background: rgba(7, 19, 33, 0.55);
    backdrop-filter: blur(4px);
}

.fdc-dialog[open] {
    animation: fdc-dialog-in var(--fdc-motion-standard) var(--fdc-ease-standard);
}

.fdc-dialog-panel {
    max-height: inherit;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.fdc-dialog-header,
.fdc-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fdc-space-4);
    padding: var(--fdc-space-5);
}

.fdc-dialog-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--fdc-color-border);
}

.fdc-dialog-header h2,
.fdc-dialog-header p {
    margin: 0;
}

.fdc-dialog-header h2 {
    font-size: 1.125rem;
}

.fdc-dialog-header p {
    margin-top: var(--fdc-space-1);
    color: var(--fdc-color-text-secondary);
    font-size: 0.875rem;
}

.fdc-dialog-body {
    overflow: auto;
    padding: var(--fdc-space-5);
}

.fdc-dialog-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--fdc-color-border);
}

@keyframes fdc-skeleton-sweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(270%); }
}

@keyframes fdc-loader-move {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

@keyframes fdc-loader-dash {
    0%, 100% { stroke-dasharray: 15 85; }
    50% { stroke-dasharray: 50 50; }
}

@keyframes fdc-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes fdc-dialog-in {
    from { opacity: 0; transform: translateY(0.6rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .fdc-page {
        gap: var(--fdc-space-5);
    }

    .fdc-page-heading {
        display: grid;
    }

    .fdc-action-bar {
        margin-inline: calc(var(--fdc-space-4) * -1);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }

    .fdc-action-bar .fdc-button-primary {
        flex: 1;
    }

    .fdc-section-header {
        align-items: stretch;
    }

    .fdc-dialog,
    .fdc-dialog-bottom {
        width: 100%;
        max-width: none;
        max-height: min(88dvh, 46rem);
        margin: auto 0 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--fdc-radius-xl) var(--fdc-radius-xl) 0 0;
    }

    .fdc-dialog[open],
    .fdc-dialog-bottom[open] {
        animation-name: fdc-sheet-in;
    }
}

@keyframes fdc-sheet-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fdc-card-interactive,
    .fdc-button,
    .fdc-field,
    .fdc-theme-switch,
    .fdc-theme-switch-thumb {
        transition-duration: 1ms;
    }

    .fdc-skeleton::after {
        animation: none;
    }

    .fdc-button-loader path,
    .fdc-form-field-pending .fdc-field-status,
    .fdc-dialog[open] {
        animation-duration: 1ms;
    }
}