.sf-app{--sf-ink:#142b37;--sf-accent:#14677a;--sf-line:#d6e1e5;--sf-bg:#f4f8f9;color:var(--sf-ink);font:inherit;max-width:1100px;margin:1.5em auto;padding:clamp(18px,3vw,36px);border:1px solid var(--sf-line);border-radius:14px;background:#fff;box-sizing:border-box}.sf-app *{box-sizing:border-box}.sf-app h2{margin:0 0 .35em;font-size:clamp(1.5rem,2.5vw,2rem)}.sf-intro{margin:0 0 1.4rem}.sf-drop{padding:28px 16px;text-align:center;border:2px dashed #93b5c0;border-radius:12px;background:var(--sf-bg);cursor:pointer}.sf-drop.is-over{background:#dceff2;border-color:var(--sf-accent)}.sf-drop strong,.sf-drop span{display:block}.sf-pickers{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.sf-button,.sf-app button{font:inherit;cursor:pointer}.sf-button{display:inline-block;padding:10px 16px;border:1px solid var(--sf-accent);border-radius:7px;background:var(--sf-accent);color:#fff!important;font-weight:600;line-height:1.3}.sf-button-secondary{background:#fff;color:var(--sf-accent)!important}.sf-button:focus-within,.sf-app button:focus-visible,.sf-drop:focus-visible{outline:3px solid #e9a73a;outline-offset:2px}.sf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 10px;flex-wrap:wrap}.sf-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.sf-app button:not(.sf-create){padding:7px 10px;border:1px solid var(--sf-line);background:#fff;color:var(--sf-ink);border-radius:6px}.sf-list{display:grid;gap:10px}.sf-item{display:grid;grid-template-columns:75px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--sf-line);border-radius:8px}.sf-item img{width:75px;height:75px;object-fit:contain;background:#edf2f3}.sf-item label{display:block;min-width:0}.sf-filename{display:block;overflow-wrap:anywhere;font-size:.86em;color:#51636a}.sf-item input,.sf-grid input:not([type=checkbox]),.sf-grid select{display:block;width:100%;padding:9px;border:1px solid #aebfc5;border-radius:6px;background:#fff;color:var(--sf-ink);font:inherit}.sf-controls{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.sf-controls button{min-width:34px}.sf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.sf-grid fieldset{border:1px solid var(--sf-line);border-radius:8px;padding:16px;min-width:0}.sf-grid legend{font-weight:700;padding:0 5px}.sf-grid label{display:block;margin:0 0 12px}.sf-grid .sf-checkbox{display:flex;align-items:center;gap:8px}.sf-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0}.sf-app button:disabled{opacity:.55;cursor:wait}.sf-app [data-role=status].is-error{color:#a22723}.sf-note{font-size:.87em;line-height:1.5;color:#51636a}.sf-app select{max-width:none}@media(max-width:720px){.sf-grid{grid-template-columns:1fr}.sf-item{grid-template-columns:60px minmax(0,1fr)}.sf-item img{width:60px;height:60px}.sf-controls{grid-column:2;justify-content:flex-start}}
.sf-preview{margin-top:22px;padding:16px;border:1px solid var(--sf-line);border-radius:9px;background:var(--sf-bg)}.sf-preview[hidden]{display:none!important}.sf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.sf-preview iframe{display:block;width:100%;height:min(75vh,850px);min-height:420px;border:1px solid var(--sf-line);background:#fff}.sf-preview p{margin:.8rem 0 0;font-size:.9em;color:#51636a}.sf-actions .sf-button-secondary{color:var(--sf-accent)!important;background:#fff}.sf-actions .sf-button-secondary:disabled{color:#56717a!important}.sf-grid input[type=number]{max-width:130px}
.sf-app .sf-pickers button.sf-button{padding:10px 16px;background:var(--sf-accent);color:#fff!important;border-color:var(--sf-accent);font-weight:600}
.sf-app .sf-pickers button.sf-button-secondary{background:#fff;color:var(--sf-accent)!important}
.sf-picker-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;opacity:0;clip-path:inset(50%);overflow:hidden;pointer-events:none}