:root {
    color-scheme: dark;
    --background: #0d1115;
    --surface: #182027;
    --surface-light: #202a31;
    --border: #33414a;
    --text: #f1f5f7;
    --muted: #aebac2;
    --accent: #62d792;
    --danger: #ff8b7e;
    --strom: #8f84dd;
    --gas: #9bcf72;
    --wasser: #5c75ef;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: Arial, sans-serif;
}

.page {
    width: min(76rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 3rem;
}

.page--narrow { width: min(34rem, calc(100% - 2rem)); }

.card {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.5rem); }
h2 { margin: 0; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: .25rem; color: var(--muted); font-size: .9rem; }

label {
    display: block;
    margin: 1rem 0 .4rem;
    font-weight: 700;
}

input {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: #10171c;
    color: var(--text);
    font: inherit;
}

input:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(98, 215, 146, .2);
}

button,
.button {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .8rem 1.1rem;
    border: 0;
    border-radius: .55rem;
    background: var(--accent);
    color: #08130d;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.message {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-radius: .55rem;
    background: var(--surface-light);
}

.message--success { border: 1px solid var(--accent); color: var(--accent); }
.message--error { border: 1px solid #80583d; color: #ffad79; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logout-form { margin: 0; }
.logout-form button {
    margin: 0;
    padding: .65rem .9rem;
    background: var(--surface-light);
    color: var(--text);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.button--secondary {
    margin: 0;
    padding: .65rem .9rem;
    background: var(--surface-light);
    color: var(--text);
}

.dashboard-intro { margin: 0 0 1.5rem; color: var(--muted); }

.meter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.meter-card {
    --meter-color: var(--accent);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--meter-color) 55%, var(--border));
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: inset 0 .3rem 0 var(--meter-color);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease;
}

.meter-card:hover,
.meter-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--meter-color);
}

.meter-card--electricity { --meter-color: var(--strom); }
.meter-card--gas { --meter-color: var(--gas); }
.meter-card--water { --meter-color: var(--wasser); }

.meter-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.25rem .7rem;
}

.meter-card__header h2 { font-size: 1.65rem; }
.meter-number { margin-top: .35rem; color: var(--muted); font-size: .82rem; }

.latest-reading { text-align: right; white-space: nowrap; }
.latest-reading strong { display: block; font-size: 1.65rem; }
.latest-reading span { color: var(--muted); font-size: .82rem; }

.reading-date { padding: 0 1.25rem 1.1rem; color: var(--muted); font-size: .82rem; }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

.metric {
    min-width: 0;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

.metric:nth-child(2) { border-right: 1px solid var(--border); }
.metric--wide { grid-column: 1 / -1; border-top: 0; }
.metric__label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .78rem; }
.metric strong { display: block; font-size: 1.15rem; }
.metric small { display: block; margin-top: .3rem; color: var(--muted); }

.comparison {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 1.2rem;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, .025);
}

.comparison span { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .75rem; }
.comparison strong { font-size: .95rem; }
.trend { white-space: nowrap; font-weight: 700; }
.trend--up { color: var(--danger); }
.trend--down { color: var(--accent); }
.trend--neutral { color: var(--muted); }

.calculation-note {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: .8rem;
}

.detail-page { --meter-color: var(--accent); }
.detail-page--electricity { --meter-color: var(--strom); }
.detail-page--gas { --meter-color: var(--gas); }
.detail-page--water { --meter-color: var(--wasser); }

.back-link {
    display: inline-block;
    margin-bottom: .55rem;
    color: var(--meter-color);
    font-weight: 700;
    text-decoration: none;
}

.detail-section {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-heading h2 { margin: 0; }
.section-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }

.period-form {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    margin: 0;
}

.period-form label { margin: 0 0 .65rem; }
.period-form select {
    min-width: 7rem;
    padding: .65rem .75rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: #10171c;
    color: var(--text);
    font: inherit;
}

.period-form button { margin: 0; padding: .65rem .85rem; }

.chart-scroll { overflow-x: auto; }

.bar-chart {
    display: block;
    width: 100%;
    min-width: 58rem;
    color: var(--meter-color);
}

.chart-axis { stroke: var(--border); stroke-width: 2; }
.chart-bar { fill: currentColor; opacity: .88; }
.chart-bar--partial { opacity: .42; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 4; }
.chart-value { fill: var(--text); font-size: 19px; font-weight: 700; }
.chart-label { fill: var(--muted); font-size: 18px; }
.chart-note { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }

.cumulative-chart {
    display: block;
    width: 100%;
    min-width: 58rem;
}

.cumulative-grid {
    stroke: color-mix(in srgb, var(--border) 70%, transparent);
    stroke-width: 1;
}

.cumulative-grid--horizontal { stroke-dasharray: 4 6; }
.cumulative-axis-label { fill: var(--muted); font-size: 14px; }

