body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f7f9fc; color: #333; margin: 0; padding: 0; }
.container { max-width: 900px; margin: 40px auto; background: #fff; border-radius: 15px; padding: 40px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
h1 { text-align: center; color: #1a73e8; margin-bottom: 30px; }
label { display: block; margin-top: 15px; font-weight: bold; }
input[type="number"] { width: 100%; padding: 10px; margin-top: 5px; border-radius: 8px; border: 1px solid #ccc; font-size: 1em; }
input[type="checkbox"] { margin-top: 10px; transform: scale(1.2); }
button { margin-top: 25px; padding: 14px 24px; background-color: #1a73e8; color: #fff; border: none; border-radius: 10px; cursor: pointer; font-size: 1.1em; font-weight: bold; }
button:hover { background-color: #1664c1; }
.result { margin-top: 30px; padding: 25px; background: #e2f0ff; border-radius: 12px; border: 1px solid #1a73e8; font-size: 1.1em; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px 10px; border: 1px solid #ccc; }
th { background-color: #1a73e8; color: #fff; text-align: center; }
td.kwh { text-align: left; }
td.bedrag { text-align: right; }
td:first-child { font-weight: bold; }
.highlight { background-color: #dceaff; font-weight: bold; }

/* Grafiek stijlen */
.chart { margin-top: 30px; width: 100%; }
.bar { height: 30px; margin: 10px 0; border-radius: 6px; color: white; text-align: right; padding-right: 10px; line-height: 30px; font-weight: bold; }
.huidig { background-color: #1a73e8; }
.vanaf2027 { background-color: #ff6600; }
.verschilBesparing { background-color: #34a853; }
.verschilKosten { background-color: #ea4335; }