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

body{

    font-family:Arial,Helvetica,sans-serif;
    background:#f3f4f6;
    color:#1f2937;

}

.container{

    max-width:850px;
    margin:50px auto;
    background:white;
    padding:40px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.brand{

    text-align:center;
    color:#2563eb;
    margin-bottom:10px;

}

h1{

    text-align:center;
    margin-bottom:10px;
    font-size:40px;

}

.subtitle{

    text-align:center;
    color:#6b7280;
    margin-bottom:10px;

}

.privacy{

    text-align:center;
    font-size:14px;
    color:#6b7280;
    margin-bottom:35px;

}


.calculator{

    background:#f9fafb;
    border-radius:18px;
    padding:25px;

}


/* Display */

#display{

    width:100%;
    height:70px;
    font-size:34px;
    padding:15px;
    border:2px solid #d1d5db;
    border-radius:12px;
    margin-bottom:20px;
    text-align:right;
    outline:none;

}

#display:focus{

    border-color:#2563eb;

}


/* DEG/RAD indicator */

#angleIndicator{

    font-size:12px;
    color:#6b7280;
    font-weight:bold;
    margin-bottom:5px;

}


/* Top action buttons */

.action-row{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:18px;

}


/* Main calculator buttons */

.button-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;

}


/* Buttons */

button{

    border:none;
    background:#2563eb;
    color:white;
    padding:18px;
    border-radius:12px;
    cursor:pointer;
    font-size:18px;
    transition:.2s;

}


button:hover{

    background:#1d4ed8;
    transform:translateY(-2px);

}


button:active{

    transform:scale(.98);

}


/* Special buttons */

.equals{

    background:#16a34a;

}


.equals:hover{

    background:#15803d;

}


.danger{

    background:#dc2626;

}


.danger:hover{

    background:#b91c1c;

}


/* Make zero button wider */

.zero{

    grid-column:span 2;

}


/* Make equals normal size */

.equals{

    grid-column:span 1;

}


/* Result */

.result-box{

    margin-top:25px;
    background:#eff6ff;
    border-left:5px solid #2563eb;
    padding:18px;
    border-radius:10px;
    font-size:18px;

}


#answerLabel{

    font-weight:bold;
    color:#2563eb;

}


/* Instructions */

.how-to{

    margin-top:35px;

}


.how-to h2{

    margin-bottom:12px;

}


.how-to ul{

    padding-left:20px;
    line-height:1.8;
    color:#4b5563;

}


footer{

    margin-top:40px;
    text-align:center;
    color:#9ca3af;
    font-size:14px;

}


/* =====================================
   Scientific Calculator - Mobile
====================================== */

@media (max-width: 700px) {

    body {
        background: #f3f4f6;
    }


    .container {
        width: calc(100% - 20px);
        max-width: none;
        margin: 20px auto;
        padding: 20px 15px;
        border-radius: 16px;
    }


    .brand {
        font-size: 20px;
        margin-bottom: 8px;
    }


    h1 {
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: 8px;
    }


    .subtitle {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 8px;
    }


    .privacy {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 25px;
    }


    .calculator {
        padding: 15px;
        border-radius: 16px;
    }


    /* Calculator display */

    #display {
        height: 62px;
        font-size: 26px;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 10px;
    }


    #angleIndicator {
        font-size: 11px;
        margin-bottom: 4px;
    }


    /* Calculator buttons */

    .button-grid,
    .action-row {
        gap: 8px;
    }


    button {
        padding: 15px 5px;
        min-height: 52px;
        font-size: 16px;
        border-radius: 10px;
    }


    /* Result */

    .result-box {
        margin-top: 20px;
        padding: 15px;
        font-size: 16px;
    }


    /* Instructions */

    .how-to {
        margin-top: 25px;
    }


    .how-to ul {
        line-height: 1.7;
        padding-left: 20px;
        font-size: 15px;
    }


    /* Footer */

    footer {
        margin-top: 30px;
        padding-bottom: 20px;
    }

}

/* =====================================
   Navigation
====================================== */

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    background:white;

    border-bottom:1px solid #e5e7eb;

    position:sticky;

    top:0;

    z-index:1000;

}


.logo a{

    color:#1f2937;

    text-decoration:none;

    font-size:22px;

    font-weight:bold;

}


.nav-links{

    display:flex;

    gap:25px;

}


.nav-links a{

    color:#4b5563;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}


.nav-links a:hover{

    color:#2563eb;

}


/* =====================================
   Back to Top
====================================== */

#backToTop{

    position:fixed;

    bottom:30px;

    right:30px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:white;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    display:none;

    align-items:center;

    justify-content:center;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

    transition:.2s;

    z-index:999;

}


#backToTop:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}


#backToTop:active{

    transform:scale(.95);

}


/* =====================================
   Mobile Navigation
====================================== */

@media(max-width:700px){

    nav{

        padding:18px 20px;

    }


    .nav-links{

        gap:14px;

        font-size:14px;

    }


    #backToTop{

        width:46px;

        height:46px;

        right:20px;

        bottom:20px;

        font-size:21px;

    }

}

/* =====================================
   Tools Dropdown Navigation
====================================== */

.tools-dropdown {

    position: relative;

    display: inline-block;

}


.tools-dropdown-button {

    background: none;

    border: none;

    color: #4b5563;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    padding: 0;

    margin: 0;

}


.tools-dropdown-button:hover {

    background: none;

    color: #4b5563;

}


/* Dropdown menu */

.tools-dropdown-menu {

    display: none;

    position: absolute;

    right: 0;

    top: 100%;

    width: 240px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 12px;

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

    padding: 8px;

    z-index: 2000;

}


/* Keep dropdown open while hovering */

.tools-dropdown:hover .tools-dropdown-menu {

    display: block;

}


/* Dropdown links */

.tools-dropdown-menu a {

    display: block;

    padding: 11px 14px;

    color: #374151;

    text-decoration: none;

    border-radius: 8px;

    font-size: 15px;

}


.tools-dropdown-menu a:hover {

    background: #f3f4f6;

    color: #2563eb;

}


/* Current tool */

.tools-dropdown-menu a.current-tool {

    background: #eff6ff;

    color: #2563eb;

    font-weight: bold;

}


.tools-dropdown-menu a.current-tool:hover {

    background: #dbeafe;

    color: #1d4ed8;

}

/* =====================================
   Share This Tool
====================================== */

.share-section {

    width: 100%;

    max-width: 700px;

    margin: 60px auto 40px auto;

    padding: 35px 25px;

    text-align: center;

    background: #f3f4f6;

    border-radius: 16px;

}


.share-section h2 {

    margin: 0 0 10px 0;

    text-align: center;

}


.share-section p {

    color: #6b7280;

    margin: 0 auto 20px auto;

    text-align: center;

}


#shareButton {

    display: block;

    margin: 0 auto;

    background: #2563eb;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 10px;

    font-size: 16px;

    cursor: pointer;

    transition: 0.2s;

}


#shareButton:hover {

    background: #1d4ed8;

}