* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #080c14; color: #f1f5f9; font-family: Arial, sans-serif; }
.app { position: fixed; inset: 0; overflow: hidden; }
#gridCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; background: #080c14; cursor: crosshair; touch-action: none; }
.control-panel { position: absolute; z-index: 2; top: 16px; left: 16px; bottom: 16px; width: 300px; max-width: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 22px; border: 1px solid #30445f; border-radius: 12px; background: rgba(10, 18, 32, .94); box-shadow: 0 12px 40px rgba(0,0,0,.36); text-align: left; scrollbar-width: thin; scrollbar-color: #38516d transparent; }
.control-panel.is-hidden { display: none; }
.panel-header h1 { margin: 0 0 6px; font-size: 19px; font-weight: 500; letter-spacing: .3px; }
#algorithmSubtitle { margin: 0 0 22px; font-size: 12px; color: #94a3b8; line-height: 1.5; }
#togglePanelBtn { position: absolute; z-index: 3; top: 20px; left: 332px; background: rgba(16,29,47,.94); }
body.panel-hidden #togglePanelBtn { left: 16px; }
button, select { background: #182538; color: white; border: 1px solid #30445f; border-radius: 6px; padding: 10px 11px; font-size: 13px; }
button { cursor: pointer; }
button:hover { background: #294766; }
select { min-width: 0; width: 100%; }
.algorithm-controls, .setting { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.algorithm-controls { margin-bottom: 16px; }
.algorithm-controls label, .setting label, .pathfinding-controls label { color: #94a3b8; font-size: 12px; }
.settings { display: flex; flex-direction: column; gap: 17px; margin: 16px 0 20px; }
.setting span { color: #38bdf8; font-size: 12px; }
input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: pointer; }
.pattern-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.pattern-controls select { flex: 1; }
.pattern-controls button { white-space: nowrap; }
.pathfinding-controls { flex-direction: column; align-items: stretch; gap: 8px; margin: 16px 0; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.controls button { padding: 10px 5px; }
.path-stats { margin: 20px 0; text-align: center; }
.path-stats h3 { font-size: 14px; font-weight: 400; color: #94a3b8; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px; border: 1px solid #30445f; border-radius: 7px; background: #142033; min-width: 0; }
.stat span { color: #38bdf8; font-size: 16px; overflow-wrap: anywhere; }
.stat label { color: #94a3b8; font-size: 10px; }
#generation { margin: 20px 0 0; color: #38bdf8; font-size: 12px; overflow-wrap: anywhere; line-height: 1.6; }
@media (max-width: 600px) { .control-panel { top: 10px; bottom: 10px; left: 10px; max-width: calc(100vw - 20px); width: min(300px, calc(100vw - 20px)); } #togglePanelBtn { top: 14px; left: auto; right: 14px; } body.panel-hidden #togglePanelBtn { left: auto; right: 14px; } .panel-header { padding-right: 80px; } }