:root{--color-primary: #007bff;--color-primary-hover: #0056b3;--color-background: #f8f9fa;--color-surface: #ffffff;--color-text: #333333;--color-text-muted: #666666;--color-border: #dee2e6;--color-shadow: rgba(0, 0, 0, .1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--color-background);color:var(--color-text);line-height:1.6;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#fafbfc}#simulation-canvas{display:block;width:100%;height:100%}.scenario-info{position:absolute;top:var(--spacing-lg);left:var(--spacing-lg);background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--color-shadow);max-width:300px;pointer-events:none}.scenario-info h2{font-size:1.1em;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-xs) 0}.scenario-info p{font-size:.85em;color:var(--color-text-muted);line-height:1.4;margin:0}.stats{position:absolute;top:var(--spacing-md);right:var(--spacing-md);background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.85em;color:var(--color-text-muted);box-shadow:0 2px 8px var(--color-shadow)}.stats div{margin-bottom:var(--spacing-xs)}.stats div:last-child{margin-bottom:0}.stats span{color:var(--color-text);font-weight:600}.floating-panel{position:fixed;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 32px var(--color-shadow);z-index:1000;will-change:transform;transition:transform var(--transition-normal)}.floating-panel.dragging{transition:none!important;-webkit-user-select:none;user-select:none}.floating-panel.collapsed .panel-content{display:none}#control-panel{bottom:100px;left:20px;width:240px;max-height:calc(100vh - 140px);overflow-y:auto}#info-panel{bottom:100px;right:20px;width:280px;max-height:300px;overflow-y:auto}.playback-panel{bottom:30px;left:50%;transform:translate(-50%);width:auto}.playback-panel.collapsed{transform:translate(-50%)}.panel-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--color-border);cursor:move;-webkit-user-select:none;user-select:none}.drag-handle{color:var(--color-text-muted);cursor:grab;font-size:12px;line-height:1}.drag-handle:active{cursor:grabbing}.panel-header h3{flex:1;font-size:.85em;font-weight:600;color:var(--color-text);margin:0}.collapse-btn{background:none;border:none;color:var(--color-text-muted);font-size:1.2em;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:background var(--transition-fast)}.collapse-btn:hover{background:var(--color-background)}.panel-content{padding:6px var(--spacing-md)}.panel-section{margin-bottom:6px}.panel-section:last-child{margin-bottom:0}.panel-section label{display:block;font-size:.75em;font-weight:500;color:var(--color-text);margin-bottom:2px}.section-divider{height:1px;background:var(--color-border);margin:var(--spacing-md) 0}.section-group{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--color-border)}.section-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.input-select{width:100%;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.75em;cursor:pointer;transition:border-color var(--transition-fast)}.input-select:hover{border-color:var(--color-primary)}.input-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff1a}input[type=range]{width:100%;height:4px;background:var(--color-border);border-radius:2px;outline:none;-webkit-appearance:none;margin:2px 0;padding:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:background var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover)}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none;transition:background var(--transition-fast)}input[type=range]::-moz-range-thumb:hover{background:var(--color-primary-hover)}.range-value{text-align:right;font-size:.7em;color:var(--color-text-muted);margin-top:1px;line-height:1}.checkbox-group{display:flex;flex-direction:column;gap:3px}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.75em;color:var(--color-text);cursor:pointer}input[type=checkbox]{cursor:pointer;width:14px;height:14px;accent-color:var(--color-primary)}.playback-bar{display:flex;align-items:center;gap:var(--spacing-sm)}.btn-icon{width:36px;height:36px;padding:0;background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.btn-icon:hover:not(:disabled){background-color:var(--color-border);border-color:var(--color-primary)}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.btn-icon-action{height:36px;padding:0 var(--spacing-md);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs)}.btn-icon-action:hover{background-color:var(--color-primary-hover)}#algorithm-description{font-size:.7em;line-height:1.5}#algorithm-description h4{color:var(--color-text);margin-bottom:var(--spacing-xs);font-size:.95em;font-weight:600}#algorithm-description p{color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}#algorithm-description ul{color:var(--color-text-muted);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-md)}#algorithm-description li{margin-bottom:2px}@media(max-width:1200px){#control-panel{width:280px}#info-panel{right:20px;width:300px}}@media(max-width:768px){#control-panel,#info-panel{width:calc(100% - 40px);max-width:400px}#info-panel{inset:auto 20px 100px auto}}