* {
    box-sizing: border-box;
    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;
}


body {

    margin:0;

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #eef2ff,
        #f8fafc
    );

    color:#1e293b;

}



.container {

    width:90%;

    max-width:1000px;

    margin:40px auto;

}



header {

    text-align:center;

    margin-bottom:30px;

}



header h1 {

    font-size:38px;

    color:#1d4ed8;

}



header p {

    color:#64748b;

    font-size:16px;

}





.card {

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:
    0 10px 30px
    rgba(0,0,0,0.08);

    margin-bottom:25px;

}



.section-title {

    font-weight:600;

    display:block;

    margin-bottom:12px;

}



textarea {

    width:100%;

    height:250px;

    resize:none;

    padding:18px;

    border-radius:12px;

    border:1px solid #cbd5e1;

    font-size:16px;

}



textarea:focus {

    outline:none;

    border-color:#2563eb;

}





.controls {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

}



.toggle-container {

    display:flex;

    gap:12px;

    align-items:center;

    font-weight:600;

}




.switch {

    position:relative;

    width:60px;

    height:30px;

}



.switch input {

    display:none;

}



.slider {

    position:absolute;

    cursor:pointer;

    inset:0;

    background:#2563eb;

    border-radius:30px;

}



.slider:before {

    content:"";

    position:absolute;

    height:24px;

    width:24px;

    left:3px;

    bottom:3px;

    background:white;

    border-radius:50%;

    transition:.3s;

}



input:checked + .slider {

    background:#16a34a;

}



input:checked + .slider:before {

    transform:translateX(30px);

}





button {

    background:#2563eb;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:12px;

    font-size:16px;

    cursor:pointer;

}



button:hover {

    background:#1d4ed8;

}




.result-card h2 {

    margin-top:0;

}



#summaryText {

    line-height:1.7;

    background:#f8fafc;

    padding:20px;

    border-radius:12px;

}



.metrics {

    display:flex;

    gap:20px;

    margin-top:20px;

}



.metrics div {

    flex:1;

    background:#eff6ff;

    padding:15px;

    border-radius:12px;

    text-align:center;

}



.metrics span {

    display:block;

    color:#64748b;

    font-size:14px;

}



.metrics strong {

    display:block;

    margin-top:8px;

    font-size:20px;

}



.hidden {

    display:none;

}