* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #263238;
    line-height: 1.45;
}

a { color: #1565c0; }

/* ---------- Header ---------- */
.topbar {
    background: #15293d;
    color: #fff;
    padding: 22px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title h1 { margin: 0; font-size: 32px; }
.title h1 a { color: #fff; text-decoration: none; }
.title span { color: #b0bec5; font-size: 14px; }
.topbar nav a { color: #fff; text-decoration: none; margin-left: 25px; }
.topbar nav a:hover { color: #64b5f6; }

/* ---------- Banner proxy & privacy ---------- */
.banner {
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    color: #5d4037;
    padding: 9px 5%;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
}
.banner a { color: #5d4037; }

/* ---------- Dashboard ---------- */
.dashboard {
    width: 90%;
    max-width: 1400px;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    align-items: start;
}
.page { width: 90%; max-width: 900px; margin: 30px auto; }

.box {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,.08), 0 5px 15px rgba(0,0,0,.04);
}
.box h2 { margin-top: 0; color: #1565c0; }
.box h3 { margin: 0 0 8px; color: #37474f; font-size: 16px; }
.news { grid-column: 1 / -1; }

.muted { color: #78909c; }
.small { font-size: 12px; }
.source { margin: 16px 0 0; font-size: 11px; color: #90a4ae; }

/* ---------- Meteo ---------- */
.meteo-now { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.meteo-icon { font-size: 64px; line-height: 1; }
.meteo-temp { font-size: 40px; font-weight: 600; line-height: 1.1; }
.meteo-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.day {
    background: #f4f8fb;
    border-radius: 8px;
    padding: 10px 4px;
    text-align: center;
    font-size: 13px;
}
.day-label { font-weight: 600; font-size: 12px; }
.day-icon { font-size: 26px; margin: 4px 0; }

/* ---------- Mercati ---------- */
.market { padding: 12px 0; border-bottom: 1px solid #eceff1; }
.market:last-of-type { border-bottom: none; }
.market-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.spark { width: 100%; height: 60px; display: block; margin: 6px 0 2px; }
.chg { font-weight: 600; }
.chg.up { color: #2e7d32; }
.chg.down { color: #c62828; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.news-col ul { list-style: none; margin: 0; padding: 0; }
.news-col li { padding: 8px 0; border-bottom: 1px solid #eceff1; }
.news-col li:last-child { border-bottom: none; }
.news-col a { text-decoration: none; color: #263238; }
.news-col a:hover { color: #1565c0; text-decoration: underline; }
.news-col .muted { display: block; }

/* ---------- Pagine info ---------- */
table.info { border-collapse: collapse; width: 100%; margin: 12px 0; }
table.info td { padding: 8px 10px; border-bottom: 1px solid #eceff1; font-size: 14px; }
table.info td:first-child { color: #607d8b; width: 40%; }
code { background: #eceff1; padding: 1px 5px; border-radius: 4px; }

/* ---------- Footer ---------- */
footer {
    margin-top: 40px;
    padding: 20px 5%;
    background: #263238;
    color: #cfd8dc;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
footer a { color: #90caf9; text-decoration: none; }

/* ---------- Mobile ---------- */
@media (max-width: 750px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    .topbar nav { margin-top: 15px; }
    .topbar nav a { margin-left: 0; margin-right: 20px; }
    .dashboard { grid-template-columns: 1fr; }
    .news { grid-column: auto; }
    .meteo-days { grid-template-columns: repeat(3, 1fr); }
    footer { flex-direction: column; gap: 10px; }
}