.tool-area{
    padding:60px 20px;
    display:flex;
    justify-content:center;
}

.scientific-card{
    width:100%;
    max-width:560px;
    background:#2d3748;
    padding:22px;
    border-radius:22px;
    box-shadow:0 14px 38px rgba(0,0,0,.25);
}

.scientific-title{
    text-align:center;
    color:white;
    font-size:25px;
    font-weight:bold;
    margin-bottom:16px;
}

.display{
    background:#111827;
    border-radius:14px;
    padding:16px;
    margin-bottom:16px;
    color:white;
    border:1px solid rgba(255,255,255,.08);
}

/* =====================================================
   RESULT IN WORDS
===================================================== */

.scientific-number-words{

    margin-top:12px;

    padding:14px 16px;

    border-radius:12px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    color:#1f2937;

    font-size:15px;

    line-height:1.7;

    font-weight:500;

    word-break:break-word;

}

.expression{
    min-height:34px;
    font-size:20px;
    text-align:right;
    word-wrap:break-word;
    overflow-wrap:break-word;
    color:#cbd5e1;
}

.result{
    min-height:46px;
    font-size:34px;
    font-weight:bold;
    text-align:right;
}

.buttons,
.utility{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.utility{
    margin-top:10px;
}

.sci-btn{
    height:58px;
    border:none;
    border-radius:11px;
    font-size:18px;
    cursor:pointer;
    transition:.2s;
    font-weight:bold;
}

.sci-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

.num{
    background:#e2e8f0;
    color:#111827;
}

.operator{
    background:#10b981;
    color:white;
}

.function{
    background:#475569;
    color:white;
}

.equal{
    background:#2563eb;
    color:white;
}

.clear{
    background:#dc2626;
    color:white;
}

.special{
    background:#7c3aed;
    color:white;
}

.status{
    margin-top:12px;
    text-align:center;
    color:#cbd5e1;
    font-size:14px;
}

.back-home{
    display:block;
    margin-top:16px;
    text-align:center;
    text-decoration:none;
    color:#10B981;
    font-weight:bold;
}

.back-home:hover{
    text-decoration:underline;
}

body.dark-mode .scientific-card{
    background:#1f2937;
}

body.dark-mode .display{
    background:#111827;
    border-color:#374151;
}

body.dark-mode .scientific-number-words{

    background:#111827;

    border-color:#374151;

    color:#f8fafc;

}

body.dark-mode .num{
    background:#374151;
    color:#e5e7eb;
}

@media(max-width:600px){
    .scientific-card{
        padding:16px;
    }

    .sci-btn{
        height:52px;
        font-size:16px;
    }

    .result{
        font-size:28px;
    }

    .scientific-title{
        font-size:20px;
    }
}

/* =====================================================
   COMPACT LAPTOP HEIGHT
   Keeps the full scientific calculator visible
   at 100% browser zoom on shorter desktop screens
===================================================== */

@media (max-height:850px) and (min-width:601px){

    .tool-area{
        padding:24px 20px 12px;
        align-items:flex-start;
    }

    .scientific-card{
        max-width:520px;
        padding:14px;
        border-radius:18px;
    }

    .scientific-title{
        font-size:21px;
        margin-bottom:8px;
    }

    .display{
        padding:10px 12px;
        margin-bottom:8px;
        border-radius:11px;
    }

    .expression{
        min-height:24px;
        font-size:16px;
    }

    .result{
        min-height:34px;
        font-size:28px;
    }

    .buttons,
    .utility{
        gap:7px;
    }

    .utility{
        margin-top:7px;
    }

    .sci-btn{
        height:46px;
        font-size:16px;
        border-radius:9px;
    }

    .status{
        margin-top:6px;
        font-size:12px;
    }

    .back-home{
        margin-top:8px;
        font-size:14px;
    }
}