:root {
    --bg:          #F7F5F0;
    --card-bg:     #FFFFFF;
    --text:        #1A1917;
    --text-2:      #55524B;
    --muted:       #8C887E;
    --border:      #E3DFD3;
    --accent:      #B5651D;
    --accent-bg:   rgba(181, 101, 29, .09);
    --accent-dark: #7A4212;
    --up:          #1F5C4C;
    --down:        #B5301D;
}
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.5;
}
h1, h2, h3 { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); font-size: 13.5px; }

.site-header { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 16px 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { font-family: 'Jost', sans-serif; font-weight: 700; font-size: 20px; color: var(--text); }
.site-nav { display: flex; gap: 20px; }
.site-nav a { color: var(--text-2); font-weight: 500; }
.site-nav a:hover { color: var(--accent-dark); text-decoration: none; }

.hero { background: var(--accent-dark); color: #fff; padding: 48px 0; text-align: center; }
.hero h1 { margin: 0 0 10px; font-size: 30px; color: #fff; }
.hero-sub { margin: 0; font-size: 16px; color: rgba(255,255,255,.9); }

.home-sections { padding: 40px 0; }
.home-section { margin-bottom: 40px; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.home-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.home-section-head .material-icons { color: var(--accent); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 16px 0; }
.mini-card {
    display: flex; flex-direction: column; gap: 4px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
}
.mini-card-title { font-weight: 700; font-size: 15px; }
.mini-card-sub { font-size: 12.5px; color: var(--muted); }
.mini-card-value { font-size: 17px; font-weight: 600; }
.mini-card-change { font-size: 13px; font-weight: 600; }
.is-up { color: var(--up); }
.is-down { color: var(--down); }

.page { padding: 32px 0 60px; }
.page-narrow { max-width: 620px; }
.page-empty { text-align: center; padding: 80px 0; }
.back-link { display: inline-block; margin-bottom: 16px; font-size: 13.5px; }
.big-value { font-size: 34px; font-weight: 700; margin: 12px 0 4px; }

.forecast-day { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: var(--card-bg); }
.forecast-day h3 { margin: 0 0 10px; font-size: 16px; }
.forecast-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.forecast-period { display: flex; flex-direction: column; gap: 3px; }
.forecast-period-label { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.forecast-temp { font-size: 18px; font-weight: 600; }
.forecast-resumo { font-size: 13.5px; }

.site-footer { border-top: 1px solid var(--border); padding: 24px 0; margin-top: 40px; }
.site-footer p { margin: 0; font-size: 13px; color: var(--muted); }

.material-icons {
    font-family: 'Material Icons'; font-weight: normal; font-style: normal;
    font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
}