/* FILE-O Template Fill: quiet document-first UI, scoped to this tool. */
.tf-app{display:flex;flex-direction:column;gap:25px;min-width:0}
.tf-app[hidden],.tf-work[hidden],.tf-pdf-pick[hidden],.tf-result[hidden]{display:none!important}
.tf-upload{margin-bottom:0}
.tf-step{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.tf-step>span{width:36px;height:36px;background:#f0ecfb;border-radius:9px;display:grid;
 place-items:center;color:#6c57c2;font:800 12px ui-monospace,monospace;flex:none}
.tf-step h2,.tf-work h2{font-size:22px;letter-spacing:-.03em;color:#302642;margin:0 0 5px}
.tf-step p,.tf-work-head p{margin:0;color:#8a8192;font-size:12px;line-height:1.6}
.tf-drop{border:1.5px dashed #cfc2e8;background:#faf8ff;border-radius:13px;
 padding:28px 20px;display:flex;align-items:center;flex-direction:column;gap:9px;
 text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.tf-drop:hover,.tf-drop.dragging{background:#f3efff;border-color:#7a62cb}
.tf-drop-icon{font-size:10px;letter-spacing:.12em;font-weight:900;color:#6b51ca;
 background:#e9e2fb;border-radius:8px;padding:9px 11px}
.tf-drop strong{font-size:14px;color:#3d3252}
.tf-drop>span:last-of-type{font-size:10.5px;color:#9990a5;line-height:1.6}
.tf-drop input{max-width:100%;border:1px solid #ddd5e9;background:#fff;color:#665386;
 font:11px system-ui;border-radius:8px;padding:7px;margin-top:4px}
.tf-file-label{padding:10px 14px;background:#f2f9f5;border:1px solid #dcebe2;
 color:#4e8669;border-radius:9px;font:750 11px/1.6 system-ui;margin-top:12px}
.tf-profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0 8px}
.tf-profiles label{font-size:11px;color:#5b526b;font-weight:740;display:block;margin:0 0 7px}
.tf-profiles select,.tf-toolbar input,.tf-output-controls select,
.tf-manual input,.tf-pdf-page-select select{width:100%;border:1px solid #ddd4e7;border-radius:9px;
 padding:10px 11px;color:#382e48;background:#fff;font:12px system-ui;min-width:0}
.tf-muted{font-size:10px;color:#928a9c;line-height:1.6;margin:0 0 16px}
.tf-primary{min-height:45px}
.tf-eyebrow{display:block;color:#7b63ca;letter-spacing:.13em;font-weight:840;font-size:10px;margin-bottom:6px}
.tf-work-head,.tf-result-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;flex-wrap:wrap}
.tf-counter{background:#f2eefb;border:1px solid #e5def5;border-radius:99px;padding:8px 12px;
 color:#7759c6;font-size:11px;font-weight:770}
.tf-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.tf-search-label{font-size:11px;color:#625570;font-weight:760;display:flex;flex-direction:column;gap:5px;width:min(300px,100%)}
.tf-editor-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
 gap:18px;align-items:start}
.tf-fields-panel,.tf-document-panel{background:#fff;border:1px solid #e6dfeb;border-radius:14px;overflow:hidden}
.tf-fields-head{display:grid;grid-template-columns:40% 1fr;gap:12px;
 padding:15px 15px 12px;background:#faf9fb;border-bottom:1px solid #ebe7ed;
 font:840 9px/1.5 system-ui;color:#9e95a6;letter-spacing:.085em}
.tf-fields{max-height:570px;overflow-y:auto;overscroll-behavior:contain;padding:0 15px}
.tf-field{display:grid;grid-template-columns:40% 1fr;gap:12px;align-items:start;padding:14px 0;
 border-bottom:1px solid #efebf3}
.tf-field:last-child{border-bottom:0}
.tf-field-title{display:block;font-size:11.5px;line-height:1.5;color:#433849;font-weight:770}
.tf-field-context{display:block;margin-top:6px;font-size:10px;color:#91849b;line-height:1.6;overflow-wrap:anywhere}
.tf-field-input{width:100%;border:1px solid #ded6e9;border-radius:8px;padding:10px 11px;
 font:11px/1.5 system-ui;color:#382d48;background:#fff;min-width:0}
.tf-field-source{display:block;margin-top:5px;font-size:9px;color:#a095ab}
.tf-field-skip{display:flex;align-items:center;gap:5px;color:#9d8eaa;font-size:10px;margin-top:6px;cursor:pointer}
.tf-field-skip input{accent-color:#7a63d0}
.tf-document-panel{position:relative}
.tf-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:16px;background:#faf9fd;border-bottom:1px solid #ebe7f3}
.tf-preview-toolbar strong{font-size:12px;color:#453857}
.tf-preview-toolbar span{font-size:10px;color:#9d93a6;max-width:55%;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.tf-page-viewer[hidden],.tf-page-navigation[hidden],.tf-page-notice[hidden]{display:none!important}
.tf-page-viewer{padding:13px 16px 21px;background:#f5f3f7;text-align:center;overflow:auto}
.tf-page-viewer img{display:block;max-width:100%;height:auto;max-height:760px;
 margin:0 auto;background:#fff;box-shadow:0 6px 24px #2520371f;border:1px solid #e5e0e9}
.tf-page-navigation{display:flex;align-items:center;justify-content:center;gap:14px;
 padding:12px 14px;background:#fbfafc;border-bottom:1px solid #e9e2ee}
.tf-page-navigation .ut-secondary{min-width:72px;padding:7px 11px;font-size:11px}
.tf-page-navigation button:disabled{opacity:.38;cursor:default}
.tf-page-navigation span{font-size:11px;color:#655a71;font-weight:760;white-space:nowrap}
.tf-page-notice{font-size:11.5px;line-height:1.7;color:#776c80;
 margin:0;padding:18px 20px;background:#fbfafc}
.tf-manual{padding:20px 16px;background:#faf9fc;border-top:1px solid #e9e3ef}
.tf-manual h3{font-size:14px;margin:0 0 6px}
.tf-manual>p{font-size:10.5px;line-height:1.65;color:#8f8397;margin:0 0 14px}
.tf-manual-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:11px 0}
.tf-manual-row label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:730;color:#5e516c}
.tf-manual button{font-size:11px}
.tf-manual-entry{padding:9px 0;border-top:1px solid #e8e1f1;margin-top:9px;
 display:flex;justify-content:space-between;align-items:start;gap:8px;
 color:#645672;font-size:10.5px;line-height:1.5;overflow-wrap:anywhere}
.tf-manual-entry button{background:#fff;border:1px solid #ddd5eb;padding:5px 8px;border-radius:7px;color:#8e4780}
.tf-pdf-pick{margin:0;padding:13px 15px;border-top:1px solid #eee8f5}
.tf-pdf-page-select{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 color:#8d8399;font-size:10px;margin-bottom:9px}
.tf-pdf-page-select label{display:flex;align-items:center;gap:7px;font-weight:740;color:#695d78}
.tf-pdf-page-select select{width:74px}
.tf-pdf-stage{position:relative;cursor:crosshair;border:1px solid #eee8f2;
 border-radius:5px;overflow:hidden;background:#fff;width:fit-content;max-width:100%}
.tf-pdf-stage img{display:block;width:100%;height:auto;max-width:420px}
.tf-position-pin{position:absolute;width:12px;height:12px;border:2px solid #fff;
 border-radius:50%;background:#d04979;box-shadow:0 1px 8px #5a314e60;pointer-events:none}
.tf-output-controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
 padding:16px;background:#faf9fd;border-top:1px solid #ebe7f3}
.tf-output-controls>label{font-size:11px;color:#615469;font-weight:740;display:flex;flex-direction:column;gap:5px;min-width:0}
.tf-output-controls>label:first-child{flex:1 1 210px}
.tf-output-controls select{width:100%;min-width:0}
.tf-output-controls .tf-save{display:flex;flex:0 1 auto;flex-direction:row;align-items:center;
 gap:7px;margin:0 0 9px;font-weight:540;line-height:1.5;cursor:pointer}
.tf-output-controls .tf-save[hidden]{display:none!important}
.tf-output-controls input{accent-color:#7057cd;flex:none;margin:0}
.tf-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tf-actions button{min-height:44px}
.tf-result{background:#fff;border:1px solid #e4ddea;border-radius:13px;overflow:hidden}
.tf-result-label{padding:14px 16px;background:#faf9fc;border-bottom:1px solid #eee8f5;
 font-size:10px;letter-spacing:.1em;color:#7d70a1;font-weight:830}
.tf-disclaimer{color:#918696;font-size:10.5px;line-height:1.7;background:#f8f5fc;
 border-radius:9px;padding:13px 16px;margin:0}
@media(max-width:920px){
 .tf-editor-grid{grid-template-columns:1fr}
 .tf-profiles{grid-template-columns:1fr}

}
@media(max-width:540px){
 .tf-step h2,.tf-work h2{font-size:19px}
 .tf-fields{padding:0 11px}
 .tf-fields-head,.tf-field{grid-template-columns:1fr;gap:6px}
 .tf-field{padding:13px 0}
 .tf-field-context{font-size:10px}
 .tf-output-controls>label{width:100%}
 .tf-output-controls select{min-width:0}
 .tf-manual-row{grid-template-columns:1fr}

 .tf-actions button{width:100%}
}


@media(max-width:540px){
 .tf-page-navigation{gap:8px;padding:10px 8px}
 .tf-page-navigation .ut-secondary{min-width:64px;padding:7px 9px;font-size:10px}
 .tf-page-navigation span{font-size:10px}
 .tf-page-viewer{padding:10px}
 .tf-page-viewer img{max-height:65vh}
}

/* Clear, consistent action toolbar for filled-document workflow. */
.tf-actions{
 display:flex;align-items:center;flex-wrap:wrap;gap:9px;
 margin:12px 0 18px;padding:13px 15px;
 border:1px solid #e4dcef;border-radius:12px;
 background:linear-gradient(100deg,#f7f3ff,#fcfbff);
}
.tf-actions>.ut-button{background:#7056dc;color:white}
.tf-actions>button:not([hidden]){min-height:42px}
.tf-actions>.ut-share-controls{margin:0;border:0;padding:0}
.tf-result-label{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 flex-wrap:wrap;
}
.tf-result-label button{
 min-height:34px;padding:6px 11px;
 text-transform:none;letter-spacing:normal;
 font-size:11px;
}
.tf-fields-panel{
 scroll-margin-top:84px;
}
.tf-field-input:focus-visible,.tf-manual input:focus-visible{
 outline:2px solid #8e77e5;outline-offset:1px;
}
.tf-result[hidden]{display:none!important}
@media(max-width:540px){
 .tf-actions{gap:8px;padding:10px}
 .tf-actions>button{flex:1 1 100%;width:100%}
 .tf-result-label button{width:auto;min-height:32px}
}


/* Finished-template actions appear immediately after the populated pages. */
.tf-complete-actions{
 display:flex;align-items:center;flex-wrap:wrap;gap:10px;
 padding:14px 16px;margin:-1px 0 15px;
 background:#f8f5ff;border:1px solid #ded6f1;
 border-radius:0 0 13px 13px;
}
.tf-complete-actions[hidden]{display:none!important}
.tf-complete-actions>button,
.tf-complete-actions>.ut-share-controls .ut-share-button{
 min-height:44px;border-radius:9px;padding:10px 16px;
 font-size:12px;font-weight:820;
}
.tf-complete-actions>.ut-share-controls{
 display:flex;align-items:center;gap:8px;border:0;padding:0;margin:0;
}
.tf-complete-actions>.ut-share-controls .ut-share-hint{display:none}
@media(max-width:540px){
 .tf-complete-actions{gap:8px;padding:12px}
 .tf-complete-actions>button,
 .tf-complete-actions>.ut-share-controls{
  width:auto;min-width:0;flex:1 1 42%;
 }
 .tf-complete-actions>.ut-share-controls .ut-share-button{
  width:100%;white-space:normal;
 }
}