css
 {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'Segoe UI', sans-serif;
 background: #1a1a2e;
 color: #eee;
 min-height: 100vh;
 padding: 20px;
}

h1 {
 text-align: center;
 font-size: 1.8rem;
 margin-bottom: 20px;
 color: #e0a800;
 letter-spacing: 2px;
}

.board {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto auto auto;
 gap: 20px;
 max-width: 1100px;
 margin: 0 auto;
}

.card {
 background: #16213e;
 border-radius: 12px;
 padding: 20px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.card h2 {
 font-size: 1rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: #e0a800;
 margin-bottom: 12px;
 border-bottom: 1px solid #e0a80033;
 padding-bottom: 8px;
}

/ ── Clock ── /
#clock {
 font-size: 3rem;
 font-weight: bold;
 text-align: center;
 color: #fff;
 letter-spacing: 4px;
}

#date-display {
 text-align: center;
 font-size: 1rem;
 color: #aaa;
 margin-top: 6px;
}

/ ── Weather ── /
#weather-display {
 font-size: 1.1rem;
 line-height: 1.8;
}

#weather-display .temp {
 font-size: 2.5rem;
 font-weight: bold;
 color: #fff;
}

.weather-refresh {
 display: flex;
 justify-content: flex-end;
 margin-bottom: 12px;
}

.weather-refresh button {
 padding: 8px 14px;
 background: #e0a800;
 color: #1a1a2e;
 border: none;
 border-radius: 8px;
 font-weight: bold;
 cursor: pointer;
 font-size: 0.85rem;
}

/ ── Traffic ── /
#map-container {
 width: 100%;
 border-radius: 8px;
 overflow: hidden;
}

#map-container iframe {
 width: 100%;
 height: 260px;
 border: 0;
 border-radius: 8px;
 display: block;
}

#map-placeholder {
 width: 100%;
 height: 260px;
 border-radius: 8px;
 background: #0f3460;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #aaa;
 font-size: 0.9rem;
 text-align: center;
 line-height: 1.8;
 padding: 20px;
}

.map-controls {
 display: flex;
 gap: 8px;
 margin-bottom: 12px;
 flex-wrap: wrap;
}

.map-controls input {
 flex: 1;
 padding: 8px 12px;
 border-radius: 8px;
 border: none;
 background: #0f3460;
 color: #fff;
 font-size: 0.85rem;
 min-width: 160px;
}

.map-controls button {
 padding: 8px 14px;
 background: #e0a800;
 color: #1a1a2e;
 border: none;
 border-radius: 8px;
 font-weight: bold;
 cursor: pointer;
 font-size: 0.85rem;
}

.zoom-controls {
 display: flex;
 gap: 6px;
 margin-bottom: 10px;
}

.zoom-controls button {
 padding: 6px 12px;
 background: #0f3460;
 color: #e0a800;
 border: 1px solid #e0a80055;
 border-radius: 6px;
 cursor: pointer;
 font-size: 0.85rem;
 font-weight: bold;
}

.zoom-controls button.active {
 background: #e0a800;
 color: #1a1a2e;
}

/ ── Calendar ── /
#calendar-display {
 line-height: 1.8;
}

.event-item {
 background: #0f3460;
 border-radius: 8px;
 padding: 8px 12px;
 margin-bottom: 8px;
 font-size: 0.9rem;
}

.event-item span {
 color: #e0a800;
 font-weight: bold;
 margin-right: 8px;
}

.calendar-form {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 12px;
}

.calendar-form input {
 padding: 8px 12px;
 border-radius: 8px;
 border: none;
 background: #0f3460;
 color: #fff;
 font-size: 0.9rem;
}

.calendar-form button {
 padding: 8px;
 background: #e0a800;
 color: #1a1a2e;
 border: none;
 border-radius: 8px;
 font-weight: bold;
 cursor: pointer;
}

/ ── Shopping List ── /
.full-width {
 grid-column: 1 / -1;
}

.shopping-form {
 display: flex;
 gap: 8px;
 margin-bottom: 12px;
}

.shopping-form input {
 flex: 1;
 padding: 8px 12px;
 border-radius: 8px;
 border: none;
 background: #0f3460;
 color: #fff;
 font-size: 0.9rem;
}

.shopping-form button {
 padding: 8px 14px;
 background: #e0a800;
 color: #1a1a2e;
 border: none;
 border-radius: 8px;
 font-weight: bold;
 cursor: pointer;
}

#shopping-list {
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

#shopping-list li {
 background: #0f3460;
 padding: 8px 14px;
 border-radius: 20px;
 font-size: 0.9rem;
 display: flex;
 align-items: center;
 gap: 8px;
}

#shopping-list li.checked {
 text-decoration: line-through;
 opacity: 0.5;
}

#shopping-list li button {
 background: transparent;
 border: none;
 color: #e0a800;
 cursor: pointer;
 font-size: 1rem;
}