.form-export-model,
.form-export-options,
.form-export-result {
    padding: 12px 14px;
    border: 1px solid #dbe2ec;
    border-radius: 8px;
    background: #fff;
}

.form-export-model { border-color: #ef9dc7; background: #fff8fc; }
.form-export-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.form-export-section-heading h3, .form-export-section-heading p { margin: 0; }
.form-export-section-heading h3 { color: #202635; font-size: 13px; font-weight: 700; line-height: 1.3; }
.form-export-section-heading p { margin-top: 3px; color: #7c8798; font-size: 9px; line-height: 1.45; }
.form-export-section-heading > span, .form-export-section-heading div > span { flex: 0 0 auto; color: #75839a; font-size: 9px; font-weight: 700; }

.form-export-flow { display: grid; grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 15px minmax(0, 1fr); align-items: center; gap: 3px; margin-bottom: 10px; }
.form-export-flow > div { display: grid; justify-items: center; min-width: 0; gap: 2px; padding: 8px 3px; border: 1px solid #ecd4e1; border-radius: 6px; background: #fff; text-align: center; }
.form-export-flow strong { font-size: 8px; }.form-export-flow small { color: #8490a1; font-size: 7px; white-space: nowrap; }
.form-export-flow > i { position: relative; height: 1px; background: #d77aab; }.form-export-flow > i::after { position: absolute; top: -3px; right: -1px; border: 3px solid transparent; border-left-color: #d77aab; content: ""; }
.form-export-flow-icon { position: relative; width: 27px; height: 22px; border: 1px solid #8fa4bb; border-radius: 2px; background: #f2f6fb; }
.form-export-flow-icon--template::before { position: absolute; top: 5px; right: 4px; left: 4px; height: 3px; border-inline: 2px solid #ec168c; background: #8ea2b9; box-shadow: 0 6px #8ea2b9; content: ""; }
.form-export-flow-icon--server { width: 27px; height: 18px; margin-block: 2px; border-radius: 4px; }.form-export-flow-icon--server::before { position: absolute; top: 4px; right: 4px; left: 4px; height: 2px; background: #8ea2b9; box-shadow: 0 5px #8ea2b9; content: ""; }.form-export-flow-icon--server::after { position: absolute; top: 4px; right: 4px; width: 3px; height: 3px; border-radius: 50%; background: #ec168c; box-shadow: 0 5px #ec168c; content: ""; }
.form-export-flow-icon--pdf { display: grid; place-items: center; border: 0; background: #ec168c; color: #fff; font-size: 7px; font-weight: 800; }

.form-export-field-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 9px; border: 1px solid #e0e6ef; border-radius: 6px; background: #e0e6ef; }
.form-export-field-summary span { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 6px 2px; background: #fff; color: #78869a; font-size: 7px; text-align: center; }.form-export-field-summary strong { color: #172439; font-size: 11px; }
.form-export-field-list { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 3px; }.form-export-field-list > p { margin: 0; color: #7b889b; font-size: 9px; }
.form-export-field-item { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #e1e7ef; border-radius: 6px; background: #fff; color: #18263a; text-align: left; }
.form-export-field-item:hover, .form-export-field-item:focus-visible { border-color: #ec168c; background: #fff4fa; outline: 0; }
.form-export-field-item > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }.form-export-field-item strong, .form-export-field-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.form-export-field-item strong { font-size: 9px; }.form-export-field-item small { color: #78869a; font-size: 8px; }.form-export-field-item > span:last-child { padding: 3px 5px; border-radius: 999px; background: #e9f2fc; color: #275a91; font-size: 7px; white-space: nowrap; }
.form-export-field-icon { position: relative; width: 25px; height: 18px; border: 1px solid #8ca1ba; border-radius: 3px; background: #f2f6fb; }.form-export-field-icon::before, .form-export-field-icon::after { position: absolute; content: ""; }
.form-export-field-icon--text::before { top: 5px; right: 4px; left: 4px; height: 2px; background: #7890ad; box-shadow: 0 4px #7890ad; }
.form-export-field-icon--dropdown::before, .form-export-field-icon--combo::before { top: 3px; right: 8px; bottom: 3px; left: 3px; border-bottom: 2px solid #7890ad; }.form-export-field-icon--dropdown::after, .form-export-field-icon--combo::after { top: 6px; right: 2px; border: 3px solid transparent; border-top-color: #ec168c; }.form-export-field-icon--combo { background: linear-gradient(90deg, #f2f6fb 0 68%, #e5eef8 68%); }
.form-export-field-icon--check { width: 18px; margin-inline: 3px; }.form-export-field-icon--check::before { width: 7px; height: 4px; top: 5px; left: 4px; border-bottom: 2px solid #ec168c; border-left: 2px solid #ec168c; transform: rotate(-45deg); }
.form-export-field-icon--date::before { top: 4px; right: 3px; bottom: 3px; left: 3px; background: repeating-linear-gradient(90deg, #91a4bb 0 3px, transparent 3px 5px); }.form-export-field-icon--date::after { top: 2px; right: 2px; left: 2px; height: 3px; background: #ec168c; }

.form-export-profile-picker { display: grid; gap: 6px; }
.form-export-profile-picker label { display: grid; grid-template-columns: 18px 31px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid #dde4ed; border-radius: 6px; background: #f9fbfd; cursor: pointer; }.form-export-profile-picker label:hover, .form-export-profile-picker label.is-active { border-color: #ec168c; background: #fff4fa; }
.form-export-profile-picker input { accent-color: #ec168c; }.form-export-profile-picker label > span:last-child { display: grid; gap: 2px; }.form-export-profile-picker strong { font-size: 9px; }.form-export-profile-picker small { color: #78869a; font-size: 8px; line-height: 1.35; }
.form-export-lock { position: relative; width: 21px; height: 16px; margin-top: 5px; border: 2px solid #8298b0; border-radius: 3px; }.form-export-lock::before { position: absolute; top: -9px; left: 3px; width: 11px; height: 10px; border: 2px solid #8298b0; border-bottom: 0; border-radius: 8px 8px 0 0; content: ""; }.form-export-lock--open::before { left: 8px; transform: rotate(28deg); transform-origin: bottom left; }
.form-export-permission-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }.form-export-permission-map span { padding: 5px 3px; border-radius: 5px; background: #f0f2f5; color: #9aa4b1; font-size: 7px; font-weight: 700; text-align: center; }.form-export-permission-map span.is-allowed { background: #e7f7ef; color: #21845e; }.form-export-options > .btn { margin-top: 11px; }

.form-export-result { min-height: 92px; overflow: hidden; }.form-export-result:not(.is-empty) { border-color: #74cba8; box-shadow: 0 10px 30px rgba(26, 40, 61, .08); }
.form-export-result-empty { display: flex; align-items: center; gap: 10px; min-height: 64px; }.form-export-result-empty div { display: grid; gap: 2px; }.form-export-result-empty strong { font-size: 11px; }.form-export-result-empty small { color: #77859a; font-size: 9px; }
.form-export-result-icon { display: grid; place-items: center; width: 42px; height: 48px; flex: 0 0 42px; border-radius: 4px; background: #ec168c; color: #fff; font-size: 9px; font-weight: 800; }
.form-export-section-heading--result { align-items: center; }.form-export-section-heading--result h3 { margin-top: 2px; font-size: 15px; }.form-export-ready-badge { padding: 4px 7px; border-radius: 999px; background: #e7f7ef; color: #21845e !important; font-size: 8px !important; }
.form-export-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #e0e6ef; border-radius: 6px; background: #e0e6ef; }.form-export-result-grid div { display: grid; min-width: 0; gap: 2px; padding: 8px 10px; background: #f9fbfd; }.form-export-result-grid span { color: #78869a; font-size: 9px; }.form-export-result-grid strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.form-export-result .btn { margin-top: 11px; }

@media (max-width: 620px) {
    .form-export-flow { grid-template-columns: 1fr; }.form-export-flow > i { width: 1px; height: 12px; margin: 0 auto; }.form-export-flow > i::after { top: auto; right: -2px; bottom: -2px; border-top-color: #d77aab; border-left-color: transparent; }
    .form-export-field-item { grid-template-columns: 29px minmax(0, 1fr); }.form-export-field-item > span:last-child { display: none; }
    .form-export-result-grid { grid-template-columns: 1fr; }
}