:root {
    --forms-border: color-mix(in srgb, var(--form-field-border, #374151) 88%, transparent);
    --forms-surface: color-mix(in srgb, var(--elements-card-background, #111827) 94%, transparent);
    --forms-surface-soft: color-mix(in srgb, var(--elements-container-background, #0f172a) 86%, transparent);
    --forms-muted: color-mix(in srgb, var(--muted-text, #94a3b8) 92%, transparent);
    --forms-accent-soft: color-mix(in srgb, var(--accent, #22c55e) 18%, transparent);
}

.forms-runtime {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--forms-border);
    border-radius: calc(var(--elements-border-radius, 12px) + 6px);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent, #22c55e) 12%, transparent), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--elements-card-background, #111827) 96%, transparent), color-mix(in srgb, var(--elements-container-background, #0f172a) 92%, transparent));
    box-shadow: var(--elements-shadow, 0 18px 48px rgba(15, 23, 42, 0.22));
}

.forms-runtime--flat {
    background: transparent;
    box-shadow: none;
}

.forms-runtime--ghost {
    background: color-mix(in srgb, var(--elements-container-background, #0f172a) 52%, transparent);
    box-shadow: none;
}

.forms-runtime__hero,
.forms-runtime__step-head,
.forms-runtime__group-head,
.forms-runtime__workflow-head {
    display: grid;
    gap: 0.45rem;
}

.forms-runtime__eyebrow {
    margin: 0;
    color: var(--forms-muted);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.forms-runtime__title,
.forms-runtime__group-head h3,
.forms-runtime__step-head h2,
.forms-runtime__heading {
    margin: 0;
    line-height: 1.1;
}

.forms-runtime__lead,
.forms-runtime__intro,
.forms-runtime__muted {
    margin: 0;
    color: var(--forms-muted);
}

.forms-runtime__form {
    display: grid;
    gap: 1.25rem;
}

.forms-runtime__grid,
.forms-runtime__group-body,
.forms-runtime__columns,
.forms-runtime__compound,
.forms-runtime__detail-grid {
    display: grid;
    gap: 1rem;
}

.forms-runtime__columns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.forms-runtime__columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.forms-runtime__columns--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.forms-runtime__step-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.forms-runtime__step-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--forms-border);
    border-radius: calc(var(--form-field-radius, 10px) + 4px);
    background: color-mix(in srgb, var(--forms-surface-soft) 86%, transparent);
    color: var(--forms-muted);
}

.forms-runtime__step-nav-item.is-active {
    border-color: color-mix(in srgb, var(--accent, #22c55e) 58%, var(--forms-border));
    background: var(--forms-accent-soft);
    color: var(--text, #f9fafb);
}

.forms-runtime__step-number {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #22c55e) 22%, transparent);
    color: var(--text, #f9fafb);
    font-weight: 700;
}

.forms-runtime__field,
.forms-runtime__group,
.forms-runtime__decorator,
.forms-runtime__repeater-row,
.forms-runtime__detail-card {
    display: grid;
    gap: 0.7rem;
}

.forms-runtime__group,
.forms-runtime__repeater-row,
.forms-runtime__detail-card {
    padding: 1rem;
    border: 1px solid var(--forms-border);
    border-radius: calc(var(--form-field-radius, 10px) + 4px);
    background: color-mix(in srgb, var(--forms-surface) 92%, transparent);
}

.forms-runtime__field[hidden],
.forms-runtime__group[hidden],
.forms-runtime__decorator[hidden] {
    display: none !important;
}

.forms-runtime [hidden] {
    display: none !important;
}

.forms-runtime__field-head {
    display: grid;
    gap: 0.35rem;
}

.forms-runtime__label,
.forms-runtime__sub-label {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    font-weight: 600;
}

.forms-runtime__sub-label {
    font-size: 0.82rem;
}

.forms-runtime__required {
    color: #f87171;
}

.forms-runtime input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.forms-runtime textarea,
.forms-runtime select {
    inline-size: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--forms-border);
    border-radius: var(--form-field-radius, 10px);
    background: var(--form-field-background, #1f2937);
    color: var(--text, #f9fafb);
    font: inherit;
}

.forms-runtime textarea {
    min-block-size: 8rem;
    resize: vertical;
}

.forms-runtime input:focus,
.forms-runtime textarea:focus,
.forms-runtime select:focus,
.forms-runtime button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #22c55e) 72%, white);
    outline-offset: 2px;
}

.forms-runtime__choice-list,
.forms-runtime__toggle,
.forms-runtime__signature-actions,
.forms-runtime__footer,
.forms-runtime__footer-main,
.forms-runtime__group-head,
.forms-runtime__repeater-row-head {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.forms-runtime__choice {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--forms-border);
    border-radius: var(--form-field-radius, 10px);
    background: color-mix(in srgb, var(--forms-surface-soft) 86%, transparent);
}

.forms-runtime__toggle {
    justify-content: flex-start;
}

.forms-runtime__toggle input,
.forms-runtime__choice input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
}

.forms-runtime__rating-buttons {
    display: inline-flex;
    gap: 0.35rem;
}

.forms-runtime__rating-button {
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--muted-text, #94a3b8) 86%, transparent);
    font-size: 1.55rem;
    cursor: pointer;
}

.forms-runtime__rating-button.is-active {
    color: #fbbf24;
}

.forms-runtime__signature {
    display: grid;
    gap: 0.75rem;
}

.forms-runtime__signature-canvas {
    inline-size: 100%;
    block-size: auto;
    border: 1px dashed color-mix(in srgb, var(--accent, #22c55e) 42%, var(--forms-border));
    border-radius: var(--form-field-radius, 10px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
        repeating-linear-gradient(180deg, transparent, transparent 23px, rgba(148, 163, 184, 0.08) 24px);
    touch-action: none;
}

.forms-runtime__divider {
    inline-size: 100%;
    border: none;
    border-top: 1px solid var(--forms-border);
}

.forms-runtime__spacer--sm { block-size: 0.4rem; }
.forms-runtime__spacer--md { block-size: 0.8rem; }
.forms-runtime__spacer--lg { block-size: 1.25rem; }
.forms-runtime__spacer--xl { block-size: 2rem; }

.forms-runtime__banner {
    padding: 0.85rem 1rem;
    border-radius: var(--form-field-radius, 10px);
    border: 1px solid var(--forms-border);
}

.forms-runtime__banner--error {
    border-color: rgba(248, 113, 113, 0.38);
    background: rgba(127, 29, 29, 0.25);
    color: #fecaca;
}

.forms-runtime__banner--success {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(21, 128, 61, 0.22);
    color: #bbf7d0;
}

.forms-runtime__error {
    margin: 0;
    color: #fca5a5;
    font-size: 0.85rem;
}

.forms-runtime__honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}


.forms-runtime .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.82rem 1.1rem;
    border: 1px solid rgba(255,36,48,.62);
    border-radius: var(--button-radius, 999px);
    background: linear-gradient(135deg, var(--button-background, #E0020A), var(--button-hover-background, #FF2430));
    color: var(--button-text, #fff);
    font: inherit;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .055em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(224,2,10,.24);
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.forms-runtime .btn:hover,
.forms-runtime .btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.38);
    background: linear-gradient(135deg, var(--button-hover-background, #FF2430), #ff7a00);
    color: var(--button-hover-text, #160304);
}

.forms-runtime .btn.secondary {
    background: rgba(255,255,255,.055);
    color: var(--button-secondary-text, #fff);
    border-color: rgba(255,255,255,.22);
    box-shadow: none;
}

.forms-runtime .btn.secondary:hover,
.forms-runtime .btn.secondary:focus-visible {
    background: rgba(224,2,10,.18);
    color: #fff;
    border-color: rgba(255,36,48,.68);
}

.forms-runtime__file-item,
.forms-admin__file-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--forms-border);
    border-radius: var(--form-field-radius, 10px);
    text-decoration: none;
    color: inherit;
}

.forms-runtime__repeater-rows,
.forms-runtime__file-list,
.forms-admin__file-list,
.forms-admin__submission-list,
.forms-admin__timeline {
    display: grid;
    gap: 0.8rem;
}

.forms-runtime__rich-text > :first-child,
.forms-runtime__intro > :first-child {
    margin-top: 0;
}

.forms-runtime__rich-text > :last-child,
.forms-runtime__intro > :last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .forms-runtime__columns--2,
    .forms-runtime__columns--3,
    .forms-runtime__columns--4,
    .forms-runtime__compound {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .forms-runtime {
        padding: 1rem;
    }

    .forms-runtime__step-nav {
        grid-template-columns: 1fr;
    }

    .forms-runtime__footer,
    .forms-runtime__footer-main,
    .forms-runtime__choice-list {
        inline-size: 100%;
    }

    .forms-runtime__footer > *,
    .forms-runtime__footer-main > *,
    .forms-runtime__choice {
        inline-size: 100%;
    }
}