*{box-sizing:border-box}:root{--color-bg-primary:#fff;--color-bg-secondary:#f9fafb;--color-text-primary:#1f2937;--color-text-secondary:#6b7280;--color-border:#e5e7eb;--color-accent:#3b82f6;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;font-family:var(--font-sans);color:var(--color-text-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fafafa;font-size:14px;line-height:1.6}@media (prefers-color-scheme:dark){:root{--color-bg-primary:#1f2937;--color-bg-secondary:#111827;--color-text-primary:#f3f4f6;--color-text-secondary:#d1d5db;--color-border:#374151}}body{margin:0;padding:0}#root{width:100%;min-height:100vh}html,body,#root{width:100%;height:100%}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}h4{font-size:16px}p{color:var(--color-text-secondary);margin:0}button{cursor:pointer;border:none;outline:none;font-family:inherit}button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}input,select,textarea{font-family:inherit;font-size:inherit}select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.grid-container{background-color:#e5e7eb;border-radius:16px;gap:1px;width:100%;max-width:100%;margin:0 auto;padding:10px;display:grid;box-shadow:0 14px 40px #0f172a14}.grid-node{aspect-ratio:1;cursor:pointer;border:1px solid #d1d5db;border-radius:4px;width:100%;min-width:0;min-height:0;transition:transform .15s,background-color .15s}.grid-node:hover{opacity:.9}.node-empty{background-color:#fff}.node-wall{background-color:#1f2937;border-color:#111827}.node-weight{background-color:#a78bfa;border-color:#7c3aed}.node-start{background-color:#10b981;border-color:#059669;box-shadow:inset 0 0 0 2px #fff}.node-target{background-color:#ef4444;border-color:#dc2626;box-shadow:inset 0 0 0 2px #fff}.node-visited{background-color:#93c5fd;border-color:#3b82f6;animation:.3s ease-out visitPulse}.node-path{background-color:#fbbf24;border-color:#f59e0b;animation:.3s ease-out pathPulse}@keyframes visitPulse{0%{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1)}}@keyframes pathPulse{0%{opacity:.3;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.grid-container{gap:0;padding:4px}.grid-node{border-width:.5px}}@media (width<=480px){.grid-container{gap:0;padding:2px}.grid-node{border:none}}.controls-container{background:linear-gradient(135deg,#f3f4f6 0%,#f9fafb 100%);border-radius:12px;width:100%;padding:20px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000000d}.controls-title{color:#1f2937;text-align:center;letter-spacing:-.5px;margin:0 0 16px;font-size:22px;font-weight:700}.control-section{margin-bottom:10px}.section-header{color:#1f2937;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s;display:flex}.section-header:hover:not(:disabled){background-color:#f9fafb;border-color:#d1d5db}.section-header:disabled{opacity:.6;cursor:not-allowed}.section-content{background:#fff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;padding:10px;animation:.2s ease-out slideDown}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.control-select{cursor:pointer;color:#1f2937;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;width:100%;padding:10px 12px;font-size:14px;transition:all .2s}.control-select:hover:not(:disabled){background-color:#f9fafb;border-color:#9ca3af}.control-select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.control-select:disabled{cursor:not-allowed;opacity:.6;background-color:#f3f4f6}.algorithm-description{color:#6b7280;margin:6px 0 0;font-size:12px;line-height:1.4}.button-group{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;display:grid}.button-group.full{grid-template-columns:1fr}.tool-button{color:#1f2937;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;padding:10px 12px;font-size:12px;font-weight:500;transition:all .2s}.tool-button:hover:not(:disabled){background-color:#f9fafb;border-color:#9ca3af}.tool-button.active{color:#fff;background-color:#3b82f6;border-color:#3b82f6}.tool-button:disabled{opacity:.6;cursor:not-allowed}.action-buttons{flex-direction:column;gap:8px;margin-top:4px;display:flex}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:6px;padding:12px 16px;font-size:13px;font-weight:600;transition:all .2s}.btn-primary{color:#fff;background-color:#10b981}.btn-primary:hover:not(:disabled){background-color:#059669;box-shadow:0 4px 12px #10b98166}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-danger{color:#fff;background-color:#ef4444}.btn-danger:hover:not(:disabled){background-color:#dc2626;box-shadow:0 4px 12px #ef444466}.btn-secondary{color:#fff;background-color:#6b7280}.btn-secondary:hover:not(:disabled){background-color:#4b5563;box-shadow:0 4px 12px #6b728066}.btn:disabled{opacity:.5;cursor:not-allowed}@media (width<=768px){.controls-container{padding:16px}.controls-title{margin-bottom:14px;font-size:18px}.button-group{grid-template-columns:1fr}}.legend-container{background:#fff;border-radius:12px;margin-top:16px;padding:20px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000000d}.legend-title{color:#1f2937;letter-spacing:-.3px;margin:0 0 16px;font-size:16px;font-weight:700}.legend-items{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.legend-item{align-items:center;gap:8px;display:flex}.legend-color{border:1px solid #d1d5db;border-radius:3px;flex-shrink:0;width:20px;height:20px}.legend-label{color:#4b5563;font-size:12px;font-weight:500}.legend-color.node-start{background-color:#10b981;border-color:#059669}.legend-color.node-target{background-color:#ef4444;border-color:#dc2626}.legend-color.node-empty{background-color:#fff}.legend-color.node-wall{background-color:#1f2937;border-color:#111827}.legend-color.node-weight{background-color:#a78bfa;border-color:#7c3aed}.legend-color.node-visited{background-color:#93c5fd;border-color:#3b82f6}.legend-color.node-path{background-color:#fbbf24;border-color:#f59e0b}.legend-instructions{border-top:1px solid #e5e7eb;padding-top:12px}.legend-instructions h4{color:#1f2937;text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px;font-size:12px;font-weight:600}.legend-instructions ul{margin:0;padding-left:16px;list-style:none}.legend-instructions li{color:#4b5563;margin-bottom:6px;font-size:12px;line-height:1.4}.legend-instructions strong{color:#1f2937;font-weight:600}@media (width<=768px){.legend-container{margin-top:12px;padding:16px}.legend-items{grid-template-columns:1fr}}.stats-container{background:#fff;border-radius:12px;margin-top:16px;padding:16px;animation:.3s ease-out slideUp;box-shadow:0 4px 6px #00000012,0 10px 20px #0000000d}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stats-container.success{border-left:4px solid #10b981}.stats-container.no-path{border-left:4px solid #ef4444}.stats-header{color:#1f2937;margin-bottom:12px;font-size:14px;font-weight:700}.stats-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.stat-item{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;flex-direction:column;padding:8px;display:flex}.stat-label{color:#6b7280;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;font-size:11px;font-weight:600}.stat-value{color:#1f2937;font-size:16px;font-weight:700}.stats-info{border-top:1px solid #e5e7eb;padding-top:12px}.stats-info p{color:#4b5563;margin:0;font-size:12px;line-height:1.5}.stats-info strong{color:#1f2937;font-weight:600}@media (width<=768px){.stats-container{margin-top:12px;padding:12px}.stats-grid{grid-template-columns:1fr;gap:8px}}.app{background:linear-gradient(135deg,#fafafa 0%,#f5f5f5 100%);min-height:100vh;padding:20px}.app-layout{grid-template-columns:minmax(0,3fr) minmax(320px,1fr);align-items:start;gap:24px;max-width:1700px;margin:0 auto;display:grid}.main-content{flex-direction:column;gap:20px;display:flex}.grid-wrapper{background:#fff;border-radius:18px;justify-content:center;align-items:center;width:100%;min-height:640px;padding:18px;display:flex;overflow:hidden auto;box-shadow:0 20px 60px #0f172a14}.bottom-panel{min-height:0}.sidebar{flex-direction:column;align-self:start;gap:18px;max-height:calc(100vh - 40px);display:flex;position:sticky;top:20px}@media (width<=1024px){.app-layout{grid-template-columns:1fr}.sidebar{flex-direction:column;order:-1;gap:16px;max-height:none;display:flex;position:static}}@media (width<=768px){.app{padding:12px}.app-layout{gap:12px}.grid-wrapper{min-height:520px;padding:12px;overflow-x:auto}.sidebar{grid-template-columns:1fr}}@media (width<=480px){.app{padding:8px}.app-layout{gap:8px}.grid-wrapper{min-height:420px;padding:8px}}