.state-machine-generator{padding:20px;max-width:1600px;margin:0 auto}.state-machine-generator h1{text-align:center;margin-bottom:10px;color:#2c3e50}.state-machine-generator .tool-description{text-align:center;color:#666;margin-bottom:30px}.state-machine-generator .generator-layout{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:30px;margin-bottom:30px}.state-machine-generator .controls-panel{display:flex;flex-direction:column;gap:20px;max-height:800px;overflow-y:auto}.state-machine-generator .control-section{background:#f8f9fa;border-radius:8px;padding:15px}.state-machine-generator .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}.state-machine-generator .add-btn{width:100%;padding:10px;background:#3498db;color:var(--white);border:none;border-radius:5px;cursor:pointer;font-size:14px;margin-bottom:10px}.state-machine-generator .add-btn:hover{background:#2980b9}.state-machine-generator .add-btn:disabled{background:#bdc3c7;cursor:not-allowed}.state-machine-generator .items-list{display:flex;flex-direction:column;gap:10px}.state-machine-generator .item-card{background:var(--white);border:1px solid #ddd;border-radius:5px;padding:10px;cursor:pointer;transition:all .2s}.state-machine-generator .item-card:hover{border-color:#3498db}.state-machine-generator .item-card.editing{border-color:#3498db;box-shadow:0 2px 8px #3498db33}.state-machine-generator .item-header{display:flex;justify-content:space-between;align-items:center}.state-machine-generator .item-name{font-weight:500;color:#2c3e50;display:flex;align-items:center;gap:5px}.state-machine-generator .badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;color:var(--white)}.state-machine-generator .badge.initial{background:#2ecc71}.state-machine-generator .badge.final{background:#e74c3c}.state-machine-generator .remove-btn{width:24px;height:24px;border:none;background:#e74c3c;color:var(--white);border-radius:50%;cursor:pointer;font-size:16px;line-height:1}.state-machine-generator .remove-btn:hover{background:#c0392b}.state-machine-generator .item-edit{margin-top:15px;padding-top:15px;border-top:1px solid #eee}.state-machine-generator .input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.state-machine-generator .input-row label{min-width:90px;font-size:13px;color:#555}.state-machine-generator .input-row input,.state-machine-generator .input-row select{flex:1;padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px}.state-machine-generator .input-row input:focus,.state-machine-generator .input-row select:focus{border-color:#3498db;outline:none}.state-machine-generator .checkbox-row{margin-bottom:10px}.state-machine-generator .checkbox-row label{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;cursor:pointer}.state-machine-generator .checkbox-row input[type=checkbox]{width:16px;height:16px}.state-machine-generator .theme-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:15px}.state-machine-generator .theme-btn{padding:8px;border:2px solid transparent;border-radius:5px;color:var(--white);font-size:11px;cursor:pointer;text-transform:capitalize;transition:all .2s}.state-machine-generator .theme-btn:hover{transform:scale(1.05)}.state-machine-generator .theme-btn.active{border-color:#2c3e50;box-shadow:0 2px 8px #0003}.state-machine-generator .color-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.state-machine-generator .color-row{display:flex;align-items:center;gap:8px}.state-machine-generator .color-row label{font-size:12px;color:#555;flex:1}.state-machine-generator .color-row input[type=color]{width:35px;height:25px;border:1px solid #ddd;border-radius:3px;cursor:pointer}.state-machine-generator .preview-panel{position:sticky;top:20px}.state-machine-generator .preview-panel h3{margin:0 0 15px;color:#2c3e50}.state-machine-generator .preview-container{border:2px solid #d1d5db;border-radius:8px;padding:20px;background:#f9fafb;min-height:450px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000001a}.state-machine-generator .state-machine-svg{width:100%;height:auto;max-height:500px}.state-machine-generator .export-section{background:#f8f9fa;border-radius:8px;padding:20px}.state-machine-generator .export-section h3{margin:0 0 15px;color:#2c3e50}.state-machine-generator .export-buttons{display:flex;gap:10px;margin-bottom:20px}.state-machine-generator .export-buttons button{padding:10px 20px;background:#27ae60;color:var(--white);border:none;border-radius:5px;cursor:pointer;font-size:14px}.state-machine-generator .export-buttons button:hover{background:#219a52}.state-machine-generator .code-preview{background:#2c3e50;border:2px solid #d1d5db;border-radius:8px;padding:15px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.state-machine-generator .code-preview h4{margin:0 0 10px;color:#ecf0f1;font-size:14px}.state-machine-generator .code-preview pre{margin:0;padding:15px;background:#1a252f;border-radius:5px;overflow-x:auto;max-height:400px}.state-machine-generator .code-preview code{color:#ecf0f1;font-family:Courier New,monospace;font-size:12px;white-space:pre}.state-machine-generator.style-minimal .control-section{background:transparent;border:1px solid #eee}.state-machine-generator.style-modern .control-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.state-machine-generator.style-sketch .preview-container{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M0 10h20M10 0v20' stroke='%23ddd' stroke-width='0.5'/%3E%3C/svg%3E")}.state-machine-generator.style-formal .item-card{border-radius:0}.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){.state-machine-generator .generator-layout{grid-template-columns:1fr}.state-machine-generator .controls-panel{max-height:none}.state-machine-generator .preview-panel{position:relative;top:0}}@media (max-width: 768px){.state-machine-generator{padding:10px}.state-machine-generator .theme-presets{grid-template-columns:repeat(2,1fr)}.state-machine-generator .color-inputs{grid-template-columns:1fr}.state-machine-generator .export-buttons{flex-wrap:wrap}}