.tf-empty[hidden],.tf-canvas-shell[hidden],.tf-drop-overlay[hidden],.tf-original-badge[hidden],.tf-pick-banner[hidden],.tf-mode-banner[hidden],.tf-color-tooltip[hidden],.tf-workflow-panel[hidden]{display:none!important}
.text-fix-page{width:min(1480px,calc(100% - 36px));max-width:none;padding-bottom:56px}
.tf-hero-note{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.tf-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid #315578;border-radius:999px;background:#0d2035;color:#bcd2e8;font-size:13px;font-weight:800}
.tf-layout{display:grid;grid-template-columns:390px minmax(0,1fr);gap:18px;align-items:start}.tf-panel{border:1px solid #2b4866;border-radius:17px;background:linear-gradient(145deg,#0d1c30,#091725);overflow:hidden}.tf-tool-panel{position:sticky;top:92px;max-height:none;overflow:visible}.tf-stage-panel{min-height:760px}.tf-panel-head{padding:16px 17px;border-bottom:1px solid #24415e}.tf-panel-head.compact{padding:15px 16px}.tf-panel-head strong{display:block;font-size:18px}.tf-panel-head small{display:block;margin-top:5px;color:#829bb4;line-height:1.55}.tf-panel-body{display:grid;gap:14px;padding:16px}
.tf-workflow-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px;border-bottom:1px solid #24415e;background:#091827;position:sticky;top:0;z-index:4}.tf-workflow-tab{display:grid;justify-items:center;gap:5px;min-height:66px;padding:9px 6px;border:1px solid #2f506f;border-radius:10px;background:#0e2238;color:#9fb7ce;font:inherit;font-size:12px;font-weight:900;cursor:pointer}.tf-workflow-tab span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1b385b;color:#cae2f9;font-size:12px}.tf-workflow-tab strong{font-size:12px;line-height:1.25}.tf-workflow-tab.active{border-color:#8297ff;background:#2d477d;color:#fff;box-shadow:0 0 0 2px rgba(116,137,255,.15)}.tf-workflow-tab.active span{background:#6c7cff;color:#fff}.tf-workflow-tab:disabled{opacity:.42;cursor:not-allowed}
.tf-dropzone{display:grid;place-items:center;gap:6px;min-height:155px;padding:18px;border:1.5px dashed #4a7095;border-radius:13px;background:#081827;text-align:center;cursor:pointer;transition:.18s ease}.tf-dropzone:hover,.tf-dropzone.is-over{border-color:#8195ff;background:#102244;box-shadow:inset 0 0 0 1px rgba(123,142,255,.28)}.tf-dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.tf-dropzone strong{color:#edf5ff;font-size:15px}.tf-dropzone small{color:#7792ac;line-height:1.5}.tf-drop-icon{font-size:32px}.tf-format-note{margin:0;color:#7f9ab4;font-size:12px;line-height:1.55}
.tf-field{display:grid;gap:6px;color:#a9bdd0;font-size:12px;font-weight:800}.tf-field input,.tf-field textarea,.tf-field select{width:100%;padding:10px 11px;border:1px solid #355877;border-radius:9px;background:#061523;color:#f2f7ff;font:inherit;font-size:14px}.tf-field textarea{min-height:78px;resize:vertical}.tf-field-help{color:#6f8ba6;font-size:11px;font-weight:650;line-height:1.5}.tf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tf-check-row{display:flex;gap:15px;flex-wrap:wrap}.tf-check{display:flex;align-items:center;gap:7px;color:#bfd0e0;font-size:13px;font-weight:750}.tf-check input{width:17px;height:17px}.tf-buttons{display:flex;gap:8px;flex-wrap:wrap}
.tf-btn{min-height:40px;padding:9px 12px;border:1px solid #3a5e80;border-radius:9px;background:#112842;color:#eaf3ff;font-weight:900;cursor:pointer;transition:.15s ease}.tf-btn:hover:not(:disabled){background:#193553;border-color:#5b83ad}.tf-btn.primary{background:linear-gradient(135deg,#5368ff,#7a4cff);border-color:#6a77ff;color:#fff}.tf-btn.danger{border-color:#74434d;background:#301821;color:#ffc6ce}.tf-btn.wide{width:100%}.tf-btn.compact{min-height:36px;padding:7px 10px}.tf-btn:disabled{opacity:.38;cursor:not-allowed}.tf-main-action{min-height:50px;font-size:15px}.tf-move-btn[aria-pressed="true"],.tf-main-action[aria-pressed="true"]{border-color:#8ea1ff;background:#304b88;color:#fff;box-shadow:0 0 0 2px rgba(117,140,255,.16)}
.tf-selection-info{padding:10px 11px;border-radius:9px;background:#071624;color:#9ec3e7;font-size:12px;line-height:1.5}.tf-mini-tip{margin:0;color:#7396b9;font-size:12px;line-height:1.55}.tf-method-card{display:grid;gap:10px;padding:13px;border:1px solid #294a68;border-radius:12px;background:#091a2b}.tf-method-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.tf-method-head strong{display:block;color:#edf5ff;font-size:14px}.tf-method-head small{display:block;margin-top:3px;color:#7894ad;font-size:11px;line-height:1.45}.tf-method-badge{flex:0 0 auto;padding:4px 7px;border-radius:999px;background:#153657;color:#93c4ef;font-size:10px;font-weight:900}.tf-step-tip{display:grid;gap:5px;padding:11px 12px;border:1px dashed #36536c;border-radius:10px;background:#081725;color:#91a9c0;font-size:12px;line-height:1.5}.tf-step-tip strong{color:#dbe9f6}.tf-inline-next{justify-self:start;padding:0;border:0;background:transparent;color:#8fb3ff;font:inherit;font-weight:900;cursor:pointer}.tf-inline-next:hover{text-decoration:underline}
.tf-color-input{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center}.tf-color-input input[type=color]{height:42px;padding:4px}.tf-eyedropper-btn{min-height:42px;border:1px solid #355877;border-radius:9px;background:#112842;color:#eef5ff;font-weight:850;cursor:pointer}.tf-eyedropper-btn:hover:not(:disabled),.tf-eyedropper-btn[aria-pressed="true"]{border-color:#82a2ff;background:#254172;box-shadow:0 0 0 2px rgba(95,126,255,.18)}.tf-eyedropper-btn:disabled{opacity:.4;cursor:not-allowed}.tf-size-editor{display:grid;grid-template-columns:minmax(0,1fr) 82px;gap:8px;align-items:center}.tf-size-editor input[type=range]{padding:0;height:34px;accent-color:#687cff}
.tf-advanced{border:1px solid #294a68;border-radius:11px;background:#081827;overflow:hidden}.tf-advanced summary{padding:11px 12px;color:#bed1e4;font-size:12px;font-weight:900;cursor:pointer;user-select:none}.tf-advanced[open] summary{border-bottom:1px solid #24415e;background:#0d2138}.tf-advanced-body{display:grid;gap:10px;padding:12px}.tf-text-actions .tf-btn{flex:1 1 130px}
.tf-stage-toolbar{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:11px 13px;border-bottom:1px solid #24415e;background:#0a1829}.tf-stage-actions,.tf-export-actions,.tf-zoom-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.tf-zoom-actions select{height:36px;padding:0 9px;border:1px solid #385d7f;border-radius:8px;background:#081827;color:#eaf3ff;font-weight:800}.tf-zoom-value{display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:36px;padding:0 7px;border:1px solid #2e4d69;border-radius:8px;background:#061421;color:#a8c4df;font-size:12px;font-weight:900}.tf-stage-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:690px;max-height:79vh;padding:28px;background:#050d17;overflow:auto;overscroll-behavior:contain}.tf-stage-wrap.is-dragover{outline:2px dashed #8495ff;outline-offset:-12px}.tf-stage-wrap.is-color-picking{outline:2px solid rgba(107,137,255,.85);outline-offset:-2px}.tf-stage-wrap.is-color-picking canvas{cursor:crosshair!important}.tf-canvas-shell{position:relative;flex:0 0 auto;line-height:0;margin:auto}.tf-canvas-shell canvas{display:block;border:1px solid #29445f;border-radius:7px;background:#10161d;box-shadow:0 18px 55px rgba(0,0,0,.34);touch-action:none;user-select:none}.tf-empty{display:grid;place-items:center;align-content:center;gap:8px;width:min(680px,100%);min-height:430px;margin:auto;border:1px dashed #33516d;border-radius:15px;color:#7893ad;text-align:center;line-height:1.6}.tf-empty>span{font-size:42px}.tf-empty strong{font-size:18px;color:#9fb8d0}.tf-empty small{font-size:13px}.tf-drop-overlay{position:absolute;inset:14px;z-index:10;display:grid;place-items:center;border:2px dashed #8495ff;border-radius:15px;background:rgba(23,46,88,.9);color:#fff;font-size:20px;font-weight:900;pointer-events:none}.tf-stage-wrap:has(.tf-canvas-shell:not([hidden])) .tf-drop-overlay{display:none!important}.tf-original-badge{position:absolute;top:10px;left:10px;z-index:2;padding:6px 9px;border-radius:999px;background:rgba(6,14,24,.86);color:#fff;font-size:12px;font-weight:850;pointer-events:none}
.tf-pick-banner{position:absolute;top:14px;left:50%;z-index:14;display:flex;align-items:center;gap:9px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:9px 12px;border:1px solid #6f8cff;border-radius:999px;background:rgba(10,28,53,.96);box-shadow:0 10px 28px rgba(0,0,0,.34);color:#eaf2ff;font-size:12px;pointer-events:none}.tf-pick-banner strong{color:#fff;white-space:nowrap}.tf-pick-banner span{color:#a9c2db}.tf-pick-banner kbd{padding:3px 6px;border:1px solid #55708f;border-radius:6px;background:#061421;color:#d9e8f7;font-family:inherit;font-size:10px;white-space:nowrap}
.tf-color-tooltip{position:fixed;z-index:9999;display:flex;align-items:center;gap:8px;min-width:154px;padding:9px 10px;border:1px solid #6686a8;border-radius:10px;background:rgba(6,18,31,.96);box-shadow:0 12px 30px rgba(0,0,0,.42);pointer-events:none}.tf-color-tooltip-swatch{width:28px;height:28px;border:2px solid #fff;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.45)}.tf-color-tooltip div{display:grid;gap:1px}.tf-color-tooltip strong{color:#fff;font-size:12px}.tf-color-tooltip small{color:#98b0c8;font-size:10px;white-space:nowrap}
.tf-stage-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-top:1px solid #203b56}.tf-status{color:#86a1ba;font-size:12px}.tf-status[data-state="good"]{color:#77dbac}.tf-status[data-state="warn"]{color:#f5ca72}.tf-hint{color:#607f9b;font-size:11px}

/* v0.8.54 desktop one-screen tool panel */
@media (min-width:901px) and (min-height:760px){
  .tf-tool-panel{max-height:none;overflow:visible}
  .tf-workflow-tabs{gap:5px;padding:8px}
  .tf-workflow-tab{min-height:56px;padding:6px 5px;gap:3px}
  .tf-workflow-tab span{width:21px;height:21px;font-size:11px}
  .tf-panel-head.compact{padding:11px 14px}
  .tf-panel-head strong{font-size:16px}
  .tf-panel-head small{margin-top:3px;line-height:1.35;font-size:11px}
  .tf-panel-body{gap:9px;padding:12px 13px}
  .tf-main-action{min-height:44px;font-size:14px}
  .tf-selection-info{padding:8px 9px;font-size:11px;line-height:1.4}
  .tf-mini-tip{font-size:11px;line-height:1.4}
  .tf-method-card{gap:7px;padding:10px}
  .tf-method-head{gap:8px}
  .tf-method-head strong{font-size:13px}
  .tf-method-head small{margin-top:2px;font-size:10px;line-height:1.35}
  .tf-method-badge{padding:3px 6px;font-size:9px}
  .tf-btn{min-height:36px;padding:7px 10px}
  .tf-eyedropper-btn{min-height:36px}
  .tf-color-input input[type=color]{height:36px}
  .tf-step-tip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;font-size:11px;line-height:1.35}
  .tf-step-tip span{min-width:0}
  .tf-field{gap:4px;font-size:11px}
  .tf-field input,.tf-field textarea,.tf-field select{padding:8px 9px;font-size:13px}
  .tf-field textarea{min-height:54px;max-height:72px}
  .tf-field-help{font-size:10px;line-height:1.35}
  .tf-size-editor input[type=range]{height:28px}
  .tf-check-row{gap:12px}
  .tf-check{font-size:12px}
  .tf-advanced summary{padding:8px 10px;font-size:11px}
  .tf-advanced-body{gap:8px;padding:9px 10px}
  .tf-text-actions .tf-btn{flex:1 1 120px}
  .tf-target-actions{gap:7px}
  .tf-workflow-panel[data-tf-step-panel="2"] .tf-panel-body,
  .tf-workflow-panel[data-tf-step-panel="3"] .tf-panel-body{gap:8px}
}
@media (min-width:901px) and (max-height:850px){
  .tf-workflow-tab{min-height:50px}
  .tf-panel-head.compact{padding:9px 12px}
  .tf-panel-head small{display:none}
  .tf-panel-body{gap:7px;padding:10px 11px}
  .tf-method-card{gap:6px;padding:8px 9px}
  .tf-method-head small{display:none}
  .tf-mini-tip{display:none}
  .tf-step-tip{padding:7px 9px}
  .tf-field textarea{min-height:48px;max-height:58px}
  .tf-btn{min-height:34px;padding:6px 9px}
  .tf-main-action{min-height:40px}
  .tf-eyedropper-btn,.tf-color-input input[type=color]{min-height:34px;height:34px}
}
@media(max-width:1120px){.text-fix-page{width:min(1180px,calc(100% - 32px))}.tf-layout{grid-template-columns:350px minmax(0,1fr)}.tf-stage-toolbar{align-items:flex-start}.tf-zoom-actions{order:3;width:100%}}
@media(max-width:900px){.tf-layout{grid-template-columns:1fr}.tf-tool-panel{position:static;max-height:none}.tf-stage-panel{min-height:0}.tf-stage-wrap{min-height:500px;max-height:72vh}}
@media(max-width:650px){.text-fix-page{width:min(100% - 24px,1080px)}.tf-grid2{grid-template-columns:1fr}.tf-stage-wrap{padding:10px;min-height:350px;max-height:66vh}.tf-stage-toolbar{align-items:stretch}.tf-stage-actions,.tf-export-actions,.tf-zoom-actions{width:100%}.tf-stage-actions .tf-btn,.tf-export-actions .tf-btn{flex:1}.tf-zoom-actions{justify-content:center}.tf-stage-footer{align-items:flex-start}.tf-empty{min-height:300px}.tf-pick-banner{top:8px;border-radius:12px;flex-wrap:wrap;justify-content:center}.tf-color-input{grid-template-columns:64px minmax(0,1fr)}}


/* v0.8.53 selection / target preview UX */
.tf-target-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tf-eye-btn[aria-pressed="true"]{border-color:#90a4ff;background:#314c8a;color:#fff;box-shadow:0 0 0 2px rgba(117,140,255,.18)}
.tf-stage-wrap.is-selecting canvas,.tf-stage-wrap.is-clone-selecting canvas{cursor:crosshair!important}
.tf-stage-wrap.is-moving canvas{cursor:default}
.tf-stage-wrap.is-moving canvas.tf-cursor-grab{cursor:grab!important}
.tf-stage-wrap canvas.tf-cursor-grabbing{cursor:grabbing!important}
.tf-stage-wrap canvas.tf-cursor-nwse{cursor:nwse-resize!important}
.tf-stage-wrap canvas.tf-cursor-nesw{cursor:nesw-resize!important}
.tf-mode-banner{position:absolute;top:14px;left:50%;z-index:13;display:flex;align-items:center;gap:9px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:9px 12px;border:1px solid #6f8cff;border-radius:999px;background:rgba(10,28,53,.96);box-shadow:0 10px 28px rgba(0,0,0,.34);color:#eaf2ff;font-size:12px;pointer-events:none}
.tf-mode-banner strong{color:#fff;white-space:nowrap}.tf-mode-banner span{color:#b6cae0}
@media(max-width:650px){.tf-target-actions{grid-template-columns:1fr}.tf-mode-banner{top:8px;border-radius:12px;flex-wrap:wrap;justify-content:center}}

/* v0.8.55 sequential multi-area edit + compact target actions */
.tf-target-actions .tf-btn{white-space:nowrap}
.tf-next-region{border-color:#4b6e96;background:#102944;color:#eaf3ff;font-weight:900}
.tf-next-region:hover:not(:disabled){border-color:#829cff;background:#1d3f70}
.tf-next-region:disabled{opacity:.42}