.calculator-hero { padding-bottom: 5rem; color: #fff; background: radial-gradient(circle at 82% 15%, rgba(255,212,59,.22), transparent 28rem), var(--electric-navy); }
.calculator-hero .lead { max-width: 58rem; color: #c9d4e2; }
.calculator-back { color: #d9e3ee; font-weight: 700; text-decoration: none; }
.calculator-back:hover { color: var(--electric-yellow); }
.calculator-shell { margin-top: -2.8rem; padding-bottom: 3rem; }
.upload-card { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(25rem, 1.15fr); column-gap: 2.5rem; row-gap: 1rem; padding: 2rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 1rem 3rem rgba(7,26,51,.13); }
.upload-copy { padding: .5rem; }
.privacy-note { display: flex; grid-column: 1 / -1; gap: .75rem; padding: 1rem; border-left: .25rem solid var(--electric-yellow); border-radius: .75rem; background: #f7f9fc; }
.privacy-note span { color: #2f7d61; }
.privacy-note p { margin: 0; font-size: .9rem; }
.drop-zone { display: grid; min-height: 15rem; place-items: center; align-content: center; gap: .35rem; padding: 2rem; border: 2px dashed #b7c3d2; border-radius: 1rem; background: #f8fafc; text-align: center; cursor: pointer; transition: .2s ease; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-dragging { border-color: var(--electric-yellow-dark); background: #fff9df; outline: 0; transform: translateY(-2px); }
.drop-zone strong { color: var(--electric-navy); font-size: 1.15rem; }
.drop-zone span:not(.drop-icon), .drop-zone small { color: var(--muted); }
.drop-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: .5rem; border-radius: 1rem; background: var(--electric-yellow); color: var(--electric-navy); font-size: 2rem; font-weight: 900; }
.drop-icon svg { width: 1.65rem; height: 1.65rem; }
.selected-file { align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #dbe3ec; border-radius: .9rem; background: #f8fafc; }
.selected-file:not([hidden]) { display: flex; }
.selected-file div { min-width: 0; flex: 1; }
.selected-file strong, .selected-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file small { color: var(--muted); }
.file-badge { padding: .6rem; border-radius: .55rem; background: var(--electric-navy); color: #fff; font-size: .7rem; font-weight: 900; }
.dataset-selection { margin-top: 1rem; padding: 1rem; border-radius: .9rem; background: #fff7ce; }
.upload-error { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #f0b9c0; border-radius: .75rem; background: #fff2f4; color: #9b2131; font-weight: 650; }
.analysis-results { padding-top: 2rem; }
.analysis-results:not([hidden]) { animation: results-in .55s ease both; }
.section-nav { position: sticky; top: .75rem; z-index: 10; display: flex; justify-content: center; gap: .2rem; width: fit-content; max-width: 100%; margin: 0 auto 1.25rem; padding: .35rem; overflow-x: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 .5rem 1.6rem rgba(7,26,51,.11); backdrop-filter: blur(12px); }
.section-nav a { padding: .55rem .85rem; border-radius: 999px; color: var(--electric-navy); font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.section-nav a:hover { background: var(--electric-yellow); }
.result-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; border-radius: 1.2rem; background: var(--electric-navy); color: #fff; }
.result-intro p { color: #b9c8da; }
.result-actions { display: flex; align-items: center; gap: .8rem; }
.result-vat-switch { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.25); border-radius: .75rem; color: #fff; font-size: .82rem; font-weight: 750; cursor: pointer; }
.result-vat-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--electric-yellow); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: .9rem 0; }
.calculator-kpi { padding: 1.25rem; border: 1px solid #e1e7ee; border-radius: 1rem; background: #fff; }
.calculator-kpi span, .calculator-kpi small { display: block; color: var(--muted); }
.calculator-kpi span { min-height: 2.4em; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.calculator-kpi strong { display: block; margin: .35rem 0; color: var(--electric-navy); font-size: clamp(1.2rem, 2vw, 1.65rem); font-variant-numeric: tabular-nums; }
.insight-panel { margin-bottom: .9rem; padding: 1.2rem; border: 1px solid #e1e7ee; border-radius: 1rem; background: #fff; }
.insight-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }
.insight { padding: 1rem 1.15rem; border-radius: .9rem; background: #fff7ce; color: #4d4218; font-weight: 650; }
.text-report { margin-top: 1rem; border-top: 1px solid #e5eaf0; }
.text-report summary { padding-top: 1rem; color: var(--electric-navy); font-weight: 800; cursor: pointer; }
.text-report #textReport { margin-top: 1rem; color: #34445a; line-height: 1.65; white-space: pre-line; }
.analysis-grid { display: grid; gap: .9rem; margin-bottom: .9rem; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analysis-card { scroll-margin-top: 5rem; margin-bottom: .9rem; padding: 1.5rem; overflow: hidden; border: 1px solid #e1e7ee; border-radius: 1.1rem; background: #fff; box-shadow: 0 .35rem 1.2rem rgba(7,26,51,.055); }
.analysis-grid .analysis-card { min-width: 0; margin-bottom: 0; }
.chart-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.chart-heading h2 { margin: .2rem 0; color: var(--electric-navy); font-size: 1.25rem; }
.chart-heading p { max-width: 42rem; margin: 0; color: var(--muted); font-size: .88rem; }
.chart-state { display: block; width: fit-content; margin-top: .55rem; padding: .28rem .5rem; border-radius: .45rem; background: #fff7ce; color: #66530d; font-size: .72rem; font-weight: 800; }
.timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -.25rem 0 1rem; }
.timeline-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.timeline-presets button { padding: .42rem .7rem; border: 1px solid #ced8e4; border-radius: .6rem; background: #fff; color: var(--electric-navy); font-size: .75rem; font-weight: 800; }
.timeline-presets button:hover, .timeline-presets button.is-active { border-color: var(--electric-yellow-dark); background: var(--electric-yellow); }
#timelineRangeLabel, .range-context { color: var(--muted); font-size: .76rem; font-weight: 650; }
.section-kicker { color: #8a6900; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.metric-switch { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .75rem; font-weight: 750; white-space: nowrap; }
.metric-switch select { min-height: 2.4rem; padding: .35rem 2rem .35rem .6rem; border: 1px solid #d8e0ea; border-radius: .6rem; background-color: #fff; color: var(--electric-navy); font-weight: 700; }
.d3-chart { min-height: 20rem; width: 100%; }
.timeline-chart { min-height: 27rem; }
.heatmap-chart { min-height: 25rem; overflow-x: auto; }
.calendar-chart { min-height: 12rem; overflow-x: auto; }
#monthlyChart { overflow-x: auto; }
.d3-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.d3-chart .axis text { fill: #68768a; font-size: 11px; }
.d3-chart .axis path, .d3-chart .axis line { stroke: #dce3eb; }
.d3-chart .grid line { stroke: #edf1f5; }
.d3-chart .grid path { display: none; }
.d3-empty { display: grid; min-height: 15rem; place-items: center; color: var(--muted); }
.chart-tooltip { position: fixed; z-index: 1000; max-width: 17rem; padding: .7rem .8rem; pointer-events: none; border-radius: .65rem; background: rgba(7,26,51,.95); color: #fff; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2); font-size: .78rem; line-height: 1.45; }
.chart-tooltip strong { color: var(--electric-yellow); }
.negative-card { color: #fff; background: linear-gradient(135deg, #102a4c, #174268); }
.negative-card .chart-heading p { color: #fff; }
.season-comparison-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.season-metric { padding: 1rem; border: 1px solid #e1e7ee; border-top: .28rem solid var(--season-color, var(--electric-navy)); border-radius: .85rem; background: #f8fafc; }
.season-metric:nth-child(1) { --season-color: #4b8bc4; }
.season-metric:nth-child(2) { --season-color: #2f9278; }
.season-metric:nth-child(3) { --season-color: #c99b00; }
.season-metric:nth-child(4) { --season-color: #e87524; }
.season-metric span, .season-metric strong, .season-metric small { display: block; }
.season-metric span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.season-metric strong { margin: .35rem 0; color: var(--electric-navy); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.season-metric small { color: var(--muted); line-height: 1.45; }
.season-metric.is-empty { opacity: .6; }
.season-takeaway { margin: .8rem 0 1.2rem; padding: .75rem 1rem; border-radius: .7rem; background: #fff7ce; color: #4d4218; font-size: .88rem; font-weight: 650; }
.season-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(24rem, .85fr); gap: 1.5rem; align-items: start; }
.season-subheading { min-height: 4.4rem; }
.season-subheading h3 { margin: 0 0 .25rem; color: var(--electric-navy); font-size: 1rem; }
.season-subheading p { margin: 0; color: var(--muted); font-size: .8rem; }
.season-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: .65rem 0 .2rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.season-legend span::before { display: inline-block; width: .65rem; height: .65rem; margin-right: .32rem; border-radius: .18rem; background: var(--legend-color); content: ""; vertical-align: -.05rem; }
.season-legend .winter { --legend-color: #4b8bc4; }.season-legend .spring { --legend-color: #2f9278; }.season-legend .summer { --legend-color: #c99b00; }.season-legend .autumn { --legend-color: #e87524; }.season-legend .price-line { --legend-color: #c65361; }
.season-legend .price-line::before { height: .18rem; border-radius: 999px; vertical-align: .18rem; }
.season-monthly-chart { min-height: 20rem; }
.season-cost-table { min-width: 38rem; font-variant-numeric: tabular-nums; }
.season-cost-table th { color: var(--muted); font-size: .68rem; letter-spacing: .035em; text-transform: uppercase; }
.negative-card .chart-heading h2, .negative-card .section-kicker { color: var(--electric-yellow); }
.negative-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.negative-grid div { padding: 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: .8rem; background: rgba(255,255,255,.07); }
.negative-grid span, .negative-grid strong { display: block; }
.negative-grid span { color: #b9c8da; font-size: .78rem; }
.negative-grid strong { margin-top: .35rem; color: #fff; font-size: 1.35rem; }
.cost-table { min-width: 52rem; font-variant-numeric: tabular-nums; }
.cost-table th { color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.cost-disclaimer { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: .75rem; background: #f4f7fa; color: var(--muted); font-size: .85rem; }
.fixed-comparison-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 1rem 0; }
.fixed-comparison-metric { padding: 1rem; border: 1px solid #e1e7ee; border-radius: .85rem; background: #f8fafc; }
.fixed-comparison-metric span, .fixed-comparison-metric small { display: block; color: var(--muted); }
.fixed-comparison-metric span { min-height: 2.5em; font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.fixed-comparison-metric strong { display: block; margin: .35rem 0; color: var(--electric-navy); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.fixed-price-calculator { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, .55fr) minmax(16rem, 1.35fr); align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.1rem; border-radius: .9rem; background: var(--electric-navy); color: #fff; }
.fixed-price-calculator label span, .fixed-price-calculator label small { display: block; }
.fixed-price-calculator label span { font-weight: 800; }
.fixed-price-calculator label small { margin-top: .25rem; color: #b9c8da; }
.fixed-price-input { display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; background: #fff; }
.fixed-price-input input { min-width: 0; width: 100%; padding: .7rem .8rem; border: 0; outline: 0; color: var(--electric-navy); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fixed-price-input span { padding-right: .8rem; color: var(--muted); font-size: .8rem; font-weight: 800; white-space: nowrap; }
.fixed-price-result { color: #dce6f1; font-size: .9rem; }
.fixed-price-result strong { display: block; color: var(--electric-yellow); font-size: 1.05rem; }
.quality-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.5rem; margin: 0; }
.quality-grid div { display: flex; justify-content: space-between; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid #e8edf3; }
.quality-grid dt { color: var(--muted); font-weight: 500; }
.quality-grid dd { margin: 0; font-weight: 800; text-align: right; }
.quality-warning { margin-top: .75rem; padding: .75rem 1rem; border-radius: .65rem; background: #fff7ce; color: #66530d; font-size: .85rem; }
.analysis-overlay { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem; background: rgba(7,26,51,.96); color: #fff; text-align: center; opacity: 1; transition: opacity .25s ease; }
.analysis-overlay[hidden] { display: none; }
.analysis-overlay small { color: #b9c8da; }
.upload-progress { width: min(30rem, 82vw); }
.upload-progress-track { height: .8rem; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--electric-yellow-dark), var(--electric-yellow)); box-shadow: 0 0 1rem rgba(255,212,59,.35); transition: width .18s ease; }
.upload-progress > small { display: block; margin-top: .65rem; font-variant-numeric: tabular-nums; }
.loading-orbit { position: relative; width: 5rem; height: 5rem; animation: orbit 1.8s linear infinite; }
.loading-orbit[hidden], .upload-progress[hidden] { display: none; }
.loading-orbit span { position: absolute; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--electric-yellow); }
.loading-orbit span:nth-child(1) { left: 1.9rem; top: 0; }.loading-orbit span:nth-child(2) { right: .35rem; bottom: .7rem; }.loading-orbit span:nth-child(3) { left: .35rem; bottom: .7rem; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes results-in { from { opacity: 0; transform: translateY(1rem); } }
@media (max-width: 1199.98px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } .quality-grid { grid-template-columns: repeat(2, 1fr); } .season-detail-grid { grid-template-columns: 1fr; } .season-subheading { min-height: 0; } }
@media (max-width: 991.98px) { .upload-card { grid-template-columns: 1fr; gap: 1rem; } .two-columns { grid-template-columns: 1fr; } .negative-grid, .fixed-comparison-grid, .season-comparison-grid { grid-template-columns: repeat(2, 1fr); } .fixed-price-calculator { grid-template-columns: 1fr 1fr; } .fixed-price-result { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .calculator-hero { padding-bottom: 4rem; } .calculator-shell { margin-top: -2rem; } .upload-card, .analysis-card, .result-intro { padding: 1.15rem; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .section-nav { justify-content: start; border-radius: .8rem; } .result-intro, .result-actions { align-items: stretch; flex-direction: column; } .chart-heading, .timeline-toolbar { align-items: stretch; flex-direction: column; } .metric-switch { width: 100%; justify-content: space-between; } .quality-grid { grid-template-columns: 1fr; } .d3-chart { min-height: 17rem; } .timeline-chart { min-height: 21rem; } .insight-heading { align-items: stretch; flex-direction: column; } .insight-grid { display: block; padding-left: 1.25rem; list-style: disc; } .insight { margin-bottom: .55rem; padding: 0 0 0 .2rem; border-radius: 0; background: transparent; color: var(--ink); } .fixed-price-calculator { grid-template-columns: 1fr; } .fixed-price-result { grid-column: auto; } }
@media (max-width: 420px) { .kpi-grid, .negative-grid, .fixed-comparison-grid, .season-comparison-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .analysis-results:not([hidden]), .loading-orbit { animation: none; } }