:root {
--tyaf-label: #8a94a6;
--tyaf-text: #3d4b64;
--tyaf-muted: #a6adbb;
--tyaf-field-bg: #ffffff;
--tyaf-field-border: #e6eaf0;
--tyaf-field-border-hover: #d5dbe5;
--tyaf-accent: #f97316;
--tyaf-accent-dark: #ea580c;
--tyaf-accent-ring: rgba(249, 115, 22, 0.13);
--tyaf-accent-soft: #fff7ed;
--tyaf-surface: #ffffff;
--tyaf-hairline: #eef1f6;
--tyaf-radius-field: 0.5rem;
--tyaf-radius-card: 0.75rem;
--tyaf-shadow-card: 0 1px 3px rgba(64, 79, 104, 0.06), 0 6px 20px rgba(64, 79, 104, 0.05);
}
.dark {
--tyaf-label: #8b93a5;
--tyaf-text: #e8eaef;
--tyaf-muted: #7c8394;
--tyaf-field-bg: #1e1e21;
--tyaf-field-border: rgba(255, 255, 255, 0.09);
--tyaf-field-border-hover: rgba(255, 255, 255, 0.17);
--tyaf-accent-soft: rgba(249, 115, 22, 0.09);
--tyaf-surface: #202023;
--tyaf-hairline: rgba(255, 255, 255, 0.07);
--tyaf-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.fi-fo-field-wrp-label,
.fi-modal-content .fi-fo-field-wrp-label {
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.075em !important;
color: var(--tyaf-label) !important;
margin-block-end: 0.5rem !important;
line-height: 1.4 !important;
}
.fi-fo-field-wrp-label sup,
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-required-mark {
color: var(--tyaf-accent) !important;
opacity: .9 !important;
}
.fi-fo-checkbox-label,
.fi-fo-radio-label,
.fi-fo-toggle-label {
text-transform: none !important;
letter-spacing: normal !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--tyaf-text) !important;
}
.fi-input-wrp,
.fi-modal-content .fi-input-wrp,
.fi-simple-main .fi-input-wrp {
background-color: var(--tyaf-field-bg) !important;
border: 1px solid var(--tyaf-field-border) !important;
border-radius: var(--tyaf-radius-field) !important;
box-shadow: none !important;
transition: border-color .16s ease, box-shadow .16s ease !important;
--tw-ring-color: transparent !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
}
.fi-input-wrp:hover,
.fi-modal-content .fi-input-wrp:hover {
border-color: var(--tyaf-field-border-hover) !important;
}
.fi-input-wrp:focus-within,
.fi-modal-content .fi-input-wrp:focus-within,
.fi-simple-main .fi-input-wrp:focus-within {
border-color: var(--tyaf-accent) !important;
box-shadow: 0 0 0 3px var(--tyaf-accent-ring) !important;
}
.fi-input,
select.fi-select-input,
.fi-modal-content .fi-input,
.fi-modal-content select.fi-select-input,
.fi-simple-main .fi-input {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--tyaf-text) !important;
font-size: 13px !important;
padding-block: 0.62rem !important;
}
.fi-input::placeholder,
.fi-modal-content .fi-input::placeholder {
color: #c3c9d4 !important;
}
.dark .fi-input::placeholder { color: #6b7280 !important; }
.fi-select-input,
.choices__inner,
.fi-input-wrp-prefix,
.fi-input-wrp-suffix,
.fi-input-wrp-actions,
.fi-modal-content .fi-select-input,
.fi-modal-content .choices__inner,
.fi-modal-content .fi-input-wrp-prefix,
.fi-modal-content .fi-input-wrp-suffix {
background-color: transparent !important;
border: none !important;
border-radius: var(--tyaf-radius-field) !important;
box-shadow: none !important;
}
.fi-input-wrp-prefix-icon,
.fi-input-wrp .fi-icon {
color: #bcc3cf !important;
}
.fi-input-wrp:focus-within .fi-input-wrp-prefix-icon {
color: var(--tyaf-accent) !important;
}
.fi-input-wrp:has(.fi-input:disabled),
.fi-input-wrp:has(select:disabled) {
background-color: #fafbfc !important;
border-color: var(--tyaf-hairline) !important;
}
.dark .fi-input-wrp:has(.fi-input:disabled) { background-color: rgba(255,255,255,.03) !important; }
.fi-fo-field-wrp-helper-text,
.fi-modal-content .fi-fo-field-wrp-helper-text {
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--tyaf-muted) !important;
margin-block-start: 0.4rem !important;
}
.fi-fo-field-wrp-error-message {
font-size: 11px !important;
font-weight: 500 !important;
margin-block-start: 0.4rem !important;
}
.fi-fo-component-ctn,
.fi-schema-component-ctn,
.fi-modal-content .fi-fo-component-ctn,
.fi-modal-content .fi-schema-component-ctn {
gap: 1.35rem !important;
}
.fi-section {
background-color: var(--tyaf-surface) !important;
border: 1px solid transparent !important;
border-radius: var(--tyaf-radius-card) !important;
box-shadow: var(--tyaf-shadow-card) !important;
padding: 1.5rem 1.6rem !important;
}
.fi-section-header {
padding: 0 0 1rem 0 !important;
margin-block-end: 1.35rem !important;
border-bottom: 1px solid var(--tyaf-hairline) !important;
}
.fi-section-header-heading {
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.075em !important;
color: var(--tyaf-label) !important;
}
.fi-section-header-description {
font-size: 11.5px !important;
text-transform: none !important;
letter-spacing: normal !important;
color: var(--tyaf-muted) !important;
margin-block-start: 0.3rem !important;
line-height: 1.55 !important;
}
.fi-section-content-ctn { gap: 1.35rem !important; }
.fi-modal-content .fi-section {
box-shadow: none !important;
background-color: transparent !important;
border-color: var(--tyaf-hairline) !important;
padding: 1.15rem 1.2rem !important;
}
.fi-modal-window {
border-radius: 0.9rem !important;
border: 1px solid var(--tyaf-hairline) !important;
box-shadow: 0 24px 64px rgba(64, 79, 104, 0.16), 0 4px 12px rgba(64, 79, 104, 0.06) !important;
overflow: hidden !important;
}
.fi-modal-header {
padding: 1.3rem 1.5rem 1.05rem !important;
border-bottom: 1px solid var(--tyaf-hairline) !important;
}
.fi-modal-heading {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -0.008em !important;
color: var(--tyaf-text) !important;
}
.fi-modal-description {
font-size: 11.5px !important;
color: var(--tyaf-muted) !important;
line-height: 1.55 !important;
margin-block-start: 0.3rem !important;
}
.fi-modal-content { padding: 1.5rem !important; }
.fi-modal-footer {
padding: 1.05rem 1.5rem !important;
border-top: 1px solid var(--tyaf-hairline) !important;
background-color: #fbfcfd !important;
}
.dark .fi-modal-footer { background-color: rgba(255,255,255,.02) !important; }
.fi-modal-footer .fi-btn,
.fi-form-actions .fi-btn,
.fi-fo-actions .fi-btn {
border-radius: 0.45rem !important;
font-weight: 600 !important;
font-size: 12.5px !important;
padding-block: 0.6rem !important;
transition: filter .15s ease, background-color .15s ease, border-color .15s ease !important;
}
.fi-modal-footer .fi-btn.fi-color-gray:not(.fi-link),
.fi-form-actions .fi-btn.fi-color-gray:not(.fi-link) {
background-color: var(--tyaf-surface) !important;
border: 1px solid var(--tyaf-field-border) !important;
color: #6b7688 !important;
box-shadow: none !important;
}
.fi-modal-footer .fi-btn.fi-color-gray:not(.fi-link):hover,
.fi-form-actions .fi-btn.fi-color-gray:not(.fi-link):hover {
background-color: #fafbfc !important;
border-color: var(--tyaf-field-border-hover) !important;
}
.dark .fi-modal-footer .fi-btn.fi-color-gray:not(.fi-link) { color: #b8bec9 !important; }
.fi-fo-checkbox input,
.fi-checkbox-input,
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--tyaf-accent) !important;
}
.fi-fo-radio-label-description {
font-size: 11px !important;
color: var(--tyaf-muted) !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.choices__item--choice.is-highlighted { background-color: #f7f8fb !important; }
.dark .choices__item--choice.is-highlighted { background-color: rgba(255,255,255,.05) !important; }
.fi-fo-file-upload .filepond--panel-root,
.fi-fo-file-upload .filepond--drop-label {
border-radius: 0.6rem !important;
border: 1.5px dashed var(--tyaf-field-border) !important;
background-color: #fcfdfe !important;
transition: border-color .16s ease, background-color .16s ease !important;
}
.fi-fo-file-upload:hover .filepond--panel-root {
border-color: var(--tyaf-accent) !important;
background-color: var(--tyaf-accent-soft) !important;
}
.dark .fi-fo-file-upload .filepond--panel-root { background-color: rgba(255,255,255,.02) !important; }
.fi-fo-repeater-item {
border-radius: var(--tyaf-radius-card) !important;
border: 1px solid var(--tyaf-hairline) !important;
box-shadow: none !important;
}
.fi-sc-wizard-header,
.fi-fo-wizard-header {
border-bottom: 1px solid var(--tyaf-hairline) !important;
padding-block-end: 1.15rem !important;
margin-block-end: 1.4rem !important;
}
.fi-sc-wizard-header-step-label,
.fi-fo-wizard-header-step-label {
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.fi-sc-wizard-header-step-icon-ctn,
.fi-fo-wizard-header-step-icon-ctn {
border-radius: 999px !important;
box-shadow: none !important;
}
@media (max-width: 639px) {
.fi-input,
select.fi-select-input,
.fi-modal-content .fi-input,
.fi-modal-content select.fi-select-input {
font-size: 16px !important;
padding-block: 0.58rem !important;
}
.fi-fo-component-ctn,
.fi-schema-component-ctn,
.fi-modal-content .fi-fo-component-ctn,
.fi-modal-content .fi-schema-component-ctn {
gap: 1rem !important;
}
.fi-section { padding: 1.15rem 1.1rem !important; }
.fi-section-header { padding-block-end: 0.85rem !important; margin-block-end: 1.1rem !important; }
.fi-section-content-ctn { gap: 1rem !important; }
.fi-modal-header { padding: 1.1rem 1.15rem 0.9rem !important; }
.fi-modal-content { padding: 1.15rem !important; }
.fi-modal-footer { padding: 0.9rem 1.15rem !important; }
.fi-modal-footer .fi-btn { min-height: 2.6rem !important; }
}