:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-color: #ffffff;--bg-secondary: #f8f9fa;--text-color: #333333;--text-muted: #6c757d;--border-color: #dee2e6;--primary-color: #0d6efd;--sidebar-bg: #f8f9fa;--accordion-header-bg: #ffffff;--accordion-header-hover: #e9ecef;--graph-bg: #ffffff}.dark-mode{--bg-color: #1a1a1a;--bg-secondary: #2d2d2d;--text-color: #e0e0e0;--text-muted: #a0a0a0;--border-color: #404040;--primary-color: #3d8bfd;--sidebar-bg: #2d2d2d;--accordion-header-bg: #2d2d2d;--accordion-header-hover: #404040;--graph-bg: #1a1a1a}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s}#root{min-height:100vh;display:flex;flex-direction:column}a{font-weight:500;color:#667eea;text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit;cursor:pointer;color:inherit}.file-upload-container{margin:2rem auto;max-width:600px}.file-upload-dropzone{border:2px dashed var(--border-color);border-radius:8px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--bg-secondary);color:var(--text-color)}.file-upload-dropzone:hover{border-color:var(--primary-color);background-color:var(--bg-color);opacity:.9}.file-upload-dropzone.dragging{border-color:var(--primary-color);background-color:var(--accordion-header-hover);transform:scale(1.02)}.file-upload-dropzone.loading{cursor:wait;opacity:.7}.upload-prompt{-webkit-user-select:none;user-select:none}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-text{font-size:1.2rem;font-weight:500;color:var(--text-color);margin-bottom:.5rem}.upload-subtext{color:var(--text-muted);margin-bottom:1rem}.upload-formats{font-size:.9rem;color:var(--text-muted)}.upload-loading{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-color)}.spinner{border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.upload-success{color:#28a745}.upload-success p{margin:.5rem 0}.config-info{font-size:.9rem;color:#666}.upload-again-btn{margin-top:1rem;padding:.5rem 1.5rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.upload-again-btn:hover{background-color:#0056b3}.file-upload-compact{padding:10px;background-color:var(--bg-secondary);border-radius:4px}.compact-upload-btn{width:100%;padding:8px 12px;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.compact-upload-btn:hover{background-color:#0b5ed7;opacity:.9}.compact-upload-btn:disabled{background-color:#ccc;cursor:not-allowed}.compact-info{margin-top:5px;font-size:.8rem;color:var(--text-muted);word-break:break-all}.graph-viewer{position:relative;width:100%;height:100%;background-color:var(--graph-bg);border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.graph-container{position:absolute;inset:0;width:100%;height:100%}.graph-container.no-headers{top:0;height:100%}.graph-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}.graph-loading .spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.graph-loading p{color:#666;font-size:.9rem}.graph-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24;padding:1rem 2rem;border-radius:4px;z-index:10}.graph-stats{position:absolute;top:45px;right:10px;background:#0009;padding:.5rem 1rem;border-radius:4px;display:flex;gap:1rem;font-size:.85rem;z-index:5}.graph-stats span{color:#fff;font-weight:500}.graph-stats span.warning{color:#f39c12}.graph-container canvas{outline:none}.side-panel{width:var(--sidepanel-width);height:100%;background-color:var(--bg-elevated);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;box-shadow:var(--shadow-lg);transition:all var(--transition-base)}.side-panel-header{padding:var(--spacing-5);background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-700) 100%);color:var(--text-inverse);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm)}.side-panel-header h2{margin:0;font-size:var(--text-xl);font-weight:var(--font-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--leading-tight)}.close-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);color:var(--text-inverse);width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-xl);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);line-height:1}.close-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:rotate(90deg)}.close-btn:active{transform:rotate(90deg) scale(.95)}.side-panel-content{flex:1;overflow-y:auto;padding:var(--spacing-5)}.properties-section{margin-bottom:var(--spacing-6)}.property-row{margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--border-color)}.property-row:last-child{border-bottom:none}.property-label{font-weight:var(--font-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:var(--spacing-2);color:var(--text-tertiary)}.property-value{word-break:break-all;font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium)}.property-value pre{background:var(--bg-secondary);padding:var(--spacing-3);border-radius:var(--radius-md);overflow-x:auto;margin:0;font-size:var(--text-xs);font-family:var(--font-family-mono);border:1px solid var(--border-color);color:var(--text-primary);line-height:var(--leading-relaxed)}.references-section{margin-top:var(--spacing-6);padding-top:var(--spacing-6);border-top:2px solid var(--border-color)}.references-section h3{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--spacing-4);color:var(--primary-600)}.dark-mode .references-section h3{color:var(--primary-400)}.references-section ul{list-style:none;padding:0;margin:0}.references-section li{padding:var(--spacing-2) 0;border-bottom:1px dashed var(--border-color);font-size:var(--text-sm)}.references-section li:last-child{border-bottom:none}.ref-desc{color:var(--text-secondary);font-size:var(--text-xs);font-style:italic;margin-top:var(--spacing-1)}.diff-section{margin-bottom:var(--spacing-6)}.diff-message{display:flex;gap:var(--spacing-4);padding:var(--spacing-4);border-radius:var(--radius-lg);border-left-width:4px;border-left-style:solid;background-color:var(--bg-secondary);margin-bottom:var(--spacing-4);box-shadow:var(--shadow-sm);transition:all var(--transition-base)}.diff-message:hover{box-shadow:var(--shadow-md)}.diff-icon{font-size:var(--text-2xl);line-height:1;flex-shrink:0;padding-top:var(--spacing-1)}.diff-content{flex:1;overflow:hidden}.diff-content h3{margin:0 0 var(--spacing-2) 0;font-size:var(--text-base);font-weight:var(--font-semibold)}.diff-content p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}.diff-content ul{margin:var(--spacing-2) 0 0 0;padding-left:var(--spacing-5);list-style-type:disc}.diff-content li{font-size:var(--text-sm);line-height:var(--leading-normal);margin-bottom:var(--spacing-1);color:var(--text-primary);word-break:break-word}.diff-new{background-color:var(--success-50);border-left-color:var(--success-600)}.diff-new .diff-content h3{color:var(--success-700)}.diff-deleted{background-color:var(--error-50);border-left-color:var(--error-600)}.diff-deleted .diff-content h3{color:var(--error-700)}.diff-modified{background-color:var(--warning-50);border-left-color:var(--warning-600)}.diff-modified .diff-content h3{color:var(--warning-700)}.dark-mode .diff-new{background-color:#10b9811a}.dark-mode .diff-new .diff-content h3{color:var(--success-500)}.dark-mode .diff-deleted{background-color:#ef44441a}.dark-mode .diff-deleted .diff-content h3{color:var(--error-500)}.dark-mode .diff-modified{background-color:#f59e0b1a}.dark-mode .diff-modified .diff-content h3{color:var(--warning-500)}.legend-section{margin-top:var(--spacing-4)}.legend-section h3{font-size:var(--text-base);font-weight:var(--font-semibold);margin-bottom:var(--spacing-2);color:var(--text-primary)}.description{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--spacing-5);line-height:var(--leading-normal)}.legend-list{display:flex;flex-direction:column;gap:var(--spacing-3)}.legend-item{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-3);background:var(--bg-primary);border-radius:var(--radius-lg);border:1px solid var(--border-color);transition:all var(--transition-fast)}.legend-item:hover{background-color:var(--bg-secondary);border-color:var(--border-color-hover);box-shadow:var(--shadow-sm)}.switch{position:relative;display:inline-block;width:48px;height:28px;flex-shrink:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--neutral-300);transition:all var(--transition-base);border-radius:var(--radius-full)}.slider:before{position:absolute;content:"";height:24px;width:24px;left:2px;bottom:2px;background-color:#fff;transition:all var(--transition-base);border-radius:var(--radius-full);box-shadow:0 2px 4px #0003}input:checked+.slider{background-color:var(--primary-600)}input:checked+.slider:before{transform:translate(20px)}.dark-mode input:checked+.slider{background-color:var(--primary-500)}.color-swatch{width:28px;height:28px;border-radius:var(--radius-md);flex-shrink:0;box-shadow:var(--shadow-sm);border:2px solid var(--bg-elevated)}.label-text{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);flex:1}.reference-link{background:none;border:none;padding:0;margin:0;color:var(--primary-600);cursor:pointer;text-decoration:none;font-family:inherit;font-size:inherit;transition:all var(--transition-base)}.reference-link:hover{color:var(--primary-700);text-decoration:underline}.reference-link:active{color:var(--primary-800)}.dark-mode .reference-link{color:var(--primary-400)}.dark-mode .reference-link:hover{color:var(--primary-300)}.dark-mode .reference-link:active{color:var(--primary-200)}@media(max-width:1024px){.side-panel{width:320px}}@media(max-width:768px){.side-panel{position:fixed;right:0;top:0;width:100%;max-width:360px;z-index:var(--z-fixed);box-shadow:var(--shadow-xl)}}.search-panel{position:relative;width:400px;z-index:1001}.search-inputs{display:flex;box-shadow:0 2px 4px #0000001a;border-radius:4px;background:var(--bg-color);border:1px solid var(--border-color)}.search-type-select{border:1px solid var(--border-color);border-right:none;border-radius:4px 0 0 4px;padding:8px;background-color:var(--bg-secondary);cursor:pointer;font-size:.9rem;color:var(--text-color)}.search-type-select:focus{outline:none;background-color:var(--accordion-header-hover)}.search-input{flex:1;border:1px solid var(--border-color);border-radius:0 4px 4px 0;padding:8px 12px;font-size:.9rem;background-color:var(--bg-color);color:var(--text-color)}.search-input:focus{outline:none;border-color:var(--primary-color)}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--bg-color);border:1px solid var(--border-color);border-radius:0 0 4px 4px;max-height:300px;overflow-y:auto;box-shadow:0 4px 8px #0000001a;margin-top:-1px}.search-result-item{padding:10px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background-color .2s}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:var(--bg-secondary)}.result-header{font-size:.95rem;color:var(--text-color)}.result-desc{color:var(--text-muted);font-size:.85rem}.result-sub{font-size:.8rem;color:var(--text-muted);margin-top:2px}.result-reason{font-size:.8rem;color:var(--primary-color);margin-top:4px;font-style:italic}.simulator-panel{width:400px;background:var(--bg-color);box-shadow:0 4px 12px #00000026;border-radius:8px;padding:16px;position:relative;z-index:1000}.simulator-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.simulator-header h3{margin:0;font-size:1.1rem;color:var(--text-color)}.simulator-inputs{display:flex;flex-direction:column;gap:10px}.simulator-inputs input{padding:10px;border:1px solid var(--border-color);border-radius:4px;font-size:.9rem;background-color:var(--bg-color);color:var(--text-color)}.simulator-inputs input:focus{outline:none;border-color:var(--primary-color)}.sim-mode{display:flex;border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.simulator-inputs .sim-mode button{flex:1;background:var(--bg-secondary);color:var(--text-color);border-radius:0;padding:6px;font-weight:400}.simulator-inputs .sim-mode button[aria-pressed=true]{background:var(--primary-color);color:#fff;font-weight:500}.simulator-inputs textarea{min-height:160px;resize:vertical;padding:8px;border:1px solid var(--border-color);border-radius:4px;font-family:monospace;font-size:.8rem;background-color:var(--bg-color);color:var(--text-color)}.simulator-inputs textarea:focus{outline:none;border-color:var(--primary-color)}.sim-recognized{display:block;font-size:.8rem;color:var(--text-muted);word-break:break-all}.simulator-inputs button{background:var(--primary-color);color:#fff;border:none;padding:10px;border-radius:4px;cursor:pointer;font-weight:500;transition:background .2s}.simulator-inputs button:hover{filter:brightness(.9)}.simulator-results{margin-top:16px;display:flex;flex-direction:column;gap:10px}.sim-result-card{flex:1;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;padding:10px;cursor:pointer;transition:transform .1s,border-color .2s}.sim-result-card:hover{border-color:var(--text-muted);transform:translateY(-2px)}.sim-result-card.success{border-left:4px solid #2ecc71}.sim-result-card.fail{border-left:4px solid #e74c3c;opacity:.7}.sim-label{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-weight:700}.sim-result-card strong{display:block;font-size:1rem;color:var(--text-color)}.sim-result-card small{display:block;font-size:.8rem;color:var(--text-muted);margin-top:2px}.filter-panel{width:300px;background:var(--bg-color);box-shadow:0 4px 12px #00000026;border-radius:8px;padding:16px;position:relative;z-index:1000}.filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.filter-header h3{margin:0;font-size:1rem;color:var(--text-color)}.btn-reset{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--text-muted);padding:0 4px;transition:transform .2s}.btn-reset:hover{color:#e74c3c;transform:rotate(-180deg)}.filter-group{margin-bottom:12px}.filter-group label{display:block;font-size:.8rem;color:var(--text-muted);margin-bottom:4px;font-weight:500}.filter-group select{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:4px;font-size:.9rem;background-color:var(--bg-color);color:var(--text-color)}.filter-group select:focus{outline:none;border-color:var(--primary-color)}.filter-hint{margin-top:12px;text-align:center;color:var(--text-muted);font-size:.8rem;font-style:italic}.filter-section-header{margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border-color)}.filter-section-header h4{margin:0;font-size:.85rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.filter-chip{display:inline-flex;align-items:center;padding:4px 8px;border-radius:12px;font-size:.85rem;font-weight:500;gap:6px}.filter-chip button{background:none;border:none;color:inherit;cursor:pointer;font-size:1.2rem;line-height:1;padding:0;opacity:.7;transition:opacity .2s}.filter-chip button:hover{opacity:1}.settings-panel{padding:1rem;color:var(--text-color)}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-color)}.setting-label{display:flex;flex-direction:column}.setting-title{font-weight:500;font-size:.9rem}.setting-description{font-size:.75rem;color:var(--text-muted);margin-top:4px}.switch{position:relative;display:inline-block;width:40px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.sidebar{background-color:var(--bg-elevated);border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:width var(--transition-base),background-color var(--transition-base);height:100%;overflow:hidden;position:relative;box-shadow:var(--shadow-md);width:var(--sidebar-width);min-width:var(--sidebar-width)}.sidebar.open{width:450px;min-width:450px}.sidebar.closed{width:64px;min-width:64px}.sidebar-header{display:flex;align-items:center;padding:var(--spacing-4);border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);height:64px;overflow:hidden;transition:all var(--transition-base)}.sidebar.closed .sidebar-header{justify-content:center;padding:var(--spacing-4) 0}.burger-menu{background:transparent;border:none;cursor:pointer;color:var(--text-primary);padding:var(--spacing-2);line-height:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast)}.burger-menu:hover{background-color:var(--bg-tertiary);color:var(--primary-600)}.burger-menu:active{transform:scale(.95)}.sidebar-title{margin-left:var(--spacing-3);font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--text-primary);white-space:nowrap;opacity:1;transition:opacity var(--transition-fast)}.sidebar.closed .sidebar-title{opacity:0;width:0;display:none}.accordion-container{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex:1}.accordion-item{border-bottom:1px solid var(--border-color);transition:all var(--transition-base)}.accordion-item:last-child{border-bottom:none}.accordion-header{width:100%;padding:var(--spacing-4) var(--spacing-5);background:transparent;border:none;text-align:left;font-size:var(--text-sm);color:var(--text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-fast);font-weight:var(--font-medium);white-space:nowrap;position:relative}.accordion-header:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background var(--transition-fast)}.accordion-header .header-label,.accordion-header .label-text,.accordion-header svg,.accordion-header .arrow-icon{color:inherit;transition:color var(--transition-fast)}.accordion-header:hover{background:var(--bg-secondary);color:var(--text-primary)}.accordion-header.active{background:var(--bg-secondary);color:var(--primary-600);font-weight:var(--font-semibold)}.accordion-header.active:before{background:var(--primary-600)}.dark-mode .accordion-header.active{color:var(--primary-400)}.dark-mode .accordion-header.active:before{background:var(--primary-400)}.header-label{display:flex;align-items:center;gap:var(--spacing-3)}.header-label svg{flex-shrink:0;width:20px;height:20px}.sidebar.closed .accordion-header{justify-content:center;padding:var(--spacing-4) 0}.sidebar.closed .label-text,.sidebar.closed .arrow-icon{display:none}.sidebar.closed .accordion-header.active{border-left:none;background:var(--bg-tertiary)}.accordion-content{padding:var(--spacing-5);background:var(--bg-primary);border-top:1px solid var(--border-color);animation:slideDown var(--transition-base)}.accordion-container::-webkit-scrollbar{width:6px}.accordion-container::-webkit-scrollbar-track{background:transparent}.accordion-container::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:var(--radius-full);transition:background var(--transition-fast)}.accordion-container::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}.dark-mode .accordion-container::-webkit-scrollbar-thumb{background:var(--neutral-600)}.dark-mode .accordion-container::-webkit-scrollbar-thumb:hover{background:var(--neutral-500)}.sidebar-footer{border-top:1px solid var(--border-color);background:var(--bg-secondary);margin-top:auto;padding:var(--spacing-4)}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}@media(max-width:1024px){.sidebar.open{width:320px;min-width:320px}}@media(max-width:768px){.sidebar{position:absolute;left:0;top:0;height:100%;z-index:var(--z-fixed)}.sidebar.closed{transform:translate(-100%)}.sidebar.open{transform:translate(0);width:280px;min-width:280px;box-shadow:var(--shadow-xl)}}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:var(--bg-color);color:var(--text-color);padding:2rem;border-radius:8px;max-width:500px;width:90%;box-shadow:0 4px 6px #0000001a;border:1px solid var(--border-color);text-align:center}.modal-content h2{margin-top:0;margin-bottom:1rem;color:var(--text-color)}.modal-content p{margin-bottom:1.5rem;line-height:1.6;color:var(--text-color)}.modal-confirm-btn{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}.modal-confirm-btn:hover{background-color:#0b5ed7;opacity:.9}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:12px;min-width:300px;max-width:500px;padding:16px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;pointer-events:auto;animation:slideIn .3s ease-out;border-left:4px solid}.toast-exit{animation:slideOut .3s ease-out forwards}.toast-success{border-left-color:#10b981}.toast-success .toast-icon{color:#10b981}.toast-error{border-left-color:#ef4444}.toast-error .toast-icon{color:#ef4444}.toast-warning{border-left-color:#f59e0b}.toast-warning .toast-icon{color:#f59e0b}.toast-info{border-left-color:#3b82f6}.toast-info .toast-icon{color:#3b82f6}.toast-icon{flex-shrink:0;margin-top:2px}.toast-content{flex:1}.toast-title{font-weight:600;font-size:.95rem;color:#1e293b;margin-bottom:4px}.toast-message{font-size:.875rem;color:#64748b;line-height:1.4}.toast-close{flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;color:#94a3b8;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.toast-close:hover{background:#f1f5f9;color:#475569}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}@media(max-width:640px){.toast-container{left:10px;right:10px;top:10px}.toast{min-width:auto;max-width:none}}.analytics-panel{padding:2rem;height:100%;overflow-y:auto;background-color:var(--bg-secondary);color:var(--text-color)}.analytics-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--text-muted);font-size:1.1rem}.analytics-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);gap:20px}.analytics-header h2{margin:0;color:var(--text-color)}.generate-report-btn{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}.generate-report-btn:hover{background-color:#0b5ed7;opacity:.9}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem}.analytics-card{background-color:var(--bg-color);padding:1.5rem;border-radius:8px;box-shadow:0 2px 4px #0000000d;border:1px solid var(--border-color);text-align:center;transition:transform .2s}.analytics-card:hover{transform:translateY(-2px)}.analytics-val{display:block;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.analytics-label{color:var(--text-muted);font-size:.9rem;font-weight:500}.analytics-details{background-color:var(--bg-color);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color)}.analytics-details h3{margin-top:0;margin-bottom:1rem;color:var(--text-color)}.details-list{display:flex;gap:2rem}.detail-item{font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.generate-report-btn{display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s ease}.generate-report-btn:disabled{cursor:not-allowed;opacity:.7}.generate-report-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003}.diff-viewer-container{height:100%;display:flex;flex-direction:column;background-color:var(--bg-primary, #fff);color:var(--text-primary, #333)}.diff-controls{padding:1rem;border-bottom:1px solid var(--border-color, #e0e0e0);display:flex;gap:1rem;align-items:center;background-color:var(--bg-secondary, #f5f5f5)}.btn-back{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--text-color);cursor:pointer;font-size:1rem;padding:8px 12px;border-radius:4px;transition:background-color .2s}.btn-back:hover{background-color:var(--hover-color)}.diff-stats{margin-left:auto;display:flex;gap:1rem;align-items:center;font-size:.9rem;font-weight:500}.diff-visualization{flex:1;position:relative;overflow:hidden}.diff-visualization .side-panel{position:absolute;right:0;top:0;bottom:0;z-index:20}.diff-empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary, #666);font-size:1.1rem}.diff-controls select{padding:.5rem;border-radius:4px;border:1px solid var(--border-color, #ccc);background-color:var(--input-bg, #fff);color:var(--text-primary, #333)}.diff-controls button{padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:opacity .2s}.diff-controls button:disabled{opacity:.6;cursor:not-allowed}.diff-controls button.compare-btn{background-color:#007bff;color:#fff}.diff-controls button.compare-btn:hover:not(:disabled){background-color:#0056b3}.dark-mode .diff-viewer-container{--bg-primary: #1e1e1e;--text-primary: #e0e0e0;--bg-secondary: #252526;--border-color: #3e3e42;--input-bg: #333;--text-secondary: #aaa}.page-container{width:100%;height:100%;overflow-y:auto;background:var(--bg-color);padding:2rem}.page-content{max-width:900px;margin:0 auto;color:var(--text-color)}.page-content h1{font-size:2.5rem;margin-bottom:2rem;color:var(--primary-color);border-bottom:3px solid var(--primary-color);padding-bottom:.5rem}.page-content h2{font-size:1.8rem;margin-top:2rem;margin-bottom:1rem;color:var(--text-color)}.page-content h3{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.75rem;color:var(--text-color-secondary)}.page-content p{line-height:1.7;margin-bottom:1rem;color:var(--text-color-secondary)}.page-content ul{margin-bottom:1.5rem;padding-left:2rem}.page-content li{margin-bottom:.75rem;line-height:1.6;color:var(--text-color-secondary)}.page-content strong{color:var(--text-color);font-weight:600}.help-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--card-bg);border-radius:8px;border-left:4px solid var(--primary-color)}.about-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--card-bg);border-radius:8px}.tech-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1rem}.tech-category{padding:1rem;background:var(--bg-color);border-radius:6px;border:1px solid var(--border-color)}.tech-category h3{margin-top:0;color:var(--primary-color);border-bottom:2px solid var(--primary-color);padding-bottom:.5rem}.support-section{background:linear-gradient(135deg,var(--card-bg) 0%,var(--bg-color) 100%);border:2px solid var(--primary-color)}.kofi-container{text-align:center;margin:2rem 0}.kofi-button{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:#ff5e5b;color:#fff;text-decoration:none;border-radius:8px;font-size:1.1rem;font-weight:600;transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.kofi-button:hover{background:#e54b47;transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.kofi-icon{width:32px;height:32px;background:#fff;border-radius:50%;padding:4px}.support-note{text-align:center;font-style:italic;color:var(--text-color-secondary);margin-top:1rem}.impressum-section{margin-bottom:2.5rem;padding:1.5rem;background:var(--card-bg);border-radius:8px}.impressum-note{margin-top:2rem;padding:1rem;background:var(--warning-bg, #fff3cd);border:1px solid var(--warning-border, #ffc107);border-radius:6px;color:var(--warning-text, #856404);font-size:.95rem}[data-theme=dark] .impressum-note{--warning-bg: #3a3000;--warning-border: #ffc107;--warning-text: #ffd54f}@media(max-width:768px){.page-container{padding:1rem}.page-content h1{font-size:2rem}.page-content h2{font-size:1.5rem}.tech-stack{grid-template-columns:1fr}}:root{--primary-50: #eef2ff;--primary-100: #e0e7ff;--primary-200: #c7d2fe;--primary-300: #a5b4fc;--primary-400: #818cf8;--primary-500: #6366f1;--primary-600: #4f46e5;--primary-700: #4338ca;--primary-800: #3730a3;--primary-900: #312e81;--neutral-50: #f9fafb;--neutral-100: #f3f4f6;--neutral-200: #e5e7eb;--neutral-300: #d1d5db;--neutral-400: #9ca3af;--neutral-500: #6b7280;--neutral-600: #4b5563;--neutral-700: #374151;--neutral-800: #1f2937;--neutral-900: #111827;--success-50: #ecfdf5;--success-500: #10b981;--success-600: #059669;--success-700: #047857;--warning-50: #fffbeb;--warning-500: #f59e0b;--warning-600: #d97706;--warning-700: #b45309;--error-50: #fef2f2;--error-500: #ef4444;--error-600: #dc2626;--error-700: #b91c1c;--info-50: #eff6ff;--info-500: #3b82f6;--info-600: #2563eb;--info-700: #1d4ed8;--bg-primary: #ffffff;--bg-secondary: var(--neutral-50);--bg-tertiary: var(--neutral-100);--bg-elevated: #ffffff;--text-primary: var(--neutral-900);--text-secondary: var(--neutral-600);--text-tertiary: var(--neutral-500);--text-inverse: #ffffff;--border-color: var(--neutral-200);--border-color-hover: var(--neutral-300);--border-color-focus: var(--primary-500);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", "Fira Code", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75;--spacing-0: 0;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--radius-sm: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-full: 9999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--header-height: 80px;--sidebar-width: 300px;--sidepanel-width: 400px}.dark-mode{--bg-primary: var(--neutral-900);--bg-secondary: var(--neutral-800);--bg-tertiary: var(--neutral-700);--bg-elevated: var(--neutral-800);--text-primary: var(--neutral-50);--text-secondary: var(--neutral-300);--text-tertiary: var(--neutral-400);--text-inverse: var(--neutral-900);--border-color: var(--neutral-700);--border-color-hover: var(--neutral-600);--border-color-focus: var(--primary-400);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 10px 10px -5px rgba(0, 0, 0, .3)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-elevated{background-color:var(--bg-elevated)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.transition-fast{transition:all var(--transition-fast)}.transition-base{transition:all var(--transition-base)}.transition-slow{transition:all var(--transition-slow)}*{margin:0;padding:0;box-sizing:border-box}.app{height:100vh;display:flex;flex-direction:column;font-family:var(--font-family-sans);background-color:var(--bg-secondary);color:var(--text-primary);overflow:hidden;transition:background-color var(--transition-base),color var(--transition-base)}.app-header{height:var(--header-height);background:linear-gradient(135deg,var(--primary-600) 0%,var(--primary-700) 100%);color:var(--text-inverse);padding:var(--spacing-5) var(--spacing-8);display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--shadow-md);position:relative;z-index:var(--z-sticky);transition:all var(--transition-base)}.app-header h1{font-size:var(--text-3xl);font-weight:var(--font-bold);margin:0;letter-spacing:-.025em;line-height:var(--leading-tight)}.app-header p{font-size:var(--text-sm);opacity:.95;margin-top:var(--spacing-1);font-weight:var(--font-normal)}.header-meta{display:flex;justify-content:center;align-items:center;gap:var(--spacing-4);font-size:var(--text-sm);margin-top:var(--spacing-2);font-weight:var(--font-medium)}.header-meta span{display:flex;align-items:center;gap:var(--spacing-2)}.header-meta strong{font-weight:var(--font-semibold);color:var(--text-inverse)}.header-meta .separator{color:#fff6;font-weight:var(--font-normal)}.app-main{flex:1;display:flex;flex-direction:row;overflow:hidden;min-height:0}.layout-container{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:var(--bg-secondary)}.error-banner{background:linear-gradient(135deg,var(--error-500) 0%,var(--error-600) 100%);color:#fff;padding:var(--spacing-4) var(--spacing-6);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-md);font-size:var(--text-sm);font-weight:var(--font-medium);border-left:4px solid var(--error-700);animation:slideDown var(--transition-base)}.error-banner strong{font-weight:var(--font-bold);margin-right:var(--spacing-2)}.error-banner button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-xl);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);line-height:1;padding:0}.error-banner button:hover{background:#ffffff4d;border-color:#ffffff80}.graph-wrapper{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:row;background-color:var(--bg-primary)}.placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-primary);padding:var(--spacing-8);gap:var(--spacing-6)}.placeholder p{font-size:var(--text-lg);color:var(--text-secondary);font-weight:var(--font-medium);animation:pulse 2s ease-in-out infinite}.graph-controls{background:var(--bg-elevated);padding:var(--spacing-4);border-radius:var(--radius-lg);margin-bottom:var(--spacing-4);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all var(--transition-base)}.graph-controls:hover{box-shadow:var(--shadow-lg);border-color:var(--border-color-hover)}.graph-controls label{display:inline-flex;align-items:center;gap:var(--spacing-3);font-weight:var(--font-medium);color:var(--text-primary);font-size:var(--text-sm)}.graph-controls select{padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-size:var(--text-sm);font-family:var(--font-family-sans);transition:all var(--transition-fast);outline:none}.graph-controls select:hover{border-color:var(--primary-500);box-shadow:0 0 0 3px #6366f11a}.graph-controls select:focus{border-color:var(--border-color-focus);box-shadow:0 0 0 3px #6366f133}.node-details{margin-top:var(--spacing-4);background:var(--bg-elevated);padding:var(--spacing-5);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all var(--transition-base)}.node-details h3{margin:0 0 var(--spacing-4) 0;color:var(--text-primary);font-size:var(--text-lg);font-weight:var(--font-semibold);border-bottom:2px solid var(--primary-500);padding-bottom:var(--spacing-3)}.node-details pre{background:var(--bg-secondary);padding:var(--spacing-4);border-radius:var(--radius-md);overflow-x:auto;font-size:var(--text-sm);font-family:var(--font-family-mono);line-height:var(--leading-relaxed);max-height:400px;overflow-y:auto;border:1px solid var(--border-color);color:var(--text-primary)}.panel-toggle{display:flex;margin-bottom:var(--spacing-3);gap:var(--spacing-2);background:var(--bg-secondary);padding:var(--spacing-1);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.panel-toggle button{background:transparent;border:none;padding:var(--spacing-2) var(--spacing-4);cursor:pointer;font-weight:var(--font-medium);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative}.panel-toggle button:hover{color:var(--text-primary);background:var(--bg-elevated)}.panel-toggle button.active{color:var(--primary-600);background:var(--bg-elevated);box-shadow:var(--shadow-sm)}.dark-mode .panel-toggle button.active{color:var(--primary-400)}.app-footer{background:var(--bg-elevated);color:var(--text-secondary);padding:var(--spacing-4) var(--spacing-8);text-align:center;border-top:1px solid var(--border-color);font-size:var(--text-xs);font-weight:var(--font-medium)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:1024px){.app-header{padding:var(--spacing-4) var(--spacing-6)}.app-header h1{font-size:var(--text-2xl)}.header-meta{font-size:var(--text-xs);gap:var(--spacing-2)}}@media(max-width:768px){.app-header{height:auto;padding:var(--spacing-3) var(--spacing-4)}.app-header h1{font-size:var(--text-xl)}.header-meta{flex-direction:column;gap:var(--spacing-1)}.header-meta .separator{display:none}.app-main,.graph-wrapper{flex-direction:column}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--neutral-400);border-radius:var(--radius-full);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--neutral-500)}.dark-mode ::-webkit-scrollbar-thumb{background:var(--neutral-600)}.dark-mode ::-webkit-scrollbar-thumb:hover{background:var(--neutral-500)}.app-footer{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.footer-link{background:none;border:none;color:var(--primary-color);cursor:pointer;padding:var(--spacing-1) var(--spacing-2);font-size:var(--text-xs);font-weight:var(--font-medium);transition:all var(--transition-fast);border-radius:var(--radius-sm)}.footer-link:hover{background:var(--primary-color);color:#fff;transform:translateY(-1px)}.footer-separator{color:var(--text-color-secondary);font-size:var(--text-xs)}.error-boundary{position:fixed;inset:0;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.error-boundary__container{background:#fff;border-radius:12px;padding:40px;max-width:600px;width:100%;box-shadow:0 20px 60px #0000004d;text-align:center}.error-boundary__icon{font-size:64px;margin-bottom:20px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.error-boundary__title{font-size:28px;font-weight:600;color:#1a202c;margin:0 0 12px}.error-boundary__message{font-size:16px;color:#4a5568;margin:0 0 32px;line-height:1.6}.error-boundary__actions{display:flex;gap:12px;justify-content:center;margin-bottom:24px}.error-boundary__button{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.error-boundary__button--primary{background:#667eea;color:#fff}.error-boundary__button--primary:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.error-boundary__button--secondary{background:#e2e8f0;color:#4a5568}.error-boundary__button--secondary:hover{background:#cbd5e0;transform:translateY(-1px)}.error-boundary__details{margin-top:24px;text-align:left;background:#f7fafc;border-radius:8px;padding:16px}.error-boundary__details summary{cursor:pointer;font-weight:500;color:#2d3748;-webkit-user-select:none;user-select:none;outline:none}.error-boundary__details summary:hover{color:#667eea}.error-boundary__stack,.error-boundary__component-stack{margin:12px 0 0;padding:12px;background:#1a202c;color:#48bb78;border-radius:6px;font-size:12px;font-family:Courier New,monospace;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.error-boundary__component-stack{color:#f6ad55}