/* Scoped layout only. All shell, colors, buttons and typography inherit the original workbench. */
#templateFlow .tf-toolbar,#templateFlow .tf-actions,#templateFlow .tf-skus{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#templateFlow .tf-toolbar{justify-content:space-between;margin-bottom:16px}
#templateFlow h2{font-size:18px;font-weight:600;margin:0 0 6px}
#templateFlow h3{font-size:15px;font-weight:600;margin:0 0 12px}
#templateFlow p,#templateFlow small{font-size:12px;color:var(--cy-muted,#64748b);line-height:1.7}
#templateFlow .tf-tabs{display:flex;gap:8px;border-bottom:1px solid #dbe5ef;padding-bottom:12px;margin-bottom:18px}
#templateFlow .tf-steps{display:flex;gap:10px;margin:16px 0}
#templateFlow .tf-steps button{flex:1;text-align:left;padding:12px;border:1px solid #dbe5ef;border-radius:8px;background:#fff}
#templateFlow .tf-steps button.active{border-color:#0e5fb8;background:#f0f6ff;color:#0e5fb8}
#templateFlow .tf-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:18px}
#templateFlow .tf-box{border:1px solid #dbe5ef;border-radius:8px;padding:16px;margin:12px 0;background:#fff}
#templateFlow .tf-drop{border:1px dashed #b6c8dd;border-radius:8px;padding:24px;text-align:center;background:#f8fafc;outline-offset:4px}
#templateFlow label.tf-field{display:flex;flex-direction:column;font-size:12px;gap:6px;margin:10px 0}
#templateFlow input:not([type=checkbox]):not([type=file]),#templateFlow select,#templateFlow textarea{border:1px solid #cbd5e1;border-radius:6px;padding:9px;background:#fff;max-width:100%;min-width:0;width:100%;font:inherit;color:inherit;box-sizing:border-box}
#templateFlow .tf-toolbar select{min-width:240px;width:auto}
#templateFlow textarea{resize:vertical}
#templateFlow .tf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:12px 0}
#templateFlow .tf-card{border:1px solid #dbe5ef;border-radius:8px;padding:10px;text-align:left;background:#fff;overflow:hidden}
#templateFlow .tf-card.selected{border:2px solid #0e5fb8;padding:9px}
#templateFlow .tf-card img{width:100%;height:145px;object-fit:contain;background:#f8fafc;display:block;margin-bottom:8px}
#templateFlow .tf-card strong,#templateFlow .tf-card small{display:block}
#templateFlow .tf-pair img{width:100%;max-height:390px;object-fit:contain;background:#f8fafc}
#templateFlow .tf-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#templateFlow .tf-error{color:#b42318;background:#fff4f2;padding:12px;border-radius:6px}
#templateFlow .tf-notice{background:#f0f6ff;border:1px solid #d6e7fb;border-radius:6px;padding:12px;font-size:12px;line-height:1.8}
#templateFlow #tfStatus{margin:8px 0;font-size:12px;line-height:1.7;min-height:20px}
#templateFlow .tf-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:16px 0}
#templateFlow .tf-previews canvas{display:block;max-width:100%;max-height:380px;width:auto;height:auto;margin:auto}
#templateFlow .tf-previews article{border:1px solid #dbe5ef;border-radius:8px;padding:12px}
#templateFlow .tf-previews h4{font-size:13px;margin:10px 0}
#templateFlow .tf-skus{margin:12px 0}
#templateFlow .tf-skus button{font-size:12px;padding:6px 10px}
#templateFlow .tf-edit-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}
#templateFlow .tf-edit-grid canvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
#templateFlow .tf-canvas-wrap{max-width:650px;max-height:650px;overflow:auto;margin:auto}
#templateFlow .tf-empty{padding:36px;text-align:center;background:#f8fafc;border:1px dashed #dbe5ef;border-radius:8px}
#templateFlow fieldset{min-width:0;border:0;padding:0;margin:0}
.tf-zoom{position:fixed;inset:0;background:rgba(15,23,42,.88);z-index:1200;padding:20px;overflow:auto;text-align:center}
.tf-zoom[hidden]{display:none}.tf-zoom canvas{display:block;margin:18px auto;max-width:none;background:white}.tf-zoom button{position:sticky;top:0}
@media(max-width:800px){#templateFlow .tf-grid,#templateFlow .tf-edit-grid{grid-template-columns:1fr}#templateFlow .tf-steps{gap:6px}#templateFlow .tf-steps button{font-size:12px;padding:10px}#templateFlow .tf-toolbar select{width:100%;min-width:0}#templateFlow .tf-fields{grid-template-columns:1fr}}