:root{--primary-50: #f5f3ff;--primary-100: #ede9fe;--primary-200: #ddd6fe;--primary-300: #c4b5fd;--primary-400: #a78bfa;--primary-500: #8b5cf6;--primary-600: #7c3aed;--primary-700: #6d28d9;--primary-800: #5b21b6;--primary-900: #4c1d95;--accent-400: #22d3ee;--accent-500: #06b6d4;--accent-600: #0891b2;--success-400: #4ade80;--success-500: #22c55e;--success-600: #16a34a;--warning-400: #facc15;--warning-500: #eab308;--error-400: #f87171;--error-500: #ef4444;--error-600: #dc2626;--dark-950: #030712;--dark-900: #0c0f1a;--dark-850: #111827;--dark-800: #1a1f2e;--dark-700: #252b3b;--dark-600: #374151;--dark-500: #4b5563;--dark-400: #6b7280;--dark-300: #9ca3af;--dark-200: #d1d5db;--dark-100: #e5e7eb;--dark-50: #f9fafb;--glass-bg: rgba(17, 24, 39, .7);--glass-border: rgba(255, 255, 255, .08);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .4);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 100;--z-modal: 200;--z-tooltip: 300}[data-theme=light]{--primary-50: #f5f3ff;--primary-100: #ede9fe;--primary-200: #ddd6fe;--primary-300: #c4b5fd;--primary-400: #a78bfa;--primary-500: #8b5cf6;--primary-600: #7c3aed;--primary-700: #6d28d9;--primary-800: #5b21b6;--primary-900: #4c1d95;--dark-950: #ffffff;--dark-900: #f3f4f6;--dark-850: #ffffff;--dark-800: #f9fafb;--dark-700: #e5e7eb;--dark-600: #d1d5db;--dark-500: #9ca3af;--dark-400: #6b7280;--dark-300: #4b5563;--dark-200: #374151;--dark-100: #111827;--dark-50: #030712;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(0, 0, 0, .05);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .05)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:var(--dark-100);background:var(--dark-950);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -20%,rgba(139,92,246,.15),transparent),radial-gradient(ellipse 60% 40% at 80% 50%,rgba(6,182,212,.1),transparent),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(124,58,237,.08),transparent);pointer-events:none;z-index:-1}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--dark-50)}h1{font-size:clamp(2.5rem,5vw,4rem)}h2{font-size:clamp(1.75rem,3vw,2.5rem)}h3{font-size:clamp(1.25rem,2vw,1.75rem)}p{color:var(--dark-300)}a{color:var(--primary-400);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-300)}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-lg)}.section{padding:var(--spacing-3xl) 0}.glass-card{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);transition:transform var(--transition-base),box-shadow var(--transition-base)}.glass-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #00000080}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-sans);font-size:.9375rem;font-weight:600;line-height:1;text-decoration:none;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;box-shadow:0 4px 16px #8b5cf64d}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-400),var(--primary-500));box-shadow:0 6px 24px #8b5cf666;transform:translateY(-2px)}.btn-secondary{background:var(--dark-700);color:var(--dark-100);border:1px solid var(--dark-600)}.btn-secondary:hover:not(:disabled){background:var(--dark-600);border-color:var(--dark-500)}.btn-ghost{background:transparent;color:var(--dark-200);border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:var(--dark-800);border-color:var(--dark-700)}.btn-icon{padding:var(--spacing-md);border-radius:var(--radius-md)}.input-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input-label{font-size:.875rem;font-weight:500;color:var(--dark-200)}.input{padding:var(--spacing-md) var(--spacing-lg);font-family:var(--font-sans);font-size:1rem;color:var(--dark-100);background:var(--dark-800);border:1px solid var(--dark-600);border-radius:var(--radius-md);outline:none;transition:all var(--transition-fast)}.input:focus{border-color:var(--primary-500);box-shadow:0 0 0 3px #8b5cf633}.input::placeholder{color:var(--dark-500)}.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:var(--spacing-2xl);background:linear-gradient(135deg,#8b5cf608,#06b6d408);border:2px dashed var(--dark-600);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);overflow:hidden}.dropzone:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary-500),var(--accent-500));opacity:0;transition:opacity var(--transition-base)}.dropzone:hover,.dropzone.active{border-color:var(--primary-500);background:linear-gradient(135deg,#8b5cf614,#06b6d414)}.dropzone:hover:before,.dropzone.active:before{opacity:.05}.dropzone-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:var(--spacing-lg);background:linear-gradient(135deg,var(--primary-600),var(--accent-500));border-radius:var(--radius-xl);color:#fff;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.dropzone-title{font-size:1.25rem;font-weight:600;color:var(--dark-100);margin-bottom:var(--spacing-sm)}.dropzone-subtitle{font-size:.9375rem;color:var(--dark-400);text-align:center}.dropzone-hint{display:inline-flex;align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);font-size:.8125rem;color:var(--primary-400);background:#8b5cf61a;border-radius:var(--radius-full)}.file-preview{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--dark-800);border-radius:var(--radius-lg);margin-top:var(--spacing-md)}.file-preview-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--primary-600),var(--accent-500));border-radius:var(--radius-md);color:#fff}.file-preview-info{flex:1;min-width:0}.file-preview-name{font-weight:600;color:var(--dark-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-preview-size{font-size:.875rem;color:var(--dark-400)}.file-preview-remove{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-md);color:var(--dark-400);cursor:pointer;transition:all var(--transition-fast)}.file-preview-remove:hover{background:var(--dark-700);color:var(--error-400)}.diagram-container{position:relative;padding:var(--spacing-xl);background:var(--dark-800);border-radius:var(--radius-xl);overflow:hidden}.diagram-container svg{max-width:100%;height:auto}.diagram-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--dark-700);margin-bottom:var(--spacing-lg)}.diagram-actions{display:flex;gap:var(--spacing-sm)}.loading-spinner{display:inline-block;width:24px;height:24px;border:3px solid var(--dark-600);border-top-color:var(--primary-500);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-dots{display:flex;gap:var(--spacing-sm)}.loading-dots span{width:8px;height:8px;background:var(--primary-500);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.progress-bar{height:4px;background:var(--dark-700);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-500),var(--accent-500));border-radius:var(--radius-full);transition:width var(--transition-base)}.badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em}.badge-success{background:#22c55e1a;color:var(--success-400)}.badge-warning{background:#eab3081a;color:var(--warning-400)}.badge-error{background:#ef44441a;color:var(--error-400)}.badge-info{background:#8b5cf61a;color:var(--primary-400)}.alert{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid transparent}.alert-error{background:#ef44441a;border-color:#ef444433;color:var(--error-400)}.alert-success{background:#22c55e1a;border-color:#22c55e33;color:var(--success-400)}.alert-warning{background:#eab3081a;border-color:#eab30833;color:var(--warning-400)}.code-block{position:relative;background:var(--dark-900);border:1px solid var(--dark-700);border-radius:var(--radius-lg);overflow:hidden}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--dark-800);border-bottom:1px solid var(--dark-700)}.code-block-lang{font-size:.75rem;font-weight:600;color:var(--dark-400);text-transform:uppercase;letter-spacing:.05em}.code-block pre{padding:var(--spacing-lg);margin:0;overflow-x:auto;font-family:var(--font-mono);font-size:.875rem;line-height:1.6;color:var(--dark-200)}.tabs{display:flex;gap:var(--spacing-xs);padding:var(--spacing-xs);background:var(--dark-800);border-radius:var(--radius-lg)}.tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;font-weight:500;color:var(--dark-400);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.tab:hover{color:var(--dark-200);background:var(--dark-700)}.tab.active{color:#fff;background:linear-gradient(135deg,var(--primary-600),var(--primary-700))}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:var(--spacing-sm) var(--spacing-md);font-size:.75rem;font-weight:500;color:#fff;background:var(--dark-700);border-radius:var(--radius-md);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--transition-fast);z-index:var(--z-tooltip)}.tooltip:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(-4px)}.file-tree{font-family:var(--font-mono);font-size:.8125rem;line-height:1.8;color:var(--dark-300)}.file-tree-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.file-tree-item:hover{background:var(--dark-800)}.file-tree-folder{color:var(--primary-400)}.file-tree-file{color:var(--dark-200)}.app{height:100vh;display:flex;flex-direction:column;background-color:var(--dark-950);overflow:hidden}.header{flex:0 0 auto;border-bottom:1px solid var(--dark-700);background:var(--dark-850);padding:.75rem 0;z-index:50;position:relative}.header-content{display:flex;align-items:center;justify-content:space-between}.header-logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.25rem;font-weight:700;color:var(--dark-50)}.header-logo-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,var(--primary-500),var(--accent-500));border-radius:var(--radius-md);color:#fff}.dashboard-grid{flex:1;display:grid;grid-template-columns:320px 1fr 300px;gap:1rem;padding:1rem;overflow:hidden;height:calc(100vh - 65px)}.col-left,.col-right{display:flex;flex-direction:column;gap:1rem;overflow:hidden;min-height:0}.col-center{display:flex;flex-direction:column;min-width:0;overflow:hidden;min-height:0}.sidebar-panel{background:var(--dark-850);border:1px solid var(--dark-700);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;height:auto;max-height:100%}.panel-header{flex:0 0 auto;padding:1rem 1.25rem;border-bottom:1px solid var(--dark-700);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dark-400);background:var(--dark-800)}.panel-content{flex:1;overflow-y:auto;padding:1rem}.canvas-container{background:var(--dark-850);border:1px solid var(--dark-700);border-radius:var(--radius-xl);height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}.canvas-toolbar{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;border-bottom:1px solid var(--dark-700);background:var(--dark-800)}.window-controls{display:flex;gap:8px}.window-dot{width:10px;height:10px;border-radius:50%}.dot-red{background:#ef4444}.dot-yellow{background:#f59e0b}.dot-green{background:#22c55e}.canvas-title{font-size:.8125rem;color:var(--dark-300);font-weight:500;display:flex;align-items:center;gap:.5rem}.canvas-area{flex:1;position:relative;overflow:hidden;background:var(--dark-900)}.type-list{display:flex;flex-direction:column;gap:.25rem}.type-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-lg);color:var(--dark-300);font-size:.875rem;font-weight:500;background:transparent;border:1px solid transparent;width:100%;text-align:left;cursor:pointer;transition:all .2s}.type-btn:hover{background:var(--dark-800);color:var(--dark-100)}.type-btn.active{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));color:#fff;box-shadow:0 4px 12px #7c3aed33}.file-tree-container{font-family:var(--font-mono);font-size:.8125rem;padding-bottom:2rem}.status-bar{flex:0 0 auto;padding:.75rem 1rem;border-top:1px solid var(--dark-700);background:var(--dark-800);font-size:.75rem;color:var(--dark-400);display:flex;justify-content:space-between;align-items:center}.status-indicator{display:flex;align-items:center;gap:6px;color:var(--success-500);font-weight:600}.status-dot{width:6px;height:6px;background:currentColor;border-radius:50%;box-shadow:0 0 0 2px #22c55e33}.panel-content::-webkit-scrollbar{width:4px}.panel-content::-webkit-scrollbar-thumb{background:var(--dark-600);border-radius:4px}.text-gradient{background:linear-gradient(135deg,var(--primary-400),var(--accent-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.hidden{display:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--dark-900)}::-webkit-scrollbar-thumb{background:var(--dark-600);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--dark-500)}@media(max-width:1200px){.dashboard-grid{grid-template-columns:280px 1fr 260px}}@media(max-width:1024px){.dashboard-grid{grid-template-columns:280px 1fr}.col-right{display:none}}@media(max-width:768px){.dashboard-grid{display:flex;flex-direction:column;overflow-y:auto;height:auto}.app{overflow:auto;height:auto}.col-left,.col-center{height:auto;overflow:visible}.sidebar-panel,.canvas-container{height:500px;overflow:hidden}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1}.main-content.has-diagram{display:grid;gap:var(--spacing-xl)}@media(min-width:1024px){.main-content.has-diagram{grid-template-columns:380px 1fr;align-items:start}}.hero{position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-200px;left:50%;transform:translate(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(139,92,246,.15) 0%,rgba(6,182,212,.08) 40%,transparent 70%);pointer-events:none;animation:heroGlow 8s ease-in-out infinite alternate}@keyframes heroGlow{0%{transform:translate(-50%) scale(1);opacity:.8}to{transform:translate(-50%) scale(1.1);opacity:1}}.btn-primary{position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .5s}.btn-primary:hover:before{transform:translate(100%)}.diagram-type-btn:hover:not(:disabled):not(.selected){background:var(--dark-700);border-color:var(--primary-500);transform:translate(4px)}.file-tree-item{transition:all var(--transition-fast)}.file-tree-item:hover{background:var(--dark-800);transform:translate(4px)}.code-block pre{counter-reset:line}.code-block pre code{display:block}.sidebar>*{animation:slideInUp .4s ease-out;animation-fill-mode:both}.sidebar>*:nth-child(1){animation-delay:.1s}.sidebar>*:nth-child(2){animation-delay:.2s}.sidebar>*:nth-child(3){animation-delay:.3s}.sidebar>*:nth-child(4){animation-delay:.4s}.sidebar>*:nth-child(5){animation-delay:.5s}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.diagram-panel{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.badge{animation:popIn .3s ease-out}@keyframes popIn{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.loading-spinner{margin:0 auto}.alert{animation:shake .5s ease-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@media(max-width:1023px){.main-content.has-diagram{grid-template-columns:1fr}.sidebar{order:1}.diagram-panel{order:2}}.sidebar{max-height:calc(100vh - 200px);overflow-y:auto;padding-right:8px}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--dark-600);border-radius:2px}.btn:focus-visible,.input:focus-visible,.tab:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.diagram-panel svg{font-family:var(--font-sans)!important}.diagram-panel .node rect,.diagram-panel .node polygon{fill:var(--dark-700)!important;stroke:var(--primary-500)!important}.diagram-panel .edgeLabel{background-color:var(--dark-800)!important}