/* ===========================
   PESI Calculator
   Modern Medical UI
=========================== */

:root{

    --primary:#1565C0;
    --primary-light:#42A5F5;
    --secondary:#00ACC1;

    --success:#2E7D32;
    --warning:#EF6C00;
    --danger:#C62828;

    --background:#F4F8FC;

    --card:#FFFFFF;

    --text:#263238;

    --border:#DCE5EE;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.6;

}


/* Header */

header{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:white;

    text-align:center;

    padding:40px 20px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}

header h1{

    font-size:34px;

    font-weight:700;

}

header p{

    margin-top:10px;

    opacity:.9;

}


/* Container */

.container{

    width:92%;

    max-width:1050px;

    margin:40px auto;

}


/* Card */

.card{

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

}


/* Grid */

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}

.full{

    grid-column:1 / -1;

}


/* Labels */

label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#455A64;

}


/* Inputs */

input[type=text],
input[type=number],
input[type=date],
select{

    width:100%;

    padding:14px;

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

    border-radius:12px;

    font-size:15px;

    transition:.25s;

    background:white;

}

input:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(21,101,192,.12);

}


/* Radio */

.radio-group{

    display:flex;

    gap:20px;

    align-items:center;

}

.radio-group label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

}


/* Switch */

.switch{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#F7FAFD;

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

    border-radius:12px;

    padding:14px 18px;

}

.switch:hover{

    background:#EEF6FD;

}


/* Checkbox */

.switch input{

    width:22px;

    height:22px;

    accent-color:var(--primary);

}


/* Buttons */

.button-group{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}

button{

    border:none;

    cursor:pointer;

    border-radius:12px;

    padding:15px 34px;

    font-size:16px;

    font-weight:600;

    transition:.25s;

}

.btn-primary{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:white;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(21,101,192,.3);

}

.btn-secondary{

    background:#ECEFF1;

}

.btn-secondary:hover{

    background:#CFD8DC;

}


/* Result */

.result{

    display:none;

    margin-top:35px;

    padding:25px;

    border-radius:16px;

    box-shadow:var(--shadow);

}

.result h2{

    margin-bottom:12px;

}

.result-score{

    font-size:50px;

    font-weight:700;

}

.result-class{

    font-size:22px;

    margin-top:10px;

}


/* Risk Colors */

.risk1{

    background:#E8F5E9;

    border-left:8px solid #43A047;

}

.risk2{

    background:#E3F2FD;

    border-left:8px solid #1E88E5;

}

.risk3{

    background:#FFF8E1;

    border-left:8px solid #FB8C00;

}

.risk4{

    background:#FBE9E7;

    border-left:8px solid #F4511E;

}

.risk5{

    background:#FFEBEE;

    border-left:8px solid #C62828;

}


/* Literature */

.references{

    margin-top:40px;

    background:white;

    border-radius:16px;

    padding:30px;

    box-shadow:var(--shadow);

}

.references h3{

    margin-bottom:20px;

}

.references li{

    margin-bottom:10px;

}


/* Footer */

footer{

    margin-top:50px;

    padding:20px;

    text-align:center;

    color:#78909C;

}


/* Responsive */

@media(max-width:900px){

.form-grid{

grid-template-columns:1fr;

}

.button-group{

flex-direction:column;

}

button{

width:100%;

}

header h1{

font-size:28px;

}

}


/* Print */

@media print{

header,
.button-group,
footer{

display:none;

}

body{

background:white;

}

.card,
.references{

box-shadow:none;

border:1px solid #ddd;

}

}