.iod-generator{min-height:auto;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.iod-header{text-align:center;color:var(--white);margin-bottom:2rem}.iod-header h1{font-size:2.5rem;margin-bottom:.5rem}.iod-header p{opacity:.9;font-size:1.1rem}.iod-content{display:grid;grid-template-columns:350px 1fr;gap:var(--tool-content-gap, 2rem);max-width:1600px;margin:0 auto}.iod-controls{display:flex;flex-direction:column;gap:1rem}.control-section{background:var(--white);border-radius:12px;padding:1.25rem;box-shadow:0 4px 6px #0000001a}.control-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.control-group{margin-bottom:1rem}.control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}.control-group input[type=text],.control-group input[type=number],.control-group select,.control-group textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:6px;font-size:.875rem;transition:border-color .2s}.control-group input:focus,.control-group select:focus,.control-group textarea:focus{outline:none;border-color:#667eea}.control-group textarea{resize:vertical;min-height:60px;font-family:monospace}.node-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.add-btn{padding:.5rem .75rem;background:#667eea;color:var(--white);border:none;border-radius:6px;font-size:.8rem;cursor:pointer;transition:background .2s}.add-btn:hover{background:#5a6fd6}.add-btn.full-width{width:100%;margin-bottom:.75rem}.nodes-list,.flows-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.node-item{background:#f8f9fa;border-radius:8px;padding:.75rem}.node-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.node-type{font-weight:600;color:#667eea;text-transform:capitalize}.node-item input,.node-item textarea{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.85rem;margin-top:.25rem}.flow-item{display:flex;align-items:center;gap:.5rem;background:#f8f9fa;padding:.5rem;border-radius:6px}.flow-item select{flex:1;min-width:0;padding:.4rem;border:1px solid #ddd;border-radius:4px;font-size:.8rem}.flow-item input{width:60px;padding:.4rem;border:1px solid #ddd;border-radius:4px;font-size:.8rem}.flow-item span{color:#666;font-weight:700}.remove-btn{width:24px;height:24px;background:#ff5252;color:var(--white);border:none;border-radius:4px;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.remove-btn:hover{background:#ff1744}.checkbox-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;cursor:pointer;font-size:1rem;color:var(--gray-900)}.checkbox-label input{width:16px;height:16px;cursor:pointer}.theme-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.theme-btn{width:32px;height:32px;border:2px solid;border-radius:6px;cursor:pointer;transition:transform .2s}.theme-btn:hover{transform:scale(1.1)}.theme-btn.active{box-shadow:0 0 0 3px #667eea80}.theme-btn.custom{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:var(--white);font-size:.875rem;display:flex;align-items:center;justify-content:center}.custom-colors{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.color-input{display:flex;align-items:center;gap:.5rem}.color-input label{flex:1;font-size:1rem;color:var(--gray-900);text-transform:capitalize;font-weight:600;margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.color-input input[type=color]{width:32px;height:24px;border:1px solid #ddd;border-radius:4px;cursor:pointer;padding:0}.iod-preview-section{display:flex;flex-direction:column;gap:1rem}.preview-header{display:flex;justify-content:space-between;align-items:center;background:var(--white);padding:1rem 1.5rem;border:2px solid #d1d5db;border-radius:12px;box-shadow:0 4px 6px #0000001a;box-shadow:0 1px 3px #0000001a}.preview-header h3{margin:0;color:#333}.preview-actions{display:flex;gap:.5rem;align-items:center}.preview-actions select{padding:.5rem 1rem;border:1px solid #ddd;border-radius:6px;font-size:.875rem}.action-btn{padding:.5rem 1rem;background:#f0f0f0;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;transition:background .2s}.action-btn:hover{background:#e0e0e0}.action-btn.primary{background:#667eea;color:var(--white)}.action-btn.primary:hover{background:#5a6fd6}.iod-preview{position:relative;background:#f9fafb;border:2px solid #d1d5db;border-radius:12px;box-shadow:0 1px 3px #0000001a;min-height:500px;overflow:hidden}.grid-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.iod-preview svg{display:block}.iod-node{cursor:move;transition:filter .2s}.iod-node:hover{filter:brightness(.95)}.diagram-title{position:absolute;top:10px;left:20px;font-size:1.25rem;font-weight:700;font-family:monospace}.code-preview{background:#1e1e1e;border:2px solid #d1d5db;border-radius:12px;padding:1rem;overflow:auto;max-height:300px;box-shadow:0 1px 3px #0000001a}.code-preview pre{margin:0;color:#d4d4d4;font-family:Monaco,Menlo,monospace;font-size:.8rem;line-height:1.6;white-space:pre-wrap;word-break:break-all}.control-panel{background-color:#1f2937f2!important;border:2px solid var(--gray-400)!important;border-radius:6px}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border-color:var(--gray-400)!important;border-width:2px}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea{background-color:#0f172acc!important;border:2px solid var(--gray-500)!important;color:var(--text-primary)}[data-theme=dark] .control-group label{display:block;color:var(--gray-900);font-size:1rem;margin-bottom:.5rem;font-weight:600;line-height:1.5;letter-spacing:.3px}@media (max-width: 1200px){.iod-content{grid-template-columns:1fr}.iod-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}}@media (max-width: 768px){.iod-generator{padding:1rem}.iod-header h1{font-size:1.75rem}.preview-header{flex-direction:column;gap:1rem}.preview-actions{width:100%;justify-content:center}}