.tfg-wrap{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;}
.tfg-providers{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.25rem 0;}
.tfg-provider{appearance:none;border:1px solid var(--border, #e2e8f0);background:var(--surface, #fff);color:var(--text-main, #1e293b);font-size:0.875rem;font-weight:500;padding:0.5rem 1rem;border-radius:9999px;cursor:pointer;transition:border-color 0.2s, background 0.2s, color 0.2s;}
.tfg-provider:hover{border-color:var(--primary, #0ea5e9);background:rgba(14,165,233,0.06);}
.tfg-provider-active{border-color:var(--primary, #0ea5e9);background:var(--primary, #0ea5e9);color:#fff;}
.tfg-provider-active:hover{background:var(--primary-dark, #0284c7);border-color:var(--primary-dark, #0284c7);}
.tfg-nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--border, #e2e8f0);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tfg-nav-btn{appearance:none;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text-muted, #64748b);font-size:0.875rem;font-weight:500;padding:0.75rem 1rem;cursor:pointer;white-space:nowrap;transition:color 0.2s, border-color 0.2s;}
.tfg-nav-btn:hover{color:var(--text-main, #1e293b);}
.tfg-nav-btn-active{color:var(--primary, #0ea5e9);border-bottom-color:var(--primary, #0ea5e9);}
.tfg-panels{background:var(--surface, #fff);border:1px solid var(--border, #e2e8f0);border-radius:12px;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.tfg-panel{display:none;}
.tfg-panel-active{display:block;}
.tfg-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem;}
.tfg-field{margin-bottom:1rem;}
.tfg-field:last-of-type{margin-bottom:0;}
.tfg-field label{display:block;font-size:0.8125rem;font-weight:500;color:var(--text-main, #1e293b);margin-bottom:0.375rem;}
.tfg-input,.tfg-select,.tfg-textarea{width:100%;padding:0.625rem 0.75rem;font-size:0.875rem;line-height:1.5;color:var(--text-main, #1e293b);background:var(--surface, #fff);border:1px solid var(--border, #e2e8f0);border-radius:8px;transition:border-color 0.2s, box-shadow 0.2s;}
.tfg-input:focus,.tfg-select:focus,.tfg-textarea:focus{outline:none;border-color:var(--primary, #0ea5e9);box-shadow:0 0 0 3px rgba(14,165,233,0.15);}
.tfg-textarea{min-height:120px;resize:vertical;font-family:ui-monospace, monospace;}
.tfg-field-check{margin-bottom:1rem;}
.tfg-check{display:inline-flex;align-items:center;gap:0.5rem;font-weight:400;cursor:pointer;}
.tfg-checkbox{width:1rem;height:1rem;accent-color:var(--primary, #0ea5e9);}
.tfg-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:500;border-radius:8px;cursor:pointer;transition:background 0.2s, color 0.2s, border-color 0.2s;}
.tfg-btn-primary{background:var(--primary, #0ea5e9);color:#fff;border:none;}
.tfg-btn-primary:hover{background:var(--primary-dark, #0284c7);}
.tfg-btn-ghost{background:transparent;color:var(--text-muted, #64748b);border:1px solid var(--border, #e2e8f0);}
.tfg-btn-ghost:hover{color:var(--text-main, #1e293b);background:var(--surface-muted, #f8fafc);}
.tfg-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.25rem;max-height:280px;overflow-y:auto;}
.tfg-item{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;padding:0.75rem 1rem;background:var(--surface-muted, #f8fafc);border:1px solid var(--border, #e2e8f0);border-radius:8px;}
.tfg-item-body{flex:1;min-width:0;}
.tfg-item-title{font-weight:500;font-size:0.875rem;color:var(--text-main, #1e293b);}
.tfg-item-meta{font-size:0.75rem;color:var(--text-muted, #64748b);margin-top:0.25rem;}
.tfg-item-remove{flex-shrink:0;padding:0.375rem;font-size:0.75rem;color:var(--text-muted, #64748b);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:color 0.2s, background 0.2s;}
.tfg-item-remove:hover{color:#dc2626;background:rgba(220,38,38,0.08);}
.tfg-output-wrap{margin-top:0.5rem;background:var(--surface-muted, #f1f5f9);border:1px solid var(--border, #e2e8f0);border-radius:12px;overflow:hidden;}
.tfg-output-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.75rem 1rem;background:var(--surface, #fff);border-bottom:1px solid var(--border, #e2e8f0);}
.tfg-output-title{font-size:0.875rem;font-weight:600;color:var(--text-main, #1e293b);}
.tfg-output-actions{display:flex;gap:0.5rem;}
.tfg-code{margin:0;padding:1rem;font-size:0.8125rem;line-height:1.6;font-family:ui-monospace, monospace;color:#e2e8f0;background:#0f172a;overflow-x:auto;overflow-y:auto;max-height:420px;white-space:pre-wrap;word-break:break-word;}
@media (min-width: 640px){.tfg-grid{grid-template-columns:repeat(2, 1fr);}}
@media (min-width: 768px){.tfg-wrap{gap:1.5rem;}.tfg-panels{padding:1.5rem;}.tfg-code{max-height:500px;font-size:0.875rem;}}
@media (min-width: 1024px){.tfg-wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"providers providers" "nav nav" "panels output";gap:1.5rem;}.tfg-providers{grid-area:providers;}.tfg-nav{grid-area:nav;}.tfg-panels{grid-area:panels;}.tfg-output-wrap{grid-area:output;align-self:start;position:sticky;top:1rem;}}