* {
    box-sizing: border-box;
    font-family: system-ui, 'Segoe UI', 'Inter', 'Helvetica Neue', sans-serif;
}

body {
    background: linear-gradient(145deg, #e9f5f0 0%, #d4e9e2 100%);
    margin: 0;
    padding: 24px 20px;
}

.dashboard {
    max-width: 1400px;
    margin: 0 auto;
}

h1 {
    font-size: 1.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1d6f42, #0b4f2f);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.subhead {
    color: #2c5a3e;
    margin-bottom: 32px;
    border-left: 4px solid #2e7d5e;
    padding-left: 16px;
    font-weight: 500;
}

/* card layout */
.card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    border-radius: 2rem;
    box-shadow: 0 12px 28px rgba(0, 32, 16, 0.12);
    padding: 1.6rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(72, 187, 120, 0.25);
}

.input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-bottom: 1.8rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    color: #1a4c33;
    display: flex;
    align-items: center;
    gap: 6px;
}

input, select {
    color: black;
    background: #fefef7;
    border: 1px solid #cbdcd2;
    border-radius: 60px;
    padding: 10px 16px;
    font-size: 0.9rem;
    transition: 0.2s;
    outline: none;
}


input:focus, select:focus {
    border-color: #2b8c5e;
    box-shadow: 0 0 0 3px rgba(43, 140, 94, 0.2);
}

button {
    background: #1f6e48;
    color: white;
    border: none;
    border-radius: 60px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

button:hover {
    background: #0f5538;
    transform: scale(0.98);
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
    margin-bottom: 28px;
}

.range-input {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    padding: 10px 0px;
}

.graph-container {
    margin-top: 28px;
    background: #ffffffcc;
    border-radius: 1.8rem;
    padding: 1rem;
}

canvas {
    max-height: 420px;
    width: 100%;
}

.result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    justify-content: space-between;
}

.stat-card {
    background: #eef6f1;
    border-radius: 1.5rem;
    padding: 12px 20px;
    flex: 1;
    text-align: center;
    border-left: 5px solid #327a5a;
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1d5e42;
}

.badge {
    background: #cfe8de;
    padding: 4px 10px;
    border-radius: 40px;
    font-size: 0.75rem;
    font-weight: 500;
}

hr {
    margin: 24px 0;
    border-color: #c0dbc9;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
}

.inline-hint {
    font-size: 0.7rem;
    color: #4f6b5c;
}

@media (max-width: 700px) {
    body { padding: 16px; }
    .stat-value { font-size: 1.3rem; }
}
/* ADDITIONAL STYLES – ONLY LAYOUT MODIFICATIONS, NO CLASS NAME CHANGES */
/* This overrides the previous grid system to place graph on left, inputs on right.
   Original classes remain untouched; we just change the dashboard container structure
   and reposition elements using order and flex direction.
   Since we cannot alter HTML structure, we use CSS Grid on the .dashboard parent
   and reorder children: .card (inputs/controls) and .graph-container.
   We also ensure the history button stays in correct position. */

.dashboard {
    display: grid;
    grid-template-columns: 1.5fr 1fr;  /* left column: graph, right column: card */
    gap: 1.8rem;
    align-items: start;
}

/* The first child is the heading row (h1 + history button).
   We need that to span full width across both columns */
.dashboard > :first-child {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* The .card (all input fields and compute button) goes to the right column */
.dashboard > .card {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
    height: fit-content;
    position: sticky;
    top: 20px;
}

/* The graph-container moves to the left column */
.dashboard > .graph-container {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    margin-top: 0;
    background: #ffffffcc;
    border-radius: 1.8rem;
    padding: 1rem;
}

/* Ensure responsiveness: on smaller screens, revert to column layout */
@media (max-width: 880px) {
    .dashboard {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .dashboard > .card,
    .dashboard > .graph-container {
        grid-column: 1 / -1;
        grid-row: auto;
        position: static;
    }
    .dashboard > :first-child {
        grid-column: 1 / -1;
    }
}

/* Tweak spacing inside .card for consistency */
.card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    border-radius: 2rem;
    box-shadow: 0 12px 28px rgba(0, 32, 16, 0.12);
    padding: 1.6rem;
}

/* Maintain graph canvas responsiveness */
.graph-container canvas {
    max-height: 400px;
    width: 100%;
}

/* Adjust metaInfo refresh — no structural changes, only fine-tuning for readability */
#metaInfo {
    white-space: nowrap;
}

/* Ensure stats cards are visually balanced on left column */
.result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    justify-content: space-between;
}

/* Keep chart area comfortable */
#powerChart {
    max-height: 380px;
}