.cumulative-line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cumulative-line--0 { stroke: var(--meter-color); }
.cumulative-line--1 { stroke: #d0d8dd; }
.cumulative-line--2 { stroke: #f1b75c; }
.cumulative-line--3 { stroke: #62b7dc; }

.cumulative-point {
    stroke: var(--surface);
    stroke-width: 2;
}

.cumulative-point--0 { fill: var(--meter-color); }
.cumulative-point--1 { fill: #d0d8dd; }
.cumulative-point--2 { fill: #f1b75c; }
.cumulative-point--3 { fill: #62b7dc; }
.cumulative-point--reference { stroke: var(--text); stroke-width: 3; }

.chart-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1.25rem;
    margin: .5rem 0 1rem;
}

.legend-item {
    display: grid;
    grid-template-columns: 2.25rem auto 1fr;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .82rem;
}

.legend-item strong { color: var(--text); }
.legend-line { height: .25rem; border-radius: 99px; }
.legend-line--0 { background: var(--meter-color); }
.legend-line--1 { background: #d0d8dd; }
.legend-line--2 { background: #f1b75c; }
.legend-line--3 { background: #62b7dc; }

.reference-result {
    flex: 0 0 auto;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .025);
    text-align: right;
}

.reference-result strong { display: block; font-size: 1.25rem; }
.reference-result span { display: block; margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.reference-result--up strong { color: var(--danger); }
.reference-result--down strong { color: var(--accent); }

.type-tabs {
    display: flex;
    gap: .5rem;
    margin: 1rem 0;
}

.type-tab {
    padding: .65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.type-tab:hover,
.type-tab:focus-visible,
.type-tab--active {
    border-color: var(--meter-color);
    background: color-mix(in srgb, var(--meter-color) 16%, transparent);
    color: var(--text);
}

.manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    gap: 1rem;
}

.manage-grid .detail-section { margin-top: 0; }

.current-reading {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--meter-color) 55%, var(--border));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--meter-color) 8%, transparent);
}

.current-reading span,
.current-reading small { display: block; color: var(--muted); }
.current-reading strong { display: block; margin: .3rem 0; font-size: 1.45rem; }

.reading-form select,
.reading-form textarea {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: #10171c;
    color: var(--text);
    font: inherit;
}

.reading-form textarea { resize: vertical; }
.reading-form select:focus,
.reading-form textarea:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(98, 215, 146, .2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.field-help { display: block; margin-top: .35rem; color: var(--muted); }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 400;
}

.checkbox-label input { width: auto; margin: 0; }

.message ul { margin: .55rem 0 0; padding-left: 1.25rem; }

.detail-list,
.tariff-values { margin: 0; }

.detail-list div,
.tariff-values div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
}

.detail-list dt,
.tariff-values dt { color: var(--muted); }
.detail-list dd,
.tariff-values dd { margin: 0; text-align: right; font-weight: 700; }

.status {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: 99px;
    background: var(--surface-light);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
}

.status--active {
    background: rgba(98, 215, 146, .14);
    color: var(--accent);
}

.record-note {
    margin: 1rem 0 0;
    padding: .7rem .8rem;
    border-radius: .55rem;
    background: rgba(255, 255, 255, .035);
    color: var(--muted);
    font-size: .78rem;
}

.record-note--warning {
    border: 1px solid #80583d;
    color: #ffbd91;
}

.tariff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.tariff-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: rgba(0, 0, 0, .12);
}

.tariff-card--current { border-color: color-mix(in srgb, var(--meter-color) 65%, var(--border)); }
.tariff-card header { display: flex; justify-content: space-between; gap: 1rem; }
.tariff-card header strong,
.tariff-card header span { display: block; }
.tariff-card header div > span { margin-top: .25rem; color: var(--muted); font-size: .8rem; }
.tariff-period { margin: .75rem 0; color: var(--muted); font-size: .82rem; }
.meter-history-table td small { display: block; margin-top: .25rem; color: var(--muted); }

.comparison-table-wrap { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.data-table th,
.data-table td {
    padding: .75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.data-table th { color: var(--muted); font-size: .78rem; }
.data-table th:nth-child(2),
.data-table td:nth-child(2),
.data-table th:nth-child(3),
.data-table td:nth-child(3) { text-align: right; }
.data-table td small { display: block; margin-top: .2rem; color: var(--muted); }
.data-table--compact { width: min(40rem, 100%); }

@media (max-width: 64rem) {
    .meter-grid { grid-template-columns: 1fr; }
    .manage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
    .page { padding: 1rem 0 2rem; }
    .topbar { align-items: flex-start; }
    .topbar-actions { align-items: flex-end; flex-direction: column; }
    .meter-card__header { flex-direction: column; }
    .latest-reading { text-align: left; }
    .comparison { align-items: flex-start; flex-direction: column; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .reference-result { align-self: flex-start; text-align: left; }
    .chart-legend { grid-template-columns: 1fr; }
    .tariff-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .type-tabs { overflow-x: auto; }
    .type-tab { flex: 0 0 auto; }
    .period-form { align-items: flex-end; }
    .period-form label { display: none; }
    .detail-section { padding: 1rem; }
}