*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea,#764ba2);color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh}.container{margin:0 auto;max-width:1200px;padding:20px}.header{margin-bottom:30px;text-align:center}.header h1{color:#fff;font-size:2.5rem;font-weight:700;margin-bottom:10px;text-shadow:0 2px 4px #0000004d}.header p{color:#ffffffe6;font-size:1.1rem}.nav-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:30px}.nav-tab{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:25px;color:#fff;cursor:pointer;font-weight:600;padding:12px 24px;transition:all .3s ease}.nav-tab.active{background:#fff3;border-color:#fff6;box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.nav-tab:hover{background:#ffffff26;transform:translateY(-1px)}.visualizer-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #fff3;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:30px}@media (max-width:768px){.container{padding:15px}.header h1{font-size:2rem}.nav-tabs{gap:8px}.nav-tab{font-size:14px;padding:10px 18px}}.sorting-section{text-align:center}.legend-box.unsorted{background:linear-gradient(135deg,#20bf6b,#26d0ce)}.legend-box.comparing{background:linear-gradient(135deg,#ff6b6b,orange)}.legend-box.sorted{background:linear-gradient(135deg,#4ecdc4,#44a08d)}.sorting-container{align-items:flex-end;display:flex;gap:2px;height:300px;justify-content:center;padding:20px}.array-bar{background:linear-gradient(135deg,#20bf6b,#26d0ce);border-radius:4px 4px 0 0;box-shadow:0 2px 8px #0000001a;flex:1 1;max-width:20px;min-width:8px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.array-bar.highlighted{background:linear-gradient(135deg,#ff6b6b,orange);box-shadow:0 4px 15px #ff6b6b66;transform:scale(1.05)}.array-bar.sorted{background:linear-gradient(135deg,#4ecdc4,#44a08d);box-shadow:0 4px 15px #4ecdc466}.progress-bar{background:#e9ecef;border-radius:10px;height:8px;margin:15px 0;overflow:hidden}.progress-fill{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;height:100%;transition:width .3s ease}@media (max-width:768px){.global-controls{gap:15px}.action-buttons,.algorithm-buttons{gap:8px}.algo-btn,.btn{font-size:13px;padding:8px 15px}.legend{gap:15px}.sorting-container{gap:1px;height:200px}.array-bar{max-width:15px;min-width:6px}}.pathfinding-section{text-align:center}.section-title{color:#333;font-size:1.8rem;font-weight:700;margin-bottom:25px;position:relative}.section-title:after{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px;bottom:-8px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.global-controls{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:25px}.control-group{align-items:center;display:flex;flex-direction:column;gap:8px}.control-group label{color:#555;font-size:14px;font-weight:600}.slider{-webkit-appearance:none;background:#ddd;border-radius:3px;cursor:pointer;height:6px;outline:none;width:120px}.slider::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 2px 6px #0003;cursor:pointer;height:18px;width:18px}.slider::-moz-range-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;box-shadow:0 2px 6px #0003;cursor:pointer;height:18px;width:18px}.slider:disabled{cursor:not-allowed;opacity:.5}.btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:25px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .3s ease}.btn:hover:not(:disabled){box-shadow:0 8px 25px #667eea99;transform:translateY(-2px)}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn.secondary{background:linear-gradient(135deg,#ffecd2,#fcb69f);box-shadow:0 4px 15px #fcb69f66;color:#333}.btn.secondary:hover:not(:disabled){box-shadow:0 8px 25px #fcb69f99}.btn.danger{background:linear-gradient(135deg,#ff9a9e,#fecfef);box-shadow:0 4px 15px #ff9a9e66;color:#333}.btn.danger:hover:not(:disabled){box-shadow:0 8px 25px #ff9a9e99}.algorithm-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:25px}.algo-btn{background:#f8f9fa;border:2px solid #e9ecef;border-radius:20px;color:#495057;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:all .3s ease}.algo-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;box-shadow:0 8px 25px #667eea66;color:#fff;transform:translateY(-2px)}.algo-btn:hover:not(.active):not(:disabled){background:#e9ecef;transform:translateY(-1px)}.algo-btn:disabled{cursor:not-allowed;opacity:.6}.tool-selection{margin-bottom:25px}.tool-selection h3{color:#34495e;font-size:16px;margin:10px 0}.tool-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.tool-btn{background:#f8f9fa;border:2px solid #e9ecef;border-radius:20px;color:#495057;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;transition:all .3s ease}.tool-btn.active{box-shadow:0 8px 25px #0003;transform:translateY(-2px)}.tool-btn:hover:not(.active):not(:disabled){background:#e9ecef;transform:translateY(-1px)}.tool-btn:disabled{cursor:not-allowed;opacity:.6}.action-buttons{gap:12px}.action-buttons,.legend{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:30px}.legend{gap:30px}.legend-item{align-items:center;background:#fffc;border-radius:20px;box-shadow:0 4px 12px #0000001a;display:flex;gap:8px;padding:8px 16px}.legend-box{border:1px solid #0000001a;border-radius:4px;height:20px;width:20px}.legend-box.start{background:linear-gradient(135deg,#4caf50,#45a049)}.legend-box.end{background:linear-gradient(135deg,#f44336,#e53935)}.legend-box.wall{background:linear-gradient(135deg,#333,#555)}.legend-box.visited{background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.legend-box.path{background:linear-gradient(135deg,gold,#ffc107)}.visualization-container{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:15px;box-shadow:inset 0 4px 12px #0000001a;margin:20px 0;overflow:hidden;padding:30px;position:relative}.visualization-container:before{animation:shimmer 2s linear infinite;background:linear-gradient(90deg,#667eea,#764ba2,#667eea);background-size:200% 100%;content:"";height:2px;left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.grid-container{align-items:center;background:#ccc;border:2px solid #999;border-radius:8px;flex-direction:column;justify-content:center;max-width:100%;overflow:auto;padding:2px}.grid-container,.grid-row{display:flex;gap:1px}.grid-cell{background-color:#fff;border:none;cursor:pointer;height:18px;position:relative;transition:all .2s ease;width:18px}.grid-cell:hover{transform:scale(1.1)}.grid-cell.start{background:linear-gradient(135deg,#4caf50,#45a049);box-shadow:0 2px 8px #4caf5066}.grid-cell.end{background:linear-gradient(135deg,#f44336,#e53935);box-shadow:0 2px 8px #f4433666}.grid-cell.wall{background:linear-gradient(135deg,#333,#555);box-shadow:0 2px 8px #0000004d}.grid-cell.visited{animation:visitedAnimation .5s ease-out;background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.grid-cell.path{animation:pathAnimation .5s ease-out;background:linear-gradient(135deg,gold,#ffc107);box-shadow:0 2px 8px #ffd70099}@keyframes visitedAnimation{0%{background:linear-gradient(135deg,#667eea,#764ba2);transform:scale(.3)}50%{transform:scale(1.2)}to{background:linear-gradient(135deg,#e3f2fd,#bbdefb);transform:scale(1)}}@keyframes pathAnimation{0%{background:linear-gradient(135deg,#ff6b6b,orange);transform:scale(.6)}50%{transform:scale(1.3)}to{background:linear-gradient(135deg,gold,#ffc107);transform:scale(1)}}.status-display{background:#ffffffe6;border-radius:15px;box-shadow:0 8px 25px #0000001a;margin-top:20px;padding:20px;text-align:center}.status-display h3{color:#333;font-size:1.2rem;margin-bottom:10px}.status-display p{color:#666;margin:5px 0}.instructions{color:#7f8c8d;font-size:14px;margin-top:20px;text-align:center}.instructions p{margin:5px 0}@media (max-width:768px){.global-controls{gap:15px}.action-buttons,.algorithm-buttons,.tool-buttons{gap:8px}.algo-btn,.btn,.tool-btn{font-size:13px;padding:8px 15px}.legend{gap:15px}.grid-cell{height:15px;width:15px}.grid-container{gap:.5px;padding:1px}.grid-row{gap:.5px}}@media (max-width:480px){.grid-cell{height:12px;width:12px}}
/*# sourceMappingURL=main.a513d055.css.map*/