:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #f1eee7; color: #242823; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
header { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 22px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #c8c2b6; font-weight: 800; }
header a { text-decoration: none; }
header span { color: #79766d; font-weight: 500; }
main { width: min(1120px, calc(100% - 36px)); margin: 58px auto 90px; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 28px; }
.intro { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 22px 60px; align-items: end; margin-bottom: 28px; }
.kicker { grid-column: 1 / -1; color: #9c4f36; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0; font: 500 clamp(3.6rem, 9vw, 8rem)/0.86 Georgia, serif; letter-spacing: -0.06em; }
.intro > p:last-child { margin: 0; color: #68685f; font: 1.08rem/1.7 Georgia, serif; }
.report, .empty { padding: 28px; border-radius: 18px; background: #fbf8f1; box-shadow: 0 18px 50px #47413815; }
.report-head { display: flex; justify-content: space-between; align-items: start; }
.report-head p { margin: 0 0 6px; color: #847e72; }
h2 { margin: 0; font: 500 2rem Georgia, serif; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; }
.metrics article { padding: 18px; border: 1px solid #d5cec1; border-radius: 12px; }
.metrics span, .metrics strong { display: block; }
.metrics span { color: #80796f; font-size: 0.78rem; }
.metrics strong { margin-top: 8px; font: 500 1.8rem Georgia, serif; }
.top { border-top: 1px solid #d5cec1; }
.top h3 { font: 500 1.45rem Georgia, serif; }
.top div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid #e2ddd3; }
.generated { margin: 24px 0 0; color: #898277; font-size: 0.78rem; }
.history { padding: 24px; border-radius: 18px; background: #2f5147; color: #f7f1e4; }
.history h2 { margin-bottom: 20px; }
.history a { display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; padding: 13px 0; border-top: 1px solid #ffffff30; text-decoration: none; }
.history small { grid-column: 1 / -1; color: #cbd5ce; }
.empty { min-height: 310px; display: grid; align-content: center; }
.empty p { color: #6b685f; line-height: 1.6; }
@media (max-width: 760px) { main, .intro { grid-template-columns: 1fr; } .intro > * { grid-column: 1; } .metrics { grid-template-columns: 1fr; } }