.sf-editor, .sf-index, .sf-public-body { --sf-accent:#25645a; --sf-ink:#18332e; --sf-muted:#687a75; --sf-border:#dbe3df; --sf-soft:#f5f7f4; color:var(--sf-ink); font-family:"Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; line-height:1.5 }
.sf-editor *, .sf-index *, .sf-public-body * { box-sizing:border-box }
.sf-editor [hidden], .sf-index [hidden], .sf-public-body [hidden], .sf-page-hidden { display:none!important }
.sf-editor button, .sf-index button, .sf-public-body button, .sf-editor input, .sf-editor select, .sf-editor textarea, .sf-public-body input, .sf-public-body select, .sf-public-body textarea { font:inherit }
.sf-editor button, .sf-index button, .sf-public-body button { cursor:pointer }
.sf-editor button:disabled, .sf-public-body button:disabled { cursor:default; opacity:.5 }
.sf-editor :focus-visible, .sf-index :focus-visible, .sf-public-body :focus-visible { outline:3px solid #78bcb0; outline-offset:3px }
.sf-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid var(--sf-accent); border-radius:6px; color:white; background:var(--sf-accent); padding:10px 17px; text-decoration:none; font-weight:600; font-size:14px; line-height:1.4; white-space:nowrap }
.sf-button:hover { filter:brightness(.96) }
.sf-button.sf-secondary { background:white; color:var(--sf-ink); border-color:var(--sf-border) }
.sf-text-button { border:0; background:none; padding:5px 3px; color:var(--sf-accent); font-size:13px; text-decoration:none }
.sf-text-button:hover { text-decoration:underline }
.sf-danger { color:#ad3232 }
.sf-back { color:var(--sf-muted); text-decoration:none; font-size:13px }
.sf-back:hover { color:var(--sf-accent) }
.sf-eyebrow { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--sf-muted) }
.sf-index { max-width:1120px; margin:38px auto; padding:0 28px 70px }
.sf-index h1 { font-size:32px; letter-spacing:-.035em; margin:6px 0 }
.sf-index-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:30px 0 }
.sf-index-heading p, .sf-index p { color:var(--sf-muted); margin:6px 0 }
.sf-index form { margin:0 }
.sf-empty { padding:70px 24px; text-align:center; background:white; border:1px dashed #bbcec3; border-radius:10px }
.sf-empty .sf-button { margin-top:20px }
.sf-empty-icon { display:block; font-size:40px; color:var(--sf-accent) }
.sf-form-list { display:grid; gap:14px }
.sf-list-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; background:white; border:1px solid var(--sf-border); border-radius:8px }
.sf-list-card h2 { margin:5px 0; font-size:20px }
.sf-list-card h2 a { color:inherit; text-decoration:none }
.sf-list-actions { display:flex; flex-wrap:wrap; gap:18px; align-items:center }
.sf-editor { padding:22px 24px 40px; max-width:1800px; margin:auto }
.app-content-body:has(> .sf-editor), .app-content-body:has(> .sf-index) { overflow-y:auto; scrollbar-gutter:stable }
.sf-editor-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-bottom:20px }
.sf-editor-header h1 { font-size:23px; line-height:1.2; letter-spacing:-.025em; margin:7px 0 4px }
.sf-save-state { color:var(--sf-muted); font-size:12px }
.sf-toolbar { display:flex; flex-wrap:wrap; gap:8px }
.sf-builder-layout { display:grid; grid-template-columns:222px minmax(300px,1fr) 300px; border:1px solid var(--sf-border); border-radius:10px; overflow:hidden; background:white; height:calc(100dvh - 220px); min-height:560px }
.sf-library { padding:22px 16px; background:#fbfcfa; overflow-y:auto; border-right:1px solid var(--sf-border) }
.sf-library h2 { font-size:14px; margin:0 0 5px }
.sf-library p { color:var(--sf-muted); font-size:12px; margin:0 0 20px }
.sf-library h3 { font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin:22px 0 10px; color:var(--sf-muted) }
.sf-library-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.sf-library-grid button { border:1px solid var(--sf-border); padding:11px 7px; background:white; border-radius:5px; color:var(--sf-ink); font-size:11px; min-height:43px; text-align:left; line-height:1.3; cursor:grab; touch-action:none; user-select:none }
.sf-library-grid button.is-dragging { opacity:.4 }
.sf-library-grid button span { display:block; font-size:16px; color:var(--sf-accent); margin-bottom:5px }
.sf-library-grid button:hover { border-color:var(--sf-accent); background:#eff7f2 }
.sf-library-note { border-top:1px solid var(--sf-border); padding-top:20px; margin-top:25px; font-size:12px }
.sf-library-note p { margin-top:8px }
.sf-canvas-wrap { background:#eef2ed; padding:0 25px 35px; overflow-y:auto; scrollbar-gutter:stable }
.sf-canvas-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 0; font-size:11px; color:var(--sf-muted); position:sticky; top:0; z-index:2; background:#eef2ed }
.sf-canvas-toolbar > div { display:flex; gap:12px }
.sf-canvas-toolbar button { font-size:11px }
.sf-canvas { background:white; border:1px solid var(--sf-border); border-top:4px solid var(--sf-accent); border-radius:7px; max-width:690px; margin:0 auto; padding:25px 20px 22px; box-shadow:0 4px 16px #203c2c06; transition:max-width .2s }
.sf-canvas.is-mobile { max-width:375px }
.sf-canvas-heading { background:transparent; text-align:left; border:1px solid transparent; border-radius:5px; width:100%; padding:12px; margin:0 0 15px; color:var(--sf-ink) }
.sf-canvas-heading.is-selected { border-color:#aac9bb; background:#f7faf7 }
.sf-canvas-heading h2 { font-size:27px; line-height:1.2; margin:8px 0 12px; letter-spacing:-.025em; overflow-wrap:anywhere }
.sf-canvas-heading p { font-size:13px; color:var(--sf-muted); white-space:pre-line }
.sf-element-list { min-height:30px }
.sf-element { border:1px solid var(--sf-border); border-radius:6px; padding:11px 14px 12px; margin-bottom:10px; background:white; scroll-margin:60px; position:relative; cursor:pointer; overflow-wrap:anywhere }
.sf-element:hover { border-color:#b7cabe }
.sf-element.is-selected { border-color:var(--sf-accent); box-shadow:0 0 0 1px var(--sf-accent) }
.sf-element-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:var(--sf-muted) }
.sf-element-top small { font-size:10px; text-transform:uppercase; letter-spacing:.06em }
.sf-drag-handle { background:none; border:none; padding:2px 4px; font-size:20px!important; line-height:1; color:#889b91; cursor:grab!important; touch-action:none }
.sf-element-actions { display:flex; margin-left:auto; gap:4px }
.sf-element-actions button { padding:0 5px; border:none; background:none; color:#75897e; font-size:16px; border-radius:2px }
.sf-element-actions button:hover { color:var(--sf-accent); background:#edf3ee }
.sf-element-label { font-size:14px; font-weight:600; margin:6px 0 10px }
.sf-required-marker { color:#af4343 }
.sf-mock-input { padding:9px 12px; border:1px solid var(--sf-border); border-radius:4px; color:#9aa9a0; font-size:12px; background:#fcfdfb }
.sf-mock-textarea { min-height:70px }
.sf-mock-file { text-align:center; padding:22px 8px; border-style:dashed }
.sf-preview-options { display:grid; gap:8px; font-size:13px; color:#52675c }
.sf-element-footer { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-top:10px; font-size:10px; color:var(--sf-muted) }
.sf-rule-badge { color:var(--sf-accent) }
.sf-child-elements { padding:10px 0 0 10px; border-left:2px solid #d6e6dc; margin-top:10px }
.sf-child-elements:empty { min-height:70px; display:grid; place-items:center; border:1px dashed var(--sf-border); padding:12px }
.sf-child-elements:empty::before { content:"Drop child fields here"; color:var(--sf-muted); font-size:12px }
.sf-child-element { background:#fafcf9 }
.sf-hidden-preview { font-family:monospace; padding:8px; background:#f2f1ea; color:#776f4c; font-size:12px }
.sf-content-label { font-size:11px; color:var(--sf-muted) }
.sf-canvas-submit { display:flex; align-items:center; gap:14px; border-top:1px solid var(--sf-border); padding-top:22px; margin:20px 10px 0 }
.sf-canvas-submit small { font-size:10px; color:var(--sf-muted) }
.sf-canvas-empty { padding:35px 15px; text-align:center; color:var(--sf-muted); border:1px dashed var(--sf-border) }
.sf-inspector { padding:22px; overflow-y:auto; border-left:1px solid var(--sf-border) }
.sf-inspector h2 { margin:6px 0 20px; font-size:19px; letter-spacing:-.02em }
.sf-inspector h3 { font-size:13px; margin:15px 0 }
.sf-inspector h4 { font-size:12px; margin:10px 0 }
.sf-inspector hr { border:0; border-top:1px solid var(--sf-border); margin:22px 0 }
.sf-setting { display:flex; flex-direction:column; gap:6px; margin:0 0 16px; font-size:12px }
.sf-setting > span { font-weight:600 }
.sf-setting input:not([type=checkbox]), .sf-setting textarea, .sf-setting select { width:100%; padding:9px 10px; border:1px solid #d0dbd3; border-radius:4px; background:white; color:var(--sf-ink); font-size:12px }
.sf-setting input[type=color] { height:38px; padding:3px; cursor:pointer }
.sf-setting small, .sf-help { font-size:12px; color:var(--sf-muted); font-weight:400; overflow-wrap:anywhere }
.sf-toggle { flex-direction:row; align-items:flex-start; gap:10px; margin:17px 0 }
.sf-toggle input { width:16px; height:16px; margin:2px 0; accent-color:var(--sf-accent) }
.sf-toggle small { display:block; margin-top:4px }
.sf-rule-condition { background:var(--sf-soft); border:1px solid var(--sf-border); border-radius:5px; padding:12px; margin:10px 0 }
.sf-rule-condition .sf-setting { margin-bottom:10px }
.sf-inspector-actions { display:flex; align-items:center; gap:14px }
.sf-share-panel { position:fixed; inset:auto; display:block; width:min(420px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; margin:0; background:white; border:1px solid var(--sf-border); border-radius:9px; padding:20px; color:var(--sf-ink); box-shadow:0 12px 40px #18332e26,0 2px 8px #18332e0d }
.sf-share-panel:not(:popover-open) { display:none }
.sf-share-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:7px }
.sf-share-panel h2 { font-size:18px; margin:0; letter-spacing:-.02em }
.sf-share-close { border:0; border-radius:4px; background:transparent; color:var(--sf-muted); font-size:22px!important; line-height:1; padding:4px 7px }
.sf-share-close:hover { background:var(--sf-soft); color:var(--sf-ink) }
.sf-share-panel p { color:var(--sf-muted); font-size:12px; margin:6px 0; white-space:normal; overflow-wrap:anywhere }
.sf-share-panel .sf-eyebrow { font-size:9px; letter-spacing:.08em }
.sf-share-panel [data-share-draft] { margin-top:16px }
.sf-share-controls { margin-top:16px; min-width:0 }
.sf-share-controls > label { display:block; font-size:12px; font-weight:600; margin-bottom:6px }
.sf-share-link-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.sf-share-link-row input { flex:1; width:100%; min-width:170px; padding:10px 12px; border:1px solid #b8cdc0; border-radius:5px; background:white; color:var(--sf-ink); font:inherit; font-size:13px; cursor:text }
.sf-share-meta { margin-top:7px }
.sf-share-feedback { font-size:11px; color:var(--sf-accent) }
.sf-share-footer { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-top:1px solid var(--sf-border); margin-top:12px; padding-top:10px }
.sf-share-footer > a { white-space:nowrap; font-size:12px }
.sf-share-options { margin-left:auto; font-size:11px; color:var(--sf-muted) }
.sf-share-options summary { cursor:pointer }
.sf-share-options > div { max-width:220px; padding-top:8px }
.sf-share-options .sf-text-button { display:block }
.sf-share-controls small { display:block; font-size:11px; color:var(--sf-muted); margin-top:8px }
.sf-builder-alert, .sf-error-summary { padding:14px 18px; border:1px solid #e4b9ac; background:#fff3ed; color:#8d3021; border-radius:5px; margin-bottom:18px; font-size:13px; overflow-wrap:anywhere }
.sf-invalid-mapping { color:#a53e2e!important }
.sf-preview-dialog { border:1px solid var(--sf-border); border-radius:10px; padding:0; width:min(1000px, 94vw); height:90dvh; max-height:90dvh; color:var(--sf-ink); background:#eef2ed }
.sf-preview-dialog::backdrop { background:#162d2966 }
.sf-preview-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:white; padding:14px 20px; border-bottom:1px solid var(--sf-border) }
.sf-preview-toolbar > div { display:flex; gap:18px }
.sf-preview-dialog iframe { display:block; width:100%; height:calc(100% - 70px); border:none; margin:auto; transition:width .2s }
.sf-preview-dialog iframe.is-mobile { width:min(390px,100%) }
.sf-drag-preview { position:fixed; pointer-events:none; z-index:9999; overflow:hidden; opacity:.95; transform:rotate(1deg); box-shadow:0 10px 35px #18332e33; font-family:system-ui; font-size:14px }
.sf-drop-placeholder { border:2px dashed #8eb5a2; border-radius:6px; margin-bottom:10px; background:#e7f2e9; display:grid; place-items:center; color:var(--sf-accent); font-size:12px; pointer-events:none }
.sf-editor.is-dragging, .sf-editor.is-dragging * { cursor:grabbing!important; user-select:none }
.sf-library-drag-preview { width:190px; padding:14px 18px; color:var(--sf-ink); background:white }
.sf-library-drag-preview small { display:block; color:var(--sf-muted); font-size:10px; margin-bottom:5px }
.sf-library-drag-preview strong { display:block; font-size:14px }
.sf-drag-preview.is-invalid { opacity:.65 }
.sf-drop-invalid { outline:2px dashed #c76856; outline-offset:3px }
.sf-public-body { margin:0; background:#f0f3ee; min-height:100dvh; font-size:15px }
.sf-public-shell { max-width:750px; padding:52px 24px 24px; margin:0 auto }
.sf-public-card { background:white; border:1px solid var(--sf-border); border-top:5px solid var(--sf-accent); border-radius:9px; padding:40px 44px; box-shadow:0 8px 35px #1e3c2c05 }
.sf-form-heading { border-bottom:1px solid var(--sf-border); margin-bottom:30px; padding-bottom:20px }
.sf-form-heading h1 { font-size:34px; letter-spacing:-.04em; line-height:1.15; margin:14px 0 18px; font-weight:650; overflow-wrap:anywhere }
.sf-prose { font-size:14px; line-height:1.7; color:#53675d; white-space:pre-line; overflow-wrap:anywhere }
.sf-prose a { color:var(--sf-accent) }
.sf-prose p { margin:0 0 12px }
.sf-required-note { font-size:11px; color:var(--sf-muted); margin-top:24px }
.sf-required-note span { color:#af4343 }
.sf-field { margin-bottom:27px; scroll-margin:24px }
.sf-label, .sf-choice-fieldset > legend { display:block; font-weight:600; margin-bottom:9px; font-size:14px }
.sf-help { margin:4px 0 10px; line-height:1.5 }
.sf-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .sf-field select, .sf-field textarea { width:100%; padding:12px 13px; border:1px solid #cbd8ce; background:#fdfefc; border-radius:5px; color:var(--sf-ink); font-size:15px; line-height:1.4; min-height:46px }
.sf-field textarea { resize:vertical; min-height:105px }
.sf-field select[multiple] { min-height:135px; margin-top:8px }
.sf-field input::placeholder, .sf-field textarea::placeholder { color:#97a69b }
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus { border-color:var(--sf-accent) }
.sf-choice-fieldset { border:0; padding:0; margin:0; min-width:0 }
.sf-options { display:grid; gap:9px }
.sf-option { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border:1px solid var(--sf-border); border-radius:5px; cursor:pointer; font-size:14px; line-height:1.4 }
.sf-option:has(input:checked) { background:#f0f7f1; border-color:#88ae99 }
.sf-option input { width:17px; height:17px; margin:1px 0 0; flex-shrink:0; accent-color:var(--sf-accent) }
.sf-field-error { color:#a43e2d; font-size:12px; margin:8px 0 0 }
.sf-field [aria-invalid=true] { border-color:#bb5141!important }
.sf-field h2 { font-size:22px; margin:10px 0 12px; letter-spacing:-.025em }
.sf-field hr { border:0; border-top:1px solid var(--sf-border); margin:32px 0 }
.sf-file-zone { border:1px dashed #b4ccbc; border-radius:5px; padding:20px; background:#f8fbf7 }
.sf-file-zone input { width:100%; font-size:13px }
.sf-file-zone.is-dragging { border-color:var(--sf-accent); background:#eaf4ec }
.sf-file-zone input::file-selector-button { background:white; border:1px solid #cbd8ce; border-radius:4px; padding:8px 12px; margin:0 12px 10px 0; color:var(--sf-ink); cursor:pointer }
.sf-file-zone small { display:block; font-size:11px; color:var(--sf-muted) }
.sf-repeat { border:1px solid #c8d9cd; border-radius:6px; padding:20px; margin:0; min-width:0 }
.sf-repeat > legend { padding:0 7px; font-size:18px; font-weight:600 }
.sf-repeat-entry { background:#f7faf6; border:1px solid var(--sf-border); border-radius:5px; padding:18px; margin:0 0 16px }
.sf-entry-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; color:var(--sf-muted); font-size:12px }
.sf-repeat-entry .sf-field:last-child { margin-bottom:0 }
.sf-form-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding-top:10px }
.sf-form-navigation .sf-progress { margin-right:auto; font-size:11px; color:var(--sf-muted) }
.sf-form-navigation .sf-button:last-child { margin-left:auto }
.sf-upload-note { font-size:12px; color:var(--sf-muted); min-height:18px; margin:14px 0 0 }
.sf-public-footer { padding:10px 24px 35px; text-align:center; color:#84928a; font-size:11px }
.sf-public-footer span { font-weight:700; color:#536b5d }
.sf-preview-notice { text-align:center; padding:10px; color:var(--sf-accent); border:1px solid #bed4c2; border-radius:5px; margin-bottom:15px; font-size:12px; background:#e7f2e7 }
.sf-honeypot { position:absolute; left:-10000px; height:1px; width:1px; overflow:hidden }
.sf-success { text-align:center; padding:35px 0 }
.sf-success-mark { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:28px; color:var(--sf-accent); background:#e9f2e8; margin:0 auto 20px }
.sf-success h2 { font-size:27px; margin:12px 0 }
.sf-success p { color:var(--sf-muted); white-space:pre-line }
.sf-message-card { padding-top:55px; padding-bottom:55px }
.sf-message-card h1 { font-size:28px; letter-spacing:-.03em }
.sf-message-card p { color:var(--sf-muted) }
@media(min-width:1600px) { .sf-builder-layout { grid-template-columns:250px minmax(300px,1fr) 330px } }
@media(max-width:1100px) { .sf-editor { padding:18px 12px }.sf-builder-layout { grid-template-columns:175px minmax(270px,1fr) 260px }.sf-canvas-wrap { padding:0 12px 25px }.sf-library { padding:18px 10px }.sf-inspector { padding:18px 14px }.sf-toolbar .sf-button { padding:8px 10px } }
@media(max-width:820px) { .sf-builder-layout { grid-template-columns:160px minmax(0,1fr); height:auto; overflow:visible }.sf-inspector { grid-column:1/-1; border-top:1px solid var(--sf-border); border-left:0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; max-height:none }.sf-inspector h2,.sf-inspector h3,.sf-inspector h4,.sf-inspector > hr,.sf-inspector > .sf-eyebrow,.sf-rule-editor,.sf-inspector-actions { grid-column:1/-1 }.sf-library { max-height:650px }.sf-canvas-wrap { max-height:750px }.sf-share-controls { max-width:100% } }
@media(max-width:520px) { .sf-public-shell { padding:16px 12px }.sf-public-card { padding:28px 22px }.sf-form-heading h1 { font-size:29px }.sf-repeat { padding:14px }.sf-repeat-entry { padding:13px }.sf-index { padding:0 16px }.sf-index-heading,.sf-list-card { align-items:flex-start; flex-direction:column }.sf-index h1 { font-size:27px }.sf-builder-layout { grid-template-columns:1fr }.sf-library { max-height:none; border-right:0; border-bottom:1px solid var(--sf-border); padding:14px }.sf-library-grid { grid-template-columns:repeat(3,1fr) }.sf-library-grid button span { display:inline; margin-right:5px;font-size:12px }.sf-library h3 { margin:12px 0 8px }.sf-library > p,.sf-library-note { display:none }.sf-canvas-wrap { max-height:640px }.sf-canvas { padding:14px 10px }.sf-canvas-heading h2 { font-size:24px }.sf-inspector { display:block }.sf-canvas-submit { flex-wrap:wrap }.sf-toolbar { gap:5px }.sf-editor-header .sf-toolbar .sf-button { font-size:11px }.sf-share-controls { min-width:0;width:100% } }