:root{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-tertiary: #374151;--bg-hover: #4b5563;--bg-input: #111827;--bg-contrast: #06b6d4;--bg-contrast-darker: #0891b2;--bg-blue: #3b82f6;--bg-blue-darker: #2563eb;--bg-red: #dc2626;--bg-red-darker: #b91c1c;--border-primary: #374151;--border-secondary: #4b5563;--border-focus: #06b6d4;--text-primary: #d1d5db;--text-secondary: #9ca3af;--text-tertiary: #6b7280;--text-white: #ffffff;--text-cyan: #22d3ee;--text-red: #f87171;--text-yellow: #facc15;--text-orange: #fb923c;--text-lime: #a3e635;--text-green: #4ade80;--text-blue: #60a5fa}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:sans-serif;background-color:var(--bg-primary);color:var(--text-primary)}#app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.main-content{display:flex;flex-grow:1;height:calc(100vh - 6rem)}main{flex-grow:1;height:100%;position:relative}.top-bar{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-primary);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;flex-shrink:0}.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:1rem}.top-bar-title{font-size:1.25rem;font-weight:700;color:var(--text-cyan)}.footer{height:2rem;background-color:var(--bg-secondary);border-top:1px solid var(--border-primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--text-tertiary);flex-shrink:0}.left-sidebar{width:18rem;background-color:#1f293780;border-right:1px solid var(--border-primary);padding:1rem;display:flex;flex-direction:column;gap:1.5rem;flex-shrink:0;overflow-y:auto}.right-inspector{width:20rem;background-color:#1f293780;border-left:1px solid var(--border-primary);padding:1rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto;flex-shrink:0}.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.25rem}.input,.select,.textarea{width:100%;padding:.5rem;background-color:var(--bg-input);border:1px solid var(--border-secondary);border-radius:.375rem;font-size:.875rem;color:var(--text-primary);margin-top:.25rem}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 1px var(--border-focus)}.btn{padding:.5rem .75rem;font-size:.875rem;font-weight:600;border-radius:.375rem;border:none;cursor:pointer;transition:background-color .2s;text-align:center}.btn-primary{color:var(--text-white);background-color:#2563eb}.btn-primary:hover{background-color:#1d4ed8}.btn-primary:disabled{background-color:#4b5563;cursor:not-allowed}.btn-gradient{padding:.5rem 1rem;background-image:linear-gradient(to right,var(--bg-contrast),var(--bg-blue));color:var(--text-white);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:all .2s}.btn-gradient:hover{background-image:linear-gradient(to right,var(--bg-contrast-darker),var(--bg-blue-darker))}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--bg-hover)}.btn-danger{background-color:var(--bg-red);color:var(--text-white)}.btn-danger:hover{background-color:var(--bg-red-darker)}.button-group{display:flex;border-radius:.375rem;overflow:hidden;border:1px solid var(--border-secondary)}.button-group button{padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:background-color .2s,color .2s;border:none;border-radius:0;cursor:pointer}.button-group button:not(:last-child){border-right:1px solid var(--border-secondary)}.button-group button.active{background-color:var(--bg-contrast-darker);color:var(--text-white)}.button-group button:not(.active){background-color:var(--bg-tertiary);color:var(--text-primary)}.button-group button:not(.active):hover{background-color:var(--bg-hover)}.ai-panel{position:absolute;top:0;right:0;height:100%;width:450px;background-color:#111827cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-left:1px solid var(--border-primary);box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;z-index:10}.ai-panel-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-primary);flex-shrink:0}.ai-panel-header h2{font-size:1.125rem;font-weight:600;color:var(--text-cyan)}.ai-panel-header .close-btn{padding:.25rem;border-radius:9999px;color:var(--text-secondary);background:none;border:none;cursor:pointer}.ai-panel-header .close-btn:hover{background-color:var(--bg-tertiary);color:var(--text-white)}.ai-tabs{flex-shrink:0;border-bottom:1px solid var(--border-primary);padding:0 .5rem;display:flex;gap:.5rem}.ai-tab{padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:color .2s,border-color .2s;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer}.ai-tab.active{border-color:var(--border-focus);color:var(--text-cyan);background-color:#1f293780}.ai-tab:not(.active){color:var(--text-secondary)}.ai-tab:not(.active):hover{color:var(--text-white)}.ai-panel-content{flex-grow:1;overflow:hidden}.chat-view{display:flex;flex-direction:column;height:100%}.chat-history{flex-grow:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.chat-message{padding:.75rem;border-radius:.5rem;font-size:.875rem;white-space:pre-wrap;max-width:80%}.chat-message.user{background-color:var(--bg-blue-darker);color:var(--text-white);align-self:flex-end}.chat-message.model{background-color:var(--bg-tertiary);color:var(--text-primary);align-self:flex-start}.chat-form-container{padding:1rem;border-top:1px solid var(--border-primary)}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background-color:var(--bg-primary)}.spinner{width:2rem;height:2rem;color:var(--text-cyan);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes indeterminate-progress{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-bar-indeterminate{position:relative;width:100%;height:.625rem;background-color:var(--bg-tertiary);border-radius:9999px;overflow:hidden}.progress-bar-indeterminate:after{content:"";position:absolute;top:0;left:0;height:100%;width:50%;background-color:var(--bg-contrast);border-radius:9999px;animation:indeterminate-progress 1.5s infinite ease-in-out}.diagram-canvas{width:100%;height:100%;background-color:var(--bg-primary);position:relative}.react-flow__controls button{background-color:#2d3748;color:#e2e8f0;border-bottom:1px solid #4A5568}.react-flow__controls button:hover{background-color:#4a5568}.react-flow__minimap{background-color:#1a202c;border:1px solid #4A5568}.reactflow-wrapper{background-color:#1f29374d}.custom-node{width:250px;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid;transition:all .2s;position:relative}.custom-node-hub{background-color:#78350fcc;border-color:#f59e0b}.custom-node-section{background-color:#5c267acc;border-color:#a855f7}.custom-node-page{background-color:#134e4acc;border-color:#14b8a6}.custom-node-utility{background-color:#334155cc;border-color:#64748b}.custom-node-hub .node-label{color:#fcd34d}.custom-node-section .node-label{color:#c084fc}.custom-node-page .node-label{color:#5eead4}.custom-node-utility .node-label{color:#cbd5e1}.node-content{padding:.75rem}.node-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.node-label{font-size:.75rem;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:.375rem}.node-label span{font-size:.875rem}.node-title{font-size:.875rem;font-weight:600;color:#f9fafb;word-break:break-word}.collapse-toggle{position:absolute;bottom:-.75rem;left:50%;transform:translate(-50%);height:1.5rem;padding:0 .625rem;border-radius:9999px;font-size:.75rem;font-weight:700;border:2px solid;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 1px 3px #0000001a;z-index:10;cursor:pointer}.collapse-toggle.collapsed{background-color:#0891b2;border-color:#22d3ee;color:#fff}.collapse-toggle.collapsed:hover{background-color:#0e7490}.collapse-toggle.expanded{background-color:#374151;border-color:#6b7280;color:#d1d5db}.collapse-toggle.expanded:hover{background-color:#4b5563}.section-title{font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.sidebar-section{border-top:1px solid var(--border-primary);padding-top:1.5rem}.badge{display:inline-block;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px}.badge-blue{background-color:#1e40af80;color:#93c5fd}.badge-purple{background-color:#5c267a80;color:#d8b4fe}.badge-teal{background-color:#134e4a80;color:#67e8f9}.badge-green{background-color:#15803d80;color:#86efac}.badge-gray{background-color:var(--bg-tertiary);color:var(--text-primary)}.badge-cyan{background-color:#14536480;color:#67e8f9}.badge-indigo{background-color:#312e8180;color:#a5b4fc}.drop-area{position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:8rem;padding:1rem;border:2px dashed var(--border-secondary);border-radius:.375rem;transition:border-color .2s,background-color .2s}.drop-area.dragging,.drop-area:hover{border-color:var(--border-focus)}.drop-area.dragging{background-color:var(--bg-secondary)}.drop-area-content{text-align:center}.drop-area-file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.drop-area-text{margin-top:.25rem;font-size:.875rem;color:var(--text-secondary)}.drop-area-text span{font-weight:600;color:var(--text-cyan);cursor:pointer;text-decoration:underline}.drop-area-subtext{font-size:.75rem;color:var(--text-tertiary)}.drop-area-icon{margin:0 auto;height:2rem;width:2rem;color:var(--text-tertiary)}