:root{
  --navy:#051C2C; --blue:#2251FF; --sky:#00A9F4; --amber:#E0A12E;
  --slate:#5A6B7B; --line:#D7E1E9; --canvas:#F3F7F9; --paper:#fff;
  --sans:"Segoe UI",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",Arial,sans-serif;
  --serif:Georgia,"Songti TC",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--canvas);color:var(--navy);line-height:1.6;padding:40px 24px}
.wrap{max-width:1080px;margin:0 auto}
header{border-bottom:3px solid var(--navy);padding-bottom:16px;margin-bottom:20px}
.eyebrow{font-size:11px;letter-spacing:.3em;color:var(--sky);text-transform:uppercase;font-weight:700}
h1{font-family:var(--serif);font-size:26px;margin-top:6px}
h1 small{font-family:var(--sans);font-size:14px;color:var(--slate);font-weight:400;letter-spacing:.1em;margin-left:10px}
.updated{font-size:12px;color:var(--slate);margin-top:6px}

.tabs{display:flex;gap:6px;margin:0 0 22px;flex-wrap:wrap}
.tab{appearance:none;border:1px solid var(--line);background:var(--paper);cursor:pointer;
     font-family:var(--sans);font-size:14px;font-weight:600;color:var(--slate);
     padding:9px 20px;border-radius:30px;transition:.15s}
.tab:hover{border-color:var(--blue);color:var(--blue)}
.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}

.grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:0 1px 3px rgba(5,28,44,.05)}
.chart-card h2,.side h2{font-size:13px;letter-spacing:.06em;color:var(--slate);font-weight:700;margin-bottom:16px;text-transform:uppercase}
.pred-num{font-family:var(--serif);font-size:34px;color:var(--blue);font-weight:600}
.pred-label{font-size:12px;color:var(--slate);margin-bottom:4px}
.pred-date{font-size:13px;color:var(--navy);font-weight:600;margin-bottom:14px}
.trend{font-size:12px;color:var(--slate);margin-bottom:16px;padding:8px 10px;background:var(--canvas);border-radius:6px}
.explain{background:var(--canvas);border-left:4px solid var(--amber);border-radius:6px;padding:14px;font-size:14px;color:var(--navy)}
.explain .tag{font-size:10px;letter-spacing:.14em;color:var(--amber);font-weight:700;text-transform:uppercase;display:block;margin-bottom:6px}
.meta{font-size:11px;color:var(--slate);margin-top:16px;line-height:1.8}
.meta b{color:var(--navy)}
footer{text-align:center;font-size:11px;color:var(--slate);margin-top:32px}

@media(max-width:880px){.grid{grid-template-columns:1fr}}