/* ===========================================================
   Residential HVAC Cooling Load Calculator
   Production Stylesheet
   =========================================================== */

:root{

    --bg:#eef3f8;
    --surface:#ffffff;
    --surface-2:#f8fafc;

    --primary:#0f4c81;
    --primary-dark:#08345a;
    --primary-light:#e6f1fb;

    --success:#1e9b63;
    --warning:#e6a700;
    --danger:#d94444;

    --text:#1b2430;
    --text-light:#64748b;

    --border:#d9e3ee;

    --shadow-sm:0 4px 12px rgba(15,76,129,.08);
    --shadow-md:0 12px 30px rgba(15,76,129,.10);
    --shadow-lg:0 20px 50px rgba(15,76,129,.16);

    --radius:18px;

    --transition:.25s ease;

    --max-width:1500px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    font-size:16px;
    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.55;

    min-height:100vh;

}

img{

    display:block;
    max-width:100%;

}

button,
input,
select{

    font-family:inherit;

}

button{

    cursor:pointer;

}

.page{

    width:100%;

    max-width:var(--max-width);

    margin:auto;

    padding:30px;

}

.topbar{

    background:linear-gradient(
        135deg,
        var(--primary),
        #1c689f
    );

    border-radius:24px;

    padding:28px 36px;

    color:white;

    margin-bottom:28px;

    box-shadow:var(--shadow-lg);

}

.brand{

    display:flex;

    align-items:center;

    gap:24px;

}

.brand-icon{

    width:78px;

    height:78px;

    border-radius:18px;

    background:rgba(255,255,255,.15);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    font-weight:800;

    backdrop-filter:blur(10px);

}

.brand-text h1{

    font-size:2rem;

    font-weight:800;

    margin-bottom:6px;

}

.brand-text p{

    opacity:.9;

    font-size:.96rem;

}

.layout{

    display:grid;

    grid-template-columns:

        minmax(420px,1fr)
        480px;

    gap:28px;

    align-items:start;

}

.left-panel{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.right-panel{

    display:flex;

    flex-direction:column;

    gap:24px;

    position:sticky;

    top:24px;

}

.card{

    background:var(--surface);

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

}

.card-header{

    padding:22px 26px;

    border-bottom:1px solid var(--border);

    background:var(--surface-2);

}

.card-header h2{

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:6px;

}

.card-header p{

    color:var(--text-light);

    font-size:.92rem;

}

.card-body{

    padding:26px;

}

.form-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    font-size:.9rem;

    font-weight:600;

    color:var(--text);

}

.form-group input,
.form-group select{

    width:100%;

    border:1px solid var(--border);

    border-radius:12px;

    background:white;

    padding:14px 15px;

    font-size:.95rem;

    transition:var(--transition);

    outline:none;

}

.form-group input:hover,
.form-group select:hover{

    border-color:#8db8de;

}

.form-group input:focus,
.form-group select:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px
        rgba(15,76,129,.12);

}

.action-card{

    display:flex;

    gap:18px;

    padding:26px;

}

.calculate-button{

    flex:1;

    border:none;

    background:linear-gradient(
        135deg,
        var(--primary),
        #1d77bb
    );

    color:white;

    padding:16px;

    border-radius:14px;

    font-size:1rem;

    font-weight:700;

    transition:var(--transition);

}

.calculate-button:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);

}

.reset-button{

    width:180px;

    border:1px solid var(--border);

    background:white;

    color:var(--text);

    border-radius:14px;

    font-weight:600;

    transition:var(--transition);

}

.reset-button:hover{

    background:#f4f8fc;

}

.results-card{

    border:2px solid rgba(15,76,129,.08);

}

.result-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px;

}

.result-item{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:18px;

    background:var(--surface-2);

    border-radius:14px;

    border:1px solid var(--border);

}

.result-item.full-width{

    grid-column:1/-1;

}

.result-label{

    font-size:.82rem;

    font-weight:600;

    color:var(--text-light);

    text-transform:uppercase;

    letter-spacing:.05em;

}

.result-value{

    font-size:1.2rem;

    font-weight:700;

    color:var(--text);

    word-break:break-word;

}

.result-value.highlight{

    color:var(--primary);

    font-size:1.45rem;

}

.equipment-result{

    font-size:1.15rem;

    font-weight:700;

    color:var(--success);

}

.summary-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.summary-list li{

    position:relative;

    padding-left:24px;

    color:var(--text);

}

.summary-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--success);

    font-weight:700;

}

.notes{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.notes p{

    color:var(--text-light);

    font-size:.93rem;

}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{

    -webkit-appearance:none;
    margin:0;

}

input[type=number]{

    appearance:textfield;
    -moz-appearance:textfield;

}

::selection{

    background:rgba(15,76,129,.18);

}

.card,
button,
input,
select{

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}

@media (max-width:1200px){

    .layout{

        grid-template-columns:1fr;

    }

    .right-panel{

        position:static;

    }

}

@media (max-width:768px){

    .page{

        padding:18px;

    }

    .topbar{

        padding:22px;

    }

    .brand{

        flex-direction:column;

        align-items:flex-start;

    }

    .brand-text h1{

        font-size:1.55rem;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    .action-card{

        flex-direction:column;

    }

    .reset-button{

        width:100%;

        min-height:54px;

    }

    .calculate-button{

        min-height:54px;

    }

}

@media (max-width:480px){

    html{

        font-size:15px;

    }

    .card-header,
    .card-body{

        padding:18px;

    }

    .brand-icon{

        width:64px;

        height:64px;

        font-size:1.2rem;

    }

    .brand-text h1{

        font-size:1.35rem;

    }

}