*{box-sizing:border-box}
body{
margin:0;
font-family:Trebuchet MS,sans-serif;
background:linear-gradient(to bottom,#9de8ff 0%,#ffe0f2 40%,#fff9cf 100%);
color:#4b245d;
}
.container{padding:12px;max-width:1000px;margin:auto}
header{text-align:center}
.title-shell{font-size:52px}
h1{font-size:2rem;color:#b00078}
h2{font-size:1rem;color:#6c4ba8}
.forecast-row{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.day-box{
background:rgba(255,255,255,.85);
border-radius:20px;
padding:10px;
min-height:170px;
position:relative;
border:3px solid #ffc4f0;
}
.today{
border:5px solid #ff00aa;
font-weight:bold;
}
.day-date{position:absolute;top:8px;left:10px;font-size:.75rem}
.weather-box{position:absolute;top:8px;right:8px;text-align:center}
.weather-icon{width:34px;height:34px}
.day-label{text-align:center;margin-top:55px;color:#8b008b}
.mussel-pile{position:absolute;bottom:10px;width:100%;text-align:center}
.mussel-icon{width:28px}
.calendar-section{
margin-top:16px;
background:rgba(255,255,255,.8);
padding:16px;
border-radius:20px;
}
.location-box{
position:fixed;
bottom:10px;
right:10px;
background:rgba(255,255,255,.5);
padding:8px;
border-radius:10px;
font-size:.7rem;
}
.location-box input{
border:none;
border-radius:8px;
padding:4px;
}
@media(max-width:768px){
h1{font-size:1.3rem}
h2{font-size:.8rem}
.day-box{min-height:150px}
}