body{
margin:0;
background:#0f172a;
color:white;
font-family:Segoe UI;
}

.navbar{
display:flex;
align-items:center;
gap:12px;
padding:12px 20px;
background:#020617;
border-bottom:1px solid #334155;
}

button,select,input{
padding:8px 12px;
border-radius:6px;
border:none;
}

button{
background:#38bdf8;
cursor:pointer;
}

button:hover{
background:#0ea5e9;
}

.legend{
display:flex;
justify-content:center;
gap:20px;
padding:10px;
background:#020617;
}

.box{
width:18px;
height:18px;
display:inline-block;
margin-right:5px;
}

.start{background:#22c55e;}
.end{background:#ef4444;}
.wall{background:black;}
.visited{background:#3b82f6;}
.path{background:#facc15;}

.canvas-container{
display:flex;
justify-content:center;
margin-top:20px;
}

canvas{
background:#1e293b;
border-radius:8px;
}

.info-panel{
width:600px;
margin:20px auto;
background:#020617;
padding:20px;
border-radius:8px;
text-align:center;
}
.stats{
display:flex;
justify-content:center;
gap:40px;
margin-top:10px;
font-size:16px;
}
/* =========================
   Canvas Smooth Rendering
   ========================= */

canvas{
image-rendering: auto;
transition: all 0.25s ease;
}

/* =========================
   Stats Panel Styling
   ========================= */

.stats{
display:flex;
justify-content:center;
gap:40px;
margin-top:10px;
font-size:16px;
background:#020617;
padding:10px 20px;
border-radius:8px;
width:600px;
margin-left:auto;
margin-right:auto;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}

/* =========================
   Glow Effects
   ========================= */

.box.start{
box-shadow:0 0 8px #22c55e;
}

.box.end{
box-shadow:0 0 8px #ef4444;
}

.box.path{
box-shadow:0 0 10px #facc15;
}

.box.visited{
box-shadow:0 0 8px #3b82f6;
}

/* =========================
   Button Hover Animation
   ========================= */

button{
transition:all 0.2s ease;
}

button:hover{
transform:translateY(-1px);
box-shadow:0 4px 8px rgba(0,0,0,0.4);
}

/* =========================
   Dropdown Styling
   ========================= */

select{
background:#020617;
color:white;
border:1px solid #334155;
}

/* =========================
   Slider Styling
   ========================= */

input[type="range"]{
accent-color:#38bdf8;
cursor:pointer;
}

/* =========================
   Info Panel Glow
   ========================= */

.info-panel{
box-shadow:0 0 12px rgba(56,189,248,0.2);
border:1px solid #1e293b;
}

/* =========================
   Legend UI polish
   ========================= */

.legend{
border-bottom:1px solid #334155;
}

.legend div{
display:flex;
align-items:center;
gap:6px;
}

/* =========================
   Smooth Page Rendering
   ========================= */

body{
scroll-behavior:smooth;
}

.footer{
margin-top:40px;
padding:20px;
text-align:center;
background:#020617;
border-top:1px solid #334155;
font-size:14px;
color:#94a3b8;
}

.footer strong{
color:#38bdf8;
}

.footer-links{
margin-top:8px;
display:flex;
justify-content:center;
gap:20px;
}

.footer-links a{
color:#38bdf8;
text-decoration:none;
transition:0.2s;
}

.footer-links a:hover{
color:#0ea5e9;
}