:root{--sidebar-width: 280px;--primary-color: #FF4F1F;--bg-color: #f0f2f5;--text-color: #1b263b;--sidebar-bg: #ffffff;--active-item-bg: #fff0eb}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color)}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);background-color:var(--sidebar-bg);border-right:1px solid #e1e4e8;display:flex;flex-direction:column;padding:20px 0;box-shadow:2px 0 5px #00000005;z-index:10;overflow-y:auto}.brand{padding:0 24px 24px;border-bottom:1px solid #f0f0f0;margin-bottom:16px}.brand h2{margin:0;font-size:1.2rem;color:var(--primary-color);display:flex;align-items:center;gap:10px}.nav-group{padding:0 12px}.nav-label{font-size:.75rem;text-transform:uppercase;color:#8898aa;font-weight:600;padding:0 12px;margin-bottom:8px;letter-spacing:.05em;margin-top:24px}.nav-label:first-child{margin-top:0}.nav-item{display:flex;align-items:center;padding:12px 16px;margin-bottom:4px;border-radius:6px;cursor:pointer;transition:all .2s ease;color:#525f7f;font-weight:500;font-size:.95rem}.nav-item:hover{background-color:#f6f9fc;color:var(--primary-color)}.nav-item.active{background-color:var(--active-item-bg);color:var(--primary-color);font-weight:600}.nav-item i{margin-right:12px;width:20px;text-align:center}.sub-item{padding-left:48px;font-size:.9rem}.sub-item i{font-size:.8rem;opacity:.7}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.top-bar{height:60px;background:#fff;border-bottom:1px solid #e1e4e8;display:flex;align-items:center;padding:0 30px;justify-content:space-between;gap:20px}.top-bar h2{margin:0;font-size:1.4rem;flex:1}.flow-meta{font-size:.9rem;color:#666}.export-buttons{display:flex;gap:8px}.export-buttons button{padding:8px 12px;border:1px solid #e1e4e8;background:#fff;border-radius:6px;cursor:pointer;transition:all .2s}.export-buttons button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.content-area{flex:1;overflow:auto;padding:30px;background-image:radial-gradient(#e1e4e8 1px,transparent 1px);background-size:20px 20px}.diagram-card{background:#fff;border-radius:8px;box-shadow:0 4px 6px #32325d1c,0 1px 3px #00000014;padding:20px;min-height:500px;display:flex;flex-direction:column;align-items:center}.legend-bar{display:flex;gap:20px;margin-bottom:20px;font-size:.85em;background:#f8f9fa;padding:10px 20px;border-radius:50px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px}.dot{width:10px;height:10px;border-radius:2px}.mermaid{width:100%;display:flex;justify-content:center}.fab{position:fixed;bottom:30px;right:30px;width:56px;height:56px;border-radius:50%;background:var(--primary-color);color:#fff;border:none;box-shadow:0 4px 12px #00000026;cursor:pointer;font-size:1.5rem;transition:all .3s;z-index:100}.fab:hover{transform:scale(1.1);box-shadow:0 6px 16px #0003}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:30px;max-width:600px;width:90%;position:relative}.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666}.modal-close:hover{color:var(--primary-color)}.yaml-uploader{margin-top:20px}.dropzone{border:2px dashed #e1e4e8;border-radius:8px;padding:40px;text-align:center;cursor:pointer;transition:all .3s}.dropzone:hover,.dropzone.active{border-color:var(--primary-color);background:#fff0eb}.dropzone.processing{cursor:not-allowed;opacity:.7;border-color:#ccc}.dropzone i{font-size:3rem;color:var(--primary-color);margin-bottom:10px}.dropzone p{margin:10px 0 0;color:#666}.error-message{margin-top:15px;padding:12px;background:#ffebee;border:1px solid #c62828;border-radius:6px;color:#c62828;display:flex;align-items:center;gap:10px}.settings-fab{position:fixed;bottom:100px;right:30px;width:56px;height:56px;border-radius:50%;background:#666;color:#fff;border:none;box-shadow:0 4px 6px #0000001a;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .3s;z-index:999}.settings-fab:hover{background:#555;transform:scale(1.1)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:500px;width:90%;max-height:90vh;overflow:auto}.modal-header{padding:20px;border-bottom:1px solid #e1e4e8;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.25rem}.close-btn{background:transparent;border:none;cursor:pointer;color:#666;font-size:1.25rem;padding:4px}.close-btn:hover{color:#333}.modal-body{padding:20px}.settings-info{color:#666;margin-bottom:20px;font-size:.9rem}.modal-body label{display:block;font-weight:600;margin-bottom:8px;color:#333}.api-key-input{width:100%;padding:10px;border:1px solid #e1e4e8;border-radius:4px;font-size:.9rem;margin-bottom:12px}.api-key-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #ff4f1f1a}.settings-note{font-size:.8rem;color:#666;font-style:italic}.modal-footer{padding:20px;border-top:1px solid #e1e4e8;display:flex;justify-content:flex-end}.btn-primary{background:var(--primary-color);color:#fff;border:none;padding:10px 24px;border-radius:4px;font-weight:600;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#e64519}